/*
  KeySigned site styles: one system for every page except the checker, which carries its
  own copy inline so it can be saved and run offline (see verify.html).

  The design (Dan, 28 October 2026, "V4 with changes"): a lit navy title frame with the
  seal as its stage set, a dark product stage beneath it, paper sections for reading, a
  navy pricing band and a closing band with the seal rising from the footer line.

  Colour. Deep navy is the ground of the title and the close, navy is the pricing band,
  abyss is the product stage and the footer. Paper carries the reading sections. Gold
  appears only on navy; on paper the marks, rules and buttons are navy ink. Gold is never
  a checker result.

  Type. One pairing: the system serif for display (titles and the step numerals), the
  system sans for everything else, at 700 for buttons, labels and small headings.

  The seal. At most three seal moments on any page, each a different crop of one file,
  /media/seal-paper.svg, used as a CSS mask so only its lines show, in light gold at low
  opacity. A seal never sits in a section that holds an image or a picture of a record.
  The title seal turns once in 24 minutes and drifts slightly as the title scrolls away;
  the pricing crop holds still; the closing arch turns the other way. No text moves, and
  all of it stops under reduced motion.

  Contrast (WCAG 2.2, sRGB) is measured on renders with the text made transparent, taking
  the brightest pixel under each line of text, and again with each seal drawn as a solid
  disc so the figure holds at every angle of its turn.
*/
:root{
  --deep:#0d1730; --navy:#14213d; --abyss:#09112a; --raised:#1b2a4a;
  --gold:#c9a227; --gold-light:#e2c15a;
  --on:#f4f2ee; --on-2:#c3cad8; --on-3:#a1abbf;
  --on-line:rgba(195,202,216,.14); --on-line-strong:rgba(195,202,216,.3);
  --paper:#f4f2ee; --paper-2:#eae7df; --card:#fbfaf7;
  --ink:#14213d; --ink-2:#394155; --ink-3:#575f72;
  --line:#dbd6cb; --line-strong:#bfb8a8;
  --sans:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --gutter:20px; --header:64px; --section:80px;
  --seal:url("/media/seal-paper.svg");
  --focus:var(--ink);
  color-scheme:light;
}
@media (min-width:600px){:root{--gutter:40px;--section:104px}}
@media (min-width:1024px){:root{--gutter:64px;--section:136px;--header:76px}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--deep);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px);scroll-padding-bottom:96px}
body{background:var(--paper);color:var(--ink-2);font:400 17px/28px var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.on-navy{--focus:var(--gold-light);color:var(--on-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nw{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:80;background:var(--gold-light);color:var(--deep);padding:12px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{left:16px}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}
.narrow>*{max-width:760px}
.no-js-only{display:none}
html:not(.js) .no-js-only{display:block}
html:not(.js) .js-only{display:none}

/* Type */
h1,h2,h3{color:var(--ink);text-wrap:balance}
.on-navy h1,.on-navy h2,.on-navy h3{color:var(--on)}
h1,h2{font-family:var(--serif);font-weight:500}
h1{font-size:clamp(2.75rem,1rem + 6.4vw,7rem);line-height:.98;letter-spacing:-.028em}
h2{font-size:clamp(2.5rem,1.35rem + 3.6vw,5rem);line-height:1.02;letter-spacing:-.024em}
h3{font-family:var(--sans);font-weight:700;font-size:20px;line-height:28px;letter-spacing:-.015em}
.lede{font-size:clamp(1.125rem,1.03rem + .3vw,1.3125rem);line-height:1.6;max-width:36em}
.micro,.fine{font-size:15px;line-height:24px;color:var(--ink-3)}
.micro{max-width:52ch}
.caption{font-size:13px;line-height:20px;color:var(--ink-3);letter-spacing:.01em}
.on-navy .micro,.on-navy .fine,.on-navy .caption{color:var(--on-3)}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:13px;line-height:20px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
.on-navy .eyebrow{color:var(--gold-light)}
.on-navy .eyebrow::before{background:var(--gold)}
@media (max-width:599px){.eyebrow{font-size:12px;letter-spacing:.1em;gap:12px;align-items:flex-start}.eyebrow::before{margin-top:6px}}

/* Buttons. Gold only ever sits on navy; on paper the solid button is navy ink. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 24px;border-radius:8px;border:1px solid transparent;font:700 16px/1.2 var(--sans);letter-spacing:-.01em;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{width:20px;height:20px;flex:none;transition:transform .15s}
.btn:hover svg{transform:translateX(3px)}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.btn-gold{background:var(--gold-light);color:var(--deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 32px -14px rgba(226,193,90,.55)}
.btn-gold:hover{background:#ecce70}
.btn-gold:active{background:var(--gold)}
.btn-quiet{background:rgba(244,242,238,.04);color:var(--on);border-color:var(--on-line-strong)}
.btn-quiet:hover{background:rgba(244,242,238,.09);border-color:rgba(195,202,216,.5)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#23365f}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-line:hover{border-color:var(--ink);background:rgba(20,33,61,.04)}
.textlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;color:var(--ink);text-decoration:none}
.textlink svg{width:18px;height:18px;flex:none;transition:transform .15s}
.textlink:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.textlink:hover svg{transform:translateY(3px)}
.on-navy .textlink{color:var(--on)}
.on-navy .textlink svg{color:var(--gold-light)}
/* Links inside a sentence keep an underline, so they never rely on colour alone. */
.inline a,.address a,.prose a,.fine a,.note a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(20,33,61,.4);text-underline-offset:4px}
.inline a:hover,.address a:hover,.prose a:hover,.fine a:hover,.note a:hover{text-decoration-color:currentColor}
.on-navy .inline a,.on-navy .address a,.on-navy .fine a{color:var(--on);text-decoration-color:rgba(244,242,238,.45)}
.on-navy .inline a:hover,.on-navy .address a:hover,.on-navy .fine a:hover{text-decoration-color:var(--gold-light)}
.row-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (max-width:599px){.btn-act{width:100%;min-height:56px;padding:0 20px}}

/*
  The App Store badge slot. A placeholder only: Apple's "Download on the App Store"
  artwork goes in on launch day, from Apple's marketing tools and unaltered, at least
  40 px tall. Until then the slot keeps the badge's footprint so the layout reads right.
*/
.badge-slot{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:156px;padding:0 18px;border-radius:10px;background:#000;border:1px solid #a6a6a6;color:#fff;font:600 13px/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;text-align:center}
.badge-slot:hover{background:#111}
.badge-slot-sm{min-height:44px;min-width:132px}
/* Until launch: "Coming soon to the App Store" where the badge goes. Not a button: no link, a dashed outline. */
.soon-pill{display:inline-flex;align-items:center;gap:.35em;min-height:52px;margin:0;padding:0 18px;border-radius:10px;border:1.5px dashed currentColor;color:var(--ink);font:500 15px/1.2 var(--sans);letter-spacing:.01em}
.soon-pill b{font-weight:700}
.on-navy .soon-pill{color:var(--on)}

/* Header: clear over the first frame, solid deep navy once the page moves */
.top{position:sticky;top:0;z-index:50;background:var(--deep);border-bottom:1px solid var(--on-line);transition:background-color .25s,border-color .25s}
.js .top.clear:not(.open){background:transparent;border-bottom-color:transparent}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header)}
.logo{display:inline-flex;align-items:center;min-height:44px}
.logo img{height:40px;width:auto}
@media (min-width:1024px){.logo img{height:48px}}
.site-nav ul{display:flex;gap:4px}
.site-nav ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--on-2);text-decoration:none}
.site-nav ul a:hover{color:var(--on);background:rgba(244,242,238,.07)}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--on-line-strong);background:rgba(13,23,48,.5);color:var(--on);cursor:pointer}
.menu-btn[hidden]{display:none}
.menu-btn svg{width:22px;height:22px}
.menu-btn .i-close,.top.open .menu-btn .i-menu{display:none}
.top.open .menu-btn .i-close{display:block}
@media (max-width:959px){
  .top-row{flex-wrap:wrap}
  .site-nav{flex-basis:100%;padding-bottom:12px}
  .site-nav ul{flex-wrap:wrap}
  .js .site-nav{display:none}
  .js .top.open .site-nav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--deep);border-bottom:1px solid var(--on-line);padding:8px var(--gutter) 24px;box-shadow:0 32px 48px -24px rgba(0,0,0,.6)}
  .js .top.open .site-nav ul{flex-direction:column;gap:0}
  .js .top.open .site-nav ul a{display:flex;min-height:56px;padding:0;border-radius:0;border-bottom:1px solid var(--on-line);font-size:18px;color:var(--on)}
  .js .top.open .site-nav .btn{width:100%;margin-top:24px;min-height:56px;font-size:17px}
}
@media (min-width:960px){.menu-btn{display:none!important}.site-nav{display:flex;align-items:center;gap:20px}}

