/* Qonsultan Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --blue-primary:#0d8bff;
  --blue-light:#00c6ff;
  --coral:#ff6b4a;
  --navy-dark:#0a1628;
  --charcoal:#1a2332;
  --gray-cool:#6b7b8f;
  --gray-light:#f5f7fa;
  --white:#ffffff;
  --border-gray:#e2e8f0;
  --blue-primary-hover:#0a76db;
  --blue-primary-press:#0862b6;
  --coral-hover:#ee5a39;
  --coral-press:#d94d2e;
  --blue-tint:#e8f4ff;
  --coral-tint:#fff0ec;
  --coral-ink:#c6431f;
  --success:#12a150;
  --success-tint:#e9f8ef;
  --success-ink:#0b6b36;
  --glass-bg:rgba(255,255,255,.72);
  --text-heading:var(--charcoal);
  --text-body:var(--charcoal);
  --text-muted:var(--gray-cool);
  --text-inverse:var(--white);
  --text-link:var(--blue-primary);
  --text-link-hover:var(--blue-primary-hover);
  --surface-page:var(--white);
  --surface-subtle:var(--gray-light);
  --surface-card:var(--white);
  --surface-dark:var(--navy-dark);
  --surface-accent:var(--blue-tint);
  --border-default:var(--border-gray);
  --border-strong:#cbd5e1;
  --border-focus:var(--blue-primary);
  --action-primary:var(--blue-primary);
  --action-cta:var(--coral);
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(10,22,40,.06);
  --shadow-sm:0 2px 8px rgba(10,22,40,.06);
  --shadow-md:0 8px 24px rgba(10,22,40,.08);
  --shadow-lg:0 18px 48px rgba(10,22,40,.12);
  --shadow-blue:0 10px 28px rgba(13,139,255,.24);
  --shadow-coral:0 10px 28px rgba(255,107,74,.28);
  --focus-ring:0 0 0 3px rgba(13,139,255,.32);
}
:root {
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --gutter:24px;
  --section-y:96px;
  --container-max:1200px;
  --container-narrow:760px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --radius-mark:12px;
  --border-width:1px;
  --border-width-strong:2px;
  --gradient-brand:linear-gradient(135deg,#0D8BFF 0%,#00C6FF 100%);
  --gradient-coral:linear-gradient(135deg,#FF6B4A 0%,#FFA07A 100%);
  --gradient-navy:linear-gradient(135deg,#0A1628 0%,#152B4A 100%);
  --scrim-dark:linear-gradient(180deg,rgba(10,22,40,0) 0%,rgba(10,22,40,.78) 100%);
  --text-hero:56px;
  --text-hero-lh:1.2;
  --text-h1:40px;
  --text-h1-lh:1.3;
  --text-h2:32px;
  --text-h3:24px;
  --text-h4:20px;
  --text-body-size:18px;
  --text-body-lh:1.6;
  --text-small:16px;
  --text-caption:14px;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-eyebrow:0.12em;
  --measure:68ch;
  --glass-blur:blur(14px);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:340ms;
  --dur-xslow:560ms;
  --stagger-step:60ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --lift-hover:translateY(-2px);
  --press-scale:.985;
  --reveal-offset:translateY(16px);
  --font-heading:'Poppins',system-ui,sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
}
.hero{font-family:var(--font-heading);font-size:56px;line-height:1.2;font-weight:700;letter-spacing:-0.02em}
.h1{font-family:var(--font-heading);font-size:40px;line-height:1.3;font-weight:700;letter-spacing:-0.02em}
.h2{font-family:var(--font-heading);font-size:32px;line-height:1.3;font-weight:700;letter-spacing:-0.02em}
.h3{font-family:var(--font-heading);font-size:24px;line-height:1.35;font-weight:700;letter-spacing:-0.02em}
.h4{font-family:var(--font-heading);font-size:20px;line-height:1.4;font-weight:700;letter-spacing:-0.02em}
.body{font-family:var(--font-body);font-size:18px;line-height:1.6;font-weight:400}
.small{font-family:var(--font-body);font-size:16px;line-height:1.5;font-weight:400}
.caption{font-family:var(--font-body);font-size:14px;line-height:1.5;font-weight:400}
.eyebrow-text{font-family:var(--font-heading);font-size:14px;font-weight:600;letter-spacing:0.12em}

/* Qonsultan Design System untuk web — bahasa visual "Berkas & Resi" (tanpa inline style: CSP `style-src 'self'`).
   Token ada di tokens.css. Warna baru dilarang; tambah dulu di Claude Design.
   Gagasan: berkas hukum yang ditangani cermat dan dijaga kerahasiaannya. Unsurnya diambil dari dunia dokumen hukum:
   penanda bagian bernomor (brand book: "03 / COLOR PALETTE"), garis rambut, angka monospace, kuitansi bertitik penuntun,
   cap tinta, dan garis alur kerja. Navy = teks, biru = tombol dan status, oranye = aksen. */
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/Poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/Poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/Poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/Poppins-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/Poppins-800.woff2) format('woff2')}

/* Teks sekunder: gray-cool (#6B7B8F) hanya 4,33:1 di putih, gagal AA untuk teks kecil. Pakai charcoal; hierarki lewat ukuran dan bobot. */
:root{
  --text-muted:var(--charcoal);
  --ink:var(--navy-dark);
  /* Oranye aksen (keputusan owner 5 Nov 2026: koral #FF6B4A terlalu kemerahan). Teks oranye memakai --orange-ink (5,1:1 di --orange-tint). */
  --orange:#FF8A1F;
  --orange-ink:#B05300;
  --orange-tint:#FFF3E6;
  /* Sorotan: blok oranye + teks putih (keputusan owner). #E86F00 = 3,1:1 dengan putih, hanya untuk teks besar tebal (≥24 px). */
  --orange-hl:#E86F00;
  --gradient-orange:linear-gradient(90deg,#FF8A1F 0%,#FFB347 100%);
  --ink-deep:var(--navy-dark);
  --rule:1px solid var(--border-default);
  --rule-strong:1.5px solid var(--blue-primary);
  --cta-bg:linear-gradient(135deg,var(--blue-primary-press) 0%,var(--blue-primary-hover) 100%);
  --cta-glow:0 10px 26px -8px rgba(13,139,255,.6),inset 0 1px 0 rgba(255,255,255,.28);
  --text-display:clamp(40px,6vw,84px);
  --text-display-lh:1.02;
  --text-hero:clamp(36px,5vw,64px);
  --text-h1:clamp(32px,4.2vw,52px);
  --text-h2:clamp(28px,3.4vw,44px);
  --tracking-display:-0.035em;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;font-family:var(--font-body);font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-bold);color:var(--navy-dark);letter-spacing:var(--tracking-tight);margin:0;text-wrap:balance}
h1{font-size:var(--text-h1);line-height:1.08;letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-h2);line-height:1.1;letter-spacing:var(--tracking-display)}
h3{font-size:var(--text-h3);line-height:1.3}
h4{font-size:var(--text-h4);line-height:1.4}
p{margin:0;text-wrap:pretty}
img,svg{max-width:100%}
a{color:var(--blue-primary-press);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
::selection{background:var(--blue-tint);color:var(--ink)}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy-dark);color:var(--white);padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);z-index:100}
.skip:focus{left:var(--space-4)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--font-mono);letter-spacing:0}

