/* OkayRecord marketing site. Direction chosen by the founder on 2026-10-25: centered, product-first tiles
   (white / light grey / black bands, thin dark nav, chevron links, fine print as footnotes).
   Self-hosted fonts (Inter 4.0, Latin subsets), no scripts, no third-party requests. */
@font-face{font-family:'Inter';src:url('/fonts/Inter-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-Medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-SemiBold.woff') format('woff');font-weight:600 700;font-display:swap}
@font-face{font-family:'Inter Display';src:url('/fonts/InterDisplay-SemiBold.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Inter Display';src:url('/fonts/InterDisplay-Bold.woff') format('woff');font-weight:700 800;font-display:swap}

:root{
  --bg:#ffffff; --grey:#f5f5f7; --black:#000000; --ink:#1d1d1f; --muted:#6e6e73; --hair:#d2d2d7;
  --on-black:#f5f5f7; --on-black-muted:#a1a1a6; --black-hair:#424245;
  --link:#1c46ca; --link-on-black:#7fa8ff; --good:#227c45;
  --frame:#1d1d1f; --screen:#ffffff; --screen-ink:#1d1d1f; --screen-muted:#6e6e73; --screen-card:#f5f5f7;
  --t-amber:#FFF3D6; --f-amber:#6B4500; --amber:#8A5A00; --t-blue:#E8EEFC; --f-blue:#1A3A9C;
  --display:'Inter Display','Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --body:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000000; --grey:#161617; --black:#0b0b0d; --ink:#f5f5f7; --muted:#a1a1a6; --hair:#3a3a3c; --link:#7fa8ff; --good:#5ccf86;
  --frame:#3a3a3c; --screen:#1d1d1f; --screen-ink:#f5f5f7; --screen-muted:#a1a1a6; --screen-card:#2c2c2e;
  --t-amber:#3A2E10; --f-amber:#F6D27A; --amber:#F2C14E; --t-blue:#1B2648; --f-blue:#BFD0FF;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.47}
img,svg{max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.05;text-wrap:balance;overflow-wrap:anywhere}
a{color:var(--link)}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--link);color:#fff;padding:12px 16px;border-radius:10px;z-index:10;font-weight:600}
.skip:focus{left:8px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;left:-999px;width:1px;height:1px;overflow:hidden}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
[id]{scroll-margin-top:56px}
.tbl{font-variant-numeric:tabular-nums}
sup{font-size:.6em;vertical-align:super;line-height:0}

/* nav */
.nav{background:rgba(0,0,0,.84);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#f5f5f7}
.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 20px;min-height:48px}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:#f5f5f7;font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.brand .m{width:22px;height:22px;border-radius:5px;background:#f5f5f7;color:#000;display:grid;place-items:center;flex:none}
.brand .m svg{width:22px;height:22px}
.nav ul{display:flex;flex-wrap:wrap;gap:0 28px;font-size:.8rem;list-style:none;padding:0;margin:0;opacity:.92;min-width:0}
.nav ul a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.nav ul a:hover{text-decoration:underline;opacity:1}
@media (max-width:640px){.nav ul li:not(:last-child){display:none}}

/* tiles */
.tile{text-align:center;padding-top:clamp(44px,6vw,72px);overflow:hidden}
.tile.w{background:var(--bg);color:var(--ink)}
.tile.g{background:var(--grey);color:var(--ink)}
.tile.k{background:var(--black);color:var(--on-black)}
.pn{font-size:clamp(2.5rem,5.6vw,4rem);margin:0 auto;max-width:18ch}
.tag{font-family:var(--body);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.01em;line-height:1.2;margin:10px auto 0;max-width:34ch;text-wrap:balance}
.sub{font-size:1.0625rem;color:var(--muted);max-width:60ch;margin:12px auto 0}
.tile.k .sub{color:var(--on-black-muted)}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin-top:18px;font-size:1.25rem}
.links a{color:var(--link);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.links a::after{content:"\203A";margin-left:6px;font-size:1.2em;line-height:1}
.links a:hover{text-decoration:underline}
.tile.k .links a{color:var(--link-on-black)}
.art{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}
.art.cut{margin-bottom:-44px}

/* the phone (decorative drawing of the Today screen) */
.phone{width:min(300px,100%);aspect-ratio:9 / 18.5;border:10px solid var(--frame);border-radius:44px;background:var(--screen);color:var(--screen-ink);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);text-align:left;padding:34px 14px 0;display:flex;flex-direction:column;gap:12px;font-size:.9rem}
.phone .h{font-family:var(--display);font-weight:600;font-size:1.65rem;letter-spacing:-.02em;line-height:1}
.phone .meta{color:var(--screen-muted);font-size:.8rem;margin-top:-6px}
.phone .card{background:var(--screen-card);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.phone .ch{display:flex;justify-content:space-between;font-weight:600}
.phone .ch b{background:var(--screen-ink);color:var(--screen);border-radius:7px;padding:0 7px;font-size:.78rem;display:inline-grid;place-items:center;min-width:22px}
.phone .r{display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:1px solid var(--hair);font-size:.85rem}
.phone .r small{color:var(--screen-muted);font-size:.78rem}

/* flat cards used as product shots */
.shot{background:var(--screen);color:var(--screen-ink);border-radius:18px;padding:22px;width:min(400px,100%);text-align:left;box-shadow:0 30px 60px -36px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:12px;min-width:0}
.shot .t{font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.015em;line-height:1.05}
.shot .from{font-size:.85rem;color:var(--screen-muted)}
.shot .kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hair);font-size:.95rem}
.shot .kv span{color:var(--screen-muted)}
.shot .kv b{text-align:right;overflow-wrap:anywhere}
.shot .pb{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;font-weight:600}
.shot .pb.p{background:var(--link);color:#fff}
.shot .pb.s{border:1.5px solid var(--screen-ink)}
.shot .sig{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.shot .sig div{border-top:1.5px solid var(--screen-ink);padding-top:8px;font-size:.85rem;color:var(--screen-muted);min-width:0}
.shot .sig b{display:block;color:var(--screen-ink);font-style:italic;font-weight:600;font-size:1rem;margin-bottom:2px;overflow-wrap:anywhere}
.shot .ok{display:flex;align-items:center;gap:8px;color:var(--good);font-weight:600;font-size:.95rem}
.shot .ok svg{width:18px;height:18px;flex:none;stroke:var(--good)}
.shot .sup{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hair);font-size:.95rem}
.shot .sup small{display:block;color:var(--screen-muted);font-size:.8rem}
.shot .sup b{white-space:nowrap}
.shot .sup.win b{color:var(--good)}
.shot .ck{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--hair);font-size:.95rem}
.shot .ck i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--screen-ink);margin-top:2px;display:grid;place-items:center}
.shot .ck i svg{width:12px;height:12px;stroke:var(--good)}
.shot .ck.open i{border-color:var(--screen-muted)}
.shot .ck.open span{color:var(--screen-muted)}