/* The seal */
.seal-stage{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.seal{position:absolute;width:var(--d);height:var(--d);left:calc(var(--cx) - var(--d)/2);top:calc(var(--cy) - var(--d)/2);background:var(--gold-light);opacity:var(--a);-webkit-mask:var(--seal) center/100% 100% no-repeat;mask:var(--seal) center/100% 100% no-repeat}
@keyframes seal-turn{to{rotate:360deg}}
@keyframes seal-drift{to{translate:0 14vh}}
@media (prefers-reduced-motion:no-preference){
  .title .seal,.close .seal{animation:seal-turn 1440s linear infinite;will-change:rotate}
  .close .seal{animation-direction:reverse}
  @supports (animation-timeline:scroll()){
    .title .seal{animation:seal-turn 1440s linear infinite,seal-drift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  }
}

/*
  Seal one: the title frame. The full medallion, cut hard by the right edge, with a shade
  that keeps the reading text calm. The home title fills the first screen on a desktop;
  other pages use the same crop in a shorter frame.
*/
.title{position:relative;isolation:isolate;background:var(--deep);margin-top:calc(-1 * var(--header));padding:calc(var(--header) + 40px) 0 72px;
  --d:1100px; --cx:77%; --cy:120px; --a:.3}
.title .seal-stage{background:radial-gradient(circle at var(--cx) var(--cy),rgba(38,60,112,.62) 0,rgba(22,36,72,.3) calc(var(--d)*.32),rgba(13,23,48,0) calc(var(--d)*.55)),var(--deep);-webkit-mask:linear-gradient(#000 calc(100% - 200px),transparent);mask:linear-gradient(#000 calc(100% - 200px),transparent)}
.title::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(9,17,42,.5) 0,rgba(9,17,42,.24) 150px,rgba(9,17,42,.08) 250px,rgba(9,17,42,.3) 330px,rgba(9,17,42,.5) 460px,rgba(9,17,42,.62) 600px,rgba(9,17,42,.66) 100%)}
.title h1{margin-top:20px;max-width:13ch}
.title-home h1 span{color:var(--gold-light)}
.title-page h1{font-size:clamp(2.5rem,1rem + 4.4vw,5.25rem);line-height:1.02;max-width:16ch}
.answer{margin-top:24px;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--on-2);max-width:31em}
@media (min-width:600px){
  .title{padding:calc(var(--header) + 88px) 0 112px;--d:1500px;--cx:96%;--cy:34%;--a:.3}
  .title h1{max-width:none}
  .title-page h1{max-width:18ch}
  .title::after{background:linear-gradient(180deg,rgba(9,17,42,.45) 0,rgba(9,17,42,0) 140px),linear-gradient(90deg,rgba(9,17,42,.72) 0%,rgba(9,17,42,.5) 38%,rgba(9,17,42,0) 62%)}
}
@media (min-width:760px){.title-home h1 span{display:block}}
@media (min-width:1024px){
  .title{padding:calc(var(--header) + 96px) 0 112px;--d:max(1600px,176vh);--cx:80%;--cy:57%;--a:.32;--col:max(var(--gutter),calc((100% - 1240px) / 2))}
  .title-home{min-height:max(780px,100svh);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header) + 56px) 0 96px}
  .title-home h1{font-size:clamp(5.5rem,1rem + 6.4vw,8rem);margin-top:28px}
  .title-page h1{margin-top:28px;max-width:20ch;font-size:clamp(3.25rem,1rem + 3.6vw,4.75rem);line-height:1.04}
  .title-lower{display:grid;grid-template-columns:minmax(0,680px);margin-top:8px}
  .title::after{background:linear-gradient(180deg,rgba(9,17,42,.45) 0,rgba(9,17,42,0) 140px),linear-gradient(90deg,rgba(9,17,42,.72) 0,rgba(9,17,42,.52) calc(var(--col) + 660px),rgba(9,17,42,0) calc(var(--col) + 940px))}
}

