/* Stokes site.
   Product-page layout: full-width bands that alternate page and canvas colours, large tight
   headlines, one accent, pill buttons, no shadows. Type is the platform's own UI face
   (SF Pro on Apple devices, Segoe UI Variable on Windows), so nothing is downloaded.
   Two themes from one set of tokens; "auto" follows the system. */

:root {
  --page: #ffffff;        /* default band */
  --canvas: #f5f5f7;      /* alternate band, footer */
  --tile: #f5f5f7;        /* a tile on the page band */
  --tile-alt: #ffffff;    /* a tile on the canvas band */
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --hair: #d2d2d7;
  --accent: #087a6d;      /* the app's teal, darkened for text contrast on white */
  --accent-hover: #066a5f;
  --on-accent: #ffffff;
  --link: #08715f;
  --code: #f5f5f7;
  --bar: rgba(255, 255, 255, .78);
  --veil: rgba(0, 0, 0, .32);
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #000000; --canvas: #111113; --tile: #161618; --tile-alt: #1d1d1f;
    --ink: #f5f5f7; --ink-2: #d2d2d7; --muted: #a1a1a6; --hair: #38383c;
    --accent: #2ec4ae; --accent-hover: #4dd3bf; --on-accent: #00211c; --link: #4fd3bf;
    --code: #161618; --bar: rgba(22, 22, 23, .78); --veil: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #000000; --canvas: #111113; --tile: #161618; --tile-alt: #1d1d1f;
  --ink: #f5f5f7; --ink-2: #d2d2d7; --muted: #a1a1a6; --hair: #38383c;
  --accent: #2ec4ae; --accent-hover: #4dd3bf; --on-accent: #00211c; --link: #4fd3bf;
  --code: #161618; --bar: rgba(22, 22, 23, .78); --veil: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 17px/1.47 var(--text); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 30; padding: 8px 14px; border-radius: 980px;
  background: var(--ink); color: var(--page); font-size: 14px; }
.skip:focus { top: 8px; }

/* Global bar */
.bar { position: sticky; top: 0; z-index: 20; background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--hair) 60%, transparent); }
.bar-in { max-width: 1024px; margin: 0 auto; padding: 0 22px; height: 52px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font: 600 19px/1 var(--display); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 6px; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; font-size: 13px; letter-spacing: -.005em; }
.nav a, .link-btn { color: var(--ink-2); }
.nav a:hover, .link-btn:hover { color: var(--ink); text-decoration: none; }
.link-btn { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.theme { display: inline-flex; padding: 2px; border-radius: 980px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.theme button { width: 28px; height: 24px; display: grid; place-items: center; border: 0; background: none;
  color: var(--muted); border-radius: 980px; cursor: pointer; }
.theme svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.theme button:hover { color: var(--ink); }
.theme button[aria-checked="true"] { background: var(--page); color: var(--ink); box-shadow: 0 0 0 .5px var(--hair); }

/* Bands */
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.band { padding: 112px 0; background: var(--page); }
.band.alt { background: var(--canvas); }
.headline { font-size: clamp(34px, 5vw, 56px); line-height: 1.07; letter-spacing: -.012em; }
.intro { font-size: clamp(19px, 1.9vw, 21px); line-height: 1.43; color: var(--muted); max-width: 36em; margin: 20px 0 0; }
.intro strong { color: var(--ink); font-weight: 600; }
.center { text-align: center; }
.center .intro { margin-left: auto; margin-right: auto; }

/* Buttons */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  border-radius: 980px; font: 400 17px/1 var(--text); letter-spacing: -.011em; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.pill:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.pill.outline { background: transparent; color: var(--link); }
.pill.outline:hover { background: var(--accent); color: var(--on-accent); }
.pill.small { min-height: 34px; padding: 0 16px; font-size: 14px; }
.pill.quiet { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: transparent; color: var(--ink); }
.pill.quiet:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* Hero */
.hero { padding: 88px 0 96px; text-align: center; }
.product { font: 600 clamp(22px, 2.4vw, 28px)/1.1 var(--display); letter-spacing: .004em; margin: 0 0 12px; }
.hero h1 { font-size: clamp(42px, 7vw, 80px); line-height: 1.04; letter-spacing: -.015em; max-width: 12em; margin: 0 auto; }
.hero .sub { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.33; color: var(--ink-2); max-width: 30em; margin: 22px auto 0; letter-spacing: .002em; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.terms { font-size: 14px; color: var(--muted); margin: 18px 0 0; }

.film { max-width: 1080px; margin: 64px auto 0; padding: 0 22px; }
.film video { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--tile);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hair) 70%, transparent); }
.film figcaption { font-size: 14px; color: var(--muted); margin-top: 16px; }

