/* SihatKu design system — ported from the approved preview.
   Tokens: Literata (headings) + Atkinson Hyperlegible (body),
   --green:#174f3a, --amber:#efa92f, warm-white surfaces.
   Senior-friendly: 19px base type, 56px+ tap targets, plain language. */
:root{
  color-scheme: light dark;
  --bg:#f5f7f2; --surface:#ffffff; --surface-soft:#eaf1e8; --surface-warm:#fff4d8;
  --ink:#17231c; --muted:#526057;
  --green:#174f3a; --green-2:#277455; --green-3:#b9d7c3;
  --amber:#efa92f; --amber-deep:#8a5400;
  --line:#d8e0d8; --danger:#9a4235;
  --shadow:0 18px 48px rgba(26,54,39,.12);
  --small-shadow:0 8px 24px rgba(26,54,39,.08);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1511; --surface:#17221b; --surface-soft:#203429; --surface-warm:#3a311c;
    --ink:#edf5ee; --muted:#bac7bd;
    --green:#8fd5ad; --green-2:#6fc091; --green-3:#345a43;
    --amber:#f3bd58; --amber-deep:#ffd78b;
    --line:#33463a; --danger:#ffb4a5;
    --shadow:0 18px 48px rgba(0,0,0,.28);
    --small-shadow:0 8px 24px rgba(0,0,0,.22);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:19px;line-height:1.6}
h1,h2,h3{font-family:"Literata",Georgia,serif;letter-spacing:-.025em;line-height:1.12;margin:0 0 1rem;color:var(--ink)}
h1{font-size:2.4rem}
h2{font-size:1.7rem;margin:2.4rem 0 .9rem}
h3{font-size:1.3rem;margin:1.6rem 0 .6rem}
p{margin:0 0 1rem}
a{color:var(--green);text-underline-offset:3px}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%}
.container{max-width:1060px;margin:0 auto;padding:0 22px}
/* header — preview topbar */
.site-header{background:color-mix(in srgb, var(--bg) 92%, transparent);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;max-width:1060px;margin:0 auto;min-height:72px}
.wordmark{font-family:"Literata",Georgia,serif;font-size:1.65rem;font-weight:700;color:var(--green);text-decoration:none;letter-spacing:-.02em}
.wordmark .dot{color:var(--amber)}
.main-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.main-nav a{text-decoration:none;color:var(--ink);padding:12px 14px;border-radius:10px;font-size:1.02rem;font-weight:700;
  min-height:52px;display:inline-flex;align-items:center}
.main-nav a:hover{background:var(--surface-soft)}
.main-nav a.active{color:var(--green);background:var(--surface-soft)}
.menu-btn{display:none;background:none;border:2px solid var(--line);border-radius:10px;min-height:52px;min-width:52px;
  font-size:1.5rem;cursor:pointer;color:var(--ink)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;border:none;
  border-radius:12px;padding:14px 26px;font-size:1.15rem;font-weight:700;cursor:pointer;text-decoration:none;
  min-height:56px;min-width:200px;text-align:center}
