/* Holloway site styles. Shared by every page except the three billing return pages (those keep site.css): home, how it
   works, your data, about, security, contact, terms, privacy policy and the 404. Page-specific styles stay in each page.
   Look (10/26, Christian: white, product-first, nothing that looks AI-made): a white page, near-black ink, hairlines,
   white cards with a 1px line, one black button for the one main action. No panel colours behind sections, no
   gradients, no glow, no coloured shadows, no all-caps labels. Colour only for states: amber for waiting, green for done.
   Type: Newsreader for every h1 and h2 (and the few big statements); Instrument Sans for everything else (UI and body,
   weights 400-600). One scale, set by the --fs- tokens below. The h1 is the largest text on every page. */

/* Metric-matched stand-ins shown until the web fonts arrive, so lines don't jump when they swap in. */
@font-face{font-family:"Newsreader Fallback";font-weight:400;src:local("Georgia");size-adjust:95.5%;ascent-override:76.96%;descent-override:27.75%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";font-weight:500 700;src:local("Georgia");size-adjust:94.5%;ascent-override:77.78%;descent-override:28.04%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";font-weight:400;src:local("Arial"),local("ArialMT");size-adjust:100.26%;ascent-override:96.75%;descent-override:24.94%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";font-weight:500 700;src:local("Arial"),local("ArialMT");size-adjust:101.41%;ascent-override:95.65%;descent-override:24.65%;line-gap-override:0%}

:root{
  /* surfaces: all white; --soft is the one quiet fill (card headers, the selected row) */
  --page:#FFFFFF; --ivory:#FFFFFF; --paper:#FFFFFF; --card:#FFFFFF; --soft:#F6F6F7;
  --panel:#F3F3F5; --oat:#EDEDF0; --oat-2:#F3F3F5; --oat-d:#E4E4E8; --sagel:#F6F6F7; --sage:#D9D9DE; --sage-m:#3C3C42;
  /* ink and lines (every text colour is at least 7:1 on white) */
  --ink:#111113; --ink-2:#3C3C42; --muted:#55555C; --dim:#55555C; --faded:#55555C; --i2:#3C3C42;
  --line:#E3E3E6; --line-2:#ECECEF; --dk:#111113; --dk-line:#E3E3E6;
  --field:#8A8A93; /* borders you need to see to use a control: fields, unselected pills, off switches (3:1) */
  /* states only: waiting (amber) and done (green) */
  --clay:#B26A00; --wait:#B26A00; --wait-ink:#6A4100; --wait-wash:#FBEFD9; --ok:#1F7A45; --ok-ink:#1B5432; --ok-wash:#E2F1E6;
  --serif:"Newsreader","Newsreader Fallback",Georgia,serif; --sans:"Instrument Sans","Instrument Sans Fallback","Segoe UI",system-ui,sans-serif; --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --wrap:min(1240px,calc(100% - 2*clamp(16px,4vw,64px))); --ease:cubic-bezier(.16,1,.3,1); --stop:64px; --r:12px; --shadow:none;
  /* the one type scale */
  --fs-hero:clamp(40px,5vw,72px);     /* home h1 (serif) */
  --fs-h1:clamp(36px,4.2vw,60px);     /* inner-page h1 (serif) */
  --fs-h2:clamp(30px,3.1vw,44px);     /* section heading (serif) and big serif statements */
  --fs-h3:clamp(19px,1.6vw,22px);     /* step and panel titles (sans 600) */
  --fs-h4:17px;                       /* card, row and tile titles (sans 600) */
  --fs-lead:18px;                     /* lead paragraphs (sans) */
  --fs-body:17px;
  --fs-label:13px;                    /* labels, chips: never smaller */
  --t-hero:400 var(--fs-hero)/1.03 var(--serif);
  --t-h1:400 var(--fs-h1)/1.05 var(--serif);
  --t-h2:400 var(--fs-h2)/1.1 var(--serif);
  --t-h3:600 var(--fs-h3)/1.25 var(--sans);
  --t-h4:600 var(--fs-h4)/1.3 var(--sans);
  --t-lead:400 var(--fs-lead)/1.55 var(--sans);
}
*{box-sizing:border-box}
html{background:var(--page);scroll-padding-top:calc(var(--stop) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 var(--fs-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--page)}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px} img,svg{max-width:100%}
.wrap{width:var(--wrap);margin:0 auto}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:40}.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tnum{font-variant-numeric:tabular-nums}

