/* Self hosted fonts. These were loaded from Google Fonts, which is a render blocking
   request to a third party on every page load. Same files the app already ships, so both
   surfaces render identically. Source: invoice-local/public/fonts. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-400-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-400-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-500-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-500-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-600-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-600-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-700-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-700-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-500-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-500-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-600-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-600-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-700-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-700-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;
}

/* Invoice Local — Midnight Ledger
   Single shared stylesheet for every page on invoicelocal.com.
   Sections: 1 tokens  2 base  3 chrome  4 buttons  5 home  6 prose  7 content pages */

/* ---------- 1. tokens ---------- */
:root{
  --navy:#0B1224; --navy-2:#0F1730; --navy-3:#141d3a;
  --blue:#2E4FD0; --blue-lt:#5c7bf0; --brass:#C8A45C;
  /* --ink-faint was #6f7ba0, which measured 4.45:1 on the page, 4.23:1 on a card and 3.96:1 on
     the lightest panel — under the 4.5:1 WCAG AA floor on all three, on 190 elements across every
     page. #828db0 clears it everywhere (5.67 / 5.39 / 5.04) with enough headroom that the next
     background tweak will not quietly drop it back under. */
  --ink:#EAEFFB; --ink-soft:#aab4cf; --ink-faint:#828db0;
  --line:rgba(255,255,255,.08); --maxw:1120px; --measure:65ch;
  --disp:'Space Grotesk',system-ui,sans-serif; --body:'Instrument Sans',system-ui,sans-serif;
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html{scroll-behavior:smooth}
/* Reduced motion already switches off the .reveal entrance, but a long animated jump to an
   anchor is the other half of what triggers motion sensitivity, and it was still on. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--navy);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* Skip link: off screen until it takes focus, then a normal button at the top left. Positioned
   fixed so it clears the sticky header rather than appearing behind it. main gets tabindex="-1"
   so the jump actually moves focus, not just the scroll position — without it a keyboard user
   lands visually on the content while the next Tab returns them to the nav they just skipped. */
.skip{position:fixed;top:-100px;left:12px;z-index:200;background:var(--blue);color:#fff;
  font-family:var(--disp);font-weight:600;font-size:14px;padding:12px 18px;border-radius:12px;
  transition:top .15s}
.skip:focus{top:12px}
main:focus{outline:none}
/* height:auto is NOT optional here. Every image carries width and height attributes so the
   browser can reserve space and avoid layout shift, but those attributes also set the USED
   height. Without height:auto, max-width or width:100% narrows the box while the height
   attribute holds, and a 600x848 invoice thumbnail renders 139x848: a tall thin smear with
   unreadable text. Rules that need a fixed height set it themselves and win on specificity. */
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.12;letter-spacing:-.02em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:820px}
.eyebrow{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);display:block}
/* The hero eyebrow ends in a link to the trades hub, and it inherited the eyebrow's brass
   exactly, so the whole line read as a label. Quiet underline, same treatment as the strip. */
.eyebrow a{text-decoration:underline;text-decoration-color:rgba(200,164,92,.4);text-underline-offset:4px;transition:.16s}
.eyebrow a:hover{color:#e0bd72;text-decoration-color:#e0bd72}
svg.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- 3. chrome ---------- */
/* The blur lives on a pseudo element, not on <header> itself. An element with a
   backdrop-filter becomes the containing block for its position:fixed descendants, which
   pinned the mobile drawer inside the 68px header box and left it behind the page. */
header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}
header::before{content:"";position:absolute;inset:0;background:rgba(11,18,36,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:-1}
header nav{display:flex;align-items:center;gap:18px;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:18px;color:var(--ink);flex:0 0 auto}
.brand img{width:34px;height:34px;border-radius:9px}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1 1 auto;position:relative}
.nav-end{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto}
.btn--sm{padding:9px 16px;font-size:14px;border-radius:10px}