/*
  A page with its seals held back (the comparison page, until the ring text changes): the
  same lit frames, bands and close, with no seal art and no arch to leave room for.
*/
.title:not(:has(.seal-stage)){background:radial-gradient(70% 90% at 85% 0%,rgba(38,60,112,.55) 0%,rgba(13,23,48,0) 70%),var(--deep)}
.pricing:not(:has(.seal-stage)){background:radial-gradient(circle at 0 0,rgba(42,64,118,.55) 0,rgba(20,33,61,0) 70%),var(--navy)}
.close:not(:has(.seal-stage)){padding-bottom:var(--section)}

/* The masthead: the navy title frame for guides, forms and documents, with no seal */
.masthead{position:relative;background:radial-gradient(70% 90% at 85% 0%,rgba(38,60,112,.5) 0%,rgba(13,23,48,0) 70%),var(--deep);margin-top:calc(-1 * var(--header));padding:calc(var(--header) + 24px) 0 64px}
.masthead h1{margin-top:20px;font-size:clamp(2.4rem,1rem + 4vw,4.75rem);line-height:1.04;max-width:18ch}
.masthead .answer{max-width:34em}
.masthead .byline{margin-top:16px;font-size:14px;line-height:22px;color:var(--on-3)}
.masthead .meta{margin-top:16px;font-size:15px;line-height:24px;color:var(--on-3);max-width:60ch}
.masthead .meta a{color:var(--on);font-weight:700;text-underline-offset:4px;text-decoration-color:rgba(244,242,238,.45)}
@media (min-width:600px){.masthead{padding:calc(var(--header) + 40px) 0 88px}}
@media (min-width:1024px){.masthead{padding:calc(var(--header) + 56px) 0 104px}}
.crumbs{font-size:14px;line-height:20px;color:var(--on-3)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--on-3)}
.crumbs a{display:inline-flex;min-height:44px;align-items:center;color:var(--on-2);text-underline-offset:4px}
.crumbs [aria-current]{display:inline-flex;min-height:44px;align-items:center}
.short-answer{margin-top:28px;max-width:44em;padding:22px 24px;border:1px solid rgba(201,162,39,.55);border-radius:16px;background:rgba(20,33,61,.7)}
.short-answer p{color:var(--on);font-size:17px;line-height:28px}
.short-answer p+p{margin-top:10px;color:var(--on-2)}

