/* The BAIF design system, as in the prototype "BAIF Priority": a black canvas, white type, one
   green, square corners, 1px rules, outline buttons, no shadows. Manrope for headings, Poppins for
   text and controls, IBM Plex Mono for fingerprints and addresses. Fonts are self-hosted (SIL OFL
   1.1, see /fonts/*-OFL.txt); nothing is loaded from other origins.
   Green means one thing: "Timestamp confirmed" (and the keyboard focus ring). There is no red:
   errors are outlined boxes. Layout: a header, the view in a 1440px grid, a footer. */
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(/fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(/fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
  /* the design system's tokens */
  --black:#000;--white:#fff;--green:#15c639;--graphite:#202226;--iron:#47474a;--silver:#d9d9d9;--ash:#a3a3a6;
  --bg:var(--black);--surface:var(--graphite);--line:var(--iron);--text:var(--white);--muted:var(--ash);--subtle:#8e8e92;
  --heading:Manrope,ui-sans-serif,system-ui,sans-serif;--body:Poppins,ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(20px,5vw,70px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--body);letter-spacing:.01em;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{opacity:.75}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
::selection{background:var(--white);color:var(--black)}

/* The environment of a test or demo site, above everything. */
.banner{flex:none;background:var(--graphite);color:var(--ash);border-bottom:1px solid var(--iron);text-align:center;font-size:13px;padding:8px var(--gutter)}

/* Header: the logo and the main navigation; below 820px a Menu button opens it as a list. */
.site-header{flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;width:100%;max-width:1440px;margin:0 auto;padding:24px var(--gutter)}
.logo{display:block;line-height:0}
.logo:hover{opacity:1}
.logo img{width:auto;height:46px}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 30px;font-size:17px}
.site-nav a{color:var(--text);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current=page]{opacity:1;text-decoration:underline;text-underline-offset:7px}
.account{display:inline-flex;align-items:center;gap:14px;color:var(--muted);font-size:15px}
.account a{color:var(--muted);text-decoration:none}
.account a:hover{color:var(--text);opacity:1}
.menu-toggle{display:none;min-width:88px;min-height:44px;padding:10px 20px;border:1px solid var(--white);background:transparent;color:var(--text);font:400 16px/1 var(--body)}

/* The view, in the page's grid: a reading column by default; the home page uses the whole width. */
main{flex:1;display:block;width:100%;max-width:1440px;margin:0 auto;padding:40px var(--gutter) 96px}
.card{width:100%;max-width:760px}
body[data-view=home] .card{max-width:none}
h1{font:600 46px/1.15 var(--heading);letter-spacing:-.015em;margin:0 0 20px;overflow-wrap:anywhere}
h2{font:600 40px/1.15 var(--heading);letter-spacing:-.015em;margin:0 0 20px;overflow-wrap:anywhere}
h3{font:600 22px/1.25 var(--heading);letter-spacing:-.01em;margin:36px 0 10px}
.lead{font-size:18px;line-height:1.55;margin:0 0 10px;overflow-wrap:anywhere}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 24px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
p{margin:0 0 10px}
.wide{display:inline-block;min-width:240px;margin-top:12px;padding:13px 22px}
.records .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.records .row>:first-child{min-width:0;overflow-wrap:anywhere}
.records .row-actions{display:flex;gap:10px;flex-shrink:0}
#view-account input[type=text],#view-account input[type=email]{margin-bottom:10px}

/* The drop zone: a real control (Enter and Space open the picker), dashed until a file is over it. */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;padding:32px 20px;border:1px dashed var(--iron);text-align:center;cursor:pointer;transition:border-color .15s}
.drop:hover,.drop.over{border:1px solid var(--white)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.drop:focus-within{outline:2px solid var(--green);outline-offset:3px}
#pdf-name{font-weight:500;font-size:19px;overflow-wrap:anywhere}
#papers-drop{min-height:150px}  /* My papers: the way to timestamp, at the top and lower than the home page's */
.drop-hint{font-size:14px;color:var(--muted)}

/* Fields: square, a 1px iron border on black, white when focused. */
.field-label{display:block;font-size:14px;color:var(--silver);margin:16px 0 6px}
input[type=text],input[type=email],input[type=date],select{background:var(--black);border:1px solid var(--iron);border-radius:0;color:var(--text);padding:12px 14px;font:15px/1.4 var(--body)}
input[type=text],input[type=email]{width:100%}
input[type=text]:focus,input[type=email]:focus,input[type=date]:focus,select:focus{border-color:var(--white)}
input::placeholder{color:var(--subtle)}
input[type=file]{max-width:100%;font:inherit;font-size:14px;color:var(--muted)}
input[type=file]::file-selector-button{font:inherit;font-size:14px;margin-right:12px;padding:9px 16px;border:1px solid var(--silver);border-radius:0;background:transparent;color:var(--text);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--white);color:var(--black)}
input[type=checkbox],input[type=radio]{accent-color:var(--white)}