.nav-top{display:inline-flex;align-items:center;gap:5px;color:var(--ink-soft);font-size:15px;padding:9px 12px;border-radius:9px;white-space:nowrap;transition:.15s}
.nav-top:hover{color:var(--ink);background:rgba(255,255,255,.05)}
svg.cv{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .18s}
.nav-group{position:relative}
.nav-group:hover .nav-top,.nav-group:focus-within .nav-top{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-group:hover svg.cv,.nav-group:focus-within svg.cv{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:352px;background:var(--navy-2);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 26px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-blurb{color:var(--ink-faint);font-size:13px;margin:0 0 12px;line-height:1.45}
.nav-cols{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.nav-menu .nav-cols a,.nav-menu .nav-col a{color:var(--ink-soft);font-size:14px;padding:8px 10px;border-radius:8px;display:block;white-space:nowrap;transition:.14s}
.nav-menu .nav-cols a:hover,.nav-menu .nav-col a:hover{color:var(--ink);background:rgba(46,79,208,.16)}

/* Grouped mega menu. Twenty three trades as a flat list is a wall, not a menu, so they
   are grouped and the panel is anchored to the viewport rather than to its parent. */
/* Anchored to the nav row, not to the trigger and not to the viewport centre. Centring
   on the viewport pushed the panel 52px off the left edge, because the trigger sits on
   the left of a 940px panel. Width is capped against the viewport so it cannot overflow
   at any width above the 980px drawer breakpoint. */
.nav-menu--wide{min-width:0;width:min(940px,calc(100vw - 280px));left:0}
.nav-groups{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 12px}
.nav-col b{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);padding:6px 10px 8px}
@media(max-width:1180px){.nav-groups{grid-template-columns:repeat(3,1fr)}}
.nav-all{display:inline-block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);width:100%;color:var(--blue-lt);font-family:var(--disp);font-weight:600;font-size:13px}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04);cursor:pointer;padding:0;place-items:center;gap:5px;flex-direction:column;justify-content:center}
.burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{display:none}
@media(max-width:980px){
  .nav-links{display:none}
  .burger{display:flex}
  .drawer:not([hidden]){display:block;position:fixed;top:68px;left:0;right:0;bottom:0;background:var(--navy);border-top:1px solid var(--line);overflow-y:auto;z-index:59;-webkit-overflow-scrolling:touch}
  body.drawer-open{overflow:hidden}
  /* the sticky bottom call to action would otherwise sit on top of the open drawer */
  body.drawer-open .mcta{display:none}
  .dr-inner{padding:12px 20px calc(40px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
  .dr-link,.dr-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--line);padding:17px 2px;text-align:left;cursor:pointer;min-height:56px}
  .dr-toggle svg.cv{width:18px;height:18px;opacity:.75}
  .dr-toggle[aria-expanded="true"] svg.cv{transform:rotate(180deg)}
  .dr-panel{display:none;padding:6px 0 12px}
  .dr-toggle[aria-expanded="true"]+.dr-panel{display:block}
  .dr-panel a{display:block;color:var(--ink-soft);font-size:16px;padding:13px 14px;border-radius:10px;min-height:48px}
  .dr-sub{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);padding:14px 14px 4px}
  .dr-panel a:active{background:rgba(46,79,208,.18)}
  .dr-all{color:var(--blue-lt)!important;font-family:var(--disp);font-weight:600;font-size:14px}
  .dr-cta{width:100%;justify-content:center;margin-top:22px}
  .dr-play{display:flex;justify-content:center;margin-top:16px}
  .dr-play img{height:52px;width:auto}
}
.xs-hide{display:inline}
/* At 360px the brand, the call to action and the burger together measured 365px and
   pushed the page 5px wide. Measured, not guessed: the fix is to shorten the button
   label and tighten the bar rather than let the body scroll sideways. */
@media(max-width:420px){
  header nav{padding:0 14px;gap:8px}
  .brand{font-size:15.5px;gap:9px}
  .brand img{width:29px;height:29px}
  .btn--sm{padding:9px 12px;font-size:13px}
  .xs-hide{display:none}
  .nav-end{gap:8px}
  .burger{width:40px;height:40px}
  .drawer:not([hidden]){top:68px}
  .dr-inner{padding-left:14px;padding-right:14px}
}

footer{border-top:1px solid var(--line);padding:56px 0 40px;color:var(--ink-faint);font-size:14px;background:var(--navy-2)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1fr;gap:30px 24px}
.fbrand p{color:var(--ink-faint);font-size:14px;margin:14px 0 18px;max-width:34ch;line-height:1.6}
.fbrand .brand img{width:30px;height:30px}
.fbrand .badge-link img{height:48px}
.fcol h3{font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-bottom:14px;font-weight:600}
.fcol a{display:block;color:var(--ink-soft);font-size:14.5px;padding:6px 0;line-height:1.4}
.fcol a:hover{color:var(--ink)}
.fbase{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:13px}
.flegal{display:flex;gap:20px;flex-wrap:wrap}
/* 21px tall with no padding failed the 24x24 WCAG 2.2 AA target minimum; .fcol a already
   carried 6px and passed, so only this row needed it. */