/* ---------- tata letak ---------- */
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section--subtle{background:var(--surface-subtle)}
.section--dark{background:var(--surface-dark);color:var(--white)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white)}
.section--grad{background:var(--surface-dark);color:var(--white)}
.section--grad h1,.section--grad h2,.section--grad h3{color:var(--white)}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.stack--lg{gap:var(--space-5)}
.stack--xl{gap:var(--space-7)}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:var(--gutter)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:center}
.split--top{align-items:start}
.center{text-align:center}
.center-row{justify-content:center}
.sticky{position:sticky;top:96px}
.muted{color:var(--text-muted)}
.on-dark{color:rgba(255,255,255,.84)}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:var(--measure)}
.eyebrow{font-family:var(--font-mono);font-size:13px;font-weight:var(--weight-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-primary-press)}
.section--dark .eyebrow,.section--grad .eyebrow,.finale .eyebrow{color:var(--blue-light)}

/* Penanda bagian bernomor, dari brand book: "03 / COLOR PALETTE". Garis rambut di atas, nomor biru, label huruf kapital berjarak. */
.mark{display:flex;align-items:baseline;gap:var(--space-3);border-top:var(--rule-strong);padding-top:var(--space-3);font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0}
.mark b{color:var(--orange-ink);font-weight:700}
.mark__a{margin-left:auto;letter-spacing:.04em;text-transform:none}
.section--dark .mark,.finale .mark,.lark .mark{border-top-color:rgba(255,255,255,.4);color:rgba(255,255,255,.88)}
.section--dark .mark b,.finale .mark b,.lark .mark b{color:var(--orange)}
.headline{display:grid;grid-template-columns:1fr minmax(0,.8fr);gap:var(--space-6);align-items:end;margin-top:var(--space-5)}
.headline p{max-width:46ch}

/* ---------- header: dok mengambang ---------- */
.header{position:sticky;top:0;z-index:50;padding:12px var(--gutter) 0;pointer-events:none}
.dock{pointer-events:auto;max-width:calc(var(--container-max) + 32px);margin:0 auto;display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:8px 8px 8px 20px;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(13,139,255,.18);border-radius:var(--radius-pill);box-shadow:0 12px 32px -18px rgba(10,22,40,.35)}
.logo{flex:0 0 auto}
.logo img{display:block;height:36px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center;padding:4px;border-radius:var(--radius-pill);background:var(--blue-tint)}
.nav a{white-space:nowrap;color:var(--blue-primary-press);font-weight:var(--weight-medium);font-size:14px;padding:0 14px;min-height:40px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.nav a:hover{text-decoration:none;background:rgba(255,255,255,.75)}
.nav a[aria-current="page"]{background:var(--white);box-shadow:0 2px 8px rgba(13,139,255,.18);font-weight:var(--weight-semibold)}
.trackbox{position:relative;display:flex;align-items:center;flex:0 0 auto;width:212px;min-height:44px;border-radius:var(--radius-pill);background:var(--white);border:1px solid rgba(13,139,255,.3);transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),width var(--dur-slow) var(--ease-standard)}
.trackbox:focus-within{border-color:var(--blue-primary);box-shadow:var(--focus-ring);width:240px}
.trackbox__pulse{position:absolute;left:14px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.trackbox__pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--orange);animation:m-pulse 1.8s var(--ease-out) infinite}
.trackbox__input{flex:1;min-width:0;height:42px;border:0;background:transparent;padding:0 0 0 30px;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--blue-primary-press);text-transform:uppercase}
.trackbox__input::placeholder{color:var(--blue-primary-press);opacity:.8;text-transform:none}
.trackbox__input:focus{outline:none}
.trackbox__go{flex:0 0 auto;width:36px;height:36px;margin-right:3px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--blue-tint);color:var(--blue-primary-press);cursor:pointer;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.trackbox__go:hover,.trackbox:focus-within .trackbox__go{background:var(--blue-primary-press);color:var(--white)}
.trackbox__go .icon{width:18px;height:18px}
.nav-more{display:none;margin-left:auto}
.nav-more summary{list-style:none;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--blue-tint);color:var(--blue-primary-press)}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more[open] summary{background:var(--blue-primary-press);color:var(--white)}
.nav-more nav{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 8px);background:var(--white);border:1px solid rgba(13,139,255,.18);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-5) var(--space-5);display:grid;box-shadow:var(--shadow-lg)}
.nav-more nav a{color:var(--blue-primary-press);font-weight:var(--weight-semibold);font-size:22px;letter-spacing:var(--tracking-tight);padding:var(--space-3) 0;min-height:52px;display:flex;align-items:center;border-bottom:var(--rule)}
.nav-more nav .trackbox{width:100%;margin-top:var(--space-4)}
.nav-more nav a.btn{border:0;margin-top:var(--space-3);font-size:var(--text-small);justify-content:center;color:var(--white)}

/* ---------- tombol: pil, 44 px minimum ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-5);border-radius:var(--radius-pill);border:0;font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:var(--text-small);line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(var(--press-scale))}
.btn .icon{transition:transform var(--dur-base) var(--ease-standard)}
.btn:hover .icon{transform:translateX(3px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn--sm{min-height:44px;padding:0 var(--space-4);font-size:var(--text-caption)}
.btn--lg{min-height:56px;padding:0 var(--space-6);font-size:17px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--blue-primary-press);color:var(--white)}
.btn--primary:hover{background:var(--blue-primary-hover);color:var(--white)}
.btn--cta{position:relative;overflow:hidden;background:var(--cta-bg);color:var(--white);box-shadow:var(--cta-glow)}
.btn--cta::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-standard)}
.btn--cta:hover::before{transform:translateX(120%)}
.btn--cta:hover{color:var(--white);box-shadow:0 14px 32px -8px rgba(0,198,255,.65),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--secondary{background:var(--blue-tint);color:var(--blue-primary-press);box-shadow:inset 0 0 0 1px rgba(13,139,255,.25)}
.btn--secondary:hover{background:var(--white);color:var(--blue-primary-press);box-shadow:inset 0 0 0 1.5px var(--blue-primary)}
.btn--inverse{background:var(--white);color:var(--blue-primary-press)}
.btn--inverse:hover{background:var(--blue-tint);color:var(--blue-primary-press)}
.btn--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn--ghost:hover{background:var(--white);color:var(--ink)}
.link-arrow{font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:var(--text-caption);display:inline-flex;gap:var(--space-2);align-items:center}

/* ---------- kartu dasar (dipakai juga oleh app) ---------- */
.card{background:var(--surface-card);border:var(--rule);border-radius:var(--radius-lg);padding:var(--space-6);transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.card--raised{box-shadow:var(--shadow-sm)}
.card--subtle{background:var(--surface-subtle);border-color:transparent}
.card--dark{background:rgba(255,255,255,.04);color:var(--white);border-color:rgba(255,255,255,.16)}
.card--gradient{background:var(--gradient-brand);border:0;color:var(--white)}
.card--gradient h2,.card--gradient h3,.card--gradient h4{color:var(--white)}
.card--link{display:flex;flex-direction:column;gap:var(--space-3);color:inherit}
.card--link:hover{border-color:var(--ink);text-decoration:none}
.card h3,.card h4{margin:0}
.icon{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:middle}
.icon--lg{width:24px;height:24px}
.tile{width:44px;height:44px;border-radius:var(--radius-md);background:var(--blue-tint);color:var(--blue-primary-press);display:grid;place-items:center;flex:0 0 auto}
.tile--brand{width:48px;height:48px;background:var(--ink);color:var(--white)}
.badge{width:fit-content;display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-semibold);background:var(--blue-tint);color:var(--blue-primary-press)}
.badge--gradient{background:var(--gradient-brand);color:var(--navy-dark)}
.badge--success{background:var(--success-tint);color:var(--success-ink)}
.badge--caps{text-transform:uppercase;letter-spacing:var(--tracking-eyebrow)}
.tag{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:var(--rule);background:var(--white);color:var(--ink);font-size:var(--text-caption);font-weight:var(--weight-medium)}
a.tag:hover{border-color:var(--ink);text-decoration:none}
.tag[aria-current="page"],.tag--on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.checks li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-small)}
.checks .icon{color:var(--blue-primary-press);margin-top:2px}
.section--dark .checks .icon,.section--grad .checks .icon,.lark .checks .icon{color:var(--blue-light)}

