@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/public-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ==========================================================================
   United Business Center (Auto Tags & Insurance): landing page
   Layout concept: left-aligned, asymmetric. Sticky left rails beside long lists,
   one pinned scroll story (How it works) and a hero that draws the brand outline.
   Voice: road-sign / DMV-form vernacular. Condensed heavy gothic for display
   (Archivo, width axis), plain humanist text face for reading (Public Sans).
   Single deliberate light look; palette A is the default, B and C are preview options.
   ========================================================================== */
:root{
  --f-display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --navy:#0B2349;          /* brand blue: lines, bands, strong text */
  --ink:#14213D;           /* body text */
  --muted:#52607A;         /* secondary text */
  --bg:#F3F6FB;            /* page ground */
  --paper:#FFFFFF;         /* panels, form, rows on hover-less state */
  --rule:rgba(11,35,73,.16);
  --field:#76839B;         /* form control outline (3:1 on white) */
  --glow:rgba(31,95,191,.10);

  --cta:#B22234; --cta-fg:#FFFFFF; --cta-hover:#8F1A29;
  --link:#B22234;
  --star:#B22234;          /* logo star: fixed in every palette */
  --star-dark:#E8394D;     /* logo star on navy */
  --logo-star:#F4B400;     /* logo star is yellow (screws stay red) */
  --logo-star-dark:#FFC93C;/* yellow star on navy */
  --wa:#157A45;            /* open / online green */

  --band:#0B2349; --band-fg:#FFFFFF; --band-muted:#B9C5DC; --band-rule:rgba(255,255,255,.18);
  --cta-band:#FFFFFF; --cta-band-fg:#0B2349;
  --focus:#1F5FBF;

  --gut:clamp(16px,4vw,48px);
  --hdr:72px;
  --logo-ar:2232/468;          /* horizontal lockup (symbol + UNITED BUSINESS CENTER / AUTO TAGS & INSURANCE) */
  --r-ctl:10px; --r-plate:14px; --r-panel:24px;
}
:root[data-pal="b"]{
  --bg:#FBF6EA; --muted:#4F586B; --rule:rgba(11,35,73,.18); --glow:rgba(230,169,42,.16);
  --cta:#E6A92A; --cta-fg:#0B2349; --cta-hover:#C98F18; --link:#8A5A00;
  --cta-band:#E6A92A; --cta-band-fg:#0B2349;
}
:root[data-pal="c"]{
  --bg:#E8F1FC; --muted:#506079; --rule:rgba(11,35,73,.16); --glow:rgba(242,140,40,.14);
  --cta:#F28C28; --cta-fg:#0B2349; --cta-hover:#D9751A; --link:#1F5FBF;
  --cta-band:#F28C28; --cta-band-fg:#0B2349;
}

*,*::before,*::after{box-sizing:border-box}
/* scrollbars: page and dropdown list share one style: slim rounded navy thumb, no arrow buttons, light track
   (an explicit track colour keeps it light even where the page ends in the navy footer) */
:root{color-scheme:light}
html::-webkit-scrollbar,.sel-list::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-button,.sel-list::-webkit-scrollbar-button{display:none;width:0;height:0}
html::-webkit-scrollbar-track{background:var(--bg)}
.sel-list::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb,.sel-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--navy) 32%,transparent);border:3px solid transparent;border-radius:999px;background-clip:padding-box;min-height:44px}
html::-webkit-scrollbar-thumb:hover,.sel-list::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--navy) 55%,transparent)}
html::-webkit-scrollbar-thumb:active,.sel-list::-webkit-scrollbar-thumb:active{background-color:var(--navy)}
html::-webkit-scrollbar-corner{background:var(--bg)}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--navy) 40%,transparent) var(--bg)}.sel-list{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--navy) 40%,transparent) transparent}}
html{scroll-padding-top:calc(var(--hdr) + 16px);background:var(--band) linear-gradient(var(--bg),var(--bg)) 0 0/100% 50% no-repeat}
/* the page ends in the navy footer: no light strip under it on iPhones (home-indicator area and the bounce past the end are navy too);
   the footer itself reaches under the home indicator instead of the page getting extra padding */