.fbase a{display:inline-block;padding:4px 0}
.flegal a{color:var(--ink-soft)}
.flegal a:hover{color:var(--ink)}
@media(max-width:1180px){.fgrid{grid-template-columns:repeat(3,1fr)}.fbrand{grid-column:1 / -1}}
@media(max-width:620px){
  /* Tightened rather than collapsed. The footer runs to about 1600px on a phone, which is
     long, but it carries 39 internal links doing real work and hiding them behind an
     accordion is the worse trade. The row height still clears the 44px touch target once
     line-height is counted. */
  .fgrid{grid-template-columns:1fr 1fr;gap:22px 20px}
  footer{padding-bottom:96px}
  .fcol a{padding:6px 0;font-size:14px}
  .fcol h3{margin-bottom:10px}
  .fbase{margin-top:28px;justify-content:flex-start}
}
@media(max-width:380px){.fgrid{grid-template-columns:1fr}}

/* ---------- 4. buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:15px;padding:13px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.18s}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(46,79,208,.4)}
.btn--primary:hover{background:#3a5be0;transform:translateY(-1px)}
.btn--ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.badge-link{display:inline-flex;transition:.2s;line-height:0}
.badge-link:hover{transform:translateY(-2px)}
.badge-link img{height:58px;width:auto;display:block}
.cta-row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:32px}
.cta-row .badge-link img{height:56px}
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(11,18,36,.9);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.mcta .btn{width:100%;justify-content:center}
@media(max-width:760px){.mcta{display:block}}

/* ---------- 5. home ---------- */
.hero{position:relative;padding:80px 0 40px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse at center,rgba(46,79,208,.28),transparent 62%);z-index:0}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(38px,6.4vw,68px);max-width:900px;margin:18px auto 0}
/* Blue to lighter blue, NOT blue to brass. Those two hues sit on opposite sides of the
   wheel, so the midpoint of the sweep is a desaturated grey: on a phone the headline wrapped
   and "seconds" landed on that midpoint, reading as a rendering fault rather than an accent.
   box-decoration-break:clone gives every wrapped line its own full sweep instead of handing
   the second line the tail of the first. */
.hero h1 .grad{
  background:linear-gradient(120deg,var(--blue-lt),#a8bcff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero p.sub{font-size:clamp(17px,2.2vw,21px);color:var(--ink-soft);max-width:620px;margin:22px auto 0}
.microcopy{margin-top:16px;font-size:14px;color:var(--ink-faint);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.microcopy span{display:inline-flex;align-items:center;gap:6px}
.shots{display:flex;justify-content:center;align-items:flex-end;gap:22px;margin-top:56px;perspective:1600px}
.phone{width:248px;border-radius:34px;border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.55);background:#000;overflow:hidden}
.phone img{width:100%;border-radius:33px}
.phone.side{width:214px;opacity:.92;transform:translateY(20px) rotateY(12deg)}
.phone.side.r{transform:translateY(20px) rotateY(-12deg)}
@media(max-width:820px){.shots{gap:10px}.phone{width:200px}.phone.side{display:none}}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--navy-2)}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;padding:20px 24px;color:var(--ink-soft);font-size:15px}
/* Direct child only. `.strip span` also matched the wrapper around the text, turning it
   back into a gapped flex row and pushing every comma away from its word again. */
.strip .wrap>span{display:inline-flex;align-items:center;gap:9px}
.strip svg.i{font-size:18px;color:var(--brass)}
.strip b{color:var(--ink);font-family:var(--disp);font-weight:600}
/* "build on site", "in one tap" and "free forever" are links to the money pages. They
   inherited the strip's grey exactly, so nothing marked them as clickable. A quiet
   underline rather than a colour change, because the strip should stay calm. */
.strip a{text-decoration:underline;text-decoration-color:rgba(170,180,207,.38);text-underline-offset:3px;transition:.16s}
.strip a:hover{color:var(--ink);text-decoration-color:var(--ink)}