/* type */
h1,h2,h3,h4{font-weight:400;margin:0;text-wrap:balance}
p,li,dd{text-wrap:pretty}
h1{font:var(--t-h1);letter-spacing:-.02em}
h1 em,h2 em,h3 em{font-style:normal;padding-right:0}
.h2{font:var(--t-h2);letter-spacing:-.018em;max-width:22ch}
.h3{font:var(--t-h3);letter-spacing:-.01em}
.lead{font:var(--t-lead);color:var(--ink);margin:0;max-width:46ch}
.note{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0}
/* small labels: sentence case, never all-caps, never mono */
.mono,.tag,.ex{font:500 var(--fs-label)/1.3 var(--sans);letter-spacing:0;text-transform:none}
.tag{display:inline-flex;align-items:center;border-radius:999px;background:var(--soft);color:var(--ink);padding:4px 10px;white-space:nowrap}
.ex{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);padding:3px 9px;white-space:nowrap}
.statement{font:400 var(--fs-h2)/1.1 var(--serif);letter-spacing:-.018em;margin:0;max-width:22ch;text-wrap:balance}

/* nav: H mark and wordmark left, plain text links, one dark button (same markup on every page) */
.nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;min-height:var(--stop)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:500 20px/1 var(--serif);letter-spacing:-.01em;min-height:44px;color:var(--ink)}
.brand svg{width:22px;height:22px;flex:none}
/* DOM order is brand, pass button, menu button, links (so Tab goes from the menu button into the open menu on phones);
   on wide screens the links are shown before the pass button. */
.brand{order:0} .links{order:1} .nav .nav-cta{order:2} .menu-btn{order:3}
.links{display:flex;align-items:center;gap:28px;margin-left:auto}
.links a{text-decoration:none;font-size:15px;line-height:1.2;padding:10px 0;white-space:nowrap;color:var(--ink)}
.links a:hover,.links a[aria-current=page]{text-decoration:underline}
.nav .nav-cta{white-space:nowrap}
.nav .nav-cta[data-navpass]:not(.show){display:none}
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:8px;background:none;color:var(--ink);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex:none}
.menu-btn span{display:block;width:18px;height:1.8px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease)}

/* buttons: black is the one main action, white with a line is the quiet one */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:10px;font:600 16px/1 var(--sans);text-decoration:none;border:1px solid var(--field);cursor:pointer;background:#fff;color:var(--ink);transition:background .15s,color .15s}
.btn:hover{background:var(--soft)}
.btn svg{width:16px;height:16px}
.btn-ink,.btn-iv{background:var(--ink);color:#fff;border-color:var(--ink)} .btn-ink:hover,.btn-iv:hover{background:#2A2A2E}
.btn-sm{min-height:40px;padding:0 14px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:default}
.lnk{background:none;border:0;padding:4px 6px;margin:-4px -6px;min-height:32px;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.lnk[disabled]{opacity:.5;cursor:default;text-decoration:none}
.acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.micro{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--ink-2)}
.more-link a,.s-more a{font-weight:600}

/* sections: plain white. The ones that used to sit on a panel start with a hairline instead. */
.sec{padding:clamp(48px,5.5vw,80px) 0}
.sec-oat,.sec-ink{padding:clamp(48px,5.5vw,80px) 0;color:var(--ink)}
.sec-oat>.wrap,.sec-ink>.wrap{padding:clamp(40px,4.5vw,64px) 0 0;border-top:1px solid var(--line);background:none}
.sec-ink .lead,.sec-ink .note{color:inherit}
.shead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.shead .lead{justify-self:start}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.sec-oat .card,.sec-ink .card{background:#fff}
/* a plain call to action row that closes a section (hairlines, no panel) */
.cta-row{margin-top:clamp(32px,4vw,56px);padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 40px}
.cta-row p{margin:0;max-width:62ch;font-size:17px}
.cta-row p b{display:block;font:var(--t-h3);letter-spacing:-.01em;margin-bottom:6px}

/* checklist rows (ticks) */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:16px;line-height:1.45}
.tk{width:20px;height:20px;border-radius:50%;background:var(--ink);position:relative;margin-top:1px;flex:none}
.tk::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* state words (always a word, never colour alone) */
.st{display:inline-flex;align-items:center;gap:7px;font:500 13px/1.2 var(--sans);border-radius:999px;padding:5px 10px;white-space:nowrap;background:var(--soft);color:var(--ink)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.st-ok{background:var(--ok-wash);color:var(--ok-ink)} .st-ok::before{background:var(--ok)}
.st-wait{background:var(--wait-wash);color:var(--wait-ink)} .st-wait::before{background:var(--wait)}

/* FAQ: hairline accordion rows */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:24px clamp(32px,6vw,96px);align-items:start}
.faq details{border-top:1px solid var(--line)} .faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;padding:20px 0;min-height:44px;font:500 18px/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:9px;height:9px;flex:none;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:4px}
.faq details[open] summary i{transform:rotate(-135deg)}
.faq details p{margin:0 0 22px;max-width:36em;font-size:17px;line-height:1.55}