/* The call to action: App Store badge, a text link, the price line and the status line */
.cta{margin-top:28px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}
.cta .micro{margin-top:16px}
.status{margin-top:16px;display:flex;align-items:center;gap:12px;font-size:15px;line-height:24px;color:var(--ink-3)}
.status b{color:var(--ink);font-weight:700}
.status::before{content:"";flex:none;width:8px;height:8px;border:1.5px solid var(--ink);transform:rotate(45deg)}
.on-navy .status{color:var(--on-3)}
.on-navy .status b{color:var(--on)}
.on-navy .status::before{border-color:var(--gold-light)}
.cta-block{margin-top:40px;padding:28px 24px;border:1px solid var(--line-strong);border-radius:16px;background:var(--card);max-width:760px}
.cta-block .cta{margin-top:0}

/* The product stage: lit, on its own ground, with no seal anywhere in it */
.stage{position:relative;background:radial-gradient(60% 70% at 50% 0%,rgba(48,74,134,.42) 0%,rgba(9,17,42,0) 70%),radial-gradient(46% 14% at 50% 90%,rgba(48,74,134,.3) 0%,rgba(9,17,42,0) 100%),var(--abyss);border-block:1px solid var(--on-line);padding:56px 0 64px;overflow:hidden}
.stage-row{display:flex;align-items:flex-end;justify-content:center;gap:28px}
.stage .caption{margin-top:14px}
.plate-fig{width:min(100%,340px)}
.plate{display:block;border-radius:4.2%/5.7%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 48px 80px -28px rgba(0,0,0,.85)}
.plate img{width:100%}
.device{--w:280px;width:var(--w);max-width:100%;flex:none;border:calc(var(--w)*.034) solid #05070c;border-radius:calc(var(--w)*.165);background:#05070c}
.device img{width:100%;border-radius:calc(var(--w)*.131)}
.stage .device{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 0 3px #0a1022,0 64px 110px -40px rgba(0,0,0,.9)}
.stage .phone-fig{display:none}
@media (min-width:600px){.stage{padding:88px 0 96px}.stage .phone-fig{display:block}.stage .device{--w:260px}.plate-fig{width:300px;margin-bottom:120px}}
@media (min-width:1024px){.stage{padding:120px 0 128px}.stage-row{gap:72px}.stage .device{--w:340px}.plate-fig{width:400px;margin-bottom:200px}}
@media (min-width:1200px){.stage .device{--w:360px}.plate-fig{width:420px;margin-bottom:220px}}

/* Paper sections */
.sec{padding:var(--section) 0}
.sec-alt{background:var(--paper-2)}
.head{display:grid;gap:20px}
.head .lede,.sec>.wrap>.lede{margin-top:20px}
.head .lede{margin-top:0}
@media (min-width:1024px){.head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}.head h2{grid-column:1/7}.head .lede{grid-column:7/13}}

/* Long-form reading on paper */
.prose{max-width:44em}
.prose h2{margin-top:72px;font-size:clamp(2rem,1.3rem + 2.2vw,3.25rem);line-height:1.06}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:32px}
.prose p,.prose li{color:var(--ink-2);font-size:17px;line-height:28px}
.prose p{margin-top:16px}
.prose h2+p,.prose h2+ul,.prose h2+ol{margin-top:20px}
.prose ul,.prose ol{margin-top:16px;padding-left:1.4em;display:grid;gap:10px}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;background:var(--ink);transform:rotate(45deg)}
.prose ol{list-style:decimal}
.prose ol li::marker{color:var(--ink);font-weight:700}
.prose strong{color:var(--ink)}
.prose .btn{text-decoration:none}
.prose .btn-ink{color:var(--paper)}
.prose p.caption{margin-top:12px}
.note{margin-top:20px;padding:12px 0 12px 18px;border-left:3px solid var(--ink);color:var(--ink-2);font-size:16px;line-height:26px;max-width:44em}
.checked{margin-top:10px;font-size:14px;line-height:22px;color:var(--ink-3)}