/* Cap tinta: label status yang tampak dicap, bukan lencana bergradien. */
.stamp{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border:2px solid currentColor;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-primary-press);transform:rotate(-4deg);width:fit-content}
.stamp--ink{color:var(--ink)}
.stamp--hot{color:var(--orange-ink);background:var(--orange-tint)}

/* ---------- harga dan kuitansi paket ---------- */
.price{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:clamp(30px,3vw,40px);line-height:1.05;letter-spacing:var(--tracking-display);color:var(--ink)}
.price small{font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--text-muted);letter-spacing:0}
.pkg{display:flex;flex-direction:column;gap:var(--space-4);height:100%}
.pkg__top{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;min-height:28px}
.pkg__top:empty{display:none}
.pkg .checks{flex:1}
.pkg__sla{font-size:var(--text-caption);color:var(--text-muted);display:flex;gap:var(--space-2);align-items:center}
.note{font-size:var(--text-caption);color:var(--text-muted)}
.section--dark .note,.section--grad .note,.card--dark .note,.finale .note,.lark .note{color:rgba(255,255,255,.8)}

/* Kuitansi: nomor kode paket, garis putus antarbagian, tepi bawah bergerigi seperti struk. */
.slip{position:relative;display:flex;flex-direction:column;background:var(--white);border:var(--rule);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-5) var(--space-5) var(--space-6);height:100%;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.slip::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-10px;height:10px;background:radial-gradient(circle at 7px 10px,transparent 6px,var(--white) 6.5px) 0 0/14px 10px repeat-x}
.slip:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(10,22,40,.35)}
.slip__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);min-height:28px}
.slip h3{font-size:22px;line-height:1.25;margin-top:var(--space-4)}
.slip h3 a{color:var(--ink)}
.slip__tag{margin-top:var(--space-2);font-size:var(--text-caption)}
.slip__price{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--border-strong)}
.slip .checks{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--border-strong);flex:1;gap:var(--space-2)}
.slip .checks li{font-size:15px}
.slip__sla{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px dashed var(--border-strong);font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.slip__sla b{text-transform:none;letter-spacing:0;text-align:right;font-weight:600}
.slip__act{display:flex;gap:var(--space-2);margin-top:var(--space-5);flex-wrap:wrap}
.slip__act .btn{flex:1}
.slip.sticky{position:sticky;height:auto}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6) var(--gutter);padding-bottom:10px}

/* Titik penuntun (daftar isi / kuitansi): label ........ nilai */
.leader{display:flex;align-items:baseline;gap:var(--space-2)}
.leader::after{content:"";order:1;flex:1;border-bottom:2px dotted var(--border-strong);transform:translateY(-4px)}
.leader>:last-child{order:2}

/* ---------- beranda: pembuka ---------- */
.opening{position:relative;padding:var(--space-8) 0 var(--space-9);margin-top:-76px;padding-top:calc(var(--space-8) + 76px);background:radial-gradient(1200px 520px at 85% 10%,var(--blue-tint) 0%,rgba(232,244,255,0) 70%),var(--white);border-bottom:var(--rule)}
.opening__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.7fr);gap:var(--space-7);align-items:start}
.opening h1{font-size:var(--text-display);line-height:var(--text-display-lh);letter-spacing:var(--tracking-display);font-weight:800;color:var(--navy-dark);margin-top:0}
.hl,.opening h1 em,.lark h2 em,.footer__say em{font-style:normal;color:var(--white);background:linear-gradient(var(--orange-hl),var(--orange-hl)) no-repeat 0 64%/100% 72%;padding:0 .14em;margin:0 -.04em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap}
.js .opening h1 em,.js .lark h2 em,.js .footer__say em{animation:m-hl .7s cubic-bezier(.6,0,.2,1) .5s both}
@keyframes m-hl{from{background-size:0% 72%;color:var(--navy-dark)}60%{color:var(--navy-dark)}}
.js .lark h2 em,.js .footer__say em{animation-name:m-hl-dark}
@keyframes m-hl-dark{from{background-size:0% 72%}}
.opening .lead{margin-top:var(--space-5)}
.opening__cta{margin-top:var(--space-6)}
.opening__facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--space-2) var(--space-6);margin-top:var(--space-7);padding:0;list-style:none}
.opening__facts li{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:var(--space-2)}
.opening__facts .icon{width:16px;height:16px;color:var(--blue-primary-press)}

/* Resi: contoh tampilan status pesanan. Langkah muncul berurutan; langkah aktif berdenyut. */
.resi{position:relative;background:var(--white);border:1.5px solid var(--blue-primary);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-5);box-shadow:0 30px 60px -30px rgba(13,139,255,.45);margin-top:0}
.resi::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-12px;height:12px;background:radial-gradient(circle at 8px 12px,transparent 7px,var(--white) 7.5px) 0 0/16px 12px repeat-x;filter:drop-shadow(0 1.5px 0 var(--blue-primary))}
.resi__head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.resi__code{font-family:var(--font-mono);font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:.02em;color:var(--ink);margin-top:var(--space-4)}
.resi__what{font-size:15px;margin-top:var(--space-1)}
.resi__bar{height:6px;border-radius:var(--radius-pill);background:var(--surface-subtle);margin:var(--space-5) 0 var(--space-2);overflow:hidden}
.resi__bar i{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--blue-primary) 0%,var(--orange) 100%);border-radius:inherit;transform-origin:left;animation:m-grow 1.2s var(--ease-standard) .4s both}
.resi__pct{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px}
.track{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid}
.track li{position:relative;display:grid;grid-template-columns:24px 1fr auto;gap:var(--space-3);padding-bottom:var(--space-4);font-size:15px;line-height:1.4}
.track li::before{content:"";position:absolute;left:11px;top:22px;bottom:0;width:2px;background:var(--border-default)}
.track li:last-child{padding-bottom:0}
.track li:last-child::before{display:none}
.track li.is-done::before{background:var(--ink)}
.track__dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border-strong);background:var(--white);position:relative;z-index:1}
.track__dot .icon{width:14px;height:14px}
.is-done .track__dot{background:var(--ink);border-color:var(--ink);color:var(--white)}
.is-now .track__dot{border-color:var(--orange);background:var(--orange)}
.is-now .track__dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--orange);animation:m-pulse 1.8s var(--ease-out) infinite}
.track b{font-weight:600;display:block}
.track small{display:block;font-size:13px}
.track time{font-family:var(--font-mono);font-size:12px;white-space:nowrap;padding-top:2px}
.is-next{opacity:.72}
.js .resi .track li{opacity:0;animation:m-reveal var(--dur-slow) var(--ease-standard) both}
.js .resi .track li:nth-child(1){animation-delay:.2s}
.js .resi .track li:nth-child(2){animation-delay:.35s}
.js .resi .track li:nth-child(3){animation-delay:.5s}
.js .resi .track li:nth-child(4){animation-delay:.65s}
.js .resi .track li:nth-child(5){animation-delay:.8s}
.js .resi .track li.is-next{animation-name:m-reveal-dim}
.resi__foot{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px dashed var(--border-strong);font-size:13px;display:flex;justify-content:space-between;gap:var(--space-3)}

