/* salescoway.com — design system (BUILD-BRIEF §7, dimodernkan mengikuti profil coway-global + coway-id)
   Palet: cyan Coway global #00A8E3, ink #1B2529 (bukan Bootstrap #007BFF/#212529). Mobile-first. */
:root{
  --brand:#02A6E3;--brand-dark:#0374A6;--brand-ink:#04506F;
  --ink:#1B2529;--muted:#5C6B72;--line:#E4E9EC;--bg:#FFFFFF;--bg-soft:#F2F4F5;--bg-tint:#EAF7FD;
  --ok:#059669;--warn:#B45309;--wa:#1B8F52;
  --font-h:"Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-b:"Noto Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r-card:12px;--r-btn:8px;--shadow:0 1px 3px rgba(15,23,42,.08);
  --wrap:1120px;--pad:64px;
}
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-b);font-size:16px;line-height:1.65;color:var(--ink);background:var(--bg);font-variant-numeric:tabular-nums}
@media(min-width:900px){body{font-size:17px}:root{--pad:96px}}
h1,h2,h3,h4{font-family:var(--font-h);letter-spacing:-.02em;line-height:1.15;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(30px,6vw,48px);font-weight:800}
h2{font-size:clamp(24px,4vw,34px);font-weight:700}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em}
a{color:var(--brand-dark);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--brand-ink)}
img,svg{max-width:100%;height:auto}
ul,ol{padding-left:1.25em}
strong{font-weight:700}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.narrow{max-width:760px}
.section{padding-block:var(--pad)}
.section.soft{background:var(--bg-soft)}
.section.tint{background:var(--bg-tint)}
.lead{font-size:1.125em;color:var(--ink)}
.muted{color:var(--muted)}.small{font-size:14px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.src{font-size:13px;color:var(--muted);margin:.5em 0 0;line-height:1.5}
.src a{color:var(--muted)}
.eyebrow{font-family:var(--font-h);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark);margin:0 0 12px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.pending{border-left:3px solid var(--warn);padding-left:12px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-wrap:wrap;line-height:1.1}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--brand);position:relative;flex:none}
.brand-mark::after{content:"";position:absolute;inset:8px 9px 7px;background:#fff;clip-path:path("M5 0C8 4 10 7 10 9.5A5 5 0 0 1 0 9.5C0 7 2 4 5 0Z")}
.brand-logo{height:28px;width:auto;display:block}
.brand-name{font-family:var(--font-h);font-weight:800;font-size:18px;letter-spacing:-.02em}
.brand-name span{color:var(--brand)}
.brand-sub{font-size:11px;color:var(--muted);flex-basis:100%;display:none}
@media(min-width:700px){.brand-sub{display:block}}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:none;gap:4px}
.nav a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:500}
.nav a:hover,.nav a[aria-current]{background:var(--bg-soft);color:var(--brand-ink)}
.nav-toggle{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.nav.open ul{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:8px 16px 16px;box-shadow:var(--shadow)}
@media(min-width:1000px){.nav ul{display:flex}.nav-toggle{display:none}}
.no-nav .site-header .hdr-cta{margin-left:auto}
.hdr-cta{display:none}
@media(min-width:700px){.hdr-cta{display:inline-flex}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-h);font-weight:700;font-size:16px;line-height:1.2;padding:14px 22px;border-radius:var(--r-btn);text-decoration:none;border:1px solid transparent;transition:background .15s,transform .15s,box-shadow .15s;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid #7CD4F5;outline-offset:2px}
.btn-primary{background:var(--brand-dark);color:#fff}
.btn-primary:hover{background:var(--brand-ink);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#156F40;color:#fff}
.btn-sm{padding:9px 14px;font-size:14px;min-height:40px}
.cta-wrap{margin:20px 0}
.micro{font-size:13px;color:var(--muted);margin:8px 0 0}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.tag-ok{color:var(--ok);border-color:#A7E5C9;background:#ECFDF5}
.tag-warn{color:var(--warn);border-color:#F3D6A6;background:#FFF7ED}

/* hero */
.hero{padding-block:40px 24px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:28px}
.hero h1{margin-bottom:16px}
.hero .lead{max-width:60ch}
.hero-cta .btn{width:100%}
@media(min-width:900px){.hero{padding-block:72px 48px}.hero-grid{grid-template-columns:1.1fr 1fr;align-items:center;gap:56px}.hero-cta .btn{width:auto}}

/* placeholder foto */
.ph{margin:0;aspect-ratio:var(--ratio,4/3);border:1.5px dashed #B9C6CC;border-radius:var(--r-card);background:repeating-linear-gradient(135deg,var(--bg-soft) 0 12px,#fff 12px 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;color:var(--muted)}
.ph svg{width:36px;height:36px;color:var(--brand)}
.ph figcaption{font-size:13px;line-height:1.4;max-width:34ch}
.ph strong{color:var(--warn)}

/* media slot (foto/video asli) + dummy */
.media{margin:0;aspect-ratio:var(--ratio,4/3);border-radius:var(--r-card);overflow:hidden;background:var(--bg-soft);position:relative}
.media img,.media video,.media svg{width:100%;height:100%;object-fit:cover;display:block}
.media figcaption{position:absolute;left:0;right:0;bottom:0;font-size:12px;padding:6px 10px;background:rgba(27,37,41,.72);color:#fff}
.media--dummy figcaption strong{color:#FFD28A}
.gallery .media figcaption{position:static;background:none;color:var(--muted);font-size:13px;padding:8px 0 0}
.gallery .media{aspect-ratio:auto;background:none;overflow:visible}
.gallery .media img,.gallery .media video{aspect-ratio:4/3;border-radius:var(--r-card);border:1px solid var(--line)}
/* Foto unit dari katalog resmi punya rasio yang sangat berbeda-beda
   (mulai 1080x1039 sampai 1085x4143 untuk unit floor standing).
   Kotaknya dibuat potret dan gambarnya di-"contain", supaya tidak ada unit yang terpotong. */
.media--product{aspect-ratio:3/4;margin-bottom:12px;background:var(--bg-tint);display:flex;align-items:center;justify-content:center;padding:14px}
.media--product img,.media--product svg{width:100%;height:100%;object-fit:contain}
.media--product figcaption{position:absolute;left:0;right:0;bottom:0}
@media(min-width:700px){.media--product{aspect-ratio:4/5}}

/* trust strip */
.trust{background:var(--bg-tint);border-bottom:1px solid var(--line)}
.trust-list{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;gap:6px 0;font-family:var(--font-h);font-weight:700;font-size:13px;color:var(--brand-ink)}
.trust-list li{padding:0 12px;border-right:1px solid #BFE3F3}
.trust-list li:last-child{border:0}
@media(min-width:700px){.trust-list{justify-content:center;font-size:14px;padding:14px 0}}

/* checklist / kartu */
.grid{display:grid;gap:16px}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow)}
.card h3{font-size:18px;margin-bottom:6px}
.card p:last-child{margin-bottom:0}
.card .num-big{font-family:var(--font-h);font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--brand-ink);line-height:1;margin-bottom:6px}
.check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
@media(min-width:700px){.check{grid-template-columns:1fr 1fr}}
.check li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.check li::before{content:"";flex:none;width:20px;height:20px;border:2px solid var(--brand);border-radius:5px;margin-top:2px;background:linear-gradient(var(--brand),var(--brand)) center/10px 2px no-repeat}
.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:14px}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}.split .steps{grid-template-columns:1fr 1fr}}
.steps li{counter-increment:s;padding:18px;border-radius:var(--r-card);background:#fff;border:1px solid var(--line)}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--brand-ink);color:#fff;font-family:var(--font-h);font-weight:800;margin-bottom:10px}
.steps h3{font-size:17px}

/* pembalik / statement */
.reverse{background:var(--ink);color:#fff}
.reverse h2,.reverse h3{color:#fff}
.reverse .src,.reverse .src a{color:#B7C3C8}
.reverse .places{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}
@media(min-width:700px){.reverse .places{grid-template-columns:repeat(3,1fr)}}
.reverse .places li{border:1px solid #33424A;border-radius:10px;padding:14px 16px}
.reverse .places strong{display:block;font-family:var(--font-h);font-size:18px}
.reverse .btn-primary{background:var(--brand);color:#04263A}
.reverse .btn-primary:hover{background:#33C0F0}

/* tabel */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
table.data{border-collapse:collapse;width:100%;min-width:640px;font-size:15px;background:#fff}
table.data th,table.data td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.data thead th{font-family:var(--font-h);font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft);position:sticky;top:0}
table.data tbody th{font-weight:700}
table.data td.num,table.data th.num{text-align:right}
table.compare{min-width:520px}
table.compare td:first-child{font-weight:600}
table.compare .yes{color:var(--ok);font-weight:700}
table.spec{min-width:0;font-size:15px}
table.spec th{width:42%;color:var(--muted);font-weight:500}

/* lab card */
.lab-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow);max-width:560px}
.lab-eyebrow{font-family:var(--font-h);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--brand-ink);margin:0 0 4px}
.lab-no{font-size:13px;color:var(--muted);margin:0 0 14px}
.lab-table{width:100%;border-collapse:collapse;font-size:15px}
.lab-table th,.lab-table td{padding:8px 6px;border-bottom:1px dashed var(--line);text-align:left}
.lab-table th{font-weight:500}
.lab-table td.ok{color:var(--ok);font-weight:800;text-align:right}
.lab-table td.muted{font-size:13px}
.lab-card .cta-wrap{margin:16px 0 8px}
.lab-card--compact{max-width:none}

/* blok koreksi & stat */
.correct{border-left:4px solid var(--warn);background:#FFF9F0;padding:16px 18px;border-radius:0 10px 10px 0;margin:20px 0}
.correct p{margin:0 0 6px}.correct p:last-child{margin:0}
.stat{border-left:4px solid var(--brand);padding:4px 0 4px 18px;margin:20px 0}
.stat p{margin:0}
.callout{background:var(--bg-tint);border-radius:var(--r-card);padding:20px 22px;margin:20px 0}
.callout p:last-child{margin-bottom:0}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);padding:4px 0}
.faq-item summary{cursor:pointer;font-family:var(--font-h);font-weight:700;font-size:17px;padding:14px 32px 14px 0;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;color:var(--brand-dark);font-weight:400}
.faq-item[open] summary::after{content:"–"}
.faq-a{padding:0 0 16px;max-width:68ch}

/* kalkulator */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow)}
.calc label{display:block;font-weight:600;font-size:15px;margin:12px 0 6px}
.calc input,.calc select{width:100%;font:inherit;padding:12px 14px;border:1px solid #B9C6CC;border-radius:8px;background:#fff;color:var(--ink)}
.calc input:focus,.calc select:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.calc-out{margin-top:20px}
.calc-out table{width:100%;border-collapse:collapse}
.calc-out th,.calc-out td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right}
.calc-out th:first-child,.calc-out td:first-child{text-align:left}
.calc-out .diff{font-weight:800;color:var(--brand-ink)}
.calc-out .neg{color:var(--warn)}
.calc-note{font-size:13px;color:var(--muted);margin-top:10px}

/* CTA final */
.cta-final{background:var(--bg-tint);text-align:center}
.cta-final .btn{width:100%}
@media(min-width:700px){.cta-final .btn{width:auto}}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0 120px;background:var(--bg-soft);font-size:14px}
.foot-grid{display:grid;gap:24px;margin:16px 0 24px}
@media(min-width:700px){.foot-grid{grid-template-columns:repeat(3,1fr)}}
.foot-title{font-family:var(--font-h);font-weight:700;margin:0 0 8px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:4px 0}
.site-footer a{color:var(--ink)}
.disclaimer{border:1px solid var(--line);background:#fff;border-radius:10px;padding:14px 16px;font-size:14px}
.upd{font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px}
@media(min-width:900px){.site-footer{padding-bottom:48px}}

/* sticky WA */
.sticky-wa{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-top:1px solid var(--line);backdrop-filter:blur(6px)}
.sticky-wa .btn{width:100%;flex-direction:column;gap:2px;padding:10px}
.sticky-wa small{font-weight:400;font-size:12px;opacity:.9}
@media(min-width:900px){.sticky-wa{left:auto;right:24px;bottom:24px;background:none;border:0;padding:0}.sticky-wa .btn{width:auto;flex-direction:row;gap:10px;padding:14px 20px;box-shadow:0 6px 20px rgba(27,37,41,.18);border-radius:999px}}

/* misc */
.split{display:grid;gap:24px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;align-items:start;gap:48px}}
.list-clean{list-style:none;padding:0;margin:0}
.list-clean li{padding:10px 0;border-bottom:1px solid var(--line)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.prose>*+*{margin-top:1em}
.prose h2{margin-top:1.8em}
.prose h3{margin-top:1.4em}
.toc{background:var(--bg-soft);border-radius:10px;padding:14px 18px;font-size:15px}
.toc ol{margin:0}
@media print{.sticky-wa,.site-header .hdr-cta,.nav{display:none}}

/* ============================================================
   TEMA GELAP — halaman pain (LP-5/6/7). AMATI/TIRU/MODIFIKASI:
   pola dari profil web-profiles/tonyrobbins (kanvas hitam, tipografi
   raksasa tracking negatif, eyebrow bertitik, CTA pill) —
   dimodifikasi ke palet Coway (cyan) + kontras teks >= 4.5:1.
   ============================================================ */
.theme-dark{
  --ink:#F2F5F6;--muted:#AEBBC0;--line:#2A3134;--bg:#0A0C0D;--bg-soft:#14181A;--bg-tint:#101E25;
  --brand:#35C5F0;--brand-dark:#5AD2F7;--brand-ink:#8FE1FA;--warm:#FFB454;
  background:var(--bg);color:var(--ink);
}
.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4{color:var(--ink)}
.theme-dark a{color:var(--brand-dark)}
.theme-dark a:hover{color:var(--brand-ink)}
.theme-dark .site-header{background:rgba(10,12,13,.92);border-bottom-color:var(--line)}
.theme-dark .brand{color:var(--ink)}
.theme-dark .nav a{color:var(--ink)}
.theme-dark .nav a:hover,.theme-dark .nav a[aria-current]{background:var(--bg-soft);color:var(--brand-ink)}
.theme-dark .nav-toggle{color:var(--ink);border-color:var(--line)}
.theme-dark .nav.open ul{background:var(--bg-soft);border-bottom-color:var(--line)}
.theme-dark .section.soft{background:var(--bg-soft)}
.theme-dark .section.tint{background:var(--bg-tint)}
.theme-dark .card{background:var(--bg-soft);border-color:var(--line);box-shadow:none}
.theme-dark .callout{background:var(--bg-tint)}
.theme-dark .correct{background:#1D1710;border-left-color:var(--warm)}
.theme-dark .btn-primary{background:#fff;color:#0A0C0D;border-radius:999px;padding:16px 32px}
.theme-dark .btn-primary:hover{background:#D9E3E7;color:#0A0C0D}
.theme-dark .btn-ghost{background:transparent;color:var(--ink);border-color:#46525700}
.theme-dark .btn-ghost{border-color:#465257}
.theme-dark .btn-ghost:hover{border-color:var(--brand)}
.theme-dark .cta-final{background:var(--bg-soft)}
.theme-dark .site-footer{background:var(--bg-soft);border-top-color:var(--line)}
.theme-dark .site-footer a{color:var(--ink)}
.theme-dark .disclaimer{background:var(--bg);border-color:var(--line)}
.theme-dark .sticky-wa{background:rgba(10,12,13,.94);border-top-color:var(--line)}
.theme-dark .trust{background:var(--bg-tint);border-bottom-color:var(--line)}
.theme-dark .trust-list{color:var(--brand-ink)}
.theme-dark .trust-list li{border-right-color:#26343A}
.theme-dark table.data{background:var(--bg-soft);color:var(--ink)}
.theme-dark table.data thead th{background:#1B2124;color:var(--muted)}
.theme-dark .lab-card{background:var(--bg-soft);border-color:var(--line);box-shadow:none}
.theme-dark .media,.theme-dark .media--product{background:var(--bg-soft)}
.theme-dark .ph{border-color:#3A464B;background:repeating-linear-gradient(135deg,#14181A 0 12px,#0F1315 12px 24px)}
.theme-dark .faq-item{border-bottom-color:var(--line)}
.theme-dark .check li,.theme-dark .steps li,.theme-dark .list-clean li{background:var(--bg-soft);border-color:var(--line)}
.theme-dark .list-clean li{background:none}
.theme-dark .toc{background:var(--bg-soft)}
.theme-dark .tag-ok{background:#0E241C;border-color:#1E5B45;color:#6EE7B7}
.theme-dark .tag-warn{background:#241B0E;border-color:#5B4520;color:#FBC46B}
.theme-dark .stat{border-left-color:var(--brand)}
.theme-dark .pending{border-left-color:var(--warm)}

/* tipografi raksasa (dipakai di tema gelap maupun terang) */
.h-giant{font-family:var(--font-h);font-size:clamp(34px,8.4vw,68px);line-height:.94;letter-spacing:-.035em;font-weight:800;margin:0 0 20px;text-wrap:balance}
@media(min-width:900px){.h-giant{line-height:.92}}
.h-giant .soft{color:var(--muted);font-weight:600}
.h-giant .hi{color:var(--brand)}
.eyebrow-dot{font-family:var(--font-h);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.eyebrow-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* hero pain */
.hero-pain{padding:36px 0 28px;border-bottom:1px solid var(--line)}
@media(min-width:900px){.hero-pain{padding:80px 0 56px}}
.hero-pain .lead{max-width:56ch;color:var(--muted);font-size:1.15em}
.hero-pain .hero-grid{display:grid;gap:28px}
@media(min-width:900px){.hero-pain .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:56px}}
.hero-pain .btn{width:100%}
@media(min-width:700px){.hero-pain .btn{width:auto}}

/* ---- blok cerita: paragraf dengan ritme besar-kecil, warna, spasi ---- */
.story{max-width:34em}
.story>p{margin:0 0 1.15em}
.story .p-open{font-size:clamp(21px,3.4vw,28px);line-height:1.42;letter-spacing:-.015em;font-family:var(--font-h);font-weight:600}
.story .p-beat{font-size:clamp(19px,3vw,24px);line-height:1.45;font-weight:600;color:var(--brand-ink);margin-block:1.4em}
.story .p-whisper{font-size:15px;color:var(--muted);border-left:2px solid var(--line);padding-left:16px}
.story em{font-style:italic;color:var(--brand-ink)}
.story strong{font-weight:800}
.story .breath{height:28px}
@media(min-width:900px){.story .breath{height:44px}}
.pull{font-family:var(--font-h);font-size:clamp(26px,5.2vw,44px);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:1.4em 0;text-wrap:balance}
.pull small{display:block;font-family:var(--font-b);font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:14px;line-height:1.5}
.story-sign{display:flex;gap:14px;align-items:center;margin-top:28px;font-size:14px;color:var(--muted)}
.story-sign .avatar{width:44px;height:44px;border-radius:50%;background:var(--bg-tint);border:1px solid var(--line);flex:none;display:grid;place-items:center;font-family:var(--font-h);font-weight:800;color:var(--brand)}
.hl{background:linear-gradient(transparent 62%,rgba(53,197,240,.28) 0)}
.theme-dark .hl{background:linear-gradient(transparent 62%,rgba(53,197,240,.30) 0)}

/* ---- journey: berapa menit untuk segelas air ---- */
.journey{list-style:none;padding:0;margin:24px 0 0;counter-reset:j;display:grid;gap:0}
.journey li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.journey li::before{counter-increment:j;content:counter(j);width:28px;height:28px;border-radius:50%;background:var(--bg-soft);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-h);font-size:13px;font-weight:800;color:var(--muted)}
.journey h3{font-size:17px;margin:0 0 2px}
.journey p{margin:0;font-size:15px;color:var(--muted)}
.journey .j-min{font-family:var(--font-h);font-weight:800;font-size:15px;color:var(--brand);white-space:nowrap;padding-top:3px}
.journey-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:20px 0 0;font-family:var(--font-h)}
.journey-total .big{font-size:clamp(38px,9vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--brand)}
.journey-total .lbl{font-family:var(--font-b);font-size:15px;color:var(--muted)}
.jcalc{display:grid;gap:14px;margin:24px 0 0;padding:20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-soft)}
@media(min-width:700px){.jcalc{grid-template-columns:1fr 1fr auto;align-items:end}}
.jcalc label{display:block;font-size:14px;font-weight:600;margin:0 0 6px}
.jcalc input{width:100%;font:inherit;padding:12px 14px;border:1px solid #465257;border-radius:8px;background:var(--bg);color:var(--ink)}
.theme-dark .jcalc input{background:#0F1315}
.jcalc input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.jcalc-out{font-family:var(--font-h);font-weight:800;font-size:17px;color:var(--brand);align-self:center}

/* ---- versus dua kolom (galon vs keran) ---- */
.vs{display:grid;gap:16px;margin-top:24px}
@media(min-width:800px){.vs{grid-template-columns:1fr 1fr}}
.vs>div{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;background:var(--bg-soft)}
.vs .vs-b{border-color:var(--brand);background:var(--bg-tint)}
.vs h3{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px}
.vs .vs-num{font-family:var(--font-h);font-size:clamp(30px,6vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0 0 8px}
.vs .vs-b .vs-num{color:var(--brand)}
.vs ul{list-style:none;padding:0;margin:14px 0 0;font-size:15px}
.vs li{padding:8px 0;border-top:1px dashed var(--line);color:var(--muted)}

/* ---- pertanyaan jujur (kartu tanya) ---- */
.qcards{display:grid;gap:14px;margin-top:20px}
@media(min-width:800px){.qcards{grid-template-columns:1fr 1fr}}
.qcard{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:0 var(--r-card) var(--r-card) 0;padding:18px 20px;background:var(--bg-soft)}
.qcard h3{font-size:17px;margin-bottom:6px}
.qcard p{margin:0;font-size:15px;color:var(--muted)}

/* ---- form lead (satu tindakan: WA atau dihubungi) ---- */
.leadwrap{display:grid;gap:24px}
@media(min-width:900px){.leadwrap{grid-template-columns:1fr 1fr;gap:48px;align-items:start}}
.leadform{border:1px solid var(--line);border-radius:var(--r-card);padding:24px;background:var(--bg-soft)}
.leadform .fld{margin:0 0 14px}
.leadform label{display:block;font-size:14px;font-weight:600;margin:0 0 6px}
.leadform input,.leadform select,.leadform textarea{width:100%;font:inherit;padding:13px 14px;border:1px solid #465257;border-radius:8px;background:var(--bg);color:var(--ink)}
.theme-dark .leadform input,.theme-dark .leadform select,.theme-dark .leadform textarea{background:#0F1315}
.leadform input:focus,.leadform select:focus,.leadform textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.leadform .btn{width:100%;margin-top:6px}
.leadform .note{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.leadform .err{color:var(--warm);font-size:13px;margin:6px 0 0}
.lead-ok{border:1px solid var(--brand);border-radius:var(--r-card);padding:20px;background:var(--bg-tint);font-size:15px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.or-line{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
/* form lead berada di dalam .cta-final (yang rata tengah) — isinya tetap rata kiri agar mudah dibaca */
.cta-final .leadwrap{text-align:left}
.cta-final .leadwrap .cta-wrap .btn{width:100%}
@media(min-width:700px){.cta-final .leadwrap .cta-wrap .btn{width:auto}}

/* ---- strip badge sertifikasi (aset resmi dari materi Coway) ---- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 12px;margin:18px 0 10px}
.badge{text-align:center}
.badge img{width:76px;height:76px;object-fit:contain;display:block;margin:0 auto 8px}
.badge b{display:block;font-size:12.5px;line-height:1.32;font-weight:700;text-wrap:balance}
.badge span{display:block;font-size:11px;line-height:1.35;color:var(--muted);margin-top:3px;text-wrap:balance}
.theme-dark .badge img{background:#fff;border-radius:8px;padding:4px}
@media(min-width:700px){.badges{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px 16px}.badge img{width:88px;height:88px}}
/* logo Coway kotak di header (file resmi 225x225) */
.brand-logo-sq{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:none}

/* ---- footer minimal untuk halaman konversi (fokus lead-gen) ---- */
.site-footer--min{padding-top:28px}
.site-footer--min .foot-cta{text-align:center;padding:6px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.site-footer--min .foot-cta p{margin:0 0 14px;font-size:16px}
.site-footer--min .foot-cta .btn{width:100%}
@media(min-width:700px){.site-footer--min .foot-cta .btn{width:auto;min-width:260px}}
.foot-legal{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--brand-dark)}
.theme-dark .foot-legal a:hover{color:var(--brand-ink)}
/* tombol di dalam footer: warna teks tombol tidak boleh ditimpa aturan ".site-footer a" */
.site-footer a.btn-primary{color:#fff}
.site-footer a.btn-ghost{color:var(--ink)}
.theme-dark .site-footer a.btn-primary{color:#0A0C0D}

/* ---- daftar area per provinsi ---- */
.area-list{margin:10px 0 0}
.area-lead{font-weight:700;font-size:14px;margin:0 0 6px}
.area-grp{display:block;font-size:13px;line-height:1.5;color:var(--muted);padding:2px 0}
.area-grp b{color:var(--ink);font-weight:600}
.theme-dark .area-grp b{color:var(--ink)}

/* ---- form bertahap: penanda langkah + kartu pilihan ---- */
.steps-bar{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.steps-count{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.steps-count b{color:var(--brand);font-size:15px}
.steps-track{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.steps-track i{display:block;height:100%;width:33%;background:var(--brand);border-radius:999px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.leadform .step{border:0;padding:0;margin:0 0 4px;min-inline-size:0}
.step-q{display:flex;align-items:flex-start;gap:10px;font-family:var(--font-h);font-size:18px;font-weight:700;line-height:1.3;padding:0;margin:0 0 14px;text-wrap:balance}
.step-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px;display:grid;place-items:center;margin-top:1px}
.theme-dark .step-n{color:#0A0C0D}
.opts{display:grid;gap:10px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt-body{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:12px;padding:14px 44px 14px 16px;background:var(--bg);transition:border-color .15s,background .15s,transform .08s}
.theme-dark .opt-body{background:#0F1315}
.opt-body b{font-size:15px;font-weight:600;line-height:1.35}
.opt-body i{font-style:normal;font-size:13px;color:var(--muted);line-height:1.4}
.opt-body::after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line)}
.opt:hover .opt-body{border-color:var(--brand)}
.opt input:focus-visible+.opt-body{outline:2px solid var(--brand);outline-offset:2px}
.opt input:checked+.opt-body{border-color:var(--brand);background:var(--tint)}
.theme-dark .opt input:checked+.opt-body{background:var(--bg-tint)}
.opt input:checked+.opt-body::after{border-color:var(--brand);background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/13px no-repeat}
.opt:active .opt-body{transform:scale(.99)}
.step-nav{display:flex;gap:10px;align-items:center;margin-top:16px}
.step-nav .btn-primary{flex:1}
.step-nav .btn-ghost{flex:none;padding-inline:16px}
/* atribut hidden harus menang atas display dari kelas .btn / .fld */
[hidden]{display:none !important}
/* tombol di dalam .step-nav tidak boleh ikut aturan lebar 100% milik .leadform .btn */
.leadform .step-nav .btn{width:auto;margin-top:0}
.leadform .step-nav .btn-primary{flex:1;min-width:0}

/* sumber ditulis sekecil mungkin — hadir untuk kredibilitas, bukan untuk dibaca */
.src-mini{font-size:11.5px;line-height:1.4;opacity:.62;margin-top:4px}
.theme-dark .src-mini{opacity:.5}
/* daftar area per provinsi */
.area-grp{list-style:none;padding:0;margin:6px 0 0}
.area-grp li{display:block;padding:3px 0;font-size:13px;line-height:1.5;color:var(--muted)}
.area-grp li b{display:block;color:var(--ink);font-weight:700;font-size:12px;letter-spacing:.02em}

/* ============ Panah pengarah gaya halaman penjualan ============ */
:root{--arw:#E23B2E}
.arw{color:var(--arw);flex:none;display:block}
.cta-point{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.cta-point .btn{order:2}
.cta-point .micro{order:4;flex-basis:100%;margin-top:8px}
.arw-l{order:1}
.arw-r{order:3;transform:scaleX(-1)}
/* Di layar sempit tombol memakai lebar penuh, jadi panah kiri-kanan tidak muat.
   Yang tampil: satu panah menunjuk ke bawah tepat di atas tombol (gaya landing page). */
.arw-r{display:none}
.arw-l{display:block;flex-basis:100%;text-align:center;animation:arwTurun 1.1s ease-in-out infinite}
.arw-l .arw{display:inline-block;transform:rotate(90deg)}
@media(min-width:520px){
  .arw-l,.arw-r{display:block;flex-basis:auto;animation:arwNudge 1.1s ease-in-out infinite}
  .arw-l .arw{transform:none}
  .arw-r{animation-name:arwNudgeR}
}
@keyframes arwTurun{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes arwNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes arwNudgeR{0%,100%{transform:scaleX(-1) translateX(0)}50%{transform:scaleX(-1) translateX(5px)}}
@media(prefers-reduced-motion:reduce){.arw-l,.arw-r{animation:none}}
.step-nav.cta-point{justify-content:flex-start}
.step-nav .arw-l{flex-basis:auto;animation-name:arwNudge}
.step-nav .arw-l .arw{transform:none}
.step-nav.cta-point .btn-ghost{order:0}

/* ============ Kalkulator menit — tata letak diperbaiki ============ */
.jcalc{display:block;margin:18px 0 0;padding:18px;border:2px solid var(--brand);border-radius:var(--r-card);background:var(--bg-soft)}
.theme-dark .jcalc{background:var(--bg-tint)}
.jcalc-judul{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--font-h);font-weight:700;font-size:15px;color:var(--arw)}
.jcalc-judul .arw{animation:arwNudge 1.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.jcalc-judul .arw{animation:none}}
.jcalc-row{display:grid;gap:14px}
@media(min-width:560px){.jcalc-row{grid-template-columns:1fr 1fr}}
.jcalc-fld label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:var(--muted)}
.jcalc-fld input{width:100%;font-family:var(--font-h);font-size:32px;font-weight:800;letter-spacing:-.02em;text-align:center;padding:10px 12px;border:2px solid var(--brand);border-radius:10px;background:#fff;color:var(--brand-dark);-moz-appearance:textfield}
.theme-dark .jcalc-fld input{background:#0F1315;color:var(--brand)}
.jcalc-fld input:focus{outline:3px solid var(--arw);outline-offset:1px}
.jcalc-out{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-family:var(--font-h);font-weight:700;font-size:17px;line-height:1.45;color:var(--brand-dark)}
.theme-dark .jcalc-out{color:var(--brand)}
.jcalc-out strong{font-size:22px}
.journey-total{align-items:baseline}

/* ---------- Pilihan tenor sebagai CTA ---------- */
.tenor{margin:18px 0 6px}
.tenor-judul{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--font-h);font-weight:700;font-size:15px;color:var(--arw)}
.tenor-judul .arw{animation:arwNudge 1.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.tenor-judul .arw{animation:none}}
.tenor-grid{display:grid;gap:10px;grid-template-columns:1fr}

/* Empat kolom hanya kalau blok ini berdiri sendiri (halaman harga), bukan di dalam
   kartu produk yang lebarnya cuma separuh layar. Pakai container query supaya
   yang dibaca lebar wadahnya, bukan lebar layar. */
.tenor{container-type:inline-size}
@container (min-width:520px){.tenor-grid{grid-template-columns:1fr 1fr}}
@container (min-width:900px){.tenor-grid{grid-template-columns:repeat(4,1fr)}}
.tenor-kartu{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;border:2px solid var(--line);border-radius:var(--r-card);background:var(--bg);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s}
.tenor-kartu:hover,.tenor-kartu:focus-visible{border-color:var(--arw);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.10)}
.tenor-kartu.is-hemat{border-color:var(--brand)}
.tenor-tag{position:absolute;top:-11px;left:14px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tenor-bulan{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.tenor-harga{font-family:var(--font-h);font-size:26px;font-weight:800;line-height:1.1;color:var(--ink)}
.tenor-harga small{font-size:14px;font-weight:600;color:var(--muted)}
.tenor-servis{font-size:13px;line-height:1.4;color:var(--ink);background:var(--bg-tint);border-radius:8px;padding:6px 9px;margin-top:4px}
.tenor-servis b{color:var(--brand-ink,var(--brand))}
.tenor-total{font-size:12px;color:var(--muted)}
.tenor-aksi{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;font-weight:700;color:var(--arw)}
.arw-kecil{width:16px;height:16px}
.tenor-kaki{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.theme-dark .tenor-kartu{background:var(--bg-soft);border-color:rgba(255,255,255,.14)}
.theme-dark .tenor-kartu:hover,.theme-dark .tenor-kartu:focus-visible{border-color:var(--arw)}
.theme-dark .tenor-servis{background:rgba(255,255,255,.06)}

/* Sel tenor di tabel harga: angka tetap terbaca sebagai angka, tapi bisa diklik */
.tenor-petunjuk{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--font-h);font-weight:700;font-size:14px;color:var(--arw)}
.tenor-petunjuk .arw{animation:arwNudge 1.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.tenor-petunjuk .arw{animation:none}}
a.sel-tenor{display:block;min-width:112px;padding:7px 9px;border:1.5px solid transparent;border-radius:9px;text-decoration:none;color:var(--ink);font-weight:700;line-height:1.2}
a.sel-tenor small{display:block;margin-top:2px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
a.sel-tenor:hover,a.sel-tenor:focus-visible{border-color:var(--arw);background:var(--bg-tint);color:var(--ink)}
a.sel-tenor:hover small,a.sel-tenor:focus-visible small{color:var(--arw)}
.theme-dark a.sel-tenor:hover,.theme-dark a.sel-tenor:focus-visible{background:rgba(255,255,255,.06)}

/* ---------- Blok Heart Service ---------- */
.heart-langkah{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:14px}
.heart-langkah li{display:flex;gap:12px;align-items:flex-start}
.heart-no{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:800;font-size:15px}
.heart-langkah div{display:flex;flex-direction:column;gap:2px}
.heart-langkah b{font-size:16px}
.heart-langkah span{font-size:14px;line-height:1.5;color:var(--muted)}
.media--heart{background:var(--bg-tint)}
.media--heart img{object-fit:cover}
.theme-dark .media--heart{background:var(--bg-soft)}

/* ---------- Blok jawaban singkat ---------- */
.jawab{padding-top:26px;padding-bottom:26px}
.jawab-tanya{font-size:20px;line-height:1.3;margin:0 0 10px}
.jawab-isi{margin:0;font-size:17px;line-height:1.6;padding-left:16px;border-left:4px solid var(--brand)}
@media(min-width:700px){.jawab-tanya{font-size:22px}.jawab-isi{font-size:18px}}
.upd-mini{font-size:12px;color:var(--muted);margin:10px 0 0}