/* FewHQ public pages. Same tokens as the inbox. */
:root{
  color-scheme: light;
  --bg:#fcfcfd; --side:#f4f4f6; --raise:#ffffff;
  --ink:#1c1c21; --ink2:#5d5e66; --ink3:#73747c;
  --line:rgba(28,28,40,.09); --line2:rgba(28,28,40,.16);
  --well:rgba(28,28,40,.04); --sel:rgba(28,28,40,.07);
  --btn:#1c1c21; --btn-ink:#ffffff;
  --amber:#a8690a; --red:#c8372f; --green:#2f8552;
  --a1:#7a5fd3; --a2:#12897b; --a3:#c24a86; --a4:#2f73d6;
  --tint:13%;
  --r-ctl:6px; --r-card:9px; --r-shot:12px;
  --font:"InterVariable","Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1120px; --gut:32px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#111214; --side:#0c0d0e; --raise:#17181b;
    --ink:#e6e6e9; --ink2:#a2a3ab; --ink3:#84858d;
    --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
    --well:rgba(255,255,255,.045); --sel:rgba(255,255,255,.075);
    --btn:#e6e6e9; --btn-ink:#111214;
    --amber:#d9a03f; --red:#ef6b61; --green:#5cb37f;
    --a1:#9d86ea; --a2:#35b3a3; --a3:#e072a8; --a4:#5e9bf0;
    --tint:18%;
  }
  :root:not([data-theme="light"]) .shot .shot-light{display:none}
  :root:not([data-theme="light"]) .shot .shot-dark{display:block}
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#111214; --side:#0c0d0e; --raise:#17181b;
  --ink:#e6e6e9; --ink2:#a2a3ab; --ink3:#84858d;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --well:rgba(255,255,255,.045); --sel:rgba(255,255,255,.075);
  --btn:#e6e6e9; --btn-ink:#111214;
  --amber:#d9a03f; --red:#ef6b61; --green:#5cb37f;
  --a1:#9d86ea; --a2:#35b3a3; --a3:#e072a8; --a4:#5e9bf0;
  --tint:18%;
}
:root[data-theme="dark"] .shot .shot-light{display:none}
:root[data-theme="dark"] .shot .shot-dark{display:block}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font);font-feature-settings:"calt","ss01","cv05";-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--a4);outline-offset:2px;border-radius:var(--r-ctl)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.chrome{user-select:none;-webkit-user-select:none}
svg.lucide{width:14px;height:14px;flex:none;stroke-width:1.75}
[data-r="1"]{--a:var(--a1)} [data-r="2"]{--a:var(--a2)} [data-r="3"]{--a:var(--a3)} [data-r="4"]{--a:var(--a4)}

/* ---------- buttons ---------- */
.btn{height:36px;padding:0 14px;border-radius:var(--r-ctl);display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:0;cursor:pointer;text-decoration:none;font-weight:500;font-size:14px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line2);user-select:none;-webkit-user-select:none}
.btn:hover{background:var(--well)}
.btn.primary{background:var(--btn);color:var(--btn-ink);box-shadow:none}
.btn.primary:hover{opacity:.9}
.btn.sm{height:30px;padding:0 11px;font-size:13.5px}
.btn.block{display:flex;width:100%}
.btn[disabled]{opacity:.55;cursor:default}
.tlink{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.tlink:hover{text-decoration-color:currentColor}
kbd{font:500 11px/1 var(--font);color:var(--ink2);border:1px solid var(--line2);border-radius:4px;padding:3px 5px;min-width:20px;text-align:center;display:inline-block}

/* ---------- site header ---------- */
.site-head{padding:18px 0}
.site-head .wrap{display:flex;align-items:center;gap:28px}
.wordmark{font-weight:650;letter-spacing:-.01em;font-size:16px;text-decoration:none}
.site-nav{display:flex;gap:22px;flex:1}
.site-nav a,.head-login{color:var(--ink2);text-decoration:none;font-size:14px}
.site-nav a:hover,.head-login:hover{color:var(--ink)}
.head-actions{display:flex;align-items:center;gap:16px;margin-left:auto}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;height:36px;padding:0 10px;display:flex;align-items:center;border-radius:var(--r-ctl);color:var(--ink2);font-size:14px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--sel);color:var(--ink)}
.menu ul{position:absolute;right:0;top:42px;min-width:200px;padding:6px;border-radius:var(--r-card);background:var(--raise);box-shadow:0 0 0 1px var(--line2),0 12px 28px -12px rgba(0,0,0,.3);z-index:5}
.menu li a{display:block;padding:10px 12px;border-radius:var(--r-ctl);text-decoration:none}
.menu li a:hover{background:var(--well)}

