/* ===== Editorial refresh (Oct 2026): the website, matching the app =========
   Loaded after each page's own <style>, so it only restates what changed:
   white on Mist with one ink rule on top of each surface, corners nearly
   square, light display headings, small spaced capitals for labels, and one
   confident action. The primary is sized to its words with a quiet arrow;
   the secondary is an underlined link, never a second slab. Phones keep the
   primary full width where a thumb lands. Same rules as app/src/styles/tokens.css
   and website/teams/teams.css. */
:root{ --sage-deep:#4E5F45; --sage-press:#425238; --sage:#8DA07E;
  --radius:6px;          /* buttons and fields (Nov 6, 2026: rounded to match the app) */
  --radius-card:8px;     /* cards and panels */
  /* Porcelain ground with one deep anchor, Forest Ink, used sparingly:
     the For teams band and the footer. */
  --forest-ink:#1F2A24; --forest-text:#EEEEE9; --forest-soft:#AEB6AD; --forest-line:#34413A; }

/* ── Actions ─────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:48px; padding:12px 26px;
  font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:.02em; line-height:1.3;
  border-radius:var(--radius); border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, color .18s ease; }
.btn-primary{ background:var(--sage-deep); color:#FFFFFF; }
.btn-primary::after{ content:''; flex:none; width:16px; height:10px; background:currentColor; transition:transform .2s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn-primary:hover{ background:var(--sage-press); transform:none; box-shadow:none; }
.btn-primary:hover::after{ transform:translateX(3px); }
.btn-secondary{ background:transparent; color:var(--ink); border:0; border-radius:0; min-height:44px; padding:10px 2px; margin-left:0;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.btn-secondary:hover{ text-decoration-thickness:2px; }
.btn-primary + .btn-secondary{ margin-left:36px; }
@media (max-width:640px){
  .hero .btn-primary{ display:flex; width:100%; justify-content:space-between; }
}

/* Header action: the same Sage Deep, square, no arrow at this size. */
/* A slimmer header (Oct 2026): about 66px tall instead of 90. */
.site-nav{ padding:14px 0; }
.site-nav .nav-cta{ padding:8px 18px; }
.site-nav .nav-cta{ background:var(--sage-deep); border-radius:var(--radius); letter-spacing:.02em; transition:background-color .18s ease; }
.site-nav .nav-cta:hover{ background:var(--sage-press); }

/* ── Surfaces: white on Mist, rounded, one sage rule on top (Nov 6, 2026:
   matches the app's cards) ─────────────────────────────────────────────── */
.step, .price-card, .teams-band, .example-card, .privacy-visual, .cue-demo, .notice,
.team-steps li, .summary-card, .console-frame{
  border:1px solid var(--hairline); border-top:3px solid var(--sage); border-radius:var(--radius-card); }
.notice{ border-top:1px solid var(--hairline); overflow:hidden; }   /* photos carry their own edge */
.notice img{ border-bottom:1px solid var(--hairline); }
.price-card, .price-card:hover{ transform:none; box-shadow:none; }
.step:hover, .step:focus-within{ border-top-color:var(--sage-deep); box-shadow:0 16px 32px -24px rgba(22,23,15,0.22); }
.steps.forced-collapse .step{ border-top-color:var(--sage) !important; }
.callout, .draft-banner, .privacy-note, .stat-card{ border-radius:var(--radius-card); }
.meeting-mock, .call-mock{ border-radius:6px; }

/* Price cards: the action sits at the foot of each card, sized to its words. */
.price-card{ display:flex; flex-direction:column; }
.price-card ul{ flex:1 0 auto; }
.price-card .btn{ align-self:flex-start; }
.price-card .btn-secondary{ padding-left:0; min-height:48px; }
.price-card.pro{ border-top-color:var(--sage-deep); }   /* the paid tier carries the action color */
@media (max-width:640px){ .price-card .btn-primary{ align-self:stretch; justify-content:space-between; } }

/* ── Type: light display headings, spaced capitals for labels ────────── */
.hero h1{ font-weight:300; letter-spacing:-.015em; }
h2.h{ font-weight:300; font-size:36px; line-height:1.15; letter-spacing:-.015em; text-wrap:balance; }
@media (max-width:640px){ h2.h{ font-size:28px; } }
.page-header h1, .legal-header h1{ font-weight:300; letter-spacing:-.015em; text-wrap:balance; }
.teams-band h2{ font-weight:300; font-size:30px; letter-spacing:-.015em; }
.step h3{ font-family:var(--font-display); font-weight:400; font-size:20px; letter-spacing:-.005em; }
.step .n, .team-steps .num{ font-family:var(--font-display); font-weight:300; font-size:22px; font-variant-numeric:tabular-nums; color:var(--taupe-deep); }
.team-steps .num{ display:block; width:auto; height:auto; border:0; border-radius:0; background:none; margin-bottom:10px; }
.team-steps h3{ font-weight:400; }
.price-card .tier, .price-card h3.tier{ font-weight:300; font-size:28px; letter-spacing:-.01em; }
.privacy-visual .big{ font-weight:300; letter-spacing:-.015em; }
.legal-content h2{ font-weight:400; letter-spacing:-.005em; }
.faq-item summary{ font-family:var(--font-display); font-weight:400; font-size:17px; gap:16px; }
.faq-item summary::after{ font-weight:300; }

.eyebrow, .tier-eyebrow, .legal-eyebrow, .example-card .scene, .legal-toc .label{
  font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe-deep); }
