/* ============================================================
   ArtisanCheck public stylesheet.

   Part A is the approved design (mockup/artisancheck-redesign.html,
   the same stylesheet as mockups/index.html) used verbatim, so the
   home page renders exactly like the sample. Edit Part A only to
   change the design itself.

   Part B adds the class vocabulary the other pages already use.
   ============================================================ */

:root{
  --ground:#F3EFE5; --paper:#FBF9F4; --white:#FFFFFF;
  --ink:#15201A; --text2:#3B463F; --muted:#4A544D;
  --line:#D9D2C1; --line2:#E4DDCD; --line3:#F0EBDF;
  --accent:#1E4A37; --accent-deep:#0F2C20; --dark:#13241C;
  --brass:#9A6B22; --mint:#CFE3D3; --on-dark:#C9D0C9; --on-dark-2:#B9C2BA;
  --ok-bg:#E1EDE3; --ok:#15402F; --warn-bg:#F6EBD6; --warn:#7A5316; --err:#9B2C1F;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk','Helvetica Neue',Helvetica,sans-serif;
  --mono:'IBM Plex Mono',Menlo,Consolas,monospace;
  --pad:clamp(20px,5.5vw,80px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--accent)}a:hover{color:var(--accent-deep)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.cta :focus-visible{outline-color:var(--mint)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-0.02em}
p{margin:0}
.wrap{padding-inline:var(--pad)}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(243,239,229,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.site-header .inner{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand span{font-family:var(--serif);font-size:28px;letter-spacing:-0.01em}
.brand:hover{color:var(--ink)}
.nav{display:flex;gap:32px;font-size:15px;font-weight:500}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.header-actions{display:flex;align-items:center;gap:20px;font-size:15px;font-weight:600}
.header-actions .signin{color:var(--ink);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:15px}
.btn-accent{background:var(--accent);color:var(--paper)}.btn-accent:hover{background:var(--accent-deep);color:var(--paper)}
@media (max-width:1080px){.nav{display:none}}
@media (max-width:560px){.header-actions .signin{display:none}.brand span{font-size:24px}.header-actions .btn{padding:0 16px}}

/* Lookup */
.lookup{display:flex;flex-direction:column;gap:12px}
.lookup label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.lookup-row{display:flex;gap:12px}
.field{flex:1 1 0;display:flex;align-items:center;gap:10px;height:60px;padding:0 20px;border-radius:12px;border:1.5px solid #B9B09C;background:var(--white);min-width:0}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,74,55,.18)}
.field .no{font-family:var(--serif);font-size:26px;color:var(--muted)}
.field input{flex:1 1 0;min-width:0;border:0;outline:none;background:transparent;font-family:var(--mono);font-size:24px;letter-spacing:.18em;color:var(--ink)}
.field input::placeholder{color:#8F978F}
.lookup[data-invalid] .field{border-color:var(--err)}
.btn-check{height:60px;padding:0 28px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:17px}
.btn-check:hover{background:#000;color:var(--paper)}
.hint{font-size:14px;color:var(--muted)}
.lookup[data-invalid] .hint{color:var(--err);font-weight:600}
@media (max-width:560px){.lookup-row{flex-direction:column}.btn-check{width:100%}}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:72px;padding-block:88px 96px;align-items:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:center;gap:32px}
.hero-copy .kicker{display:flex;align-items:center;gap:10px}
.hero-copy .kicker::before{content:"";width:28px;height:1px;background:var(--muted)}
.hero h1{font-size:clamp(56px,7vw,96px);line-height:.98;letter-spacing:-0.025em}
.hero h1 em{color:var(--accent)}
.lede{max-width:560px;font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--text2)}
/* The hero lede and the verify card are one block, so they end on the same edge.
   The card fills the hero column (a later rule sets .lookup-card to max-width:100%),
   which leaves the paragraph the narrower of the two by up to 300px, so it follows
   the column instead of stopping short. Scoped to the hero: a lede elsewhere is on
   its own and keeps whatever width it had. */
.hero-copy .lede{max-width:100%}
.lookup-card{max-width:600px;padding:24px;border-radius:20px;background:var(--paper);border:1px solid var(--line);box-shadow:0 1px 0 rgba(21,32,26,.04),0 24px 48px -28px rgba(21,32,26,.28)}
.hero-links{display:flex;flex-wrap:wrap;gap:28px;font-size:16px;font-weight:600}
.hero-links a{text-underline-offset:4px}
.seal-stage{position:relative;border-radius:28px;background:var(--dark);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:560px;padding:48px 24px;
  background-image:linear-gradient(rgba(243,239,229,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(243,239,229,.06) 1px,transparent 1px);background-size:70px 74px;background-position:-1px -1px}
.seal-stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;width:100%}
.seal-stack .seal{width:min(300px,70vw);height:auto}
.seal-caption{width:min(380px,100%);padding:18px 20px;border-radius:14px;background:rgba(243,239,229,.08);border:1px solid rgba(243,239,229,.18);display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ground)}
.seal-caption small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.seal-caption strong{font-size:16px}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-mint{background:var(--mint);color:var(--dark)}
@media (max-width:1080px){.hero{grid-template-columns:1fr;gap:48px;padding-block:56px 72px}.seal-stage{min-height:480px}}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);margin-bottom:112px}
.pillar{padding:28px 32px 0;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line)}
.pillar:first-child{padding-left:0;border-left:0}
.pillar:last-child{padding-right:0}
.pillar h3{font-size:40px;line-height:1}
.pillar p{color:var(--text2)}
@media (max-width:1080px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.pillar:nth-child(3){padding-left:0;border-left:0}.pillar:nth-child(2){padding-right:0}}
@media (max-width:600px){.pillars{grid-template-columns:1fr;row-gap:0;margin-bottom:72px}.pillar{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* Panels */
.panel{margin-inline:clamp(12px,2.8vw,40px);border-radius:32px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.section-head h2{font-size:clamp(44px,5vw,72px);line-height:1}
.section-head p{max-width:380px;font-size:17px;line-height:1.6;color:var(--text2)}

/* Register */
.register{background:var(--paper);border:1px solid var(--line2);padding:104px clamp(24px,5.5vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:80px;align-items:center}
.register-copy{display:flex;flex-direction:column;gap:24px}
.register-copy h2{font-size:clamp(44px,5vw,72px);line-height:1}
.register-copy > p{max-width:460px;font-size:19px;line-height:1.6;color:var(--text2)}
.facts{max-width:480px;margin-top:8px;border-bottom:1px solid var(--line)}
.fact{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.fact .letter{font-family:var(--mono);font-size:14px;color:var(--accent);padding-top:3px}
.fact strong{display:block;font-size:18px;margin-bottom:6px}
.fact p{color:var(--text2)}
.record-card{border-radius:22px;background:var(--white);border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(21,32,26,.35);overflow:hidden}
.rc-head{padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #ECE6D8}
.rc-head small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rc-head .name{font-family:var(--serif);font-size:30px;line-height:1.1}
.rc-meta{padding:20px 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-bottom:1px solid #ECE6D8}
.rc-meta dt{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rc-meta dd{margin:4px 0 0;font-size:15px;font-weight:500}
.rc-claims{padding:8px 28px}
.claim-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line3)}
.claim-row:last-child{border-bottom:0}
.claim-row .c{font-size:16px;font-weight:600}
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.status.ok{color:var(--ok)}.status.warn{color:var(--warn)}.status.none{color:var(--muted);font-weight:500}
.claim-row .c.none{color:var(--muted)}
.rc-foot{padding:18px 28px;background:#F7F4EC;display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--text2)}
.rc-foot a{font-weight:600}
.mono{font-family:var(--mono)}
@media (max-width:1080px){.register{grid-template-columns:1fr;gap:56px;padding-block:72px}}
@media (max-width:560px){.rc-meta{grid-template-columns:1fr 1fr}.rc-head{flex-direction:column;align-items:flex-start}}

/* How */
.how{padding-block:128px 120px;display:flex;flex-direction:column;gap:56px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.step{min-height:300px;padding:32px 28px;border-radius:20px;background:var(--paper);border:1px solid var(--line2);display:flex;flex-direction:column;gap:16px}
.step .n{font-family:var(--serif);font-size:56px;line-height:1;color:var(--accent)}
.step h3{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:0}
.step p{color:var(--text2)}
.step.final{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.step.final .n{color:var(--mint)}.step.final p{color:var(--on-dark)}
@media (max-width:1080px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.how{padding-block:88px}}
@media (max-width:600px){.steps{grid-template-columns:1fr}.step{min-height:0}}

/* Pricing */
.pricing{background:var(--dark);color:var(--ground);padding:112px clamp(24px,5.5vw,80px);display:flex;flex-direction:column;gap:56px}
.pricing .kicker{color:var(--on-dark-2)}
.pricing .section-head p{color:var(--on-dark)}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tier{padding:40px;border-radius:24px;display:flex;flex-direction:column;gap:28px}
.tier-main{background:var(--ground);color:var(--ink)}
.tier-line{border:1px solid rgba(243,239,229,.24)}
.tier-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tier-name{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.tier-line .tier-name{color:var(--mint)}
.tier-sub{font-size:17px;color:var(--text2);margin-top:8px}
.tier-line .tier-sub{color:var(--on-dark)}
.badge{height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--ground);font-size:13px;font-weight:600;white-space:nowrap}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price strong{font-family:var(--serif);font-weight:400;font-size:clamp(72px,7vw,96px);line-height:.9;letter-spacing:-0.03em}
.price span{font-size:18px;color:var(--text2)}
.tier-line .price span{color:var(--on-dark)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;line-height:1.45}
.ticks li{display:flex;gap:12px}
.ticks svg{flex-shrink:0;margin-top:1px}
.tier .btn{margin-top:auto;min-height:56px;border-radius:14px;font-size:17px}
.example{margin-top:auto;padding:18px 20px;border-radius:14px;background:rgba(243,239,229,.07);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:15px;color:var(--on-dark)}
.example .mono{font-size:16px;color:var(--ground)}
.assurances{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark-2)}
@media (max-width:900px){.tiers{grid-template-columns:1fr}.pricing{padding-block:72px}.tier{padding:28px}}

/* What you should know — the case for the seal, between For makers and Membership:
   the heading, then the reading under it, running the full width of the page. The
   space above it comes from .how's own bottom padding, so this carries only what is
   needed to hold the reading clear of the dark Membership panel below it. */
.know{padding-block:0 120px}
.know h2{font-size:clamp(40px,4.5vw,60px);line-height:1;margin:0 0 30px}
.know-inner{display:flex;flex-direction:column;gap:18px}
.know p{margin:0;font-size:17px;line-height:1.65;color:var(--text2)}
.know-source{font-size:14px}
.know-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:12px;padding-top:24px;border-top:1px solid var(--line)}
.know-cta p{color:var(--ink);font-size:19px;font-weight:600}
@media (max-width:1080px){.know{padding-block:0 88px}}
@media (max-width:640px){.know h2{margin-bottom:22px}}

/* FAQ */
.faq{padding-block:128px 112px;display:grid;grid-template-columns:380px minmax(0,1fr);gap:80px}
.faq-intro{display:flex;flex-direction:column;gap:20px}
.faq-intro h2{font-size:clamp(44px,4.5vw,60px);line-height:1.02}
.faq-intro p{font-size:17px;line-height:1.6;color:var(--text2)}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin:0}
.faq-item{padding:28px 0;border-top:1px solid var(--line)}
.faq-item:nth-child(-n+2){border-top-color:var(--ink)}
.faq-item dt{font-size:20px;font-weight:600;margin-bottom:12px}
.faq-item dd{margin:0;line-height:1.6;color:var(--text2)}
@media (max-width:1080px){.faq{grid-template-columns:1fr;gap:40px;padding-block:88px}}
@media (max-width:640px){.faq-list{grid-template-columns:1fr}.faq-item:nth-child(2){border-top-color:var(--line)}}

/* CTA */
.cta{background:var(--accent);color:var(--ground);padding:96px clamp(24px,5.5vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:80px;align-items:center}
.cta h2{font-size:clamp(44px,5.4vw,76px);line-height:1}
.cta p{max-width:560px;font-size:19px;line-height:1.6;color:#DCE6DE;margin-top:28px}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.cta-actions a{min-height:56px;border-radius:14px;font-size:17px;padding:0 28px}
.btn-light{background:var(--ground);color:var(--ink)}.btn-light:hover{background:var(--white);color:var(--ink)}
.btn-ghost{border:1.5px solid rgba(243,239,229,.5);color:var(--ground)}.btn-ghost:hover{border-color:var(--ground);color:var(--ground)}
.promises{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(243,239,229,.3)}
.promises li{padding:20px 0;border-top:1px solid rgba(243,239,229,.3);font-size:17px;line-height:1.5}
@media (max-width:1000px){.cta{grid-template-columns:1fr;gap:48px;padding-block:72px}}

/* Check again */
.check-again{padding-block:120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px);gap:64px;align-items:center}
.check-again h2{font-size:clamp(40px,4.5vw,60px);line-height:1;margin-bottom:16px}
.check-again p{max-width:480px;font-size:17px;color:var(--text2)}
@media (max-width:1000px){.check-again{grid-template-columns:1fr;gap:32px;padding-block:80px}}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding-block:48px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;font-size:15px;color:var(--text2)}
.site-footer .name{font-family:var(--serif);font-size:26px;color:var(--ink);display:block;margin-bottom:10px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:16px 40px;font-weight:500}
.site-footer nav a{color:var(--ink);text-decoration:none}
.site-footer nav a:hover{text-decoration:underline;text-underline-offset:5px}

#record-view[hidden],#home-view[hidden]{display:none}

/* ---- Real logo wordmark ---- */
.brand-word{display:flex;align-items:center;gap:0;font-family:var(--serif);font-size:28px;letter-spacing:-0.01em}

/* ---- Sample record: mirrors the live verified-record page ---- */
.sample-record{border-radius:24px;background:var(--paper);border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(21,32,26,.22);overflow:hidden}
.sample-record-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(24px,4vw,40px)}
.sample-record-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sample-number{font-family:var(--mono);font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:.12em;color:var(--brass);font-weight:600;margin:14px 0 0;line-height:1.1}
.sample-kv{display:grid;grid-template-columns:minmax(120px,.8fr) 1.2fr;gap:.6rem 1.25rem;margin-top:28px;font-size:15px}
/* Each row is wrapped in a div for grouping, but the two columns are meant to be
   the label and the value. Without this the div itself becomes the grid item, so
   every value lands in a half-width cell and long ones break mid-phrase. */
.sample-kv > div{display:contents}
.sample-kv dt{color:var(--muted);font-weight:600}
.sample-kv dd{margin:0;color:var(--ink);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sample-kv .pill{font-size:12px;padding:0 10px;height:26px}
.sample-record-seal{display:flex;flex-direction:column;align-items:center;justify-content:center}
.sample-record-seal .seal{width:240px;max-width:100%;height:auto}
@media (max-width:860px){
  .sample-record-seal .seal{width:200px}
}

/* ---- Membership tier grid ---- */
.membership-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mem-card{padding:24px;border-radius:18px;background:rgba(243,239,229,.08);border:1px solid rgba(243,239,229,.18);display:flex;flex-direction:column;gap:10px;color:var(--ground)}
.mem-pop{background:var(--ground);color:var(--ink);border-color:var(--ground);position:relative}
.mem-pop::after{content:"Popular";position:absolute;top:-10px;right:16px;background:var(--accent);color:var(--paper);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.mem-name{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.mem-pop .mem-name{color:var(--accent)}
.mem-price{font-family:var(--serif);font-size:42px;line-height:1;letter-spacing:-0.02em}
.mem-price span{font-size:17px;font-weight:500;opacity:.75;margin-left:4px}

/* A price on sale, the way a shop writes one: the normal price struck through,
   the sale price beside it, and a word saying which is which. The `font:inherit`
   lines undo the page's "every span inside a price" rules, so the sale price is
   exactly the size of the price it replaced, and nothing at all changes when
   there is no sale — the renderer emits a plain figure then. */
.was{text-decoration:line-through;text-decoration-thickness:2px;opacity:.5}
.now{font:inherit;color:inherit;opacity:1}
.saleTag{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--brass);padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:6px;opacity:1}
.price .was,.price .now,.mem-price .was,.mem-price .now{font:inherit;color:inherit;margin:0}
.tier-line .price .was,.tier-line .price .now{font:inherit;color:var(--on-dark)}
.price .was,.mem-price .was{opacity:.5}
.price .saleTag,.mem-price .saleTag{font-family:var(--sans);font-size:11px;font-weight:600;color:#fff;margin-left:6px}
.mem-detail{font-size:15px;line-height:1.45;opacity:.9}
.mem-save{margin-top:auto;font-size:13px;font-weight:600;color:var(--mint)}
.mem-pop .mem-save{color:var(--accent)}
@media (max-width:1000px){.membership-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.membership-grid{grid-template-columns:1fr}}

/* Long-form pages — the standard, terms of service, privacy policy, seal terms and
   about page. Clauses and chapters run in a single column, so the numbering reads down
   the page instead of across it: two columns put section 1 beside section 2, which is
   the wrong order for numbered clauses.

   The column spans the container, so its section rules line up with the heading above
   it and with every other page. It is not capped to a measured column. The about
   page's cards keep their two columns, below. */
.legal{display:grid;grid-template-columns:minmax(0,1fr)}
.legal-item{padding:28px 0;border-top:1px solid var(--line)}
.legal-item:first-child{border-top-color:var(--ink)}
.legal-item h2{font-size:20px;font-weight:600;margin:0 0 12px}
.legal-item p{margin:0 0 12px;line-height:1.6;color:var(--text2)}
.legal-item p:last-child{margin-bottom:0}
.legal-item strong{color:var(--ink)}
.legal-item a{color:var(--accent)}
/* The legal documents are written as prose, with two exceptions in the privacy policy: the
   data sharing commitments and the messaging program terms. Those are lists because each
   line stands on its own — one commitment, one right — so the bullets and numbers are part
   of what the section says. They take the colour and leading of the paragraphs around them,
   so the page still reads as one document. */
.legal-item ul, .legal-item ol{margin:0 0 12px;padding-left:1.4rem;color:var(--text2);line-height:1.6}
.legal-item ul:last-child, .legal-item ol:last-child{margin-bottom:0}
.legal-item li{margin:0 0 10px}
.legal-item li:last-child{margin-bottom:0}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.about-card{padding:28px 0;border-top:1px solid var(--line)}
.about-card:nth-child(-n+2){border-top-color:var(--ink)}
.about-card h2{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);font-weight:400;line-height:1.1;margin:0 0 12px}
.about-card p{margin:0;line-height:1.6;color:var(--text2)}
@media (max-width:860px){
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .about-card:nth-child(2){border-top-color:var(--line)}
}

/* ---- Mobile layout fixes: keep 1fr tracks from blowing out to min-content ---- */
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr)!important}
  .register{grid-template-columns:minmax(0,1fr)!important}
  .faq{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:1000px){
  .cta{grid-template-columns:minmax(0,1fr)!important}
  .check-again{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:900px){
  .tiers{grid-template-columns:minmax(0,1fr)!important}
}
.hero > *, .register > *, .sample-record-inner > *, .check-again > *, .cta > *, .faq > *, .legal > *, .about-grid > * { min-width:0 }
.lookup-card{max-width:100%}


/* ============================================================
   Part B — vocabulary used by the rest of the site (register,
   verification, membership, account pages). The home page above
   is the sample's own stylesheet, used verbatim; everything here
   only adds the classes those other pages need, on the same
   tokens and the same page width.
   ============================================================ */

:root{
  --white:#FFFFFF; --card:#FBF8F2; --bad:#9B2C1F; --bad-bg:#f9e9e7; --err:#9B2C1F;
  --rule:#D9D2C1; --rule-strong:#C9BCA8; --field:#FFFFFF; --brass-soft:rgba(154,107,34,.12);
  --wrap:1280px;
  --r-xs:4px; --r-sm:7px; --r:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-sm:0 1px 0 rgba(21,32,26,.04),0 1px 2px rgba(21,32,26,.04);
  --shadow:0 2px 10px rgba(21,32,26,.06);
  --shadow-lg:0 24px 48px -28px rgba(21,32,26,.28);
}

/* Page width. The sample runs full width with the shared gutter, so the
   register pages do the same rather than sitting in a narrower column. */
.container{width:100%;padding-inline:var(--pad);margin:0 auto;box-sizing:border-box}
.container-narrow{width:100%;max-width:760px;padding-inline:var(--pad);margin:0 auto;box-sizing:border-box}
.wrap-wide{width:100%;padding-inline:var(--pad);margin:0 auto;box-sizing:border-box}

/* type helpers */
.small{font-size:14px}
.tiny{font-size:12px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);padding:.6rem 1rem;z-index:100;border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h4{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:0;margin:0 0 .4em}
/* The sample sets a size on every heading it uses; the older pages were
   falling back to the browser default, so give them the same scale. Scoped
   with :where() so nothing on the home page is touched. */
:where(.container,.page-hero,.card,.verify-hero,.profile-hero,.auth-card,.empty,.notice,.alert,.claim,.panel) h1{font-size:clamp(40px,4.6vw,64px);line-height:1.03}
:where(.container,.page-hero,.card,.verify-hero,.profile-hero,.auth-card,.empty,.notice,.alert,.claim,.panel) h2{font-size:clamp(30px,3.4vw,44px);line-height:1.05}
:where(.container,.page-hero,.card,.verify-hero,.profile-hero,.auth-card,.empty,.notice,.alert,.claim,.panel) h3{font-size:clamp(22px,2.2vw,30px)}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin:0}
.hero-lede{font-size:18px;color:var(--text2);max-width:56ch;line-height:1.55}

/* The sample spaces its own paragraphs with flex gaps; these pages were
   written with paragraph and heading margins, so restore them here only. */
:where(.container,.card,.page-hero,.verify-hero,.profile-hero,.auth-card,.claim-body,.verdict-body,.empty,.notice,.alert,form) :is(h1,h2,h3){margin-bottom:.5rem}
:where(.container,.card,.page-hero,.verify-hero,.profile-hero,.claim-body,.verdict-body,.empty,.notice,.alert,form) p{margin-bottom:1em}
:where(.container,.card,.page-hero,.verify-hero,.profile-hero,.claim-body,.verdict-body,.empty,.notice,.alert,form) p:last-child{margin-bottom:0}

/* spacing utilities */
.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:.5rem!important}
.mb-2{margin-bottom:1rem!important}
.mb-3{margin-bottom:1.75rem!important}
.mt-1{margin-top:.5rem!important}
.mt-2{margin-top:1rem!important}
.mt-3{margin-top:1.75rem!important}

/* layout helpers */
.row{display:flex;gap:.75rem;align-items:center}
.row-wrap{flex-wrap:wrap}
.row-between{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.stack{display:grid;gap:1rem}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}

/* sections
   These set the vertical rhythm only, deliberately: `padding: X 0` would be a
   shorthand, and because these classes are declared after .container and .wrap it
   would silently zero their side padding. A page written as
   `container section-tight` — which every document page is — then runs its content
   flush to the window edge while its heading, inside a different container, stays
   inset. padding-block leaves the horizontal axis to whoever set it. */
.section{padding-block:clamp(2.5rem,6vw,4.5rem)}
.section-tight{padding-block:2rem}
.page-hero{padding-block:clamp(40px,6vw,88px) clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:20px;max-width:900px}
.page-hero .hero-lede{font-size:clamp(18px,1.6vw,20px);line-height:1.6;max-width:640px}
.page-hero .row{margin-top:4px}

/* buttons — .btn itself comes from the sample above */
.btn-primary{background:var(--accent);color:var(--paper);border:1px solid var(--accent)}
.btn-primary:hover{background:var(--accent-deep);color:var(--paper)}
.btn-gold{background:var(--accent);color:var(--paper);border:1px solid var(--accent)}
.btn-gold:hover{background:var(--accent-deep);color:var(--paper)}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-secondary:hover{background:var(--paper);color:var(--ink);border-color:var(--line2)}
.btn-sm{padding:.45rem .8rem;font-size:14px;min-height:36px}
.btn-lg{padding:.95rem 1.6rem;font-size:17px;min-height:56px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* cards and blocks */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--shadow-sm)}
.card-tight{padding:1.1rem}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.card-title{font-family:var(--serif);font-size:22px;font-weight:400;margin:0}
.notice{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.05rem;font-size:15px;color:var(--text2)}
.notice.ok{background:var(--ok-bg);border-color:#c9dfd0;color:var(--ok)}
.notice.bad{background:var(--bad-bg);border-color:#e6c3bf;color:var(--bad)}
.alert{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:.9rem 1.05rem;font-size:15px;display:flex;gap:.7rem;align-items:flex-start}
.alert-title{font-weight:600;margin:0 0 .2rem}
.alert-ok{background:var(--ok-bg);border-color:#c9dfd0;color:var(--ok)}
.alert-warn{background:var(--warn-bg);border-color:#e8d8ac;color:var(--warn)}
.alert-bad{background:var(--bad-bg);border-color:#e6c3bf;color:var(--bad)}
.alert-info{background:var(--paper);border-color:var(--line)}

/* status pills — .pill and .pill-ok/.pill-mint come from the sample */
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-bad{background:var(--bad-bg);color:var(--bad)}
.pill-brass{background:#f6eeda;color:var(--brass)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.brass{background:#f6eeda;color:var(--brass)}
.badge-payment{font-weight:500}

/* empty / loading */
.empty{text-align:center;padding:3rem 1.5rem;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--muted)}
.empty h3{font-family:var(--serif);font-weight:400;font-size:28px}
.skeleton{background:linear-gradient(90deg,var(--line3) 25%,var(--paper) 50%,var(--line3) 75%);background-size:200% 100%;animation:shimmer 1.3s infinite linear;border-radius:var(--r-sm);min-height:1rem;color:var(--muted)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--ground);border-radius:10px;padding:12px 20px;font-size:15px;box-shadow:var(--shadow);z-index:200;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .2s ease}
.toast.show{opacity:1}
.toast-stack{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:grid;gap:.5rem;width:min(560px,calc(100vw - 32px))}

/* verification page */
.verify-hero{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.5rem);box-shadow:var(--shadow)}
.verdict{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap}
.verdict-body{flex:1 1 340px;min-width:0}
.verdict-seal{flex:0 0 auto;width:min(240px,60vw)}
.number-display{font-family:var(--serif);font-size:clamp(2rem,6vw,3rem);letter-spacing:.12em;color:var(--brass);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;margin:0}
.kv{display:grid;grid-template-columns:minmax(140px,.7fr) 1.3fr;gap:.55rem 1.25rem;font-size:15px;margin:0}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;color:var(--ink);word-break:break-word}
.claim{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.claim-head{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1.05rem;background:var(--line3);border-bottom:1px solid var(--line);flex-wrap:wrap}
.claim-title{font-family:var(--serif);font-size:22px;font-weight:400;margin:0;flex:1 1 auto;min-width:0}
.claim-status{margin-left:auto}
.claim-body{padding:1rem 1.05rem}
.claim-tone-ok{border-left:3px solid var(--ok)}
.claim-tone-warn{border-left:3px solid var(--warn)}
.claim-tone-bad{border-left:3px solid var(--bad)}
.claim-tone-muted{border-left:3px solid var(--line)}
.seal-frame{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:.75rem;display:grid;place-items:center}
.seal-frame img,.seal-frame svg{display:block;max-width:100%;height:auto}

/* register pages */
.toolbar{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.25rem}
.search-form{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
.search-form .field{flex:1 1 260px}
.breadcrumb{display:flex;gap:.5rem;flex-wrap:wrap;font-size:14px;color:var(--muted);padding-top:8px;margin-bottom:12px}
.breadcrumb a{color:var(--muted)}
.result-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem}
.profile-hero{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.5rem)}
.line-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}

/* form controls */
.label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:.35rem;letter-spacing:.04em;text-transform:uppercase}
.label .req,.req{color:var(--bad)}
.input{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:.65rem .8rem;transition:border-color .15s ease,box-shadow .15s ease}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,74,55,.18)}
.number-input{font-family:var(--mono);font-size:1.5rem;letter-spacing:.35em;text-align:center;padding:.7rem .5rem;font-variant-numeric:tabular-nums}
.hint{font-size:14px;color:var(--muted);margin:.3rem 0 0}
/* The sample's lookup form spaces its parts with flex gap, so its hint takes
   no margin; the rule above is for the older pages. */
.lookup .hint{margin:0}
.verify-form .row-wrap{align-items:stretch}
.verify-slot{flex:1 1 220px;min-width:0}
.field-group{margin-bottom:1rem}
.field-group .label{margin-bottom:.4rem}
.field-group .hint{margin-top:.35rem}
.error-text{font-size:14px;color:var(--bad);margin:.3rem 0 0;font-weight:500}
.field-error .input{border-color:var(--bad)}
/* The trap for automated submissions: in the page, invisible to people, and skipped by the
   keyboard and by screen readers. Shared by the forms that take submissions from the public. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* A question whose two answers exclude each other, so they are radios and not checkboxes: a
   record of consent must never be able to say both at once. Neither is selected to begin with,
   because an answer that is already there is not an answer.
   
   Named for this page rather than .consent-choice, which the cookie banner's boxes already use
   in a stylesheet the banner injects. Two rules for one class would have given the banner's
   checkboxes this card's background and border as well, which is a thing that only shows up
   looking at the banner. */
.optin-set{border:0;padding:0;margin:0 0 1rem;min-width:0}
.optin-answer{display:flex;gap:.7rem;align-items:flex-start;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:.8rem .9rem;margin-bottom:.6rem;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.optin-answer:hover{border-color:var(--line2)}
.optin-answer input{flex:0 0 auto;width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--accent);cursor:pointer}
.optin-answer span{font-size:16px;color:var(--text2);line-height:1.45}
.optin-answer:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,74,55,.12)}
.optin-answer:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* The consent sentence is the thing being agreed to, so it is set as text to be read rather
   than as fine print underneath a button. */
.optin-terms{margin:0 0 1.1rem;padding-left:1rem;border-left:3px solid var(--line);color:var(--text2);font-size:15px;line-height:1.6}
.optin-terms p{margin:0 0 .7rem}
.optin-terms p:last-child{margin-bottom:0}

/* account screens */
.auth-card{max-width:460px;margin:0 auto;padding:clamp(2rem,5vw,3rem) var(--pad)}
.help-link{font-size:14px;color:var(--muted)}
.passkey-btn{background:transparent;border:1px solid var(--line);color:var(--text2);padding:.55rem .9rem;border-radius:var(--r-pill);font-size:14px;cursor:pointer}
.passkey-btn:hover{background:var(--paper)}
.divider{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:14px;margin:1.25rem 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}