/* Astrid landing page, brand guidelines v1.1 (docs/astrid-brand-guidelines.pdf).
   Colours are the kit's tokens (--as-*): white, ink, one grey, four pinks; rose
   is the one action and the second line of a two-line headline; peach is
   decoration only (the sun, rules); blush is the only tinted surface; no
   gradients, no warm neutrals. One family, Outfit: display in thin tracked
   capitals (Thin 200 only at 56 px and up, Light 300 from 24 px), body
   Regular, buttons, eyebrow and labels Medium. No italics. The wordmark and
   mark are the kit's SVGs, one file per theme. Radius 6 inputs and chips,
   8 cards, 10 panels, pill buttons. A 1px line before a shadow; only floating
   layers float. Example graphics are customers' brand graphics, so they stay
   light and keep their own type in both themes. No inline styles (see
   _headers). */

@font-face { font-family: "Outfit"; font-weight: 200; font-display: swap; src: url("/fonts/outfit-latin-200-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 300; font-display: swap; src: url("/fonts/outfit-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("/fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("/fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("/fonts/outfit-latin-600-normal.woff2") format("woff2"); }

/* ----------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  --as-bg: #FFFFFF;
  --as-line: #E8E8E8;
  --as-blush: #FCEBE7;
  --as-ink: #151515;
  --as-grey: #666666;
  --as-rose: #B84A55;
  --as-rose-deep: #8E3542;
  --as-on-rose: #FFFFFF;
  --as-peach: #E8A598;
  --as-traced: #3F6487;
  --as-flag: #8A5A00;
  --as-flag-tint: #FBF1D6;
  --as-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Customer example graphics only: their own type, not Astrid's. */
  --ex-serif: Georgia, "Times New Roman", serif;
  --as-shadow-float: 0 4px 16px rgba(21, 21, 21, 0.08), 0 1px 2px rgba(21, 21, 21, 0.06);
  /* Hover on rose: rose deep in light; at night rose deep is rose, so it fades to 85% instead. */
  --as-hover-fade: 1;
  --show-moon: block;
  --show-sun: none;
  --show-light: block;
  --show-dark: none;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --glide: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  interpolate-size: allow-keywords;
}

/* Dark: chosen with the toggle, or the system's when nothing was chosen. Same values in both blocks. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --as-bg: #1A1517;
  --as-line: #332E30;
  --as-blush: #3E2529;
  --as-ink: #F3F1F1;
  --as-grey: #A6A6A6;
  --as-rose: #F0A89B;
  --as-rose-deep: #F0A89B;
  --as-peach: #F0A89B;
  --as-on-rose: #1A1517;
  --as-traced: #8FB3D6;
  --as-flag: #E6B85C;
  --as-flag-tint: #3A2E14;
  --as-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --as-hover-fade: 0.85;
  --show-moon: none;
  --show-sun: block;
  --show-light: none;
  --show-dark: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --as-bg: #1A1517;
    --as-line: #332E30;
    --as-blush: #3E2529;
    --as-ink: #F3F1F1;
    --as-grey: #A6A6A6;
    --as-rose: #F0A89B;
    --as-rose-deep: #F0A89B;
    --as-peach: #F0A89B;
    --as-on-rose: #1A1517;
    --as-traced: #8FB3D6;
    --as-flag: #E6B85C;
    --as-flag-tint: #3A2E14;
    --as-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --as-hover-fade: 0.85;
    --show-moon: none;
    --show-sun: block;
    --show-light: none;
    --show-dark: block;
  }
}

/* A switch fades everything at once instead of flashing. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease) !important;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--as-bg);
  color: var(--as-ink);
  font: 400 16px/1.5 var(--as-font);
  -webkit-font-smoothing: antialiased;
}
/* The tilted example cards reach past the edges on small screens; clip them without making a scroll container (the header stays sticky). */
main { overflow-x: clip; }
::selection { background: var(--as-blush); color: var(--as-ink); }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--as-rose); outline-offset: 2px; border-radius: 6px; }
/* One logo file per theme. */
.for-light { display: var(--show-light); }
.for-dark { display: var(--show-dark); }
svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
b, strong { font-weight: 500; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; padding: 8px 12px; background: var(--as-ink); color: var(--as-bg); border-radius: 6px; z-index: 50; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 520px) { .wrap { padding: 0 16px; } }

