/* ==========================================================================
   Writask public site — "Writask Ink" design system.

   Every token below is lifted 1:1 from the native app's single source of
   truth: frontend/lib/features/sector_experience/presentation/widgets/
   sector_ui_theme.dart. Do not invent web-only colors, radii or type sizes —
   change the Dart tokens first, then mirror them here.

   The phone mockups further down (.ax-* classes) are pixel-accurate replicas
   of real app screens at 393pt logical width, so a screenshot of the app and
   a screenshot of this page must line up.
   ========================================================================== */

/* --- Nunito Sans (self-hosted variable subsets) ---------------------------
   GoogleFonts.nunitoSansTextTheme() in app_theme.dart. Self-hosted because
   nginx ships a locked CSP (default-src 'self') — a CDN would be blocked.  */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/nunito-sans-latin.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;
}


:root {
  /* Surfaces — warm paper, not cool SaaS grey (SectorUiColors). */
  --paper: #fafaf8;
  --surface: #fff;
  --surface-subtle: #fbfbf9;
  --line: #eceae4;
  --sand: #f3f1ec;

  /* Text — ink with warm-neutral secondaries. */
  --ink: #16181d;
  --ink-2: #6e7278;
  --ink-3: #7e8085;

  /* Accent — deep emerald, used sparingly. */
  --accent: #0f5d4e;
  --accent-deep: #0b4a3e;
  --accent-tint: #eaf3ef;
  --accent-tint-strong: #dcebe4;
  --danger: #b3423c;
  --chevron: #bdc2cc;

  /* Functional icon-tile tints (SectorUiTints) — color carries meaning. */
  --sage-bg: #eaf3ef; --sage-fg: #0f5d4e;
  --sky-bg: #eaf1f8; --sky-fg: #2c5d8f;
  --coral-bg: #fbeee9; --coral-fg: #b5533c;
  --amber-bg: #f9f1e2; --amber-fg: #9a6b1f;
  --violet-bg: #f0eef8; --violet-fg: #5a4e9e;
  --rose-bg: #f8ecf1; --rose-fg: #a34d72;

  /* Radius scale (SectorUiRadius). */
  --r-control: 12px;
  --r-inner: 14px;
  --r-button: 16px;
  --r-card: 18px;
  --r-hero: 24px;
  --r-pill: 999px;

  /* Near-zero elevation: one whisper-soft ambient shadow (SectorUiShadows). */
  --shadow-card: 0 2px 10px -2px rgba(22, 26, 40, .03);
  --shadow-nav: 0 8px 24px -6px rgba(22, 26, 40, .08);

  --page: min(1120px, calc(100% - 48px));
  --font: 'Nunito Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* clip, not hidden: `overflow-x: hidden` forces overflow-y to compute to
     auto, which makes body a second scroll container beside html and leaves
     the page resting at odd scroll offsets. `clip` clips without creating a
     scrollport. `hidden` stays first as the pre-Safari-16 fallback. */
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Icon sprite sizing. Glyphs are stroked with currentColor, so color comes
   from the element they sit in — same contract as WritaskIcon in the app. */
.i { width: 20px; height: 20px; fill: none; }
.i-12 { width: 12px; height: 12px; }
.i-14 { width: 14px; height: 14px; }
.i-16 { width: 16px; height: 16px; }
.i-18 { width: 18px; height: 18px; }
.i-20 { width: 20px; height: 20px; }
.i-24 { width: 24px; height: 24px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
p { margin: 0; }
svg { display: block; flex: none; }

/* --- Shared page furniture ---------------------------------------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lede { max-width: 46ch; color: var(--ink-2); font-size: 17px; line-height: 1.62; }

.button {
  min-height: 52px; padding: 0 24px; border: 1px solid transparent;
  border-radius: var(--r-button); display: inline-flex; align-items: center;
  justify-content: center; gap: 10px; cursor: pointer; font-size: 16px;
  font-weight: 700; letter-spacing: -.01em; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.button-primary { color: #fff; background: var(--ink); }
.button-primary:hover { background: #23262d; }
.button-ghost { border-color: var(--line); background: var(--surface); }
.button-ghost:hover { background: var(--sand); }
.button-small { min-height: 42px; padding: 0 18px; border-radius: var(--r-control); font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 15px; font-weight: 700; }
.text-link:hover { color: var(--accent-deep); }

/* --- Header -------------------------------------------------------------- */

.site-header {
  width: 100%; height: 68px; padding: 0 max(24px, calc((100% - 1120px) / 2));
  display: flex; align-items: center; gap: 32px;
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease;
}
.site-header.scrolled {
  background: rgba(250, 250, 248, .86);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; gap: 10px; align-items: center; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: #fff; background: var(--ink); border-radius: 10px;
  font-size: 15px; font-weight: 800; letter-spacing: 0;
}
/* Wordmark: the brand name as live text, mirroring the app's own lockup in
   AuthPremiumBrandLockup — Nunito Sans on the wght axis at 860, tracking
   -1.38/34 = -0.041em — and filled with the app's primary button colour
   (SectorUiButtonStyle.primarySurface, i.e. SectorUiColors.accent).
   860 is reachable because the shipped subset carries the full wght axis. */
.brand-wordmark {
  gap: 0;
  font-size: 24px;
  font-weight: 860;
  font-variation-settings: 'wght' 860;
  letter-spacing: -.041em;
  color: var(--accent);
}
.nav-links { margin-inline-start: auto; display: flex; gap: 30px; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.nav-links a:hover { color: var(--ink); }

/* --- Hero ---------------------------------------------------------------- */

/* The hero must land inside the first screen. Its top gap tracks viewport
   height so a 704px-tall window (1080p at 125% OS scaling) does not push the
   phone and the stat row below the fold. */
.hero {
  width: var(--page); margin: clamp(48px, 9.5vh, 76px) auto 0;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 64px;
}
.hero h1 { margin: 22px 0 24px; font-size: clamp(46px, 5.6vw, 76px); letter-spacing: -.05em; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.trust-row {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; gap: 34px; flex-wrap: wrap;
}
.trust-row div { display: grid; gap: 3px; }
.trust-row strong { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.trust-row span { color: var(--ink-3); font-size: 13px; font-weight: 600; }

/* --- Section scaffolding ------------------------------------------------- */

.section { width: var(--page); margin: 132px auto 0; }

/* Sticky-header clearance for every in-page anchor. Without this the browser
   aligns the target's top edge to y=0 and the 68px header covers it. */
#product, #teams, #security { scroll-margin-top: 84px; }
.section-head { max-width: 660px; }
.section-head h2 { margin: 18px 0 16px; font-size: clamp(32px, 3.8vw, 48px); letter-spacing: -.045em; }

/* --- Screens strip ------------------------------------------------------- */

/* A composition, not a product grid: the middle screen is bigger and sits
   higher, the outer two step down and frame it. Items hug their phones
   (flex: 0 1 auto) so the three read as one group instead of three columns. */
.screens { margin-top: 52px; display: flex; gap: 20px; align-items: flex-start; justify-content: center; }
.screen-item { flex: 0 1 auto; min-width: 0; display: grid; justify-items: center; gap: 20px; }
.screen-caption { max-width: 27ch; text-align: center; }

/* --- Editorial annotations on the Teams phone ---------------------------
   Hairline + small-caps label pointing at a specific UI region. --y is the
   region's centre as a percentage of the 872pt frame, so the callouts stay
   locked to the UI at every --s step without recomputing anything. */
.stage { position: relative; }
.anno {
  position: absolute; top: var(--y); inset-inline-start: 100%;
  transform: translateY(-50%);
  display: flex; align-items: center; white-space: nowrap;
}
/* Anchor dot sits just inside the band, so the callout reads as attached to
   the screen rather than parked beside it. */
.anno i { position: relative; inset-inline-start: -13px; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.anno i::after { content: ''; position: absolute; inset-inline-start: 6px; top: 50%; width: 34px; height: 1px; background: rgba(15, 93, 78, .4); }
.anno b { margin-inline-start: 36px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.screen-caption b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.screen-caption small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }

/* --- Statement ----------------------------------------------------------- */

.statement { width: var(--page); margin: 150px auto 0; padding: 0 0 6px; }
.statement p { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.statement h2 { margin-top: 22px; max-width: 20ch; font-size: clamp(38px, 5.4vw, 68px); letter-spacing: -.05em; }
.statement h2 span { color: var(--ink-3); font-weight: 400; }

/* --- Feature rows (hairline editorial, no cards on cards) ---------------- */

.features { width: var(--page); margin: 96px auto 0; }
.feature-row {
  padding: 46px 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 380px);
  align-items: start; gap: 40px;
}
.feature-row:last-child { border-bottom: 1px solid var(--line); }
.feature-index { color: var(--ink-3); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.feature-body h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.04em; }
.feature-body p { margin-top: 14px; max-width: 44ch; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.feature-proof { display: grid; gap: 10px; }

/* --- Teams (the anchor moment) ------------------------------------------- */

.teams-section {
  width: var(--page); margin: 150px auto 0;
  /* Vertical padding tracks viewport height for the same reason as .hero:
     padding + phone must stay inside one screen. */
  padding: clamp(40px, 5.5vh, 68px) clamp(36px, 4vw, 68px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px;
  border-radius: var(--r-hero); background: var(--accent-tint);
}
.teams-copy h2 { margin: 20px 0 18px; font-size: clamp(34px, 4.2vw, 54px); letter-spacing: -.05em; }
.teams-copy > p { max-width: 44ch; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.teams-copy ul { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.teams-copy li {
  padding: 16px 0; display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  border-top: 1px solid var(--accent-tint-strong); font-size: 15.5px; font-weight: 600;
}
.teams-copy li:last-child { border-bottom: 1px solid var(--accent-tint-strong); }
.teams-copy li span { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .06em; padding-top: 3px; }

/* --- Security band ------------------------------------------------------- */

.security {
  width: var(--page); margin: 132px auto 0; padding: 44px 0;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 420px);
  align-items: center; gap: 32px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.security-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-inner); color: #fff; background: var(--ink); font-size: 20px; font-weight: 800; }
.security span { color: var(--accent); font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.security h2 { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.04em; }
.security p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* --- Final CTA ----------------------------------------------------------- */

/* One-screen stage: the anchor aligns THIS to the scrollport top, and the
   panel is centred inside it, so #download arrives optically centred at any
   viewport height. padding-top clears the sticky header, and because
   min-height only grows the box the panel can never overflow it. */
.cta-stage {
  width: var(--page); margin: 132px auto 0;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 68px;
  display: grid; align-content: center;
}
.final-cta {
  width: 100%; padding: 92px 40px;
  display: grid; justify-items: center; text-align: center; gap: 0;
  color: #fff; border-radius: var(--r-hero); background: var(--ink);
}
.cta-mark { color: var(--ink); background: var(--accent-tint); }
.final-cta h2 { margin: 28px 0 16px; font-size: clamp(38px, 5.2vw, 62px); letter-spacing: -.05em; }
.final-cta > p { max-width: 42ch; color: rgba(255, 255, 255, .62); font-size: 16.5px; line-height: 1.6; }
.store-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.store-button {
  min-width: 178px; padding: 13px 20px; display: grid; text-align: start;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-button);
  transition: background .2s ease, border-color .2s ease;
}
.store-button:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.store-button small { color: rgba(255, 255, 255, .55); font-size: 11.5px; font-weight: 600; }
.store-button b { margin-top: 2px; font-size: 16px; font-weight: 700; }

/* --- Footer -------------------------------------------------------------- */

footer {
  width: var(--page); margin: 96px auto 0; padding: 40px 0 48px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px;
}
footer > p { color: var(--ink-2); }
footer > div { margin-inline-start: auto; display: flex; gap: 24px; flex-wrap: wrap; font-weight: 600; }
footer a:hover { color: var(--ink); }

/* ==========================================================================
   DEVICE MOCKUP — the app, not an impression of it.

   .device scales a fixed 393×852pt screen with transform, so text stays
   vector-crisp at every size and the geometry inside can use raw app pixels.
   ========================================================================== */

.device { --s: 1; position: relative; width: calc(413px * var(--s)); height: calc(872px * var(--s)); flex: none; }

/* Ground: one very soft sage light pool, so the phone belongs to the page
   instead of hovering on it. Percentage insets scale with --s for free.
   z-index stays 0 (never negative) or section backgrounds would cover it. */
.device::before {
  content: ''; position: absolute; z-index: 0; inset: 8% -16% -4% -16%;
  background: radial-gradient(52% 46% at 50% 56%, rgba(15, 93, 78, .13), transparent 72%);
}

/* Machined band: ink body with a lit top-left edge. Two shadows, not one — a
   tight contact shadow sits the object on the paper, a wide ambient one gives
   the room its depth. One shadow alone reads as "floating rectangle". */
.device-frame {
  position: relative; z-index: 1;
  width: 413px; height: 872px; padding: 10px;
  transform: scale(var(--s)); transform-origin: top left;
  border-radius: 56px;
  background:
    linear-gradient(148deg, rgba(52, 57, 67, .22) 0%, var(--ink) 20%, var(--ink) 74%, #383e4a 100%),
    var(--ink);
  box-shadow:
    inset 0 1.2px 0 rgba(255, 255, 255, .26),
    inset 1.2px 0 0 rgba(255, 255, 255, .11),
    inset -1.2px 0 0 rgba(255, 255, 255, .07),
    inset 0 -1.2px 0 rgba(255, 255, 255, .09),
    0 0 0 1px rgba(22, 26, 40, .12),
    0 3px 8px -1px rgba(22, 26, 40, .2),
    0 46px 80px -30px rgba(22, 26, 40, .32);
}

/* Side buttons: mute + volume pair on the start edge, power on the end edge.
   Layered backgrounds keep this to two pseudo-elements and zero markup —
   the single highest-signal detail for reading as a device, not a box. */
.device-frame::before {
  content: ''; position: absolute; inset-inline-start: -2.5px; top: 146px;
  width: 3px; height: 306px; border-radius: 3px;
  background:
    linear-gradient(90deg, #23272e, #3a4150) 0 0 / 3px 30px no-repeat,
    linear-gradient(90deg, #23272e, #3a4150) 0 64px / 3px 58px no-repeat,
    linear-gradient(90deg, #23272e, #3a4150) 0 134px / 3px 58px no-repeat;
}
.device-frame::after {
  content: ''; position: absolute; inset-inline-end: -2.5px; top: 212px;
  width: 3px; height: 96px; border-radius: 3px;
  background: linear-gradient(270deg, #23272e, #3a4150);
}
.screen {
  width: 393px; height: 852px; position: relative; overflow: hidden;
  border-radius: 46px; background: var(--paper);
  font-size: 16px; line-height: normal;
  /* Gasket hairline where the band meets the glass. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}

/* Status bar: 59pt iOS safe-area top with the dynamic island. */
.statusbar { height: 59px; padding: 0 34px 0 36px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.statusbar b { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.statusbar-right { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.island { position: absolute; top: 11px; left: 50%; width: 122px; height: 36px; transform: translateX(-50%); border-radius: var(--r-pill); background: var(--ink); }
.home-indicator { position: absolute; z-index: 2; bottom: 9px; left: 50%; width: 140px; height: 5px; transform: translateX(-50%); border-radius: var(--r-pill); background: rgba(22, 24, 29, .22); }

/* Scroll body: 20pt screen padding, 24pt topGap, nav-reserved bottom. */
.screen-body { height: calc(852px - 59px); padding: 24px 20px 114px; overflow: hidden; }

/* ---- App primitives (mirror the Flutter widgets one-for-one) ------------ */

/* SectorRootHeader */
.ax-header { display: flex; align-items: flex-start; gap: 12px; }
.ax-header-titles { flex: 1; min-width: 0; }
.ax-title { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }
.ax-subtitle { display: block; margin-top: 4px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-header-actions { padding-top: 2px; display: flex; gap: 8px; }

/* SectorIconButton — 40px soft-square, bare ink glyph. */
.ax-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-control); background: var(--sand); color: var(--ink); }

/* _ProfileAvatar — 44px accent circle with initials. */
.ax-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 15px; font-weight: 800; }

/* Home identity block */
.ax-greeting { margin-top: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.4; }
.ax-name { margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }

/* SectorGroupedList — ONE white surface, rows separated by a hairline that
   is inset 16pt at the start (SectorGroupedDivider), so rows keep full bleed
   and cannot read as individually bordered cards. */
.ax-group { border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.ax-group > * + * {
  background-image: linear-gradient(var(--line), var(--line));
  background-size: calc(100% - 16px) 1px;
  background-position: 100% 0;
  background-repeat: no-repeat;
}

/* Grouped row: 64pt min height, 16/12 padding. */
.ax-row { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.ax-row-main { flex: 1; min-width: 0; }
.ax-row-title { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.1px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-row-meta { display: block; margin-top: 3px; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-row-value { color: var(--ink-3); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ax-chevron { color: var(--chevron); }

/* SectorListRow with a leading tile — 56pt min height, 16/14 padding. */
.ax-row.settings { min-height: 56px; padding: 14px 16px; }

/* Squircle icon tile. 36pt compact / 44pt full; the circular radius here is
   the visual match for Flutter's ContinuousRectangleBorder(size * .62). */
.ax-tile { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--sage-bg); color: var(--sage-fg); }
.ax-tile.lg { width: 44px; height: 44px; border-radius: 14px; }
.ax-tile.sky { background: var(--sky-bg); color: var(--sky-fg); }
.ax-tile.coral { background: var(--coral-bg); color: var(--coral-fg); }
.ax-tile.amber { background: var(--amber-bg); color: var(--amber-fg); }
.ax-tile.violet { background: var(--violet-bg); color: var(--violet-fg); }
.ax-tile.rose { background: var(--rose-bg); color: var(--rose-fg); }

/* Status pill — 11.5/w700, sand idle, sage success, warm-red overdue. */
.ax-pill { padding: 6px 10px; border-radius: var(--r-pill); background: var(--sand); color: var(--ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ax-pill.success { background: var(--accent-tint); color: var(--accent-deep); }
.ax-pill.danger { background: #f7eceb; color: var(--danger); }

/* Section title — 18/w800 with the 26/12 rhythm. */
.ax-section-title { padding: 26px 2px 12px; font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; }
.ax-section-title.with-action { display: flex; align-items: center; gap: 10px; }
.ax-section-title.with-action span { flex: 1; min-width: 0; }
.ax-section-title.with-action b { color: var(--accent); font-size: 14px; font-weight: 600; }

/* _SectorScopeSegment — sand track, accent-filled selected segment. */
.ax-seg { margin-top: 16px; padding: 4px; display: flex; gap: 4px; border-radius: var(--r-inner); background: var(--sand); }
.ax-seg > span { flex: 1; height: 40px; display: grid; place-items: center; border-radius: var(--r-control); font-size: 14px; font-weight: 600; }
.ax-seg > span.on { background: var(--accent); color: #fff; }

/* Queue chips — idle sand pill, accent-filled selected. */
.ax-chips { margin-top: 12px; display: flex; gap: 8px; }
.ax-chips > span { padding: 9px 14px; border-radius: var(--r-pill); background: var(--sand); color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ax-chips > span.on { background: var(--accent); color: #fff; }

/* Manager dashboard counters (trailing value, no chevron). */
.ax-stat { min-height: 56px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.ax-stat > span { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: -.1px; }
.ax-stat > b { color: var(--ink-3); font-size: 13px; font-weight: 600; }

/* Day-brief hero + job-detail hero — the one sage panel. */
.ax-hero { padding: 18px 20px; border-radius: var(--r-hero); background: var(--accent-tint); position: relative; overflow: hidden; }
.ax-hero-top { display: flex; align-items: baseline; gap: 10px; }
.ax-hero-date { flex: 1; min-width: 0; color: var(--ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.ax-hero-context { color: var(--ink-3); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-hero-sentence { margin-top: 7px; font-size: 17px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; }
.ax-hero-foot { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.ax-hero-foot .ax-chevron { margin-inline-start: auto; color: var(--accent-deep); }
.ax-brief-pill { padding: 7px 12px; border-radius: var(--r-pill); background: var(--surface); font-size: 12.5px; font-weight: 700; }
.ax-brief-pill.danger { color: var(--danger); }
.ax-mascot { position: absolute; inset-inline-end: 12px; bottom: 10px; width: 64px; }
.ax-hero-inset { padding-inline-end: 66px; }

/* Job-detail hero */
.ax-hero.detail { padding: 22px; }
.ax-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
.ax-hero-meta { margin-top: 6px; color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.4; }
.ax-status-pill { margin-top: 16px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); background: var(--surface); font-size: 12.5px; font-weight: 700; }

/* 2×2 quick-production grid. */
.ax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ax-card { padding: 14px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.ax-card b { display: block; margin-top: 12px; font-size: 15px; font-weight: 600; letter-spacing: -.1px; line-height: 1.25; }
.ax-card small { display: block; margin-top: 4px; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }

/* Timeline row — 6pt accent dot. */
.ax-tl { padding: 13px 16px; display: flex; align-items: center; gap: 12px; }
.ax-tl i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ax-tl span { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-tl b { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.ax-inline-action { height: 52px; display: grid; place-items: center; color: var(--accent); font-size: 14px; font-weight: 600; }

/* Primary CTA — 56pt rounded rectangle, never a pill. */
.ax-cta { margin-top: 28px; height: 56px; display: grid; place-items: center; border-radius: var(--r-button); background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.1px; }

/* SectorPreviewBottomNav — floating stadium, ink capsule for the active tab. */
.ax-nav {
  position: absolute; z-index: 2; inset-inline: 16px; bottom: 36px; height: 58px;
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fcfcfa; box-shadow: var(--shadow-nav);
}
.ax-nav > span { flex: 1; display: grid; place-items: center; color: var(--ink-3); }
.ax-nav > span.on { color: #fff; }
.ax-nav > span.on::before {
  content: ''; grid-area: 1 / 1; width: 56px; height: 40px;
  border-radius: var(--r-pill); background: var(--ink);
}
.ax-nav > span > svg { grid-area: 1 / 1; }

/* Fade the bottom of a scrolling screen so it reads as cut off, not empty. */
.screen::after {
  content: ''; position: absolute; z-index: 1; inset-inline: 0; bottom: 0; height: 150px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(250, 250, 248, 0), var(--paper) 62%);
}

/* Standalone in-page fragments reuse the app primitives at 1:1 scale. */
.fragment { border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; font-size: 16px; }
.fragment .ax-row { min-height: 60px; }
.fragment > * + * { background-image: linear-gradient(var(--line), var(--line)); background-size: calc(100% - 16px) 1px; background-position: 100% 0; background-repeat: no-repeat; }

/* ==========================================================================
   /teams/join — browser invite fallback (preview only, never accepts).
   ========================================================================== */

.invite-layer { position: fixed; inset: 0; z-index: 100; overflow-y: auto; padding: 32px 20px; }
.invite-backdrop { position: fixed; inset: 0; background: var(--paper); }
.invite-card {
  width: min(520px, 100%); margin: auto; padding: 40px 36px 32px; position: relative;
  border-radius: var(--r-hero); background: var(--surface); box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.invite-brand { margin-bottom: 34px; }
.invite-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-inner); color: var(--accent); background: var(--accent-tint); font-size: 22px; font-weight: 800; }
.invite-kicker { margin-top: 26px; color: var(--accent); font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.invite-card h1 { margin-top: 12px; font-size: clamp(28px, 4vw, 34px); letter-spacing: -.045em; }
.invite-copy { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.invite-detail { margin-top: 28px; border-radius: var(--r-card); background: var(--surface-subtle); border: 1px solid var(--line); overflow: hidden; }
.invite-detail div { padding: 15px 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.invite-detail div + div { border-top: 1px solid var(--line); }
.invite-detail span { color: var(--ink-3); font-size: 13.5px; }
.invite-detail strong { font-size: 14.5px; font-weight: 700; text-align: end; }
.invite-actions { margin-top: 24px; display: grid; gap: 10px; }
.invite-help { margin-top: 22px; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.invite-store-links { margin-top: 18px; display: flex; gap: 20px; color: var(--accent); font-size: 14px; font-weight: 700; }
.invite-security { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }

/* --- Motion -------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.visible { opacity: 1; transform: none; }

/* --- Responsive ---------------------------------------------------------- */

/* Desktop phone scale is driven by viewport HEIGHT, not width: the hero and
   the Teams panel each have to fit in one screen, and the phone is 872pt tall.
   Budget per step = vh - header(68) - top gap - breathing room, / 872.
   The middle step is the default so short windows never get the big phone. */
@media (min-width: 1101px) {
  .hero .device { --s: .64; }
  .teams-section .device { --s: .66; }
  .screens .device { --s: .52; }
  /* Middle screen leads: bigger and raised, the outer two step down. */
  .screen-item:nth-child(2) { margin-top: -30px; }
  .screen-item:nth-child(2) .device { --s: .6; }
  /* Reserve the callout gutter beside the Teams phone. */
  .teams-section { gap: 48px; }
  /* Widest callout ("Yönetici sayaçları") extends 176px past the band. */
  .teams-section .stage { margin-inline-end: 184px; }
}
@media (min-width: 1101px) and (max-height: 740px) {
  .hero .device { --s: .58; }
  .teams-section .device { --s: .6; }
}
/* Capped at .70 on purpose. The hero copy column is ~500pt tall, so a much
   taller phone makes align-items:center push the copy down and reopen the
   header gap the top margin just closed. Leftover height below the hero is
   fine — it reveals the next section and invites the scroll. */
@media (min-width: 1101px) and (min-height: 900px) {
  .hero .device { --s: .7; }
  .teams-section .device { --s: .74; }
}

@media (max-width: 1100px) {
  :root { --page: min(880px, calc(100% - 40px)); }
  .hero, .teams-section { grid-template-columns: 1fr; gap: 48px; }
  .hero { margin-top: 64px; justify-items: start; }
  .hero .device, .teams-section .device { --s: .68; }
  .hero .device, .teams-section .stage { justify-self: center; }
  /* No gutter for callouts in a single column — they would overlap the copy. */
  .anno { display: none; }
  .teams-section .stage { margin-inline-end: 0; }
  /* Narrow gutters: keep the light pool inside the page so it never leans on
     body's overflow clip to stay off the scroll width. */
  .device::before { inset: 8% -6% -4% -6%; }
  .teams-section { padding: 48px 36px; }
  .feature-row { grid-template-columns: 60px minmax(0, 1fr); }
  .feature-proof { grid-column: 2; }
  .security { grid-template-columns: 52px minmax(0, 1fr); }
  .security p { grid-column: 2; }
  /* Strip scrolls inside the page column — a vw-based full-bleed would
     overflow the document by the scrollbar width. */
  .screens { padding-bottom: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .screen-item { flex: none; width: 260px; scroll-snap-align: center; }
  .screens .device { --s: .62; }
}

@media (max-width: 720px) {
  :root { --page: calc(100% - 32px); }
  .nav-links { display: none; }
  .site-header { gap: 16px; }
  .site-header .brand { margin-inline-end: auto; }
  .hero { margin-top: 44px; }
  .hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .hero-actions { gap: 18px; }
  .trust-row { gap: 24px; }
  .section, .statement, .features, .teams-section, .security, .cta-stage { margin-top: 92px; }
  .teams-section { padding: 36px 22px; border-radius: var(--r-card); }
  .final-cta { padding: 64px 24px; border-radius: var(--r-card); }
  .feature-row { padding: 34px 0; gap: 8px 20px; }
  .store-button { min-width: 0; flex: 1 1 160px; }
  footer { gap: 18px; }
  footer > div { margin-inline-start: 0; }
  .invite-card { padding: 30px 22px 26px; border-radius: var(--r-card); }
}

/* Phone scale steps below are the largest that still clear the page gutters:
   413px frame × scale must stay under (100vw - 32px). */
@media (max-width: 720px) {
  .hero .device, .teams-section .device { --s: .78; }
  .screens .device { --s: .64; }
  .screen-item { width: 268px; }
}

@media (max-width: 400px) {
  .hero .device, .teams-section .device { --s: .72; }
}

@media (max-width: 360px) {
  .hero .device, .teams-section .device { --s: .62; }
  .screens .device { --s: .56; }
  .screen-item { width: 236px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button, .store-button, .site-header { transition: none; }
}