/*
 * Gently's website: one stylesheet for the home page, the privacy policy and support. It is direction A "Halka"
 * (the ring) of the landing round, as he picked it (design/landing/ROUND2.md on BRIEF.md and its Round 1b).
 * Tokens, grain and mesh are the app's (src/theme/tokens.ts); the ring's numbers are in BRIEF.md.
 *
 * Shared foundation first (tokens, base, nav, footer, part wrapper, ring, phone, pill, button, art), then the parts
 * in page order (A1, A3, A4, A5, A6, A7, A8, A10, A9, A11; each keeps its data-part code), then the reading pages.
 *
 * Motion rules (his phone stalled once on animated SVG drawing; BUILD.md, traps): only transform and opacity
 * move. Nothing animates an SVG attribute, a filter or a background position. The rings are drawn once; their
 * states change by cross-fading stacked, pre-drawn layers. Motion runs only under html.mo (JavaScript on, no
 * ?still, no Reduce Motion); html.rm is the gentler Reduce Motion form (fades of 200ms, no movement); with
 * ?still or JavaScript off every part shows its rest state. No third-party request: the fonts and pictures are
 * in fonts/ and img/.
 */

@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif-400.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/plus-jakarta-sans-400.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/plus-jakarta-sans-600.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- tokens: day (web/site.css + the app's) */
:root {
  --ground: #F0F4F9;
  --ink: #131A2B;
  --lead: #3A506F;         /* the ring behind her */
  --off: #4F576B;
  --track: #CFDAEA;
  --m2: #CFDAEA;           /* the ring ahead */
  --pt: #1FA870;
  --acc: #1FA870;          /* the current phase */
  --accL: #3DD598;
  --card: #FFFFFF;
  --line: rgba(58, 80, 111, .14);
  --glass: rgba(255, 255, 255, .62);
  --panel: rgba(255, 255, 255, .72);
  --sel: rgba(255, 255, 255, .94);   /* the picked chip (the app's sel) */
  --prs: rgba(58, 80, 111, .09);     /* a finger on it (the app's prs) */
  --s1: rgba(108, 146, 216, .30);
  --s2: rgba(95, 196, 212, .22);
  --s3: rgba(31, 168, 112, .12);
  --grain-op: .45;
  --grain-blend: soft-light;
  --draft: #8A5A00;
  --btn-a: #3DD598;
  --btn-b: #1FA870;
  --btn-ink: #0C3B26;
  --phone-shadow: 0 30px 60px rgba(19, 26, 43, .16);
  --blob-op: .16;
  --tk-op: .28;             /* the current phase's light green track */
  --knit-op: .4;            /* the knit band under A8 and A9 (about 45%, kept where its darkest fold still gives AA) */
  --knit-blend: multiply;
  --off-knit: #3E4557;      /* --off a step darker on the band: 5:1 on its darkest fold */

  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sweep: cubic-bezier(.45, .05, .55, .95);   /* the app's sweep, for the ring */
  --enter: cubic-bezier(.22, 1, .36, 1);       /* entries */
  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

/* ---------------------------------------------------------------- tokens: night (follows the phone; ?look forces) */
@media (prefers-color-scheme: dark) {
  :root:not([data-look="day"]) {
    --ground: #0A111F;
    --ink: #F3F6FB;
    --lead: #9DB2D2;
    --off: #A3B1C8;
    --track: #1F3760;
    --m2: #1F3760;
    --pt: #2FC489;
    --acc: #2FC489;
    --card: #131C30;
    --line: rgba(255, 255, 255, .10);
    --glass: rgba(255, 255, 255, .07);
    --panel: rgba(19, 28, 48, .72);
    --sel: rgba(255, 255, 255, .2);
    --prs: rgba(255, 255, 255, .1);
    --s1: rgba(43, 82, 162, .48);
    --s2: rgba(27, 127, 150, .30);
    --s3: rgba(31, 168, 112, .16);
    --grain-op: .4;
    --grain-blend: overlay;
    --draft: #F2C66D;
    --btn-a: #45E0A3;
    --btn-b: #22B479;
    --phone-shadow: 0 30px 60px rgba(0, 0, 0, .45);
    --blob-op: .22;
    --tk-op: .32;
    --knit-op: .1;
    --knit-blend: soft-light;
    --off-knit: #A3B1C8;
    color-scheme: dark;
  }
}
:root[data-look="night"] {
  --ground: #0A111F;
  --ink: #F3F6FB;
  --lead: #9DB2D2;
  --off: #A3B1C8;
  --track: #1F3760;
  --m2: #1F3760;
  --pt: #2FC489;
  --acc: #2FC489;
  --card: #131C30;
  --line: rgba(255, 255, 255, .10);
  --glass: rgba(255, 255, 255, .07);
  --panel: rgba(19, 28, 48, .72);
  --sel: rgba(255, 255, 255, .2);
  --prs: rgba(255, 255, 255, .1);
  --s1: rgba(43, 82, 162, .48);
  --s2: rgba(27, 127, 150, .30);
  --s3: rgba(31, 168, 112, .16);
  --grain-op: .4;
  --grain-blend: overlay;
  --draft: #F2C66D;
  --btn-a: #45E0A3;
  --btn-b: #22B479;
  --phone-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  --blob-op: .22;
  --tk-op: .32;
  --knit-op: .1;
  --knit-blend: soft-light;
  --off-knit: #A3B1C8;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
/* the ground continues past both ends when the page is pulled (his rule: no blank area on overscroll) */
html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
.mo { scroll-behavior: smooth; }
body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;          /* clip, not hidden: A3's sticky stage needs no scroll container above it */
  isolation: isolate;
}
/*
 * The soft colour mesh and the grain, drawn once and scrolling with the page. The layer starts 40vh above the
 * page's top, so a pull past the top shows the mesh going on; the gradients sit where web/site.css puts them
 * (its box was min(1100px, 140vh) tall from the top). Both fade out at the bottom, so there is no edge.
 */
body::before, body::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -40vh;
  height: calc(min(1100px, 140vh) + 40vh);
  pointer-events: none;
  z-index: -1;
}
body::before {
  background:
    radial-gradient(48% min(506px, 64.4vh) at 10% 40vh, var(--s1), transparent 70%),
    radial-gradient(42% min(440px, 56vh) at 96% calc(40vh + min(198px, 25.2vh)), var(--s2), transparent 70%),
    radial-gradient(50% min(396px, 50.4vh) at 46% calc(40vh + min(1056px, 134.4vh)), var(--s3), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
body::after {
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--lead) 55%, transparent); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--acc) 30%, transparent); }
img, svg { max-width: 100%; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2 { font-weight: 400; font-family: var(--serif); text-wrap: balance; letter-spacing: -.01em; }
h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
.nw { white-space: nowrap; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

.skip { position: absolute; left: var(--gl); top: -60px; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 10px; z-index: 5; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

/* the content column: the phone's width less the gutters, at most 560px; a 1080px stage from 900px */
.in { width: min(100% - var(--gl) - var(--gr), 560px); margin-inline: auto; }
@media (min-width: 900px) { .in { width: min(100% - 80px, 1080px); } }

/* every part can be lifted whole into B (same wrapper, same air) */
.part { padding-block: 56px; }
@media (min-width: 900px) { .part { padding-block: 72px; } }

.h1 { font-size: clamp(46px, 12.6vw, 52px); line-height: 1.02; }
.h2 { font-size: clamp(36px, 9.8vw, 40px); line-height: 1.05; }
.lede { color: var(--off); max-width: 36ch; }
.small { font-size: 13px; line-height: 1.45; color: var(--off); }

/* ---------------------------------------------------------------- the nav: the mark and the name, and Privacy */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
/* the mark: shared/mark-day.svg and mark-night.svg, one shown by look (the next logo change swaps those two files) */
.mk { display: block; width: 26px; height: 26px; flex: none; }
.mk img { display: block; width: 26px; height: 26px; }
.brand span { font: 600 19px/1 var(--sans); letter-spacing: -.01em; }
.navlink { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--off); }
.navlink:hover { color: var(--ink); }

/* ---------------------------------------------------------------- the footer (identical on all six pages) */
.foot {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-block: 28px calc(env(safe-area-inset-bottom, 0px) + 40px);
  display: grid;
  gap: 16px;
  font-size: 14.5px;
  color: var(--off);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; }
.foot p { max-width: 60ch; }

/* ---------------------------------------------------------------- the store pill (no badge until the app is live) */
.store {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px;
  font: 600 15px/1 var(--sans);
  color: var(--ink);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.store i { display: none; } /* round 1b: no green dot anywhere now that the logo has none */

/* ---------------------------------------------------------------- the main button: the app's green pill */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
  color: var(--btn-ink);
  font: 600 17px/1 var(--sans);
  text-decoration: none;
}
/* pressed: a step darker and a touch smaller, 120ms (his rule: "Tıklama hissiyatı yaratalım") */
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, .1); opacity: 0; z-index: -1; transition: opacity .12s ease; }
.btn:active::after { opacity: 1; }
.mo .btn { transition: transform .12s ease; }
.mo .btn:active { transform: scale(.98); }
.btn:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* a small text button (A1's "See how it goes") */
.tbtn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  border-radius: 999px;
  font: 600 15px/1 var(--sans);
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--lead) 45%, transparent);
}
.tbtn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--prs); opacity: 0; z-index: -1; transition: opacity .12s ease; }
.tbtn:active::before { opacity: 1; }
.mo .tbtn { transition: transform .12s ease; }
.mo .tbtn:active { transform: scale(.98); }

