/* NBE site: the Claude Design handoff of 2026-09-26 (design/website-2026-09-26/nbe-site.css),
   reduced to direction A, "Quiet editorial", the founder's pick. The B and C variants, the
   three direction switches on <html> and the store badges are gone
   (specs/the-website-takes-the-claude-design.md). The membership styles came back with the
   membership page (specs/website-membership-stripe.md). Loaded by index.html, story.html and
   the pages under membership/ except its terms page; the legal pages keep their own inline
   styles for now. */
/* Fonts are served from this site, not from Google: a Google Fonts request would send every
   visitor's IP address to Google, which privacy section 14 does not name (founder's word
   2026-09-26). Variable woff2 files from Google Fonts' own build, latin and latin-ext subsets,
   under the SIL Open Font License 1.1 (fonts/OFL-*.txt). Never link a font from Google again. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url('/fonts/newsreader-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url('/fonts/newsreader-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url('/fonts/newsreader-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url('/fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
--paper:#F5F2EA;--paper-2:#FAF8F2;--paper-3:#EDE8DC;
--line:rgba(58,49,37,.10);--line-2:rgba(58,49,37,.06);
--ink:#231E16;--ink-2:#5B5345;--ink-3:#8B8274;
--forest:#2E5339;--forest-2:#3E6A48;--forest-ink:#1B3322;--moss:#8FA98A;--moss-wash:#E4EADF;
--bark:#6B4A2B;--clay:#A66A4A;--amber:#C89447;
--serif:'Newsreader','Times New Roman',Georgia,serif;--sans:'Inter',-apple-system,system-ui,sans-serif;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;
--shadow-card:0 1px 2px rgba(35,30,22,.04),0 4px 14px rgba(35,30,22,.05);
--gut:clamp(20px,5vw,64px);--maxw:1180px;
--h1:clamp(2.5rem,7vw,4.6rem);--h2:clamp(1.75rem,3.4vw,2.9rem);--lede:clamp(1.05rem,1.6vw,1.35rem);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;text-wrap:pretty;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--forest);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--forest-ink);text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--forest-ink);margin:0;letter-spacing:-.01em}
h1{font-size:var(--h1);line-height:1.04}
h2{font-size:var(--h2);line-height:1.1}
h3{font-size:1.3rem;line-height:1.25}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.kicker{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-feature-settings:"tnum"}
.lede{font-size:var(--lede);line-height:1.5;color:var(--ink-2);max-width:34em}
.rule{height:1px;background:var(--line);border:0;margin:0}
.sec{padding:clamp(56px,9vw,120px) 0}
.sec-head{display:flex;flex-direction:column;gap:14px;padding-bottom:clamp(28px,4vw,48px)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* buttons: outlined by default, per the editorial grammar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:var(--r-sm);font-family:var(--sans);font-size:.95rem;font-weight:500;border:1px solid var(--forest);color:var(--forest);background:transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--moss-wash);color:var(--forest-ink);text-decoration:none}
.btn-solid{background:var(--forest);color:var(--paper-2);border-color:var(--forest)}
.btn-solid:hover{background:var(--forest-ink);border-color:var(--forest-ink);color:var(--paper-2)}
.btn:disabled{opacity:.6;cursor:default}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
::selection{background:var(--moss-wash)}

/* nav. Below 720px only .nav-keep stays: with "Get the app" held, that is Our story. */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:28px}
.nav-logo{height:38px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center;font-size:.92rem}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--forest)}
@media(max-width:720px){.nav-links a:not(.nav-keep){display:none}}

/* hero: split */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(40px,6vw,80px)}
.hero-in{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:1.05fr .95fr;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);align-items:start}
.hero-status{font-size:.95rem;color:var(--ink-2)}
.hero-art{display:flex;gap:clamp(12px,2vw,26px);justify-content:flex-end;align-items:flex-end}
.phone{border-radius:26px;border:1px solid var(--line);box-shadow:var(--shadow-card);background:var(--paper-2);overflow:hidden;width:100%;height:auto}
.hero-art .phone{width:min(240px,42vw);min-width:0}
.hero-art .phone:nth-child(2){width:min(268px,46vw)}
@media(max-width:860px){.hero-in{grid-template-columns:1fr}.hero-art{justify-content:flex-start}}