section.block{padding:92px 0}
section.block.tint{background:var(--navy-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{text-align:center;max-width:700px;margin:0 auto 54px}
.head h2{font-size:clamp(30px,4.4vw,44px);margin-top:14px}
.head p{color:var(--ink-soft);font-size:18px;margin-top:16px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid,.grid--2,.grid--4{grid-template-columns:1fr}}
.card{background:var(--navy-2);border:1px solid var(--line);border-radius:18px;padding:26px;transition:.2s}
.card:hover{border-color:rgba(46,79,208,.4);transform:translateY(-3px)}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(46,79,208,.14);border:1px solid rgba(46,79,208,.3);margin-bottom:16px;color:var(--blue-lt)}
.card .ic svg.i{font-size:22px}
.card h3{font-size:19px}
.card p{color:var(--ink-soft);font-size:15px;margin-top:8px}

.showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:860px){.showcase{grid-template-columns:1fr;gap:36px;text-align:center}}
.showcase h2{font-size:clamp(28px,4vw,40px);margin-top:14px}
.showcase p{color:var(--ink-soft);font-size:17px;margin-top:16px}
.showcase ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.showcase li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-soft)}
.showcase li svg.i{font-size:20px;color:var(--brass);flex:0 0 auto;margin-top:2px}
.showcase .art{display:flex;justify-content:center}
.showcase .art img{width:270px;border-radius:30px;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.5)}
@media(max-width:860px){.showcase li{justify-content:flex-start;text-align:left}}

.tpls{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:900px){.tpls{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tpls{grid-template-columns:repeat(2,1fr)}}
.tpl{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;transition:.2s}
.tpl:hover{transform:translateY(-4px);border-color:rgba(200,164,92,.45)}
.tpl img{border-radius:7px;box-shadow:0 12px 30px rgba(0,0,0,.4);width:100%}
/* The colour is stated rather than inherited. These cards are links now, and on the tool
   page they sit inside .prose, whose `a{color:blue}` rule turned all six template names
   blue while the identical row on the home page stayed white. */
.tpl .nm{font-family:var(--disp);font-weight:600;font-size:14px;margin-top:12px;color:var(--ink)}
.tpl .tg{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.tpl .tg.pro{color:var(--brass)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--navy-2);border:1px solid var(--line);border-radius:18px;padding:28px}
.step .n{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--navy);background:var(--brass);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px}
.step h3{font-size:19px}
.step p{color:var(--ink-soft);font-size:15px;margin-top:8px}

.prices{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:0 auto}
@media(max-width:640px){.prices{grid-template-columns:1fr}}
/* Flex column with the button pushed to the bottom. The two cards are height matched by the
   grid but their content is not, so Free had 80px of dead space under its button against
   Pro's 33px and the two calls to action sat at different heights. */
.price{background:var(--navy-2);border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column}
.price .btn{margin-top:auto}
.price.pro{border-color:rgba(46,79,208,.5);box-shadow:0 0 0 1px rgba(46,79,208,.25),0 24px 60px rgba(46,79,208,.16);position:relative}
.price .tag{position:absolute;top:-12px;right:22px;background:var(--brass);color:var(--navy);font-family:var(--disp);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px;letter-spacing:.04em}
.price h3{font-size:22px}
.price .amt{font-family:var(--disp);font-weight:700;font-size:40px;margin:10px 0 4px}
.price .amt span{font-size:16px;color:var(--ink-faint);font-weight:500}
.price ul{list-style:none;margin:20px 0 26px;display:grid;gap:11px}
.price li{display:flex;gap:10px;color:var(--ink-soft);font-size:15px}
.price li svg.i{font-size:18px;color:var(--brass);flex:0 0 auto;margin-top:3px}

/* stretch, so the Play badge and the web card are the same height. They were 69px and 58px
   on a phone, which read as two buttons that did not belong to each other. */
.dl{display:flex;gap:14px;justify-content:center;align-items:stretch;flex-wrap:wrap;margin-top:8px}
/* An explicit height, not 100%. The wrapper has no definite height of its own, so height:100%
   fell back to the file's natural 250px and the badge rendered four times too large. */
.dl .badge-link{display:flex;align-items:center}
.dl .badge-link img{height:64px;width:auto}
.store{display:inline-flex;align-items:center;gap:12px;background:var(--navy-3);border:1px solid var(--line);border-radius:14px;padding:12px 20px;transition:.2s}
.store:hover{border-color:rgba(255,255,255,.2)}
.store svg{width:26px;height:26px;flex:0 0 auto}
.store small{display:block;font-size:11px;color:var(--ink-faint);letter-spacing:.04em}
.store b{font-family:var(--disp);font-size:16px}