/* ---------------------------------------------------------------- the app's line drawings (inlined; tinted here) */
.art { display: block; overflow: visible; }
.art .line :is(path, circle, ellipse, rect) { stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; fill: none; }
.art .blob path { fill: var(--acc); opacity: var(--blob-op); }

/* ---------------------------------------------------------------- a real app frame in a plain phone shape */
.ph {
  --w: 260px;
  position: relative;
  width: var(--w);
  aspect-ratio: 600 / 1304;
  border-radius: calc(var(--w) * 44 / 300);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--phone-shadow);
  flex: none;
}
.ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the day picture in the day look, the night picture in the night look (phone frames and the mark) */
:is(.ph, .mk) .n { display: none; }
:root[data-look="night"] :is(.ph, .mk) .d { display: none; }
:root[data-look="night"] :is(.ph, .mk) .n { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-look="day"]) :is(.ph, .mk) .d { display: none; }
  :root:not([data-look="day"]) :is(.ph, .mk) .n { display: block; }
}

/* ---------------------------------------------------------------- the ring (the app's Home ring, inline SVG) */
/*
 * Round 1b (the new logo): no point anywhere. The colour rule: behind her --lead, ahead --m2, the current phase a
 * light green track (--acc at 28% by day, 32% at night) with its passed part in solid --acc, from the phase's start
 * to the end of today, in day steps.
 * .ring is a square of --rs. Inside, stacked: .rg (stroke segments on viewBox -115 -115 230 230: A3) or .arcs
 * (the logo's five filled arcs from design/logo/final/arcs.json, one layer each: A1, A11), then .ctr ("DAY" over
 * the number). Stroke classes: .ld behind, .m2 ahead, .tk the track, .gr the passed part. Fill classes on the arcs:
 * .f-ld, .f-m2, .f-ac.
 */
