/* Website v2 (Ethan, 27 Oct 2026: "make it from scratch"), built against the
   18-point list in "4 Business notes/ANSWER-2026-10-27-what-the-best-ui-needs.md".

   The one set of parts every public page shares (home, the typed call, privacy
   and the 404): tokens, type, buttons, links, cards, the top bar, the
   phone Menu, the footer, the form and the plain-page parts. A page's own
   layout lives in its own sheet (home.css, try.css). site.css stays for the
   owner pages and the pricing page, which were built on it before v2.

   Light page, ink text, one blue for the main action. Bricolage for
   headlines, Archivo for reading, JetBrains Mono for times; all self-hosted.
   Shadows and easings are Open Props (MIT, /assets/vendor/open-props.css).
   Text is at least 4.5:1 on its background, control edges 3:1, every tap
   target at least 44 px, and nothing moves when less motion is asked for. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/Archivo-latin-var.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:"Bricolage";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/assets/fonts/Bricolage-latin-var.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:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/JetBrainsMono-latin-var.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}

/* ------------------------------------------------------------------ tokens */
:root{
  --paper:#F4F6FB; --card:#FFFFFF; --ink:#0A1633; --ink-2:#2A3654; --muted:#55617A;
  --rule:#DCE2EE; --edge:#8A94A8;
  --blue:#2B59FF; --blue-deep:#1638C9; --blue-soft:#E8EDFF;
  --night:#070F29;
  --urgent:#B42318; --urgent-soft:#FDECEA;
  --display:"Bricolage","Archivo",ui-sans-serif,system-ui,sans-serif;
  --text:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4vw,48px);
  --max:1640px;   /* the site-wide rule since C2: content spans at least 85% of a 1920 window, no narrow column */
  --gut:max(var(--pad),calc((100% - var(--max)) / 2));
  --r:14px; --r-sm:10px;
  --shadow-color:224 67% 12%; --shadow-strength:4%;
  --lift:var(--shadow-2,0 3px 8px rgba(10,22,51,.08));
  --float:var(--shadow-4,0 12px 32px rgba(10,22,51,.12));
  --ease:var(--ease-out-3,cubic-bezier(0.22,1,0.36,1));
  --bar:68px;
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 16px)}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
img,svg{display:block}
h1,h2,h3{font-family:var(--display);text-wrap:balance;letter-spacing:-.025em;line-height:1.08}
p{text-wrap:pretty}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:#FFFFFF}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:40;padding:12px 16px;border-radius:var(--r-sm);background:var(--ink);color:#FFFFFF;font-weight:700}
.skip:focus{top:12px}

/* ------------------------------------------------------------------ type */
.label{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:650;color:var(--blue-deep)}
h2{font-size:clamp(30px,3.6vw,48px);font-weight:700;font-stretch:94%;margin-top:12px;max-width:20em}
h3{font-size:clamp(19px,1.5vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.lead{font-size:clamp(17px,1.3vw,20px);color:var(--muted);margin-top:14px;max-width:38em}
.note{color:var(--muted);font-size:15px}

/* ------------------------------------------------------------------ icons */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tile{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--blue-soft);color:var(--blue-deep)}
.tile .ic{width:22px;height:22px}

/* ------------------------------------------------------------------ buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:var(--r-sm);background:var(--blue);color:#FFFFFF;font:inherit;font-size:17px;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(10,22,51,.14),0 8px 18px -10px rgba(22,56,201,.6);transition:background-color .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease)}
.btn:hover{background:var(--blue-deep);box-shadow:0 1px 2px rgba(10,22,51,.14),0 12px 24px -10px rgba(22,56,201,.75)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:20px;height:20px}
.btn.big{min-height:58px;padding:0 30px;font-size:18px}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--blue-soft)}
.btn[disabled],.btn:disabled{opacity:.6;cursor:progress}
/* the text link: always underlined, so it reads as a link without colour */
.tl{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:650;color:var(--blue-deep);text-decoration:underline 1.5px;text-underline-offset:5px;transition:color .2s var(--ease)}
.tl:hover{color:var(--ink)}
.tl .ic{width:18px;height:18px}

/* ------------------------------------------------------------------ cards and sections */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--lift)}
.sec{padding:clamp(64px,8vw,112px) var(--gut)}
.sec + .sec{border-top:1px solid var(--rule)}
.sec.tint{background:var(--card)}
.sec-head{max-width:46em;margin-bottom:clamp(28px,3.4vw,48px)}

