/* The landing's stylesheet (web/site/: the home page and About; server/site.ts serves it as it is). Team-Week's own
   tokens and type (web/app/src/theme.css), so the pages look like the app. Self-hosted fonts (fonts/, with licences). */
@font-face { font-family: "Bricolage Grotesque Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root{
  --bg:#F2F4F8; --surface:#FFFFFF; --sunk:#E8ECF3; --ink:#131A27; --muted:#5A647A; --line:#D9DFEA;
  --accent:#2D55E0; --accent-ink:#FFFFFF; --accent-soft:#E2E8FC;
  --gold:#A86F00; --gold-soft:#FBEFD2;
  --good:#1D7F53; --good-soft:#DDF1E6; --warn:#A5660E; --warn-soft:#FAEBD3; --bad:#B93A33; --bad-soft:#F8E0DE;
  --p1:#C2413A; --p2:#D57A27; --p3:#B39B1E; --p4:#4F9A55; --p5:#1D7F53;
  --r:10px; --shadow:0 1px 2px rgba(19,26,39,.06),0 4px 14px rgba(19,26,39,.05);
  --logo-t:#1D3570; --logo-slash:#98A2B7; --logo-w:#F28322;
  --font-display:"Bricolage Grotesque Variable","Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0D1118; --surface:#151B26; --sunk:#1C2331; --ink:#E6EAF2; --muted:#98A2B7; --line:#283143;
  --accent:#7D9BFF; --accent-ink:#0D1118; --accent-soft:#1F2A4A; --logo-t:#7D9BFF;
  --gold:#F2C060; --gold-soft:#3A2F17;
  --good:#5CC890; --good-soft:#163527; --warn:#E9A752; --warn-soft:#3A2A14; --bad:#F07A72; --bad-soft:#3D1D1B;
  --p1:#F07A72; --p2:#EE9A55; --p3:#D9C45A; --p4:#7BC47F; --p5:#5CC890;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25); color-scheme:dark }}

*,*::before,*::after{ 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(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-wrap:break-word }
h1,h2,h3{ font-family:var(--font-display); text-wrap:balance; margin:0; line-height:1.12 }
h1{ font-size:clamp(2.1rem, 7vw, 3.6rem); font-weight:750; letter-spacing:-.02em }
h2{ font-size:clamp(1.55rem, 4.5vw, 2.2rem); font-weight:700; letter-spacing:-.01em }
h3{ font-size:1.08rem; font-weight:650 }
p{ margin:0 }
a{ color:var(--accent) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
img{ max-width:100%; height:auto; display:block }
ul{ margin:0; padding:0 }
.muted{ color:var(--muted) }
.nw{ white-space:nowrap }
.small{ font-size:.88rem }
.eyebrow{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600 }
.wrap{ width:100%; max-width:1120px; margin:0 auto; padding-inline:max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)) }
.skip{ position:absolute; left:12px; top:-60px; background:var(--accent); color:var(--accent-ink); padding:8px 14px; border-radius:8px; z-index:10 }
.skip:focus{ top:12px }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:9px 16px; font:inherit; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; white-space:nowrap }
.btn:hover{ border-color:var(--muted) }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.btn.primary:hover{ filter:brightness(1.07) }
.btn.big{ padding:13px 22px; font-size:1.05rem }
.btn:disabled{ opacity:.5; cursor:progress }
.chip{ display:inline-flex; align-items:center; font-size:.74rem; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; background:var(--sunk); color:var(--muted) }
.chip.acc{ background:var(--accent-soft); color:var(--accent) }
.chip.gold{ background:var(--gold-soft); color:var(--gold) }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow) }
/* the Team-Week mark (brand/tw-mark.svg), inline so the T follows the colour scheme */
.mark{ width:34px; height:34px; flex:none }
.mark .t{ fill:var(--logo-t) } .mark .s{ fill:var(--logo-slash) } .mark .w{ fill:var(--logo-w) }

/* header (home and About): the brand, the site nav, Log in and Request a demo */
.top{ position:relative; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.top .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding-block:10px }
.brand{ display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin-right:auto }
.top .mark{ width:28px; height:28px }
.actions{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto }
.top .cta{ padding:7px 11px; font-size:.92rem }
/* phones: the brand and both buttons on the first row (the buttons drop below the brand on a very narrow screen),
   the site links on a row of their own, wrapping rather than scrolling sideways */
.top nav{ order:3; flex-basis:100%; min-width:0 }
.sections{ display:flex; flex-wrap:wrap; gap:2px 4px; list-style:none; margin:0 -10px; padding:0 }
.sections a{ display:block; padding:6px 10px; border-radius:8px; color:var(--muted); text-decoration:none; font-weight:600; font-size:.92rem; white-space:nowrap }
.sections a:hover, .sections a[aria-current="page"]{ background:var(--sunk); color:var(--ink) }
@media (min-width: 600px){
  /* sticky from here up; on a phone the wrapped header would take too much of the screen */
  .top{ position:sticky; top:0 }
  .top .wrap{ gap:10px 18px }
  .brand{ font-size:1.12rem; gap:10px }
  .top .mark{ width:34px; height:34px }
  .actions{ gap:8px }
  .top .cta{ padding:8px 14px; font-size:1rem }
}
@media (min-width: 900px){
  .top nav{ order:0; flex-basis:auto }
  .sections{ margin:0 }
  .actions{ margin-left:0 }
}

/* sections */
main section{ padding-block:56px; scroll-margin-top:96px }
main section + section{ border-top:1px solid var(--line) }
.shead{ display:flex; flex-direction:column; gap:10px; max-width:68ch; margin-bottom:28px }
.shead p{ color:var(--muted); font-size:1.05rem }