.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:4px 20px}
.faq summary{font-family:var(--disp);font-weight:600;font-size:17px;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--ink-soft);font-size:15px;padding:0 0 18px}

.final{text-align:center;background:linear-gradient(180deg,var(--navy-2),var(--navy));border-top:1px solid var(--line)}
.final h2{font-size:clamp(30px,4.6vw,48px)}
.final p{color:var(--ink-soft);font-size:19px;margin:16px auto 0;max-width:520px}

/* ---------- 6. prose (legal pages + long form body copy) ---------- */
.prose{padding:56px 0 90px}
.prose .wrap{max-width:820px}
.prose h1{font-size:clamp(32px,5vw,46px);margin:14px 0 10px;line-height:1.1}
.prose .updated{color:var(--ink-faint);font-size:14px;margin-bottom:8px}
.prose .lead{color:var(--ink-soft);font-size:18px;margin:22px 0 10px;max-width:var(--measure)}
.prose h2{font-size:22px;letter-spacing:-.01em;margin:40px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.prose h3{font-weight:600;font-size:17px;margin:22px 0 8px;color:var(--ink)}
.prose p{color:var(--ink-soft);margin:10px 0;max-width:var(--measure)}
.prose ul,.prose ol{color:var(--ink-soft);margin:10px 0 10px 4px;padding-left:22px;max-width:var(--measure)}
.prose li{margin:7px 0}
.prose strong{color:var(--ink);font-weight:600}
.prose a:not(.btn){color:var(--blue-lt)}
.prose a:hover{text-decoration:underline}
.prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--disp);font-weight:600;color:var(--ink);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.prose td{color:var(--ink-soft)}
.callout{background:var(--navy-2);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:12px;padding:18px 20px;margin:22px 0;color:var(--ink-soft);max-width:var(--measure)}
.callout strong{color:var(--ink)}

/* ---------- 7. content pages (category, compare, blog, hub) ---------- */
.crumbs{font-size:13px;color:var(--ink-faint);padding:22px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* 13px with no padding measured 21px tall, under the 24x24 WCAG 2.2 AA target minimum. The
   separators keep their own size so the row does not grow: only the tappable parts do. */
.crumbs a{color:var(--ink-soft);display:inline-block;padding:3px 0}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--ink-faint);opacity:.6}

.phero{padding:34px 0 54px;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;top:-58%;left:50%;transform:translateX(-50%);width:1000px;height:640px;background:radial-gradient(ellipse at center,rgba(46,79,208,.20),transparent 64%);z-index:0}
.phero>*{position:relative;z-index:1}
.phero h1{font-size:clamp(32px,5.2vw,52px);max-width:15ch;margin:14px 0 0}
.phero h1.wide{max-width:20ch}
.phero .lead{color:var(--ink-soft);font-size:clamp(17px,2vw,20px);max-width:var(--measure);margin:20px 0 0}
.phero .cta-row{justify-content:flex-start;margin-top:28px}
.risk{margin-top:14px;font-size:14px;color:var(--ink-faint);display:flex;gap:16px;flex-wrap:wrap}
.risk span{display:inline-flex;align-items:center;gap:6px}
.risk svg.i{color:var(--brass);font-size:15px}

section.sec{padding:56px 0;border-top:1px solid var(--line)}
section.sec.tint{background:var(--navy-2)}
.sec h2{font-size:clamp(25px,3.4vw,34px);margin-top:12px}
.sec>.wrap>p,.sec .body p{color:var(--ink-soft);margin:14px 0;max-width:var(--measure);font-size:17px}
.sec .body ul,.sec .body ol{color:var(--ink-soft);max-width:var(--measure);margin:14px 0 14px 4px;padding-left:22px;font-size:17px}
.sec .body li{margin:8px 0}
.sec .body strong{color:var(--ink);font-weight:600}
.sec .body a:not(.btn){color:var(--blue-lt)}
.sec .body a:hover{text-decoration:underline}
.sec .body h3{font-size:19px;margin:26px 0 6px}