/* How it works: three framed screens on one tray, then the steps as a storyboard */
.tray{margin-top:40px;padding:32px 0 24px;background:var(--paper-2);border-radius:28px;border:1px solid var(--line)}
.sec-alt .tray{background:var(--paper)}
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 24px 32px;scroll-padding-inline:24px;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots .device{--w:200px;scroll-snap-align:start;box-shadow:0 0 0 1px rgba(20,33,61,.3),0 22px 36px -22px rgba(13,23,48,.65)}
.tray .caption{padding:0 24px}
.steps{display:grid;gap:36px;margin-top:48px}
.num{display:flex;align-items:center;gap:20px;font-family:var(--serif);font-size:52px;line-height:1;color:var(--ink)}
.num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(20,33,61,.35),rgba(20,33,61,0))}
.step h3{margin-top:18px}
.step p{margin-top:8px;font-size:16px;line-height:26px;max-width:34em}
.check{display:grid;gap:16px;margin-top:48px;padding:24px;border:1px solid var(--line-strong);border-radius:16px;background:var(--card)}
@media (max-width:599px){.check .btn{width:100%}}
@media (min-width:600px){
  .tray{padding:48px 0 28px}
  .shots{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:0 32px 36px;justify-items:center;gap:24px}
  .shots .device{--w:min(100%,248px)}
  .tray .caption{padding:0 32px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
}
@media (min-width:1024px){
  .tray{margin-top:56px;padding:64px 0 32px}
  .shots{padding:0 48px 48px;gap:32px}
  .shots .device{--w:276px}
  .tray .caption{padding:0 48px}
  .steps{column-gap:40px;margin-top:64px}
  .check{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:32px;padding:24px 32px}
}

/* Seal two: the pricing band, loud navy, a corner arc of the lettered ring behind the heading */
.pricing{position:relative;isolation:isolate;background:var(--navy);padding:112px 0 80px;
  --d:1400px; --cx:-250px; --cy:-480px; --a:.28}
.pricing .seal-stage{background:radial-gradient(circle at 0 0,rgba(42,64,118,.55) 0,rgba(20,33,61,0) 70%),var(--navy)}
.pricing-grid{display:grid;gap:40px}
.pricing h2{font-size:clamp(2.75rem,1.4rem + 5vw,5.75rem);line-height:.98;letter-spacing:-.028em}
.price{margin-top:28px}
.price .label{font-size:13px;line-height:20px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light)}
.price .amt{margin-top:8px;font-family:var(--serif);font-size:clamp(2.75rem,2rem + 2.4vw,4rem);line-height:1;letter-spacing:-.02em;color:var(--on)}
.price .amt small{font-family:var(--sans);font-size:18px;letter-spacing:0;color:var(--on-2);font-weight:500}
.price p{margin-top:16px;max-width:34em;color:var(--on-2)}
.price .row-cta{margin-top:28px}
.terms{border-top:1px solid var(--on-line-strong)}
.terms>div{display:grid;gap:8px;padding:20px 0;border-bottom:1px solid var(--on-line)}
.terms dt{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light)}
.terms dd{margin:0;font-size:17px;line-height:26px;color:var(--on)}
@media (min-width:600px){
  .pricing{padding:104px 0 112px;--d:1700px;--cx:-300px;--cy:-560px}
  .terms>div{grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:baseline}
}
@media (min-width:1024px){
  .pricing{padding:144px 0;--d:1900px;--cx:calc(max(var(--gutter),(100% - 1240px) / 2) - 380px);--cy:-640px;--a:.3}
  .price{margin-top:36px}
  .pricing-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .pricing-head{grid-column:1/7}
  .terms{grid-column:8/13;margin-top:8px}
}