/* ------------------------------------------------------------------ top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:clamp(12px,2.4vw,36px);height:var(--bar);padding:0 var(--gut);background:rgba(244,246,251,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rule)}
.mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.mark img{height:26px;width:26px}
.top nav{display:flex;gap:clamp(4px,1.2vw,20px);margin-left:auto;font-size:16px;font-weight:600;white-space:nowrap}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:8px;color:var(--ink-2);transition:color .2s var(--ease),background-color .2s var(--ease)}
.top nav a:hover{color:var(--ink);background:rgba(10,22,51,.05)}
.top .signin{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:16px;font-weight:600;white-space:nowrap;color:var(--muted)}
.top .signin:hover,.top .signin[aria-current]{color:var(--ink)}
.top .btn{min-height:44px;height:44px;padding:0 18px;font-size:16px}
.menu{display:none;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:1.5px solid var(--edge);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:inherit;font-size:16px;font-weight:650;cursor:pointer;margin-left:auto}
.top nav .in-menu{display:none}

/* ------------------------------------------------------------------ footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(20px,3vw,48px);padding:28px var(--gut);border-top:1px solid var(--rule);background:var(--card);font-size:15px;color:var(--muted)}
.foot .mark{font-size:18px;gap:8px;color:var(--ink)}
.foot .mark img{height:22px;width:22px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2vw,32px);margin-left:auto}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;text-decoration:underline 1px transparent;text-underline-offset:5px;transition:text-decoration-color .2s var(--ease)}
.foot nav a:hover{text-decoration-color:var(--blue)}

/* ------------------------------------------------------------------ plain pages: /privacy/, the 404, /signin/ */
.page-head{padding:clamp(48px,6vw,96px) var(--gut) clamp(28px,3vw,48px)}
.page-head h1{font-size:clamp(38px,5vw,64px);font-weight:700;font-stretch:94%;letter-spacing:-.035em;line-height:1.02;margin-top:14px;max-width:16em}
.page-head .sub{font-size:clamp(17px,1.3vw,20px);color:var(--muted);margin-top:16px;line-height:1.5;max-width:34em}
.page-head .go{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:28px}
.page-body{padding:0 var(--gut) clamp(64px,8vw,112px)}
.rows{display:grid;gap:14px;max-width:960px}
.rows li{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:10px clamp(24px,3vw,56px);padding:clamp(20px,2.4vw,32px);background:var(--card);border:1px solid var(--rule);border-radius:var(--r);align-items:baseline}
.rows h2{font-size:clamp(20px,1.6vw,24px);margin-top:0;letter-spacing:-.015em;line-height:1.2}
.rows p{font-size:17px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.rows p a:not(.btn){color:var(--blue-deep);font-weight:650;text-decoration:underline 1.5px;text-underline-offset:4px;padding:12px 0}
.aside{font-size:16px;color:var(--muted);margin-top:28px;max-width:44em}

/* ------------------------------------------------------------------ the last real call to the demo line (card.js) */
.lastcall{margin-top:22px;padding:12px 16px;border:1px solid var(--rule);border-left:3px solid var(--blue);border-radius:var(--r-sm);background:var(--card);font-size:15px;line-height:1.4;max-width:34em}
.lastcall .lc-title{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;font-weight:700}
.lastcall .lc-ago{color:var(--muted);font-weight:400}
.lastcall .lc-row{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;overflow-wrap:anywhere}
.lastcall .lc-biz{font-weight:700}
.lastcall .lc-urg{font-weight:700;padding:0 6px;border:1px solid currentColor;border-radius:4px;font-size:13px;align-self:center}
.lastcall .lc-booked{color:var(--muted)}

/* ------------------------------------------------------------------ pricing (hidden for now, SHOW_PRICING in pricing.js) */
.price-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,72px);align-items:start}
.price{margin-top:24px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-height:1em}
.price b{font-family:var(--display);font-size:clamp(64px,6vw,104px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.price span{font-size:clamp(18px,1.4vw,22px);font-weight:700}
.price-pending{display:inline-block;margin-top:24px;padding:14px 18px;border-radius:var(--r-sm);background:var(--blue-soft);font-size:clamp(19px,1.5vw,24px);font-weight:700;line-height:1.3}
.ins{display:grid;gap:10px}
.ins li{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-sm);font-size:17px}
.ins svg{flex:none;color:var(--blue)}
.price-grid .btn{margin-top:24px}

/* ------------------------------------------------------------------ the set-up form */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:15px;font-weight:650}
/* Astra pages review, finding 29: a box's edge is small text's grey (5.9:1 on white), not a pale line.
   Finding 33: the two needed boxes are marked, and a problem is said under its own box. */
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--muted);border-radius:var(--r-sm);background:#FFFFFF;color:var(--ink);font:inherit;font-size:17px;transition:border-color .2s ease}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field textarea{min-height:112px;resize:vertical}
/* bug hunt round 1, "Maybe" 4: the focus ring is ink, clearly visible on white */
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border:2px solid var(--urgent)}
.field .req{color:var(--blue-deep);font-weight:700}
.field .err{display:flex;gap:6px;align-items:baseline;font-size:15px;font-weight:700;color:var(--urgent)}
.req-note{grid-column:1/-1;font-size:15px;color:var(--muted)}
.send{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.said{font-size:16px;font-weight:650;min-height:1.5em}

/* ------------------------------------------------------------------ the sign-in page: a customer's door and a visitor's */
.door{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:start;max-width:1040px}
.door-card{display:grid;gap:16px;padding:clamp(22px,2.6vw,36px);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);box-shadow:var(--lift)}
.door-card h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.15;margin:0}
.door-card p{color:var(--muted);line-height:1.55}
.door-card .said{color:var(--ink)}
.door-card .said:empty{min-height:0;margin-top:-16px}
.door-card p .tl{min-height:0}
.door-card.quiet{background:transparent;box-shadow:none}
.door-go{margin:4px 0}