.specs{display:grid;gap:14px;margin-top:26px}
.specs--2{grid-template-columns:repeat(2,1fr)}
.specs--3{grid-template-columns:repeat(3,1fr)}
.specs--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.specs--4{grid-template-columns:repeat(2,1fr)}.specs--3{grid-template-columns:1fr}}
@media(max-width:560px){.specs--2,.specs--3,.specs--4{grid-template-columns:1fr}}
.spec{background:var(--navy-3);border:1px solid var(--line);border-radius:14px;padding:20px}
.spec b{display:block;font-family:var(--disp);font-size:16px;color:var(--ink);margin-bottom:5px}
.spec span{color:var(--ink-soft);font-size:15px}
section.sec.tint .spec{background:var(--navy)}

.checks{list-style:none;display:grid;gap:12px;margin:24px 0 0;padding:0;max-width:760px}
.checks li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-soft);font-size:16px}
.checks li svg.i{font-size:19px;color:var(--brass);flex:0 0 auto;margin-top:3px}

.dcards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
@media(max-width:760px){.dcards{grid-template-columns:1fr}}
.dcard{background:var(--navy-3);border:1px solid var(--line);border-radius:16px;padding:24px}
section.sec.tint .dcard{background:var(--navy)}
.dcard h3{font-size:17px;margin-bottom:14px}
.dcard ul{list-style:none;display:grid;gap:9px;padding:0;margin:0}
.dcard li{color:var(--ink-soft);font-size:15px;display:flex;gap:9px;align-items:flex-start}
.dcard li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:0 0 auto;margin-top:9px}
.dcard .tag{display:inline-block;font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}

.flow{display:grid;gap:16px;margin-top:26px;counter-reset:fl}
.flow li{list-style:none;display:flex;gap:16px;align-items:flex-start;background:var(--navy-3);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
section.sec.tint .flow li{background:var(--navy)}
.flow li::before{counter-increment:fl;content:counter(fl);font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy);background:var(--brass);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.flow b{font-family:var(--disp);font-size:16px;color:var(--ink);display:block;margin-bottom:2px}
.flow span{color:var(--ink-soft);font-size:15px}

.example{background:var(--navy-3);border:1px solid var(--line);border-radius:18px;padding:26px;margin-top:24px;max-width:760px}
section.sec.tint .example{background:var(--navy)}
.example .tag{font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:12px}
.example table{width:100%;border-collapse:collapse;font-size:15px}
.example th,.example td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.example th{font-family:var(--disp);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.example td{color:var(--ink-soft)}
.example td.num,.example th.num{text-align:right;white-space:nowrap}
.example tr.tot td{color:var(--ink);font-family:var(--disp);font-weight:600;border-bottom:none;padding-top:14px}
.example .note{color:var(--ink-faint);font-size:14px;margin-top:14px}

.ctab{background:linear-gradient(140deg,rgba(46,79,208,.20),rgba(200,164,92,.09));border:1px solid rgba(46,79,208,.34);border-radius:20px;padding:34px;text-align:center;margin-top:10px}
.ctab h2{font-size:clamp(24px,3.2vw,32px)}
.ctab p{color:var(--ink-soft);margin:14px auto 0;max-width:52ch;font-size:17px}
.ctab .cta-row{justify-content:center;margin-top:24px}

.toc{background:var(--navy-2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:30px 0 8px;max-width:var(--measure)}
.toc b{font-family:var(--disp);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;color:var(--ink-soft);display:grid;gap:7px}
.toc a{color:var(--ink-soft)}
.toc a:hover{color:var(--ink);text-decoration:underline}

.answer{border-left:3px solid var(--blue);background:rgba(46,79,208,.09);border-radius:0 12px 12px 0;padding:16px 20px;margin:16px 0 20px;color:var(--ink);font-size:17px;max-width:var(--measure)}

.cmp{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;display:block;overflow-x:auto;white-space:nowrap}
.cmp th,.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--disp);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--navy-2)}
.cmp td{color:var(--ink-soft)}
.cmp tbody th{font-weight:500;color:var(--ink);font-family:var(--body);font-size:15px}
.cmp .yes{color:var(--brass)}
@media(min-width:820px){.cmp{display:table;white-space:normal}}

