/* Riil shared stylesheet. Every page links this one file. */
  /* Self-hosted. Nothing about this page contacts another server.
     Plus Jakarta Sans: Gumpita Rahayu / Tokotype, SIL OFL 1.1. One variable file, all weights.
     IBM Plex Mono: IBM, SIL OFL 1.1. Licences in fonts/. */
  @font-face{ font-family:'Plus Jakarta Sans'; src:url('../fonts/PlusJakartaSans.woff2') format('woff2');
              font-weight:100 900; font-style:normal; font-display:swap; }
  @font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-400.woff2') format('woff2');
              font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-500.woff2') format('woff2');
              font-weight:500; font-style:normal; font-display:swap; }
  @font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-600.woff2') format('woff2');
              font-weight:600; font-style:normal; font-display:swap; }
  :root{
    /* Softened for humility. The previous navy and alarm-red pairing was correct but stiff,
       and a product delivering unwelcome news to people who did nothing wrong cannot afford to
       sound severe. Deep teal carries the same authority as navy with a warmer temperature;
       the ground is paper rather than screen-white. */
    --bg:#FAFBFC; --bg-elevated:#FFFFFF; --bg-inset:#EFF2F5;
    --ink:#25333C; --ink-muted:#5D6873;
    /* --ink-faint is text and therefore has to clear 4.5:1; --ink-decor keeps the original
       lightness for things that are not words: unit glyphs, dividers, arrows, disabled hatching. */
    --ink-faint:#5D6873; --ink-decor:#98A1A9;
    --line:rgba(37,51,60,.11);
    --accent:#1F4E5F; --accent-strong:#2C6A7E; --accent-ink:#FFFFFF; --accent-soft:rgba(31,78,95,.10);
    /* The revealed number. Clay, warmer and quieter than the terracotta before it: it still
       stops you, at conversational volume. */
    --reveal:#B85335; --reveal-soft:rgba(184,83,53,.10);
    --trust:#2E7A5E; --trust-soft:rgba(46,122,94,.11);
    --warn:#AF7A28; --warn-soft:rgba(175,122,40,.13);
    /* Text variants of the three status roles. The roles above are unchanged and still drive
       every fill, tint, border and switch. These exist only where the colour becomes words on a
       tinted background, where the original values land at 1.98:1 to 3.97:1 against a 4.5 floor. */
    --trust-ink:#1F6349; --warn-ink:#7E5514; --reveal-ink:#9C4429; --trust-fill:#2E7A5E;
    /* Gradients. Allowed on brand surfaces and on interactive affordances, never on data.
       A figure, a status pill or a chart bar keeps flat colour: a gradient makes two shades of
       one meaning, and the reader is left wondering whether the lighter end means something.
       Every stop below is drawn from the flat palette, so nothing new enters the system. */
    --grad-ground: linear-gradient(170deg, #FFFFFF 0%, var(--bg) 50%, #F4F7FA 100%);
    --grad-panel:  linear-gradient(155deg, var(--bg-elevated) 0%, var(--bg-inset) 100%);
    --grad-accent: linear-gradient(180deg, var(--accent-strong) 0%, var(--accent) 60%);
    --grad-brand:  linear-gradient(145deg, #2C6A7E 0%, var(--accent) 58%, #163A47 100%);
    --grad-reveal: linear-gradient(90deg, var(--reveal) 0%, #E08A6B 100%);
    /* The logo ramp. The only gradient in the system that carries meaning rather than
       depth: it hands the two identical i different colours. Never use it for anything else.
       One hue at two values, not two colours. Two colours would say the numbers are different
       THINGS; one colour at two values says they are the same thing worth different amounts,
       which is the actual claim. Its two ends are quieter than --accent and --reveal on purpose:
       a logo sits at rest on every screen, a revealed number appears once. */
    --logo-a: #12414E; --logo-b: #46818E;
    --grad-logo:   linear-gradient(90deg, var(--logo-a) 0%, var(--logo-a) 36%, var(--logo-b) 82%, var(--logo-b) 100%);
    --shadow: 0 1px 2px rgba(37,51,60,.05), 0 10px 24px -14px rgba(37,51,60,.10);
    --shadow-lg: 0 1px 2px rgba(37,51,60,.04), 0 18px 40px -18px rgba(37,51,60,.14);
    --radius: 24px;
    --font-display:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-body:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }
  body{ background:var(--grad-ground); background-attachment:fixed; color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
  img,svg{ display:block; }
  a{ color:inherit; }
  button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
  input,select{ font:inherit; color:inherit; }
  ::selection{ background:var(--accent); color:var(--accent-ink); }

  h1,h2,h3{ font-family:var(--font-display); text-wrap:balance; font-weight:600; letter-spacing:-.015em; }
  .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

  /* FIGURES: monospace where they stack, proportional where they are read.
     Monospace is correct for a column of numbers, because equal advance widths are
     exactly what lets the eye compare digit against digit down a schedule or a
     comparison table. It is wrong for a single large figure. Every character gets a
     digit's width, so the decimal comma floats mid-height at full width and the % is
     the same size and weight as a numeral: "29,10%" stops reading as a rate and starts
     reading as seven equal slots. That is the complaint, and it is a property of the
     typeface choice rather than the size.
     These are set proportional, where the % is naturally narrower and the comma is
     small and low, which is the same reason it works in the Apple figures. */
  .rr-hero, .rr-quoted, .rrb-amount, .offer-ear, .pst-hero,
  .ex-real, .ex-quoted, .dp-readout strong, .ps-amount, .prf-amount{
    font-family:var(--font-display);
    font-variant-numeric:tabular-nums;
    letter-spacing:-.025em;
  }
  /* The unit is not a digit, so it does not take a digit's presence. It keeps its
     COLOUR though: colour carries meaning in this product, and greying the % would
     make it read as a different class of information rather than as a smaller part
     of the same number. */
  .u{ font-size:.6em; font-weight:700; letter-spacing:0; margin-left:.06em; }
  .icon{ flex-shrink:0; }

  .eyebrow{ font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
  .container{ max-width:1180px; margin-inline:auto; padding-inline:24px; }
  section{ padding-block:64px; }
  @media (max-width:640px){ section{ padding-block:44px; } }

  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
    outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;
  }

  .js-anim [data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
  .js-anim [data-reveal].is-visible{ opacity:1; transform:translateY(0); }

  /* ---------- nav ---------- */
  .nav{ position:-webkit-sticky; position:sticky; top:0; z-index:40; background:var(--bg); background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
  .nav .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; }
  .brand{ display:flex; align-items:center; flex-shrink:0; }
  .brand svg{ height:28px; width:auto; display:block; }
  @media (max-width:480px){ .brand svg{ height:24px; } }
  .nav-links{ display:flex; gap:26px; font-size:.92rem; font-weight:500; color:var(--ink-muted); }
  .nav-links a:hover{ color:var(--ink); }
  .nav-right{ display:flex; align-items:center; gap:14px; }
  .lang-toggle{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:.76rem; font-weight:700; }
  .lang-toggle button{ padding:6px 12px; color:var(--ink-faint); }
  .lang-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
  /* ---- sign-in widget: a details/summary popover so it needs no click-outside-to-close JS ---- */
  .auth-widget{ position:relative; }
  .auth-widget > summary{ list-style:none; cursor:pointer; font-size:.86rem; font-weight:600; color:var(--ink-muted); padding:6px 4px; }
  .auth-widget > summary::-webkit-details-marker{ display:none; }
  .auth-widget > summary:hover{ color:var(--ink); }
  .auth-widget[open] > summary{ color:var(--ink); }
  .auth-panel{ position:absolute; right:0; top:calc(100% + 10px); width:280px; background:var(--bg-elevated); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow-lg); z-index:5; }
  .auth-panel .field{ margin-bottom:12px; }
  .auth-panel .field-note{ font-size:.82rem; color:var(--ink-muted); margin-bottom:12px; }
  .auth-user{ display:flex; align-items:center; gap:10px; font-size:.86rem; }
  .auth-user .auth-user-email{ color:var(--ink-muted); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
  .auth-user a.auth-user-email:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
  .auth-user button{ font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
  @media (max-width:480px){
    /* right:0 anchored to the summary overflows off the left edge on a narrow screen, since the
       widget itself sits close to the nav's right edge with little room to its left. Pin the panel
       to the viewport instead of the trigger element once there is not enough room to anchor it. */
    .auth-panel{ position:fixed; left:12px; right:12px; top:80px; width:auto; }
    .auth-user .auth-user-email{ max-width:90px; }
  }
  @media (max-width:360px){ .auth-widget > summary{ font-size:.8rem; } }
  /* a button is not a hyperlink: every <a class="btn"> was inheriting the default underline */
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:.92rem; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap; text-decoration:none; }
  .btn-primary{ background:var(--grad-accent); color:var(--accent-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(37,51,60,.25), 0 6px 14px -6px var(--accent-soft); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(37,51,60,.28), 0 12px 22px -8px var(--accent-soft); }
  .btn-primary:active{ transform:translateY(0); }
  .btn-dark{ background:var(--ink); color:var(--bg); }
  .btn-dark:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
  @media (max-width:860px){ .nav-links{ display:none; } }
  @media (max-width:480px){
    .nav .container{ gap:8px; }
    .brand{ font-size:1.05rem; }
    .nav .btn-primary{ padding:10px 14px; font-size:.82rem; }
  }
  /* Four controls do not fit a 375px header: "Masuk" was being folded onto two lines to make room.
     On a phone the hero and the tool strip already carry the way in, so the header button steps aside. */
  .auth-widget > summary{ white-space:nowrap; }
  @media (max-width:480px){ .nav .btn-primary{ display:none; } .nav-right{ gap:10px; } }

  /* ---------- hero ---------- */
  .hero{ padding-top:76px; padding-bottom:56px; text-align:center; }
  .hero h1{ font-size:clamp(2.1rem, 5.2vw, 3.9rem); line-height:1.08; max-width:20ch; margin-inline:auto; }
  /* the struck phrase is one idea and must never break across lines */
  .hero h1 .quoted{ white-space:nowrap; color:var(--ink-muted); text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--ink-decor); }
  .hero h1 .reveal{ color:var(--reveal); }
  .hero .sub{ max-width:600px; margin:22px auto 0; color:var(--ink-muted); font-size:1.08rem; }
  .hero .cta-row{ margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:12px; }
  /* flex-start, not center: the copy wraps to two lines on a phone and a centred icon
     detaches from the sentence it belongs to. 2px nudges it onto the cap height. */
  .hero .micro{ font-size:.85rem; color:var(--ink-faint); display:flex;
                align-items:flex-start; gap:6px; text-align:left; }
  .hero .micro svg{ flex-shrink:0; margin-top:2px; }

  /* ---------- section headers ---------- */
  .section-head{ max-width:620px; margin:0 auto 44px; text-align:center; }
  .section-head h2{ font-size:clamp(1.65rem, 3.4vw, 2.35rem); margin-top:10px; }
  .section-head p{ margin-top:12px; color:var(--ink-muted); }

  /* ---------- bento example cards ---------- */
  .examples{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:900px){ .examples{ grid-template-columns:1fr; } }
  .ex-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; }
  .ex-card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-lg); }
  .ex-card .tag{ font-size:.76rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
  .ex-flow{ display:flex; align-items:center; gap:10px; }
  .ex-quoted{ font-family:var(--font-mono); font-size:1.1rem; color:var(--ink-muted); }
  .ex-arrow{ color:var(--ink-muted); }
  .ex-real{ font-family:var(--font-mono); font-size:1.45rem; font-weight:600; color:var(--reveal); }
  .ex-card .note{ font-size:.86rem; color:var(--ink-muted); }

  /* ---------- tool switcher + calculator shell ---------- */
  .tool-tabs{ display:flex; justify-content:center; gap:8px; margin-bottom:28px; flex-wrap:wrap; }
  .tool-tab{ padding:11px 20px; border-radius:999px; font-size:.92rem; font-weight:600; border:1px solid var(--line); background:var(--bg-elevated); color:var(--ink-muted); transition:all .2s ease; }
  .tool-tab[aria-selected="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .tool-tab:not([aria-selected="true"]):hover{ border-color:var(--accent); color:var(--ink); }

  .calc-wrap{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:28px; padding:8px; box-shadow:var(--shadow-lg); }
  .calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
  @media (max-width:880px){ .calc-grid{ grid-template-columns:1fr; } }
  .calc-form, .calc-result{ padding:28px; min-width:0; }
  .calc-form{ border-right:1px solid var(--line); }
  @media (max-width:880px){ .calc-form{ border-right:none; border-bottom:1px solid var(--line); } }

  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:.84rem; font-weight:600; margin-bottom:8px; color:var(--ink-muted); }
  .label-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .label-row label{ margin-bottom:0; }
  .assume-badge{ font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:var(--warn-soft); color:var(--warn-ink); padding:2px 8px; border-radius:999px; }
  .field-help{ font-size:.78rem; color:var(--ink-muted); margin-top:6px; }
  .field-note{ font-size:.8rem; color:var(--ink-muted); background:var(--bg-inset); border-radius:12px; padding:10px 14px; margin:10px 0 16px; line-height:1.5; }
  .field-note strong{ color:var(--ink); }
  .field input[type="text"], .field input[type="number"], .field input[type="email"]{
    width:100%; background:var(--bg-inset); border:1px solid var(--line); border-radius:14px;
    padding:13px 14px; font-family:var(--font-mono); font-size:1rem; color:var(--ink);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
  .field input:disabled{ opacity:.7; cursor:not-allowed; }
  .field input.linked-input:disabled{ background:repeating-linear-gradient(135deg, var(--bg-inset), var(--bg-inset) 7px, rgba(37,51,60,.07) 7px, rgba(37,51,60,.07) 14px); color:var(--ink-muted); border-style:dashed; opacity:1; }
  .field input.linked-input:not(:disabled){ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
  .field .prefix-wrap{ position:relative; }
  .field .prefix-wrap input{ padding-left:38px; }
  .field .prefix{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-muted); font-family:var(--font-mono); }
  .field .suffix-wrap input{ padding-right:34px; }
  .field .suffix-wrap{ position:relative; }
  .field .suffix{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ink-muted); font-family:var(--font-mono); }

  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
  input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

  .field select{ width:100%; background:var(--bg-inset); border:1px solid var(--line); border-radius:14px; padding:13px 14px; font-size:1rem; color:var(--ink); }
  .field select:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
  /* identity of the offer, never part of the maths, so it stays folded away until wanted */
  details.offer-meta{ margin-bottom:18px; }
  details.offer-meta .meta-body{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
  details.offer-meta summary .meta-hint{ margin-left:auto; font-size:.78rem; font-weight:500; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:48%; }

  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{ border:1px solid var(--line); background:var(--bg-inset); border-radius:11px; padding:9px 14px; font-size:.9rem; font-family:var(--font-mono); transition:all .16s ease; }
  .chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
  .chip:not([aria-pressed="true"]):hover{ border-color:var(--accent); }

  .seg{ display:flex; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg-inset); }
  .seg button{ flex:1; padding:11px 10px; font-size:.86rem; text-align:center; transition:background .16s ease, color .16s ease; }
  .seg button[aria-pressed="true"]{ background:var(--accent); color:#FFFFFF; font-weight:600; }
  .seg-sm{ border-radius:10px; }
  .seg-sm button{ padding:8px 8px; font-size:.78rem; }



  .dp-readout{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; background:var(--bg-inset); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:14px 16px; margin-top:-6px; margin-bottom:18px; }
  .dp-readout .dp-label{ flex-basis:100%; font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); }
  .dp-readout strong{ color:var(--ink); font-family:var(--font-mono); font-size:1.4rem; font-weight:700; }
  .dp-readout .dp-pct{ font-size:.86rem; color:var(--ink-muted); }

  details.fees{ margin-top:6px; margin-bottom:18px; }
  details.fees summary{ cursor:pointer; font-size:.88rem; font-weight:600; color:var(--accent); list-style:none; display:flex; align-items:center; gap:6px; }
  details.fees summary::-webkit-details-marker{ display:none; }
  details.fees summary::before{
    content:''; width:7px; height:7px; flex-shrink:0; margin-right:2px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease;
  }
  details.fees[open] summary::before{ transform:rotate(-135deg) translate(-1px,-1px); }
  .fee-row{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
  .fee-row .seg-sm button{ white-space:nowrap; }
  /* Only cramped while the cards really are 290px wide, which is a desktop-grid condition.
     On a phone the cards are full width and get normal-sized type instead. */
  @media (min-width:561px){ .offer-card .seg-sm button{ padding:7px 5px; font-size:.75rem; line-height:1.25; } }

  .toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg-inset); border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin-bottom:14px; }
  .toggle-row span{ font-size:.9rem; font-weight:600; }
  .switch{ position:relative; width:44px; height:26px; border-radius:999px; background:var(--line); flex-shrink:0; transition:background .2s ease; }
  .switch::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--bg-elevated); box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s ease; }
  .switch[aria-checked="true"]{ background:var(--trust); }
  .switch[aria-checked="true"]::after{ transform:translateX(18px); }

  .calc-result{ display:flex; flex-direction:column; }
  .rr-label{ font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
  .rr-quoted{ font-size:1.25rem; font-weight:700; color:var(--ink-muted); margin-top:6px; }
  .rr-divider{ display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--ink-muted); font-size:.8rem; }
  .rr-divider::before,.rr-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
  .rr-hero-label{ font-size:.84rem; font-weight:700; color:var(--reveal); }
  .rr-hero{ font-size:clamp(2.5rem,5.6vw,3.4rem); font-weight:800; color:var(--reveal); line-height:1; margin-top:8px; }
  .rr-gap{ margin-top:16px; font-size:.98rem; color:var(--ink); }
  /* Market context. Deliberately quieter than the reveal: it is background, not the finding. */
  .rr-market{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
              font-size:.86rem; line-height:1.55; color:var(--ink-muted); }
  .rr-market strong{ color:var(--ink); font-weight:700; }
  .fb-consent{ display:flex; gap:9px; align-items:flex-start; margin:2px 0 14px;
               font-size:.85rem; line-height:1.5; color:var(--ink-muted); font-weight:400; cursor:pointer; }
  .fb-consent input{ width:16px; height:16px; margin-top:2px; flex-shrink:0; accent-color:var(--accent); }
  /* --ink-decor is for rules and glyphs, never for words: it lands at 2.62:1. The design
     system says so and this line broke it on the first try. --ink-muted is the text tier. */
  .rr-market .src{ display:block; margin-top:6px; font-size:.76rem; color:var(--ink-muted); }
  .rr-gap strong{ color:var(--reveal); }
  .rr-stats{ margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .rr-stat{ background:var(--bg-inset); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
  .rr-stat .k{ font-size:.75rem; color:var(--ink-faint); }
  .rr-stat .v{ font-family:var(--font-mono); font-size:1.02rem; margin-top:4px; }
  .rr-note{ margin-top:16px; font-size:.84rem; padding:12px 14px; border-radius:12px; background:var(--warn-soft); color:var(--warn-ink); display:none; }
  .rr-note.show{ display:block; }
  /* ---- shareable-goal calculator, a lighter-weight tool than the five above ---- */
  .goal-flavor{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px; }
  .goal-flavor button{ border:1px solid var(--line); background:var(--bg-inset); border-radius:12px; padding:11px 10px; font-size:.85rem; font-weight:600; text-align:center; color:var(--ink-muted); transition:all .16s ease; }
  .goal-flavor button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .goal-flavor button:not([aria-pressed="true"]):hover{ border-color:var(--accent); color:var(--ink); }
  @media (max-width:480px){ .goal-flavor button{ min-height:44px; font-size:.82rem; padding:10px 8px; } }
  .goal-target-readout{ margin-top:10px; font-size:.88rem; color:var(--ink-muted); background:var(--bg-inset); border-radius:12px; padding:10px 14px; }
  .goal-target-readout strong{ font-family:var(--font-mono); color:var(--ink); }
  .goal-share{ margin-top:22px; }
  .goal-share canvas{ display:none; }
  .goal-share-preview{ display:none; margin-top:14px; max-width:280px; border-radius:16px; box-shadow:var(--shadow); }
  .goal-share-preview.show{ display:block; }
  .goal-share-hint{ margin-top:8px; font-size:.78rem; color:var(--ink-faint); }
  .rr-assume{ margin-top:16px; font-size:.86rem; padding:12px 14px; border-radius:12px; background:var(--bg-inset); color:var(--ink-muted); display:none; }
  .rr-assume.show{ display:block; }
  .rr-assume strong{ color:var(--ink); }
  .rr-assume button{ display:block; margin-top:4px; color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
  .rr-assume button:hover{ color:var(--accent-strong); }
  .rr-explain{ margin-top:16px; font-size:.84rem; padding:12px 14px; border-radius:12px; background:var(--bg-inset); color:var(--ink-muted); display:none; }
  .rr-explain.show{ display:block; }
  .rr-error{ margin-top:16px; font-size:.9rem; padding:12px 14px; border-radius:12px; background:var(--reveal-soft); color:var(--reveal); display:none; }
  .rr-error.show{ display:block; }
  .rr-reverse-banner{ margin-bottom:20px; padding:18px 20px; border-radius:16px; background:var(--trust-soft); display:none; }
  .rr-reverse-banner.show{ display:block; }
  .rr-reverse-banner .rrb-label{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
  .rr-reverse-banner .rrb-amount{ font-family:var(--font-mono); font-size:clamp(1.7rem,4vw,2.3rem); font-weight:700; color:var(--trust-ink); margin-top:4px; line-height:1.15; }
  .rr-reverse-banner .rrb-sub{ font-size:.88rem; color:var(--ink); margin-top:6px; }
  .rr-reverse-banner .rrb-note{ font-size:.78rem; color:var(--ink-muted); margin-top:12px; padding-top:12px; border-top:1px dashed rgba(46,122,94,.3); }
  .rr-trust{ margin-top:auto; padding-top:20px; font-size:.82rem; color:var(--ink-faint); display:flex; gap:8px; align-items:flex-start; }

  /* ---------- breakdown ---------- */
  .rr-breakdown{ margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
  .rr-bd-dp{ background:var(--bg-inset); border-radius:12px; padding:10px 14px; margin-bottom:10px; font-size:.86rem; color:var(--ink-muted); }
  .rr-bd-dp strong{ color:var(--ink); }
  .rr-bd-row{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; font-size:.9rem; color:var(--ink-muted); gap:12px; }
  .rr-bd-row .v{ font-family:var(--font-mono); color:var(--ink); text-align:right; }
  .rr-bd-row.total{ border-top:1px dashed var(--line); margin-top:6px; padding-top:12px; font-weight:700; color:var(--ink); }
  .rr-bd-row.total .v{ font-size:1.05rem; color:var(--accent); }

  /* ---------- comparison ---------- */
  .cmp-body{ padding:28px; }
  @media (max-width:560px){ .cmp-body{ padding:16px; } }
  .cmp-intro{ max-width:620px; margin:0 auto 24px; text-align:center; }
  .cmp-intro h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; }
  .cmp-intro p{ margin-top:10px; font-size:.92rem; color:var(--ink-muted); }

  .type-choice{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px; margin-inline:auto; }
  @media (max-width:640px){ .type-choice{ grid-template-columns:1fr; } }
  .type-card{ display:block; text-align:left; background:var(--bg-inset); border:2px solid var(--line); border-radius:18px; padding:22px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .type-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
  .type-card .tc-title{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
  .type-card .tc-desc{ display:block; margin-top:9px; font-size:.85rem; color:var(--ink-muted); line-height:1.5; }
  .type-card .tc-go{ display:block; margin-top:14px; font-size:.85rem; font-weight:600; color:var(--accent); }

  .cmp-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
  .cmp-type-badge{ font-size:.8rem; font-weight:700; background:var(--accent-soft); color:var(--accent); padding:6px 14px; border-radius:999px; }
  .cmp-bar .cmp-link{ font-size:.85rem; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
  .cmp-bar .cmp-add{ margin-left:auto; font-size:.85rem; font-weight:600; color:var(--accent); border:1px dashed var(--line); border-radius:999px; padding:7px 16px; white-space:nowrap; }
  .cmp-bar .cmp-add:hover{ border-color:var(--accent); background:var(--accent-soft); }

  .compare-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap:16px; align-items:start; }
  .offer-card{ background:var(--bg-inset); border:2px solid var(--line); border-radius:20px; padding:20px; transition:border-color .25s ease; }
  .offer-card.is-winner{ border-color:var(--trust); }
  .offer-card.is-incomplete{ border-style:dashed; }
  .offer-head{ display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:16px; }
  .offer-name{ flex:1; min-width:0; width:100%; background:transparent; border:none; font-family:var(--font-display); font-weight:700; font-size:1.05rem; padding:0; }
  .offer-name:focus{ outline:none; }
  .offer-remove{ flex-shrink:0; font-size:.74rem; font-weight:600; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
  .offer-remove:hover{ color:var(--reveal); border-color:var(--reveal); }
  .offer-card .field{ margin-bottom:12px; }
  .offer-card .field label{ font-size:.8rem; }
  .offer-card .field input[type="text"], .offer-card .field input[type="number"]{ background:var(--bg-elevated); padding:11px 12px; font-size:.94rem; border-radius:12px; }
  .offer-card .field .prefix-wrap input{ padding-left:34px; }
  .offer-card .field input.linked-input:disabled{ background:repeating-linear-gradient(135deg, var(--bg-elevated), var(--bg-elevated) 7px, rgba(37,51,60,.07) 7px, rgba(37,51,60,.07) 14px); }
  .offer-card .toggle-row{ background:var(--bg-elevated); padding:9px 13px; margin-bottom:12px; }
  .offer-card .toggle-row span{ font-size:.82rem; }
  .offer-card .dp-readout{ padding:10px 13px; margin-top:-2px; margin-bottom:14px; }
  .offer-card .dp-readout strong{ font-size:1.1rem; }
  .offer-card .field-help{ font-size:.75rem; }
  .cmp-group{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
  .cmp-group-title{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
  .cmp-fill{ display:block; width:100%; margin-bottom:14px; font-size:.79rem; font-weight:600; color:var(--accent); border:1px dashed var(--accent); border-radius:12px; padding:9px 12px; background:var(--bg-elevated); line-height:1.35; }
  .cmp-fill:hover{ background:var(--accent-soft); }

  .offer-result{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); }
  .offer-badge{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--trust-fill); color:#fff; padding:4px 10px; border-radius:999px; margin-bottom:10px; }
  .offer-ear-label{ font-size:.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
  .offer-ear{ font-family:var(--font-mono); font-size:1.9rem; font-weight:600; color:var(--reveal); line-height:1.1; margin-top:2px; }
  .offer-sub{ margin-top:12px; font-size:.84rem; color:var(--ink-muted); display:flex; flex-direction:column; gap:5px; }
  .offer-sub .num{ color:var(--ink); }
  .offer-assumed{ margin-top:12px; font-size:.77rem; padding:9px 12px; border-radius:10px; background:var(--warn-soft); color:var(--warn-ink); line-height:1.45; }
  .offer-missing{ font-size:.82rem; padding:12px 14px; border-radius:12px; background:var(--bg-elevated); border:1px dashed var(--line); color:var(--ink-muted); }
  .offer-missing strong{ display:block; color:var(--ink); margin-bottom:5px; }
  .offer-missing ul{ margin:0; padding-left:17px; }
  .offer-missing li{ margin-top:2px; }

  .compare-verdict{ margin-top:22px; text-align:center; background:var(--trust-soft); color:var(--trust-ink); border-radius:16px; padding:16px 20px; font-size:.96rem; font-weight:600; display:none; }
  .compare-verdict.show{ display:block; }
  .cmp-caveat{ margin-top:12px; font-size:.85rem; line-height:1.55; padding:12px 15px; border-radius:12px; background:var(--warn-soft); color:var(--warn-ink); display:none; }
  .cmp-caveat.show{ display:block; }
  .cmp-empty{ margin-top:22px; text-align:center; font-size:.9rem; color:var(--ink-faint); background:var(--bg-inset); border:1px dashed var(--line); border-radius:16px; padding:26px 20px; }
  .cmp-table-wrap{ margin-top:24px; overflow-x:auto; }
  .cmp-table-title{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
  .cmp-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
  .cmp-table th, .cmp-table td{ padding:11px 14px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
  .cmp-table th:first-child, .cmp-table td:first-child{ text-align:left; color:var(--ink-muted); white-space:normal; font-weight:500; }
  .cmp-table thead th{ font-family:var(--font-display); font-size:.92rem; color:var(--ink); border-bottom:2px solid var(--line); }
  .cmp-table thead th .win-tag{ display:block; font-family:var(--font-body); font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--trust-ink); margin-top:3px; }
  .cmp-table td{ font-family:var(--font-mono); color:var(--ink); }
  .cmp-table tr.is-hero th, .cmp-table tr.is-hero td{ background:var(--reveal-soft); }
  .cmp-table tr.is-hero td{ color:var(--reveal-ink); font-weight:700; font-size:1rem; }
  .cmp-table tr.is-total td{ font-weight:700; color:var(--accent); }

  /* ---------- early settlement ---------- */
  .pay-versus{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
  @media (max-width:440px){ .pay-versus{ grid-template-columns:1fr; } }
  .pay-side{ background:var(--bg-inset); border:1px solid var(--line); border-radius:16px; padding:16px; }
  .pay-side.is-cost{ border-left:4px solid var(--reveal); }
  .pay-side.is-keep{ border-left:4px solid var(--accent); }
  .pay-side .ps-label{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
  .pay-side .ps-amount{ font-family:var(--font-mono); font-size:1.35rem; font-weight:700; margin-top:6px; line-height:1.2; }
  .pay-side.is-cost .ps-amount{ color:var(--reveal); }
  .pay-side.is-keep .ps-amount{ color:var(--accent); }
  .pay-side .ps-sub{ font-size:.75rem; color:var(--ink-muted); margin-top:7px; line-height:1.45; }
  .pay-net{ margin-top:14px; border-radius:16px; padding:16px 18px; font-size:.96rem; font-weight:600; text-align:center; line-height:1.5; }
  .pay-net.win{ background:var(--trust-soft); color:var(--trust-ink); }
  .pay-net.lose{ background:var(--warn-soft); color:var(--warn-ink); }
  .pay-assume{ margin-top:16px; font-size:.8rem; line-height:1.6; padding:12px 15px; border-radius:12px; background:var(--bg-inset); color:var(--ink-muted); }
  .pay-assume strong{ color:var(--ink); }
  .pay-warn{ margin-top:12px; font-size:.82rem; line-height:1.5; padding:11px 14px; border-radius:12px; background:var(--warn-soft); color:var(--warn-ink); display:none; }
  .pay-warn.show{ display:block; }
  .pay-checklist{ margin-top:16px; padding:14px 16px; border-radius:14px; background:var(--bg-inset); border-left:4px solid var(--accent); }
  .pay-checklist .pc-title{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px; }
  .pay-checklist ul{ margin:0; padding-left:18px; font-size:.84rem; color:var(--ink); }
  .pay-checklist li{ margin-top:6px; line-height:1.5; }
  .pay-basis{ margin-top:10px; border:1px dashed var(--line); border-radius:12px; overflow:hidden; }
  .pay-basis-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 13px; font-size:.8rem; border-bottom:1px solid var(--line); }
  .pay-basis-row:last-child{ border-bottom:none; }
  .pay-basis-row.is-active{ background:var(--accent-soft); font-weight:600; }
  .pay-basis-row > span:first-child{ min-width:0; overflow-wrap:anywhere; }
  .pay-basis-row .v{ font-family:var(--font-mono); white-space:nowrap; flex-shrink:0; }
  .pay-readout{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr)); gap:10px; background:var(--bg-inset); border:1px solid var(--line); border-radius:14px; padding:13px 15px; margin-bottom:14px; }
  .pay-readout .k{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
  .pay-readout .v{ display:block; font-family:var(--font-mono); font-size:1rem; font-weight:600; margin-top:3px; }

  .pay-story{ background:var(--bg-inset); border-radius:18px; padding:20px; border-left:4px solid var(--accent); }
  .pay-story.is-out{ border-left-color:var(--reveal); }
  .pay-story.is-survive{ border-left-color:var(--trust); }
  .pay-story .pst-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); line-height:1.5; }
  .pay-story .pst-hero{ font-family:var(--font-mono); font-size:clamp(1.6rem,4.4vw,2.3rem); font-weight:700; line-height:1.1; margin-top:8px; }
  .pay-story.is-out .pst-hero{ color:var(--reveal); }
  .pay-story.is-survive .pst-hero{ color:var(--trust-ink); }
  .pay-story .pst-sub{ font-size:.9rem; color:var(--ink); margin-top:10px; line-height:1.55; }
  .pay-chart{ margin-top:16px; position:relative; }
  .pay-chart svg{ width:100%; height:auto; display:block; overflow:visible; }
  .pay-chart .pc-caption{ font-size:.74rem; color:var(--ink-faint); margin-top:8px; text-align:center; }
  .pay-tip{ position:absolute; pointer-events:none; background:var(--ink); color:var(--bg); font-size:.74rem; font-family:var(--font-mono); padding:5px 9px; border-radius:8px; white-space:nowrap; opacity:0; transition:opacity .12s ease; transform:translate(-50%,-130%); z-index:5; }
  .pay-tip.show{ opacity:1; }
  .pay-verdict{ margin-top:14px; border-radius:16px; padding:15px 18px; font-size:.98rem; font-weight:600; text-align:center; line-height:1.5; }
  .pay-verdict.win{ background:var(--trust-soft); color:var(--trust-ink); }
  .pay-verdict.lose{ background:var(--warn-soft); color:var(--warn-ink); }
  .pay-refund{ margin-top:16px; border-radius:16px; padding:15px 17px; background:var(--trust-soft); border:1px solid rgba(46,122,94,.3); display:none; }
  .pay-refund.show{ display:block; }
  .pay-refund .prf-head{ display:flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--trust-ink); }
  .pay-refund .prf-amount{ font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--trust-ink); margin-top:6px; }
  .pay-refund .prf-body{ font-size:.83rem; color:var(--ink); margin-top:8px; line-height:1.55; }
  .pay-alt-title{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:22px; margin-bottom:2px; }

  .pay-tier-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
  .pay-tier-row input{ width:100%; background:var(--bg-elevated); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-family:var(--font-mono); font-size:.92rem; color:var(--ink); }
  .pay-tier-row .suffix-wrap{ position:relative; }
  .pay-tier-row .suffix{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--ink-muted); font-family:var(--font-mono); font-size:.85rem; }
  .pay-tier-row .suffix-wrap input{ padding-right:34px; }
  .pay-tier-row .pt-del{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); color:var(--ink-faint); font-size:1.1rem; line-height:1; }
  .pay-tier-row .pt-del:hover{ color:var(--reveal); border-color:var(--reveal); }

  .pay-totals{ width:100%; border-collapse:collapse; font-size:.88rem; margin-top:12px; }
  .pay-totals th, .pay-totals td{ padding:9px 10px; text-align:right; border-bottom:1px solid var(--line); }
  .pay-totals th:first-child, .pay-totals td:first-child{ text-align:left; color:var(--ink-muted); font-weight:500; }
  .pay-totals thead th{ font-family:var(--font-display); font-size:.85rem; color:var(--ink); border-bottom:2px solid var(--line); }
  .pay-totals td{ font-family:var(--font-mono); color:var(--ink); white-space:nowrap; }
  .pay-totals tr.is-total td{ font-weight:700; font-size:1rem; }
  .pay-totals tr.is-total td:nth-child(2){ color:var(--reveal); }
  .pay-totals tr.is-total td:nth-child(3){ color:var(--accent); }
  /* Give the numbers the room, not the chrome. A rupiah figure cannot wrap without becoming
     unreadable, so the label column is the one that yields. */
  @media (max-width:560px){
    .pay-totals th:first-child, .pay-totals td:first-child,
    .pay-timing th:first-child, .pay-timing td:first-child{ white-space:normal; overflow-wrap:anywhere; }
    details.pay-more .pm-body{ padding:0 11px 13px; }
    details.pay-more > summary{ padding:12px 11px; }
  }
  @media (max-width:430px){
    .container{ padding-inline:14px; }
    .pay-side .ps-amount{ font-size:1.3rem; }
    .pay-readout .v{ font-size:1rem; }
    .pay-basis-row{ padding:11px 12px; font-size:.86rem; }

    .pay-totals, .pay-totals tbody, .pay-totals tr, .pay-totals td,
    .pay-timing, .pay-timing tbody, .pay-timing tr, .pay-timing td{ display:block; width:auto; }
    .pay-totals thead, .pay-timing thead{ display:none; }
    .pay-totals tr, .pay-timing tr{
      border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px;
      background:var(--bg-elevated);
    }
    .pay-totals td, .pay-timing td{
      display:flex; justify-content:space-between; align-items:baseline; gap:12px;
      padding:3px 0; border-bottom:none; text-align:right; font-size:.84rem;
    }
    .pay-totals td:first-child, .pay-timing td:first-child{
      font-family:var(--font-body); font-weight:700; color:var(--ink);
      padding-bottom:7px; margin-bottom:5px; border-bottom:1px dashed var(--line);
      text-align:left; display:block;
    }
    .pay-totals td[data-label]::before, .pay-timing td[data-label]::before{
      content:attr(data-label); font-family:var(--font-body); font-weight:500;
      font-size:.78rem; color:var(--ink-muted); text-align:left; flex:1; min-width:0;
    }
    .pay-totals tr.is-total{ border-color:var(--accent); border-width:2px; }
    .pay-totals tr.is-total td{ font-size:.92rem; }
    .pay-timing tr.is-best{ border-color:var(--trust); border-width:2px; }
    .pay-timing tr.is-best td{ background:transparent; }
    .pay-timing tr.is-best td:first-child{ color:var(--trust-ink); }
  }
  .pay-glance{ margin-top:12px; font-size:.92rem; line-height:1.6; color:var(--ink); background:var(--bg-inset); border-radius:14px; padding:14px 16px; }
  .pay-glance .pg-turn{ display:block; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); color:var(--ink-muted); font-size:.87rem; }
  .pay-glance strong{ color:var(--ink); }
  .pay-why{ margin-top:12px; font-size:.87rem; line-height:1.6; padding:13px 16px; border-radius:14px; background:var(--accent-soft); color:var(--ink); }
  .pay-why b{ color:var(--accent); }
  details.pay-more{ margin-top:14px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg-elevated); }
  details.pay-more > summary{ cursor:pointer; list-style:none; padding:13px 16px; font-size:.88rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px; }
  details.pay-more > summary::-webkit-details-marker{ display:none; }
  details.pay-more > summary::before{
    content:''; width:8px; height:8px; flex-shrink:0; color:var(--accent);
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease;
  }
  details.pay-more[open] > summary::before{ transform:rotate(-135deg) translate(-1px,-1px); }
  details.pay-more > summary .pm-hint{ margin-left:auto; font-size:.76rem; font-weight:500; color:var(--ink-faint); }
  details.pay-more .pm-body{ padding:0 16px 16px; min-width:0; }
  .pay-timing{ width:100%; border-collapse:collapse; font-size:.85rem; }
  .pay-timing th, .pay-timing td{ padding:9px 8px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
  .pay-timing th:first-child, .pay-timing td:first-child{ text-align:left; color:var(--ink-muted); }
  .pay-timing thead th{ font-size:.78rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
  .pay-timing td{ font-family:var(--font-mono); color:var(--ink); }
  .pay-timing tr.is-best td{ background:var(--trust-soft); font-weight:700; }
  .pay-timing tr.is-best td:first-child{ color:var(--trust-ink); }

  /* ---------- amortisation ---------- */
  .amort-verdict{ font-size:.86rem; line-height:1.55; padding:12px 15px; border-radius:12px; margin-bottom:12px; }
  .amort-verdict.is-flat{ background:var(--reveal-soft); color:var(--reveal-ink); }
  .amort-verdict.is-eff{ background:var(--accent-soft); color:var(--ink); }
  .amort-verdict strong{ font-family:var(--font-mono); }
  .amort-legend{ display:flex; gap:16px; font-size:.74rem; color:var(--ink-muted); margin-bottom:10px; flex-wrap:wrap; }
  .amort-legend span{ display:flex; align-items:center; gap:6px; }
  .amort-legend i{ width:10px; height:10px; border-radius:3px; display:block; flex-shrink:0; }
  .amort-wrap{ overflow-x:auto; }
  /* Money tables carry nowrap cells, so without their own scroller they widen the whole document
     and every section of the page inherits a horizontal scrollbar. Scroll inside the table only. */
  .pay-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .amort{ width:100%; border-collapse:collapse; font-size:.8rem; }
  .amort th, .amort td{ padding:7px 9px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
  .amort th:first-child, .amort td:first-child{ text-align:left; }
  .amort thead th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:700; }
  .amort td{ font-family:var(--font-mono); color:var(--ink); }
  .amort tr.is-step td{ background:var(--warn-soft); }
  .amort tr.is-gap td{ text-align:center; color:var(--ink-faint); font-family:var(--font-body); font-size:.76rem; padding:10px; }
  .amort .split{ display:flex; height:8px; border-radius:4px; overflow:hidden; min-width:72px; background:var(--bg-inset); }
  .amort .split i{ display:block; height:100%; }
  .amort .sp-p{ background:var(--accent); }
  .amort .sp-i{ background:var(--reveal); }
  .amort-more{ margin-top:12px; font-size:.82rem; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
  .clone-cta{ display:block; width:100%; margin-top:16px; padding:12px 16px; border:1px dashed var(--accent); border-radius:14px; background:var(--bg-inset); color:var(--accent); font-size:.86rem; font-weight:600; }
  .clone-cta:hover{ background:var(--accent-soft); }
  .cmp-cloned{ margin-bottom:16px; padding:13px 16px; border-radius:14px; background:var(--warn-soft); color:var(--warn-ink); font-size:.85rem; line-height:1.55; display:none; }
  .cmp-cloned.show{ display:block; }

  /* ---------- saved calculations (this browser only) ---------- */
  .saves-bar{ max-width:640px; margin:0 auto 22px; background:var(--bg-elevated); border:1px solid var(--line); border-radius:16px; padding:14px 18px; }
  .saves-bar .saves-body{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
  .saves-note{ font-size:.78rem; color:var(--ink-muted); line-height:1.55; background:var(--bg-inset); border-radius:10px; padding:9px 12px; margin-bottom:12px; }
  .saves-empty{ font-size:.85rem; color:var(--ink-faint); text-align:center; padding:14px 8px; }
  .save-item{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 0; border-bottom:1px solid var(--line); }
  .save-item:last-child{ border-bottom:none; }
  .save-item .si-main{ flex:1; min-width:180px; }
  .save-item .si-name{ width:100%; background:transparent; border:1px solid transparent; border-radius:8px; padding:3px 6px; font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--ink); }
  .save-item .si-name:hover{ border-color:var(--line); }
  .save-item .si-name:focus{ outline:none; border-color:var(--accent); background:var(--bg-inset); }
  .save-item .si-meta{ font-size:.76rem; color:var(--ink-faint); padding-left:6px; margin-top:2px; }
  .save-item .si-actions{ display:flex; gap:6px; flex-shrink:0; }
  .save-item .si-actions button{ font-size:.76rem; font-weight:600; color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:5px 12px; white-space:nowrap; }
  .save-item .si-actions button:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .save-item .si-actions .si-del{ color:var(--ink-faint); }
  .save-item .si-actions .si-del:hover{ color:var(--reveal); border-color:var(--reveal); background:var(--reveal-soft); }
  .save-item .si-actions .si-del.armed{ color:#fff; background:var(--reveal); border-color:var(--reveal); }
  .save-cta{ margin-top:10px; }
  .save-namer{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .save-namer input{ flex:1; min-width:150px; background:var(--bg-inset); border:1px solid var(--accent); border-radius:12px; padding:10px 12px; font-size:.9rem; color:var(--ink); }
  .save-namer input:focus{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
  .save-namer button{ font-size:.82rem; font-weight:600; border-radius:12px; padding:10px 16px; white-space:nowrap; }
  .save-namer .save-confirm{ background:var(--accent); color:var(--accent-ink); }
  .save-namer .save-cancel{ color:var(--ink-muted); border:1px solid var(--line); }
  .save-toast{ margin-top:10px; font-size:.82rem; padding:10px 13px; border-radius:12px; background:var(--trust-soft); color:var(--trust); display:none; }
  .save-toast.show{ display:block; }
  .save-toast.is-warn{ background:var(--warn-soft); color:var(--warn-ink); }

  /* ---------- printable reference document ----------
     Built on demand into a hidden container and revealed only to the printer, so the whole thing
     stays inside the page: no library, no upload, nothing leaves the browser. */
  #print-doc{ display:none; }
  .pdf-cta{ display:block; width:100%; margin-top:10px; padding:13px 16px; border-radius:14px; background:var(--grad-accent); color:var(--accent-ink); font-size:.88rem; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(37,51,60,.25); }
  .pdf-cta:hover{ transform:translateY(-1px); }
  .pdf-hint{ margin-top:7px; font-size:.76rem; color:var(--ink-faint); text-align:center; line-height:1.5; }

  @media print{
    @page{ margin:14mm 12mm; }
    body > *:not(#print-doc){ display:none !important; }
    body > #print-doc{ display:block !important; }
    body{ background:#fff; }
    #print-doc{ color:#111; font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:10pt; line-height:1.45; }
    #print-doc .pd-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-bottom:2px solid #111; padding-bottom:9px; margin-bottom:6px; }
    #print-doc .pd-brand{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:700; font-size:15pt; }
    #print-doc .pd-doctitle{ font-size:9pt; color:#444; margin-top:2px; }
    #print-doc .pd-gen{ font-size:8.5pt; color:#555; text-align:right; white-space:nowrap; }
    #print-doc .pd-notice{ font-size:8.5pt; color:#444; background:#f2f2f2; border-left:3px solid #888; padding:7px 10px; margin:10px 0 16px; }
    #print-doc h2{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:10.5pt; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:16px 0 7px; padding-bottom:3px; border-bottom:1px solid #bbb; break-after:avoid; }
    #print-doc table{ width:100%; border-collapse:collapse; }
    #print-doc .pd-kv td{ padding:4px 0; font-size:9.5pt; border-bottom:1px solid #e4e4e4; vertical-align:top; }
    #print-doc .pd-kv td:first-child{ color:#444; width:52%; }
    #print-doc .pd-kv td.v{ text-align:right; font-family:'IBM Plex Mono', monospace; }
    #print-doc .pd-kv tr.tot td{ font-weight:700; border-top:1.5px solid #111; border-bottom:none; padding-top:7px; }
    #print-doc .pd-hero{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; background:#f6f6f6; border-left:4px solid #111; padding:10px 13px; margin-top:8px; }
    #print-doc .pd-hero .k{ font-size:9pt; color:#333; }
    #print-doc .pd-hero .n{ font-family:'IBM Plex Mono', monospace; font-size:17pt; font-weight:700; }
    #print-doc .pd-shape{ font-size:9pt; background:#f6f6f6; padding:8px 11px; margin:8px 0 4px; }
    #print-doc .pd-sched{ font-size:8.5pt; }
    #print-doc .pd-sched thead{ display:table-header-group; }
    #print-doc .pd-sched th{ text-align:right; font-size:7.5pt; text-transform:uppercase; letter-spacing:.04em; color:#333; border-bottom:1.5px solid #111; padding:4px 5px; }
    #print-doc .pd-sched th:first-child, #print-doc .pd-sched td:first-child{ text-align:left; }
    #print-doc .pd-sched td{ text-align:right; font-family:'IBM Plex Mono', monospace; padding:3px 5px; border-bottom:1px solid #ececec; }
    #print-doc .pd-sched tr{ break-inside:avoid; }
    #print-doc .pd-sched tr.step td{ background:#f0f0f0; font-weight:600; }
    #print-doc .pd-foot{ margin-top:18px; padding-top:9px; border-top:1px solid #bbb; font-size:8pt; color:#555; line-height:1.5; }
    #print-doc .pd-empty{ color:#777; }
  }

  /* ---------- explainer ---------- */
  .explainer-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:44px; max-width:840px; margin-inline:auto; }
  .explainer-lead{ font-size:1.08rem; color:var(--ink); max-width:60ch; }
  .explainer-visual{ margin-top:28px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; background:var(--bg-inset); border-radius:16px; padding:22px; }
  @media (max-width:560px){ .explainer-visual{ grid-template-columns:1fr; text-align:center; } }
  .explainer-visual .col p:first-child{ font-size:.78rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
  .explainer-visual .col p:last-child{ font-family:var(--font-mono); font-size:1.15rem; font-weight:600; margin-top:6px; }
  .explainer-visual .arrow{ color:var(--ink-muted); font-size:1.3rem; }
  .explainer-close{ margin-top:24px; font-size:.95rem; color:var(--ink-muted); }
  .explainer-trust{ margin-top:20px; display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--trust-ink); font-weight:500; }

  /* ---------- feedback ---------- */
  .feedback-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:40px; max-width:640px; margin-inline:auto; }
  .feedback-card form{ display:flex; flex-direction:column; gap:6px; }
  .feedback-card label{ font-size:.84rem; font-weight:600; color:var(--ink-muted); margin-top:8px; }
  .feedback-card label:first-child{ margin-top:0; }
  /* :not([type=checkbox]) matters. Without it the consent checkbox took width:100% and a text-field
     frame, which shoved its label into a one-word column outside the card on every page. */
  .feedback-card textarea, .feedback-card input:not([type="checkbox"]){ width:100%; background:var(--bg-inset); border:1px solid var(--line); border-radius:14px; padding:13px 14px; font-family:inherit; font-size:1rem; color:var(--ink); resize:vertical; }
  .feedback-card textarea:focus, .feedback-card input:not([type="checkbox"]):focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .feedback-card label.fb-consent{ font-weight:400; font-size:.88rem; margin-top:10px; }
  .feedback-card .btn-primary{ margin-top:8px; align-self:flex-start; }

  /* ---------- roadmap / waitlist combined ---------- */
  .roadmap-card{ background:var(--grad-panel); border:1px solid var(--accent-soft); color:var(--ink); border-radius:28px; padding:48px; display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; box-shadow:var(--shadow-lg); }
  @media (max-width:820px){ .roadmap-card{ grid-template-columns:1fr; padding:32px; } }
  .roadmap-badge{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--accent); color:#fff; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
  .roadmap-card h2{ color:var(--ink); font-size:clamp(1.5rem,3vw,2rem); }
  .roadmap-card p{ color:var(--ink-muted); margin-top:12px; font-size:.98rem; }
  .wl-form{ margin-top:0; display:flex; flex-direction:column; gap:10px; }
  .wl-form input{ background:var(--bg-elevated); border:1px solid rgba(37,51,60,.14); border-radius:14px; padding:13px 16px; font-size:1rem; color:var(--ink); }
  .wl-form input::placeholder{ color:var(--ink-faint); }
  .wl-form input:focus{ outline:none; border-color:var(--accent); }
  .wl-interests{ display:flex; gap:8px; flex-wrap:wrap; }
  .wl-interests .chip{ background:var(--bg-elevated); border-color:rgba(37,51,60,.14); color:var(--ink-muted); }
  .wl-interests .chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .wl-msg{ margin-top:4px; font-size:.88rem; color:var(--trust); font-weight:600; display:none; }
  .wl-msg.show{ display:block; }

  /* ---------- footer ---------- */
  footer{ border-top:1px solid var(--line); padding-block:44px; }
  .footer-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  footer p{ font-size:.82rem; color:var(--ink-faint); max-width:560px; }
  .footer-priv{ display:flex; align-items:center; gap:8px; color:var(--trust-ink); font-size:.82rem; margin-top:10px; }
  .footer-meta{ text-align:right; font-size:.78rem; color:var(--ink-faint); }
  @media (max-width:640px){ .footer-meta{ text-align:left; } }

  /* ============================================================================
     MULTI-PAGE SHELL AND THE PAGES THAT CAME WITH IT
     The page header, the credit-tool strip as real links, the homepage feature cards
     with their quick calculations, the savings page's comparison and fun blocks, and
     the account page. Placed before the mobile block so its overrides still win.
     ============================================================================ */
  .brand img{ height:28px; width:auto; display:block; }
  @media (max-width:480px){ .brand img{ height:24px; } }
  .nav-links a{ text-decoration:none; }
  .nav-links a[aria-current="page"]{ color:var(--ink); font-weight:600; }
  a.tool-tab{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
  .tool-tab[aria-current="page"], .tool-tab[aria-current="page"]:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

  .page-head{ padding-top:40px; padding-bottom:0; text-align:center; }
  .page-head h1{ font-size:clamp(1.8rem, 4.4vw, 2.8rem); line-height:1.12; max-width:24ch; margin:10px auto 0; }
  .page-head .sub{ max-width:640px; margin:14px auto 0; color:var(--ink-muted); font-size:1.02rem; }
  .crumbs{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; font-size:.84rem; color:var(--ink-faint); margin-bottom:12px; }
  .crumbs a{ color:var(--ink-muted); text-decoration:underline; text-underline-offset:3px; }
  .tool-page{ padding-top:28px; }

  #fitur .group-title{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 14px; }

  /* HOMEPAGE TOOL CARDS. The answer comes first, the way the rest of the product works: a card that
     can compute shows its number before anything is opened, and says what it was computed from.
     Six tracks so 3 + 2 cards both divide evenly: nothing is ever left alone in a row. */
  .feature-grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:18px; }
  .feature-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; min-width:0; }
  .fc-live{ grid-column:span 2; }
  .fc-wide{ grid-column:span 3; }
  /* Subgrid puts the three live cards on shared rows, so their answers line up whatever the titles
     do. A browser without subgrid keeps the plain stack above, which still reads correctly. */
  @supports (grid-template-rows: subgrid){
    .fc-live{ display:grid; grid-template-rows:subgrid; grid-row:span 6; row-gap:10px; align-content:start; }
  }
  .feature-card .fc-tag{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
  .feature-card h3{ font-size:1.22rem; line-height:1.28; }
  .feature-card .fc-desc{ font-size:.92rem; color:var(--ink-muted); }
  .fc-link{ align-self:flex-start; justify-self:start; margin-top:auto; padding-block:6px; font-weight:600; color:var(--accent); text-decoration:none; }
  .fc-link:hover{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; }

  /* the answer: quoted figure small and muted above, the real one large below, as in the hero */
  .feature-card .mini-out{ border-top:1px solid var(--line); padding-top:16px; margin-top:6px; }
  .mini-out .mo-label{ font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); }
  .mini-out .mo-from{ margin-top:8px; font-size:.98rem; font-weight:600; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
  .mini-out .mo-from s{ text-decoration-thickness:2px; text-decoration-color:var(--ink-decor); }
  .mini-out .mo-hero{ font-family:var(--font-display); font-size:clamp(1.9rem, 3.2vw, 2.35rem); font-weight:800; color:var(--reveal); line-height:1.08; margin-top:2px; letter-spacing:-.025em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .mini-out .mo-label + .mo-hero{ margin-top:8px; }
  .mini-out .mo-arr{ font-size:.55em; font-weight:700; color:var(--ink-muted); margin-right:.3em; vertical-align:.14em; }
  .mini-out .mo-line{ font-size:.9rem; margin-top:10px; color:var(--ink); }
  .mini-out .mo-note{ font-size:.8rem; color:var(--ink-muted); margin-top:6px; }
  .mini-out .mo-err{ font-size:.86rem; color:var(--warn-ink); }

  /* the control that reopens the inputs states what the answer was computed from. It is a line of
     text with a caret, not a grey bar, which read as a dropdown waiting to be filled in. */
  .mini-calc{ border-top:1px solid var(--line); }
  .mini-calc > summary{ cursor:pointer; list-style:none; min-height:44px; padding:10px 0; display:flex; align-items:center; gap:12px; }
  .mini-calc > summary::-webkit-details-marker{ display:none; }
  .mini-sum{ flex:1; min-width:0; font-size:.84rem; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
  .mini-edit{ flex-shrink:0; font-size:.88rem; font-weight:600; color:var(--accent); white-space:nowrap; }
  .mini-calc > summary:hover .mini-edit{ text-decoration:underline; text-underline-offset:3px; }
  .mini-calc > summary::after{ content:''; flex-shrink:0; width:7px; height:7px; margin-left:-4px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease; }
  .mini-calc[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
  .mini-body{ background:var(--bg-inset); border-radius:14px; padding:14px 14px 2px; margin-bottom:4px; }
  .mini-body .field input[type="text"], .mini-body .field input[type="number"]{ background:var(--bg-elevated); }
  .mini-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap:0 12px; }
  .mini-grid .field{ margin-bottom:12px; }

  @media (max-width:1024px){
    .feature-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .fc-live, .fc-wide{ grid-column:span 1; }
    .fc-live:nth-child(3){ grid-column:1 / -1; }
  }
  @media (max-width:640px){
    .feature-grid{ grid-template-columns:minmax(0, 1fr); }
    .fc-live:nth-child(3){ grid-column:auto; }
  }

  .extra-block{ margin-top:36px; }
  .extra-h{ font-size:clamp(1.25rem, 2.6vw, 1.6rem); }
  .extra-sub{ margin-top:8px; color:var(--ink-muted); font-size:.94rem; max-width:72ch; }
  .extra-foot{ margin-top:14px; font-size:.82rem; color:var(--ink-muted); max-width:78ch; }
  .fun-row{ margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap:12px; }
  .fun-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); min-width:0; }
  .fun-card .fn-big{ font-family:var(--font-display); font-size:1.45rem; font-weight:800; color:var(--accent); line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .fun-card .fn-text{ margin-top:6px; font-size:.88rem; color:var(--ink-muted); }

  .inst-grid{ margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:12px; }
  .inst-card{ text-align:left; background:var(--bg-elevated); border:1px solid var(--line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow); transition:border-color .16s ease, box-shadow .16s ease; min-width:0; }
  button.inst-card{ cursor:pointer; width:100%; }
  button.inst-card:hover{ border-color:var(--accent); }
  .inst-card[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow); }
  /* risk sits above the name as a label. Beside it, it squeezed "Reksa dana pasar uang" onto three lines */
  .inst-card .ic-top{ display:flex; flex-direction:column-reverse; align-items:flex-start; gap:8px; }
  /* Equity funds carry no number on purpose, so they are a note across the row rather than a fifth
     card left alone on a line of its own. */
  .inst-card.is-note{ grid-column:1 / -1; }
  @media (min-width:720px){
    .inst-card.is-note{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); grid-template-areas:"top sub" "rate facts"; gap:8px 28px; align-items:start; }
    .inst-card.is-note .ic-top{ grid-area:top; }
    .inst-card.is-note .ic-rate{ grid-area:rate; }
    .inst-card.is-note .ic-sub{ grid-area:sub; font-size:.86rem; }
    .inst-card.is-note .ic-facts{ grid-area:facts; margin-top:0; }
  }
  .inst-card .ic-name{ font-weight:700; font-size:1rem; }
  .inst-card .ic-rate{ font-size:.84rem; color:var(--ink-muted); }
  .inst-card .ic-result{ font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .inst-card[aria-pressed="true"] .ic-result{ color:var(--accent); }
  .inst-card .ic-sub{ font-size:.8rem; color:var(--ink-muted); }
  .inst-card .ic-facts{ list-style:none; display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--ink-muted); border-top:1px solid var(--line); padding-top:8px; margin-top:auto; }
  .inst-card .ic-chosen{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
  .risk-pill{ flex-shrink:0; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; }
  .risk-low{ background:var(--trust-soft); color:var(--trust-ink); }
  .risk-mid{ background:var(--warn-soft); color:var(--warn-ink); }
  .risk-high{ background:var(--reveal-soft); color:var(--reveal-ink); }
  .horizon-box{ margin-top:14px; background:var(--grad-panel); border:1px solid var(--accent-soft); border-radius:18px; padding:18px 20px; }
  .horizon-box p{ font-size:.95rem; }
  .horizon-box p + p{ margin-top:10px; }
  .horizon-box .hz-note{ font-size:.82rem; color:var(--ink-muted); }
  .milestones{ margin-top:14px; background:var(--bg-elevated); border:1px solid var(--line); border-radius:18px; padding:18px 20px 16px; box-shadow:var(--shadow); }
  .milestones:empty{ display:none; }
  .ms-title{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
  .ms-track{ position:relative; height:10px; border-radius:999px; background:var(--bg-inset); margin-top:16px; }
  .ms-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--accent); }
  /* four stops on the road, so an empty bar at 0% still shows where each quarter lands */
  .ms-tick{ position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -14px; border-radius:50%; background:var(--bg-elevated); border:2px solid var(--accent); }
  .ms-tick.is-hit{ background:var(--accent); }
  .ms-points{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:12px; }
  @media (min-width:481px){ .ms-point{ text-align:right; } }
  .ms-point .mp-pct{ font-weight:700; font-size:.92rem; }
  .ms-point .mp-when{ font-size:.8rem; color:var(--ink-muted); }
  @media (max-width:480px){ .ms-points{ grid-template-columns:1fr 1fr; } }

  .account-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; max-width:560px; margin:0 auto 24px; }
  .account-card .acct-lead{ font-size:1rem; margin-bottom:16px; overflow-wrap:anywhere; }
  .account-card .acct-note{ font-size:.88rem; color:var(--ink-muted); margin-bottom:18px; }
  .account-card .acct-sent{ margin-top:14px; color:var(--trust-ink); font-weight:600; }
  #acct-submit{ width:100%; justify-content:center; min-height:44px; }
  .acct-status{ display:none; margin-bottom:16px; font-size:.9rem; padding:12px 14px; border-radius:12px; }
  .acct-status.show{ display:block; }
  .acct-status.is-ok{ background:var(--trust-soft); color:var(--trust-ink); }
  .acct-status.is-warn{ background:var(--warn-soft); color:var(--warn-ink); }
  body[data-page="account"] .saves-bar{ max-width:560px; margin-inline:auto; }
  @media (max-width:560px){ .account-card{ padding:22px 18px; } }

  .footer-grid{ align-items:flex-start; }
  .footer-about{ max-width:520px; }
  .footer-links{ display:flex; gap:32px; flex-wrap:wrap; }
  .footer-links p.fl-title{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:4px; }
  .footer-links a{ display:block; font-size:.86rem; color:var(--ink-muted); text-decoration:none; padding-block:5px; }
  .footer-links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
  @media (max-width:880px){
    .footer-links a{ padding-block:11px; }
    .fc-link{ padding-block:12px; }
    .crumbs a{ display:inline-block; padding-block:10px; }
  }

  /* The hidden attribute must always win. Without this a class that sets display (flex, grid, block)
     silently overrides it, and "hidden" content shows. */
  [hidden]{ display:none !important; }

  /* ---------- "Berapa lama?" on the homepage ----------
     The one dark brand surface on the page, on purpose: it is the part people send to friends, so it
     should look like something worth sending. The answer still sits on white in the reveal colour,
     because that is what the reveal colour means everywhere else on the site. */
  #berapa-lama{ padding-top:0; }
  .fun-band{ background:var(--grad-brand); color:#fff; border-radius:28px; padding:36px 40px; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:28px 44px; align-items:center; box-shadow:var(--shadow-lg); }
  .fun-band .fb-eyebrow{ color:rgba(255,255,255,.9); }
  .fun-band h2{ color:#fff; font-size:clamp(1.6rem, 3.2vw, 2.35rem); line-height:1.14; margin-top:10px; }
  .fun-band .fb-sub{ color:rgba(255,255,255,.9); margin-top:12px; font-size:1rem; max-width:46ch; }
  .fb-fields{ margin-top:24px; display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap:0 12px; }
  .fun-band .field label{ color:#fff; }
  .fun-band .field input[type="text"]{ background:#fff; border-color:transparent; }
  .fun-band .field input[type="text"]:focus{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.45); }
  .fb-answer{ background:var(--bg-elevated); color:var(--ink); border-radius:20px; padding:24px 26px; box-shadow:var(--shadow); min-width:0; }
  .fb-challenge{ background:var(--accent-soft); color:var(--ink); border-radius:12px; padding:10px 14px; font-size:.9rem; font-weight:600; margin-bottom:14px; }
  .fb-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .fb-actions .btn{ min-height:44px; }
  .btn-ghost{ border:1px solid var(--line); color:var(--accent); background:var(--bg-elevated); }
  .btn-ghost:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .btn:disabled, .btn:disabled:hover{ opacity:.5; cursor:not-allowed; transform:none; }
  .fb-hint{ margin-top:10px; font-size:.8rem; color:var(--ink-muted); }
  .fb-copied{ margin-top:8px; font-size:.85rem; color:var(--trust-ink); display:none; }
  .fb-copied.show{ display:block; }
  .fb-copy-url{ width:100%; margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-inset); font-family:var(--font-mono); font-size:.8rem; color:var(--ink); }
  .fb-answer .goal-share-preview{ max-width:220px; }
  .fb-answer .fc-link{ display:inline-block; margin-top:12px; }
  @media (max-width:960px){ .fun-band{ grid-template-columns:minmax(0, 1fr); padding:28px 24px; } }
  @media (max-width:560px){
    .fun-band{ padding:24px 18px; border-radius:22px; }
    .fb-fields{ grid-template-columns:minmax(0, 1fr); }
    .fb-answer{ padding:20px 18px; }
    .fb-actions .btn{ flex:1 1 auto; justify-content:center; }
  }

  /* sharing a result is a real action, not a footnote, so it is solid rather than the dashed outline
     the secondary links use */
  .share-cta{ border-style:solid; background:var(--accent-soft); }
  .share-cta:hover{ background:rgba(31,78,95,.16); }

  /* ---------- feedback: which feature people want next ---------- */
  .feedback-card .fb-wants{ border:0; margin-top:12px; min-width:0; }
  .feedback-card .fb-wants legend{ font-size:.84rem; font-weight:600; color:var(--ink-muted); margin-bottom:8px; padding:0; }
  .fb-wants .chip{ font-family:var(--font-body); font-size:.86rem; }
  .wl-msg.is-warn{ color:var(--warn-ink); }

  /* ---------- keeping saved calculations in an account ---------- */
  .sync-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--accent-soft); border-radius:12px; padding:12px 14px; margin-bottom:12px; }
  .sync-row .sync-text{ min-width:0; }
  .sync-row .sync-label{ display:block; font-weight:600; font-size:.9rem; color:var(--ink); }
  .sync-row .sync-note{ display:block; font-size:.78rem; color:var(--ink-muted); margin-top:3px; line-height:1.45; }
  .sync-status{ font-size:.8rem; color:var(--trust-ink); margin:-4px 0 12px; }
  .sync-status.is-err{ color:var(--warn-ink); }
  .sync-prompt{ background:var(--accent-soft); border-radius:12px; padding:14px 16px; margin-bottom:12px; font-size:.88rem; line-height:1.5; }
  .sync-prompt .sp-actions{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:10px; }
  .btn-text{ font-weight:600; font-size:.88rem; color:var(--ink-muted); text-decoration:underline; text-underline-offset:3px; padding:10px 4px; min-height:44px; }
  #acct-sync{ margin:4px 0 16px; }
  .acct-data{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  .acct-data-title{ font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); }
  .acct-export{ font-weight:600; color:var(--accent); text-underline-offset:3px; padding-block:8px; }
  .acct-del{ font-size:.86rem; font-weight:600; color:var(--reveal-ink); border:1px solid var(--line); border-radius:999px; padding:10px 16px; min-height:44px; }
  .acct-del:hover{ border-color:var(--reveal); }
  .acct-del.armed{ background:var(--reveal); color:#fff; border-color:var(--reveal); }
  .acct-privacy{ margin-top:18px; font-size:.86rem; }
  .acct-privacy a{ color:var(--accent); text-underline-offset:3px; }

  /* ---------- privacy page ---------- */
  .prose{ max-width:760px; margin:0 auto; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px 40px; }
  .prose h2{ font-size:1.22rem; margin:30px 0 10px; }
  .prose p, .prose li{ font-size:.96rem; line-height:1.65; color:var(--ink); }
  .prose p + p{ margin-top:10px; }
  .prose ul{ padding-left:20px; margin-top:8px; }
  .prose li + li{ margin-top:6px; }
  .prose a{ color:var(--accent); text-underline-offset:3px; }
  .pv-summary{ background:var(--accent-soft); border-radius:14px; padding:16px 18px; }
  .pv-table-wrap{ overflow-x:auto; margin-top:10px; -webkit-overflow-scrolling:touch; }
  .prose table{ width:100%; min-width:560px; border-collapse:collapse; }
  .prose th, .prose td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.86rem; line-height:1.5; }
  .prose th{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); }
  .prose .pv-meta{ margin-top:26px; font-size:.84rem; color:var(--ink-muted); }
  @media (max-width:560px){ .prose{ padding:22px 18px; } }

  /* 44px floor for the new thumb targets, same rule as the mobile layer below */
  @media (max-width:880px){
    .acct-export{ padding-block:12px; }
    .fb-wants .chip{ min-height:44px; }
    .acct-privacy a{ display:inline-block; padding-block:12px; }
  }

  /* ============================================================================
     MOBILE WEB TREATMENT
     Not the desktop layout scaled down. Three deliberate differences:
     type gets larger, chrome gets smaller, and any control with more than two
     long options becomes a stacked list instead of a squeezed row.
     ============================================================================ */
  @media (max-width:880px){
    /* chrome yields so the content does not have to */
    .calc-wrap{ border-radius:20px; padding:6px; }
    .calc-form, .calc-result{ padding:20px 16px; }
    section{ padding-block:40px; }
    .container{ padding-inline:18px; }

    /* every label, helper and control label steps up. 12px on a phone is not a size, it is a dare */
    .field label{ font-size:.92rem; }
    .field-help{ font-size:.84rem; }
    .field-note{ font-size:.88rem; padding:12px 14px; }
    .toggle-row span{ font-size:.95rem; }
    .rr-label, .cmp-group-title, .pay-checklist .pc-title{ font-size:.76rem; }
    .rr-stat .k{ font-size:.8rem; }
    .rr-stat .v{ font-size:1.08rem; }
    .rr-bd-row{ font-size:.95rem; }
    .offer-card .field label{ font-size:.9rem; }
    .offer-card .field-help{ font-size:.82rem; }
    .cmp-fill{ font-size:.88rem; padding:12px 14px; }
    .clone-cta, .pdf-cta, .save-cta{ font-size:.95rem; padding:14px 16px; }
    .pdf-hint, .saves-note{ font-size:.84rem; }
    details.fees summary{ font-size:.95rem; padding:11px 0; }
    .save-item .si-actions button{ font-size:.85rem; padding:10px 15px; }
    .save-item .si-name{ font-size:1rem; }

    /* 44px is the floor for anything a thumb has to hit */
    .seg button{ min-height:44px; font-size:.92rem; padding:11px 12px; }
    .seg-sm button{ min-height:44px; font-size:.88rem; padding:11px 10px; }
    .tool-tab{ min-height:44px; font-size:.95rem; }
    .lang-toggle button{ min-height:44px; padding:11px 15px; font-size:.88rem; }
    .auth-widget > summary{ min-height:44px; display:flex; align-items:center; padding:11px 6px; }
    .auth-user button{ min-height:44px; display:inline-flex; align-items:center; }
    .pay-tier-row .pt-del{ width:40px; height:40px; }
    /* the knob stays 44px wide visually; the hit area quietly grows to meet the thumb */
    .switch::before{ content:''; position:absolute; inset:-10px -8px; border-radius:999px; }

    /* A three-option control with sentence-length labels cannot be a row on a phone. It is a
       choice list, so it becomes one: full width, one per line, each its own tap target. */
    .seg.seg-stack{ flex-direction:column; border-radius:14px; }
    .seg.seg-stack button{ width:100%; text-align:left; padding:13px 15px; border-bottom:1px solid var(--line); }
    .seg.seg-stack button:last-child{ border-bottom:none; }
    .seg-sm.seg-stack{ border-radius:12px; }

    /* the answer deserves more room than the form chrome around it */
    .rr-hero{ font-size:clamp(2.6rem, 12vw, 3.2rem); }
    .offer-ear{ font-size:2.1rem; }
  }

  @media (max-width:560px){
    .rr-stats{ grid-template-columns:1fr; }
    .save-item{ align-items:flex-start; }
    .save-item .si-actions{ width:100%; }
    .save-item .si-actions button{ flex:1; }
  }

  /* restated after the layer above, because both match on a phone and the narrower one should win */
  @media (max-width:430px){ .container{ padding-inline:14px; } }

  /* ------------------------------------------------------------------ phone layout
     Audited at 375-390px. Each rule here fixes something measured, not something
     assumed. */
  @media (max-width:560px){
    /* Five pills wrapping to three CENTRED rows left the edges at 79, 182 / 40, 209 /
       106: nothing lined up with anything, which is what read as untidy. A two-column
       grid gives every tab the same width and one shared pair of edges, and the fifth
       spans the row rather than sitting orphaned and centred. */
    .tool-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; justify-content:stretch; }
    .tool-tab{ width:100%; padding-inline:12px; text-align:center; }
    /* Only spans full width when it is ALSO odd-positioned, i.e. only when the total tab count is
       odd and would otherwise leave one tab stranded alone on the last row. Six tabs fill 2x3 evenly
       and must not trigger this; five tabs (or any future odd count) still need it. */
    .tool-tab:last-child:nth-child(odd){ grid-column:1 / -1; }

    /* 44px is the floor for anything a thumb has to hit. Every selector below was found
       by measuring the live page, not guessed: an earlier pass named .stepper, .link-btn
       and .pay-basis-table, none of which exist in this markup, so it fixed nothing. */
    .rr-assume button{ min-height:44px; }          /* was 21px */
    .wl-interests .chip{ min-height:44px; }        /* was 42px */
    .brand{ padding-block:10px; }                  /* logo tap area, was 24px */
    .amort-more{ min-height:44px; }                /* was 20px */
    .nav-right .btn{ min-height:44px; }            /* was 40px */
    #feedback a, .footer-meta a{ display:inline-block; padding-block:12px; }  /* was 16px */

    /* The switch is a graphic: stretching it to 44px would distort the control. The
       visual keeps its size and an invisible inset extends the hit area around it. */
    .toggle-row .switch{ position:relative; }
    .toggle-row .switch::after{ content:''; position:absolute; inset:-9px -8px; }

    /* The consent box was a 16px target sitting next to text, which is a miss waiting
       to happen. The whole label becomes the target instead. */
    .fb-consent{ min-height:44px; align-items:center; padding-block:4px; }
    .fb-consent input{ width:22px; height:22px; margin-top:0; }

    /* Uppercase labels at 10.9px are legible on a desktop at arm's length and not on a
       phone. The floor here is 12px, which is where the design system already put it. */
    .rr-label, .rr-stat .k, .offer-ear-label, .pay-readout .k,
    .pay-story .pst-eyebrow, .pay-checklist .pc-title, .assume-badge,
    .pay-alt-title, .roadmap-badge, .amort-legend span{ font-size:.75rem; }
    /* Matched to the specificity of the rules they override. Written as bare classes
       first, they lost to .dp-readout .dp-label and .pay-side .ps-label and silently
       changed nothing, which the re-measure caught. */
    .dp-readout .dp-label, .pay-side .ps-label{ font-size:.75rem; }
    /* The schedule header stays smaller on purpose. Every point added here widens a
       table that already scrolls sideways on a phone, so it is traded to 11.5px
       rather than up to 12. */
    .amort thead th{ font-size:.72rem; }

    /* The hero figure and its unit, kept in proportion once the column narrows. */
    .rr-hero{ letter-spacing:-.03em; }
    .rr-market{ font-size:.84rem; }
  }

  /* ============================================================================
     TAILORING LAYER (2026-09-15)
     The brief: a good friend who is also a professional. Long sleeves rolled up, a pressed shirt,
     tailored trousers, quiet shoes, one good watch on a good bracelet. Read into the page as:
     - Rolled sleeves: the working is on the table. Inputs sit in the open, the copy talks like a
       person, headings sit on the left where a person writes them, not centred like a poster.
     - Pressed shirt, tailored trousers: one grid, one spacing rhythm, three corner radii, hairlines
       instead of heavy boxes, white fields with a crisp edge, nothing that wraps sloppily.
     - Quiet shoes: no loud surfaces. The dark gradient band is gone; depth is a soft shadow and a
       1px line. Material over logo.
     - The watch: one instrument, the scale, with a minute track of ticks, used wherever a figure is
       best understood by where it sits. Readouts sit on their own faintly tinted face.
     - The scent: what you feel rather than see. A pressed state on every control, clear focus, one
       orchestrated moment on load, and nothing else moving.
     Colour is unchanged on purpose: warmth from the design, not from the palette.
     This layer sits last so it wins at equal specificity; its own media queries come with it.
     ============================================================================ */
  :root{
    --hair: rgba(37,51,60,.09);
    --hair-strong: rgba(37,51,60,.17);
    --tick: rgba(37,51,60,.45);
    --tick-soft: rgba(37,51,60,.2);
    --face: #F8FAFB;          /* the readout face: result panels, answers */
    --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
    --radius: 20px;
    --shadow: 0 1px 1px rgba(37,51,60,.03), 0 2px 6px -2px rgba(37,51,60,.06), 0 16px 32px -24px rgba(37,51,60,.22);
    --shadow-lg: 0 1px 1px rgba(37,51,60,.03), 0 4px 10px -4px rgba(37,51,60,.07), 0 28px 56px -32px rgba(37,51,60,.28);
  }
  body{ line-height:1.6; }
  h1,h2,h3{ font-weight:700; letter-spacing:-.022em; }
  /* a kicker names the subject in the voice of the page; it does not shout it in capitals */
  .eyebrow{ text-transform:none; letter-spacing:.005em; font-size:.9rem; font-weight:600; color:var(--accent); }
  section{ padding-block:60px; }

  /* ---------- header ---------- */
  .nav{ border-bottom-color:var(--hair); }
  .nav .container{ height:68px; }
  .nav-links{ gap:2px; font-size:.92rem; font-weight:500; }
  .nav-links a{ position:relative; padding:9px 12px; border-radius:var(--r-sm); color:var(--ink-muted); transition:color .15s ease, background .15s ease; }
  .nav-links a:hover{ color:var(--ink); background:rgba(37,51,60,.045); }
  .nav-links a[aria-current="page"]{ color:var(--ink); font-weight:600; }
  /* the current page is stitched, not filled */
  .nav-links a[aria-current="page"]::after{ content:''; position:absolute; left:12px; right:12px; bottom:1px; height:2px; border-radius:2px; background:var(--accent); }
  .lang-toggle{ border-color:var(--hair-strong); border-radius:var(--r-sm); }
  .lang-toggle button{ padding:6px 11px; }

  /* ---------- buttons ---------- */
  .btn{ border-radius:12px; padding:12px 20px; letter-spacing:-.003em; }
  .btn-lg{ padding:15px 24px; font-size:1rem; }
  .btn-primary:active{ transform:translateY(1px); box-shadow:inset 0 1px 3px rgba(0,0,0,.22); }
  .btn-ghost{ background:var(--bg-elevated); color:var(--ink); border:1px solid var(--hair-strong); box-shadow:0 1px 1px rgba(37,51,60,.04); }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); background:var(--bg-elevated); }
  .btn-ghost:active{ transform:translateY(1px); }

  /* ---------- fields: white, a crisp edge, and a clear focus ---------- */
  .field label{ color:var(--ink); }
  .field input[type="text"], .field input[type="number"], .field input[type="email"], .field select{
    background:var(--bg-elevated); border:1px solid var(--hair-strong); border-radius:12px; box-shadow:inset 0 1px 2px rgba(37,51,60,.04);
  }
  .field input[type="text"]:hover, .field input[type="number"]:hover, .field input[type="email"]:hover, .field select:hover{ border-color:rgba(37,51,60,.3); }
  .field input[type="text"]:focus, .field input[type="number"]:focus, .field input[type="email"]:focus, .field select:focus{
    border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft);
  }
  .field-note{ background:var(--face); border:1px solid var(--hair); }
  .chip{ font-family:var(--font-body); }

  /* segmented controls: the chosen option is raised on the rail, like a pressed key */
  .seg{ border-color:var(--hair-strong); border-radius:12px; background:var(--bg-inset); padding:3px; gap:3px; }
  .seg button{ border-radius:9px; color:var(--ink-muted); }
  .seg button:hover{ color:var(--ink); }
  .seg button[aria-pressed="true"]{ background:var(--bg-elevated); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(37,51,60,.14), 0 0 0 1px var(--hair); }
  .goal-flavor button{ background:var(--bg-elevated); border-color:var(--hair-strong); border-radius:12px; }
  .goal-flavor button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }

  /* ---------- hero: the thesis on the left, its measurement on the right ---------- */
  .hero{ text-align:left; padding-top:72px; padding-bottom:48px; }
  .hero-grid{ display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); gap:56px; align-items:center; }
  .hero h1{ font-size:clamp(2.3rem, 4.6vw, 3.7rem); line-height:1.06; max-width:16ch; margin:14px 0 0; letter-spacing:-.03em; }
  .hero .sub{ margin:20px 0 0; max-width:52ch; font-size:1.08rem; }
  .hero .cta-row{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:12px; margin-top:30px; }
  .hero .micro{ display:block; margin-top:14px; font-size:.86rem; color:var(--ink-muted); }
  .measure{ margin:0; background:var(--bg-elevated); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:24px 28px 22px; }
  .measure-cap{ font-size:.84rem; font-weight:600; color:var(--ink-muted); }
  .measure .scale{ margin-top:16px; }
  .measure-note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--hair); font-size:.92rem; color:var(--ink); }
  @media (max-width:940px){
    .hero-grid{ grid-template-columns:minmax(0, 1fr); gap:32px; }
    .hero{ padding-top:44px; }
  }

  /* ---------- the scale: a minute track, marks placed by the numbers ---------- */
  .scale{ position:relative; }
  .sc-row{ position:relative; height:54px; }
  .sc-track{ position:relative; height:16px; border-radius:3px; background:var(--bg-inset); box-shadow:inset 0 0 0 1px var(--hair); }
  .sc-tick{ position:absolute; bottom:0; width:1px; height:5px; margin-left:-.5px; background:var(--tick-soft); }
  .sc-tick.is-major{ height:10px; background:var(--tick); }
  .sc-zone, .sc-band{ position:absolute; top:0; bottom:0; }
  .sc-zone.is-safe{ background:var(--trust-soft); }
  .sc-zone.is-watch{ background:var(--warn-soft); }
  .sc-zone.is-heavy{ background:var(--reveal-soft); }
  .sc-band{ background:var(--reveal-soft); }
  .sc-pin{ position:absolute; top:-1px; bottom:-1px; width:2px; margin-left:-1px; border-radius:1px; background:currentColor; }
  .sc-pin.is-below{ bottom:-27px; }
  .sc-nums{ position:relative; height:26px; }
  .sc-num{ position:absolute; top:8px; transform:translateX(-50%); font-family:var(--font-mono); font-size:.72rem; line-height:1; color:var(--ink-muted); white-space:nowrap; }
  .sc-num.is-first{ transform:none; }
  .sc-num.is-last{ transform:translateX(-100%); }
  .sc-mark{ position:absolute; bottom:0; display:flex; flex-direction:column; padding:0 0 6px 10px; margin-left:-1px; border-left:2px solid currentColor; white-space:nowrap; line-height:1.15; }
  .sc-mark.is-end{ transform:translateX(-100%); align-items:flex-end; border-left:0; border-right:2px solid currentColor; padding:0 10px 6px 0; margin-left:1px; }
  .sc-below .sc-mark{ bottom:auto; top:0; padding-top:6px; padding-bottom:0; }
  .sc-k{ font-size:.74rem; font-weight:600; color:var(--ink-muted); letter-spacing:.01em; }
  .sc-v{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
  .sc-v s{ text-decoration-thickness:2px; text-decoration-color:var(--ink-decor); }
  .sc-mark.is-real, .sc-pin.is-real{ color:var(--reveal); }
  .sc-mark.is-quoted, .sc-pin.is-quoted{ color:var(--ink-muted); }
  .sc-mark.is-safe, .sc-pin.is-safe, .sc-zl.is-safe{ color:var(--trust-ink); }
  .sc-mark.is-watch, .sc-pin.is-watch, .sc-zl.is-watch{ color:var(--warn-ink); }
  .sc-mark.is-heavy, .sc-pin.is-heavy, .sc-zl.is-heavy{ color:var(--reveal-ink); }
  .sc-zls{ position:relative; height:20px; }
  .sc-zl{ position:absolute; top:0; transform:translateX(-50%); font-size:.74rem; font-weight:600; white-space:nowrap; }
  .measure .sc-row.sc-above{ height:66px; }
  .measure .sc-mark.is-real .sc-v{ font-size:2.05rem; }
  /* the one orchestrated moment: on load the real rate slides out from under the quoted one */
  .sc-mark.is-real, .sc-pin.is-real{ transition:left 1.1s cubic-bezier(.22,.8,.24,1) .35s; }
  .sc-band{ transition:width 1.1s cubic-bezier(.22,.8,.24,1) .35s; }
  .is-start .sc-mark.is-real, .is-start .sc-pin.is-real{ left:var(--from) !important; }
  .is-start .sc-band{ width:0 !important; }

  /* ---------- section heads sit left, like a person writing ---------- */
  .section-head{ text-align:left; margin:0 0 30px; max-width:640px; }
  .section-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.4rem); line-height:1.12; margin-top:8px; letter-spacing:-.026em; }
  .section-head p{ margin-top:12px; font-size:1.02rem; }
  .group-title{ display:flex; align-items:center; gap:14px; margin:0 0 12px; font-size:.84rem; font-weight:600; color:var(--ink-muted); }
  .group-title::after{ content:''; flex:1; height:1px; background:var(--hair); }
  .feature-grid + .group-title{ margin-top:36px; }

  /* ---------- homepage calculators: inputs in the open, a readout under them ---------- */
  .feature-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
  .feature-card{ border-color:var(--hair); border-radius:var(--r-lg); padding:22px 22px 16px; gap:12px; }
  .fc-live, .fg-more .feature-card{ grid-column:auto; }
  @supports (grid-template-rows: subgrid){
    .fc-live{ grid-row:span 5; row-gap:12px; }
  }
  .feature-card .fc-tag{ font-size:.8rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--accent); }
  .feature-card h3{ font-size:1.14rem; line-height:1.3; letter-spacing:-.015em; }
  .mini-fields{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:0 10px; align-items:end; }
  .mini-fields .field{ margin-bottom:10px; min-width:0; }
  .mini-fields .field label{ font-size:.78rem; margin-bottom:6px; }
  .mini-fields .field input[type="text"], .mini-fields .field input[type="number"]{ padding-block:10px; font-size:.95rem; }
  .fs-6{ grid-column:span 6; } .fs-4{ grid-column:span 4; } .fs-3{ grid-column:span 3; } .fs-2{ grid-column:span 2; }
  .feature-card .mini-out{ margin-top:0; padding:14px 16px 13px; background:var(--face); border:1px solid var(--hair); border-radius:var(--r-md); }
  .fc-link{ font-size:.92rem; }
  @media (max-width:1024px){
    .feature-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .fc-live:nth-child(3), .fg-more .feature-card:nth-child(3){ grid-column:1 / -1; }
  }
  @media (max-width:680px){
    .feature-grid{ grid-template-columns:minmax(0, 1fr); }
    .fc-live:nth-child(3), .fg-more .feature-card:nth-child(3){ grid-column:auto; }
  }

  /* ---------- the savings hook ---------- */
  #berapa-lama{ padding-top:60px; }
  .goal-board{ display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr); background:var(--bg-elevated); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
  .gb-form{ padding:26px 28px 14px; min-width:0; }
  .gb-answer{ padding:26px 28px; background:var(--face); border-left:1px solid var(--hair); display:flex; flex-direction:column; min-width:0; }
  .gb-label{ font-size:.84rem; font-weight:600; color:var(--ink); margin-bottom:10px; }
  .cat-chips{ gap:8px; margin-bottom:20px; }
  .cat-chip{ font-size:.86rem; font-weight:500; border-radius:999px; padding:8px 14px; background:var(--bg-elevated); border-color:var(--hair-strong); color:var(--ink); }
  .cat-chip:not([aria-pressed="true"]):hover{ border-color:var(--accent); }
  .cat-chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .gb-fields{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 12px; }
  .gb-fields .gf-name{ grid-column:1 / -1; }
  #mg-inst button{ font-size:.86rem; }
  #mg-out .mo-hero{ color:var(--accent); font-size:clamp(2.2rem, 4vw, 2.8rem); }
  .levers:empty{ display:none; }
  .levers{ margin-top:18px; padding-top:14px; border-top:1px solid var(--hair); }
  .lv-title{ font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .lv-list{ list-style:none; }
  .lv-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; border-bottom:1px dashed var(--hair-strong); font-size:.9rem; }
  .lv-list li:last-child{ border-bottom:0; }
  .lv-k{ color:var(--ink-muted); }
  .lv-v{ font-weight:700; color:var(--trust-ink); white-space:nowrap; }
  .gb-answer .fb-actions{ margin-top:18px; }
  .gb-answer .fc-link{ display:inline-block; margin-top:14px; }
  .ladder{ margin-top:18px; background:var(--bg-elevated); border:1px solid var(--hair); border-radius:var(--r-lg); padding:22px 24px 18px; box-shadow:var(--shadow); }
  .ladder-title{ font-size:1rem; font-weight:600; }
  .ladder-list{ list-style:none; margin-top:10px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:32px; }
  .ld-row{ width:100%; min-height:48px; display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .95fr) minmax(0, 1fr) minmax(8.5ch, auto); align-items:center; gap:12px; padding:10px 10px; border-bottom:1px solid var(--hair); border-radius:8px; text-align:left; transition:background .15s ease; }
  .ld-row:hover{ background:rgba(37,51,60,.035); }
  .ld-row[aria-pressed="true"]{ background:var(--accent-soft); }
  .ld-name{ font-weight:600; font-size:.92rem; }
  .ld-price{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-muted); white-space:nowrap; }
  .ld-bar{ display:block; height:6px; border-radius:3px; background:var(--bg-inset); overflow:hidden; }
  .ld-bar i{ display:block; height:100%; border-radius:3px; background:var(--accent); transition:width .35s ease; }
  .ld-time{ font-weight:700; font-size:.9rem; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .ladder-foot{ margin-top:12px; font-size:.8rem; color:var(--ink-muted); }
  @media (max-width:960px){
    .goal-board{ grid-template-columns:minmax(0, 1fr); }
    .gb-answer{ border-left:0; border-top:1px solid var(--hair); }
    .ladder-list{ grid-template-columns:minmax(0, 1fr); }
  }
  @media (max-width:560px){
    .gb-form, .gb-answer{ padding:20px 18px; }
    .gb-fields{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ladder{ padding:18px 16px 14px; }
    .ld-row{ grid-template-columns:minmax(0, 1fr) auto; row-gap:6px; }
    .ld-name{ grid-column:1; grid-row:1; }
    .ld-time{ grid-column:2; grid-row:1; }
    .ld-price{ grid-column:1; grid-row:2; }
    .ld-bar{ grid-column:2; grid-row:2; width:96px; justify-self:end; }
  }

  /* ---------- examples, explainer, roadmap, feedback: same cloth ---------- */
  .ex-card{ border-color:var(--hair); }
  .ex-card:hover{ transform:none; box-shadow:var(--shadow-lg); }
  .ex-card .tag{ text-transform:none; letter-spacing:.01em; font-size:.82rem; color:var(--accent); }
  .explainer-card, .feedback-card, .prose{ border-color:var(--hair); }
  .explainer-visual{ background:var(--face); border:1px solid var(--hair); }
  .roadmap-card{ background:var(--bg-elevated); border-color:var(--hair); border-radius:var(--r-lg); }
  .roadmap-badge{ background:var(--accent-soft); color:var(--accent); }
  #feedback .section-head, #masalah .section-head, #penjelasan .section-head{ max-width:680px; }

  /* ---------- tool pages: a compact head, then the calculator with its tabs ---------- */
  .page-head{ text-align:left; padding-top:36px; }
  .page-head h1{ margin:10px 0 0; max-width:26ch; font-size:clamp(1.8rem, 3.8vw, 2.6rem); letter-spacing:-.028em; }
  .page-head .sub{ margin:12px 0 0; max-width:64ch; }
  .crumbs{ justify-content:flex-start; }
  .tool-page{ padding-top:24px; }
  .tool-tabs{ justify-content:flex-start; gap:3px; padding:4px; width:fit-content; max-width:100%; background:var(--bg-inset); border:1px solid var(--hair); border-radius:var(--r-md); margin-bottom:22px; }
  .tool-tab{ border:0; background:transparent; border-radius:10px; padding:10px 16px; font-size:.9rem; color:var(--ink-muted); }
  .tool-tab:hover{ color:var(--ink); background:rgba(255,255,255,.65); }
  .tool-tab[aria-current="page"], .tool-tab[aria-current="page"]:hover{ background:var(--bg-elevated); color:var(--ink); border-color:transparent; box-shadow:0 1px 2px rgba(37,51,60,.12), 0 0 0 1px var(--hair); }
  .saves-bar{ margin-inline:0; border-color:var(--hair); border-radius:var(--r-md); }
  .calc-wrap{ border-color:var(--hair); border-radius:var(--r-lg); padding:6px; }
  .calc-form{ border-right-color:var(--hair); }
  /* the result is a readout, so it sits on its own face */
  .calc-result{ background:var(--face); border-radius:15px; }
  .calc-result .rr-stat{ background:var(--bg-elevated); border-color:var(--hair); }
  .rr-trust{ padding-top:14px; margin-top:auto; border-top:1px solid var(--hair); font-size:.8rem; color:var(--ink-muted); }
  .rr-divider::before, .rr-divider::after{ background:var(--hair-strong); }
  .clone-cta{ border:1px solid var(--hair-strong); background:var(--bg-elevated); border-radius:12px; }
  .clone-cta:hover{ border-color:var(--accent); background:var(--bg-elevated); }
  .share-cta{ background:var(--accent-soft); border-color:transparent; }
  .inst-card, .fun-card, .milestones, .offer-card{ border-color:var(--hair); }
  @media (max-width:880px){
    .calc-form{ border-bottom-color:var(--hair); }
    section{ padding-block:44px; }
    #berapa-lama{ padding-top:44px; }
  }
  @media (max-width:560px){
    .tool-tabs{ width:100%; }
    .tool-tab{ background:transparent; }
  }

  /* ---------- savings page: pick the product, then its numbers ---------- */
  .inst-pick{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .goal-rate-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 12px; margin-top:4px; }
  .goal-rate-reset{ display:block; margin-top:2px; padding-inline:0; color:var(--accent); }
  @media (max-width:480px){
    .inst-pick{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .inst-pick button:last-child:nth-child(odd){ grid-column:1 / -1; }
  }

  /* ---------- atur utang ---------- */
  [data-panel="debt"] .cmp-group-title{ margin-top:24px; }
  .debt-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
  .debt-row{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:0 10px; align-items:end; padding:12px 12px 2px; background:var(--face); border:1px solid var(--hair); border-radius:var(--r-md); }
  .debt-row .field{ margin-bottom:10px; min-width:0; }
  .debt-row .dr-kind{ grid-column:span 4; }
  .debt-row .field:not(.dr-kind){ grid-column:span 2; }
  .debt-row .fl{ display:block; font-size:.78rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
  .debt-row .prefix-wrap, .debt-row .suffix-wrap{ display:block; }
  .debt-row .field input[type="text"]{ padding-block:10px; font-size:.95rem; }
  .debt-row select{ padding-block:10px; }
  .dr-del{ grid-column:span 2; justify-self:end; align-self:center; margin-bottom:10px; min-height:40px; padding:8px 12px; border-radius:10px; font-size:.84rem; font-weight:600; color:var(--ink-muted); }
  .dr-del:hover{ color:var(--reveal-ink); background:var(--reveal-soft); }
  .btn-add{ display:block; width:100%; min-height:46px; margin:2px 0 10px; padding:11px 16px; border:1px solid var(--hair-strong); border-radius:12px; background:var(--bg-elevated); color:var(--accent); font-weight:600; font-size:.9rem; }
  .btn-add:hover{ border-color:var(--accent); }
  .debt-hero{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-top:8px; }
  .debt-hero .rr-hero{ margin-top:0; }
  .rr-hero.is-safe{ color:var(--trust-ink); }
  .rr-hero.is-watch{ color:var(--warn-ink); }
  .rr-hero.is-heavy{ color:var(--reveal); }
  .debt-status{ font-size:.8rem; font-weight:700; padding:4px 11px; border-radius:999px; }
  .debt-status.is-safe{ background:var(--trust-soft); color:var(--trust-ink); }
  .debt-status.is-watch{ background:var(--warn-soft); color:var(--warn-ink); }
  .debt-status.is-heavy{ background:var(--reveal-soft); color:var(--reveal-ink); }
  .debt-scale{ margin-top:12px; }
  .debt-warn p + p{ margin-top:8px; }
  .rr-stat .v.is-neg{ color:var(--reveal-ink); }
  .debt-split{ margin-top:20px; }
  .ds-title{ font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
  .ds-bar{ position:relative; display:flex; height:14px; border-radius:4px; overflow:hidden; background:var(--bg-inset); }
  .ds-seg{ height:100%; }
  .ds-seg.is-pay, .ds-legend i.is-pay{ background:var(--accent); }
  .ds-seg.is-spend, .ds-legend i.is-spend{ background:var(--ink-decor); }
  .ds-seg.is-left, .ds-legend i.is-left{ background:var(--trust); }
  .ds-legend i.is-short{ background:var(--reveal); }
  .ds-income{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--ink); }
  .ds-legend{ list-style:none; margin-top:10px; display:grid; gap:4px; }
  .ds-legend li{ display:grid; grid-template-columns:12px minmax(0, 1fr) auto 4ch; align-items:center; gap:10px; font-size:.86rem; }
  .ds-legend i{ width:10px; height:10px; border-radius:2px; }
  .ds-legend strong{ font-family:var(--font-mono); font-weight:500; font-size:.84rem; }
  .ds-legend em{ font-style:normal; text-align:right; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
  .debt-threshold{ margin-top:14px; }
  .debt-plan{ margin-top:14px; background:var(--bg-elevated); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:22px 24px; }
  .dp-empty{ font-size:.95rem; color:var(--ink-muted); }
  .dp-verdict{ font-size:1.02rem; line-height:1.6; max-width:72ch; }
  .dp-sub{ margin-top:18px; font-size:.82rem; font-weight:700; color:var(--ink-muted); }
  /* a real sequence, so it is numbered */
  .dp-order{ list-style:none; margin-top:6px; counter-reset:dpo; }
  .dp-order li{ counter-increment:dpo; display:grid; grid-template-columns:26px minmax(0, 1fr) auto; align-items:baseline; gap:10px; padding:10px 0; border-bottom:1px solid var(--hair); }
  .dp-order li::before{ content:counter(dpo); font-family:var(--font-mono); font-weight:600; color:var(--accent); }
  .dpo-name{ font-weight:600; }
  .dpo-name em{ font-style:normal; font-weight:500; font-size:.86rem; color:var(--ink-muted); margin-left:4px; }
  .dpo-when{ font-size:.86rem; color:var(--ink-muted); text-align:right; }
  .dp-table-wrap{ margin-top:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .dp-table{ width:100%; min-width:480px; border-collapse:collapse; }
  .dp-table th, .dp-table td{ padding:10px 12px; text-align:right; border-bottom:1px solid var(--hair); font-size:.9rem; white-space:nowrap; }
  .dp-table thead th{ font-size:.78rem; font-weight:700; color:var(--ink-muted); white-space:normal; }
  .dp-table th:first-child{ text-align:left; }
  .dp-table tbody th{ font-weight:600; color:var(--ink-muted); }
  .dp-table .is-best{ background:var(--accent-soft); color:var(--ink); font-weight:700; }
  .dp-note{ margin-top:12px; font-size:.86rem; color:var(--ink-muted); max-width:78ch; }
  .steps{ list-style:none; margin-top:14px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .steps li{ background:var(--bg-elevated); border:1px solid var(--hair); border-radius:var(--r-md); padding:16px 18px; font-size:.93rem; }
  .steps a{ display:inline-block; margin-top:6px; padding-block:6px; font-weight:600; color:var(--accent); text-decoration:none; }
  .steps a:hover{ text-decoration:underline; text-underline-offset:3px; }
  @media (max-width:680px){ .steps{ grid-template-columns:minmax(0, 1fr); } }
  @media (max-width:560px){
    .debt-row .field:not(.dr-kind){ grid-column:span 3; }
    .debt-plan{ padding:18px 16px; }
  }

  /* ---------- footer ---------- */
  footer{ border-top-color:var(--hair); padding-block:48px; }
  .footer-brand{ display:inline-block; margin-bottom:12px; }
  .footer-brand img{ height:26px; width:auto; }
  .footer-meta-line{ margin-top:14px; }

  /* ---------- phone header: the menu becomes a row you can swipe ---------- */
  @media (max-width:860px){
    .nav .container{ height:auto; flex-wrap:wrap; padding-top:8px; row-gap:0; }
    .brand{ padding-block:10px; }
    .nav-links{ display:flex; order:3; width:calc(100% + 16px); margin-inline:-8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .nav-links::-webkit-scrollbar{ display:none; }
    .nav-links a{ flex-shrink:0; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
    .nav-links a[aria-current="page"]::after{ bottom:5px; }
  }
  @media (max-width:560px){
    .nav{ position:relative; }
    .hero .cta-row .btn{ flex:1 1 auto; justify-content:center; }
    .measure{ padding:20px 18px 18px; }
    .seg.seg-stack button{ border-bottom:0; }
    #mg-inst.seg-stack{ display:grid; grid-template-columns:1fr 1fr; }
    #mg-inst.seg-stack button{ text-align:center; }
  }

  /* ============================================================================
     ROUND 9 (2026-09-15): taxonomy and next steps
     ============================================================================ */
  /* The credit strip says what each entry is. The types of credit are one choice among three, so they sit
     on one rail; the tools work across every type, so they stand apart as buttons with their own mark. */
  .tool-tabs{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 22px; width:auto; max-width:100%; padding:0; background:none; border:0; border-radius:0; }
  .ts-group{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .ts-label{ font-size:.76rem; font-weight:600; color:var(--ink-muted); padding-left:2px; }
  .ts-rail{ display:flex; gap:3px; padding:4px; background:var(--bg-inset); border:1px solid var(--hair); border-radius:var(--r-md); }
  .ts-tool .ts-rail{ padding:0; gap:8px; background:none; border:0; }
  .tool-tab svg{ width:16px; height:16px; }
  .tool-tab.is-tool{ gap:8px; padding:12px 15px; border:1px solid var(--hair-strong); border-radius:12px; background:var(--bg-elevated); color:var(--ink); }
  .tool-tab.is-tool svg{ color:var(--accent); }
  .tool-tab.is-tool:hover{ border-color:var(--accent); background:var(--bg-elevated); }
  .tool-tab.is-tool[aria-current="page"], .tool-tab.is-tool[aria-current="page"]:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); box-shadow:none; }
  @media (max-width:560px){
    .tool-tabs{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
    .ts-rail{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .ts-tool .ts-rail{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ts-rail .tool-tab:last-child:nth-child(odd){ grid-column:auto; }
    .ts-rail .tool-tab{ padding-inline:8px; }
  }

  /* the way on to the full tool is an action, so it looks like one */
  .fc-cta{ display:flex; align-items:center; gap:12px; margin-top:auto; align-self:stretch; justify-self:stretch; min-height:46px; padding:12px 16px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:.94rem; line-height:1.35; text-decoration:none; transition:background .15s ease, color .15s ease; }
  .fc-cta:hover{ background:var(--accent); color:#fff; }
  .fc-cta:active{ transform:translateY(1px); }
  .gb-answer .fc-cta{ margin-top:16px; }
  .fg-two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  @media (max-width:680px){ .fg-two{ grid-template-columns:minmax(0, 1fr); } }

  .gb-fields .gf-mode{ grid-column:1 / -1; }
  .inline-link{ display:inline-block; margin-top:4px; padding-block:8px; font-size:.86rem; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
  .inline-link:hover{ color:var(--accent-strong); }
  .mo-per{ font-size:.42em; font-weight:700; letter-spacing:0; margin-left:.12em; }
  /* "Lainnya" is drawn open-ended until chosen: a blank to fill in, not one more preset */
  .cat-chip.is-other{ border-style:dashed; }
  .cat-chip.is-other[aria-pressed="true"]{ border-style:solid; }
  .goal-cats{ margin-bottom:4px; }
  .plan-next{ margin-top:18px; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:16px 28px; background:var(--bg-elevated); border:1px solid var(--hair); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--shadow); }
  .plan-next .fc-tag{ font-size:.8rem; font-weight:700; color:var(--accent); }
  .plan-next h3{ font-size:1.14rem; line-height:1.3; margin-top:4px; }
  .plan-next .fc-desc{ margin-top:6px; font-size:.92rem; color:var(--ink-muted); max-width:62ch; }
  .plan-next .fc-cta{ margin-top:0; white-space:nowrap; }
  @media (max-width:680px){ .plan-next{ grid-template-columns:minmax(0, 1fr); } .plan-next .fc-cta{ white-space:normal; } }
  .carry-note{ margin:16px 0 0; padding:10px 14px; border-radius:12px; background:var(--trust-soft); color:var(--trust-ink); font-size:.86rem; }

  /* ============================================================================
     BRAND (2026-09-16): the promise on the homepage, the trust section, the About page
     ============================================================================ */
  /* The old headline now sits in the measured card as its own title: the promise leads, the proof follows. */
  .measure figcaption{ display:block; }
  .measure-title{ display:block; font-family:var(--font-display); font-size:1.32rem; font-weight:700; line-height:1.25; letter-spacing:-.02em; color:var(--ink); }
  .measure-title .quoted{ color:var(--ink-muted); text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--ink-decor); white-space:nowrap; }
  .measure-title .reveal{ color:var(--reveal); white-space:nowrap; }
  .measure-cap{ display:block; margin-top:6px; }
  .footer-tagline{ margin:-4px 0 10px; font-weight:700; color:var(--ink) !important; font-size:.9rem !important; }

  /* values as a ledger: one line each, the name on the left and what it means on the right */
  .pledges{ background:var(--bg-elevated); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:4px 26px; }
  .pledges.is-flat{ background:none; border:0; box-shadow:none; padding:0; }
  .pledge{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.8fr); gap:4px 32px; padding:18px 0; border-bottom:1px solid var(--hair); }
  .pledge:last-child{ border-bottom:0; }
  .pledges.is-flat .pledge:first-child{ padding-top:0; }
  .pledge h3{ font-size:1.02rem; line-height:1.35; letter-spacing:-.01em; }
  .pledge p{ font-size:.95rem; color:var(--ink-muted); }
  .pledge .pl-no{ grid-column:2; font-size:.86rem; }
  .pledge-cta{ display:inline-flex; margin-top:16px; }
  @media (max-width:680px){
    .pledges{ padding:4px 18px; }
    .pledge{ grid-template-columns:minmax(0, 1fr); }
    .pledge .pl-no{ grid-column:1; }
  }

  /* the About page: a heading column and a reading column, divided by hairlines */
  .about{ max-width:1000px; }
  .ab-block{ display:grid; grid-template-columns:minmax(0, .75fr) minmax(0, 2fr); gap:12px 44px; padding:34px 0; border-top:1px solid var(--hair); }
  .ab-block:first-child{ border-top:0; padding-top:6px; }
  .ab-block h2{ font-size:1.18rem; letter-spacing:-.018em; line-height:1.3; }
  .ab-body p{ font-size:1rem; line-height:1.7; }
  .ab-body p + p{ margin-top:12px; }
  .ab-body a:not(.fc-cta){ color:var(--accent); text-underline-offset:3px; }
  .ab-body .ab-lead{ font-size:1.24rem; font-weight:600; line-height:1.45; color:var(--ink); }
  .ab-body .ab-quote{ margin-top:20px; padding-left:16px; border-left:3px solid var(--accent); font-weight:600; font-size:1.06rem; color:var(--ink); }
  .ab-body .ab-vision{ font-family:var(--font-display); font-size:clamp(1.3rem, 2.6vw, 1.7rem); font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--ink); }
  /* a real sequence in time, so it is drawn as one: now, next, later */
  .ab-path{ list-style:none; margin-top:22px; border-left:2px solid var(--hair-strong); margin-left:6px; }
  .ab-path li{ position:relative; display:grid; gap:2px; padding:0 0 18px 22px; }
  .ab-path li:last-child{ padding-bottom:0; }
  .ab-path li::before{ content:''; position:absolute; left:-8px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); }
  .ab-path li:first-child::before{ background:var(--accent); }
  .ap-when{ font-size:.82rem; font-weight:700; color:var(--accent); }
  .ap-what{ font-size:.97rem; }
  .never{ list-style:none; }
  .never li{ position:relative; padding:12px 0 12px 32px; border-bottom:1px solid var(--hair); font-size:.98rem; }
  .never li:first-child{ padding-top:0; }
  .never li:first-child::before, .never li:first-child::after{ top:calc(50% - 6px); }
  .never li:last-child{ border-bottom:0; }
  /* a "no" sign drawn in the reveal colour: the one colour that marks something you should notice */
  .never li::before{ content:''; position:absolute; left:2px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%; border:2px solid var(--reveal); box-sizing:border-box; }
  .never li::after{ content:''; position:absolute; left:4px; top:50%; width:12px; height:2px; margin-top:-1px; background:var(--reveal); transform:rotate(-45deg); }
  .ab-body .ab-cta{ margin-top:18px; }
  .ab-cta .fc-cta{ display:inline-flex; }
  @media (max-width:760px){ .ab-block{ grid-template-columns:minmax(0, 1fr); padding:26px 0; } }