/* ---------- daftar isi layanan ---------- */
.index{list-style:none;margin:var(--space-6) 0 0;padding:0;border-bottom:var(--rule-strong)}
.index li{border-top:var(--rule)}
.index a{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,.9fr) 48px;gap:var(--space-5);align-items:center;padding:var(--space-5) var(--space-3);color:var(--ink);position:relative;transition:background var(--dur-base) var(--ease-standard)}
.index a:hover{background:var(--blue-tint);text-decoration:none}
.index__no{font-family:var(--font-mono);font-size:15px;color:var(--blue-primary-press);font-weight:700}
.index__name{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:var(--tracking-display);line-height:1.15}
.index__blurb{font-size:15px;line-height:1.5}
.index__from{display:block;font-family:var(--font-mono);font-size:13px;margin-top:var(--space-2);text-transform:uppercase;letter-spacing:.06em}
.index__go{width:48px;height:48px;border-radius:50%;border:var(--rule-strong);display:grid;place-items:center;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.index a:hover .index__go{background:var(--ink);color:var(--white);transform:rotate(-45deg)}

/* ---------- langkah: garis alur ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;counter-reset:s}
.steps li{position:relative;display:grid;grid-template-columns:40px 1fr;gap:var(--space-4);padding-bottom:var(--space-6)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:var(--rule-strong);font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink);position:relative;z-index:1}
.steps li::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:repeating-linear-gradient(var(--ink) 0 4px,transparent 4px 8px)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h4{margin:6px 0 var(--space-1)}
.steps p{font-size:var(--text-small)}
.steps--h{grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.steps--h li{grid-template-columns:1fr;padding:0;gap:var(--space-4)}
.steps--h li::before{width:56px;height:56px;font-size:15px}
.steps--h li::after{left:56px;right:calc(-1 * var(--gutter));top:27px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 8px)}
.steps--h li:last-child::after{display:block;right:0;background:linear-gradient(90deg,var(--ink),transparent)}
.steps--h li:last-child::before{background:var(--ink);color:var(--white)}
.steps--h h4{font-size:22px;margin:0}

/* ---------- komitmen: gaya pasal ---------- */
.clauses{list-style:none;margin:var(--space-6) 0 0;padding:0}
.clauses li{display:grid;grid-template-columns:160px minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-5);padding:var(--space-6) 0;border-top:var(--rule)}
.clauses li:last-child{border-bottom:var(--rule)}
.clauses__no{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.12em;padding-top:8px}
.clauses h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:var(--tracking-display);line-height:1.15}
.clauses p{font-size:var(--text-small)}

/* ---------- Lark ---------- */
.lark{background:var(--surface-dark);color:var(--white);padding:var(--section-y) 0;overflow:hidden;position:relative}
.lark h2{color:var(--white);font-size:var(--text-display);line-height:var(--text-display-lh);font-weight:800;margin-top:var(--space-6)}
.lark__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-8);align-items:end}
.lark__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.24)}
.lark__list li{display:grid;grid-template-columns:48px 1fr;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid rgba(255,255,255,.24);font-size:var(--text-small)}
.lark__list span{font-family:var(--font-mono);font-size:13px;color:var(--blue-light);padding-top:3px}

/* ---------- FAQ: daftar bergaris, tanda + menjadi × ---------- */
.faq{border-bottom:var(--rule-strong)}
.faq details{border-top:var(--rule)}
.faq summary{cursor:pointer;list-style:none;min-height:72px;padding:var(--space-4) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:clamp(17px,1.6vw,20px);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-primary-press)}
.faq__sign{position:relative;width:32px;height:32px;flex:0 0 auto;border-radius:50%;border:var(--rule-strong);transition:transform var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.faq__sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .faq__sign{transform:rotate(45deg);background:var(--ink);color:var(--white)}
.faq details>div{padding:0 var(--space-8) var(--space-5) 0;color:var(--charcoal)}
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-8);align-items:start}

/* ---------- penutup ---------- */
.finale{background:var(--surface-dark);color:var(--white);padding:var(--section-y) 0}
.finale h2{color:var(--white);font-size:var(--text-display);line-height:var(--text-display-lh);font-weight:800;max-width:14ch;margin-top:var(--space-6)}
.finale__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6);align-items:end;margin-top:var(--space-6)}

/* ---------- kepala halaman dalam ---------- */
.pagehead{background:radial-gradient(900px 400px at 90% 0%,var(--blue-tint) 0%,rgba(232,244,255,0) 70%),var(--surface-subtle);border-bottom:var(--rule-strong);margin-top:-76px;padding:calc(var(--space-6) + 76px) 0 var(--space-8)}
.pagehead .eyebrow{margin-top:var(--space-6)}
.pagehead .eyebrow+h1{margin-top:var(--space-3)}
.pagehead h1{margin-top:var(--space-6);max-width:22ch}
.pagehead .lead{margin-top:var(--space-4)}
.crumbs{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:flex;flex-wrap:wrap;gap:var(--space-2)}
.crumbs a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-hidden]{color:var(--blue-primary-press)}

/* ---------- formulir ---------- */
.field{display:grid;gap:var(--space-2)}
.field label,.field .label{font-weight:var(--weight-medium);font-size:var(--text-small)}
.field .hint{font-size:var(--text-caption);color:var(--text-muted)}
.field .err{font-size:var(--text-caption);color:var(--coral-ink);font-weight:var(--weight-medium)}
.input,.select,.textarea{width:100%;min-height:52px;padding:var(--space-3) var(--space-4);border:var(--rule);border-bottom:1.5px solid var(--ink);border-radius:var(--radius-md) var(--radius-md) 0 0;background:var(--surface-subtle);font:inherit;font-size:16px;color:var(--charcoal);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.textarea{min-height:120px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;background:var(--white);border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--coral-ink)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-small);min-height:44px}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--blue-primary-press);flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--blue-tint);color:var(--charcoal);font-size:var(--text-small);border-left:3px solid var(--blue-primary-press)}
.alert--success{background:var(--success-tint);color:var(--success-ink);border-left-color:var(--success-ink)}
.alert--error{background:var(--coral-tint);color:var(--coral-ink);border-left-color:var(--coral-ink)}

/* ---------- kanal kontak ---------- */
.channels{list-style:none;margin:0;padding:0;border-top:var(--rule-strong)}
.channels a{display:grid;grid-template-columns:44px 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;border-bottom:var(--rule);color:var(--ink)}
.channels a:hover{text-decoration:none;background:var(--blue-tint)}
.channels b{display:block;font-size:20px;letter-spacing:var(--tracking-tight)}
.channels small{font-family:var(--font-mono);font-size:13px}