/* ---------- hero ---------- */
.hero{padding:72px 0 0}
.eyebrow{font-size:13.5px;color:var(--ink3);margin-bottom:16px}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:-.032em;font-weight:600;max-width:17ch;text-wrap:balance}
.hero .lead{font-size:18px;line-height:1.5;color:var(--ink2);max-width:54ch;margin-top:22px;text-wrap:pretty}
.cta{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.cta .aside{color:var(--ink3);font-size:14px}
.shot{margin-top:56px;border-radius:var(--r-shot);overflow:hidden;box-shadow:0 0 0 1px var(--line2);background:var(--side)}
.shot img{display:block;width:100%;height:auto}
.shot .shot-dark{display:none}

/* ---------- sections ---------- */
.sec{padding:112px 0 0}
.sec-intro{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;padding-bottom:40px}
.sec-intro h2{font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.025em;font-weight:600;max-width:16ch;text-wrap:balance}
.sec-intro p{font-size:18px;line-height:1.5;color:var(--ink2);max-width:52ch;text-wrap:pretty;padding-top:4px}
.feature{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;padding:40px 0;border-top:1px solid var(--line)}
.feature dt{font-size:17px;font-weight:600;letter-spacing:-.01em}
.feature dd.txt{color:var(--ink2);margin-top:8px;max-width:40ch;text-wrap:pretty}
.feature .num{color:var(--ink3);font-variant-numeric:tabular-nums;font-size:13px;margin-bottom:10px}
.demo{border-radius:var(--r-card);background:var(--raise);box-shadow:0 0 0 1px var(--line);padding:18px 20px;font-size:14px;line-height:1.6;min-width:0}
.demo p + p{margin-top:.8em}
.demo mark{background:color-mix(in oklab,var(--a) var(--tint),transparent);color:inherit;border-radius:3px;padding:1.5px 0;box-shadow:-2px 0 0 color-mix(in oklab,var(--a) var(--tint),transparent),2px 0 0 color-mix(in oklab,var(--a) var(--tint),transparent);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.demo-from{color:var(--ink3);font-size:12.5px;margin-bottom:10px}
.dpart{position:relative;padding-left:26px}
.dpart + .dpart{margin-top:16px}
.cdot{position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--a) 20%,transparent);color:color-mix(in oklab,var(--a) 72%,var(--ink));font:600 10px/1 var(--font)}
.dmeta{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12px;color:var(--ink3);flex-wrap:wrap}
.conf{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.conf .bars{display:inline-flex;gap:2px;align-items:flex-end}
.conf .bars i{width:3px;border-radius:1px;background:var(--line2)}
.conf .bars i:nth-child(1){height:5px}.conf .bars i:nth-child(2){height:7px}.conf .bars i:nth-child(3){height:9px}.conf .bars i:nth-child(4){height:11px}
.conf .bars i.on{background:var(--ink2)}
.conf.low{color:var(--amber)} .conf.low .bars i.on{background:var(--amber)}
.ticket{margin-top:10px;padding:10px 12px;border-radius:6px;background:var(--well);font-size:13px;line-height:1.45}
.ticket-1{display:flex;align-items:center;gap:8px}
.ticket-1 .id{color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ticket-1 .ttl{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-2{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;color:var(--ink2);white-space:nowrap}
.ticket-3{margin-top:9px;color:var(--ink2);font-size:12.5px}
.ticket-3 b{font-weight:550;color:var(--ink)}
.glyph{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px currentColor}
.glyph.pending{color:var(--amber);background:conic-gradient(currentColor 0 50%,transparent 0);background-clip:content-box;padding:2.5px}
.glyph.resolved{color:var(--green);background:currentColor;position:relative}
.glyph.resolved::after{content:"";position:absolute;left:3.6px;top:2.2px;width:2.6px;height:4.6px;border:solid var(--raise);border-width:0 1.4px 1.4px 0;transform:rotate(40deg)}
.pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px 0 5px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink2);font-size:11.5px;white-space:nowrap}
.auto-tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px 0 6px;border-radius:999px;border:1px dashed var(--line2);font-size:11.5px;white-space:nowrap}
.auto-tag svg.lucide{width:12px;height:12px}
.qrow-1{display:flex;gap:10px;align-items:baseline;font-weight:500}
.qrow-1 span:last-child{margin-left:auto;color:var(--ink3);font-weight:400;font-size:12.5px;white-space:nowrap}
.qrow-2{color:var(--ink2);font-size:13px}
.qrow-3{display:flex;gap:8px;margin-top:8px;align-items:center}
.demo-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink2);font-size:12.5px}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:1px solid var(--line)}
.vs-col{padding:28px 0}
.vs-col h3{font-size:13.5px;font-weight:600;color:var(--ink3);margin-bottom:14px}
.vs-col li{padding:7px 0;color:var(--ink2)}
.vs-col + .vs-col li{color:var(--ink)}

