:root {
  --ink:#171713;
  --muted:#77736a;
  --line:#e6e1d6;
  --paper:#f6f4ee;
  --white:#fff;
  --brand:#11110f;
  --brand-2:#2d2a23;
  --accent:#d3aa2d;
  --accent-soft:#fff8e5;
  --mint:#f1e5b7;
  --sand:#f0ede4;
  --green:#155e4d;
  --green-soft:#e5f2ec;
  --blue-soft:#eaf1fb;
  --danger:#98372f;
  --shadow:0 18px 50px rgba(31,27,18,.10);
  --shadow-soft:0 10px 28px rgba(31,27,18,.055);
  --safe:env(safe-area-inset-bottom,0px);
}

* { box-sizing:border-box; }
html { background:#e8e6df; }
body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#e8e6df;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,button,input,select,textarea { font-size:16px; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
img { max-width:100%; }

.app-shell {
  width:100%;
  max-width:760px;
  min-height:100vh;
  margin:0 auto;
  background:var(--paper);
  position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.08);
  overflow:hidden;
}
.muted { color:var(--muted); }
.eyebrow {
  display:block;
  margin-bottom:7px;
  font-size:11px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.12em;
  color:#896f2d;
}
.tiny-note { font-size:12px!important; }
.with-nav { padding-bottom:112px!important; }