.ring { --rs: 300px; position: relative; width: var(--rs); height: var(--rs); flex: none; }
.ring > svg, .ring > .arcs, .ring > .ctr { position: absolute; inset: 0; width: 100%; height: 100%; }
.rg path { fill: none; stroke-width: 14; stroke-linecap: round; }
.ld { stroke: var(--lead); }
.m2 { stroke: var(--m2); }
.gr { stroke: var(--acc); }
.tk { stroke: var(--acc); stroke-opacity: var(--tk-op); }
.arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.f-ld { fill: var(--lead); }
.f-m2 { fill: var(--m2); }
.f-ac { fill: var(--acc); }
.ctr { display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ctr small { display: block; font: 600 max(11px, calc(var(--rs) * .04))/1 var(--sans); letter-spacing: .14em; color: var(--off); margin-left: .14em; }
.ctr b { display: block; font: 600 calc(var(--rs) * .3)/.92 var(--sans); letter-spacing: -.035em; margin-top: calc(var(--rs) * .02); font-variant-numeric: tabular-nums; }

/*
 * The opening (A1 on load, A11 when it comes into view) = the app's new opening (LAUNCH.md, his pick A), in the
 * numbers of BRIEF Round 1b: the arcs arrive one by one, each from 6% further out to its place with its opacity,
 * 220ms, 110ms apart (.o1 … .o5); the green one comes last and gives a small pop (1 → 1.06 → 1, 180ms); meanwhile
 * the whole ring turns in from -40° to 0°, fast first and easing to rest, about 1.1s; then "DAY" over the number
 * fades in (300ms). Each arc is its own full-square layer, so it scales about the ring's centre. Transform and
 * opacity only.
 */
@keyframes turn-in { from { transform: rotate(-40deg); } to { transform: rotate(0deg); } }
@keyframes arc-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes arc-pop {
  0% { opacity: 0; transform: scale(1.06); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  55% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  77.5% { opacity: 1; transform: scale(1.06); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.mo .build .arcs { animation: turn-in 1.1s cubic-bezier(.16, 1, .3, 1) var(--t0, .15s) both; }
.mo .build .arc { animation: arc-in .22s cubic-bezier(.2, .8, .2, 1) both; }
.mo .build .o1 { animation-delay: calc(var(--t0, .15s) + 0s); }
.mo .build .o2 { animation-delay: calc(var(--t0, .15s) + .11s); }
.mo .build .o3 { animation-delay: calc(var(--t0, .15s) + .22s); }
.mo .build .o4 { animation-delay: calc(var(--t0, .15s) + .33s); }
.mo .build .o5 { animation: arc-pop .4s linear calc(var(--t0, .15s) + .44s) both; }   /* 220ms in, then the 180ms pop */
.mo .build .ctr { animation: fade-in .3s ease calc(var(--t0, .15s) + 1.1s) both; }
.rm .build { animation: fade-in .2s ease both; }   /* Reduce Motion: one 200ms fade, the ring at rest */

/* ================================================================ A1, the opening */
.a1 { padding-top: 8px; text-align: center; }
.a1 .in { display: flex; flex-direction: column; align-items: center; }
.a1 .ring { --rs: min(78vw, 360px); }
.a1 h1 { margin-top: 26px; max-width: 12ch; }
.a1 .lede { margin-top: 14px; max-width: 31ch; }
.a1 .store { margin-top: 24px; }
.a1 .procs { margin-top: 12px; max-width: 34ch; }
.a1 .tbtn { margin-top: 10px; }
br.dk { display: none; }        /* the desktop h1's line break after "are," */
.a1-text { display: contents; }   /* phones: the text sits in the column; from 900px it is the left column */


@media (min-width: 900px) {
  .a1 { text-align: left; padding-top: 32px; }
  .a1 .in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "t r"; align-items: center; column-gap: 64px; }
  .a1 .ring { grid-area: r; --rs: min(36vw, 420px); justify-self: center; }
  .a1-text { grid-area: t; display: flex; flex-direction: column; align-items: flex-start; }
  .a1 h1 { margin-top: 0; font-size: clamp(52px, 5.2vw, 68px); max-width: none; text-wrap: wrap; }
  .a1 .dk { display: inline; }
  .a1 .tbtn { margin-left: -14px; }
}

/* ================================================================ A3, the six weeks, phase by phase */
/*
 * Rest state (JavaScript off, ?still): the five phases as a list, each card with its own small ring (that phase in
 * green, those before it in lead) and its drawing; the big ring is not shown.
 * html.sc: the track is the sticky stage plus five steps of 55vh; the script sets the step (.sg, .tf and .cap get
 * .now/.on, .done/.past). Ring layers per phase, stacked: .b ahead (m2), .g now (solid green), .l behind (lead).
 */
.a3 { scroll-margin-top: 16px; }
.a3-head .lede { margin-top: 14px; }
.a3-track { position: relative; margin-top: 28px; }
.sc .a3-track { height: 375vh; height: 375svh; margin-top: 8px; }   /* the stage (100) and five steps of 55 */
.a3-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc .a3-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  justify-content: center;
  padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.a3-left, .a3-right { display: flex; flex-direction: column; align-items: center; width: 100%; }
.a3-note { font-size: 13px; line-height: 1.45; color: var(--off); max-width: 30ch; }
.a3-left .ring { --rs: clamp(150px, min(70vw, 300px), calc(100svh - 450px)); margin-top: 14px; }
html:not(.sc) .a3-left .ring { display: none; }

.sg .g, .sg .l { opacity: 0; }
.sg.now .g, .sg.done .l { opacity: 1; }
.sg.now .b, .sg.done .b, .sg.done .g { opacity: 0; }
/* a step forward: the layer above fades in (240ms) and the one under it goes when the fade is done, so no fringe
   shows at its edges; a step back (.back): the layer below is there at once and the one above fades out */
.sc .sg .g, .sc .sg .l { transition: opacity .24s ease; }
.sc .sg.now .b, .sc .sg.done .b, .sc .sg.done .g { transition: opacity 0s linear .24s; }
.sc .ring.back .sg .b, .sc .ring.back .sg.now .g { transition: none; }
.rm .sg .g, .rm .sg .l { transition-duration: .2s; }
.rm .sg.now .b, .rm .sg.done .b, .rm .sg.done .g { transition-delay: .2s; }

/* the time frame in the centre, in place of "DAY N": the label as "DAY" was drawn, over the app's big number */
.ctr.tfs { display: grid; place-items: center; }
.tf { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
.ctr .tf b, .cap-ring .ctr b { font-size: calc(var(--rs) * .27); letter-spacing: -.03em; }
.sc .tf { opacity: 0; transform: translateY(6px); }
.sc .tf.past { transform: translateY(-6px); }
.sc .tf.on { opacity: 1; transform: none; }
.mo .tf { transition: opacity .24s var(--enter), transform .24s var(--enter); }
.rm .tf, .rm .tf.past { transform: none; transition: opacity .2s ease; }

.caps { width: 100%; margin-top: 20px; display: grid; gap: 12px; text-align: left; }
.cap { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-radius: 24px; padding: 18px 20px 20px; }
.sc .caps { gap: 0; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-radius: 24px; padding: 16px 20px 20px; }
.sc .cap { grid-area: 1 / 1; background: none; box-shadow: none; border-radius: 0; padding: 0; opacity: 0; transform: translateY(8px); }
.sc .cap.past { transform: translateY(-8px); }
.sc .cap.on { opacity: 1; transform: none; }
.mo .cap { transition: opacity .3s var(--enter), transform .3s var(--enter); }
.rm .cap, .rm .cap.past { transform: none; transition: opacity .2s ease; }
.cap-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cap-top .art { width: 56px; height: 56px; flex: none; }
.cap-ring { --rs: 88px; }
.sc .cap-ring { display: none; }
.sc .cap-top { margin-bottom: 6px; }
.cap-t { font: 400 28px/1.08 var(--serif); letter-spacing: -.005em; }
/* the guide's own line, in the ink; what Gently does follows in --off */
.cap-g { margin-top: 10px; font-size: 18px; line-height: 1.42; font-weight: 600; color: var(--ink); }
.cap-a { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--off); }
.a3-first { margin-top: 12px; }
.a3-src { margin-top: 24px; max-width: 46ch; }
.sc .a3-src { margin-top: 0; }

@media (min-width: 900px) {
  .a3-head { text-align: center; }
  .a3-head .lede { margin-inline: auto; }
  .sc .a3-stage { flex-direction: row; justify-content: center; align-items: center; gap: 72px; text-align: left; }
  .sc .a3-left { width: auto; }
  .sc .a3-right { width: min(440px, 40vw); align-items: flex-start; }
  .a3-left .ring { --rs: clamp(240px, min(34vw, 400px), calc(100svh - 200px)); }
  .a3-note { text-align: center; }
  .sc .caps { margin-top: 0; }
  html:not(.sc) .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
  .cap-t { font-size: 32px; }
  .a3-src { text-align: center; margin-inline: auto; }
}

/* ================================================================ A4, the questions that come at 2 a.m. */
.a4-head .art { width: 120px; height: 120px; margin-left: -8px; }
.a4 h2 { margin-top: 10px; }
.a4-head .lede { margin-top: 14px; }
.qa { margin-top: 26px; border-top: 1px solid var(--line); }
.qa-row { border-bottom: 1px solid var(--line); }
.qa-h { margin: 0; font: inherit; }
.qa-q {
  position: relative; isolation: isolate;
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0;
  border: 0; background: none; text-align: left; cursor: pointer;
  font: 600 17px/1.35 var(--sans); color: var(--ink);
}
/* a finger on the row: a breath of colour (his rule: a tap feels like a tap) */
.qa-q::before { content: ""; position: absolute; inset: 4px -10px; border-radius: 14px; background: var(--prs); opacity: 0; z-index: -1; transition: opacity .12s ease; }
.qa-q:active::before { opacity: 1; }
.qa-q[aria-expanded="true"] .plus { transform: rotate(45deg); }
.qa-a { padding: 0 30px 22px 0; }
.qa-a .b1 { font: 400 24px/1.2 var(--serif); letter-spacing: -.005em; }
.qa-a .b2 { margin-top: 8px; font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.qa-a .b3 { margin-top: 6px; font-size: 17px; line-height: 1.5; color: var(--off); }
/* an answer's box opens at once (no height animation); its three beats come in, 300ms apart */
@keyframes beat { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mo .qa-a p { animation: beat .38s var(--enter) both; }
.mo .qa-a .b2 { animation-delay: .3s; }
.mo .qa-a .b3 { animation-delay: .6s; }
.rm .qa-a p { animation: fade-in .2s ease both; }
.qa-note { margin-top: 16px; }
@media (min-width: 900px) {
  .a4 .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 64px; align-items: start; }
  .qa { margin-top: 0; }
}

/* ================================================================ A5, one page for your surgeon */
/*
 * Three real screens of today's build at once (Round 2b): the report in front and larger, Home behind on the left,
 * Photos behind on the right (scaled .9, turned -5° and 5°, about 24px lower). Both looks show these day screens for
 * now; at night they keep their own colours inside the frame's 1px --line border. A side phone's turned box reaches about .533 of its width
 * from its centre, so its centre is kept that far (plus 2px) inside the column: nothing leaves the screen.
 */
.a5 .in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.a5 .lede { margin-top: 14px; max-width: 34ch; }
.a5-stage {
  /* phones: the stage takes the screen's width so both side screens show about half (his note: "aynı anda");
     each side phone stays 6px inside the screen's edge */
  --cw: min(54vw, 270px);
  --sw: min(40vw, 190px);
  --ch: calc(var(--cw) * 1304 / 600);
  --sh: calc(var(--sw) * 1304 / 600);
  --off-x: calc(50% - 6px - var(--sw) / 2);
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: calc(var(--ch) + 60px);
  margin-top: 30px;
}
.a5-mid { position: absolute; top: 20px; left: calc(50% - var(--cw) / 2); width: var(--cw); z-index: 2; }
.a5-mid .ph { --w: var(--cw); }
.a5-side { position: absolute; top: calc(20px + (var(--ch) - var(--sh)) / 2 + 24px); width: var(--sw); z-index: 1; }
.a5-side .ph { --w: var(--sw); }
.a5-l { left: calc(50% - var(--off-x) - var(--sw) / 2); transform: scale(.92) rotate(-4deg); }
.a5-r { right: calc(50% - var(--off-x) - var(--sw) / 2); transform: scale(.92) rotate(4deg); }
.tag {
  position: absolute; top: -12px; right: -6px; z-index: 3;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--lead); color: var(--ground);
  font: 600 12px/1 var(--sans); letter-spacing: .01em;
}
/* once, when the stage comes into view: the side phones move out from behind the centre (600ms, the left one 80ms
   first) */
.mo .a5-side { transition: transform .6s var(--enter), opacity .6s var(--enter); }
.mo .a5-r { transition-delay: .08s; }
.mo .a5-stage:not(.in) .a5-l { transform: translateX(60%) scale(.92); opacity: .4; }
.mo .a5-stage:not(.in) .a5-r { transform: translateX(-60%) scale(.92); opacity: .4; }
.rm .a5-stage { transition: opacity .2s ease; }
.rm .a5-stage:not(.in) { opacity: 0; }
@media (min-width: 900px) {
  .a5-stage { --cw: 320px; --sw: 230px; --off-x: min(50% - var(--sw) * .533 - 2px, var(--cw) / 2 + var(--sw) * .25); width: 100%; margin-inline: 0; margin-top: 44px; }
}

/* ================================================================ the knit band (G2): the ground of A8 and A9 */
/* the texture, static, light by day and quiet at night; it fades into the page's ground at its top and bottom */
.knit { position: relative; --off: var(--off-knit); }
.knit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/texture-knit.webp") center / cover;
  opacity: var(--knit-op); mix-blend-mode: var(--knit-blend);
  -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
          mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
}

/* ================================================================ A6, one number (the app's "why" shape) */
.a6 { text-align: center; }
.a6 .in { display: flex; flex-direction: column; align-items: center; }
.a6 .ph { --w: 200px; margin-bottom: 18px; }   /* the morning check-in, above the number (Round 2b) */
.a6-num { margin-top: 12px; font: 400 96px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.a6-line { margin-top: 10px; max-width: 28ch; font-size: 18px; line-height: 1.45; }
.a6 .small { margin-top: 16px; max-width: 40ch; }
.mo .a6-num { opacity: 0; transition: opacity .9s var(--enter); }
.rm .a6-num { opacity: 0; transition: opacity .2s ease; }
.mo .a6.seen .a6-num, .rm .a6.seen .a6-num { opacity: 1; }

/* ================================================================ A7, sources */
/* A6 and A7 read as one beat: 48px between A6's small print and A7's drawing */
.a6 { padding-bottom: 24px; }
.a7 { padding-top: 24px; text-align: center; }
.a7 .in { display: flex; flex-direction: column; align-items: center; }
.a7 .art { width: 96px; height: 96px; }
.a7 h2 { margin-top: 14px; }
.a7 .lede { margin-top: 14px; max-width: 34ch; }

/* ================================================================ A8, privacy */
.a8-rows { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
.a8-rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.a8-rows .art { width: 44px; height: 44px; }
.a8-rows b { display: block; font-weight: 600; padding-top: 1px; }
.a8-rows span { display: block; margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--off); }
.a8 .small { margin-top: 28px; }
.a8-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 600; }
@media (min-width: 900px) {
  .a8 .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
  .a8 h2 { grid-row: span 3; }
  .a8-rows { margin-top: 0; }
}

/* ================================================================ A9, price */
.a9 { text-align: center; }
.a9 .in { display: flex; flex-direction: column; align-items: center; }
.a9 .lede { margin-top: 14px; }
.a9 .store { margin-top: 24px; }

/* ================================================================ A10, questions */
.faq { margin-top: 20px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding-block: 14px;
  font: 600 17px/1.35 var(--sans);
}
.faq summary::-webkit-details-marker { display: none; }
/* the plus turns 45° on open (transform only) */
.plus { position: relative; width: 14px; height: 14px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; border-radius: 1px; background: var(--off); }
.plus::after { transform: rotate(90deg); }
details[open] > summary .plus { transform: rotate(45deg); }
.mo .plus { transition: transform .25s var(--enter); }
.faq details > div { padding: 0 30px 20px 0; color: var(--off); }
.faq details > div p + p { margin-top: 10px; }
@media (min-width: 900px) {
  .a10 .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 64px; align-items: start; }
  .a10 .faq { margin-top: 0; }
}

/* ================================================================ A11, the close */
.a11 { text-align: center; padding-bottom: 32px; }
.a11 .in { display: flex; flex-direction: column; align-items: center; }
.a11 .ring { --rs: 168px; }
.a11 h2 { margin-top: 24px; }
.a11 .store { margin-top: 22px; }
/* the lap complete, built once when the ring comes into view (the script adds .go), as A1 builds */
.a11 .build { --t0: .1s; }
.mo .a11 .build .arcs, .mo .a11 .build .arc, .mo .a11 .build .ctr { animation-play-state: paused; }
.mo .a11.go .build .arcs, .mo .a11.go .build .arc, .mo .a11.go .build .ctr { animation-play-state: running; }

/* ================================================================ the reading pages (privacy, support) */
.doc { padding-block: 40px 72px; }
.doc > * { max-width: 64ch; }
.doc { line-height: 1.65; }
.doc h1 { font-size: clamp(46px, 12.6vw, 52px); line-height: 1.02; }
.doc .lede { margin-top: 18px; max-width: 46ch; font-size: 18px; line-height: 1.55; }
.doc .meta { margin-top: 14px; font-size: 14px; color: var(--off); }
.doc h2 { margin-top: 56px; font-size: 28px; line-height: 1.12; scroll-margin-top: 24px; }
.doc h3 { margin-top: 32px; font: 600 18px/1.35 var(--sans); }
.doc p, .doc ul, .doc ol { margin-top: 14px; margin-bottom: 0; }
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--lead); }
.doc strong { font-weight: 600; }
.path { font-weight: 600; white-space: nowrap; }