/* ------------------------------------------------------------------ the reveal: once per block, short, off under reduced motion */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity 480ms var(--ease),transform 480ms var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.now{transition:none}

/* ------------------------------------------------------------------ narrow screens */
@media (max-width:1060px){
  .price-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .door{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  :root{--bar:62px}
  .top{gap:10px}
  .top nav{display:none}
  .top .signin{display:none}
  .menu{display:inline-flex}
  /* issue 5: the open Menu is a panel under the bar and the page behind is
     dimmed; a tap on the dimmed page only closes the Menu (site.js) */
  .top.open nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - var(--bar));overflow-y:auto;background:var(--card);padding:8px var(--pad) 18px;border-bottom:1px solid var(--rule);font-size:20px;box-shadow:0 0 0 100vmax rgba(7,15,41,.45)}
  .top.open nav a{display:flex;align-items:center;min-height:56px;padding:0;border-radius:0;border-top:1px solid var(--rule);color:var(--ink)}
  .top.open nav a:first-child{border-top:0}
  .top.open nav .in-menu{display:flex;font-size:17px;color:var(--muted)}
  .top .btn{padding:0 14px;font-size:15px}
  .mark{font-size:20px}
  .foot nav{margin-left:0;width:100%}
  .rows li{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:380px){
  .top .mark{font-size:18px;gap:7px}
  .top .btn{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none}
}