/* Header */
.topbar {
  position:sticky;
  top:0;
  z-index:30;
  min-height:76px;
  padding:14px 18px;
  background:rgba(248,247,242,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(231,227,216,.92);
  display:flex;
  align-items:center;
  gap:13px;
}
.icon-btn {
  width:46px;
  height:46px;
  flex:0 0 46px;
  border:1px solid rgba(231,227,216,.75);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  display:grid;
  place-items:center;
  box-shadow:0 7px 22px rgba(23,33,31,.09);
  cursor:pointer;
  font-size:25px;
  line-height:1;
}
.brand-logo {
  width:50px;
  height:50px;
  border-radius:15px;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(25,23,17,.07);
  flex:0 0 auto;
}
.brand-logo img { width:92%; height:92%; object-fit:contain; display:block; }
.topbar-title { min-width:0; }
.topbar-title small { display:block; color:var(--muted); font-size:12px; line-height:1.25; }
.topbar-title h1 {
  margin:2px 0 0;
  font-size:21px;
  line-height:1.15;
  letter-spacing:-.025em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.screen { padding:18px 18px 40px; }

/* Home */
.hero {
  border-radius:30px;
  padding:25px;
  background:radial-gradient(circle at 80% 15%,rgba(216,170,32,.30),transparent 25%),linear-gradient(145deg,#10100f 0%,#27251f 72%,#b58b19 140%);
  color:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero:after {
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  border-radius:50%;
  right:-65px;
  top:-65px;
  background:rgba(255,255,255,.07);
  pointer-events:none;
}
.hero-kicker { font-size:12px; line-height:1.35; letter-spacing:.08em; opacity:.78; }
.hero h2 { font-size:35px; line-height:1.04; margin:10px 0 12px; max-width:440px; letter-spacing:-.03em; }
.hero p { margin:0; max-width:520px; opacity:.84; line-height:1.55; }
.hero-stat { display:flex; gap:9px; margin-top:22px; flex-wrap:wrap; }
.pill { display:inline-flex; align-items:center; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.12); font-size:12px; line-height:1.2; }
.section { margin-top:26px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-head h3 { margin:0; font-size:24px; line-height:1.15; letter-spacing:-.025em; }
.section-head a { font-size:13px; color:var(--brand); font-weight:800; }
/* Monthly schedule calendar (v9.3) */
.calendar-section {
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:18px;
  box-shadow:var(--shadow-soft);
}
.calendar-toolbar {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.calendar-title { text-align:center; min-width:0; }
.calendar-title small { display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.calendar-title h3 { margin:3px 0 0; font-size:23px; line-height:1.15; letter-spacing:-.025em; }
.calendar-nav {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font-size:30px;
  line-height:1;
  font-weight:700;
  box-shadow:0 6px 16px rgba(31,27,18,.05);
}
.calendar-nav:active { transform:scale(.97); }
.calendar-nav.is-disabled { opacity:.28; background:var(--sand); box-shadow:none; }
.calendar-weekdays,
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.calendar-weekdays { margin-bottom:7px; }
.calendar-weekdays span { text-align:center; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.calendar-day {
  position:relative;
  min-width:0;
  aspect-ratio:1;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  font-weight:900;
  overflow:hidden;
}
.calendar-day-number { font-size:15px; line-height:1; }
.calendar-day.is-available { background:#fff; color:var(--ink); cursor:pointer; transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.calendar-day.is-available:hover { transform:translateY(-1px); border-color:#c9c2b3; box-shadow:0 7px 16px rgba(31,27,18,.07); }
.calendar-day.is-available.active { background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 8px 18px rgba(17,17,15,.14); }
.calendar-dot { width:5px; height:5px; border-radius:999px; background:var(--accent); margin-top:6px; }
.calendar-day.active .calendar-dot { background:#f4d76f; }
.calendar-day.is-locked { background:#efede7; color:#aaa59a; border-color:#e4e0d6; cursor:not-allowed; }
.calendar-day.is-past { opacity:.52; }
.calendar-lock { font-size:9px; line-height:1; margin-top:5px; color:#b7b1a6; font-weight:900; }
.calendar-day.is-blank { border-color:transparent; background:transparent; box-shadow:none; }
.calendar-legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:14px; color:var(--muted); font-size:11px; line-height:1.35; }
.calendar-legend span { display:inline-flex; align-items:center; gap:6px; }
.legend-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.legend-lock { width:15px; height:15px; border-radius:5px; display:grid; place-items:center; background:#efede7; color:#aaa59a; font-size:9px; font-style:normal; font-weight:900; }
.class-list { display:grid; gap:12px; }
.class-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow:var(--shadow-soft); }
.class-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.time { font-weight:900; font-size:18px; }
.duration,.meta { color:var(--muted); }
.class-card h4 { font-size:21px; line-height:1.2; margin:12px 0 4px; letter-spacing:-.02em; }
.meta { display:flex; align-items:center; gap:8px; margin-top:9px; font-size:14px; line-height:1.45; }
.slot { font-size:12px; line-height:1.2; background:var(--mint); color:var(--brand); font-weight:800; padding:7px 10px; border-radius:999px; white-space:nowrap; }

/* Buttons */
.btn {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:16px;
  padding:13px 18px;
  font-weight:900;
  line-height:1.2;
  cursor:pointer;
  transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease;
}
.btn:active { transform:scale(.985); }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 8px 18px rgba(17,17,15,.12); }
.btn-outline { background:#fff; border:1px solid #d0ccc0; color:var(--ink); }
.btn-wide { width:100%; }
.class-card .btn { margin-top:16px; }
.empty { padding:34px 20px; text-align:center; background:#fff; border:1px dashed #cec8ba; border-radius:24px; color:var(--muted); }

/* Bottom navigation */
.bottom-nav {
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  z-index:40;
  width:min(760px,100%);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:8px 10px calc(8px + var(--safe));
}
.bottom-nav a {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  color:#817f78;
  font-size:11px;
  line-height:1.15;
  padding:2px 3px 1px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav .nav-icon {
  width:42px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:13px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.bottom-nav .nav-icon svg {
  width:23px;
  height:23px;
  display:block;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bottom-nav .nav-label {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.bottom-nav a.active {
  color:var(--brand);
  font-weight:900;
}
.bottom-nav a.active .nav-icon {
  color:#17140d;
  background:#f3dfa0;
  box-shadow:0 5px 14px rgba(184,143,27,.16);
  transform:translateY(-1px);
}
.bottom-nav a:active .nav-icon { transform:scale(.94); }
@media (min-width:520px) {
  .bottom-nav { padding-left:22px; padding-right:22px; }
  .bottom-nav a { font-size:12px; }
  .bottom-nav .nav-icon { width:44px; height:36px; }
  .bottom-nav .nav-icon svg { width:24px; height:24px; }
}

/* Class detail */
.detail-hero {
  min-height:332px;
  border-radius:0 0 34px 34px;
  padding:26px 22px 76px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:radial-gradient(circle at 75% 15%,rgba(216,170,32,.32),transparent 28%),linear-gradient(145deg,#11110f,#302d25 66%,#b88f1b);
  position:relative;
}
.detail-hero > div { width:100%; }
.detail-hero h1 { max-width:620px; font-size:38px; line-height:1.04; margin:7px 0 0; letter-spacing:-.04em; }
.detail-hero .icon-btn { position:absolute; top:22px; left:18px; }
.hero-slot {
  display:inline-flex;
  align-items:center;
  margin-top:14px;
  padding:8px 12px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  font-size:12px;
  line-height:1.2;
  font-weight:850;
}
.floating-card {
  margin:-42px 18px 0;
  position:relative;
  z-index:3;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:19px;
  box-shadow:var(--shadow);
}
.info-grid { display:grid; gap:15px; }
.info-row { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:center; line-height:1.45; }
.info-row > span { color:#6d695f; text-align:center; }
.content-card { margin:16px 18px; background:#fff; border:1px solid var(--line); border-radius:24px; padding:20px; box-shadow:0 8px 24px rgba(31,27,18,.03); }
.content-card h3 { margin:0 0 12px; font-size:23px; line-height:1.18; letter-spacing:-.025em; }
.content-card p { margin-top:0; line-height:1.65; }
.attendee-box,.notice,.plan-card { border-radius:18px; }
.attendee-box { border:1px solid var(--line); padding:16px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.attendee-box strong { min-width:0; overflow-wrap:anywhere; }
.attendee-box span { color:var(--muted); font-size:13px; text-align:right; overflow-wrap:anywhere; }
.notice { background:var(--blue-soft); padding:16px; line-height:1.55; }

.select-plan-list { display:grid; gap:12px; }
.select-plan {
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  background:#fff;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px 18px;
  align-items:center;
}
.select-plan > div:first-child { min-width:0; }
.select-plan strong { display:block; font-size:17px; line-height:1.25; overflow-wrap:anywhere; }
.select-plan span { display:block; color:var(--muted); font-size:13px; line-height:1.45; margin-top:5px; }
.select-plan-action { min-width:122px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.select-plan-action b { display:block; margin:0; font-size:16px; line-height:1.2; white-space:nowrap; }
.select-plan-action .btn { min-height:40px; padding:9px 15px; border-radius:13px; font-size:13px; }
.badge-soft { display:inline-block!important; background:var(--sand); padding:7px 10px; border-radius:999px; color:var(--muted)!important; margin:0!important; }
.map-box { height:170px; border-radius:22px; background:linear-gradient(135deg,#e0e9e5,#efe9dc); position:relative; overflow:hidden; }
.map-box:before,.map-box:after { content:""; position:absolute; background:#fff9; height:8px; border-radius:8px; transform:rotate(-18deg); }
.map-box:before { width:120%; left:-10%; top:38%; }
.map-box:after { width:90%; left:20%; top:65%; transform:rotate(20deg); }
.pin { position:absolute; left:50%; top:45%; width:28px; height:28px; background:#d94c3d; border-radius:50% 50% 50% 0; transform:translate(-50%,-50%) rotate(-45deg); z-index:2; }
.pin:after { content:""; width:10px; height:10px; background:#fff; border-radius:50%; position:absolute; left:9px; top:9px; }

/* Forms */
.form-grid { display:grid; gap:15px; }
.field label { display:block; font-size:13px; font-weight:900; margin:0 0 7px; }
.field input,.field select,.field textarea {
  width:100%;
  min-height:50px;
  padding:14px 15px;
  border:1px solid #d9d4c7;
  border-radius:15px;
  background:#fff;
  color:var(--ink);
  outline:none;
}
.field textarea { min-height:118px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder { color:#aaa69d; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#b98c18; box-shadow:0 0 0 4px rgba(216,170,32,.12); }
.field small { display:block; color:var(--muted); font-size:11px; margin:6px 2px 0; line-height:1.45; }
.booking-summary-mini { margin:0 0 16px; }
.booking-summary-mini h3 { margin-bottom:5px; }
.booking-summary-mini p { margin-bottom:0; }
.mini-price { margin-top:15px; border-top:1px solid var(--line); padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mini-price span { min-width:0; }
.mini-price strong { white-space:nowrap; }
.guest-chip { font-size:12px; font-weight:800; line-height:1.2; padding:8px 11px; border-radius:999px; background:var(--sand); white-space:nowrap; }

/* Checkout */
.checkout-page {
  padding:2px 0 calc(150px + var(--safe));
}
.checkout-form { display:block; }
.summary-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  margin:14px 16px 0;
  box-shadow:0 7px 22px rgba(31,27,18,.035);
}
.summary-card h3 { margin:0 0 14px; font-size:22px; line-height:1.18; }
.plan-summary { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.plan-summary > div { min-width:0; }
.plan-summary h2 { font-size:25px; line-height:1.15; margin:0 0 12px; letter-spacing:-.03em; overflow-wrap:anywhere; }
.plan-summary .meta { margin-top:7px; line-height:1.4; }
.summary-price { font-size:20px; white-space:nowrap; }
.summary-row { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:12px 0; line-height:1.4; }
.summary-row > span:first-child { min-width:0; }
.summary-row > span:last-child { white-space:nowrap; text-align:right; }
.summary-row + .summary-row { border-top:1px solid rgba(230,225,214,.75); }
.summary-row.total { font-size:20px; font-weight:900; border-top:1px solid var(--line); margin-top:3px; padding-top:15px; }
.checkout-pad { padding:16px 16px 0; }

.payment-methods { display:block; }
.payment-methods .section-head { margin-bottom:15px; }
.payment-methods .section-head h3 { font-size:25px; line-height:1.13; }
.payment-option {
  display:block;
  position:relative;
  margin-top:10px;
  cursor:pointer;
}
.payment-option > input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.payment-option-card {
  min-height:78px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 24px;
  align-items:center;
  gap:13px;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:19px;
  background:#fff;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.payment-option > input:checked + .payment-option-card {
  border-color:#c79b27;
  background:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(211,170,45,.10);
}
.payment-icon {
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--sand);
  color:#4d493f;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:800;
}
.payment-copy { min-width:0; }
.payment-copy strong { display:block; font-size:16px; line-height:1.25; }
.payment-copy small { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.4; }
.radio-dot {
  width:22px;
  height:22px;
  border:2px solid #aaa599;
  border-radius:50%;
  position:relative;
  justify-self:end;
  background:#fff;
}
.payment-option > input:checked + .payment-option-card .radio-dot { border-color:#b4891b; }
.payment-option > input:checked + .payment-option-card .radio-dot:after {
  content:"";
  position:absolute;
  inset:4px;
  background:#b4891b;
  border-radius:50%;
}
.payment-preview {
  display:none;
  margin:10px 0 2px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fbfaf7;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.payment-preview.is-visible { display:block; }
.bank-number { font-size:20px; font-weight:900; color:var(--ink); letter-spacing:.035em; margin:3px 0; overflow-wrap:anywhere; }
.qris-mini { display:flex; gap:13px; align-items:center; }
.qris-mini img { width:96px; height:96px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:13px; flex:0 0 auto; }
.qris-mini span { font-size:12px; color:var(--muted); line-height:1.5; }

.terms {
  position:relative;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin:14px 16px 22px;
  padding:17px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  cursor:pointer;
  box-shadow:0 7px 22px rgba(31,27,18,.03);
}
.terms > input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.check-ui {
  width:24px;
  height:24px;
  border:2px solid #aaa59a;
  border-radius:7px;
  background:#fff;
  position:relative;
  margin-top:1px;
  transition:all .15s ease;
}
.terms > input:checked + .check-ui {
  border-color:var(--brand);
  background:var(--brand);
}
.terms > input:checked + .check-ui:after {
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:15px;
  font-weight:900;
  line-height:1;
}
.terms-copy { min-width:0; font-size:13px; line-height:1.55; color:#3e3c37; }

.sticky-book {
  position:fixed;
  z-index:35;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(760px,100%);
  min-height:86px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:12px 18px calc(12px + var(--safe));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  box-shadow:0 -12px 30px rgba(31,27,18,.055);
}
.sticky-book > div { min-width:0; }
.sticky-book strong { font-size:23px; line-height:1.15; display:block; white-space:nowrap; }
.sticky-book small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.sticky-book .btn { min-width:175px; }
.checkout-bottom-spacer { height:24px; }

/* Success */
.success { padding:70px 24px 48px; text-align:center; }
.success-modern { min-height:100vh; background:radial-gradient(circle at 50% -10%,#f4e8b7,transparent 34%); }
.success-badge { width:82px; height:82px; margin:0 auto 18px; border-radius:28px; background:var(--mint); display:grid; place-items:center; font-size:36px; }
.success h1 { font-size:36px; line-height:1.08; letter-spacing:-.04em; margin:8px 0 10px; }
.success p { color:var(--muted); line-height:1.6; }
.booking-code-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:20px; margin:24px auto 14px; max-width:520px; }
.booking-code-card small { display:block; color:var(--muted); }
.booking-code-card strong { display:block; font-size:25px; line-height:1.2; overflow-wrap:anywhere; letter-spacing:.04em; margin:6px 0 12px; }
.copy-btn { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:11px; padding:8px 11px; font-size:12px; font-weight:800; cursor:pointer; }
.success-info { max-width:520px; margin:0 auto 18px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:4px 18px; }
.success-info div { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); text-align:left; }
.success-info div:last-child { border-bottom:0; }
.success-info span { color:var(--muted); font-size:12px; }
.success-info strong { text-align:right; font-size:13px; }

/* Pricing and support */
.intro-section h2 { font-size:36px; line-height:1.08; margin:0 0 8px; letter-spacing:-.04em; }
.plan-stack { display:grid; gap:12px; }
.pricing-card { background:#fff; border:1px solid var(--line); border-radius:25px; padding:20px; box-shadow:var(--shadow-soft); }
.pricing-card h3 { font-size:23px; line-height:1.2; margin:0 0 7px; }
.pricing-card p { color:var(--muted); line-height:1.55; }
.pricing-foot { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.pricing-foot strong { display:block; font-size:21px; white-space:nowrap; }
.pricing-foot small { display:block; color:var(--muted); margin-top:3px; }
.pricing-foot .btn { min-height:42px; padding:11px 14px; border-radius:13px; }
.support-card,.lookup-card { margin-top:20px; background:#fff; border:1px solid var(--line); border-radius:28px; padding:24px; box-shadow:var(--shadow); }
.support-card h2,.lookup-card h2 { font-size:34px; line-height:1.08; letter-spacing:-.04em; margin:5px 0 9px; }
.support-card p,.lookup-card p { line-height:1.6; }
.support-card .btn { margin-top:10px; }
.support-icon { width:64px; height:64px; border-radius:20px; background:var(--mint); display:grid; place-items:center; font-size:28px; margin-bottom:18px; }
.support-icon-whatsapp { background:#e9f9ef; }
.support-icon-whatsapp svg { width:36px; height:36px; stroke:#25D366; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* My booking / status */
.booking-status-page>.flash,.booking-status-page>.error { margin-top:16px; }
.status-hero { margin-top:18px; border-radius:28px; padding:24px; background:linear-gradient(145deg,#1a1916,#353127); color:#fff; display:flex; justify-content:space-between; gap:18px; align-items:center; box-shadow:var(--shadow); }
.status-hero h2 { font-size:32px; line-height:1.1; letter-spacing:-.04em; margin:4px 0 7px; }
.status-hero p { margin:0; opacity:.8; line-height:1.5; }
.status-hero .eyebrow { color:#e0c566; }
.status-hero.status-paid { background:linear-gradient(145deg,#0e4b3d,#17624f); }
.status-hero.status-waiting_verification { background:linear-gradient(145deg,#59440f,#8b6b16); }
.status-orb { width:58px; height:58px; border-radius:20px; background:rgba(255,255,255,.13); display:grid; place-items:center; font-size:27px; flex:0 0 auto; }
.status-details { margin-left:0; margin-right:0; }
.detail-line { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); }
.detail-line:last-child { border-bottom:0; }
.detail-line span { color:var(--muted); font-size:13px; }
.detail-line strong { max-width:68%; text-align:right; font-size:14px; overflow-wrap:anywhere; }
.payment-instruction-card { margin-left:0; margin-right:0; }
.qris-large { display:grid; place-items:center; background:var(--sand); padding:18px; border-radius:20px; }
.qris-large img { width:min(300px,100%); aspect-ratio:1; object-fit:contain; background:#fff; border-radius:16px; }
.bank-box { background:#111; color:#fff; border-radius:22px; padding:20px; }
.bank-box span,.bank-box small { display:block; color:#cac5b8; }
.bank-box strong { font-size:29px; display:block; margin:6px 0; letter-spacing:.04em; overflow-wrap:anywhere; }
.bank-box .copy-btn { margin-top:14px; }
.pay-amount { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.pay-amount span { color:var(--muted); }
.pay-amount strong { font-size:21px; white-space:nowrap; }
.deadline { background:#fff5da; padding:13px; border-radius:14px; font-size:12px; line-height:1.5; margin:14px 0; }
.proof-form { display:grid; gap:14px; margin-top:18px; }
.verification-notice { background:#fff5da; }
.confirmed-card { text-align:center; margin-left:0; margin-right:0; }
.confirmed-mark { width:62px; height:62px; border-radius:20px; background:var(--green-soft); color:var(--green); display:grid; place-items:center; font-size:28px; margin:0 auto 12px; }
.booking-access-card { margin-left:0; margin-right:0; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.booking-access-card > div { min-width:0; }
.booking-access-card h3 { letter-spacing:.03em; overflow-wrap:anywhere; }
.support-inline { margin:0 0 20px; }
.error { padding:13px 14px; border-radius:14px; background:#fff0ef; color:#8a2c27; margin-bottom:14px; line-height:1.5; }
.flash { padding:13px 14px; border-radius:14px; background:#e4f4ec; color:#17523e; margin-bottom:14px; line-height:1.5; }

@media (min-width:620px) {
  .screen { padding-left:28px; padding-right:28px; }
  .hero { padding:32px; }
  .content-card,.floating-card { margin-left:28px; margin-right:28px; }
  .floating-card { margin-top:-42px; }
  .form-grid.two { grid-template-columns:1fr 1fr; }
  .booking-summary-mini,.booking-status-page .content-card { margin-left:0; margin-right:0; }
  .summary-card,.terms { margin-left:28px; margin-right:28px; }
}

@media (max-width:520px) {
  .calendar-section { padding:15px 12px; border-radius:22px; }
  .calendar-toolbar { grid-template-columns:40px minmax(0,1fr) 40px; gap:8px; margin-bottom:14px; }
  .calendar-nav { width:40px; height:40px; border-radius:13px; font-size:27px; }
  .calendar-title h3 { font-size:20px; }
  .calendar-weekdays,.calendar-grid { gap:5px; }
  .calendar-weekdays span { font-size:9px; }
  .calendar-day { border-radius:11px; }
  .calendar-day-number { font-size:14px; }
  .calendar-dot { width:4px; height:4px; margin-top:5px; }
  .calendar-lock { margin-top:4px; }
  .screen { padding-left:15px; padding-right:15px; }
  .topbar { padding-left:15px; padding-right:15px; }
  .detail-hero { min-height:318px; padding-left:18px; padding-right:18px; padding-bottom:70px; }
  .detail-hero .icon-btn { left:16px; }
  .detail-hero h1 { font-size:34px; }
  .floating-card { margin-left:14px; margin-right:14px; padding:17px; }
  .content-card { margin-left:14px; margin-right:14px; padding:18px; }
  .select-plan { grid-template-columns:1fr; gap:13px; }
  .select-plan-action { width:100%; min-width:0; flex-direction:row; align-items:center; justify-content:space-between; text-align:left; }
  .select-plan-action b { font-size:18px; }
  .select-plan-action .btn { min-width:96px; }
  .summary-card,.terms { margin-left:12px; margin-right:12px; }
  .summary-card { padding:18px; }
  .plan-summary { display:block; }
  .summary-price { display:block; margin-top:16px; font-size:22px; }
  .payment-option-card { grid-template-columns:44px minmax(0,1fr) 22px; padding:13px; gap:11px; }
  .payment-icon { width:44px; height:44px; }
  .payment-copy strong { font-size:15px; }
  .payment-copy small { font-size:11.5px; }
  .qris-mini { align-items:flex-start; }
  .qris-mini img { width:88px; height:88px; }
  .terms { padding:16px; margin-bottom:28px; }
  .sticky-book { padding-left:15px; padding-right:15px; gap:10px; }
  .sticky-book .btn { min-width:150px; padding-left:13px; padding-right:13px; }
  .sticky-book strong { font-size:20px; }
  .support-card h2,.lookup-card h2 { font-size:31px; }
  .status-hero h2 { font-size:28px; }
  .pricing-foot { align-items:flex-end; }
}

@media (max-width:360px) {
  .hero h2 { font-size:29px; }
  .detail-hero h1 { font-size:31px; }
  .payment-option-card { grid-template-columns:40px minmax(0,1fr) 20px; gap:9px; }
  .payment-icon { width:40px; height:40px; border-radius:12px; }
  .sticky-book { align-items:flex-end; }
  .sticky-book .btn { min-width:138px; font-size:14px; }
  .sticky-book strong { font-size:18px; }
}

/* v5 client intake */
.intake-form { gap:18px; }
.intake-card { overflow:visible; }
.checkout-screen > .intake-card { margin-left:0; margin-right:0; }
.intake-section {
  border:1px solid var(--line);
  border-radius:20px;
  padding:17px;
  background:#fcfbf8;
}
.intake-section + .intake-section { margin-top:2px; }
.intake-section-title {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:11px;
  align-items:start;
  margin-bottom:16px;
}
.intake-section-title > span {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--brand);
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.intake-section-title strong { display:block; font-size:17px; line-height:1.25; }
.intake-section-title small { display:block; color:var(--muted); font-size:11.5px; line-height:1.5; margin-top:3px; }
.sensitive-section { background:#fffaf0; border-color:#ead9a5; }
.sensitive-section .intake-section-title > span { background:#9a7616; }
.input-suffix { position:relative; }
.input-suffix input { padding-right:62px; }
.input-suffix > span {
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}
.pain-notes-field { display:none; }
.pain-notes-field.is-visible { display:block; }
.intake-consent {
  position:relative;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  color:#49463f;
  font-size:12.5px;
  line-height:1.55;
  cursor:pointer;
}
.intake-consent > input { position:absolute; opacity:0; pointer-events:none; }
.intake-consent > input:checked + .check-ui { border-color:var(--brand); background:var(--brand); }
.intake-consent > input:checked + .check-ui:after {
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:15px;
  font-weight:900;
  line-height:1;
}

@media(max-width:520px){
  .intake-section { padding:15px; border-radius:18px; }
  .intake-section-title { grid-template-columns:32px minmax(0,1fr); gap:10px; }
  .intake-section-title > span { width:32px; height:32px; border-radius:10px; }
}