/* Buttons: outline only, as the brand has no filled button; hierarchy comes from placement. */
button{font:400 17px/1 var(--body);cursor:pointer;border-radius:0;border:1px solid var(--silver);background:transparent;color:var(--text);padding:13px 22px;transition:background .15s,color .15s}
button:hover:not(:disabled){background:var(--white);color:var(--black)}
button:disabled{opacity:.4;cursor:default}
.primary,.secondary,a.button{display:inline-block;border:1px solid var(--silver);background:transparent;color:var(--text);text-align:center;text-decoration:none;transition:background .15s,color .15s}
.primary{margin-top:20px;min-width:240px;padding:15px 28px;font-size:17px}
.secondary{padding:11px 18px;font-size:15px}
.primary:hover:not(:disabled),.secondary:hover:not(:disabled),a.button:hover{background:var(--white);color:var(--black);opacity:1}
a.button{font:400 17px/1 var(--body)}
a.button:not(.primary):not(.secondary){padding:13px 22px}  /* a link that leads its row (Download evidence), sized as a button */
a.secondary.button{padding:11px 18px;font-size:15px}
.primary+.link{margin-left:16px}
.link{border:0;background:none;padding:4px 0;color:var(--text);font-size:15px;text-decoration:underline;text-underline-offset:3px}
.link:hover:not(:disabled){opacity:.75;background:none;color:var(--text)}

