/* ════════ SHARED STYLES — rtoformsindia.com ════════
   Extracted from index.html's original inline <style> block so every page
   (the root index.html, and each task page under /task-name/index.html —
   see vehicle-transfer/index.html for the first one) can share one
   stylesheet via <link rel="stylesheet" href="/style.css"> instead of
   duplicating ~400 lines of CSS per page. Absolute path so it resolves
   correctly regardless of which subfolder loads it. Rules that target an
   id/class not present on a given page are simply no-ops there — safe to
   share the whole file everywhere. */
:root{
  --ink:#142850;        /* deep navy — official ink */
  --ink-2:#1d3a6e;
  --paper:#FAF8F3;      /* document paper */
  --paper-2:#F1EDE3;
  --stamp:#D6481F;      /* rubber stamp red-orange */
  --stamp-soft:#FBEAE3;
  --approve:#1A7A4A;    /* approved green */
  --approve-soft:#E5F3EC;
  --amber:#BA7517;      /* AI auto-filled, NOT yet reviewed — "please check this" */
  --amber-soft:#FFF4E0;
  --line:#D8D2C4;       /* form rule lines */
  --line-soft:#EAE5D9;  /* very light card border — catalog grid */
  --txt:#1C2434;
  --txt-2:#5B6478;
  --txt-3:#9AA1B2;
  --white:#FFFFFF;

  /* landing page catalogue — solid category-tile colour, white glyph on
     top (iLovePDF-style — a light tint here reads as too faint to tell
     categories apart at a glance in the grid, which solid colour fixes) */
  --c-reg:#2b6cb0;
  --c-trn:#d6481f;
  --c-lic:#1a7a4a;
  --c-per:#6d43c8;
  --c-oth:#5b6478;
  --c-aff:#8b2942;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Page background is near-white — var(--paper)'s warm cream stays reserved
   for smaller surfaces (inputs, unselected pills, the tool-head strip)
   where it signals "editable" against white cards, not as the page's own
   backdrop, which would compete with those cards instead of setting them off. */
body{font-family:'IBM Plex Sans',sans-serif;background:var(--white);color:var(--txt);line-height:1.6;font-size:15px}
.mono{font-family:'IBM Plex Mono',monospace}

/* ─── dotted-line motif (from real RTO forms) ─── */
.dotrule{border:none;border-top:2px dotted var(--line);margin:0}

/* ─── HEADER ─── */
.hdr{background:var(--ink);position:sticky;top:0;z-index:200;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hdr-in{max-width:1600px;margin:0 auto;padding:0 32px;height:60px;display:flex;align-items:center;justify-content:space-between}
/* min-width:0 lets this flex item shrink below its text's intrinsic
   width instead of forcing the row taller — without it, a flex item's
   default min-width is the width of its longest word, so at narrow
   widths "RTO Forms India" wraps onto 3 lines and inflates the whole
   header row's height, throwing off vertical alignment of everything
   else in it (see .brand-name below, which is what actually stops the
   wrap once this permits shrinking). */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.brand-mark{width:38px;height:38px;background:var(--stamp);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;color:#fff;letter-spacing:-.5px;transform:rotate(-3deg);flex-shrink:0}
.brand-txt{color:#fff;font-weight:600;font-size:16px;letter-spacing:.2px}
.brand-txt small{display:block;font-weight:400;font-size:10.5px;color:rgba(255,255,255,.55);letter-spacing:.8px;text-transform:uppercase;margin-top:-1px}
.hdr-nav{display:flex;gap:4px}
.hdr-nav a{color:rgba(255,255,255,.75);text-decoration:none;font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:6px;transition:all .15s}
.hdr-nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.hdr-nav a.live-link{background:var(--stamp);color:#fff}
@media(max-width:560px){.hdr-nav a:not(.live-link){display:none}}

/* ─── HEADER WALLET BADGE ───
   A <button>, not an <a> — deliberately, so the @media rule above (which
   hides every nav <a> except .live-link on small screens) never touches
   it: the balance must stay visible on mobile too. */
.hdr-wallet-badge{display:flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;color:#fff;background:var(--stamp);border:none;border-radius:20px;padding:7px 13px;cursor:pointer;margin-left:6px;flex-shrink:0;white-space:nowrap;transition:transform .12s}
.hdr-wallet-badge:hover{transform:translateY(-1px)}
@media(max-width:400px){.hdr-wallet-badge{padding:6px 10px;font-size:11.5px}}

/* ─── LANGUAGE TOGGLE ─── */
.lang-toggle{display:flex;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:2px;margin-left:6px;flex-shrink:0}
.lang-opt{font-family:inherit;font-size:12px;font-weight:600;color:rgba(255,255,255,.65);background:none;border:none;border-radius:16px;padding:5px 11px;cursor:pointer;transition:all .15s;white-space:nowrap}
.lang-opt:hover{color:#fff}
.lang-opt.on{background:var(--stamp);color:#fff}
@media(max-width:400px){.lang-opt{padding:5px 8px;font-size:11px}}

/* ─── LANDING PAGE (index.html top section only) ───
   Ported from design/design-landing-v3.html. Deliberately its own class
   names throughout (.site-header, .nav-link, .card, .pill, ...) rather than
   reusing .hdr/.hdr-nav/.fcard/etc — those are shared by every task page
   and several already assume the OLD dark-header/light-body layout (e.g.
   .brand-txt is white text, meant for the navy .hdr; this header is white),
   so overloading them here would leak into pages this redesign must not
   touch. The only classes intentionally reused are .brand/.brand-mark
   (self-colored, looks right on either background) and .lang-toggle/
   .lang-opt/#langToggle (applyI18n(), i18n.js, finds the active language
   button by those exact names) — see .lang-toggle-light below, which
   re-themes the toggle for a light header without changing the base rule
   task pages still use. */
.page-width{width:100%;max-width:1600px;margin:0 auto;padding:0 32px}
.hidden{display:none!important}

.site-header{background:var(--white);border-bottom:1px solid var(--line)}
.header-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* Truncates with an ellipsis instead of wrapping — at narrow widths this
   is what actually keeps the header to one line (see .brand's min-width:0
   above, which is what lets this element shrink small enough to need it). */
.brand-name{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desktop-nav{display:flex;align-items:center;gap:24px}
.nav-link{color:var(--ink);text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.nav-link:hover{color:var(--stamp)}
.header-actions{display:flex;align-items:center;gap:10px}
.wallet-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);font:600 .78rem 'IBM Plex Mono',monospace;cursor:pointer;transition:border-color .15s;flex-shrink:0}
.wallet-chip:hover{border-color:var(--ink)}
.lang-toggle-light{background:var(--white);border:1px solid var(--line)}
.lang-toggle-light .lang-opt{color:var(--txt-2)}
.lang-toggle-light .lang-opt:hover{color:var(--ink)}
.lang-toggle-light .lang-opt.on{background:var(--ink);color:#fff}
.mobile-menu-button{display:none;width:44px;height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;flex-shrink:0}
.mobile-menu-button svg{width:22px;height:22px}
.mobile-nav{padding:10px 16px 16px;border-top:1px solid var(--line);background:var(--white)}
.mobile-nav a{display:block;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.mobile-nav a:last-child{border-bottom:0}
@media(max-width:767px){
  .page-width{padding:0 16px}
  .desktop-nav{display:none}
  .mobile-menu-button{display:inline-grid;place-items:center}
  /* The wallet badge + language toggle + hamburger alone already crowd a
     phone-width header; "RTO Forms India" next to them has no room left
     and only ever gets a 2-3 character ellipsis-truncated sliver (see
     .brand-name's overflow:hidden above) — cleaner to drop the text and
     keep just the logo mark, same pattern as most mobile headers. */
  .brand-name{display:none}
}

/* ── hero — centered, iLovePDF style ── */
.hero{text-align:center;padding:62px 0 30px}
.hero h1{max-width:1000px;margin:0 auto;color:var(--ink);font-size:3.1rem;font-weight:700;letter-spacing:-.035em;line-height:1.08}
.hero p{max-width:760px;margin:18px auto 0;color:var(--txt-2);font-size:1.08rem;line-height:1.55}
@media(max-width:1100px){.hero h1{font-size:2.4rem}}
@media(max-width:767px){
  .hero{padding:34px 0 18px}
  .hero h1{font-size:1.75rem}
  .hero p{font-size:.96rem;margin-top:12px}
}

/* ── search ── */
.search-wrap{max-width:720px;margin:30px auto 0}
@media(max-width:767px){.search-wrap{margin-top:22px}}
.search-box{display:flex;align-items:center;gap:13px;min-height:58px;padding:0 18px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.search-box:focus-within{border-color:var(--ink)}
.search-icon{width:20px;height:20px;color:var(--txt-2);flex:0 0 auto}
.search-input{width:100%;min-height:54px;border:0;outline:0;background:transparent;color:var(--txt);font-size:1rem}
.search-input::placeholder{color:#8b93a3}
.search-results{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white);text-align:left}
.result-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.result-row:last-child{border-bottom:0}
.result-row:hover{background:var(--paper)}
.result-name{display:block;margin:0;color:var(--ink);font-size:.95rem;font-weight:600}
.result-description{display:block;margin:2px 0 0;color:var(--txt-2);font-size:.83rem}
.empty-result{margin-top:12px;padding:32px 18px;text-align:center;border:1px dashed #cfc9bd;border-radius:10px;background:var(--white)}
.empty-result p{margin:0}
.empty-copy{margin-top:8px!important;color:var(--txt-2);font-size:.9rem}
.whatsapp-button{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;padding:0 18px;border-radius:8px;text-decoration:none;color:var(--white);background:var(--stamp);font-size:.88rem;font-weight:600}
.whatsapp-button:hover{background:#bd3e1a}

/* ── trust strip — quick reassurance badges just below the hero ── */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;max-width:820px;margin:34px auto 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip-item{display:flex;align-items:center;gap:8px;color:var(--txt-2);font-size:.85rem;font-weight:600}
.trust-strip-item svg{width:16px;height:16px;color:var(--approve);flex:0 0 auto}
@media(max-width:767px){
  .trust-strip{gap:14px 20px;margin-top:22px;padding:14px 0}
  .trust-strip-item{font-size:.76rem}
}

/* ── filter pills ── */
.pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:34px 0 26px}
.pill{min-height:42px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--txt);cursor:pointer;font-size:.92rem;font-weight:500;transition:border-color 140ms ease,background 140ms ease,color 140ms ease}
.pill:hover{border-color:var(--ink)}
.pill.active{background:var(--ink);border-color:var(--ink);color:var(--white)}
@media(max-width:767px){
  .pill-row{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:24px 0 18px;padding-bottom:4px}
  .pill{flex:0 0 auto;min-height:40px;padding:0 16px;font-size:.86rem}
}

/* ── catalogue cards (packages + all-forms) ── */
.card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.card{display:flex;flex-direction:column;min-height:200px;padding:26px;background:var(--white);border:1px solid var(--line-soft);border-radius:10px;text-decoration:none;color:inherit;transition:border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease}
.card:hover{border-color:#c9c2b6;box-shadow:0 4px 14px rgba(20,40,80,.08);transform:translateY(-1px)}
.card-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:10px;margin-bottom:20px}
.card-icon svg{width:26px;height:26px}
.card h3{margin:0;color:var(--ink);font-size:1.2rem;font-weight:600;line-height:1.25}
.card p{margin:9px 0 0;color:var(--txt-2);font-size:.94rem;line-height:1.5}
.card-foot{margin-top:auto;padding-top:14px;font:500 .75rem 'IBM Plex Mono',monospace;letter-spacing:.03em}
.card-foot.online{color:var(--approve)}
.card-foot.blank{color:var(--txt-2)}
.i-reg{background:var(--c-reg);color:#fff}
.i-trn{background:var(--c-trn);color:#fff}
.i-lic{background:var(--c-lic);color:#fff}
.i-per{background:var(--c-per);color:#fff}
.i-oth{background:var(--c-oth);color:#fff}
.i-aff{background:var(--c-aff);color:#fff}

.packages{padding-top:8px;padding-bottom:46px}
.packages .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.packages .card{min-height:190px}
.catalogue{padding-bottom:60px}

.section-head{text-align:center;margin-bottom:24px}
.section-head h2{margin:0;color:var(--ink);font-size:1.85rem;font-weight:700;letter-spacing:-.02em}
.section-head p{margin:9px 0 0;color:var(--txt-2);font-size:.98rem}

@media(max-width:1400px){.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .packages .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .card-grid,.packages .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card,.packages .card{min-height:128px;padding:16px}
  .card-icon{width:42px;height:42px;margin-bottom:14px;border-radius:8px}
  .card-icon svg{width:21px;height:21px}
  .card h3{font-size:.95rem}
  .card p{display:none}
  .card-foot{padding-top:10px;font-size:.66rem}
  .section-head h2{font-size:1.4rem}
}

/* Still used outside the old hero it was written for — the AI box's
   "Get started" CTA (every task page + this page's #tool). */
.btn-stamp{display:inline-flex;align-items:center;gap:9px;background:var(--stamp);color:#fff;font-weight:600;font-size:15px;padding:13px 26px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s}
.btn-stamp:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(214,72,31,.4)}

/* ─── SECTION SHELL ─── */
.sec{max-width:1080px;margin:0 auto;padding:96px 20px}
@media(max-width:680px){.sec{padding:56px 20px}}
/* Wide variant — for interactive/working sections (the fill tool,
   forms catalog) so they use the screen the way iLovePDF does, instead of
   sitting in the same 1080px reading column as prose sections (hero, FAQ,
   legal pages), which stay narrow for readability. Combine as
   class="sec sec-wide" — must be declared after .sec so its max-width/
   padding win at equal specificity. */
.sec-wide{max-width:1600px;padding-left:32px;padding-right:32px}
@media(max-width:680px){.sec-wide{padding-left:20px;padding-right:20px}}
.sec-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--stamp);margin-bottom:10px}
.sec-title{font-size:clamp(22px,3.4vw,30px);font-weight:700;letter-spacing:-.5px;line-height:1.2}
.sec-sub{color:var(--txt-2);margin-top:12px;max-width:600px;font-size:15px}

/* ─── TOOL CARD (vehicle transfer) ─── */
.tool-wrap{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-top:40px;overflow:hidden;box-shadow:0 2px 16px rgba(20,40,80,.05)}
.tool-head{background:var(--paper-2);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tool-head-l{display:flex;align-items:center;gap:14px}
.tool-badge{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:1px;background:var(--approve);color:#fff;padding:4px 10px;border-radius:4px;transform:rotate(-2deg)}
.tool-head h3{font-size:17px;font-weight:600}
.tool-head p{font-size:12.5px;color:var(--txt-2)}
.tool-forms{display:flex;gap:7px;flex-wrap:wrap}
.tf-chip{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;background:var(--white);border:1px solid var(--line);color:var(--txt-2);padding:4px 11px;border-radius:20px}

.tool-body{padding:28px 24px}
@media(max-width:560px){.tool-body{padding:20px 14px}}
.fset{margin-bottom:26px}
.fset-label{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fset-num{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--stamp);background:var(--stamp-soft);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.fset-label h4{font-size:14px;font-weight:600;letter-spacing:.2px}
.picks{display:flex;gap:8px;flex-wrap:wrap}
.pick{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--txt);background:var(--paper);border:1.5px solid var(--line);border-radius:24px;padding:7px 15px;cursor:pointer;transition:all .15s;user-select:none}
.pick:hover{border-color:var(--ink)}
.pick:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.pick input{accent-color:var(--stamp);width:14px;height:14px;cursor:pointer}
.pick-note{font-size:12px;color:var(--txt-2);margin-top:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:5px}
.fld.full{grid-column:1/-1}
.fld label{font-size:13px;font-weight:600;color:var(--txt-2);letter-spacing:.4px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;line-height:1.4}
.fld-counter{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--txt-3);font-family:'IBM Plex Mono',monospace}
.fld-hint{font-size:12px;color:var(--txt-3);margin-top:4px;letter-spacing:0;text-transform:none;font-weight:400;line-height:1.5}
.fld input{padding:12px 13px;border:1.5px solid var(--line);border-radius:8px;font-size:16px;line-height:1.5;font-family:inherit;color:var(--txt);background:var(--paper);transition:border-color .15s,background .15s}
.fld input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer}
.fld input:focus{outline:none;border-color:var(--ink);background:#fff}
.fld input::placeholder{color:var(--txt-3)}
.fld-ai input{border-color:var(--amber);background:var(--amber-soft)}
.fld-ai-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.5px;background:var(--amber);color:#fff;padding:1px 5px;border-radius:3px;margin-left:6px;vertical-align:middle}
/* A field the user has reviewed (edited, or kept via a conflict choice)
   after it was AI-filled — green, the site's existing "verified" color,
   deliberately different from .fld-ai's amber "please check this". */
.fld-verified input{border-color:var(--approve);background:var(--approve-soft)}
.fld-verified-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.5px;background:var(--approve);color:#fff;padding:1px 5px;border-radius:3px;margin-left:6px;vertical-align:middle}
/* A field AI tried but couldn't read (blurry photo, torn corner, etc.) —
   dashed, not solid, since nothing was actually filled in; deliberately
   not the same treatment as .fld-ai (which HAS a value, just unreviewed). */
.fld-missed input{border:1.5px dashed var(--stamp);background:var(--stamp-soft)}
.fld-missed-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.5px;background:var(--stamp);color:#fff;padding:1px 5px;border-radius:3px;margin-left:6px;vertical-align:middle;cursor:help}

.gen-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:8px;border-top:2px dotted var(--line);margin-top:6px;padding-top:22px}
.btn-generate{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-weight:600;font-size:15.5px;padding:15px 32px;border-radius:9px;border:none;cursor:pointer;font-family:inherit;transition:all .15s;letter-spacing:.2px}
.btn-generate:hover{background:var(--ink-2);transform:translateY(-1px)}
.btn-generate:disabled{background:var(--txt-3);cursor:not-allowed;transform:none}
.btn-blank{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--ink);font-weight:600;font-size:14.5px;padding:14px 24px;border-radius:9px;border:1.5px solid var(--ink);cursor:pointer;font-family:inherit;transition:all .15s}
.btn-blank:hover{background:var(--ink);color:#fff}
.gen-note{font-size:12.5px;color:var(--txt-2)}
.gen-note .mono{color:var(--approve);font-weight:600}
.status{font-size:14px;line-height:1.5;min-height:22px;font-weight:500;padding-top:8px}
.status.ok{color:var(--approve)}
.status.err{color:var(--stamp)}

.restore-notice{display:flex;align-items:center;gap:10px;background:var(--approve-soft);border:1px solid var(--approve);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13.5px;color:var(--approve)}
.restore-notice span.rn-msg{flex:1}
.restore-notice button{font-family:inherit;font-size:12.5px;font-weight:600;border:none;background:none;cursor:pointer;padding:4px 8px;border-radius:5px}
.restore-notice .rn-clear{color:var(--stamp)}
.restore-notice .rn-clear:hover{background:var(--stamp-soft)}
.restore-notice .rn-dismiss{color:var(--approve);font-size:16px;line-height:1;padding:2px 6px}
.restore-notice .rn-dismiss:hover{background:rgba(26,122,74,.12)}

/* ─── HOW IT WORKS ─── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px;border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden}
@media(max-width:680px){.steps{grid-template-columns:1fr}}
.step{padding:28px 24px;position:relative}
.step+.step{border-left:2px dotted var(--line)}
@media(max-width:680px){.step+.step{border-left:none;border-top:2px dotted var(--line)}}
.step-num{font-family:'IBM Plex Mono',monospace;font-size:32px;font-weight:600;color:var(--paper-2);-webkit-text-stroke:1.2px var(--stamp);line-height:1}
.step h4{font-size:15px;font-weight:600;margin:14px 0 6px}
.step p{font-size:13px;color:var(--txt-2);line-height:1.6}

/* ─── FAQ ─── */
.faq-list{margin-top:32px;display:flex;flex-direction:column;gap:12px;max-width:760px}
.faq{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.faq summary{padding:15px 18px;font-weight:600;font-size:14.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::after{content:'+';font-family:'IBM Plex Mono',monospace;font-size:18px;color:var(--stamp);flex-shrink:0;transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary::-webkit-details-marker{display:none}
.faq p{padding:0 18px 16px;font-size:13.5px;color:var(--txt-2);line-height:1.7}
.faq a{color:var(--stamp);text-decoration:none;border-bottom:1px dotted var(--stamp)}

/* ─── FOOTER ─── */
.ftr{background:var(--ink);color:rgba(255,255,255,.6);margin-top:40px}
.ftr-in{max-width:1600px;margin:0 auto;padding:36px 32px 28px}
.ftr-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:24px;border-bottom:2px dotted rgba(255,255,255,.15)}
.ftr-brand{font-weight:600;color:#fff;font-size:15px}
.ftr-brand small{display:block;font-weight:400;font-size:12px;color:rgba(255,255,255,.45);margin-top:4px;max-width:300px;line-height:1.6}
.ftr-links{display:flex;gap:28px;flex-wrap:wrap}
.ftr-links a{color:rgba(255,255,255,.6);text-decoration:none;font-size:13px;transition:color .15s}
.ftr-links a:hover{color:#fff}
.ftr-disclaimer{padding:10px 0 16px;font-size:12px;color:rgba(255,255,255,.5);border-bottom:1px dotted rgba(255,255,255,.1);margin-bottom:6px;line-height:1.6}
.ftr-bottom{padding-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.35)}
.ftr-bottom .mono{font-size:11px}

.fld-blink{animation:fldBlink .5s ease-in-out 4;border-color:var(--stamp)!important;background:var(--stamp-soft)!important}
@keyframes fldBlink{0%,100%{box-shadow:0 0 0 0 rgba(214,72,31,0)}50%{box-shadow:0 0 0 5px rgba(214,72,31,.4)}}

/* ─── PRO / AI AUTO-FILL ─── */
.pro-panel{background:linear-gradient(180deg,var(--stamp-soft) 0%,var(--white) 140px);border:1.5px solid var(--stamp);border-radius:12px;padding:20px 20px 22px;margin-bottom:26px}
.pro-num{background:var(--stamp)!important;color:#fff!important}
.pro-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;background:var(--stamp);color:#fff;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:8px;transform:translateY(-1px)}
.pro-context{display:none;font-size:13.5px;line-height:1.5;font-weight:600;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:7px;padding:8px 12px;margin-top:8px}
.pro-context.show{display:block}
.pro-context b{color:var(--stamp)}
.pro-toprow{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 18px}
.pro-radio{display:flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
.pro-radio input{accent-color:var(--stamp)}
.pro-credits{display:flex;align-items:center;gap:10px}
.pro-credits-badge{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;background:var(--ink);color:#fff;padding:7px 14px;border-radius:20px;white-space:nowrap}
.pro-buy-btn{padding:9px 16px;font-size:13px}
.upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
/* Solid, visible border by default (was a barely-there 1.5px dash) —
   RC and the buyer's Aadhaar (the only two slots Gemini ever reads, see
   isSlotExtractable(), pro-wallet.js) get a coloured left edge so it's
   obvious at a glance which boxes matter for auto-fill vs which are just
   along for the attachment ride. */
.upload-slot{background:var(--white);border:1px solid #d8d2c4;border-radius:8px;padding:14px}
#docSlot-rc,#docSlot-aadhaar-buyer{border-left:3px solid var(--stamp)}
.upload-slot-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap}
/* Small coloured icon tile ahead of the doc name — RC/Aadhaar/PAN/Face
   Photo each get their own fixed colour+glyph via the id selectors below
   (a background-image data-URI, not an extra DOM node, so no HTML change
   is needed anywhere this class is already used). */
.upload-slot-name{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;color:var(--ink)}
.upload-slot-name::before{content:'';flex:0 0 auto;width:28px;height:28px;border-radius:6px;background-repeat:no-repeat;background-position:center;background-size:16px 16px}
#docSlot-rc .upload-slot-name::before{background-color:#2b6cb0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
#docSlot-aadhaar-seller .upload-slot-name::before,#docSlot-aadhaar-buyer .upload-slot-name::before{background-color:#1a7a4a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3Cpath d='M7.5 17c0-2.5 2-4 4.5-4s4.5 1.5 4.5 4'/%3E%3C/svg%3E")}
#docSlot-pan-seller .upload-slot-name::before,#docSlot-pan-buyer .upload-slot-name::before{background-color:#6d43c8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10h6M7 14h4'/%3E%3C/svg%3E")}
#docSlot-photo .upload-slot-name::before{background-color:#5b6478;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E")}
.upload-slot-name .upload-slot-state{margin-left:9px}
.upload-slot-state{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--txt-3);letter-spacing:.4px;text-transform:uppercase}
.upload-slot-state.done{color:var(--approve)}
.upload-slot-state.err{color:var(--stamp)}
.upload-slot input[type=file]{width:100%;font-size:13.5px;color:var(--txt-2)}
.doc-remove-btn{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--stamp);background:none;border:none;cursor:pointer;padding:2px 0;white-space:nowrap;flex-shrink:0}
.doc-remove-btn:hover{text-decoration:underline}
.doc-preview-wrap{margin-top:10px}
.doc-preview-wrap img{width:100%;max-height:160px;object-fit:contain;border-radius:7px;border:1.5px solid var(--line);background:#f4f4f4;display:block}
.pdf-page-picker{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pdf-page-thumb{width:44px;height:58px;object-fit:cover;border-radius:5px;border:2px solid var(--line);cursor:pointer;opacity:.7}
.pdf-page-thumb.sel{border-color:var(--stamp);opacity:1}
.pdf-page-label{font-size:9px;color:var(--txt-3);text-align:center;margin-top:2px}
.upload-slot-wide{grid-column:1/-1}
.aadhaar-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aadhaar-two-col .fld-hint{display:block;margin-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--txt-2)}
@media(max-width:560px){.aadhaar-two-col{grid-template-columns:1fr}}
.pro-attach-chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt-2);cursor:pointer;margin-bottom:6px}
.pro-attach-chk input{accent-color:var(--stamp)}
.consent-chk{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--txt-2);background:var(--white);border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin:2px 0 14px;cursor:pointer}
.consent-chk input{margin-top:2px;accent-color:var(--stamp);flex-shrink:0;width:15px;height:15px;cursor:pointer}
.consent-chk a{color:var(--stamp);text-decoration:underline}
.upload-slot input[type=file]:disabled{opacity:.45;cursor:not-allowed}

/* ─── camera / gallery — two explicit buttons instead of one input with
   capture=environment (which hides the gallery entirely on mobile). Both
   labels trigger their own hidden file input, both call the same
   handleFileSelect() — see the doc-slot markup in every task page and
   index.html. "Take photo" only makes sense where there's a camera, so
   it's hidden above the mobile breakpoint; "Choose file" always shows. */
.doc-input-row{display:flex;gap:8px;flex-wrap:nowrap;margin-top:6px}
.doc-input-row input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.doc-input-row .btn-camera,.doc-input-row .btn-choose{flex:1;justify-content:center}
.btn-camera,.btn-choose{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--txt);background:var(--white);border:1.5px solid var(--line);border-radius:8px;padding:0 12px;cursor:pointer;transition:all .15s;user-select:none}
.btn-camera:hover,.btn-choose:hover{border-color:var(--ink)}
.doc-input-disabled label{opacity:.45;cursor:not-allowed;pointer-events:none}
.consent-hint{display:inline-block;font-size:.8rem;font-weight:600;color:var(--stamp);margin-bottom:8px}
.doc-purpose-hint+.consent-hint::before{content:'· '}
.doc-role-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.doc-role-lbl{font-size:12px;font-weight:600;color:var(--txt-2);letter-spacing:.3px}
.doc-role-opt{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--txt);cursor:pointer}
.doc-role-opt input{accent-color:var(--stamp);width:14px;height:14px;cursor:pointer}
/* Redundant with .doc-purpose-hint right below it (both exist to say the
   same "RC fills in the seller's details" thing) — kept in the HTML/i18n
   for text-only contexts but hidden here to stop RC's box being taller
   than every other slot for no reason. */
.doc-role-note{display:none}
/* Says up front whether this document's data feeds the form (Gemini
   extraction) or is only attached as-is to the final PDF — RC and the
   buyer's Aadhaar slot get .extract; every other fixed slot (both PAN
   slots, the seller's Aadhaar) stays the plain (attach-only) style. Each
   slot's extractability is fixed by which box it is (see
   isSlotExtractable(), pro-wallet.js) — nothing here changes at runtime
   any more, unlike the old per-document role toggle this replaced. */
.doc-purpose-hint{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.2px;color:var(--txt-2);margin-bottom:8px}
.doc-purpose-hint.extract{color:var(--stamp)}

/* Groups the upload slots by who the document belongs to — Vehicle (RC),
   Seller, Buyer (hidden entirely when no selected form needs a buyer —
   see updateDocSlotVisibility(), ui.js), Attachment Only (Face Photo,
   /fill layout only — task pages use .doc-parties-wrap below instead). */
.doc-group{margin-bottom:18px}
.doc-group-label{font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-top:20px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}

/* ═══ Seller/Buyer document upload — two columns, Aadhaar+PAN always
   shown (no on/off toggle — removed after actually using it, it was
   friction with nothing to opt out of), front+back for both doc types, a
   clear checkmark once a side is filled. Task pages only (vehicle-transfer
   etc.) — /fill's older single-column layout is untouched. Everything
   here — and #docSlot-rc above, which opts into the same treatment via
   the same class on its wrapper — is scoped under .doc-parties-wrap, so
   the colourful button treatment stays off /fill's own RC/Aadhaar/PAN/
   photo slots, which never get this class. ═══ */
.doc-parties{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:16px}
@media(min-width:769px){.doc-parties{grid-template-columns:1fr 1fr;gap:28px}}
/* Section dividers, not fine print — sized to actually read as one at a
   glance, not just a slightly-bold label. */
.doc-party-head{font-family:'IBM Plex Mono',monospace;font-size:1.05rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
/* Visible, appropriately-sized card — the old .upload-slot's #d8d2c4
   border reads as barely-there against white; this is the same shape
   with real contrast. */
.doc-id-slot{background:var(--white);border:1.5px solid var(--txt-3);border-radius:8px;padding:14px;margin-bottom:12px}
#docSlot-aadhaar-buyer.doc-id-slot{border-left:3px solid var(--stamp)}
.doc-side-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
@media(min-width:1200px){.doc-side-grid{grid-template-columns:1fr 1fr}}
.doc-side-box{position:relative;border:1.5px solid var(--line-soft);border-radius:7px;padding:10px;background:var(--paper)}
/* "Front side"/"Back side" — the base .fld-hint's var(--txt-3) reads as
   barely-there against this box's cream background; bumped to match the
   rest of the section's label contrast (e.g. .doc-purpose-hint). */
.doc-side-box .fld-hint{color:var(--txt-2);font-weight:600}
.doc-side-box:has(.doc-preview-wrap img){border-color:var(--approve);background:var(--approve-soft)}
.doc-side-box:has(.doc-preview-wrap img)::after{content:'✓';position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--approve);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.doc-attach-options{margin-top:2px}
/* Colourful, high-contrast Take photo / Choose file — scoped to this
   wrapper only, so RC and anything on /fill keep the plain outlined look. */
.doc-parties-wrap .btn-camera{background:var(--stamp);color:#fff;border-color:var(--stamp)}
.doc-parties-wrap .btn-camera:hover{background:#b83d19;border-color:#b83d19}
.doc-parties-wrap .btn-choose{background:#2b6cb0;color:#fff;border-color:#2b6cb0}
.doc-parties-wrap .btn-choose:hover{background:#235a92;border-color:#235a92}

/* ─── AI box picker: consent as the header of the SAME card (no separate
   boxed look), and locked upload cards that nudge the user back to
   consent instead of doing nothing when clicked — see onDocSlotGridClick()
   / removeDoc() (pro-wallet.js). Scoped to .ai-box-picker so the root
   page's older, separate PRO panel (still using bare .consent-chk /
   .upload-slot) is completely unaffected. */
.ai-box-picker .consent-chk{background:none;border:none;border-bottom:1.5px dashed var(--stamp);border-radius:0;padding:0 0 16px;margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--txt)}
.ai-box-picker .consent-chk input{width:20px;height:20px;margin-top:1px}
@keyframes consentShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.consent-chk.shake{animation:consentShake .4s ease}
.consent-chk.consent-highlight{outline:3px solid rgba(214,72,31,.35);outline-offset:5px;border-radius:6px}
.ai-box-picker .upload-slot.locked{opacity:.5;position:relative;cursor:pointer}
.ai-box-picker .upload-slot.locked::after{content:'🔒';position:absolute;top:12px;right:12px;font-size:14px;opacity:.85;pointer-events:none}
.owner-type-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.fld-conflict-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--stamp);background:var(--stamp-soft);border:1px solid var(--stamp);border-radius:6px;padding:6px 9px;margin-top:6px}
.fld-conflict-note button{font-family:inherit;font-size:11px;font-weight:600;color:var(--stamp);background:#fff;border:1px solid var(--stamp);border-radius:5px;padding:3px 8px;cursor:pointer}
.fld-conflict-note button:hover{background:var(--stamp);color:#fff}
.fld-conflict-dismiss{border:none!important;background:none!important;font-size:15px!important;line-height:1;padding:0 2px!important;margin-left:auto}
.pro-result-card{background:var(--approve-soft);border:1px solid var(--approve);border-radius:8px;padding:10px 14px;margin-top:8px;font-size:12.5px}
.pro-result-card b{color:var(--approve)}
.pro-result-row{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.pro-result-row span:first-child{color:var(--txt-2);text-transform:capitalize}

/* ─── COMBINED AI CHECKOUT ─── */
.checkout-box{background:var(--white);border:1.5px solid var(--stamp);border-radius:10px;padding:14px 16px;margin:2px 0 14px}
.checkout-box .btn-generate{width:100%}

/* ─── MODAL (buy credits) ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(20,40,80,.55);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px}
.modal-box{background:#fff;border-radius:14px;max-width:420px;width:100%;padding:24px;max-height:88vh;overflow-y:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:17px;font-weight:700}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--txt-2);line-height:1}
.modal-sub{font-size:13.5px;line-height:1.5;color:var(--txt-2);margin:8px 0 16px}
.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.pack-card{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:14px 8px;cursor:pointer;font-family:inherit;transition:all .15s}
.pack-card:hover{border-color:var(--stamp);background:var(--stamp-soft)}
.pack-n{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:700;color:var(--ink)}
.pack-l{font-size:10.5px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.5px}
.pack-p{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--stamp);margin-top:4px}
.modal-code-lbl{font-size:12px;font-weight:600;color:var(--txt-2);display:block;margin-bottom:8px}
.modal-code-in{display:flex;gap:8px}
.modal-code-in input{flex:1;padding:12px 13px;border:1.5px solid var(--line);border-radius:8px;font-size:16px}
.modal-code-in .btn-generate{padding:11px 18px;font-size:13.5px}

/* ─── DESKTOP CAMERA CAPTURE MODAL (getUserMedia) ───
   Mobile never sees this — see isTouchPrimaryDevice()/handleTakePhotoClick()
   in pro-wallet.js, which sends touch devices to the native
   capture=environment input instead. */
.camera-modal-box{max-width:520px}
.camera-viewport{position:relative;width:100%;aspect-ratio:4/3;background:#111;border-radius:10px;overflow:hidden;margin:14px 0}
.camera-viewport video,.camera-viewport img{width:100%;height:100%;object-fit:cover;display:block}
.camera-modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.camera-modal-actions button{flex:1 1 140px}

/* ─── FACE-PHOTO EDITOR MODAL (Cropper.js) ─── */
.photo-editor-box{max-width:600px}
.photo-editor-canvas-wrap{width:100%;height:340px;background:#111;border-radius:10px;overflow:hidden;margin:14px 0}
.photo-editor-canvas-wrap img{display:block;max-width:100%}
.photo-editor-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.photo-editor-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.photo-editor-row button{flex:1 1 140px}
.photo-editor-slider-row{gap:12px;flex-wrap:nowrap}
.photo-editor-slider-row label{font-size:13px;color:var(--txt-2);flex-shrink:0}
.photo-editor-slider-row input[type=range]{flex:1}
.photo-editor-free-chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt-2);cursor:pointer}
.photo-editor-free-chk input{accent-color:var(--stamp);width:16px;height:16px;cursor:pointer}
@media(max-width:560px){
  .photo-editor-canvas-wrap{height:280px}
}

/* ─── SETTINGS MODAL ─── */
button.tf-chip{cursor:pointer;font-family:inherit}
.settings-section{margin-bottom:22px}
.settings-section:last-of-type{margin-bottom:6px}
.settings-section h4{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.settings-radio-list{display:flex;flex-direction:column;gap:9px}
.settings-group{margin-top:12px}
.settings-group:first-child{margin-top:0}
.settings-group-lbl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);margin-bottom:7px}
.settings-reset{font-size:12px;color:var(--txt-2);text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
.settings-reset:hover{color:var(--stamp)}

/* ─── ADMIN (hidden — open with ?admin=vikash2026) ─── */
.admin-panel{position:fixed;bottom:20px;left:20px;z-index:400}
.admin-box{background:#fff;border:2px solid var(--stamp);border-radius:10px;padding:14px;width:230px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.admin-box h4{font-size:12.5px;margin-bottom:10px}
.admin-box input{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:7px;font-size:16px;margin-bottom:8px}

/* ─── BLANK-FORM INFO PAGES (/form-<num>-<slug>/) ───
   Shared shell for the "download blank" forms — real prose content (not a
   thin download-button-only page), same .sec/.sec-wide layout shell every
   other page already uses. Static per-page HTML + i18n.js text (see
   blank.<key>.* in i18n.js) is the "config"; these classes are the "shell". */
.blank-form-intro{font-size:15.5px;color:var(--txt-2);line-height:1.65;max-width:720px;margin-top:6px}
.blank-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:32px;border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden}
@media(max-width:780px){.blank-form-grid{grid-template-columns:1fr}}
.blank-form-card{padding:24px}
.blank-form-card+.blank-form-card{border-left:2px dotted var(--line)}
@media(max-width:780px){.blank-form-card+.blank-form-card{border-left:none;border-top:2px dotted var(--line)}}
.blank-form-card h3{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--stamp);margin-bottom:8px}
.blank-form-card p{font-size:14px;color:var(--txt);line-height:1.6}
.blank-form-download-row{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.blank-form-download-row .btn-generate{text-decoration:none;display:inline-flex}
.blank-form-download-note{font-size:12.5px;color:var(--txt-2)}
.blank-form-related{margin-top:40px;padding:18px 22px;background:var(--paper);border-radius:10px;font-size:14px;color:var(--txt-2)}
.blank-form-related a{color:var(--stamp);font-weight:600;text-decoration:none}
.blank-form-related a:hover{text-decoration:underline}

/* ─── PRINT ─── */
@media print{
  .hdr,.hero,.hero-stats,.hero-cta,.hdr-nav,.tool-wrap,.sec-eyebrow,
  .ftr,.faq-list,.steps,.cat-tabs,.search-row,.forms-grid,.mobile-fab,.wa-float,.contact-card,
  .modal-overlay,
  #how,#faq,#forms,.dotrule{display:none!important}
  body{background:#fff;color:#000}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2.5px solid var(--stamp);outline-offset:2px}
/* ─── TAX CALCULATOR ─── */
.calc-wrap{max-width:880px;margin:0 auto}
.calc-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 1px 3px rgba(20,40,80,.04)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.calc-fld{display:flex;flex-direction:column;gap:6px}
.calc-fld label{font-size:13px;font-weight:600;color:var(--txt-2);letter-spacing:.4px;text-transform:uppercase}
.calc-fld input,.calc-fld select{padding:12px 13px;border:1.5px solid var(--line);border-radius:8px;font-size:16px;line-height:1.5;font-family:inherit;color:var(--txt);background:var(--paper);transition:border-color .15s;width:100%}
.calc-fld input:focus,.calc-fld select:focus{outline:none;border-color:var(--ink);background:#fff}
.calc-hint{font-size:12px;color:var(--txt-3)}
.calc-result{margin-top:24px;border-top:2px dotted var(--line);padding-top:20px}
.calc-placeholder{color:var(--txt-3);font-size:13.5px;text-align:center;padding:16px 0}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--paper-2);font-size:14px}
.calc-row .lbl{color:var(--txt-2)}
.calc-row .val{font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.calc-row.total{border-bottom:none;border-top:2px solid var(--ink);margin-top:6px;padding-top:14px;font-size:17px}
.calc-row.total .lbl{font-weight:700;color:var(--ink)}
.calc-row.total .val{font-weight:800;color:var(--stamp);font-size:22px}
.calc-row.muted .lbl,.calc-row.muted .val{color:var(--txt-3);font-weight:500}
.calc-disclaimer{margin-top:18px;font-size:11.5px;color:var(--txt-2);line-height:1.6;background:var(--stamp-soft);padding:12px 14px;border-radius:8px}
@media(max-width:560px){
  .calc-grid{grid-template-columns:1fr}
  .calc-card{padding:20px}
  .calc-row.total .val{font-size:19px}
}

/* ─── WHATSAPP CONTACT ─── */
.wa-float{position:fixed;bottom:20px;right:20px;z-index:250;display:flex;align-items:center;gap:8px;
  background:#25D366;color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  padding:12px 18px;border-radius:50px;box-shadow:0 4px 16px rgba(37,211,102,.4);
  font-family:inherit;transition:transform .15s,box-shadow .15s}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(37,211,102,.5)}
.wa-float svg{width:22px;height:22px;flex-shrink:0}
.wa-float .wa-txt{white-space:nowrap}
@media(max-width:560px){
  .wa-float{bottom:14px;right:14px;padding:13px}
  .wa-float .wa-txt{display:none}
}
/* When mobile FAB is showing, push WhatsApp button up so they don't overlap */
@media(max-width:680px){
  body.fab-active .wa-float{bottom:74px}
}

/* ─── PWA install button (pwa-install.js) — floating, bottom-LEFT
   deliberately, so it never has to coordinate with .wa-float's own
   bottom-right/mobile-FAB stacking logic above. ─── */
.pwa-install-fab{position:fixed;bottom:20px;left:20px;z-index:250;display:flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border:none;text-decoration:none;font-weight:600;font-size:14px;
  padding:12px 18px;border-radius:50px;box-shadow:0 4px 16px rgba(20,40,80,.35);cursor:pointer;
  font-family:inherit;transition:transform .15s,box-shadow .15s}
.pwa-install-fab:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(20,40,80,.45)}
.pwa-install-fab:disabled{opacity:.6;cursor:default;transform:none}
.pwa-install-fab svg{width:18px;height:18px;flex-shrink:0}
@media(max-width:560px){
  .pwa-install-fab{bottom:14px;left:14px;padding:13px}
  .pwa-install-fab span{display:none}
}
.pwa-ios-tip{position:fixed;bottom:78px;left:20px;z-index:251;max-width:280px;
  background:var(--ink);color:#fff;border-radius:10px;padding:12px 14px;font-size:.85rem;line-height:1.5;
  display:flex;align-items:flex-start;gap:8px;box-shadow:0 6px 22px rgba(20,40,80,.4)}
.pwa-ios-tip button{background:none;border:none;color:#fff;opacity:.7;font-size:18px;line-height:1;
  cursor:pointer;padding:0;margin-left:auto;flex-shrink:0}
.pwa-ios-tip button:hover{opacity:1}
@media(max-width:560px){
  .pwa-ios-tip{bottom:72px;left:14px;right:14px;max-width:none}
}
.contact-card{background:var(--ink-2);border-radius:12px;padding:22px 24px;margin-top:18px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.contact-card .cc-txt{color:#fff}
.contact-card .cc-txt strong{display:block;font-size:15px;margin-bottom:3px}
.contact-card .cc-txt span{font-size:13px;color:rgba(255,255,255,.6)}
.contact-card .cc-btn{background:#25D366;color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  padding:11px 20px;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:opacity .15s}
.contact-card .cc-btn:hover{opacity:.9}
.contact-card .cc-btn svg{width:18px;height:18px}
.contact-card .cc-btn.cc-email{background:var(--stamp)}
.cc-btns{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:560px){.contact-card{flex-direction:column;align-items:stretch;text-align:center}.contact-card .cc-btn{justify-content:center}.cc-btns{flex-direction:column}}

/* ─── TASK BUNDLES ─── */
.bundle-wrap{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 6px}
.bundle-btn{font-family:inherit;font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:all .15s}
.bundle-btn:hover{border-color:var(--ink);background:var(--paper);transform:translateY(-1px)}
.bundle-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bundle-ico{font-size:16px}
/* ─── TYPE TABS ─── */
.type-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
.type-tab{font-family:inherit;font-size:13px;font-weight:600;padding:8px 15px;border-radius:8px;
  border:1.5px solid var(--line);background:var(--white);color:var(--txt-2);cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:7px}
.type-tab:hover{border-color:var(--ink);color:var(--ink)}
.type-tab.on{background:var(--stamp);border-color:var(--stamp);color:#fff}
.tt-count{font-size:11px;background:var(--paper-2);color:var(--txt-2);padding:1px 7px;border-radius:10px;font-weight:600}
.type-tab.on .tt-count{background:rgba(255,255,255,.25);color:#fff}
.tt-sel{font-size:11px;background:var(--approve);color:#fff;padding:1px 7px;border-radius:10px;font-weight:700}
/* ─── SUGGESTED PICKS ─── */
.pick-suggest{border-color:var(--stamp)!important;background:var(--stamp-soft)}
.sug-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--stamp);
  background:#fff;padding:2px 6px;border-radius:4px;margin-left:7px;vertical-align:middle}
@media(max-width:560px){.bundle-btn{font-size:12.5px;padding:10px 14px;flex:1 1 auto;justify-content:center}}
/* ─── ADD MORE FORMS (suggestion list) ─── */
.suggest-list{display:flex;flex-direction:column;gap:8px}
.suggest-row{display:flex;align-items:center;gap:14px;background:var(--white);border:1.5px solid var(--line);
  border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .15s;user-select:none}
.suggest-row:hover{border-color:var(--stamp)}
.suggest-row.added{border-color:var(--approve);background:var(--approve-soft)}
.suggest-row-main{flex:1;min-width:0}
.suggest-row-label{font-size:13.5px;font-weight:600;color:var(--txt)}
.suggest-row-note{font-size:11.5px;color:var(--txt-2);margin-top:2px}
.suggest-row-delta{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--stamp);white-space:nowrap;flex-shrink:0}
.suggest-row.added .suggest-row-delta{color:var(--approve)}
.suggest-row-btn{font-family:inherit;font-weight:600;font-size:12.5px;color:var(--stamp);white-space:nowrap;flex-shrink:0}
.suggest-row.added .suggest-row-btn{color:var(--approve)}
@media(max-width:560px){
  .suggest-row{flex-wrap:wrap;gap:6px 14px}
  .suggest-row-main{flex:1 1 100%}
}

/* ─── TASK PAGES (e.g. /vehicle-transfer) ─── */
/* Collapsed "see every form" escape hatch — a task page pre-selects and
   hides the full type-tabs+picks selector (#fullFormPicker) behind this,
   so the page reads as "here's your task's forms" rather than the full
   31-form catalog, while staying one click away, never a dead end. */
.picker-toggle-line{display:block;width:100%;text-align:left;font-family:inherit;font-size:13px;font-weight:600;color:var(--stamp);background:none;border:none;border-top:1px dashed var(--line);padding:12px 0 0;margin:-10px 0 20px;cursor:pointer}
.picker-toggle-line:hover{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════
   TASK-PAGE TOOL LAYOUT v2 — compact head, AI-first box, wide field grid.
   Everything below is scoped to elements that ONLY exist on a rewritten
   task page (.task-head, .task-tool, #aiBox, #addFormsPanel, etc.) — the
   root index.html and any not-yet-rewritten task page never render these
   ids/classes, so none of this can change how they look. Where a rule
   touches a class shared with the old layout (.grid2), it's nested under
   .task-tool so the old, unscoped .grid2 rule still wins everywhere else. ═══════════════════════════════════════════════════════════════════════ */

/* ─── compact 2-line task head (replaces .hero on a rewritten task page) ─── */
.task-head{background:var(--ink);padding:34px 20px}
.task-head-in{max-width:1600px;margin:0 auto;padding:0 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.task-head-text h1{color:#fff;font-size:26px;font-weight:700;letter-spacing:-.3px}
.task-head-text p{color:rgba(255,255,255,.65);font-size:14.5px;margin-top:4px}
.task-head-actions{display:flex;align-items:center;gap:8px}
.btn-add-forms{font-family:inherit;font-weight:600;font-size:13.5px;color:#fff;background:var(--stamp);border:none;border-radius:8px;padding:10px 16px;cursor:pointer;white-space:nowrap}
.btn-add-forms:hover{background:#c03f1a}
.icon-btn-ghost{font-family:inherit;font-size:15px;color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:8px;width:38px;height:38px;cursor:pointer;flex-shrink:0}
.icon-btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.add-forms-line-mobile{display:none}
@media(max-width:680px){
  .task-head-text h1{font-size:22px}
  .btn-add-forms{display:none}
}

/* ─── wide field grid (3 → 2 → 1 columns), scoped to a rewritten task page's #tool ─── */
.task-tool .tool-wrap{margin-top:0}
.task-tool .grid2{grid-template-columns:1fr}
@media(min-width:1100px){.task-tool .grid2{grid-template-columns:1fr 1fr}}
@media(min-width:1400px){.task-tool .grid2{grid-template-columns:1fr 1fr 1fr}}

/* ─── AI box: three states (cta / picker / summary), one visible at a time ─── */
.ai-box{border:1.5px solid var(--stamp);border-radius:14px;background:linear-gradient(180deg,var(--stamp-soft) 0%,var(--white) 160px);padding:22px 24px;margin-bottom:8px}
.ai-box-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ai-box-cta-icon{font-size:28px;flex-shrink:0}
.ai-box-cta-text{flex:1;min-width:220px}
.ai-box-cta-text h4{font-size:16.5px;font-weight:700;color:var(--ink)}
.ai-box-cta-text p{font-size:13px;color:var(--txt-2);margin-top:3px}
.ai-box-free-line{text-align:center;font-size:12px;color:var(--txt-3);margin-top:14px}
@media(max-width:560px){
  .ai-box-cta{flex-direction:column;align-items:stretch;text-align:center}
  .ai-box-cta .btn-stamp{justify-content:center}
}

.ai-box-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:4px 2px}
.ai-box-summary span:first-child{font-size:14px;font-weight:600;color:var(--approve)}
.ai-box-summary-more{font-size:12.5px;color:var(--stamp);white-space:nowrap}

.ai-box-picker-head{margin-bottom:14px}
.ai-box-picker-head h4{font-size:15.5px;font-weight:700;color:var(--ink)}
.ai-box-picker .consent-chk{background:var(--paper)}
.ai-box-picker .upload-slot{transition:border-color .15s}
.ai-box-picker .upload-slot.ready{border-color:var(--approve);background:var(--approve-soft)}
.ai-box-picker .checkout-box{border-color:var(--line)}
.extra-photo-block{margin-top:14px;font-size:12.5px;color:var(--txt-2)}
.extra-photo-block summary{cursor:pointer;font-weight:600;color:var(--txt-2)}
.extra-photo-block[open] summary{margin-bottom:10px}

/* ─── Add Forms — desktop dropdown, mobile bottom sheet ─── */
.add-forms-backdrop{position:fixed;inset:0;background:rgba(20,40,80,.35);z-index:399}
.add-forms-panel{position:fixed;top:78px;right:max(32px,calc(50vw - 768px));width:400px;max-width:calc(100vw - 40px);max-height:calc(100vh - 100px);overflow-y:auto;background:#fff;border-radius:14px;box-shadow:0 16px 48px rgba(20,40,80,.25);z-index:400;padding:18px 20px 22px}
.add-forms-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.add-forms-panel-head h4{font-size:15.5px;font-weight:700}
.add-forms-panel .fset{margin-bottom:20px}
.add-forms-panel .fset:last-child{margin-bottom:4px}
.add-forms-panel .fset>h4{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--txt-2);margin-bottom:10px}
@media(max-width:680px){
  .add-forms-line-mobile{display:block;width:100%;text-align:left;font-family:inherit;font-weight:600;font-size:13.5px;color:var(--stamp);background:var(--stamp-soft);border:1px dashed var(--stamp);border-radius:8px;padding:11px 14px;cursor:pointer;margin-bottom:16px}
  .add-forms-panel{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;max-height:85vh;border-radius:16px 16px 0 0;padding:16px 18px calc(env(safe-area-inset-bottom,0px) + 20px)}
}
body.no-scroll{overflow:hidden}

/* ─── bottom actions: Preview + Generate ─── */
.bottom-actions{display:flex;gap:12px;flex-wrap:wrap;padding-top:8px;border-top:2px dotted var(--line);margin-top:6px;padding-top:22px}
.bottom-actions .btn-generate{flex:1 1 auto;justify-content:center}
.btn-preview{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--white);color:var(--ink);font-weight:600;font-size:15px;padding:15px 26px;border-radius:9px;border:1.5px solid var(--ink);cursor:pointer;font-family:inherit;transition:all .15s;flex:1 1 auto}
.btn-preview:hover{background:var(--paper)}
.blank-forms-link{margin-top:12px;text-align:center}
.link-btn{font-family:inherit;font-size:12.5px;color:var(--txt-2);background:none;border:none;text-decoration:underline;cursor:pointer;padding:0}
.link-btn:hover{color:var(--stamp)}

/* ─── PDF preview modal ─── */
.pdf-preview-box{background:#fff;border-radius:14px;max-width:900px;width:100%;height:88vh;padding:0;display:flex;flex-direction:column;overflow:hidden}
.pdf-preview-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.pdf-preview-head h3{font-size:15.5px;font-weight:700}
.pdf-preview-frame{flex:1;border:none;width:100%}

/* ─── FONT-SIZE BUMP ON MOBILE — held closer, deserves to be a little
   bigger still, not smaller. Input font-size never drops below 16px
   anywhere (mobile or desktop) — under 16px, iOS Safari auto-zooms the
   page on focus, which is jarring; see .fld input above. ─── */
@media(max-width:680px){
  .fld label,.calc-fld label{font-size:13.5px}
  .fld-hint,.calc-hint{font-size:12.5px}
  .fld input{font-size:16.5px}
  .calc-fld input,.calc-fld select{font-size:16.5px}
  .upload-grid{grid-template-columns:1fr}
  .upload-slot-name{font-size:15px}
  .upload-slot-state{font-size:11.5px}
  /* The consent reminder wraps onto its own line at narrow widths (the
     "· Give consent..." middot then dangles alone) — the consent
     checkbox is already right at the top of this same panel, so drop
     the per-box reminder here rather than let it wrap awkwardly. */
  .consent-hint{display:none}
  .status{font-size:14.5px}
  .consent-chk,.ai-box-picker .consent-chk{font-size:15px}
  .doc-id-slot{padding:12px}
  .doc-party-head{font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}