/* Gallery of the five setup steps */
.gallery { margin-top: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; }
.gallery::-webkit-scrollbar { display: none; }
.track { list-style: none; margin: 0; display: flex; gap: 20px; width: max-content;
  padding: 0 max(22px, calc((100vw - 980px) / 2)); }
.slide { width: min(78vw, 620px); scroll-snap-align: center; background: var(--tile-alt); border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column; }
.slide p { margin: 0; padding: 30px 32px 26px; font-size: 19px; line-height: 1.37; color: var(--muted); }
.slide p strong { color: var(--ink); font-weight: 600; }
.slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: auto; }
.gallery-nav { display: flex; justify-content: flex-end; gap: 14px; margin-top: 24px; }
.gallery-nav[hidden] { display: none; }
.gallery-nav button { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); transition: background-color .2s ease, opacity .2s ease; }
.gallery-nav button:hover { background: color-mix(in srgb, var(--ink) 15%, transparent); }
.gallery-nav button:disabled { opacity: .35; cursor: default; }
.gallery-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Feature tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.tile { border-radius: 28px; overflow: hidden; background: var(--tile); display: flex; flex-direction: column; }
.tile .copy { padding: 40px 40px 0; }
.tile h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.005em; }
.tile p { color: var(--muted); margin: 12px 0 0; max-width: 30em; }
.tile img { margin-top: auto; width: 100%; }
.tile.dark { background: #17191e; color: #f5f5f7; }
.tile.dark p { color: #a1a1a6; }
/* The viewport shots fade into the tile, so their edges never show. */
.tile.dark img { -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 54%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 54% at 50% 54%, #000 50%, transparent 100%); }
.tile.wide { grid-column: 1 / -1; }
.tile.wide .copy { text-align: center; padding-top: 48px; }
.tile.wide .copy p { margin-left: auto; margin-right: auto; }
.tile.wide img { width: calc(100% - 80px); margin: 40px auto 40px; border-radius: 12px; }
.tile.dark img.figure { -webkit-mask-image: none; mask-image: none; width: 100%; margin: 24px 0 0; border-radius: 0; }

/* Specs */
.specs { margin: 48px 0 0; border-top: 1px solid var(--hair); }
.specs > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.specs dt { font: 600 19px/1.3 var(--display); }
.specs dd { margin: 0; color: var(--ink-2); max-width: 40em; }
.yes { color: var(--accent); font-weight: 600; }
.no { color: var(--muted); font-weight: 600; }

/* Install: segmented control over two snippets */
.seg { display: inline-flex; padding: 3px; border-radius: 980px; margin-top: 36px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.seg[hidden] { display: none; }
.seg button { font: 400 15px/1 var(--text); letter-spacing: -.01em; color: var(--ink-2); background: none; border: 0;
  padding: 9px 20px; border-radius: 980px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--page); color: var(--ink); box-shadow: 0 0 0 .5px var(--hair); }
.panels { display: grid; gap: 20px; margin-top: 28px; }
.panel { background: var(--tile); border-radius: 28px; padding: 34px 36px 30px; text-align: left; }
.panel[hidden] { display: none; }
.panel h3 { font-size: 24px; letter-spacing: -.005em; }
.panel > p { color: var(--muted); margin: 8px 0 20px; }
.panel .more { margin: 4px 0 0; }

/* Code */
code, pre, kbd { font-family: var(--mono); letter-spacing: 0; }
:not(pre) > code { font-size: .86em; background: var(--code); padding: .12em .4em; border-radius: 6px; }
.alt :not(pre) > code, .panel :not(pre) > code { background: color-mix(in srgb, var(--ink) 7%, transparent); }
pre { background: var(--code); border-radius: 14px; padding: 18px 20px; overflow-x: auto; line-height: 1.6; margin: 0 0 1.4em; font-size: 13.5px; }
.panel pre { background: var(--page); }
.alt .panel { background: var(--tile-alt); }
.alt .panel pre { background: var(--canvas); }
.highlight .c, .highlight .c1, .highlight .cm { color: var(--muted); }
.highlight .s, .highlight .s1, .highlight .s2 { color: var(--accent); }
.highlight .nv, .highlight .vg, .highlight .k { color: var(--link); }

/* Guides */
.guides { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.guides li { border-top: 1px solid var(--hair); }
.guides a { display: block; padding: 22px 0 26px; color: var(--ink); }
.guides a:hover { text-decoration: none; }
.guides a:hover strong { color: var(--link); }
.guides strong { display: block; font: 600 19px/1.3 var(--display); transition: color .2s ease; }
.guides span { display: block; color: var(--muted); margin-top: 6px; font-size: 15px; }

/* FAQ */
.faq { margin-top: 40px; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font: 600 19px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details p { margin: 0 0 24px; color: var(--ink-2); max-width: 44em; }

/* Article pages */
.prose { max-width: 720px; margin: 0 auto; padding: 56px 22px 96px; }
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 28px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 8px; }
.prose h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.08; letter-spacing: -.012em; margin: 0 0 28px; }
.prose h2 { font-size: 28px; line-height: 1.15; margin: 2.2em 0 .6em; letter-spacing: -.008em; }
.prose h3 { font-size: 21px; margin: 1.8em 0 .5em; }
.prose p, .prose li { color: var(--ink-2); }
.prose li { margin: .3em 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose .crumbs a { text-decoration: none; }
.prose img { border-radius: 14px; margin: 32px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0 1.8em; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 3em 0 1.4em; }
.prose hr + p { font-size: 14px; color: var(--muted); }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--hair); color: var(--muted); }

/* Footer */
.foot { background: var(--canvas); color: var(--muted); font-size: 12px; line-height: 1.5; letter-spacing: -.005em; }
.foot-in { max-width: 1024px; margin: 0 auto; padding: 20px 22px 28px; }
.foot p { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.foot a, .foot .link-btn { color: var(--ink-2); }
.foot a:hover, .foot .link-btn:hover { color: var(--ink); text-decoration: underline; }
.foot-links { list-style: none; margin: 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; row-gap: 6px; }
.foot-links li + li::before { content: ""; display: inline-block; width: 1px; height: 11px; background: var(--hair); margin: 0 10px; vertical-align: -1px; }

/* Contact dialog */
dialog.contact { border: 0; border-radius: 22px; padding: 32px 32px 24px; width: min(440px, calc(100% - 32px));
  background: var(--page); color: var(--ink); overscroll-behavior: contain;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hair) 60%, transparent), 0 24px 60px rgba(0, 0, 0, .22); }
dialog.contact::backdrop { background: var(--veil); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.contact h2 { font-size: 28px; letter-spacing: -.01em; margin-bottom: 10px; }
dialog.contact p { color: var(--muted); margin: 0 0 22px; }
.mailrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 8px 8px 18px;
  border-radius: 14px; background: var(--canvas); }
.mail { font-size: 17px; font-weight: 500; color: var(--link); overflow-wrap: anywhere; }
.hint { font-size: 13px !important; color: var(--accent) !important; margin: 10px 0 0 !important; }
.actions { display: flex; justify-content: flex-end; margin-top: 22px; }

/* Analytics consent: a small card at the foot of the window, both choices equal. */
.consent { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 16px; max-width: 460px; margin: 0 auto;
  padding: 22px 24px 20px; border-radius: 22px; background: var(--page); color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hair) 60%, transparent), 0 16px 48px rgba(0, 0, 0, .18); }
