/* Layout: a review bar on top, then one working form option at a time.
   Each option sits in a container-query frame so "Phone view" shows the real phone layout on any screen. */
:root {
  --ink: #0A171E; --ink-2: #16262E; --lime: #CEE252; --grey-1: #4A555B; --grey-2: #5A666C; --grey-3: #AEB8BC;
  --line: #E6E9EA; --field: #D9DCDD; --wash: #F4F5F5; --white: #FFFFFF; --error: #C2361F; --ok: #22B07D;
  --font: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { background: var(--wash); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }

button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* Review bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--white); border-bottom: 1px solid var(--line);
  padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bar-in { max-width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bar-title { font-weight: 800; font-size: 15px; margin-right: auto; }
.tabs, .views { display: flex; gap: 4px; background: var(--wash); padding: 4px; border-radius: 12px; }
.tabs button, .views button { border: 0; background: transparent; padding: 8px 12px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--grey-1); cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"], .views button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.tabs .n { color: var(--lime); margin-right: 4px; }
.tabs button:not([aria-selected="true"]) .n { color: var(--grey-2); }

/* Frame */
.stage { padding-block: 24px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.frame { container-type: inline-size; max-width: 1440px; margin: 0 auto; background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 20px 50px -30px rgba(10,23,30,.35); }
.stage.phone .frame { max-width: 390px; }
.note { max-width: 1440px; margin: 0 auto 14px; font-size: 14px; color: var(--grey-1); }
.stage.phone .note { max-width: 390px; }

/* Shared form parts */
.q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.q legend { padding: 0; font-size: 16px; font-weight: 700; margin-bottom: 10px; float: left; width: 100%; }
.q legend + * { clear: both; }
.hint { font-size: 13px; color: var(--grey-2); margin-top: -6px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts label { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 10px;
  border: 1.5px solid var(--field); border-radius: 12px; background: var(--white); font-size: 15px; cursor: pointer; line-height: 1.2; transition: border-color .15s, background .15s; }
.opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts.chips { display: flex; flex-wrap: wrap; }
.opts.chips label { min-height: 44px; border-radius: 999px; padding: 6px 16px; }
.opts label small { font-size: 11px; font-weight: 700; color: var(--grey-2); margin-top: 2px; }
.opts label:hover { border-color: var(--grey-3); }
.opts input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 700; }
.opts input:checked + label small { color: var(--lime); }
.opts input:focus-visible + label { outline: 3px solid var(--lime); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > label { font-size: 15px; font-weight: 700; }
.field > label span { font-weight: 500; color: var(--grey-2); }
.input { height: 52px; width: 100%; min-width: 0; border-radius: 12px; border: 1.5px solid var(--field); background: var(--white); padding: 0 14px; font-size: 16px; }
.input::placeholder { color: #7A858A; }
.input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(206,226,82,.6); }
.phone-row { display: flex; gap: 8px; }
.phone-row select { width: 92px; flex: 0 0 auto; font-weight: 700; padding: 0 10px; }
.err { color: var(--error); font-size: 13px; font-weight: 600; }
.bad .opts label { border-color: var(--error); }
.bad .input { border-color: var(--error); }
.agree { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--grey-1); cursor: pointer; }
.agree input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.agree a { color: var(--ink); }
.bad .agree input { outline: 2px solid var(--error); outline-offset: 1px; }
.btn { min-height: 56px; border: 0; border-radius: 14px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 800; cursor: pointer; text-decoration: none; }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { filter: brightness(.96); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink .arr { color: var(--lime); }
.arr { letter-spacing: -0.12em; font-size: 19px; }
.btn-back { width: 60px; flex: 0 0 auto; background: var(--white); border: 1.5px solid var(--field); border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-back svg, .tick svg, .vi svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.btn-back svg { width: 22px; height: 22px; stroke-width: 2.2; }
.actions { display: flex; gap: 10px; }
.actions .btn { flex: 1 1 auto; }
.logo { height: 30px; width: auto; max-width: none; display: block; align-self: flex-start; }
.sub { color: var(--grey-1); font-size: 16px; }
.mini { font-size: 13px; color: var(--grey-2); text-align: center; }
.group-h { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); padding-top: 4px; border-top: 1px solid var(--line); padding-top: 18px; }
.group-h:first-of-type { border-top: 0; padding-top: 0; }

/* Thank-you */
.thanks { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.tick { width: 64px; height: 64px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; }
.tick svg { width: 30px; height: 30px; stroke: var(--ink); stroke-width: 3; }
.thanks h2 { font-size: 26px; font-weight: 800; line-height: 1.15; }
.next { width: 100%; background: var(--wash); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.next b { font-size: 15px; }
.next ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: n; }
.next li { display: flex; gap: 12px; font-size: 15px; counter-increment: n; }
.next li::before { content: counter(n); flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.reset { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 700; color: var(--grey-1); text-decoration: underline; cursor: pointer; }

/* Options 1 and 2: dark side panel on PC, short header on phone */
.split { display: grid; grid-template-columns: 1fr; }
.side { background: var(--ink); color: var(--white); padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 16px; }
.side h1 { font-size: 26px; line-height: 1.12; font-weight: 800; }
.side h1 em { font-style: normal; color: var(--lime); }
.side .sub { color: var(--grey-3); font-size: 15px; }
.side .meta { font-size: 13px; color: var(--grey-3); display: none; }
.main { padding: 26px 20px 30px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.formcol { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 560px; }
.progress { display: flex; flex-direction: column; gap: 8px; }
.progress-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--grey-2); }
.track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.track span { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: width .35s ease; }
.step-h { font-size: 26px; font-weight: 800; line-height: 1.15; }
@container (min-width: 900px) {
  .split { grid-template-columns: 520px minmax(0, 1fr); min-height: 860px; }
  .side { padding: 48px 56px; justify-content: space-between; gap: 0; }
  .side h1 { font-size: 44px; line-height: 1.06; }
  .side .sub { font-size: 18px; }
  .side .meta { display: block; }
  .side-copy { display: flex; flex-direction: column; gap: 18px; }
  .main { padding: 56px 96px; align-items: flex-start; }
  .opts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step-h { font-size: 34px; }
  .opt2 .formcol { min-height: 100%; }
  .opt2 .steps-foot { margin-top: auto; }
}
@container (max-width: 899px) { .side-copy { display: flex; flex-direction: column; gap: 10px; } }

/* Option 3: Hormozi-style offer page */
.h3wrap { display: grid; grid-template-columns: 1fr; }
.offer { padding: 24px 20px 8px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--wash); font-size: 13px; font-weight: 700; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.offer h1 { font-size: 30px; line-height: 1.08; font-weight: 800; }
.offer h1 mark { background: var(--lime); color: var(--ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; }
.stack li { display: flex; gap: 14px; padding: 16px; border-top: 1.5px solid var(--line); }
.stack li:first-child { border-top: 0; }
.vi { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.vi svg { width: 17px; height: 17px; stroke-width: 3; }
.stack b { display: block; font-size: 16px; line-height: 1.3; }
.stack li > div > span { display: block; font-size: 14px; color: var(--grey-1); margin-top: 2px; }
.promise { background: var(--ink); color: var(--white); border-radius: 18px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.promise svg { flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.proof { display: flex; flex-direction: column; gap: 12px; }
.stars { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.stars i { display: flex; gap: 2px; }
.stars svg { width: 16px; height: 16px; fill: var(--ink); }
.quote { display: flex; gap: 12px; align-items: flex-start; }
.quote img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: 0 0 auto; }
.quote p { font-size: 15px; }
.quote small { display: block; font-size: 13px; color: var(--grey-2); margin-top: 4px; }
.formcard { margin: 8px 12px 16px; border-radius: 22px; background: var(--wash); padding: 22px 18px 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.formcard h2 { font-size: 22px; font-weight: 800; line-height: 1.15; }
.formcard .opts label { background: var(--white); }
@container (min-width: 900px) {
  .h3wrap { grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; padding: 56px 72px 64px; align-items: start; }
  .offer { padding: 0; gap: 26px; }
  .offer h1 { font-size: 50px; }
  .formcard { margin: 0; padding: 32px 30px; position: sticky; top: 90px; }
  .proof { flex-direction: row; align-items: center; gap: 28px; }
}
.btn { white-space: nowrap; }
@container (max-width: 440px) { .btn { font-size: 16px; padding: 0 16px; } .actions .arr { display: none; } }
@media (max-width: 699px) { .views { display: none; } .bar-title { width: 100%; } .tabs button { padding: 8px 9px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Live pages: the frame fills the screen */
body { background: var(--white); margin: 0; }
[hidden] { display: none !important; }
.frame { max-width: none; border-radius: 0; box-shadow: none; min-height: 100vh; min-height: 100dvh; }
.home-link { display: inline-flex; }
.back-home { font-size: 14px; font-weight: 700; color: var(--grey-1); }
@container (min-width: 900px) { .split { min-height: 100vh; min-height: 100dvh; } .h3wrap { max-width: 1440px; margin: 0 auto; } }

.jump { align-self: stretch; }
#book { scroll-margin-top: 12px; }
@container (min-width: 900px) { .jump { display: none; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Single page (Malaysia focus design) ---------- */
.oc-page { background: linear-gradient(var(--white) 60%, var(--line)); display: flex; flex-direction: column; }
.oc-hero { position: relative; height: 170px; overflow: hidden; flex: 0 0 auto; }
.oc-photo { width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; display: block; max-width: none; }
.oc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10,23,30,.55), rgba(10,23,30,0) 45%, var(--white) 100%); }
.oc-logo { position: absolute; z-index: 1; top: max(18px, env(safe-area-inset-top, 0px)); left: max(20px, env(safe-area-inset-left, 0px)); }
.oc-logo .logo { height: 28px; }
.oc-body { position: relative; flex: 1 1 auto; width: 100%; max-width: 560px; margin: -8px auto 0; box-sizing: border-box;
  padding-block: 0 24px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 16px; }
.oc-copy { display: flex; flex-direction: column; gap: 8px; }
.oc-copy h1 { font-size: 28px; line-height: 1.16; font-weight: 800; letter-spacing: -0.015em; }
.oc-copy h1 mark { color: var(--ink); background: linear-gradient(transparent 12%, var(--lime) 12%, var(--lime) 92%, transparent 92%); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.oc-copy .sub { font-size: 15px; line-height: 1.45; }
.oc-form { display: flex; flex-direction: column; gap: 14px; }
.oc-card { background: var(--white); border: 1.5px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 var(--field), 0 8px 24px rgba(10,23,30,.08); }
.oc-card .field > label, .oc-card .q legend { font-size: 14px; font-weight: 700; }
.oc-card .q legend { margin-bottom: 6px; }
.oc-card .input { height: 48px; }
.seg { display: grid; gap: 6px; padding: 4px; border-radius: 13px; background: #EEF0F0; }
.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: background .15s; }
.seg input:checked + label { background: var(--lime); font-weight: 700; }
.seg input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 1px; }
.bad .seg { box-shadow: inset 0 0 0 1.5px var(--error); }
.oc-btn { width: 100%; }
.oc-thanks { padding: 22px 18px; }
@container (min-width: 700px) {
  .oc-hero { height: 300px; }
  .oc-logo .logo { height: 32px; }
  .oc-body { margin-top: -40px; padding-bottom: 56px; gap: 20px; }
  .oc-copy h1 { font-size: 40px; }
  .oc-copy .sub { font-size: 17px; }
  .oc-card { padding: 24px; gap: 18px; }
}

/* ---------- Three steps (Option A design) ---------- */
.oa-page { background: linear-gradient(var(--white) 70%, var(--line)); }
.oa-wrap { max-width: 560px; margin: 0 auto; box-sizing: border-box; min-height: 100vh; min-height: 100dvh;
  padding-block: max(28px, env(safe-area-inset-top, 0px)) 24px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 20px; }
.oa-logo { align-self: center; }
.oa-logo .logo { height: 34px; }
.oa-head { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.oa-head h1 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.oa-head h1 mark { background: var(--lime); color: var(--ink); padding: 0 6px; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.oa-head .sub { font-size: 15px; line-height: 1.4; }
.oa-form { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; }
.oa-form .progress-top { color: var(--grey-1); }
.oa-card { background: var(--white); border: 1.5px solid var(--field); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.oa-form .oa-card.step { flex: 1 1 auto; }
.oa-card .q legend, .oa-card .field > label { font-size: 16px; font-weight: 700; }
.oa-opts label { min-height: 48px; }
.oa-opts input:checked + label { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); font-weight: 700; }
.oa-opts input:checked + label small { color: var(--ink); }
.oa-opts.chips label { min-height: 44px; }
.oa-note { font-size: 13px; line-height: 1.4; font-style: italic; color: var(--grey-1); }
.oa-form .actions .btn { min-height: 54px; }
@container (min-width: 700px) {
  .oa-wrap { padding-block: 48px 56px; gap: 24px; }
  .oa-head h1 { font-size: 36px; }
  .oa-head .sub { font-size: 17px; }
  .oa-card { padding: 28px; }
}

/* Course picker */
.combo { position: relative; display: flex; flex-direction: column; gap: 10px; }
.combo-box { position: relative; }
.combo-ic { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--grey-2); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.combo-input { padding-left: 42px; padding-right: 40px; }
.combo-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; font-size: 22px; color: var(--grey-2); cursor: pointer; border-radius: 50%; }
.combo-list { position: absolute; z-index: 5; left: 0; right: 0; top: 56px; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1.5px solid var(--field); border-radius: 14px; box-shadow: 0 16px 36px -12px rgba(10,23,30,.3); max-height: 260px; overflow-y: auto; }
.combo-list li { padding: 11px 12px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.combo-list li:hover, .combo-list li.on { background: var(--wash); }
.combo-list li.combo-own { color: var(--grey-1); font-style: italic; }
.combo-undecided { align-self: flex-start; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--field); background: var(--white); font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.combo-undecided[aria-pressed="true"] { background: var(--lime); border: 2px solid var(--ink); font-weight: 700; }
.bad .combo-input { border-color: var(--error); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Offer style (Option D design) ---------- */
.od-page { background: linear-gradient(var(--white) 55%, var(--line)); }
.od-wrap { max-width: 560px; margin: 0 auto; box-sizing: border-box; min-height: 100vh; min-height: 100dvh;
  padding-block: max(24px, env(safe-area-inset-top, 0px)) 24px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 24px; }
.od-wrap .home-link { align-self: flex-start; }
.od-wrap .logo { height: 28px; }
.od-head { display: flex; flex-direction: column; gap: 10px; }
.od-head h1 { font-size: 29px; line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; }
.od-head h1 mark { color: var(--ink); background: linear-gradient(transparent 12%, var(--lime) 12%, var(--lime) 92%, transparent 92%); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.od-head .sub { font-size: 15px; line-height: 1.45; color: var(--grey-2); }
.od-get { display: flex; flex-direction: column; gap: 14px; }
.od-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); }
.od-get ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.od-get li { display: flex; gap: 12px; align-items: center; }
.od-get .vi { flex: 0 0 28px; height: 28px; }
.od-get .vi svg { width: 14px; height: 14px; stroke-width: 3.2; }
.od-get b { display: block; font-size: 16px; line-height: 1.25; }
.od-get li span:not(.vi) { display: block; font-size: 13.5px; line-height: 1.3; color: var(--grey-2); }
.od-card { gap: 10px; }
.od-card .agree { margin-top: 4px; }
@container (min-width: 700px) {
  .od-wrap { padding-block: 48px 56px; gap: 28px; }
  .od-head h1 { font-size: 40px; }
  .od-head .sub { font-size: 17px; }
}
.q legend.sr { width: 1px; float: none; margin: -1px; }

.thanks-simple { align-items: center; text-align: center; padding-block: 24px; gap: 14px; }
.thanks-simple h2 { font-size: 28px; }
.thanks-simple .sub { font-size: 17px; }
.oa-thanks { margin-block: auto; }

.oc-top { width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; padding-block: max(24px, env(safe-area-inset-top, 0px)) 4px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.oc-top .logo { height: 28px; }
.oc-top + .oc-body { margin-top: 16px; }
@container (min-width: 700px) { .oc-top { padding-top: 48px; } .oc-top + .oc-body { margin-top: 20px; } }