.btn:hover{background:var(--green-2);color:#fff}
.btn-amber{background:var(--amber);color:#17231c}
.btn-amber:hover{background:var(--amber-deep);color:#fff}
.btn-outline{background:var(--surface);color:var(--green);border:2px solid var(--green)}
.btn-outline:hover{background:var(--surface-soft);color:var(--green)}
.btn-small{min-height:52px;min-width:0;padding:10px 20px;font-size:1.02rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:wait}
.action-row{display:flex;gap:14px;flex-wrap:wrap;margin:1.4rem 0}
/* hero — preview editorial card */
.hero{background:var(--surface);border-radius:24px 8px 24px 8px;box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:1.04fr .96fr;margin:2rem 0 2.6rem}
.hero-copy{padding:clamp(2rem,5vw,3.6rem);align-self:center}
.hero-copy h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:0 0 1rem}
.hero-copy p.lead{font-size:1.25rem;max-width:34rem;color:var(--muted)}
.hero-media{min-height:320px}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* cards & grids */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;
  margin:0 0 1.2rem;box-shadow:var(--small-shadow)}
.card h3{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:1.2rem 0}
.grid .card{margin:0;display:flex;flex-direction:column}
.grid .card .grow{flex:1}
.meta{color:var(--muted);font-size:1rem}
.tag{display:inline-block;background:var(--surface-soft);color:var(--green);border-radius:999px;padding:4px 14px;
  font-size:.95rem;margin:2px 4px 2px 0;font-weight:700}
/* notices */
.notice{background:var(--surface-warm);border:2px solid var(--amber);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.2rem 0}
.notice strong{color:var(--ink)}
.safety{background:color-mix(in srgb, var(--danger) 10%, var(--surface));border:2px solid var(--danger);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.2rem 0}
.safety strong{color:var(--danger)}
.info-box{background:var(--surface-soft);border:1px solid var(--green);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.2rem 0}
.ph{border:2px dashed var(--muted);border-radius:var(--radius);background:var(--surface-soft);color:var(--muted);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:2.2rem 1rem;min-height:150px;font-size:1.05rem}
.video-ph{aspect-ratio:16/9;min-height:0}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--radius) - 4px)}
/* forms */
label{display:block;font-weight:700;margin:1.1rem 0 .4rem;font-size:1.08rem}
input[type=text],input[type=password],input[type=tel],input[type=number],select,textarea{
  width:100%;font-size:1.15rem;padding:14px 16px;border:2px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);min-height:58px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--amber);border-color:var(--green)}
.hint{color:var(--muted);font-size:1rem;margin:.3rem 0 0}
.checkrow{display:flex;gap:12px;align-items:flex-start;margin:.9rem 0}
.checkrow input{width:28px;height:28px;min-height:28px;margin-top:4px;flex:none}
.checkrow span{font-size:1.05rem}
.error{background:color-mix(in srgb, var(--danger) 10%, var(--surface));border:2px solid var(--danger);color:var(--danger);
  border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0;font-weight:600}
.ok{background:var(--surface-soft);border:2px solid var(--green);border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0}
fieldset{border:2px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin:1.2rem 0}
legend{font-weight:800;color:var(--green);padding:0 8px;font-size:1.1rem}
/* steps */
.steps{display:flex;gap:8px;margin:1.4rem 0;flex-wrap:wrap}
.step{flex:1;min-width:130px;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:.8rem;
  text-align:center;font-size:1rem;color:var(--muted)}