/* Facts, notices and results: outlined, never filled; white for errors, silver for information. */
.facts{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;margin:18px 0 0;font-size:15px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;overflow-wrap:anywhere}
.facts small{color:var(--muted)}
.mono{font:13px/1.5 var(--mono);letter-spacing:0}
input.mono{font:15px/1.4 var(--mono)}
.notice{margin-top:16px;padding:14px 18px;border:1px solid var(--silver);font-size:15px}
.notice p{margin:0}
.status{margin:6px 0 4px}
.stage{font:600 26px/1.25 var(--heading);letter-spacing:-.01em;margin:0 0 6px}
.accepted{color:var(--muted);font-size:15px;margin:0 0 4px}
.records{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--iron)}
.records li{display:flex;flex-direction:column;gap:3px;padding:16px 0;border-bottom:1px solid var(--iron)}
.records a{font-weight:500;font-size:17px;text-decoration:none;overflow-wrap:anywhere}
.records a:hover{text-decoration:underline;opacity:1}
.records small{color:var(--muted);font-size:14px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.fingerprint{margin-top:16px}.fingerprint summary{cursor:pointer;color:var(--muted);font-size:15px}.fingerprint input{margin:10px 0}

.note{font-size:14px;line-height:1.55;color:var(--muted);margin:16px 0 0}
.hint{font-size:14px;color:var(--muted);margin:6px 0 0}
.text-link{display:inline-block;margin-top:16px;font-size:15px;color:var(--text);text-underline-offset:3px}
.check-result a{color:var(--text);text-underline-offset:3px}
.error{margin:16px 0 0;padding:12px 16px;border:1px solid var(--white);color:var(--text);font-size:15px;overflow-wrap:anywhere}

.back{display:inline-block;margin-bottom:16px;font-size:15px;color:var(--text)}
/* Headings receive focus on a view change (for keyboard and screen-reader users); no ring for that. */
[tabindex="-1"]:focus{outline:none}
.check-result{font-size:15px;margin:14px 0 0;overflow-wrap:anywhere}
.check-result:empty{display:none}
.how{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:15px}
.how li{margin-bottom:10px}
.filters{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:10px 0;font-size:15px;color:var(--muted)}
/* A long paper title in an option must not widen the page on a phone. */
select{max-width:100%}.filters label{max-width:100%}.filters select{max-width:13rem}
.filters input[type=text],.filters input[type=date]{width:auto}.filters .check{display:flex;gap:8px;align-items:center}
.choices{border:0;margin:12px 0 0;padding:0;font-size:15px;color:var(--muted)}.choices legend{padding:0;margin-bottom:6px;font-size:14px;color:var(--silver)}.choices .check{display:inline-flex;gap:8px;align-items:center;margin-right:18px}
.inline-form{margin:14px 0}.inline-form input,.inline-form select{margin:6px 0}
.audience{margin:10px 0;padding-left:20px;font-size:15px;color:var(--muted)}
.records li .row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.share-url{display:block;margin-top:4px;overflow-wrap:anywhere;color:var(--muted)}
/* Without accounts: the private link's box on a record, and the records this browser holds on the home page. */
.notice h3{margin-top:0}
#record-holder>*+*{margin-top:10px}
#record-link{color:var(--text)}
#record-device,.records li>strong{overflow-wrap:anywhere}  /* a file name may have no space to wrap at */
#home-records{margin-top:72px;max-width:760px}
#home-records h2{font-size:32px}

/* Footer: the logo, the foundation's line, more links, a 1px iron rule above. */
.site-footer{flex:none;width:100%;border-top:1px solid var(--iron)}
.site-footer .footer-inner{max-width:1440px;margin:0 auto;padding:40px var(--gutter) 32px;display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:start}
.site-footer .tagline{max-width:22rem;margin:0;font-size:16px}
.links{display:flex;gap:24px;justify-content:flex-end;font-size:15px}
.links a{color:var(--text)}
.site-footer .legal{grid-column:1/-1;margin:16px 0 0;padding-top:20px;border-top:1px solid var(--iron);font-size:14px;color:var(--muted)}

/* The home page: the explanation on the left, the tool on the right (the prototype's layout). */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,607px);gap:40px 70px;align-items:start;padding-top:24px}
#view-home h1{font-size:66px;line-height:1.02;letter-spacing:-.025em;max-width:640px;margin-bottom:28px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--white)}
.meta{color:var(--muted);margin:28px 0 0}
.panel{background:var(--graphite);padding:36px}
.panel .drop{min-height:230px}
.glyph{display:grid;place-items:center;width:48px;height:48px;margin-bottom:10px;border:1px solid var(--white);font:300 20px/1 var(--body)}
.drop-title{font-weight:500;font-size:19px}
.lock{display:flex;gap:10px;align-items:flex-start;text-align:left}
.lock::before{content:"";flex:none;width:12px;height:14px;margin-top:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' fill='none' stroke='%23a3a3a6' stroke-width='1.2'%3E%3Crect x='1' y='6.5' width='10' height='6.5'/%3E%3Cpath d='M3.5 6.5V4.5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") no-repeat}
.explain{margin-top:120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,607px);gap:24px 70px;align-items:start}
.explain h2{font-size:46px;margin:0}
.explain .lead{color:var(--muted)}
.flow{grid-column:1/-1;list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.flow li{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--iron)}
.flow li:first-child{border:1px dashed var(--silver)}
.flow-label,.fp-label{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.flow strong{font:600 22px/1.25 var(--heading)}
.flow li>span:last-child{color:var(--muted);font-size:15px}
.limits{grid-column:1/-1;max-width:760px}

/* The fingerprint in eight groups of eight, to read aloud or compare by eye; while it is being
   computed the characters cycle in iron and lock to white from left to right. */
.fp{margin:24px 0}
.fp-label{margin:0 0 10px}
.fp-grid{display:grid;grid-template-columns:repeat(4,max-content);gap:6px 20px;font:16px/1.6 var(--mono);letter-spacing:.04em}
.fp-grid span{white-space:nowrap}
.fp-grid.scrambling{color:var(--iron)}
.fp .link{margin-top:10px}

/* The four recording stages: squares are steps (white when done, outlined when in progress, iron
   when next, crossed when stopped); the circle is the proof state, green only once confirmed. */
.steps{list-style:none;max-width:560px;margin:18px 0 8px;padding:0;border-top:1px solid var(--iron)}
.steps li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--iron);font-size:15px}
.steps .marker{flex:none;width:10px;height:10px;border:1px solid var(--iron)}
.steps .current .marker{border-color:var(--white)}
.steps .done .marker{border-color:var(--white);background:var(--white)}
.steps .stopped .marker{border-color:var(--white);background:linear-gradient(135deg,transparent 42%,var(--white) 42%,var(--white) 58%,transparent 58%)}
.steps .confirmed .marker{width:11px;height:11px;border-radius:50%;border-color:var(--green);background:var(--green)}
.steps .waiting{color:var(--muted)}
.steps .state{margin-left:auto;color:var(--muted);font-size:14px}