/* half-tile grid */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
@media (min-width:860px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid .tile{padding:clamp(40px,5vw,56px) 20px 0;display:flex;flex-direction:column;align-items:center;min-width:0}
.grid .pn{font-size:clamp(1.9rem,3vw,2.5rem)}
.grid .tag{font-size:clamp(1.1rem,1.6vw,1.35rem)}
.grid .art{margin-top:28px;flex:1;align-items:flex-end;width:100%}
.grid .shot{width:min(340px,100%);border-radius:18px 18px 0 0;box-shadow:none;padding-bottom:18px}
.grid .big{font-family:var(--display);font-weight:600;font-size:clamp(4rem,8vw,6rem);letter-spacing:-.04em;line-height:1;margin:28px 0 36px}
.grid .big small{display:block;font-family:var(--body);font-weight:400;font-size:1rem;letter-spacing:0;color:var(--on-black-muted);margin-top:8px}

/* steps (a real sequence) */
.steps{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px 32px;max-width:960px;margin:clamp(28px,4vw,44px) auto 0;padding-bottom:clamp(48px,6vw,80px);text-align:left}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px;min-width:0}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:600;font-size:2.5rem;line-height:1;letter-spacing:-.03em;color:var(--link)}
.steps b{font-size:1.125rem}
.steps span{color:var(--muted)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;max-width:960px;margin:clamp(28px,4vw,48px) auto 0}
.plans > div{background:var(--bg);border-radius:18px;padding:28px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.plans h3{font-size:1.5rem}
.plans .pr{font-family:var(--display);font-weight:600;font-size:2.75rem;letter-spacing:-.03em;line-height:1}
.plans .pr small{font-family:var(--body);font-weight:400;font-size:.95rem;color:var(--muted);letter-spacing:0;display:block;margin-top:6px}
.plans ul{list-style:none;padding:0;color:var(--muted);font-size:.95rem;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.plans .links{margin-top:10px;font-size:1.05rem}
.single{font-size:.95rem;color:var(--muted);max-width:66ch;margin:24px auto 0;padding-bottom:clamp(48px,6vw,80px)}
.single b{color:var(--ink)}

/* the warranty record in plain words */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:12px;max-width:960px;margin:clamp(28px,4vw,44px) auto 0;padding-bottom:clamp(48px,6vw,80px);text-align:left}
.panel{background:var(--grey);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.panel h3{font-size:1.4rem}
.list{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.list li{display:flex;gap:10px;align-items:flex-start}
.list svg{flex:none;width:20px;height:20px;margin-top:2px;stroke:var(--good)}
.list .no{stroke:var(--muted)}

/* questions */
.faq{max-width:760px;margin:clamp(20px,3vw,32px) auto 0;padding-bottom:clamp(48px,6vw,80px);text-align:left}
details{border-top:1px solid var(--hair)}
details:last-child{border-bottom:1px solid var(--hair)}
summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1;color:var(--muted)}
details[open] summary::after{content:"\2212"}
details p{padding:0 0 16px;max-width:60ch;color:var(--muted)}

/* early access (no sign-up yet) */
.fine-k{font-size:.9rem;color:var(--on-black-muted);margin:16px auto 0;padding-bottom:clamp(56px,7vw,96px)}
.ea{display:flex;flex-direction:column;gap:8px;max-width:520px;margin:24px auto 0;text-align:left;padding-bottom:clamp(56px,7vw,96px)}
.ea label{font-weight:600}
.ea .f{display:flex;flex-wrap:wrap;gap:10px}
.ea input{flex:1 1 220px;min-width:0;min-height:50px;padding:0 14px;border-radius:12px;border:1.5px solid var(--black-hair);background:#1d1d1f;color:#f5f5f7;font:inherit}
.ea input::placeholder{color:#a1a1a6}
.ea button{min-height:50px;padding:0 20px;border-radius:12px;border:0;background:#f5f5f7;color:#000;font:inherit;font-weight:600;cursor:not-allowed}
.ea input:disabled,.ea button:disabled{opacity:.7}
.ea .fine{font-size:.9rem;color:var(--on-black-muted)}

/* footer: fine print, then the small row */
footer{background:var(--grey);color:var(--muted);font-size:.75rem;line-height:1.5;padding-block:28px 40px}
footer ol{padding-left:1.2em;max-width:90ch;display:flex;flex-direction:column;gap:6px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;border-top:1px solid var(--hair);margin-top:20px;padding-top:10px;align-items:center}
footer .nm{font-weight:600;color:var(--ink)}
footer nav{display:flex;flex-wrap:wrap;gap:0 18px}
footer nav a{color:inherit;display:inline-flex;align-items:center;min-height:44px}
footer .ph{overflow-wrap:anywhere}

/* motion: tiles ease in as they scroll into view (CSS scroll-driven; static where unsupported or with reduced motion) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .tile > .wrap > *, .grid .tile > *{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* legal and contact pages (draft) */
.draft{background:var(--t-amber);color:var(--f-amber);border:2px solid var(--amber);border-radius:12px;padding:14px 16px;font-weight:600;line-height:1.35}
.legal{padding-block:clamp(32px,5vw,64px) clamp(56px,7vw,104px)}
.legal .doc{max-width:760px;display:flex;flex-direction:column;gap:20px;overflow-wrap:break-word;hyphens:auto}
.legal .eyebrow{font-weight:600;color:var(--link)}
.legal h1{font-size:clamp(2.125rem,4.4vw,3.25rem)}
.legal h2{font-size:clamp(1.5rem,2.4vw,1.875rem);margin-top:20px}
.legal .lede{font-size:1.125rem;color:var(--muted)}
.legal ul{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:8px}
.legal .meta{color:var(--muted);font-size:1rem}
.legal .ph,footer .ph{background:var(--t-blue);color:var(--f-blue);border-radius:6px;padding:0 6px;font-weight:600;overflow-wrap:anywhere}
.legal table{border-collapse:collapse;width:100%;font-size:1rem}
.legal th,.legal td{border:1px solid var(--hair);padding:10px 12px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.legal th{background:var(--grey)}
.legal .tw{overflow-x:auto}

/* Draft legal pages (unpublished, not in the build). Their HTML is kept byte-identical to the version whose
   digest the app pins (packages/services/src/legal.ts: terms/privacy-2026-10-15-draft), so they keep their
   original header and footer markup; these rules only make that markup readable with this stylesheet.
   Restyling them is a separate change that must bump the legal versions. */
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:14px}
header.top .brand{color:var(--ink);font-size:1.2rem}
header.top .brand svg{flex:none}
footer > .wrap:has(> nav){display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:.875rem}
footer > .wrap > nav a{color:var(--ink);font-weight:600}

/* 404 page */
.nf{padding-bottom:clamp(72px,10vw,140px);min-height:60vh}