/* the closing call to action that ends every page except home: a hairline, the heading and the one button */
.band{width:var(--wrap);margin:0 auto clamp(48px,6vw,88px);padding:clamp(40px,5vw,64px) 0 0;border-top:1px solid var(--line);background:none;color:var(--ink)}
.band .wrap{width:100%;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.band h2{font:400 var(--fs-h2)/1.08 var(--serif);letter-spacing:-.018em;max-width:18ch}
.band p{margin:12px 0 0;max-width:46ch}

/* fields (the founding pass on home and the letter on contact): underline inputs, readable labels and placeholders */
.pass{position:relative;background:#fff;color:var(--ink);border-radius:var(--r);padding:24px 28px;border:1px solid var(--line);transition:transform .25s ease-out}
.pass .mono{color:var(--ink-2)}
.pf{display:grid;gap:2px;padding-top:14px}
.pf>span{font:500 14px/1.3 var(--sans);color:var(--ink-2)}
.pf>small{font-size:14px;color:var(--ink-2)}
.pass input,.pass textarea,.pass select{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--field);border-radius:0;padding:6px 0 8px;width:100%}
.pass input:focus,.pass textarea:focus,.pass select:focus{outline:2px solid var(--ink);outline-offset:2px;border-bottom-color:var(--ink)}
.pass [aria-invalid=true]{border-bottom-color:#B42318}
.pass ::placeholder{color:#6B6B73}
.pass textarea{resize:none;font-size:16px}
.p2{display:grid;grid-template-columns:auto 1fr;gap:0 24px}
.seg{display:flex;gap:6px;flex-wrap:wrap;padding-top:6px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-flex;align-items:center;min-height:36px;border:1px solid var(--field);border-radius:999px;padding:6px 12px;font-size:14px;transition:background .2s,color .2s,border-color .2s}
.seg input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.fe{margin:8px 0 0;font-size:15px;color:#B42318}
.fh{margin:0;font-size:15px} .fh .lnk,.fh button{background:none;border:0;padding:8px 0;margin:0;min-height:44px;font:inherit;font-size:15px;color:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;text-align:left}
.perf{position:relative;border-top:2px dashed #D4D4D8;margin:18px -28px 16px}
.perf::before,.perf::after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--pn,var(--page));border:1px solid var(--line)}
.perf::before{left:-15px;clip-path:inset(0 0 0 50%)} .perf::after{right:-15px;clip-path:inset(0 50% 0 0)}
.pno{font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.12em;color:var(--ink-2);margin:6px 0 0}
.passerr{margin:12px 0 0;font-size:15px;color:#8A1C12;background:#FCEDEB;border-radius:10px;padding:10px 12px}
.passnote{margin:16px 0 0;font-size:15px;text-align:center;color:var(--ink-2)}
@media (max-width:1279px){.p2{grid-template-columns:1fr;gap:10px 0}}

/* footer: white, wordmark left, hairline rows on the right (same markup on every page) */
footer{background:var(--page);color:var(--ink);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 32px;font-size:15px}
footer .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:0 clamp(32px,6vw,96px);align-items:start}
footer .top>div:first-child{grid-column:1;grid-row:1/span 3}
footer .top>div:first-child p{color:var(--ink-2)}
footer .top>div:not(:first-child){grid-column:2;display:grid;grid-template-columns:minmax(110px,.5fr) minmax(0,1.5fr);gap:4px 20px;padding:12px 0;border-top:1px solid var(--line)}
footer .brand{color:var(--ink);font-size:22px}
footer h3{font:600 15px/1.3 var(--sans);margin:0;padding-top:12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
footer ul a{display:inline-block;padding:10px 0;text-decoration:none;color:var(--ink-2)}
footer a:hover{text-decoration:underline;color:var(--ink)}
footer .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-2);font-size:14px}
footer .fl{display:flex;flex-wrap:wrap;gap:0 20px} footer .fl a{display:inline-block;padding:10px 0;text-decoration:none}
footer .tm{margin:12px 0 0;font-size:14px;color:var(--ink-2)}

/* No scroll reveal (10/26): content is simply there. .rv stays as a harmless hook in the page markup. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .seg input:checked+span{outline:2px solid Highlight}
  .tk{border:2px solid CanvasText}
}

/* header rows that hold a title and a state chip: the chip drops under the title on small phones */
@media (max-width:420px){
  .hold-h,.ledger-h,.team-h,.item-h,.dc-h,.rcpt-h,.mh{flex-wrap:wrap}
  .hold-h>div,.ledger-h>div,.item-h>div{flex:1 1 180px;min-width:0}
}

@media (max-width:900px){
  .nav .wrap{gap:12px}
  .menu-btn{display:flex}
  .nav .nav-cta{margin-left:auto}
  .links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;background:#fff;border-bottom:1px solid var(--line);padding:4px clamp(16px,4vw,64px) 16px}
  .nav.open .links{display:flex}
  .links a{padding:14px 0;font-size:17px;border-top:1px solid var(--line)}
  .links a:first-child{border-top:0}
  .menu-btn{margin-left:auto} .nav .nav-cta+.menu-btn{margin-left:0} .nav .nav-cta[data-navpass]:not(.show)+.menu-btn{margin-left:auto}
  .nav.open .menu-btn span:first-child{transform:translateY(3.4px) rotate(45deg)} .nav.open .menu-btn span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
  .shead,.faq{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr}
  footer .top>div:first-child{grid-row:auto;margin-bottom:24px}
  footer .top>div:not(:first-child){grid-column:1}
  footer ul a,footer .fl a{padding:12px 0;min-height:44px}
}
@media (min-width:901px){ .menu-btn{display:none} }
@media (max-width:760px){
  .btn,.btn-sm{min-height:44px}
  .lnk{min-height:44px}
  .seg span{min-height:44px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  footer .top>div:not(:first-child){grid-template-columns:1fr}
  .nav .nav-cta{padding:0 12px;font-size:14px}
}

/* 10/28 explaining motion. site.js marks a [data-play] picture .will-play once it is watching it, then .play as it
   scrolls in. Start states apply only while it waits, so without the script (or with reduced motion) everything is
   simply shown finished. Stagger with style="--i:N" (120 ms steps) or an extra delay with --d. Nothing loops. */
.m-grow{transform-origin:0 50%}
.will-play:not(.play) .m-rise{opacity:0;transform:translateY(8px)}
.will-play:not(.play) .m-grow{transform:scaleX(0)}
.will-play:not(.play) .m-fade{opacity:0}
.play .m-rise,.play .m-grow,.play .m-fade{transition:opacity .35s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 120ms + var(--d,0ms))}
.m-wipe{position:relative}
.will-play .m-wipe::after{content:"";position:absolute;inset:0;background:var(--wipe-bg,#fff);transform-origin:100% 50%}
.play .m-wipe::after{transform:scaleX(0);transition:transform var(--wipe-ms,1.2s) linear var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.m-rise,.m-grow,.m-fade,.m-wipe::after{transition:none!important}}
/* Printing: a picture not yet scrolled past prints finished, not hidden (review 10/28). */
@media print{.will-play:not(.play) .m-rise,.will-play:not(.play) .m-fade{opacity:1;transform:none}.will-play:not(.play) .m-grow{transform:none}.will-play .m-wipe::after{display:none}}