/* steps */
.steps{display:grid;gap:clamp(28px,4vw,56px)}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.step:nth-child(even) .step-art{order:-1}
.step-copy{display:flex;flex-direction:column;gap:14px;align-items:start}
.step-n{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--moss);font-feature-settings:"tnum"}
.step-art .phone{width:min(300px,78vw);margin-inline:auto}
@media(max-width:800px){.step{grid-template-columns:1fr}.step:nth-child(even) .step-art{order:0}}

/* gallery */
.gal-sec{padding-top:0}
.gal-sec .sec-head{padding-top:clamp(40px,6vw,72px)}
.gal{display:grid;grid-auto-flow:column;grid-auto-columns:min(258px,68vw);gap:clamp(14px,2.4vw,28px);overflow-x:auto;padding-bottom:18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.gal>figure{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.gal figcaption{font-size:.85rem;color:var(--ink-2)}

/* story extract */
.story{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story .sec-head{padding:0}
.story-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.story-body{display:flex;flex-direction:column;gap:1.15em;font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.62;color:var(--ink-2);max-width:36em}
.story-body p:first-child{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2;color:var(--forest-ink)}
@media(max-width:820px){.story-in{grid-template-columns:1fr}}

/* story page */
.note{padding:clamp(56px,9vw,120px) 0}
.note-in{max-width:680px;margin:0 auto;padding:0 var(--gut)}
.note-head{display:flex;flex-direction:column;gap:18px;padding-bottom:clamp(36px,5vw,56px);margin-bottom:clamp(36px,5vw,56px);border-bottom:1px solid var(--line)}
.note-head h1{font-size:clamp(2.3rem,6vw,3.8rem)}
.note-body{display:flex;flex-direction:column;gap:1.05em;font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.32rem);line-height:1.6;color:var(--ink)}
.note-body strong{font-weight:500;color:var(--forest-ink)}
.note-body .open{font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;color:var(--forest-ink)}
.note-body .open strong{font-weight:400}
.note-body .pull{font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.3;padding:.6em 0;margin:.5em 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.note-body .flyleaf{font-style:italic;color:var(--bark);padding-left:1.2em;border-left:1px solid var(--clay)}
.note-sign{display:flex;flex-direction:column;gap:2px;margin-top:1.4em;font-style:italic;color:var(--ink-2)}

/* membership page, from the design's membership rules (design/website-2026-09-26/nbe-site.css).
   The cadence and amount chips are radio buttons, so a keyboard and a screen reader get a
   real choice: the input is visually hidden and the span beside it is the chip. The small
   print is set in --ink-2, not the design's --ink-3, for the reason the trading disclosure
   is: it is terms a payer must be able to read, and --ink-3 on --paper is under 4.5:1. */
.mem{padding:clamp(56px,9vw,120px) 0}
.mem-in{max-width:760px}
.mem-copy{display:flex;flex-direction:column;gap:20px;align-items:start}
.mem-copy h1{font-size:clamp(2.4rem,6vw,4rem)}
.mem-say{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.3;color:var(--bark)}
.mem-pick{display:flex;flex-direction:column;gap:14px;width:100%;max-width:520px;margin-top:8px}
.mem-pick fieldset{border:0;margin:0;padding:0;min-width:0}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;gap:4px;background:var(--paper-2)}
.amts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.chip{position:relative;display:block;margin:0}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip span{display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;color:var(--ink-2);min-height:44px;border-radius:6px;transition:background .15s,color .15s,border-color .15s}
.seg input:checked+span{background:var(--forest);color:var(--paper-2)}
.amts .chip span{font-family:var(--serif);font-size:1.3rem;border-color:var(--line);min-height:56px;font-feature-settings:"tnum";color:var(--forest-ink)}
.amts .chip span:hover{background:var(--moss-wash)}
.amts input:checked+span,.amts input:checked+span:hover{background:var(--forest);border-color:var(--forest);color:var(--paper-2)}
.amts .other span{font-style:italic;font-size:1.1rem}
.chip input:focus-visible+span{outline:2px solid var(--forest);outline-offset:2px}
.mem-other{display:flex;flex-direction:column;gap:6px}
.mem-other-in{display:flex;align-items:center;gap:6px;min-height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);font-family:var(--serif);font-size:1.3rem;color:var(--forest-ink)}
.mem-other-in:focus-within{border-color:var(--forest)}
.mem-other-in input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:max(16px,1em);color:inherit;outline:none}
.mem-go{min-height:56px;font-size:1rem;width:100%}
.mem-error{font-size:.95rem;color:var(--bark)}
.mem-fine{font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:.98rem}
.mem-fine a{text-decoration:underline}
.mem-once{margin-top:clamp(40px,6vw,64px);padding-top:clamp(32px,5vw,48px);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;width:100%;max-width:520px}
.mem-once-say{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.35;color:var(--forest-ink)}
.mem-once-say strong{font-weight:500}
@media(max-width:440px){.amts{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* the homepage membership block, where the design puts it. The design's phone beside it was
   the impact screenshot, which the 2026-09-26 build left out (taken mid-scroll), so the block
   stands alone. On the homepage since the founder's word of 2026-10-20
   (specs/homepage-membership-and-store-buttons.md). */
.member-copy{display:flex;flex-direction:column;gap:18px;align-items:start;max-width:760px}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-ghost{border-color:transparent;padding:0 6px}
.btn-ghost:hover{background:transparent;text-decoration:underline}

/* the hero's two "Coming soon" store pills: quiet outlined pills that are not links and not
   buttons, so nothing about them invites a tap. Replaced by the official badges on release day
   (the commented swap in index.html). */
.store-soon{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;color:var(--ink-2);cursor:default;user-select:none}

/* newsletter sign-up, in the homepage footer (Netlify Forms). Restyled only; its words,
   form name, fields and states are the live page's. The email field stays at 16px or
   larger: below that iOS Safari zooms the page on focus. */
.newsletter{display:flex;flex-direction:column;gap:10px;align-items:start;padding-bottom:clamp(32px,5vw,56px);margin-bottom:clamp(32px,5vw,56px);border-bottom:1px solid var(--line)}
.newsletter h2{font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.2}
.newsletter-line{color:var(--ink-2);max-width:32em}
.waitlist{width:100%;max-width:520px;margin-top:6px}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.form-row input[type="email"]{flex:1 1 220px;min-width:0;min-height:48px;font:inherit;font-size:16px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink)}
.form-row input[type="email"]:focus{outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest)}
.form-error{margin-top:10px;font-size:.92rem;color:var(--bark)}
.form-done{font-weight:500;color:var(--forest)}
.form-done:focus{outline:none}
.cta-note{font-size:.85rem}
.cta-note a{color:var(--ink-2);text-decoration:underline}
.cta-note a:hover{color:var(--forest)}

/* footer */
.foot{border-top:1px solid var(--line);padding:clamp(40px,6vw,72px) 0 40px;background:var(--paper)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(var(--foot-cols,2),minmax(0,1fr));gap:clamp(24px,4vw,48px)}
.foot-in-3{--foot-cols:3}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.foot-col a{color:var(--ink-2)}
.foot-col a:hover{color:var(--forest)}
.foot-tag{color:var(--ink-2);max-width:26em}
.foot-logo{height:32px;width:auto;align-self:flex-start;margin-bottom:6px}
.foot-base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:28px;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}
/* The trading disclosure is set in --ink-2, not --ink-3: disclosure text has to be
   readable, and --ink-3 on --paper is under the 4.5:1 normal text needs. */
.foot-address{flex-basis:100%;color:var(--ink-2);line-height:1.5}
@media(max-width:700px){.foot-in{grid-template-columns:1fr 1fr}.foot-col:first-child{grid-column:1/-1}}