.hero{ padding-block:44px 56px }
.hero .lede{ font-size:clamp(1.08rem, 2.6vw, 1.3rem); color:var(--muted); max-width:58ch; margin-top:16px }
.hero .lede-sub{ font-size:clamp(0.95rem, 2.1vw, 1.05rem); color:var(--muted); max-width:58ch; margin-top:12px; padding-left:12px; border-left:2px solid var(--accent); text-wrap:pretty } /* the promise under the lede (Slava 2026-11-05: 'a subnote ... like a promise statement') */
.hero .ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }
.hero .note{ margin-top:16px }
.pulse{ display:flex; gap:6px; margin-bottom:18px }
.pulse span{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-family:var(--font-mono); font-weight:500; font-size:.88rem; background:var(--pc); color:var(--surface) }
.pc1{ --pc:var(--p1) } .pc2{ --pc:var(--p2) } .pc3{ --pc:var(--p3) } .pc4{ --pc:var(--p4) } .pc5{ --pc:var(--p5) }
.shot{ margin:0; display:flex; flex-direction:column; gap:10px }
.shot img{ border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); background:var(--surface) }
.shot figcaption{ color:var(--muted); font-size:.92rem }
.hero .shot{ margin-top:40px }

.steps{ list-style:none; display:grid; gap:16px; counter-reset:step }
.steps li{ display:flex; flex-direction:column; gap:10px }
.steps .n{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-family:var(--font-display); font-weight:700 }
.steps p{ color:var(--muted) }
@media (min-width: 760px){ .steps{ grid-template-columns:repeat(3, minmax(0, 1fr)) } }

.features{ display:grid; gap:16px }
@media (min-width: 760px){ .features{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1040px){ .features{ grid-template-columns:repeat(3, minmax(0, 1fr)) } }
.features .card{ display:flex; flex-direction:column; gap:12px }
.ticks{ list-style:none; display:flex; flex-direction:column; gap:8px }
.ticks li{ position:relative; padding-left:22px }
.ticks li::before{ content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:2px; background:var(--accent) }
.coming{ border-style:dashed; box-shadow:none; background:transparent }
.coming .ticks li::before{ background:var(--gold) }
.coming .head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }

.gallery{ display:grid; gap:28px }
@media (min-width: 860px){ .gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.phones{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; max-width:560px }

.stack{ display:grid; gap:0; margin:0 }
.stack div{ display:grid; gap:4px 24px; padding:16px 0; border-bottom:1px solid var(--line) }
.stack div:last-child{ border-bottom:0 }
.stack dt{ font-family:var(--font-display); font-weight:650 }
.stack dd{ margin:0; color:var(--muted) }
@media (min-width: 760px){ .stack div{ grid-template-columns:180px minmax(0, 1fr) } }

.promises{ list-style:none; display:grid; gap:12px }
@media (min-width: 760px){ .promises{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.promises li{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:2px }
.promises b{ font-weight:600 }
.promises span{ color:var(--muted) }

.demo{ display:grid; gap:28px; align-items:start }
@media (min-width: 900px){ .demo{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr) } }
form{ display:flex; flex-direction:column; gap:16px }
.f{ display:flex; flex-direction:column; gap:6px }
.f label{ font-weight:600; font-size:.95rem }
.f .hint{ font-weight:400; color:var(--muted); font-size:.86rem }
.two{ display:grid; gap:16px }
@media (min-width: 560px){ .two{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
input,textarea{ width:100%; min-width:0; font:inherit; color:inherit; border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:10px 12px }
textarea{ min-height:120px; resize:vertical }
input:focus,textarea:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent }
.status{ min-height:1.5em; font-weight:600 }
.status[data-tone="good"]{ color:var(--good); background:var(--good-soft); padding:12px 14px; border-radius:8px }
.status[data-tone="bad"]{ color:var(--bad); background:var(--bad-soft); padding:12px 14px; border-radius:8px }
.status:empty{ display:none }

/* footer (home and About): the brand, three short columns of links, then the fine print */
footer{ border-top:1px solid var(--line); padding-block:36px 40px; color:var(--muted); font-size:.92rem }
.fgrid{ display:grid; gap:24px; grid-template-columns:repeat(2, minmax(0, 1fr)) }
.fabout{ grid-column:1 / -1; display:flex; flex-direction:column; gap:8px }
footer .brand{ font-size:1rem; margin-right:0; align-self:flex-start }
footer .mark{ width:26px; height:26px }
.fhead{ font-family:var(--font-display); font-weight:650; color:var(--ink); margin-bottom:8px }
.flinks{ list-style:none; display:flex; flex-direction:column; gap:6px }
.flinks a{ color:var(--muted); text-decoration:none }
.flinks a:hover{ color:var(--ink); text-decoration:underline }
.fbase{ display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between; margin-top:28px; padding-top:18px; border-top:1px solid var(--line) }
@media (min-width: 760px){
  .fgrid{ grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) }
  .fabout{ grid-column:auto }
}

/* About: one column of short sections */
.page{ padding-block:44px 8px }
.page .lede{ font-size:clamp(1.05rem, 2.4vw, 1.22rem); color:var(--muted); max-width:62ch; margin-top:16px }
.prose{ display:flex; flex-direction:column; gap:14px }
.prose > *{ max-width:68ch }
.prose > .promises{ max-width:900px }
.prose p{ color:var(--muted) }
.prose .ticks{ color:var(--ink) }
.prose .ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px }