.who{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;border-top:1px solid var(--line)}
.who > div{padding:24px 0;border-bottom:1px solid var(--line)}
.who dt{font-size:15px;font-weight:600;letter-spacing:-.01em}
.who dd{color:var(--ink2);margin-top:6px;font-size:14px;line-height:1.5}

.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;border-top:1px solid var(--line)}
.keys div{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.keys dt{display:flex;align-items:center;gap:4px;min-width:64px;color:var(--ink3)}
.keys dd{color:var(--ink2)}

.closing{padding:112px 0 96px}
.closing h2{font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.025em;font-weight:600;max-width:18ch;text-wrap:balance}
.site-foot{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--ink2);font-size:14px}
.site-foot .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.site-foot .wordmark{font-size:14px;color:var(--ink)}
.site-foot ul{display:flex;gap:22px;flex-wrap:wrap}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--ink)}
.site-foot .copy{margin-left:auto;color:var(--ink3)}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:flex;flex-direction:column}
.auth-head{padding:18px var(--gut)}
.auth-main{flex:1;display:flex;justify-content:center;padding:7vh 20px 64px}
.auth-box{width:100%;max-width:328px}
.auth-box h1{font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.auth-box .sub{color:var(--ink2);margin-top:8px;text-wrap:pretty}
.auth-box form{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field label{font-size:13.5px;font-weight:500}
.field-top a{font-size:13.5px;color:var(--ink2);text-decoration:none}
.field-top a:hover{color:var(--ink)}
.input{height:38px;width:100%;padding:0 11px;border:0;border-radius:var(--r-ctl);background:var(--raise);box-shadow:inset 0 0 0 1px var(--line2);outline:0;font-size:15px}
.input::placeholder{color:var(--ink3)}
.input:focus{box-shadow:inset 0 0 0 1.5px var(--a4)}
.input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--red)}
.hint{color:var(--ink3);font-size:13px}
.err{color:var(--red);font-size:13px;display:none;gap:6px;align-items:flex-start}
.err::before{content:"!";flex:none;width:14px;height:14px;margin-top:2px;border-radius:50%;background:var(--red);color:var(--bg);font:700 10px/14px var(--font);text-align:center}
.input[aria-invalid="true"] ~ .err{display:flex}
.input[aria-invalid="true"] ~ .hint{display:none}
.auth-box .btn{height:38px}
.or{display:flex;align-items:center;gap:12px;color:var(--ink3);font-size:13px;margin:18px 0 -8px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.sso{margin-top:26px}
.auth-alt{margin-top:22px;color:var(--ink2);font-size:14px}
.legal{color:var(--ink3);font-size:13px;text-wrap:pretty}
.done{display:none}
.auth-box[data-state="done"] .ask{display:none}
.auth-box[data-state="done"] .done{display:block}
.done .acts{display:flex;gap:16px;align-items:center;margin-top:24px;flex-wrap:wrap}
.done h1:focus{outline:0}
.done b{font-weight:600;overflow-wrap:anywhere}

/* ---------- narrower ---------- */
@media (max-width:860px){
  :root{--gut:20px}
  body{font-size:16px}
  .site-nav,.head-login{display:none}
  .menu{display:block}
  .hero{padding-top:40px}
  .hero .lead{font-size:17px}
  .shot{margin-top:40px;border-radius:8px}
  .shot img{aspect-ratio:390/700;object-fit:cover;object-position:top}
  .sec{padding-top:80px}
  .sec-intro,.feature{grid-template-columns:1fr;gap:20px}
  .sec-intro{padding-bottom:28px}
  .sec-intro p{font-size:17px;padding:0}
  .feature{padding:32px 0}
  .demo{font-size:15px;padding:16px}
  .vs{grid-template-columns:1fr;gap:0}
  .vs-col + .vs-col{border-top:1px solid var(--line)}
  .who{grid-template-columns:1fr}
  .who > div{padding:16px 0}
  .keys{grid-template-columns:1fr}
  .closing{padding:80px 0 72px}
  .btn{height:44px;padding:0 18px;font-size:16px}
  .btn.sm{height:40px;padding:0 14px;font-size:15px}
  .site-foot .copy{margin-left:0;flex-basis:100%}
  .site-foot ul{gap:8px 20px}
  .site-foot a{display:inline-block;padding:6px 0}
  .auth-main{padding-top:4vh}
  .input,.auth-box .btn{height:46px;font-size:16px}
  .field label,.field-top a{font-size:15px}
}