/* ---------- tabel perbandingan ---------- */
.table-wrap{overflow-x:auto;border-top:var(--rule-strong);border-bottom:var(--rule-strong);background:var(--white)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--text-small)}
.cmp th,.cmp td{padding:var(--space-4);text-align:left;border-bottom:var(--rule);vertical-align:top}
.cmp thead th{font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:15px;border-bottom:var(--rule-strong)}
.cmp tbody th{font-weight:var(--weight-medium)}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:0}
.cmp td .icon{color:var(--blue-primary-press)}
.cmp .no{color:var(--text-muted)}

/* ---------- konten panjang (artikel, hukum) ---------- */
.prose{max-width:var(--measure)}
.prose h2{font-size:clamp(24px,2.4vw,30px);margin:var(--space-7) 0 var(--space-3)}
.prose h3,.prose h4,.prose h5{font-size:var(--text-h4);margin:var(--space-6) 0 var(--space-2);letter-spacing:var(--tracking-tight)}
.prose p{margin:0 0 var(--space-4)}
.prose ul{padding-left:var(--space-5);margin:0 0 var(--space-4);display:grid;gap:var(--space-2)}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */

/* ---------- footer ---------- */
.footer{position:relative;background:var(--surface-dark);color:rgba(255,255,255,.82);padding:var(--space-8) 0 var(--space-5);font-size:15px}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blue-primary) 0%,var(--blue-light) 55%,var(--orange) 100%)}
.footer a{color:var(--white)}
.footer a:hover{text-decoration:none;color:var(--blue-light)}
.footer .logo img{filter:brightness(0) invert(1);height:40px}
.footer__hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-7);align-items:start;padding-bottom:var(--space-7);border-bottom:1px solid rgba(255,255,255,.14)}
.footer__brand{display:flex;flex-direction:column;gap:var(--space-5)}
.footer__say{font-size:clamp(26px,3vw,40px);font-weight:800;color:var(--white);letter-spacing:var(--tracking-display);line-height:1.1;max-width:16ch}
.footer__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:var(--space-3)}
.footer__track .trackbox{width:100%;max-width:360px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.footer__track .trackbox:focus-within{width:100%;background:rgba(255,255,255,.1)}
.footer__track .trackbox__input,.footer__track .trackbox__input::placeholder{color:var(--white)}
.footer__track .trackbox__go{background:rgba(255,255,255,.12);color:var(--white)}
.reach{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.reach a{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:var(--space-4);align-items:center;min-height:76px;padding:var(--space-3) var(--space-5) var(--space-3) var(--space-3);border-radius:var(--radius-lg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.reach a:hover{background:rgba(13,139,255,.14);border-color:rgba(0,198,255,.5);color:var(--white)}
.reach a>.icon{transition:transform var(--dur-base) var(--ease-standard)}
.reach a:hover>.icon{transform:translateX(3px)}
.reach__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--cta-bg);color:var(--white)}
.reach small{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.reach b{display:block;font-size:17px;font-weight:600;overflow-wrap:anywhere}
.footer__links{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:var(--space-6);padding:var(--space-7) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.footer__links ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.footer__links ul a{display:inline-flex;align-items:center;min-height:36px;color:rgba(255,255,255,.88)}
.footer__line{display:grid;grid-template-columns:20px 1fr;gap:var(--space-3);align-items:start;margin-bottom:var(--space-3);line-height:1.5}
.footer__line .icon{width:18px;height:18px;margin-top:2px;color:var(--blue-light)}
.footer__base{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);padding-top:var(--space-5)}
.socials{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.socials a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.2);font-size:14px}
.socials a:hover{border-color:var(--blue-light)}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);font-size:13px;margin-left:auto}
.footer__legal a{color:rgba(255,255,255,.8);min-height:32px;display:inline-flex;align-items:center}
.footer__copy{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.7);width:100%}


/* ---------- gerak judul ---------- */
/* Kata muncul dari balik garis (mask), berurutan. */
.title-motion .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.title-motion .w>span{display:inline-block;animation:m-word .8s var(--ease-standard) both}
.title-motion .w:nth-of-type(1)>span{animation-delay:0.08s}
.title-motion .w:nth-of-type(2)>span{animation-delay:0.14s}
.title-motion .w:nth-of-type(3)>span{animation-delay:0.20s}
.title-motion .w:nth-of-type(4)>span{animation-delay:0.26s}
.title-motion .w:nth-of-type(5)>span{animation-delay:0.32s}
.title-motion .w:nth-of-type(6)>span{animation-delay:0.38s}
.title-motion .w:nth-of-type(7)>span{animation-delay:0.44s}
.title-motion .w:nth-of-type(8)>span{animation-delay:0.50s}
.title-motion .w:nth-of-type(9)>span{animation-delay:0.56s}
.title-motion .w:nth-of-type(10)>span{animation-delay:0.62s}
.title-motion .w:nth-of-type(11)>span{animation-delay:0.68s}
.title-motion .w:nth-of-type(12)>span{animation-delay:0.74s}
.title-motion .w:nth-of-type(13)>span{animation-delay:0.80s}
.title-motion .w:nth-of-type(14)>span{animation-delay:0.86s}
.title-motion .w:nth-of-type(15)>span{animation-delay:0.92s}
.title-motion .w:nth-of-type(16)>span{animation-delay:0.98s}
@keyframes m-word{from{transform:translateY(105%)}to{transform:none}}

/* Hero: frasa bergulir bergantian (6 frasa + salinan pertama untuk putaran mulus). */
.opening h1>.title-motion{display:block;line-height:1.16}
.footer__say{line-height:1.3!important}
.rot{display:block;height:1.06em;overflow:hidden;color:var(--blue-primary-press);position:relative}
.rot__track{display:flex;flex-direction:column;animation:m-rot 18s cubic-bezier(.7,0,.2,1) infinite}
.rot__track span{display:block;height:1.06em;line-height:1.06;white-space:nowrap}
@keyframes m-rot{
  0%,13%{transform:translateY(0)}
  16.66%,29.66%{transform:translateY(-1.06em)}
  33.33%,46.33%{transform:translateY(-2.12em)}
  50%,63%{transform:translateY(-3.18em)}
  66.66%,79.66%{transform:translateY(-4.24em)}
  83.33%,96.33%{transform:translateY(-5.3em)}
  100%{transform:translateY(-6.36em)}
}

/* Pita berjalan layanan */
.ticker{display:flex;overflow:hidden;background:var(--navy-dark);color:var(--white);border-block:1px solid rgba(255,255,255,.08);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__list{display:flex;flex:0 0 auto;list-style:none;margin:0;padding:0;animation:m-ticker 38s linear infinite}
.ticker:hover .ticker__list,.ticker:focus-within .ticker__list{animation-play-state:paused}
.ticker li{display:flex;align-items:center}
.ticker li::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);margin:0 var(--space-6)}
.ticker a,.ticker li>span{display:inline-flex;align-items:baseline;gap:var(--space-3);min-height:56px;align-items:center;color:var(--white);font-weight:600;font-size:17px;white-space:nowrap}
.ticker a:hover{text-decoration:none;color:var(--blue-light)}
.ticker b{font-family:var(--font-mono);font-size:13px;font-weight:500;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.06em}
@keyframes m-ticker{to{transform:translateX(-100%)}}

/* ---------- adegan kepala halaman (scenes.ts) ----------
   Keadaan dasar = keadaan akhir. Animasi hanya `from` (fill both), jadi reduced-motion cukup mematikan animasi. */