:root{padding-bottom:0!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:80%;letter-spacing:-.012em;word-spacing:.12em;text-wrap:balance;color:var(--navy)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.band :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r-ctl);font-weight:700;text-decoration:none}
.skip:focus{top:max(12px,env(safe-area-inset-top,0px))}

.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(64px,9vw,128px)}
.h2{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.02}
.lead{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--muted);max-width:34em}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 22px;border:2px solid transparent;border-radius:var(--r-ctl);font:700 1rem/1.2 var(--f-body);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-cta{background:var(--cta);color:var(--cta-fg)}
.btn-cta:hover{background:var(--cta-hover)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-band{background:var(--cta-band);color:var(--cta-band-fg)}
.btn-band:hover{filter:brightness(.92)}
.btn-line{border-color:var(--band-fg);color:var(--band-fg)}
.btn-line:hover{background:var(--band-fg);color:var(--band)}
.btn-sm{min-height:42px;padding:0 16px;font-size:.9375rem}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border-bottom:1px solid var(--rule)}
.prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--star);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.hdr .wrap{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);height:var(--hdr)}
.logo{display:block;flex:none;color:var(--navy);--star-c:var(--star);--ystar-c:var(--logo-star)}
.logo svg{display:block;height:auto;width:min(260px,calc(100vw - 150px));aspect-ratio:var(--logo-ar)}
@media (min-width:720px){:root{--hdr:84px}.logo svg{width:auto;height:58px}}
@media (min-width:1280px){.logo svg{height:64px}}
.nav{display:none;margin-left:auto;gap:clamp(16px,2.2vw,32px)}
.nav a{font-weight:600;font-size:.9375rem;text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="true"]{border-color:var(--navy)}
.hdr-end{display:flex;align-items:center;gap:12px;margin-left:auto}
.lang{display:inline-flex;border:2px solid var(--navy);border-radius:var(--r-ctl);overflow:hidden}
.lang button{min-width:44px;min-height:40px;border:0;background:transparent;color:var(--navy);font:700 .875rem var(--f-body);letter-spacing:.04em;cursor:pointer}
.lang button + button{border-left:2px solid var(--navy)}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff}
/* language dropdown (4 languages): globe + current code; menu with full names */
.lang-dd{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 12px;border:2px solid var(--navy);border-radius:var(--r-ctl);background:transparent;color:var(--navy);font:700 .875rem var(--f-body);letter-spacing:.04em;cursor:pointer}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:var(--navy);color:#fff}
.lang-btn .ico{width:18px;height:18px}
.lang-chev{transition:transform .2s}.lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:184px;padding:6px;border-radius:14px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 18px 40px -18px rgba(11,35,73,.45);display:grid;gap:2px;transform-origin:top right;animation:lang-in .16s ease-out}
.lang-menu[hidden]{display:none}
@keyframes lang-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.lang-menu button{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:600 .9375rem var(--f-body);text-align:left;cursor:pointer}
.lang-menu button b{font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.lang-menu button:hover{background:color-mix(in srgb,var(--navy) 8%,transparent)}
.lang-menu button[aria-pressed="true"]{background:var(--navy);color:#fff}.lang-menu button[aria-pressed="true"] b{color:#fff}
.hdr .btn{display:none}
@media (min-width:720px){.hdr .btn{display:inline-flex}}
@media (min-width:1180px){.nav{display:flex}.nav + .hdr-end{margin-left:0}}
/* ---------- navy bands ---------- */
.band{position:relative;isolation:isolate;background:var(--band);color:var(--band-fg)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.band h2,.band h3{color:var(--band-fg)}
.band .lead{color:var(--band-muted)}

/* ---------- footer ---------- */
.ftr{padding-block:clamp(48px,7vw,88px) calc(64px + env(safe-area-inset-bottom,0px))}
.ft-grid{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
.ft-logo{color:#fff;--star-c:var(--star-dark);--ystar-c:var(--logo-star-dark);display:block;width:min(100%,340px)}
.ft-logo svg{display:block;width:100%;height:auto;aspect-ratio:var(--logo-ar)}
.ftr h3{font:700 1rem var(--f-body);font-stretch:100%;letter-spacing:0;margin-bottom:10px;color:var(--band-muted)}
.ftr address,.ftr p,.ftr dd{font-style:normal;margin:0;color:var(--band-fg)}
.ftr a{text-decoration:none}
.ftr a:hover{text-decoration:underline;text-underline-offset:4px}
.ft-hours{display:grid;gap:4px}
.ft-hours div{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}
.ft-hours dt{color:var(--band-fg)}
.ftr .disc{margin-top:44px;padding-top:24px;border-top:1px solid var(--band-rule);color:var(--band-muted);font-size:.875rem;text-align:center}
.ftr .disc .copy{white-space:nowrap}
.ftr .ft-lbl{display:block;color:var(--band-muted);font-size:.8125rem;line-height:1.3;margin-top:6px}
.ftr a[href^="tel:"]{white-space:nowrap}
@media (min-width:560px){.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}.ft-hours dd{white-space:nowrap}}
@media (min-width:1040px){.ft-grid{grid-template-columns:1.2fr 1.15fr 1fr 1.25fr;gap:36px}}

.ico{vertical-align:-.2em}
/* ==========================================================================
   United Business Center: blog pages (index + articles). Same tokens, header, buttons and footer as the landing page
   (those rules are copied in from landing/src/style.css by scripts/build_blog.py); everything below is blog-only.
   Mobile first: 1 column; 2 columns from 640px; article sidebar from 1000px.
   ========================================================================== */
.logo img{display:block;height:auto;width:min(260px,calc(100vw - 150px));aspect-ratio:var(--logo-ar)}
@media (min-width:720px){.logo img{width:auto;height:58px}}
@media (min-width:1280px){.logo img{height:64px}}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink);font:600 .9375rem var(--f-body);text-decoration:none}
.lang-menu a b{font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.lang-menu a:hover{background:color-mix(in srgb,var(--navy) 8%,transparent)}
.lang-menu a[aria-current="true"]{background:var(--navy);color:#fff}.lang-menu a[aria-current="true"] b{color:#fff}
.nav a[aria-current="page"]{border-color:var(--navy)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;color:var(--navy);font:700 .875rem var(--f-body);letter-spacing:.04em;text-decoration:none}
.lang a + a{border-left:2px solid var(--navy)}
.lang a[aria-current="true"]{background:var(--navy);color:#fff}
.lang a:hover:not([aria-current="true"]){background:color-mix(in srgb,var(--navy) 10%,transparent)}
.ft-logo img{display:block;width:100%;height:auto;aspect-ratio:var(--logo-ar)}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.ft-nav a{font-weight:600}

/* ---------- shared bits ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:4px 10px;list-style:none;margin:0 0 18px;padding:0;font-size:.875rem;color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:10px;opacity:.5}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.chip{display:inline-flex;align-items:center;min-height:28px;padding:2px 12px;border-radius:999px;background:var(--navy);color:#fff;font:700 .75rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase}
.chip-ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;color:var(--muted);font-size:.9rem}
.meta li{display:inline-flex;align-items:center;gap:6px}
.meta .ico{width:1.05em;height:1.05em}
.ci{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- index ---------- */
.b-hero{padding-block:clamp(32px,6vw,80px) clamp(20px,3vw,36px)}
.b-hero h1{font-size:clamp(2.2rem,5.6vw,4.25rem);line-height:1;max-width:16em}
.b-hero .lead{margin-top:18px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.filters button{min-height:44px;padding:0 18px;border:2px solid var(--navy);border-radius:999px;background:transparent;color:var(--navy);font:700 .9375rem var(--f-body);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--navy);color:#fff}
.filters button:hover:not([aria-pressed="true"]){background:color-mix(in srgb,var(--navy) 10%,transparent)}
.cards{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(56px,8vw,112px);margin:0;list-style:none;padding-inline:0}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media (min-width:1040px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-panel);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.card[hidden]{display:none}
.card:hover,.card:focus-within{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 14px 34px -18px rgba(11,35,73,.45)}
.card-img{aspect-ratio:1200/630;background:var(--navy);overflow:hidden}
.card-img .ci{transition:transform .5s}.card:hover .card-img .ci{transform:scale(1.04)}
.card-b{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px;flex:1}
.card h2,.card h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.1}
.card h2 a,.card h3 a{text-decoration:none}
.card h2 a::after,.card h3 a::after{content:"";position:absolute;inset:0}   /* whole card is one tap target */
.card{position:relative}
.card p{color:var(--muted);font-size:.9875rem;line-height:1.5}
.card .more{margin-top:auto;padding-top:6px;font-weight:700;color:var(--link);display:inline-flex;align-items:center;gap:6px}
.card .more .ico{transition:transform .2s}.card:hover .more .ico{transform:translateX(4px)}

/* ---------- article ---------- */
.post-hero{padding-block:clamp(24px,4.5vw,56px) 0}
.post-hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.02;margin:14px 0 16px;max-width:18em}
.post-hero .meta{margin-bottom:26px}
.ph-grid{display:grid;gap:8px}
@media (min-width:1000px){.ph-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:56px}.post-hero h1{font-size:clamp(2.2rem,3.6vw,3.2rem)}.post-hero .meta{margin-bottom:0}}
.cover{border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--rule);aspect-ratio:1200/630;background:var(--navy);margin:0}
.cover{position:relative}
.cover .credit{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(11,35,73,.62);color:#fff;font-size:.72rem;line-height:1.4;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cover .credit a{color:#fff;text-decoration:none}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;padding-block:clamp(28px,4vw,48px) clamp(56px,8vw,104px)}
@media (min-width:1000px){.post-grid{grid-template-columns:minmax(0,1fr) 320px;gap:64px}}
.aside{display:none}
@media (min-width:1000px){.aside{display:grid;gap:20px;align-self:start;position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 24px)}}
.panel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-panel);padding:20px 22px}
.panel h2,.panel h3{font:800 .8125rem/1.2 var(--f-body);font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;word-spacing:0}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.toc a{display:block;padding:7px 0 7px 14px;border-left:3px solid var(--rule);text-decoration:none;font-size:.9375rem;line-height:1.35;color:var(--ink)}
.toc a:hover,.toc a.on{border-color:var(--cta);color:var(--navy);font-weight:600}
.panel-cta{background:var(--band);color:var(--band-fg);border-color:transparent}
.panel-cta h2,.panel-cta h3{color:var(--band-muted)}
.panel-cta p{color:var(--band-fg);margin-bottom:14px;font-size:1rem}
.panel-cta .btn{width:100%;margin-top:8px}
.toc-m{margin-bottom:26px}
.toc-m summary{cursor:pointer;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"+";font-size:1.4rem;line-height:1}
.toc-m[open] summary::after{content:"\2212"}
@media (min-width:1000px){.toc-m{display:none}}