.short, .call {
  margin-top: 32px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 24px;
  padding: 22px 22px 24px;
}
.doc .short h2, .doc .call h2 { margin-top: 0; }
.short ul { margin-top: 12px; }
.call p { margin-top: 8px; }

.toc { margin-top: 28px; font-size: 15px; }
.doc .toc ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.doc .toc li + li { margin-top: 0; }
.toc a { display: inline-flex; min-height: 44px; align-items: center; }

.doc .events { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.doc .events li { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); }

.mail { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.doc .faq { margin-top: 18px; }

/* a note for whoever publishes: true only once its condition is met; remove the block before the page goes live */
.draft {
  margin-top: 28px;
  border: 1.5px dashed var(--draft);
  border-radius: 18px;
  padding: 16px 20px 18px;
  font-size: 14.5px;
  line-height: 1.55;
}
.draft strong { color: var(--draft); }
.doc .draft ol { margin: 8px 0 0; padding-left: 1.2em; }
mark.todo { background: none; color: var(--draft); font-weight: 600; border-bottom: 1.5px dashed var(--draft); }

/* a slot for a generated picture (none in A today) */
.slot { display: grid; place-items: center; border: 1.5px dashed var(--line); border-radius: 18px; color: var(--off); font-size: 13px; }

/* ?still: every part at rest, nothing moves */
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; }