.step.now{border-color:var(--green);color:var(--green);font-weight:800;background:var(--surface-soft)}
.step.done{border-color:var(--amber);color:var(--ink)}
.step .n{display:block;font-size:1.4rem;font-weight:800}
/* tables */
table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:1.02rem;background:var(--surface)}
th,td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
th{background:var(--surface-soft);color:var(--green)}
tr:nth-child(even) td{background:color-mix(in srgb, var(--surface-soft) 45%, var(--surface))}
/* faq */
details{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:.7rem 0;padding:1rem 1.2rem}
summary{font-weight:700;font-size:1.1rem;cursor:pointer;min-height:52px}
/* footer */
.site-footer{background:var(--green);color:#f5f7f2;margin-top:3rem}
.site-footer a{color:var(--amber)}
.footer-inner{max-width:1060px;margin:0 auto;padding:2.2rem 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem}
.site-footer h4{color:#fff;margin:0 0 .7rem;font-size:1.1rem;font-family:"Atkinson Hyperlegible",sans-serif;letter-spacing:0}
.site-footer p,.site-footer li{font-size:1rem;color:#d9e2d9}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.35rem 0}
.footer-base{border-top:1px solid rgba(255,255,255,.25);padding:1rem 22px;text-align:center;font-size:.95rem;color:#c9d4c9;max-width:1060px;margin:0 auto}
/* misc */
.kicker{color:var(--amber-deep);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:.95rem;margin:0 0 .4rem}
.divider{border:none;border-top:2px solid var(--line);margin:2rem 0}
.small{font-size:1rem;color:var(--muted)}
.staff-banner{background:#17231c;color:var(--amber);padding:.7rem;text-align:center;font-weight:700;font-size:1.05rem}
.demo-tag{display:inline-block;background:#17231c;color:var(--amber);font-size:.9rem;font-weight:700;border-radius:6px;
  padding:2px 10px;margin-left:8px;vertical-align:middle}
ol.steps-list li,ul.tight li{margin-bottom:.7rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* test accounts — mirrors the approved preview panel */
.test-access{margin:0 0 1.6rem;padding:1.5rem;background:var(--surface-warm);border-radius:12px;border:1px solid var(--amber)}
.test-access-head h2{margin:0 0 .3rem;font-size:1.4rem}
.test-access-head p{margin:0 0 1rem;color:var(--muted);font-size:1rem}
.test-account-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.test-account{padding:1.2rem;background:var(--surface);border-radius:8px;border:1px solid var(--line)}
.test-account h3{margin:0 0 .6rem;font-size:1.15rem}
.test-account dl{margin:0 0 .8rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;font-size:1rem}
.test-account dt{color:var(--muted);font-weight:700}
.test-account dd{margin:0;font-weight:700}
.text-btn{border:0;background:transparent;cursor:pointer;padding:12px 14px;border-radius:10px;font-weight:700;
  color:var(--green);font-size:1.05rem;min-height:52px;text-decoration:underline;text-underline-offset:3px}
.text-btn:hover{background:var(--surface-soft)}
@media(max-width:760px){
  body{font-size:18px}
  h1{font-size:1.9rem}
  .main-nav{display:none;flex-direction:column;align-items:stretch;width:100%;padding:0 0 12px}
  .main-nav.open{display:flex}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .header-inner{flex-wrap:wrap}
  .btn{min-width:0;width:100%}
  .action-row .btn{flex:1 1 100%}
  .two-col,.test-account-grid{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .hero-media{min-height:220px}
}
@media print{.site-header,.site-footer,.action-row,.menu-btn{display:none}}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:38px;height:38px;display:block;flex:none}

/* Exercise thumbnail info card (original SihatKu design) */
.excard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1.2rem 0;box-shadow:var(--small-shadow)}
.excard-top{display:flex;gap:1.4rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.excard-fig{flex:0 0 118px;text-align:center}
.muscle-svg{width:118px;height:auto;display:block}
.fig-cap{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:.35rem}
.excard-badges{flex:1;display:grid;gap:1rem;padding-top:.3rem;align-content:start}
.excard-badges .b-label{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.25rem}
.excard-badges .b-val{font-weight:700;font-size:1.05rem}
@media(max-width:520px){.excard-top{flex-direction:column}.excard-fig{flex:none}}
.diffbars{display:inline-flex;gap:4px;align-items:center}
.diffbars i{width:16px;height:16px;border-radius:3px;background:color-mix(in srgb, var(--muted) 22%, var(--surface))}
.diffbars i.on{background:var(--ink)}
.diffword{font-weight:700;letter-spacing:.06em;font-size:.85rem;margin-left:.4rem}
.excard h3.sec{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:1.1rem 0 .3rem}
.excard p{margin:.25rem 0;line-height:1.65}

/* Inline video embed (third-party player, e.g. YouTube) */
.video-wrap{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;margin:1.2rem 0 .4rem;box-shadow:var(--small-shadow)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Partners & Offers demo (throwaway only; do not ship to live as-is) ---- */
.demo-banner{background:repeating-linear-gradient(45deg,#f5b301,#f5b301 18px,#1d1d1d 18px,#1d1d1d 36px);padding:6px}
.demo-banner-inner{background:#fff8e1;color:#5d4300;text-align:center;font-size:.82rem;font-weight:700;padding:.45rem .8rem;letter-spacing:.02em}
.demo-banner-inner a{color:#1F6B4A}
.offer-art{width:100%;border-radius:12px;border:1px solid #e5e0d5}
.voucher-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:700;letter-spacing:.12em;background:#f4f1e8;border:2px dashed #1F6B4A;border-radius:10px;padding:.7rem 1rem;text-align:center}
.qr-wrap{display:flex;justify-content:center;padding:1rem 0}
.ledger{width:100%;border-collapse:collapse;font-size:.9rem}
.ledger th,table.ledger td{border:1px solid #e5e0d5;padding:.5rem .6rem;text-align:left}
.ledger th{background:#f4f1e8}