section > .wrap > .eyebrow, .privacy-grid .eyebrow{ margin:0 0 14px; }
.tier-eyebrow{ margin-bottom:10px; }

/* ── Forest Ink: the deep anchor ─────────────────────────────────────── */
.teams-band{ background:var(--forest-ink); color:var(--forest-text); border:0; }
.teams-band h2{ color:var(--forest-text); }
.teams-band p{ color:var(--forest-soft); }
.teams-band .eyebrow{ color:var(--forest-soft); }
.teams-band .btn-primary{ background:var(--forest-text); color:var(--forest-ink); }
.teams-band .btn-primary:hover{ background:#FFFFFF; }
.teams-band :focus-visible{ outline-color:var(--forest-text); }

footer{ background:var(--forest-ink); color:var(--forest-text); border-top:0; }
footer .logo, footer .logo span{ color:var(--forest-text); }
footer nav, footer .footer-links{ background:transparent; box-shadow:none; position:static; padding:0; border:0; }
footer .footer-links a{ color:var(--forest-soft); }
footer .footer-links a:hover, footer .footer-links a[aria-current="page"]{ color:var(--forest-text); }
footer .copyright{ color:var(--forest-soft); }
footer :focus-visible{ outline-color:var(--forest-text); }

/* The arrow means "this takes you forward". Buttons that finish, close or act
   in place (Done, Send report, Save expression) carry .btn-end and no arrow. */
.btn-primary.btn-end::after{ content:none; }
.btn-block.btn-primary.btn-end{ justify-content:center; }
@media (prefers-reduced-motion: reduce){ .btn-primary::after{ transition:none; } }

/* Wordmark: two-tone, as in the app. "Cue" in Sage Deep on light grounds,
   in Sage on Forest Ink. */
/* Wordmark at semibold, as in the app and the Teams console. */
.logo{ font-weight:600; letter-spacing:-0.01em; }
.logo-cue{ color:#4E5F45; }
footer .logo .logo-cue{ color:#8DA07E; }

/* ── Get Terevu (download section, Oct 2026) ─────────────────────────── */
.get-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; }  /* four devices: two by two */
@media (max-width:860px){ .get-grid{ grid-template-columns:1fr; } }
.get-card{ position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--hairline); border-top:3px solid var(--sage); border-radius:var(--radius-card); padding:32px; }
@media (max-width:640px){ .get-card{ padding:24px; } }
.get-card.is-here{ order:-1; border-top-color:var(--sage-deep); }
.get-icon{ width:40px; height:40px; color:var(--sage-deep); }
.get-card h3{ font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:-.005em; margin:18px 0 8px; }
.get-card p{ flex:1 0 auto; margin:0 0 24px; font-size:15px; color:var(--ink-soft); }
.get-card .btn{ align-self:flex-start; }
@media (max-width:640px){ .get-card .btn-primary{ align-self:stretch; justify-content:space-between; } }
.get-here{ position:absolute; top:22px; right:24px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sage-deep); }
.get-note{ margin:32px 0 0; font-size:15px; color:var(--taupe-deep); }
.get-note.is-here{ color:var(--ink); }

/* A store that isn't open yet: quiet outline, no arrow, not clickable. */
.btn.is-soon, .btn.is-soon:hover{ background:transparent; color:var(--taupe-deep); border:1px solid var(--hairline); cursor:default; }
.btn.is-soon::after{ display:none; }
.get-card .btn{ white-space:nowrap; }

/* Legal pages, "On this page": the number stays beside its title, and a long
   title wraps under itself rather than dropping below the number. */
.legal-toc li{ display:flex; align-items:baseline; gap:4px; }
.legal-toc li::before{ flex:none; }
.legal-toc a{ display:block; flex:1; min-width:0; }