/* ----------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--as-bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--as-line) 70%, transparent);
}
.top-in { display: flex; align-items: center; gap: 16px; min-height: 68px; }
/* The wordmark at 28 px, as the guidelines size it for headers. Never rotated, stretched or recoloured. */
.brand { display: inline-flex; align-items: center; padding: 6px 0; border-radius: 6px; text-decoration: none; transition: opacity 160ms var(--ease); }
.brand img { height: 28px; width: auto; }
.brand:hover { opacity: 0.8; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--as-grey); text-decoration: none; font-size: 14.5px; border-radius: 999px; transition: color 160ms var(--ease), background-color 160ms var(--ease); }
.nav a:hover { color: var(--as-ink); background: color-mix(in srgb, var(--as-blush) 60%, transparent); }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav + .top-actions { margin-left: 12px; }
.nav-signin, .nav-start { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: border-color 160ms var(--ease), background-color 160ms var(--ease), transform 160ms var(--ease); }
.nav-signin { border: 1px solid var(--as-line); }
.nav-signin:hover { border-color: var(--as-grey); }
.nav-start { background: var(--as-ink); color: var(--as-bg); }
.nav-start:hover { transform: translateY(-1px); }
@media (max-width: 1100px) { .nav { display: none; } .nav + .top-actions { margin-left: auto; } }
@media (max-width: 480px) { .nav-signin { display: none; } }

/* Theme toggle: shown once theme.js has run (it adds .js), moon in light, sun in dark. */
.theme-toggle {
  display: none; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--as-line); border-radius: 999px; background: transparent; cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), transform 300ms var(--ease);
}
.js .theme-toggle { display: inline-grid; }
.theme-toggle:hover { border-color: var(--as-grey); background: color-mix(in srgb, var(--as-blush) 55%, transparent); }
.theme-toggle:active { transform: rotate(-20deg) scale(0.94); }
.theme-toggle svg { grid-area: 1 / 1; }
.icon-moon { display: var(--show-moon); }
.icon-sun { display: var(--show-sun); }

/* ------------------------------------------------------------------- type */
/* Labels and the tagline: small, spaced-out caps in rose. */
/* The eyebrow (the tagline) and section labels: Medium, caps, +0.3em, rose (peach at night). The hero's tagline
   at 14 px, the top of the eyebrow range; section labels at 16 px (owner's call, past the range) so they hold
   their own above a section title. */
.label, .eyebrow { margin: 0; color: var(--as-rose); font: 500 12px/1.4 var(--as-font); letter-spacing: 0.3em; text-transform: uppercase; }
.label { font-size: 16px; }
.hero .eyebrow { font-size: 14px; }
/* Headings: thin all caps; the second sentence in rose. */
/* Display: caps, tracked +0.04em. Hero 72 Thin 200 (Light 300 below 56 px); display 48 and section 32 Light 300. */
h1, .h2 { margin: 0; font-family: var(--as-font); font-weight: 300; text-transform: uppercase; letter-spacing: 0.04em; text-wrap: balance; }
h1 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.08; }
@media (min-width: 1340px) { h1 { font-weight: 200; } }
h1 span { display: block; }
.h2 { margin-top: 12px; font-size: clamp(32px, 2.4vw, 34px); line-height: 1.15; }
/* The second line of a two-line headline: rose (peach at night), the one display flourish. */
.accent { color: var(--as-rose); }
/* The rose sentence always starts its own line, so no word is left stranded. */
.h2 .accent { display: block; }
h3 { margin: 0; font: 500 19px/1.3 var(--as-font); letter-spacing: 0.005em; }
.lede { margin: 30px 0 0; max-width: 46ch; color: var(--as-grey); font-size: 18.5px; line-height: 1.6; }
@media (max-width: 520px) { .lede { font-size: 17px; } }

/* ---------------------------------------------------------------- buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px;
  border-radius: 999px; background: var(--as-rose); color: var(--as-on-rose); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--ease), opacity 160ms var(--ease), transform 160ms var(--ease);
}
.btn-primary:hover { background: var(--as-rose-deep); opacity: var(--as-hover-fade); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary svg, .ask button svg { stroke-width: 1.8; transition: transform 200ms var(--ease); }
.btn-primary:hover svg, .ask button:hover svg { transform: translateX(3px); }
.lock { width: 10px; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; position: relative; margin-top: 4px; flex: none; }
.lock::before { content: ""; position: absolute; left: 1px; top: -6px; width: 5px; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.tick { display: inline-block; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--as-blush); position: relative; }
.tick::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid var(--as-ink); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 8px 64px; padding-top: 72px; padding-bottom: 88px; }
/* The headline gets the full width, so each sentence sits on one line. */
.hero-head { grid-column: 1 / -1; }
.hero .eyebrow { margin-bottom: 22px; }
.hero .showcase { margin-top: 30px; }
@media (max-width: 1000px) { .hero { grid-template-columns: minmax(0, 1fr); padding-top: 44px; gap: 0; } .hero .showcase { margin-top: 56px; } }