/* The evidence pack */
.contents{display:grid;gap:0;margin-top:48px;border-top:2px solid var(--ink)}
.contents>div{padding:24px 0;border-bottom:1px solid var(--line-strong)}
.contents dt{display:flex;align-items:center;gap:16px;font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.contents dd{margin:8px 0 0;font-size:16px;line-height:26px}
.ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:8px;background:var(--ink);color:var(--paper)}
.ico svg{width:20px;height:20px}
.pull{margin-top:48px;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.3vw,2.25rem);line-height:1.3;letter-spacing:-.012em;color:var(--ink);max-width:30em}
@media (min-width:900px){
  .contents{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;border-top:0}
  .contents>div{border-top:2px solid var(--ink);border-bottom:0;padding:28px 0 0}
  .contents dt{flex-direction:column;align-items:flex-start;gap:20px}
  .pull{margin-top:80px}
}

/* Who it's for */
.who-list{display:grid;gap:12px;margin-top:40px}
.who-list a{position:relative;display:flex;flex-direction:column;height:100%;padding:24px 64px 24px 24px;background:var(--card);border:1px solid var(--line);border-radius:16px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.who-list a:hover{border-color:var(--ink);box-shadow:0 16px 32px -24px rgba(13,23,48,.5)}
.who-list strong{display:block;font-size:19px;line-height:28px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.who-list strong+span{display:block;margin-top:6px;font-size:16px;line-height:24px;color:var(--ink-2)}
.who-list .go{position:absolute;right:24px;top:26px;width:22px;height:22px;color:var(--ink);transition:transform .15s}
.who-list a:hover .go{transform:translateX(3px)}
.aside-links{display:grid;gap:12px;margin-top:32px;font-size:16px;line-height:26px}
@media (min-width:600px){.who-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){
  .who-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:56px}
  .who-list li{grid-column:span 2}
  .who-list li:nth-child(n+4){grid-column:span 3}
  .who-list a{padding:28px 72px 32px 28px}
  .who-list .go{right:28px;top:31px}
  .aside-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px}
}

/* Questions */
.faq-grid{display:grid;gap:32px}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:16px 0;font-size:19px;line-height:28px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline-offset:-3px;border-radius:4px}
.faq summary::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);background:no-repeat center/16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E")}
.faq details[open] summary::after{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f2ee' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.faq details p{padding:0 56px 24px 0;max-width:40em}
.faq details p+p{margin-top:-12px}
@media (min-width:1024px){.faq-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}.faq-grid h2{grid-column:1/5}.faq{grid-column:6/13}}