/* A row's state: a hollow ring while recording or pending, the green dot once confirmed, a crossed square if stopped. */
.state-marker{display:inline-block;width:9px;height:9px;margin-right:12px;vertical-align:2px;border:1px solid var(--white);border-radius:50%}
.state-marker.confirmed{border-color:var(--green);background:var(--green)}
.state-marker.stopped{border-radius:0;background:linear-gradient(135deg,transparent 42%,var(--white) 42%,var(--white) 58%,transparent 58%)}
/* A switch of two options: native radios drawn as segments, the chosen one inverted to white. */
.switch{display:inline-flex;margin:8px 0 24px;padding:0;border:1px solid var(--iron)}
.switch label{position:relative;min-width:150px;padding:12px 22px;text-align:center;color:var(--muted);cursor:pointer}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch label:has(input:checked){background:var(--white);color:var(--black)}
.switch label:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Results: a confirmed match ends in the green dot, a mismatch in a hollow square; the words say the rest. */
.check-result.good::before,.check-result.bad::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;vertical-align:1px}
.check-result.good::before{border-radius:50%;background:var(--green)}
.check-result.bad::before{border:1px solid var(--white)}
.fp-grid .diff{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
#compare-diff .fp-grid{color:var(--muted)}
#compare-diff .fp-label+.fp-grid{margin-bottom:14px}

/* The certificate (the prototype's): dark on screen; its Print view and printing are light, the
   logo inverted, the QR code always dark on white. Printing shows the certificate alone. */
.certificate{--c-bg:var(--black);--c-fg:var(--white);--c-muted:var(--ash);--c-line:var(--iron);max-width:800px;margin-top:18px;padding:48px 52px;border:1px solid var(--c-line);background:var(--c-bg);color:var(--c-fg)}
.certificate.paper{--c-bg:#fff;--c-fg:#000;--c-muted:#555;--c-line:#c8c8c8}
.certificate.paper header img{filter:invert(1) hue-rotate(180deg)}
.certificate header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.certificate header img{width:auto;height:34px}
.cert-kind{margin:0;text-align:right;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.8}
.cert-kind .mono{letter-spacing:0;text-transform:none;color:var(--c-muted)}
.cert-lead{margin:44px 0 0;font-size:19px;color:var(--c-muted)}
.cert-date{margin:6px 0 4px;font:600 56px/1.05 var(--heading);letter-spacing:-.025em}
.cert-time{color:var(--c-muted)}
.cert-rows{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:32px 0;border-top:1px solid var(--c-line)}
.cert-rows dt,.cert-rows dd{margin:0;padding:12px 0;border-bottom:1px solid var(--c-line);overflow-wrap:anywhere}
.cert-rows dt{padding-right:32px;color:var(--c-muted)}
.cert-rows #cert-tx{display:block;word-break:break-all;text-wrap:balance}  /* a hash that does not fit splits evenly, never one character alone */
.cert-limits{font-size:14px;color:var(--c-muted)}
.cert-footer{display:flex;gap:24px;align-items:center;margin-top:28px}
.cert-footer p{margin:0;overflow-wrap:anywhere}
.cert-qr{flex:none;width:112px;height:112px}
.cert-qr svg{display:block;width:100%;height:100%}
@media print{  /* any page prints light; "Print certificate" prints the certificate alone */
  :root{--black:#fff;--white:#000;--bg:#fff;--text:#000;--muted:#444;--ash:#444;--silver:#555;--iron:#bbb;--graphite:#f2f2f2;color-scheme:light}
  .site-header nav,.menu-toggle,.banner{display:none!important}
  body.printing-certificate>*:not(main),body.printing-certificate main>.card>*:not(#view-record),
  body.printing-certificate #view-record>*:not(#record-certificate),body.printing-certificate #record-certificate>*:not(#certificate){display:none!important}
  html,body,main{background:#fff;padding:0;margin:0}
  .certificate{--c-bg:#fff;--c-fg:#000;--c-muted:#444;--c-line:#bbb;max-width:none;border:0;padding:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .certificate header img{filter:invert(1) hue-rotate(180deg)}
}

/* How it works: five steps from file to timestamp, three explanations, the claims side by side. */
.flow-five{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:12px}
.flow-five li{padding:18px}
.flow-five strong{font-size:18px}
.steps-explained,.claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;margin-top:8px}
.claims{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps-explained p,.privacy dd{color:var(--muted);font-size:15px}
.hooke{margin-top:48px;padding:28px 32px;border:1px solid var(--iron)}
.hooke h3{margin-top:0}.hooke p{color:var(--muted)}
.faq details{border-bottom:1px solid var(--iron)}.faq details:first-child{border-top:1px solid var(--iron)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:16px 0;cursor:pointer;font-weight:500;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 22px/1 var(--body);color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 16px;color:var(--muted);font-size:15px}
.closing{margin-top:64px;padding-top:40px;border-top:1px solid var(--iron)}
body[data-view=how] .card{max-width:1100px}

@media(max-width:819px){
  .flow-five,.steps-explained,.claims{grid-template-columns:1fr}
  .certificate{padding:28px 22px}.cert-date{font-size:38px}.cert-rows{grid-template-columns:1fr}.cert-rows dt{padding-bottom:0;border-bottom:0}.cert-footer{flex-direction:column;align-items:flex-start}
  .switch{display:flex}.switch label{flex:1;min-width:0}
  .hero,.explain{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  #view-home h1{font-size:40px}.explain{margin-top:72px}.explain h2{font-size:34px}
  .panel{padding:20px}
  .site-header{padding:16px var(--gutter);flex-wrap:wrap}
  .logo img{height:40px}
  .menu-toggle{display:block}
  .site-nav{display:none}
  body.menu-open .site-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;order:3;font-size:17px}
  body.menu-open .site-nav>a,body.menu-open .site-nav>.account{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--iron)}
  body.menu-open .site-nav>a::after{content:"";flex:none;width:16px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none' stroke='%23a3a3a6' stroke-width='1.2'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat}
  body.menu-open .site-nav>.account{flex-wrap:wrap;gap:8px 14px}
  body.menu-open .site-nav>.account a{min-width:0;overflow-wrap:anywhere}
  body.menu-open .site-nav>a:first-child{border-top:1px solid var(--iron)}
  main{padding:28px var(--gutter) 64px}
  h1{font-size:38px}h2{font-size:32px}h3{font-size:20px}
  .site-footer .footer-inner{grid-template-columns:1fr}.links{justify-content:flex-start}
}
@media(max-width:600px){
  .facts{grid-template-columns:1fr;gap:0}
  .facts dd{margin-bottom:10px}
  .primary{width:100%;min-width:0}
  .fp-grid{grid-template-columns:repeat(2,max-content)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}