/* Staged arrival: the copy first, then the picture. */
.rise { animation: rise 640ms var(--ease) both; }
.d0 { animation-delay: 40ms; } .d1 { animation-delay: 120ms; } .d2 { animation-delay: 220ms; } .d3 { animation-delay: 320ms; } .d4 { animation-delay: 420ms; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* The website box: type your site, see your posts. */
.ask { display: flex; align-items: center; gap: 8px; width: min(100%, 520px); margin-top: 34px; padding: 6px 6px 6px 22px; border: 1px solid var(--as-line); border-radius: 999px; background: var(--as-bg); transition: border-color 160ms var(--ease), box-shadow 200ms var(--ease); }
.ask:focus-within { border-color: var(--as-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--as-rose) 18%, transparent); }
.ask input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font-size: 16px; }
.ask input::placeholder { color: var(--as-grey); opacity: 0.8; }
.ask button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--as-rose); color: var(--as-on-rose); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 160ms var(--ease), opacity 160ms var(--ease), transform 160ms var(--ease); }
.ask button:hover { background: var(--as-rose-deep); opacity: var(--as-hover-fade); }
.ask button:active { transform: scale(0.97); }
.ask.nudge { animation: nudge 420ms var(--ease); }
@keyframes nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 420px) { .ask { padding-left: 16px; } .ask button { padding: 0 16px; } }
.ask-note { margin: 12px 0 0 22px; color: var(--as-grey); font-size: 13.5px; }
.ask-note a { color: var(--as-ink); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--as-ink) 35%, transparent); transition: text-decoration-color 160ms var(--ease); }
.ask-note a:hover { text-decoration-color: var(--as-rose); }
.promise-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; color: var(--as-grey); font-size: 14.5px; }
.promise-list li { display: flex; align-items: flex-start; gap: 10px; }
.promise-list .tick { margin-top: 2px; }
.promise-list b { color: var(--as-ink); }

/* The showcase: Local business · Software · Agency, one example at a time. */
.showcase { position: relative; }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px; }
.tabs-label { margin-right: 6px; color: var(--as-grey); font: 500 11px/1.3 var(--as-font); letter-spacing: 0.08em; text-transform: uppercase; }
.tab { position: relative; overflow: hidden; min-height: 36px; padding: 0 14px; border: 1px solid var(--as-line); border-radius: 999px; background: transparent; color: var(--as-grey); font-size: 14px; cursor: pointer; transition: color 160ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease), transform 300ms var(--spring); }
.tab:hover { color: var(--as-ink); border-color: var(--as-grey); }
.tab:active { transform: scale(0.96); }
.tab[aria-pressed="true"] { color: var(--as-bg); background: var(--as-ink); border-color: var(--as-ink); }
.tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: #F0A89B; transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
[data-auto] .tab[aria-pressed="true"]::after { opacity: 1; animation: tab-fill 10s linear forwards; }
[data-auto][data-away] .tab::after { animation-play-state: paused; }
@keyframes tab-fill { to { transform: scaleX(1); } }
.examples { display: grid; }
.example { position: relative; margin: 0; min-height: 580px; }
.example + .example { margin-top: 32px; }
.js .example { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 360ms var(--ease), visibility 0s linear 360ms; }
.js .example[data-on] { opacity: 1; visibility: visible; transition-delay: 60ms, 0s; }
@media (max-width: 480px) { .tabs-label { display: none; } }

/* An example: the app's review card as it is now, always light (it is a preview of a customer's post), and
   what else was made from the post floating beside it. */