.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.hubgrid--2{grid-template-columns:repeat(2,1fr)}
.hubgrid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.hubgrid--4{grid-template-columns:repeat(2,1fr)}.hubgrid,.hubgrid--3{grid-template-columns:1fr}}
@media(max-width:560px){.hubgrid,.hubgrid--2,.hubgrid--4{grid-template-columns:1fr}}
.hubcard{background:var(--navy-2);border:1px solid var(--line);border-radius:18px;padding:24px;transition:.2s;display:flex;flex-direction:column;gap:8px}
.hubcard:hover{border-color:rgba(46,79,208,.45);transform:translateY(-3px)}
.hubcard h3{font-size:18px}
.hubcard p{color:var(--ink-soft);font-size:15px;flex:1}
.hubcard .go{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--blue-lt)}

.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
/* One related link is a real case now that trade siblings come from the same group and the
   smallest group has two members. Without this rule the single card fell into .rel's three
   column default and sat stranded in the left third, which the audit correctly called an
   orphan. It gets the full row instead. */
.rel--1{grid-template-columns:1fr}
.rel--2{grid-template-columns:repeat(2,1fr)}
.rel--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.rel--4{grid-template-columns:repeat(2,1fr)}.rel,.rel--3{grid-template-columns:1fr}}
@media(max-width:760px){.rel,.rel--2,.rel--4{grid-template-columns:1fr}}
.rel a{background:var(--navy-3);border:1px solid var(--line);border-radius:14px;padding:18px;transition:.2s;display:block}
section.sec.tint .rel a{background:var(--navy)}
.rel a:hover{border-color:rgba(46,79,208,.45);transform:translateY(-2px)}
.rel small{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.rel b{font-family:var(--disp);font-size:16px;color:var(--ink);font-weight:600;line-height:1.3;display:block}

.meta{color:var(--ink-faint);font-size:14px;margin-top:16px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 8. ledger rail (long form pages) ----------
   A sticky section index. Long category pages need a sense of place, and the rail
   answers where am I and what is left without the reader scrolling to find out.
   It is server rendered, so it exists with JavaScript disabled and for crawlers. */
#rail{display:none}
.has-rail section.sec{padding:52px 0}
.has-rail .phero{padding:26px 0 44px}
.has-rail .phero h1{max-width:19ch;font-size:clamp(30px,4.4vw,46px)}
.has-rail .spec{padding:17px 19px;border-radius:11px}
.has-rail .spec b{font-size:15px}
.has-rail .spec span{font-size:14.5px}
.has-rail .specs{gap:11px}
.has-rail .flow li{padding:15px 18px}
@media(min-width:1140px){
  .has-rail{--rail:224px}
  .has-rail main{position:relative}
  .has-rail main>section>.wrap,
  .has-rail main>section>.wrap--narrow,
  .has-rail main>div>.crumbs{padding-left:calc(24px + var(--rail))}
  .has-rail #rail{display:block;position:fixed;top:112px;left:max(24px,calc((100vw - var(--maxw))/2 + 24px));width:196px;z-index:20}
  .has-rail #rail b{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:13px}
  .has-rail #rail ol{list-style:none;display:grid;gap:8px;margin:0;padding:0;counter-reset:none}
  .has-rail #rail a{display:block;font-size:13px;line-height:1.35;color:var(--ink-faint);border-left:2px solid transparent;padding-left:11px;transition:.15s}
  .has-rail #rail a:hover{color:var(--ink);border-left-color:var(--brass)}
}

/* copyable plain text template */
pre.skel{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;color:var(--ink-soft);white-space:pre;overflow-x:auto;margin:0;padding:4px 0 2px}
@media(max-width:560px){pre.skel{font-size:11px}}

/* due date calculator */
.calc{background:var(--navy-3);border:1px solid var(--line);border-radius:16px;padding:22px;margin-top:24px;max-width:var(--measure)}
section.sec.tint .calc{background:var(--navy)}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.calc-row{grid-template-columns:1fr}}
.calc label{display:block;font-family:var(--disp);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.calc input,.calc select{width:100%;margin-top:7px;background:var(--navy-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-family:var(--body);font-size:16px;padding:11px 12px;appearance:none}
.calc input:focus,.calc select:focus{outline:none;border-color:rgba(46,79,208,.6)}
.calc select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.calc-out{margin-top:18px;color:var(--ink);font-size:17px}
.calc-out strong{color:var(--brass)}


/* ---------- 9. home page ----------
   Motion policy, from measuring rather than taste: nothing in the hero animates,
   because the phone image is the LCP element and an opacity fade on it delays the
   largest paint. Below the fold, reveals move transform and opacity only, staggered
   by a custom property so the delay lives in CSS, and stop entirely under
   prefers-reduced-motion. */
.reveal{transition-delay:var(--d,0ms)}
@media(prefers-reduced-motion:reduce){.reveal{transition-delay:0ms}}

/* Feature cards became links, so they need the affordance of one. */
a.card{display:flex;flex-direction:column}
a.card .go{margin-top:14px;font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--blue-lt);opacity:.85;transition:.18s}
a.card:hover .go{opacity:1;transform:translateX(2px)}
a.card p{flex:1}

/* Trade chips. A row of real links rather than a wall of cards, because the job here
   is distribution of attention, not another card grid. */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto}
.chip{display:inline-flex;align-items:center;background:var(--navy-3);border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:15px;color:var(--ink-soft);transition:.16s;min-height:44px}
.chip:hover{color:var(--ink);border-color:rgba(46,79,208,.5);background:rgba(46,79,208,.14);transform:translateY(-2px)}
.chip--all{color:var(--blue-lt);font-family:var(--disp);font-weight:600;border-color:rgba(46,79,208,.4)}
section.block.tint .chip{background:var(--navy)}

/* Template thumbnails are links now. */
a.tpl{display:block}
.center{text-align:center;margin-top:28px;color:var(--ink-soft)}
.center a:not(.btn){color:var(--blue-lt)}
.price .sublabel{color:var(--ink-faint);font-size:14px;margin-top:-2px}
.showcase .after{font-size:15px;color:var(--ink-faint);margin-top:18px}
.showcase .after a:not(.btn){color:var(--blue-lt)}
#guides .rel a{background:var(--navy-2)}
#guides .rel{margin-bottom:4px}

/* Guide cards carried a label and a title in a card sized for much more, so they read as
   thin next to the feature cards beside them. The summary is each guide's existing hubBlurb,
   clamped to three lines so a long one cannot unbalance the row. rel--rich is a separate
   class because the plain .rel is reused by the "keep reading" blocks on 60 other pages. */
.rel--rich a{display:flex;flex-direction:column}
.rel--rich a span{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:9px;color:var(--ink-soft);font-size:14.5px;line-height:1.5;
}

/* Body copy links on the home page.
   Measured on the live site: five FAQ answers and the template intro rendered their links
   in EXACTLY the paragraph colour with no underline and no weight change, so six routes
   into the cluster were invisible to the eye. Every other page sends prose through .prose,
   which already colours them; the home page is generated section by section and had no
   equivalent rule. Same treatment as .prose a, so nothing looks new. */
.head p a:not(.btn),.faq p a:not(.btn){color:var(--blue-lt)}
.head p a:hover,.faq p a:hover{text-decoration:underline}

@media(max-width:560px){.chip{padding:10px 15px;font-size:14px}}

/* Trade invoice template download. Deliberately not a decorated card: the searcher arrived
   wanting a file, so the file and the two ways to get it are the whole block. */
.tpl-dl{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;justify-content:space-between;
  background:var(--navy-3);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:22px}
.tpl-dl__meta{display:flex;flex-direction:column;gap:3px;min-width:min(100%,260px)}
.tpl-dl__kind{font-family:var(--disp);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.tpl-dl__meta strong{font-family:var(--disp);font-size:17px;color:var(--ink)}
.tpl-dl__sub{font-size:13.5px;color:var(--ink-faint)}
.tpl-dl__acts{display:flex;flex-wrap:wrap;gap:10px}
/* Two buttons sharing a 390px row wrapped both labels onto three lines and pushed the arrow
   onto its own. Stacked below 620, side by side above it where the row is genuinely wide. */
@media(max-width:620px){
  .tpl-dl__acts{width:100%;flex-direction:column}
  .tpl-dl__acts .btn{width:100%;justify-content:center}
}

/* Trade template index on the free template page. A plain list, two or three columns when
   there is room: 23 links whose job is to be a door, not a decorated card grid. */
.tpl-index{list-style:none;margin:18px 0 0;padding:0;columns:2;column-gap:32px}
.tpl-index li{break-inside:avoid;margin:0 0 9px}
.tpl-index a{color:var(--ink-soft);border-bottom:1px solid transparent;padding:2px 0;display:inline-block}
.tpl-index a:hover{color:var(--ink);border-bottom-color:var(--blue-lt)}
@media(min-width:900px){.tpl-index{columns:3}}
@media(max-width:560px){.tpl-index{columns:1}}