.consent[hidden] { display: none; }
.consent h2 { font-size: 19px; letter-spacing: -.01em; margin: 0 0 6px; }
.consent p { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 0 0 16px; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .pill { flex: 1; }

/* Grid children may shrink below their content (long code lines scroll inside the panel). */
.tiles > *, .specs > div > *, .guides > *, .panels > * { min-width: 0; }

@media (max-width: 860px) {
  .band { padding: 80px 0; }
  .tiles { grid-template-columns: 1fr; }
  .tile .copy { padding: 32px 28px 0; }
  .tile.wide img { width: calc(100% - 40px); margin: 28px auto 20px; }
  .specs > div { grid-template-columns: 1fr; gap: 6px; }
  .guides { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bar-in { gap: 16px; padding: 0 16px; height: 48px; }
  .nav { gap: 16px; }
  .nav a[href*="#guides"], .nav a[href*="#install"] { display: none; }
  .wrap, .film { padding: 0 16px; }
  .hero { padding: 56px 0 72px; }
  .film { margin-top: 48px; }
  .film video { border-radius: 12px; }
  .track { gap: 12px; padding: 0 16px; }
  .slide { width: 84vw; border-radius: 22px; }
  .slide p { padding: 24px 24px 20px; font-size: 17px; }
  .tile { border-radius: 22px; }
  .panel { padding: 26px 20px 22px; border-radius: 22px; }
  .seg button { padding: 9px 16px; }
  .prose { padding: 40px 16px 72px; }
}
@media (max-width: 380px) { .brand span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}