.pagehead{position:relative;overflow:hidden;min-height:470px}
.pagehead>.wrap{position:relative;z-index:1}
.scene-wrap{position:absolute;right:max(0px,calc((100vw - var(--container-max)) / 2 - 24px));bottom:0;top:76px;width:min(48vw,620px);display:flex;align-items:center;pointer-events:auto;cursor:pointer;z-index:0}
.scene{width:100%;height:auto;overflow:visible;transform:translate(calc(var(--mx,0) * 14px),calc(var(--my,0) * 10px));transition:transform .5s var(--ease-out)}
.pagehead h1,.pagehead .lead{max-width:min(22ch,52vw)}
.pagehead .lead{max-width:min(var(--measure),50vw)}
.scene *{transform-box:fill-box;transform-origin:center}
.scene text{font-family:var(--font-heading);font-weight:700}
.scene .paper{fill:var(--white);stroke:var(--navy-dark);stroke-width:1.5;filter:drop-shadow(0 18px 24px rgba(10,22,40,.12))}
.scene .fold{fill:var(--surface-subtle);stroke:var(--navy-dark);stroke-width:1.5}
.scene .doc-title{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;fill:var(--navy-dark)}
.scene .doc-mono,.scene .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;fill:var(--navy-dark);font-weight:600}
.scene [class^="ln"],.scene [class*=" ln"]{stroke:var(--border-strong);stroke-width:7;stroke-linecap:round;fill:none}
@keyframes s-draw{from{stroke-dashoffset:1}}
@keyframes s-pop{from{opacity:0;transform:scale(.3)}}
@keyframes s-fade{from{opacity:0}}
@keyframes s-up{from{opacity:0;transform:translateY(24px)}}
.scene .ln{stroke-dasharray:1;animation:s-draw .5s var(--ease-out) both}
.scene .ln-1{animation-delay:.3s}.scene .ln-2{animation-delay:.42s}.scene .ln-3{animation-delay:.54s}.scene .ln-4{animation-delay:.66s}.scene .ln-5{animation-delay:.78s}.scene .ln-6{animation-delay:.9s}.scene .ln-7{animation-delay:1.02s}.scene .ln-8{animation-delay:1.14s}.scene .ln-9{animation-delay:1.26s}