.prose{min-width:0;overflow-wrap:break-word;max-width:70ch;font-size:1.125rem;line-height:1.7}
.prose > * + *{margin-top:0}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:clamp(1.65rem,3.1vw,2.25rem);line-height:1.05;margin:2.1em 0 .6em;scroll-margin-top:calc(var(--hdr) + 24px)}
.prose h3{font:800 1.25rem/1.25 var(--f-display);font-stretch:85%;margin:1.6em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;display:grid;gap:.5em}
.prose li::marker{color:var(--cta);font-weight:700}
.prose a{overflow-wrap:anywhere;color:var(--link);text-underline-offset:3px;text-decoration-thickness:2px}
.prose a:hover{color:var(--cta-hover)}
.prose strong{color:var(--navy)}
.tldr{background:var(--paper);border:2px solid var(--navy);border-radius:var(--r-panel);padding:20px 24px;margin:0 0 1.6em;font-size:1.0625rem;line-height:1.6}
.tldr b{display:block;font:800 .8125rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--cta);margin-bottom:6px}
.lede{font-size:1.1875rem;color:var(--ink)}
.note{margin:0 0 1.3em;padding:14px 18px;border-left:5px solid var(--cta);background:var(--paper);border-radius:0 12px 12px 0;font-size:1.0625rem;line-height:1.55}
.tbl{overflow-x:auto;margin:0 0 1.4em;border:1px solid var(--rule);border-radius:14px;background:var(--paper)}
.tbl table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem;line-height:1.45}
.tbl th,.tbl td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.tbl th{background:color-mix(in srgb,var(--navy) 8%,transparent);color:var(--navy);font-weight:700}
.tbl tr:last-child td{border-bottom:0}
.steps,.checklist{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-panel);padding:22px 24px;margin:0 0 1.6em}
.steps h2,.checklist h2{margin:0 0 14px!important;font-size:1.5rem!important}
.steps ol{list-style:none;counter-reset:s;padding:0;margin:0;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 14px}
.steps li::before{content:counter(s);grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:800 1rem var(--f-body)}
.steps li b{color:var(--navy);display:block;line-height:1.3}
.steps li span{font-size:1.0625rem;line-height:1.55}
.checklist ul{list-style:none;padding:0;margin:0;gap:10px}
.checklist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.checklist li::before{content:"";width:22px;height:22px;margin-top:2px;border:2px solid var(--navy);border-radius:6px;background:linear-gradient(135deg,transparent 46%,var(--navy) 46% 54%,transparent 54%)}
.faq-q{font:800 1.25rem/1.25 var(--f-display);font-stretch:85%;color:var(--navy);margin:1.4em 0 .3em}
.src li{font-size:.9875rem;line-height:1.45}
.fine{font-size:.9rem;line-height:1.55;color:var(--muted);border-top:1px solid var(--rule);margin-top:2.4em;padding-top:1.2em}
.cta-box{margin:2.4em 0 0;border-radius:var(--r-panel);background:var(--band);color:var(--band-fg);padding:clamp(24px,4vw,36px);position:relative;isolation:isolate;overflow:hidden}
.cta-box h2{color:#fff;margin:0 0 10px!important;font-size:clamp(1.6rem,3vw,2.2rem)}
.cta-box p{color:var(--band-fg);margin:0 0 18px}
.cta-box .acts{display:flex;flex-wrap:wrap;gap:12px}
.btn-line{border-color:#fff;color:#fff}.btn-line:hover{background:#fff;color:var(--navy)}
.rel{padding-block:0 clamp(56px,8vw,104px)}
.rel h2{font-size:clamp(1.6rem,3vw,2.25rem);margin-bottom:22px}

/* floating WhatsApp button on phones (the landing has the full contact menu) */
.wa-fab{display:none}
@media (max-width:719px){
  .wa-fab{display:grid;place-items:center;position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:61;width:52px;height:52px;border-radius:50%;color:#fff;text-decoration:none;
    border:1px solid rgba(255,255,255,.42);background:color-mix(in srgb,var(--navy) 78%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 8px 24px -8px rgba(11,35,73,.6)}
  .wa-fab .ico{width:24px;height:24px}
  .post-hero h1{font-size:clamp(1.9rem,8.4vw,2.4rem)}
  .prose{font-size:1.0625rem}
  .ftr{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* phones: tables scroll sideways inside their box (hint shadow on the right edge) */
@media (max-width:719px){.tbl{background:linear-gradient(90deg,var(--paper) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--paper) 30%,transparent) right/40px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,rgba(11,35,73,.18),transparent) right/12px 100% no-repeat scroll,var(--paper)}.tbl th,.tbl td{padding:10px 12px}.b-hero h1,.post-hero h1{overflow-wrap:break-word;hyphens:auto}}
/* buttons inside the article text: the prose link colour (red, underlined) must not leak into them */
.prose a.btn{text-decoration:none;overflow-wrap:normal}
.prose a.btn-band,.panel-cta a.btn-band{color:var(--cta-band-fg)}
.prose a.btn-band:hover{color:var(--cta-band-fg)}
.prose a.btn-line,.panel-cta a.btn-line{color:#fff;border-color:#fff;background:transparent}
.prose a.btn-line:hover,.panel-cta a.btn-line:hover{background:#fff;color:var(--navy)}

/* ==========================================================================
   Card rail (phones, < 720px): every blog card on one row, swipe with scroll-snap, the next card peeks in (84% width),
   pagination below (pill dots up to 8 cards, a progress track beyond) + prev/next buttons + "2 / 12" counter.
   Progressive extras: cards scale/fade in with a scroll-driven animation where `animation-timeline: view()` exists.
   Markup: any <ul data-rail> list; the controls are added by carousel.js. Desktop/tablet keep their grid.
   ========================================================================== */
@media (max-width:719px){
  [data-rail]{display:flex!important;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * max(var(--gut),env(safe-area-inset-left,0px)));padding:6px max(var(--gut),env(safe-area-inset-left,0px)) 16px;
    scroll-padding-inline:max(var(--gut),env(safe-area-inset-left,0px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
  [data-rail]::-webkit-scrollbar{display:none}
  [data-rail] > li{flex:0 0 84%;max-width:360px;scroll-snap-align:start;scroll-snap-stop:always}
  [data-rail] > li[hidden]{display:none}
  [data-rail] > li:hover,[data-rail] > li:focus-within{transform:none}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      [data-rail] > li{animation:rail-in linear both;animation-timeline:view(inline);animation-range:cover 0% cover 38%}
      @keyframes rail-in{from{opacity:.5;transform:scale(.93)}to{opacity:1;transform:none}}
    }
  }
}
/* controls (shown by carousel.js only where the list is a carousel) */
.rail-ui{display:flex;align-items:center;gap:12px;margin-top:6px}
.rail-ui[hidden]{display:none}
.rail-dots{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.rail-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--navy) 22%,transparent);cursor:pointer;transition:width .35s cubic-bezier(.2,.8,.2,1),background-color .25s;position:relative}
.rail-dot::after{content:"";position:absolute;inset:-12px -4px}          /* 32px tap area around an 8px dot */
.rail-dot[aria-current="true"]{width:26px;background:var(--navy)}
.rail-track{flex:1;height:4px;border-radius:999px;background:color-mix(in srgb,var(--navy) 14%,transparent);overflow:hidden}
.rail-track i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--navy);transform-origin:0 50%;transform:scaleX(.1);transition:transform .25s}
.rail-count{font:700 .8125rem var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rail-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--navy) 30%,transparent);
  background:color-mix(in srgb,var(--paper) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--navy);cursor:pointer;transition:background-color .2s,opacity .2s,border-color .2s}
.rail-btn:active{background:var(--navy);color:#fff}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* data-rail-all on tablets and desktops: 2 cards per view (720-1039px), 3 per view from 1040px; arrows, progress and counter below */
@media (min-width:720px){
  [data-rail-all]{display:flex!important;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    padding:8px 2px 18px;margin-inline:-2px;scrollbar-width:none}
  [data-rail-all]::-webkit-scrollbar{display:none}
  [data-rail-all] > li{flex:0 0 calc((100% - 20px) / 2);scroll-snap-align:start}
  .rail-ui{max-width:520px;margin-inline:auto}
  .rail-btn:not(:disabled):hover{background:var(--navy);color:#fff}
}
@media (min-width:1040px){[data-rail-all] > li{flex-basis:calc((100% - 40px) / 3)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}