.dcard { position: relative; z-index: 1; width: 76%; overflow: hidden; border: 1px solid #E8E8E8; border-radius: 10px; background: #FFFFFF; color: #151515; color-scheme: light; box-shadow: var(--as-shadow-float); }
.dcard-art { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.art-photo { position: relative; overflow: hidden; }
.art-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-badge { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: #FFFFFF; color: #151515; font: 500 10.5px/1.5 var(--as-font); letter-spacing: 0.04em; }
.art-panel { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.g-eyebrow { font: 600 10px/1.2 var(--as-font); letter-spacing: 0.1em; text-transform: uppercase; }
.g-title { font: 500 21px/1.1 var(--ex-serif); }
.g-cta { margin-top: auto; align-self: flex-start; padding: 7px 11px; border-radius: 999px; font: 500 11px/1 var(--as-font); }
.art-blush .art-panel { background: #FCEBE7; color: #151515; }
.art-blush .g-eyebrow { color: #8E3542; }
.art-blush .g-cta { background: #151515; color: #FFFFFF; }
.art-ink .art-panel { background: #151515; color: #F3F1F1; }
.art-ink .g-eyebrow { color: #F0A89B; }
.art-ink .g-title { font: 600 20px/1.12 var(--as-font); }
.art-ink .g-cta { background: #F0A89B; color: #151515; }
.art-white .art-panel { background: #FFFFFF; color: #151515; box-shadow: inset 0 4px 0 #E8A598; }
.art-white .g-eyebrow { color: #8E3542; }
.art-white .g-cta { background: #FCEBE7; color: #8E3542; }
.dcard-body { display: grid; gap: 10px; padding: 14px 16px 16px; }
.why { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 8px 10px; border-radius: 6px; background: #FCEBE7; color: #151515; font-size: 12px; line-height: 1.4; }
.why svg { flex: none; margin-top: 1px; color: #8E3542; }
.why b { font-weight: 500; color: #8E3542; }
.cap-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #666666; }
.cap-meta .for { margin-left: 6px; color: #8A8A8A; }
.dcard-title { margin: 0; font: 500 16.5px/1.3 var(--as-font); }
.cap-body { margin: 0; font-size: 14px; line-height: 1.7; }
.chip-ok { padding: 1px 9px; border-radius: 999px; font-size: 12px; background: #151515; color: #FFFFFF; }
.traced { text-decoration: underline; text-decoration-color: #3F6487; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.flagged { background: #FBF1D6; text-decoration: underline; text-decoration-color: #8A5A00; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* The key, in two lines: an underline is taken from the business's own material; a highlight is Astrid's suggestion. */
.cap-key, .legend { display: grid; gap: 5px; font-size: 12px; line-height: 1.4; color: #666666; }
.cap-key > span, .legend > span { display: flex; align-items: center; gap: 9px; }
.cap-key b, .legend b { font-weight: 500; color: #151515; }
.cap-key i, .legend i { flex: none; display: inline-block; width: 18px; }
.k-traced { height: 2px; border-radius: 2px; background: #3F6487; }
.k-flag { height: 12px; border-radius: 3px; background: #FBF1D6; box-shadow: inset 0 -2px 0 #8A5A00; }
.k-ok { height: 12px; border-radius: 999px; background: #151515; }
/* The card's action row, as in the app: Approve, Edit, then Photo / Motion / Voice in one tray, the Studio and more. */
.dcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 2px; }
.p-ink, .p-done { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 13px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.p-ink { background: #151515; color: #FFFFFF; }
.p-done { border: 1px solid #E8E8E8; color: #151515; }
.p-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #E8E8E8; border-radius: 999px; color: #666666; }
.tray { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #E8E8E8; border-radius: 999px; }
.tray > span { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: #666666; }
.tray > .on { color: #151515; background: #FCEBE7; }
/* Made from this post: a reel playing, and a voiceover or a client's approvals. */
/* The column beside the card: the reel, and under it the voiceover or the client's approvals. */
.made { position: absolute; z-index: 2; right: 0; top: 34px; width: 27%; display: grid; gap: 10px; }
.made-reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: #151515; box-shadow: var(--as-shadow-float); color-scheme: light; }
.made-reel video { display: block; width: 100%; height: 100%; object-fit: cover; background: #151515; }
.made-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 9px; background: #151515; color: #FFFFFF; font: 500 11px/1.2 var(--as-font); }
.made-pill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border: 1px solid #E8E8E8; border-radius: 10px; background: #FFFFFF; color: #151515; font-size: 11.5px; line-height: 1.35; color-scheme: light; box-shadow: var(--as-shadow-float); }
.made-pill svg { flex: none; color: #666666; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: #E8A598; transform-origin: center; animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: -0.4s; } .wave i:nth-child(3n) { animation-delay: -0.7s; } .wave i:nth-child(4n) { animation-delay: -0.2s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
/* Each example arrives: the card rises, then the reel and the pill slide in, then the underlines draw. */
.example[data-on] .dcard { animation: pop 620ms var(--glide) 60ms both; }
.example[data-on] .made-reel { animation: slide-in 700ms var(--glide) 260ms both; }
.example[data-on] .made-pill { animation: slide-in 700ms var(--glide) 420ms both; }
.example[data-on] .traced { animation: underline 900ms var(--ease) 700ms both; }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes underline { from { text-decoration-color: transparent; } }
/* Phones: the card takes the width; the reel and its companion sit in a row under it. */
@media (max-width: 600px) {
  .example { min-height: 0; }
  .dcard { width: 100%; }
  .made { position: relative; top: auto; right: auto; width: 100%; margin-top: 12px; grid-template-columns: 34% 1fr; align-items: end; }
  .g-title { font-size: 18px; }
}

/* ------------------------------------------------------------------ bands */
.band { padding-top: 136px; }
@media (max-width: 720px) { .band { padding-top: 96px; } }
.band-head { max-width: none; }

/* What it makes: six things, and the plan each comes with. */
/* About: two short paragraphs, then three points on a hairline. */
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px 64px; margin-top: 40px; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about-copy p { margin: 0; max-width: 56ch; color: var(--as-grey); font-size: 17px; line-height: 1.65; }
.about-copy p + p { margin-top: 18px; }
.about-points { list-style: none; margin: 0; padding: 0; display: grid; }
.about-points li { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--as-line); }
.about-points li:first-child { padding-top: 0; border-top: 0; }
.about-points p { margin: 0; color: var(--as-grey); font-size: 15px; line-height: 1.55; }
.makes { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 900px) { .makes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .makes { grid-template-columns: 1fr; } }
.makes li { position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 0 30px; border-top: 1px solid var(--as-line); }
.makes p { margin: 0; color: var(--as-grey); font-size: 15px; }
.plan-tag { justify-self: start; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background: var(--as-blush); color: var(--as-rose-deep); }
.makes li:nth-child(n + 3) .plan-tag { background: transparent; border: 1px solid var(--as-line); color: var(--as-grey); }
.makes li:last-child .plan-tag { background: var(--as-ink); border-color: var(--as-ink); color: var(--as-bg); }

/* How it works: three steps on one line, joined by a hairline. */
.steps { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; row-gap: 36px; } }
.steps li { counter-increment: step; position: relative; display: grid; gap: 8px; align-content: start; padding-top: 54px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--as-rose); background: var(--as-bg); color: var(--as-rose-deep); font: 500 14px/1 var(--as-font); z-index: 1; transition: background-color 240ms var(--ease), color 240ms var(--ease), transform 400ms var(--spring); }
.steps li::after { content: ""; position: absolute; left: 36px; right: -32px; top: 18px; height: 1px; background: var(--as-peach); opacity: 0.6; }
.steps li:last-child::after { display: none; }
@media (max-width: 760px) { .steps li::after { display: none; } }
.steps li:hover::before { background: var(--as-rose); color: var(--as-on-rose); transform: scale(1.12); }
.steps p, .mode p { margin: 0; color: var(--as-grey); font-size: 15px; line-height: 1.6; }

/* "More" on request: a quiet line that opens in place (also the FAQ). */
.more { border-top: 1px solid var(--as-line); }
#how .more { margin-top: 48px; }
.more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; cursor: pointer; list-style: none; color: var(--as-grey); font-size: 16px; transition: color 160ms var(--ease); }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover, .more[open] summary { color: var(--as-ink); }
.more-i { position: relative; width: 28px; height: 28px; flex: none; border: 1px solid var(--as-line); border-radius: 50%; transition: transform 460ms var(--glide), border-color 160ms var(--ease); }
.more-i::before, .more-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; border-radius: 1px; background: currentColor; }
.more-i::after { transform: rotate(90deg); transition: transform 460ms var(--glide); }
.more summary:hover .more-i { border-color: var(--as-grey); }
.more[open] .more-i { transform: rotate(180deg); }
.more[open] .more-i::after { transform: rotate(0deg); }
/* Opens by height where the browser can animate to auto; elsewhere it just opens. */
.more::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 520ms var(--glide), opacity 320ms var(--ease), content-visibility 520ms allow-discrete; }
.more[open]::details-content { block-size: auto; opacity: 1; }
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 8px; }
@media (max-width: 680px) { .modes { grid-template-columns: 1fr; } }
.mode { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; row-gap: 6px; align-items: start; align-content: start; padding: 24px; border: 1px solid var(--as-line); border-radius: 8px; }
.mode-i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--as-blush); color: var(--as-ink); }

/* ---------------------------------------------------------- why astrid */
/* Rows on the left, one open; its picture on the right, crossfading in. */
.explore { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; margin-top: 48px; }
@media (max-width: 960px) { .explore { grid-template-columns: 1fr; gap: 36px; } }
.rows { display: flex; flex-direction: column; }
.row {
  position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; width: 100%;
  padding: 22px 4px 24px; border: 0; border-top: 1px solid var(--as-line); background: none; text-align: left; cursor: pointer;
}
.row:last-child { border-bottom: 1px solid var(--as-line); }
.row:focus-visible { outline-offset: -2px; }
.row-n { padding-top: 6px; color: var(--as-grey); font: 500 12px/1 var(--as-font); letter-spacing: 0.08em; transition: color 300ms var(--ease); }
.row-title { display: block; font: 400 clamp(19px, 1.8vw, 22px)/1.3 var(--as-font); color: var(--as-grey); transition: color 300ms var(--ease), transform 500ms var(--glide); }
.row:hover .row-title { color: var(--as-ink); }
.row[aria-expanded="true"] .row-n { color: var(--as-rose-deep); }
.row[aria-expanded="true"] .row-title { color: var(--as-ink); transform: translateX(4px); }
.row-more { display: grid; grid-template-rows: 1fr; }
.row-more > span { min-height: 0; overflow: hidden; color: var(--as-grey); font-size: 15.5px; line-height: 1.6; }
.js .row-more { grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--glide); }
.js .row-more > span { opacity: 0; transform: translateY(-4px); transition: opacity 300ms var(--ease), transform 520ms var(--glide); }
.js .row[aria-expanded="true"] .row-more { grid-template-rows: 1fr; }
.js .row[aria-expanded="true"] .row-more > span { opacity: 1; transform: none; padding-top: 10px; transition-delay: 120ms; }
/* The line that fills under the open row while the list moves on by itself. */
.row-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: left; transform: scaleX(0); background: var(--as-rose); opacity: 0; pointer-events: none; }
[data-auto] .row[aria-expanded="true"] .row-progress { opacity: 1; animation: row-fill 7s linear forwards; }
[data-auto][data-held] .row-progress, [data-auto][data-away] .row-progress { animation-play-state: paused; }
@keyframes row-fill { to { transform: scaleX(1); } }

.views { position: relative; }
.view + .view { margin-top: 40px; }
/* With the script: the pictures share one cell (so nothing below jumps) and crossfade. */
.js .views { display: grid; }
.js .view { grid-area: 1 / 1; margin: 0; align-self: start; opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.97); filter: blur(8px); transition: opacity 360ms var(--ease), transform 640ms var(--glide), filter 420ms var(--ease), visibility 0s linear 640ms; }
.js .view[data-on] { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 90ms, 90ms, 90ms, 0s; }
/* Each picture plays its small arrival when it comes in. */
.view[data-on] .ui-ask { animation: pop 560ms var(--ease) 160ms both; }
.view[data-on] .ui-got b { animation: chip 380ms var(--ease) both; }
.view[data-on] .ui-got b:nth-child(2) { animation-delay: 360ms; } .view[data-on] .ui-got b:nth-child(3) { animation-delay: 420ms; } .view[data-on] .ui-got b:nth-child(4) { animation-delay: 480ms; }
.view[data-on] .idea { animation: pop 520ms var(--ease) both; }
.view[data-on] .idea:nth-child(1) { animation-delay: 420ms; } .view[data-on] .idea:nth-child(2) { animation-delay: 500ms; } .view[data-on] .idea:nth-child(3) { animation-delay: 580ms; }
.view[data-on] .flagged { animation: flag 900ms var(--ease) 600ms both; }
.view[data-on] .check-note { animation: pop 520ms var(--ease) 900ms both; }
@keyframes flag { from { background: transparent; text-decoration-color: transparent; } }
.view[data-on] .week-grid i.on { animation: cell 420ms var(--spring) both; }
.view[data-on] .week-grid i.on:nth-of-type(3n) { animation-delay: 260ms; } .view[data-on] .week-grid i.on:nth-of-type(3n+1) { animation-delay: 340ms; } .view[data-on] .week-grid i.on:nth-of-type(3n+2) { animation-delay: 420ms; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes chip { from { opacity: 0; transform: translateY(4px) scale(0.92); } }
@keyframes cell { from { transform: scale(0.6); opacity: 0; } }

/* App previews: follow the theme. */
.ui { padding: 22px; border: 1px solid var(--as-line); border-radius: 10px; background: var(--as-bg); display: flex; flex-direction: column; gap: 14px; }
.ui-ask { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid var(--as-ink); border-radius: 6px; background: var(--as-bg); }
.ui-ask-text { flex: 1; min-width: 0; font-size: 16px; }
.ui-ask-go { padding: 9px 16px; border-radius: 999px; background: var(--as-rose); color: var(--as-on-rose); font-size: 13.5px; font-weight: 500; }
.ui-got { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 6px; font-size: 12.5px; color: var(--as-grey); }
.ui-got b { font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--as-blush); color: var(--as-rose-deep); }
.ui-ideas-h { margin-top: 6px; font: 500 11px/1.3 var(--as-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-grey); }
.ui-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .ui-ideas { grid-template-columns: 1fr; } }
.idea { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--as-line); border-radius: 8px; background: var(--as-bg); transition: transform 240ms var(--ease), border-color 240ms var(--ease); }
.idea:hover { transform: translateY(-3px); border-color: var(--as-grey); }
.idea b { font: 400 15.5px/1.3 var(--as-font); }
.idea small { font-size: 12px; color: var(--as-grey); }
.idea-i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; }
.i-ink { background: var(--as-ink); color: var(--as-bg); }
.i-rose { background: var(--as-blush); color: var(--as-ink); }
.i-blush { background: var(--as-blush); color: var(--as-ink); }

/* No made-up facts: a caption with one line it couldn't confirm. Always light, like the drafts. */
.check { background: #FFFFFF; color: #151515; color-scheme: light; }
.check .cap-meta { color: #666666; }
.check-body { margin: 0; font-size: 16px; line-height: 1.8; }
.chip-check { padding: 1px 9px; border-radius: 999px; font-size: 12px; background: #FBF1D6; color: #8A5A00; border: 1px solid #8A5A00; }
.check-note { padding: 12px 14px; border-radius: 8px; background: #FBF1D6; color: #5C3D00; font-size: 14px; line-height: 1.5; }
.check-note b { color: #8A5A00; }
.legend { margin: 18px 0 0; color: var(--as-grey); }
.legend b { color: var(--as-ink); }

/* A plan for every week: the week grid. */
.week-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 12.5px; color: var(--as-grey); }
.week-head span:first-child { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.week-grid { display: grid; grid-template-columns: 86px repeat(7, minmax(0, 1fr)); gap: 5px; align-items: center; font-size: 12px; }
.week-grid > span { text-align: center; color: var(--as-grey); }
.week-grid b { font-weight: 500; font-size: 13px; }
.week-grid i { height: 42px; border-radius: 6px; background: color-mix(in srgb, var(--as-line) 55%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-style: normal; color: var(--as-rose-deep); font-weight: 500; }
.week-grid i.on { background: var(--as-blush); }
.week-grid i em { font-style: normal; letter-spacing: 1px; line-height: 0.6; }
.week-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.week-presets span { padding: 6px 14px; border: 1px solid var(--as-line); border-radius: 999px; font-size: 13px; color: var(--as-grey); }
.week-presets .is-on { border-color: var(--as-ink); color: var(--as-ink); box-shadow: inset 0 0 0 1px var(--as-ink); }
@media (max-width: 480px) { .week-grid { grid-template-columns: 66px repeat(7, minmax(0, 1fr)); gap: 3px; } .week-grid b { font-size: 11.5px; } .week-grid i { height: 36px; } }
.why-foot { display: flex; align-items: center; gap: 10px; margin: 40px 0 0; color: var(--as-grey); font-size: 14.5px; }

/* ---------------------------------------------------------------- pricing */
.plans { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1040px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 24px; border: 1px solid var(--as-line); border-radius: 8px; transition: transform 300ms var(--glide), border-color 200ms var(--ease); }
.plan:hover { transform: translateY(-4px); border-color: var(--as-grey); }
.plan h3 { font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--as-rose); }
.price { margin: 4px 0 0; display: flex; align-items: baseline; gap: 4px; }
.price b { font: 300 40px/1 var(--as-font); letter-spacing: 0.02em; }
.price span { color: var(--as-grey); font-size: 15px; }
.plan-for { margin: 0; color: var(--as-grey); font-size: 15px; }
.plan-list { list-style: none; margin: 10px 0 0; padding: 16px 0 0; border-top: 1px solid var(--as-line); display: grid; gap: 9px; font-size: 14.5px; }
.plan-list li { position: relative; padding-left: 22px; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 4px; height: 8px; border: solid var(--as-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.plan-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: auto; padding: 0 16px; border: 1px solid var(--as-line); border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500; text-align: center; transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease); }
.plan-list + .plan-btn { margin-top: 22px; }
.plan-btn:hover { border-color: var(--as-ink); }
.plan-pick { border-color: var(--as-ink); box-shadow: inset 0 0 0 1px var(--as-ink); }
.plan-pick .plan-btn { background: var(--as-ink); border-color: var(--as-ink); color: var(--as-bg); }
.plan-badge { position: absolute; top: -12px; left: 24px; padding: 3px 12px; border-radius: 999px; background: var(--as-ink); color: var(--as-bg); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.plans-note { margin: 22px 0 0; color: var(--as-grey); font-size: 13.5px; }

/* -------------------------------------------------------------------- faq */
.faq { margin-top: 40px; max-width: 820px; }
.faq .more:last-child { border-bottom: 1px solid var(--as-line); }
.faq summary { font-size: 18px; font-weight: 400; color: var(--as-ink); }
.faq p { margin: 0; padding: 0 48px 22px 4px; color: var(--as-grey); font-size: 15.5px; line-height: 1.65; }

/* ---------------------------------------------------------------- closing */
.closing { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: 136px; padding-top: 72px; padding-bottom: 88px; border-top: 1px solid var(--as-peach); }
.closing .h2 { margin-bottom: 34px; }
.closing-mark { margin-bottom: 18px; }

/* ----------------------------------------------------------------- footer */
.foot { margin-top: 24px; padding-top: 56px; padding-bottom: 32px; border-top: 1px solid var(--as-line); color: var(--as-grey); font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.7fr); gap: 40px 56px; align-items: start; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand, .contact { grid-column: 1 / -1; } .contact { order: 3; } }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-brand img { height: 24px; width: auto; }
.foot-brand .eyebrow { font-size: 11px; }
.foot-brand p { margin: 4px 0 0; max-width: 32ch; color: var(--as-grey); line-height: 1.5; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-col h2 { margin: 0 0 6px; font: 500 11px/1.3 var(--as-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-ink); }
.foot a { color: var(--as-grey); text-decoration: none; transition: color 160ms var(--ease); }
.foot a:hover { color: var(--as-ink); }
/* Contact us: two fields and a button, kept small. */
.contact { display: grid; gap: 8px; max-width: 420px; }
.contact h2 { margin: 0 0 4px; font: 500 11px/1.3 var(--as-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-ink); }
.contact input, .contact textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--as-line); border-radius: 6px; background: var(--as-bg); color: var(--as-ink); font: 400 14.5px/1.4 var(--as-font); resize: none; transition: border-color 160ms var(--ease); }
.contact input::placeholder, .contact textarea::placeholder { color: var(--as-grey); opacity: 0.8; }
.contact input:focus, .contact textarea:focus { outline: 0; border-color: var(--as-ink); box-shadow: var(--as-focus); }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-row { display: flex; align-items: center; gap: 12px; }
.contact button { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--as-ink); color: var(--as-bg); font: 500 14px/1 var(--as-font); cursor: pointer; transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.contact button:hover { opacity: 0.85; }
.contact button:active { transform: scale(0.97); }
.contact button[disabled] { opacity: 0.4; cursor: default; }
.contact-status { font-size: 13px; color: var(--as-grey); }
.contact-status[data-state="error"] { color: var(--as-flag); }
.contact-status[data-state="ok"] { color: var(--as-ink); }
.foot-base { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--as-line); font-size: 13px; }

/* Legal pages: one calm column. */
.doc { max-width: 760px; padding-top: 64px; padding-bottom: 96px; }
.doc-title { margin: 12px 0 0; font-size: clamp(32px, 4vw, 44px); }
.doc-meta { margin: 14px 0 40px; color: var(--as-grey); font-size: 14px; }
.doc h2 { margin: 40px 0 10px; font: 500 22px/1.25 var(--as-font); }
.doc p, .doc li { color: var(--as-ink); font-size: 16px; line-height: 1.65; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; }
.doc b { font-weight: 500; }
.doc p.label { color: var(--as-rose); font-size: 14px; margin: 0; }
.doc p.doc-meta { color: var(--as-grey); font-size: 14px; }
.doc a { color: var(--as-ink); text-underline-offset: 3px; }

/* Back to top: a round ink button, bottom right, once the page has scrolled. */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 45; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--as-ink); color: var(--as-bg); box-shadow: var(--as-shadow-float); text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.9);
  transition: opacity 240ms var(--ease), transform 400ms var(--spring), visibility 0s linear 400ms;
}
.to-top[data-show] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top svg { stroke-width: 1.5; transition: transform 300ms var(--spring); }
.to-top:hover { background: var(--as-rose); color: var(--as-on-rose); }
.to-top:hover svg { transform: translateY(-2px); }
@media (max-width: 520px) { .to-top { right: 14px; bottom: 14px; } }

/* Sections rise into view as they scroll in, where the browser can tie animation to scroll. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } }

@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top svg { transition: none; transform: none; }
  .rise { animation: fade 300ms ease both; animation-delay: 0ms; }
  .wave i { animation: none !important; }
  .example[data-on] *, .view[data-on] * { animation: none !important; }
  .js .view, .js .row-more > span { transform: none; filter: none; }
}
@keyframes fade { from { opacity: 0; } }