/* akta + cap */
.scene--akta .stamp-ring{fill:none;stroke:var(--orange);stroke-width:4}
.scene--akta .stamp-ring2{fill:none;stroke:var(--orange);stroke-width:1.5;stroke-dasharray:3 4}
.scene--akta .stamp-txt{fill:var(--orange);font-size:30px;font-weight:800}
.scene--akta .stamp-g{transform:rotate(-12deg);animation:s-stamp .45s cubic-bezier(.5,0,.2,1.4) 1.4s both}
@keyframes s-stamp{from{opacity:0;transform:scale(2.2) rotate(-30deg)}}
.scene--akta .ripple{fill:none;stroke:var(--orange);stroke-width:2;opacity:0;animation:s-ripple .8s var(--ease-out) 1.8s}
@keyframes s-ripple{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.scene--akta .paper{animation:s-jolt .3s ease 1.8s}
@keyframes s-jolt{50%{transform:translateY(3px)}}

/* NIB */
.scene--nib .cell-bg{fill:var(--navy-dark)}
.scene--nib .digits text{fill:var(--white);font-family:var(--font-mono);font-size:26px}
.scene--nib .digit-final{fill:var(--orange)!important}
.scene--nib .digits{transform-box:view-box;transform-origin:0 0;animation:s-roll 1.6s cubic-bezier(.2,.7,.1,1) both}
.scene--nib .d0{animation-delay:.2s}.scene--nib .d1{animation-delay:.35s}.scene--nib .d2{animation-delay:.5s}.scene--nib .d3{animation-delay:.65s}.scene--nib .d4{animation-delay:.8s}
@keyframes s-roll{from{transform:translateY(400px)}}
.scene--nib .nib-line{stroke:var(--blue-primary);stroke-width:2;stroke-dasharray:1;animation:s-draw 1s var(--ease-out) 1.6s both}
.scene--nib .ok circle{fill:var(--success)}.scene--nib .ok path{fill:none;stroke:var(--white);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.scene--nib .ok{animation:s-pop .4s cubic-bezier(.5,0,.2,1.4) 2.2s both}

/* tanda tangan */
.scene--ttd .sigline{stroke:var(--navy-dark);stroke-width:1.5;stroke-dasharray:4 4}
.scene--ttd .sig-lbl{font-family:var(--font-mono);font-size:11px;fill:var(--navy-dark);font-weight:500}
.scene--ttd .sig{fill:none;stroke:var(--blue-primary-press);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:s-draw 2.2s cubic-bezier(.45,.05,.4,1) 1.1s both}
.scene--ttd .pen{fill:var(--orange);animation:s-fade .2s 1.1s both}

/* HKI */
.scene--hki .shield{fill:var(--blue-tint);stroke:var(--blue-primary-press);stroke-width:4;stroke-linejoin:round;stroke-dasharray:1;animation:s-draw 1.4s var(--ease-out) .2s both}
.scene--hki .shield-ok{fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:s-draw .5s var(--ease-out) 1.5s both}
.scene--hki .orbit-path{fill:none;stroke:var(--border-strong);stroke-dasharray:3 7}
.scene--hki .orbit-g{transform-box:view-box;transform-origin:420px 163px;animation:s-spin 24s linear infinite}
.scene--hki .sym circle{fill:var(--white);stroke:var(--navy-dark);stroke-width:1.5}
.scene--hki .sym text{fill:var(--navy-dark);font-size:22px}
.scene--hki .sym{animation:s-pop .5s var(--ease-standard) both}
.scene--hki .s1{animation-delay:.6s}.scene--hki .s2{animation-delay:.8s}.scene--hki .s3{animation-delay:1s}
@keyframes s-spin{to{transform:rotate(360deg)}}

/* buku besar */
.scene--buku .axis{stroke:var(--navy-dark);stroke-width:1.5}
.scene--buku .bar{fill:var(--blue-tint);stroke:var(--blue-primary);stroke-width:1.5;transform-origin:bottom;animation:s-grow .7s cubic-bezier(.3,.7,.2,1.2) both}
.scene--buku .b7{fill:var(--blue-primary)}
.scene--buku .b1{animation-delay:.2s}.scene--buku .b2{animation-delay:.3s}.scene--buku .b3{animation-delay:.4s}.scene--buku .b4{animation-delay:.5s}.scene--buku .b5{animation-delay:.6s}.scene--buku .b6{animation-delay:.7s}.scene--buku .b7{animation-delay:.8s}
@keyframes s-grow{from{transform:scaleY(0)}}
.scene--buku .trend{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:s-draw 1.2s var(--ease-out) 1.1s both}
.scene--buku .last{fill:var(--orange);animation:s-pop .3s 2.2s both,s-beat 1.6s ease-in-out 2.6s infinite}
@keyframes s-beat{50%{transform:scale(1.5)}}

/* web */
.scene--web .win{fill:var(--white);stroke:var(--navy-dark);stroke-width:1.5;stroke-dasharray:1;animation:s-draw 1s var(--ease-out) .1s both;filter:drop-shadow(0 18px 24px rgba(10,22,40,.12))}
.scene--web .win-bar{stroke:var(--navy-dark);stroke-width:1.5}
.scene--web .dot1{fill:var(--orange)}.scene--web .dot2{fill:var(--blue-light)}.scene--web .dot3{fill:var(--blue-primary)}
.scene--web .blk{fill:var(--blue-tint);animation:s-up .45s var(--ease-standard) both}
.scene--web .cta{fill:var(--blue-primary-press)}
.scene--web .k1{animation-delay:.6s}.scene--web .k2{animation-delay:.75s}.scene--web .k3{animation-delay:.9s}.scene--web .k4{animation-delay:1.05s}.scene--web .k5{animation-delay:1.15s}.scene--web .k6{animation-delay:1.25s}
.scene--web .cursor{fill:var(--navy-dark);stroke:var(--white);stroke-width:1.5;animation:s-fade .1s 1.6s both}
.scene--web .click{fill:none;stroke:var(--orange);stroke-width:3;opacity:0;animation:s-ripple .7s var(--ease-out) 3s}

/* tangga */
.scene--tumbuh .stairs{fill:var(--blue-tint);stroke:var(--blue-primary-press);stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;animation:s-draw 1.2s var(--ease-out) .1s both}
.scene--tumbuh .flag-pole{stroke:var(--navy-dark);stroke-width:3;stroke-linecap:round}
.scene--tumbuh .flag{fill:var(--orange);transform-origin:left;animation:s-flag .6s var(--ease-standard) 3.2s both}
@keyframes s-flag{from{transform:scaleX(0)}}
.scene--tumbuh .hop{fill:var(--orange);animation:s-fade .1s .9s both}

/* kuitansi dikipas */
.scene--rak .fan rect{fill:var(--white);stroke:var(--navy-dark);stroke-width:1.5}
.scene--rak .fl{stroke:var(--border-strong);stroke-width:6;stroke-linecap:round}
.scene--rak .fp{stroke:var(--blue-primary-press);stroke-width:12;stroke-linecap:round}
.scene--rak .tear{stroke:var(--navy-dark);stroke-width:1.5;stroke-dasharray:6 4}
.scene--rak .fan{transform-box:view-box;transform-origin:435px 330px;animation:s-fan .9s cubic-bezier(.3,.7,.2,1.15) .2s both}
.scene--rak .f0{transform:rotate(-27deg)}.scene--rak .f1{transform:rotate(-9deg)}.scene--rak .f2{transform:rotate(9deg)}.scene--rak .f3{transform:rotate(27deg)}
.scene--rak .f3 .fp{stroke:var(--orange)}
@keyframes s-fan{from{transform:rotate(0)}}

/* orbit 7 bidang */
.scene--orbit .ring{fill:none;stroke:var(--border-strong);stroke-dasharray:3 6}
.scene--orbit .core{fill:var(--navy-dark);animation:s-pop .5s cubic-bezier(.5,0,.2,1.4) both}
.scene--orbit .core-t{fill:var(--white);font-size:28px;font-weight:800}
.scene--orbit .spin{transform-box:view-box;transform-origin:420px 165px;animation:s-spin 40s linear infinite}
.scene--orbit .on circle{fill:var(--white);stroke:var(--blue-primary-press);stroke-width:2}
.scene--orbit .on text{fill:var(--blue-primary-press);font-family:var(--font-mono);font-size:12px}
.scene--orbit .o7 circle{stroke:var(--orange)}.scene--orbit .o7 text{fill:var(--orange-ink)}
.scene--orbit .on{animation:s-pop .4s var(--ease-standard) both}
.scene--orbit .o1{animation-delay:.3s}.scene--orbit .o2{animation-delay:.4s}.scene--orbit .o3{animation-delay:.5s}.scene--orbit .o4{animation-delay:.6s}.scene--orbit .o5{animation-delay:.7s}.scene--orbit .o6{animation-delay:.8s}.scene--orbit .o7{animation-delay:.9s}

/* stabilo */
.scene--stabilo .hl{fill:var(--orange);opacity:.32;transform-origin:left;animation:s-sweep .55s cubic-bezier(.6,0,.3,1) both}
.scene--stabilo .h1{animation-delay:1.4s}.scene--stabilo .h2{animation-delay:1.9s}.scene--stabilo .h3{animation-delay:2.4s}
@keyframes s-sweep{from{transform:scaleX(0)}}

/* sensor data */
.scene--redaksi [class^="ln"]{stroke-dasharray:1;animation:s-draw .5s var(--ease-out) .3s both}
.scene--redaksi .bar-x{fill:var(--navy-dark);transform-origin:left;animation:s-sweep .45s cubic-bezier(.6,0,.3,1) both}
.scene--redaksi .x1{animation-delay:1s}.scene--redaksi .x2{animation-delay:1.35s}.scene--redaksi .x3{animation-delay:1.7s}
.scene--redaksi .lock-body{fill:var(--blue-primary-press)}.scene--redaksi .keyhole{fill:var(--white)}
.scene--redaksi .shackle{fill:none;stroke:var(--navy-dark);stroke-width:9;stroke-linecap:round;animation:s-lock .5s cubic-bezier(.5,0,.2,1.4) 2.3s both}
@keyframes s-lock{from{transform:translateY(-16px)}}
.scene--redaksi .lock{animation:s-up .5s var(--ease-standard) .6s both}

/* pasal */
.scene--pasal .sect{font-size:220px;fill:var(--navy-dark);font-weight:300;animation:s-up .8s var(--ease-standard) .1s both}
.scene--pasal .cl rect{fill:var(--white);stroke:var(--navy-dark);stroke-width:1.5}
.scene--pasal .cl text{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;fill:var(--blue-primary-press)}
.scene--pasal .cl path{stroke:var(--border-strong);stroke-width:6;stroke-linecap:round}
.scene--pasal .c4 text{fill:var(--orange-ink)}
.scene--pasal .cl{animation:s-slide .5s cubic-bezier(.3,.7,.2,1.2) both}
.scene--pasal .c1{animation-delay:.5s}.scene--pasal .c2{animation-delay:.7s}.scene--pasal .c3{animation-delay:.9s}.scene--pasal .c4{animation-delay:1.1s}
@keyframes s-slide{from{opacity:0;transform:translateX(60px)}}

/* dana kembali */
.scene--kembali .arc{fill:none;stroke:var(--blue-primary);stroke-width:3;stroke-dasharray:1;animation:s-draw 1.1s var(--ease-out) .1s both}
.scene--kembali .arc-head{fill:none;stroke:var(--blue-primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:s-fade .3s 1.1s both}
.scene--kembali .wallet{fill:var(--navy-dark)}.scene--kembali .wallet-flap{fill:var(--blue-primary-press)}
.scene--kembali .coin circle{fill:var(--orange)}.scene--kembali .coin text{fill:var(--white);font-size:14px;font-weight:800}
.scene--kembali .coin{animation:s-fade .3s .8s both}

/* jaringan mitra */
.scene--jabat .edge{stroke:var(--blue-primary);stroke-width:2;stroke-dasharray:1;animation:s-draw .5s var(--ease-out) both}
.scene--jabat .e1{animation-delay:0.32s}.scene--jabat .e2{animation-delay:0.44s}.scene--jabat .e3{animation-delay:0.56s}.scene--jabat .e4{animation-delay:0.68s}.scene--jabat .e5{animation-delay:0.80s}.scene--jabat .e6{animation-delay:0.92s}.scene--jabat .e7{animation-delay:1.04s}.scene--jabat .e8{animation-delay:1.16s}.scene--jabat .e9{animation-delay:1.28s}.scene--jabat .e10{animation-delay:1.40s}.scene--jabat .e11{animation-delay:1.52s}.scene--jabat .e12{animation-delay:1.64s}
.scene--jabat .node{fill:var(--white);stroke:var(--navy-dark);stroke-width:2;animation:s-pop .4s cubic-bezier(.5,0,.2,1.4) both}
.scene--jabat .hub{fill:var(--orange);stroke:var(--orange);animation:s-pop .4s cubic-bezier(.5,0,.2,1.4) .1s both,s-beat 2s ease-in-out 2s infinite}
.scene--jabat .n1{animation-delay:0.1s}.scene--jabat .n2{animation-delay:0.2s}.scene--jabat .n3{animation-delay:0.3s}.scene--jabat .n4{animation-delay:0.4s}.scene--jabat .n5{animation-delay:0.5s}.scene--jabat .n6{animation-delay:0.6s}

/* percakapan */
.scene--chat .bub rect{fill:var(--white);stroke:var(--navy-dark);stroke-width:1.5}
.scene--chat .me rect{fill:var(--blue-primary-press);stroke:none}
.scene--chat .bl{stroke:var(--border-strong);stroke-width:7;stroke-linecap:round}
.scene--chat .me .bl{stroke:rgba(255,255,255,.55)}
.scene--chat .bub{animation:s-up .45s cubic-bezier(.3,.7,.2,1.2) both}
.scene--chat .bb1{animation-delay:.2s}.scene--chat .bb2{animation-delay:.8s}.scene--chat .bb3{animation-delay:1.4s}.scene--chat .bb4{animation-delay:2s}
.scene--chat .td{fill:var(--white);animation:s-type 1.2s ease-in-out infinite}
.scene--chat .t2{animation-delay:.15s}.scene--chat .t3{animation-delay:.3s}
@keyframes s-type{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-6px);opacity:1}}

/* 404 */
.nf .scene-wrap{position:static;width:min(100%,520px);margin:0 auto}
.scene--putus .seg{fill:none;stroke:var(--blue-primary);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;animation:s-draw .9s var(--ease-out) both}
.scene--putus .s2{animation-delay:.9s}
.scene--putus .gap{fill:none;stroke:var(--border-strong);stroke-width:4;stroke-dasharray:4 10}
.scene--putus .nd{fill:var(--navy-dark)}.scene--putus .end{fill:var(--orange)}
.scene--putus .q{font-size:48px;fill:var(--orange);animation:s-pop .5s cubic-bezier(.5,0,.2,1.4) 1.6s both}

@media (max-width:980px){
  .scene-wrap{position:relative;right:auto;top:auto;width:100%;max-width:560px;margin:var(--space-5) 0 calc(-1 * var(--space-5))}
  .pagehead h1,.pagehead .lead{max-width:none}
  .pagehead{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .title-motion .w>span{animation:none}
  .rot__track{animation:none}
  .ticker__list{animation:none}
  .ticker{overflow-x:auto}
  .ticker__list[aria-hidden]{display:none}
  .scene,.scene *{animation:none!important;transition:none!important}
  .scene .pen,.scene .cursor,.scene .hop{display:none}
}

/* ---------- gerak: transform + opacity; logo tidak pernah bergerak ---------- */
@keyframes m-reveal{from{opacity:0;transform:var(--reveal-offset)}to{opacity:1;transform:none}}
@keyframes m-reveal-dim{from{opacity:0;transform:var(--reveal-offset)}to{opacity:.72;transform:none}}
@keyframes m-pulse{from{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}
@keyframes m-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-ink{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .reveal{opacity:0}
.js .reveal.in{animation:m-reveal var(--dur-slow) var(--ease-standard) both}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .resi .track li{opacity:1;animation:none}
  .js .resi .track li.is-next{opacity:.72}
  .js .reveal.in,.resi__bar i,.js .opening h1 em,.js .lark h2 em,.js .footer__say em{animation:none}
  .is-now .track__dot::after,.trackbox__pulse::after{animation:none;opacity:.5}
  .btn--cta::before{display:none}
  .slip:hover,.btn:active,.btn:hover .icon,.index a:hover .index__go{transform:none}
}

@media (max-width:1180px){
  .nav{display:none}
  .nav-more{display:block;margin-left:0}
  .trackbox{margin-left:auto}
}
@media (max-width:1080px){
  .footer__hero{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .opening__grid{grid-template-columns:1fr}
  .opening{background:var(--white)}
  .resi{max-width:520px}
  .lark__grid,.faq-layout,.headline{grid-template-columns:1fr;gap:var(--space-5)}
  .clauses li{grid-template-columns:120px 1fr}
  .clauses li p{grid-column:2}
}
@media (max-width:980px){
  .slip.sticky{position:relative}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3,.slip.sticky{position:sticky;height:auto}
.shelf{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--space-6)}
  .split--top>aside{order:-1}
  .sticky{position:static}
  .steps--h{grid-template-columns:repeat(2,1fr);row-gap:var(--space-7)}
  .steps--h li:nth-child(2)::after{background:linear-gradient(90deg,var(--ink),transparent);right:0}
  .index a{grid-template-columns:56px minmax(0,1fr) 44px}
  .index__blurb{grid-column:2}
  .index__go{grid-row:1;grid-column:3;width:44px;height:44px}
  .finale__row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .footer{padding-top:var(--space-7)}
  .footer__hero{grid-template-columns:1fr;gap:var(--space-6)}
  .footer__links{grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-4)}
  .footer__office{grid-column:1 / -1}
  .footer__track .trackbox{max-width:none}
  .footer__legal{margin-left:0}
  .reach a{min-height:68px;padding-right:var(--space-4)}
  :root{--section-y:64px;--gutter:16px}
  .header .cta-desktop,.dock>.trackbox{display:none}
  .nav-more{margin-left:auto}
  .header{padding:8px 8px 0}
  .dock{min-height:60px;padding:6px 6px 6px 16px}
  .opening{margin-top:-68px;padding:calc(var(--space-6) + 68px) 0 var(--space-8)}
  .logo img{height:32px}
  .grid--2,.grid--3,.grid--4,.shelf{grid-template-columns:1fr}
  .card{padding:var(--space-5)}
  .opening h1{margin-top:var(--space-5)}
  .opening h1 em{white-space:normal}
  .opening__cta .btn{flex:1 1 100%}
  .opening__facts{grid-template-columns:1fr;margin-top:var(--space-6)}
  .steps--h{grid-template-columns:1fr}
  .steps--h li{grid-template-columns:56px 1fr;gap:var(--space-4);padding-bottom:var(--space-6)}
  .steps--h li::after,.steps--h li:nth-child(2)::after,.steps--h li:last-child::after{left:27px;right:auto;top:56px;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(var(--ink) 0 4px,transparent 4px 8px)}
  .steps--h li:last-child::after{display:none}
  .steps--h h4{margin-top:14px}
  .index a{grid-template-columns:40px minmax(0,1fr) 44px;gap:var(--space-3);padding:var(--space-4) 0}
  .index a:hover{background:transparent}
  .clauses li{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-5) 0}
  .clauses li p{grid-column:1}
  .faq details>div{padding-right:0}
  .mark__a{display:none}
  .pagehead{margin-top:-68px;padding:calc(var(--space-5) + 68px) 0 var(--space-7)}
}
@media print{.header,.footer{display:none}}