/* Related guides */
.related ul{display:grid;gap:12px;margin-top:32px}
.related a{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:16px 56px 16px 20px;position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;font-weight:700;color:var(--ink);transition:border-color .15s}
.related a::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-5px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)}
.related a:hover{border-color:var(--ink)}
.related a span{display:block;font-weight:400;color:var(--ink-2);font-size:15px;line-height:22px}
@media (min-width:760px){.related ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.related h2{font-size:clamp(2rem,1.3rem + 2.2vw,3.25rem)}

/* Printable forms (the template page) */
.downloads{display:grid;gap:12px;margin-top:28px}
.download{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:20px;border:1px solid var(--on-line-strong);border-radius:16px;background:rgba(27,42,74,.6)}
.download strong{color:var(--on);font-size:18px}
.download small{color:var(--on-3);font-size:14px;line-height:22px}
.download .btn{margin-top:12px}
.form-preview{margin-top:40px;max-width:420px}
.form-preview img{border-radius:6px;border:1px solid var(--on-line-strong);background:#fff;box-shadow:0 40px 72px -32px rgba(0,0,0,.8)}
.form-preview .caption{margin-top:12px}
.twocol{display:grid;gap:8px}
@media (min-width:620px){.downloads{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.twocol{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:start;gap:64px}.form-preview{margin-top:0}}

/* The printable forms on paper (the car handover form page) */
.downloads-paper .download{border-color:var(--line-strong);background:var(--card)}
.downloads-paper .download strong{color:var(--ink)}
.downloads-paper .download small{color:var(--ink-3)}
.downloads-paper{margin-bottom:16px}
@media (min-width:1024px){.downloads-paper{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* A byline in the title frame (guides) */
.title .byline{margin-top:16px;max-width:62ch;font-size:14px;line-height:22px;color:var(--on-3)}

/* "What is KeySigned": one factual paragraph, quotable as it stands */
.define{display:grid;gap:20px}
.define p{font-size:clamp(1.125rem,1.03rem + .3vw,1.3125rem);line-height:1.65;color:var(--ink);max-width:40em}
@media (min-width:1024px){.define{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}.define h2{grid-column:1/5}.define p{grid-column:6/13}}

/* What KeySigned gives you: the strengths, each one a thing the app does */
.points{display:grid;margin-top:40px;border-top:2px solid var(--ink)}
.points li{padding:22px 0 22px 26px;border-bottom:1px solid var(--line-strong);position:relative}
.points li::before{content:"";position:absolute;left:2px;top:31px;width:8px;height:8px;background:var(--ink);transform:rotate(45deg)}
.points strong{display:block;font-size:18px;line-height:26px;letter-spacing:-.012em;color:var(--ink)}
.points span{display:block;margin-top:6px;font-size:16px;line-height:26px;color:var(--ink-2)}
@media (min-width:760px){.points{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1100px){.points{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;border-top:0}.points li{border-top:2px solid var(--ink);border-bottom:0;padding:24px 0 8px 0}.points li::before{display:none}}

/*
  Comparison tables. Real tables with a caption carrying the check date, because answer
  engines and screen readers read tables, not pictures of them. The KeySigned column
  carries a navy head (gold only on navy) and a light ink tint. The apps table keeps its
  first column in place and scrolls sideways inside its own frame, never the page.
*/
.table-note{margin-top:16px;max-width:52em}
.table-frame{margin-top:24px;border:1px solid var(--line-strong);border-radius:16px;background:var(--card);overflow:hidden}
.table-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.table-scroll:focus-visible{outline-offset:-3px}
.compare{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px;line-height:21px;color:var(--ink-2)}
.compare caption{text-align:left;padding:16px 16px 0;font-size:14px;line-height:22px;font-weight:700;color:var(--ink)}
.compare th,.compare td{padding:14px 12px;vertical-align:top;text-align:left;border-bottom:1px solid var(--line);overflow-wrap:break-word}
.compare tbody tr:last-child>*{border-bottom:0}
.compare thead th{font-size:14px;line-height:20px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink);vertical-align:bottom}
.compare thead th small{display:block;margin-top:4px;font-weight:400;color:var(--ink-3);font-size:12px;line-height:17px}
.compare thead th.ks{background:var(--navy);color:var(--on);border-bottom-color:var(--navy)}
.compare thead th.ks small{color:var(--gold-light)}
.compare th[scope=row]{font-weight:700;color:var(--ink)}
.compare td.ks{background:rgba(20,33,61,.05);color:var(--ink)}
.compare .nd{color:var(--ink-3)}
.compare .src{display:block;margin-top:8px;font-size:12px;line-height:17px;color:var(--ink-3)}
.compare .src a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(20,33,61,.4);text-underline-offset:3px}
.compare-2 col.rowhead{width:30%}
.compare-2 col.ks-col,.compare-2 col.other-col{width:35%}
.compare-apps{min-width:1180px}
.compare-apps col.rowhead{width:112px}
@media (min-width:600px){.compare-apps col.rowhead{width:150px}}
.compare-apps th[scope=row],.compare-apps thead th:first-child{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--line-strong)}
.scroll-hint{margin-top:12px}
@media (min-width:600px){.compare{font-size:15px;line-height:23px}.compare th,.compare td{padding:16px}.compare caption{padding:20px 16px 4px;font-size:15px}.compare-2 col.rowhead{width:26%}.compare-2 col.ks-col,.compare-2 col.other-col{width:37%}}
@media (min-width:1300px){.scroll-hint{display:none}}

/* One short section per app on the comparison page, each with its own anchor */
.apps{display:grid;gap:16px;margin-top:40px}
.app{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.app h3{font-size:22px;line-height:30px}
.app h3 small{display:block;font-size:14px;line-height:22px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.app p{margin-top:12px;font-size:16px;line-height:26px}
.app p b{color:var(--ink)}
.app .checked{margin-top:14px}
@media (min-width:900px){.apps{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.app{padding:28px}}

/* The calculator on the detailing page: runs in the browser, sends nothing */
.ledger{margin-top:32px;max-width:640px;padding:24px;border:1px solid var(--line-strong);border-radius:16px;background:var(--card)}
.ledger .row{display:grid;gap:8px;border-top:1px solid var(--line);padding:16px 0}
.ledger .row:first-child{border-top:0;padding-top:0}
.ledger label{font-size:16px;line-height:24px;color:var(--ink)}
.ledger input{font:600 17px/1 var(--sans);width:100%;padding:12px;background:#fff;color:var(--ink);border:1.5px solid var(--line-strong);border-radius:8px;min-height:48px}
.ledger input:focus-visible{outline-offset:1px}
.ledger .out{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.ledger .out b{font-family:var(--serif);font-size:2.5rem;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.ledger .out span{font-size:15px;color:var(--ink-2)}
.ledger .fine{margin-top:14px}

/*
  Seal three: the close. Centred, with the top of the seal rising behind it from the
  footer line. The spacer keeps every word above the arch.
*/
.close{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);padding:80px 0 0;text-align:center;
  --d:min(150vw,640px); --a:.42}
.close .seal{left:calc(50% - var(--d) / 2);top:calc(100% - var(--d) * .37);background:var(--gold)}
.close .lede{margin:20px auto 0;max-width:36em}
.close .row-cta{justify-content:center;margin-top:32px;gap:12px 28px}
.close-space{height:calc(var(--d) * .37 + 24px)}
.close .textlink:hover svg{transform:translateX(3px)}
@media (max-width:599px){.close{text-align:left}.close .row-cta{justify-content:flex-start;flex-direction:column;align-items:flex-start}}
@media (min-width:600px){.close{padding-top:112px;--d:1000px}.close .lede{margin-top:24px}}
@media (min-width:1024px){.close{padding-top:136px;--d:1180px}}

/* Footer: the deepest layer */
.site-footer{background:var(--abyss);border-top:1px solid var(--on-line);padding:64px 0 48px;font-size:15px;line-height:24px;color:var(--on-2)}
.foot-grid{display:grid;gap:40px}
.foot-brand img{height:44px;width:auto}
.foot-company{margin-top:24px;line-height:26px}
.foot-brand p+p{margin-top:12px}
.foot-brand a:not([aria-label]){color:var(--on);font-weight:700;text-underline-offset:4px;text-decoration-color:rgba(244,242,238,.45)}
.foot-h{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light)}
.foot-links{margin-top:12px;display:grid;column-gap:24px}
.foot-links a,.foot-base a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-2);text-decoration:none}
.foot-links a:hover,.foot-base a:hover{color:var(--on);text-decoration:underline;text-underline-offset:4px}
.foot-base{grid-column:1/-1;border-top:1px solid var(--on-line);padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px}
.foot-base ul{display:flex;flex-wrap:wrap;column-gap:24px}
@media (min-width:600px){.foot-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.site-footer{padding:72px 0 48px}.foot-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}.foot-brand{grid-column:1/6}.foot-grid>nav{grid-column:7/13}}

/* Documents: support and privacy, on paper */
.doc{max-width:46em}
.doc h2{margin-top:56px;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);line-height:1.1}
.doc h2:first-child{margin-top:0}
.doc h3{margin-top:28px;font-size:19px}
.doc p,.doc li{color:var(--ink-2);font-size:17px;line-height:28px}
.doc p{margin-top:14px}
.doc h3+p{margin-top:6px}
.doc ul{margin-top:14px;display:grid;gap:10px}
.doc ul li{position:relative;padding-left:24px}
.doc ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;background:var(--ink);transform:rotate(45deg)}
.doc a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(20,33,61,.4);text-underline-offset:4px}

/* Phone sticky action, shown once the hero's call to action has scrolled away */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;background:var(--deep);border-top:1px solid var(--on-line-strong);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));box-shadow:0 -16px 32px -16px rgba(13,23,48,.45)}
.sticky-cta .badge-slot{min-height:48px}
.sticky-cta[hidden]{display:none}
@media (min-width:960px){.sticky-cta{display:none!important}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{
  .top,.sticky-cta{position:static}
  .sticky-cta,.seal-stage{display:none}
  .title,.masthead,.close,.pricing,.stage,.site-footer{background:#fff;color:#000}
}

/* How it works: the handover video (29 October 2026). It takes the place of the row of
   three screens, so the .shots rules above no longer match anything in the partial.
   4:5, silent and looping; site.js loads it only near the screen and plays it only in
   view. The button is the WCAG 2.2.2 pause control. From 1120 px the video and the
   three written steps sit side by side. */
.film{padding-inline:12px}
.film video{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:18px;background:var(--deep);box-shadow:0 0 0 1px rgba(20,33,61,.3),0 22px 36px -22px rgba(13,23,48,.65)}
.film-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin-top:16px}
.tray .film-foot .caption{padding:0}
.film-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);font:700 15px/1 var(--sans);cursor:pointer}
.film-btn::before{content:"";flex:none;width:11px;height:13px;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px,currentColor 7px)}
.film-btn.is-paused::before{width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.film-btn:hover{border-color:var(--ink)}
.film-btn[hidden]{display:none}
@media (min-width:600px){.film{padding-inline:32px}.film video,.film-foot{max-width:480px;margin-inline:auto}}
@media (min-width:1120px){
  .how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center;margin-top:56px}
  .how-grid .tray{margin-top:0}
  .how-grid .steps{grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:0}
  .film{padding-inline:clamp(32px,3.4vw,48px)}
  .film video,.film-foot{max-width:none}
}