/* Fade: fade.email
   Palette sampled from the App Store screenshots and the app icon so the page and the
   store listing read as one product. Accent is locked to the brand green in CLAUDE.md. */

:root {
  --paper:        #F2EEE7;
  --paper-2:      #E9E4DD;
  --card:         #FFFFFF;
  --ink:          #0B0D0B;
  --ink-2:        #4A4F49;
  --ink-3:        #7C8179;
  --line:         rgba(11, 13, 11, 0.10);
  --line-2:       rgba(11, 13, 11, 0.06);
  --brand:        #1DB954;
  --brand-deep:   #17853E;
  --bloom:        #AFD5B5;
  --night:        #080A08;
  --night-2:      #12361D;
  --night-ink:    #F2EEE7;
  --night-ink-2:  #9AA398;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono",
          "Roboto Mono", monospace;

  --wrap: 1120px;
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --shadow: 0 1px 2px rgba(11,13,11,.04), 0 8px 24px -12px rgba(11,13,11,.14);
  --shadow-lift: 0 2px 4px rgba(11,13,11,.05), 0 18px 40px -18px rgba(11,13,11,.22);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2.5px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 12px; color: var(--paper); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }

/* ---------- type ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
h1 { font-size: clamp(2.6rem, 7.6vw, 4.9rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.024em; line-height: 1.18; }
p  { margin: 0 0 1.1em; }

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-deep); margin: 0 0 14px;
}
/* Announcement pill. A link, above the hero headline and on the Chrome page.
   Transitions are already neutralised by the reduced-motion block further down. */
.announce {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px; margin: 0 0 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: .9rem; font-weight: 600; line-height: 1; color: var(--ink-2);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.announce:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); border-color: rgba(11,13,11,.16); }
.announce img { width: 20px; height: 20px; flex: none; }
.announce .tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-deep); background: rgba(29,185,84,.10);
  padding: 4px 8px; border-radius: 999px;
}
.announce .arw { color: var(--ink-3); font-weight: 700; }
.art-logo { display: block; margin: 0 0 14px; width: 44px; height: 44px; }

.lede { font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- header ---------- */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.hdr.stuck { border-bottom-color: var(--line-2); }
.hdr .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.06rem;
  letter-spacing: -0.03em; color: var(--ink); text-decoration: none; flex: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 1px 3px rgba(11,13,11,.2); }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 550;
  padding: 7px 12px; border-radius: 999px; transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: rgba(11,13,11,.05); color: var(--ink); }
/* With the nav hidden there is no auto margin left to push the CTA over, so give it one. */
@media (max-width: 940px) {
  .nav { display: none; }
  .hdr .wrap > .btn { margin-left: auto; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 600; letter-spacing: -0.015em;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s cubic-bezier(.32,.72,0,1), background .16s ease, box-shadow .16s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(11,13,11,.12), 0 10px 22px -12px rgba(29,185,84,.8); }
.btn-primary:hover { background: var(--brand-deep); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.72); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-sm { padding: 9px 17px; font-size: .92rem; }

/* App Store badge, drawn inline so the page makes zero third-party requests */
.appstore {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 11px 22px 11px 19px; border-radius: 14px;
  transition: transform .16s cubic-bezier(.32,.72,0,1), background .16s ease;
}
.appstore:hover { background: #1d211d; color: #fff; }
.appstore:active { transform: scale(.97); }
.appstore svg { width: 25px; height: 25px; fill: #fff; flex: none; margin-top: -2px; }
.appstore span { display: block; line-height: 1.12; }
.appstore .as-sm { font-size: .66rem; letter-spacing: .04em; opacity: .82; }
.appstore .as-lg { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.028em; }

/* ---------- sections ---------- */

.sec { padding: clamp(64px, 9vw, 116px) 0; position: relative; }
.sec-head { max-width: 60ch; margin-bottom: clamp(34px, 5vw, 54px); }
.sec-head p { margin-bottom: 0; }
.sec-head h2 { margin-bottom: 16px; }

.rule { height: 1px; background: var(--line-2); border: 0; margin: 0; }

/* ---------- hero ---------- */

.hero { position: relative; padding: clamp(40px, 5.5vw, 76px) 0 clamp(44px, 5.5vw, 72px); overflow: hidden; }
.bloom { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bloom::before, .bloom::after {
  content: ""; position: absolute; border-radius: 50%;
  background: var(--bloom); filter: blur(80px); opacity: .62;
}
.bloom::before { width: 34vw; height: 34vw; max-width: 440px; max-height: 440px; top: -15vw; left: -11vw; }
.bloom::after  { width: 26vw; height: 26vw; max-width: 330px; max-height: 330px; bottom: -13vw; right: -8vw; opacity: .4; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero h1 { margin-bottom: 20px; }
.hero h1 .fade-word { color: var(--brand-deep); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 28px 0 18px; }
.hero-note { font-size: .88rem; color: var(--ink-3); margin: 0; }
.hero-note strong { color: var(--ink-2); font-weight: 600; }

/* signature element: the address that visibly fades */

.demo {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 26px 22px;
  box-shadow: var(--shadow-lift); position: relative;
}
.demo-label { font-size: .69rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.demo-addr { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(1.22rem, 3.1vw, 1.72rem); font-weight: 600; letter-spacing: -0.035em; word-break: break-all; line-height: 1.25; }
.demo-addr .at { color: var(--brand); }
.demo-meta { display: flex; align-items: center; gap: 8px; font-size: .93rem; color: var(--ink-2); margin-top: 10px; }
.demo-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.demo-meta time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.demo.warn .demo-meta .dot { background: #E8890C; }
.demo.warn .demo-meta time { color: #B26708; }

.demo-track { height: 4px; border-radius: 999px; background: var(--paper-2); margin: 16px 0 18px; overflow: hidden; }
.demo-fill { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--brand); transform-origin: left center; transition: width 1s linear, background .4s ease; }
.demo.warn .demo-fill { background: #E8890C; }

.demo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.demo-actions .btn { flex: 1 1 auto; padding: 11px 18px; font-size: .95rem; }
.demo-cap { font-size: .78rem; color: var(--ink-3); margin: 14px 0 0; text-align: center; }

/* ---------- fact strip ---------- */

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.facts div { background: var(--paper); padding: 22px 20px; }
.facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 1.06rem; font-weight: 650; letter-spacing: -0.024em; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- download ---------- */

.dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(22px, 4vw, 40px); align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow); }
.dl-icon { width: clamp(88px, 13vw, 132px); border-radius: 24px; box-shadow: 0 2px 6px rgba(11,13,11,.12), 0 20px 40px -20px rgba(23,133,62,.55); }
.dl h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 10px; }
.dl .lede { font-size: 1.04rem; margin-bottom: 20px; }
.dl-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dl-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 22px 0 0;
  font-size: .88rem; color: var(--ink-3); }
.dl-meta li { display: flex; align-items: center; gap: 7px; }
.dl-meta li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
@media (max-width: 680px) { .dl { grid-template-columns: 1fr; text-align: left; } }

/* ---------- screenshot gallery ---------- */

/* Horizontal rail. It lives inside .wrap so the first card lines up with every other
   section, and the small negative margin only exists so card shadows are not clipped
   by the scroll container. */
.shots {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 262px);
  gap: 20px; overflow-x: auto;
  padding: 6px 14px 26px; margin-inline: -14px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.shots::-webkit-scrollbar { height: 7px; }
.shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.shot { scroll-snap-align: start; margin: 0; }
.shot picture { display: block; }
.shot img { width: 100%; border-radius: var(--r); border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--paper-2); }
.shot figcaption { margin-top: 13px; font-size: .92rem; color: var(--ink-2); line-height: 1.4; }
.shot b { display: block; color: var(--ink); font-weight: 650; letter-spacing: -0.02em; }

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--ink); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-deep); position: absolute; top: -2px; left: 0;
  background: var(--paper); padding-right: 12px; transform: translateY(-50%);
  border-top: 2px solid var(--brand); padding-top: 0;
}
.step h3 { margin: 0 0 10px; }
.step p { color: var(--ink-2); margin: 0; font-size: .98rem; }

/* ---------- feature list ---------- */

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.feat { background: var(--paper); padding: 26px 24px; }
.feat h3 { font-size: 1.06rem; margin-bottom: 8px; }
.feat p { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.feat .tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-deep); background: rgba(29,185,84,.11);
  padding: 3px 8px; border-radius: 5px; margin-bottom: 10px; }
.feat .tag.pro { color: #8A6A15; background: rgba(232,168,12,.14); }

/* ---------- guides ---------- */

.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.guide {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px 22px; text-decoration: none; color: var(--ink);
  transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s ease, border-color .18s ease;
}
.guide:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(29,185,84,.4); color: var(--ink); }
.guide .kicker { font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.guide h3 { font-size: 1.1rem; }
.guide p { margin: 0; font-size: .93rem; color: var(--ink-2); line-height: 1.5; }
.guide .more { margin-top: auto; padding-top: 12px; font-size: .89rem; font-weight: 600; color: var(--brand-deep); }
.guide .more::after { content: " \2192"; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem); font-weight: 650; letter-spacing: -0.024em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2.2px solid var(--ink-3); border-bottom: 2.2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s cubic-bezier(.32,.72,0,1);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { color: var(--brand-deep); }
.faq .answer { padding: 0 0 24px; max-width: 68ch; }
.faq .answer p { color: var(--ink-2); margin-bottom: .9em; }
.faq .answer a.learn { font-weight: 600; }

/* ---------- dark cta ---------- */

.night { background: var(--night); color: var(--night-ink); position: relative; overflow: hidden; }
.night::before, .night::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--night-2);
  filter: blur(110px); opacity: .9; pointer-events: none;
}
.night::before { width: 44vw; height: 44vw; max-width: 560px; max-height: 560px; top: -18vw; left: -12vw; }
.night::after  { width: 34vw; height: 34vw; max-width: 440px; max-height: 440px; bottom: -16vw; right: -10vw; opacity: .7; }
.night .wrap { position: relative; z-index: 1; }
.night h2 { max-width: 16ch; margin-bottom: 20px; }
.night .lede { color: var(--night-ink-2); }
.night .eyebrow { color: var(--brand); }
.night .appstore { background: var(--paper); color: var(--night); }
.night .appstore:hover { background: #fff; color: var(--night); }
.night .appstore svg { fill: var(--night); }
.night a { color: var(--brand); }

/* ---------- footer ---------- */

.ftr { background: var(--night); color: var(--night-ink-2); padding: 56px 0 44px; font-size: .92rem; }
.ftr a { color: var(--night-ink-2); text-decoration: none; }
.ftr a:hover { color: var(--paper); text-decoration: underline; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px 24px; }
@media (max-width: 800px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr h4 { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: #6E766C; margin-bottom: 14px; font-weight: 700; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ftr .brand { color: var(--paper); }
.ftr .blurb { margin: 14px 0 0; max-width: 34ch; line-height: 1.55; color: #6E766C; }
.ftr-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(242,238,231,.1);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: #6E766C; font-size: .85rem; }

/* ---------- article / guide pages ---------- */

.crumbs { font-size: .85rem; color: var(--ink-3); padding: 26px 0 0; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand-deep); text-decoration: underline; }
.crumbs span { padding: 0 7px; opacity: .5; }

.art-head { padding: 22px 0 clamp(30px, 5vw, 48px); position: relative; }
.art-head h1 { font-size: clamp(2.05rem, 5.2vw, 3.5rem); margin-bottom: 18px; }
.art-meta { font-size: .86rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; }

.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 64px); align-items: start;
  padding-bottom: clamp(56px, 8vw, 96px); }
@media (max-width: 940px) { .art-layout { grid-template-columns: 1fr; } }

.prose { max-width: 68ch; font-size: 1.06rem; }
.prose h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin: 2.2em 0 .7em; scroll-margin-top: 80px; }
.prose h3 { font-size: 1.16rem; margin: 1.9em 0 .5em; }
.prose > :first-child { margin-top: 0; }
.prose p { color: #23271F; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; color: #23271F; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--brand-deep); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose code { font-family: var(--mono); font-size: .9em; background: rgba(11,13,11,.055); padding: .16em .4em; border-radius: 5px; }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--brand);
  color: var(--ink-2); font-size: 1.04rem; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 650; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.prose tr:last-child td { border-bottom: 0; }

.steps-list { counter-reset: s; list-style: none; padding: 0; margin: 1.4em 0 1.8em; }
.steps-list li { counter-increment: s; position: relative; padding-left: 46px; margin-bottom: 20px; }
.steps-list li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: .88rem; font-weight: 700;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.steps-list strong { display: block; margin-bottom: 2px; }

.callout {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r-sm); padding: 20px 22px; margin: 1.8em 0; font-size: 1rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { margin: 0 0 8px; font-size: 1.02rem; }

/* ---------- roadmap board ----------
   A kanban board wants the full 1120px wrap, but the prose around it still wants
   the 68ch measure that makes it readable. So the roadmap article opts out of the
   .prose width cap and puts it back on its own direct text children, leaving the
   board (and only the board) free to span the wrap. Every class here is prefixed
   so nothing collides with the shared page furniture. */
.prose-board { max-width: none; }
.prose-board > p,
.prose-board > h2,
.prose-board > h3,
.prose-board > ul,
.prose-board > .callout { max-width: 68ch; }

.board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  align-items: start; margin: 1.5em 0 2em;
}
/* One lane per row below the breakpoint. Three 300px-ish columns is the floor for
   a card with a title and a line of description; narrower and the titles wrap to
   three lines each. */
@media (max-width: 900px) { .board { grid-template-columns: 1fr; gap: 22px; } }

.board-lane {
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 13px;
}
.board-hd { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; }
.board-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.board-lane h3 {
  margin: 0; font-size: .78rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.board-n {
  margin-left: auto; font-family: var(--mono); font-size: .78rem;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.board-cards { display: grid; gap: 10px; }
.board-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 15px; box-shadow: var(--shadow);
}
.board-card h4 { font-size: 1rem; letter-spacing: -.022em; line-height: 1.25; margin: 0 0 5px; }
.board-card p { font-size: .92rem; line-height: 1.5; color: var(--ink-2); margin: 0; }
.board-tag {
  display: inline-block; margin-top: 10px; padding: 3px 8px; border-radius: 999px;
  background: rgba(29, 185, 84, .12); color: var(--brand-deep);
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}

.tocbox, .sidecta {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.side { position: sticky; top: 82px; }
@media (max-width: 940px) { .side { position: static; } }
.tocbox h2, .sidecta h2 { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight: 700; }
.tocbox ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: t; }
.tocbox a { font-size: .93rem; color: var(--ink-2); text-decoration: none; line-height: 1.35; display: block; }
.tocbox a:hover { color: var(--brand-deep); }
.sidecta img { width: 64px; border-radius: 15px; box-shadow: 0 2px 5px rgba(11,13,11,.12); margin-bottom: 14px; }
.sidecta h3 { font-size: 1.06rem; margin-bottom: 6px; }
.sidecta p { font-size: .91rem; color: var(--ink-2); margin-bottom: 16px; }
.sidecta .appstore { width: 100%; }

.related { border-top: 1px solid var(--line); padding-top: 30px; margin-top: 48px; }
.related h2 { font-size: 1.25rem; margin-bottom: 18px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.related-grid a { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px 18px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .96rem;
  letter-spacing: -0.02em; line-height: 1.35; transition: border-color .16s ease, transform .16s ease; }
.related-grid a:hover { border-color: rgba(29,185,84,.45); transform: translateY(-2px); color: var(--ink); }

/* ---------- checkout success ---------- */

.success { text-align: center; max-width: 440px; margin: 0 auto; }
.success-check {
  width: 72px; height: 72px; margin: 0 auto 26px;
  border-radius: 50%; background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -12px rgba(29,185,84,.65);
}
.success-check svg { width: 34px; height: 34px; fill: #fff; }
.success .lede { margin-inline: auto; }
.success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* The confetti canvas covers the viewport but takes no clicks and no layout space, so
   it can sit anywhere in the DOM. success.js sizes it and never fires under
   prefers-reduced-motion; the media query below is belt and braces for that same case. */
.success-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .demo-fill { transition: none; }
  .success-confetti { display: none; }
}

/* ======================================================================================
   Fade for Chrome (/chrome-extension, and the strip on the home page)

   The iPhone pages are built around a card that floats on paper. The extension is not a
   card: it is a panel wedged against the right edge of a browser window, and that shape
   is what the page is built from. .cx-win draws that window in CSS (a chrome strip, a
   sliver of the site you were signing up to, then the panel) so the hero shows the
   product in its real place rather than a screenshot of it. The panel reuses the .demo
   ids and classes, so assets/site.js drives its timer here exactly as on the home page
   and nothing new had to be added to the script.
   ====================================================================================== */

/* ---------- chrome web store badge: the App Store badge's sibling, same box ---------- */

.webstore {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 11px 22px 11px 19px; border-radius: 14px;
  transition: transform .16s cubic-bezier(.32,.72,0,1), background .16s ease;
}
.webstore:hover { background: #1d211d; color: #fff; }
.webstore:active { transform: scale(.97); }
.webstore img { width: 25px; height: 25px; flex: none; }
.webstore span { display: block; line-height: 1.12; }
.webstore .as-sm { font-size: .66rem; letter-spacing: .04em; opacity: .82; }
.webstore .as-lg { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.028em; }
.night .webstore { background: var(--paper); color: var(--night); }
.night .webstore:hover { background: #fff; color: var(--night); }

/* ---------- the extension hero ---------- */

.cx-hero { position: relative; padding: clamp(18px, 3vw, 34px) 0 clamp(52px, 7vw, 86px); overflow: hidden; }
.cx-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 448px;
  gap: clamp(30px, 5vw, 68px); align-items: center;
}
@media (max-width: 980px) { .cx-grid { grid-template-columns: 1fr; gap: 42px; } }

.cx-hero h1 { margin-bottom: 20px; max-width: 13ch; }
.cx-hero .lede { max-width: 46ch; }
.cx-live {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-deep);
}
.cx-live .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none;
  box-shadow: 0 0 0 0 rgba(29,185,84,.55); animation: cx-pulse 2.4s ease-out infinite;
}
@keyframes cx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29,185,84,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(29,185,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,185,84,0); }
}

/* small facts under the CTA, in the same pill language as the store screenshots */
.cx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.cx-pills li {
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  background: rgba(255,255,255,.72); border: 1px solid var(--line);
  padding: 6px 13px; border-radius: 999px;
}

/* ---------- signature element: the panel, docked ---------- */

.cx-win {
  width: 100%; max-width: 448px; margin-inline: auto;
  border-radius: 16px; overflow: hidden; background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(11,13,11,.05), 0 34px 64px -28px rgba(11,13,11,.38);
}
.cx-win-bar {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; background: var(--paper-2); border-bottom: 1px solid var(--line-2);
}
.cx-dots { display: flex; gap: 5px; flex: none; }
.cx-dots i { width: 9px; height: 9px; border-radius: 50%; background: #D8D3CB; }
.cx-dots i:nth-child(1) { background: #EC6A5E; }
.cx-dots i:nth-child(2) { background: #F4BF4F; }
.cx-dots i:nth-child(3) { background: #61C554; }
.cx-url {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--card); border-radius: 999px; padding: 4px 11px;
  font-size: .72rem; color: var(--ink-3); letter-spacing: -0.01em;
}
.cx-ext { position: relative; flex: none; display: block; }
.cx-ext img { width: 20px; height: 20px; border-radius: 5px; }
.cx-ext em {
  position: absolute; right: -5px; bottom: -4px;
  background: var(--brand); color: #fff; font-style: normal;
  font-size: .56rem; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 999px; border: 1.5px solid var(--card);
}

.cx-win-body { display: flex; align-items: stretch; min-height: 332px; }

/* the site you were signing up to, reduced to the shape of a form */
.cx-site {
  flex: 0 0 116px; padding: 16px 12px; display: flex; flex-direction: column; gap: 9px;
  border-right: 1px solid var(--line-2); background: var(--card);
}
.cx-site span { display: block; border-radius: 5px; background: var(--paper-2); }
.cx-site-h { height: 11px; width: 62%; background: rgba(11,13,11,.16) !important; margin-bottom: 5px; }
.cx-field { height: 22px; }
.cx-label { height: 6px !important; width: 40%; }
.cx-field-on { background: rgba(29,185,84,.12) !important; box-shadow: inset 0 0 0 1.5px var(--brand); }
.cx-cta { height: 24px; margin-top: 4px; background: var(--ink) !important; }
@media (max-width: 420px) { .cx-site { display: none; } }

/* the panel itself */
.cx-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cx-panel-t {
  display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 10px 14px; font-size: .78rem; font-weight: 650; letter-spacing: -0.015em;
  border-bottom: 1px solid var(--line-2);
}
.cx-panel-t img { width: 15px; height: 15px; border-radius: 4px; }
.cx-tabs { display: flex; border-bottom: 1px solid var(--line-2); }
.cx-tabs span {
  flex: 1; text-align: center; padding: 8px 2px 7px;
  font-size: .72rem; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cx-tabs .on { color: var(--ink); border-bottom-color: var(--brand); }
.cx-panel-b { padding: 15px 14px 16px; }

/* .demo overrides: inside the panel it is the panel, not a card floating on paper */
.cx-panel .demo-label { font-size: .61rem; letter-spacing: .12em; margin-bottom: 6px; }
.cx-panel .demo-addr { font-size: 1.04rem; letter-spacing: -0.03em; word-break: normal; }
.cx-panel .demo-addr .at { display: block; font-size: .95rem; color: var(--brand-deep); }
.cx-panel .demo-meta { font-size: .78rem; margin-top: 9px; }
.cx-panel .demo-meta .dot { width: 6px; height: 6px; }
.cx-panel .demo-track { margin: 11px 0 13px; height: 3px; }
.cx-panel .demo-actions { flex-direction: column; gap: 8px; }
.cx-panel .demo-actions .btn { width: 100%; padding: 9px 14px; font-size: .84rem; border-radius: 10px; }

/* the code, the one thing anyone actually came for */
.cx-code {
  margin-top: 15px; padding: 11px 13px 12px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper);
}
.cx-code-l { font-size: .58rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px; }
.cx-code-n {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.44rem; font-weight: 700; letter-spacing: .06em;
}
.cx-cap { font-size: .76rem; color: var(--ink-3); text-align: center; margin: 14px 0 0; }

/* ---------- install strip ---------- */

.cx-dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: clamp(20px, 3vw, 34px); align-items: center; }
@media (max-width: 680px) { .cx-dl { grid-template-columns: 1fr; } }
.cx-dl-icon { width: 112px; height: 112px; border-radius: 24px; box-shadow: var(--shadow-lift); }
.cx-dl h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 12px; }
.cx-dl .lede { margin-bottom: 20px; max-width: 54ch; }
.cx-dl-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cx-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 20px 0 0; padding: 0; font-size: .86rem; color: var(--ink-3); }
.cx-meta li { position: relative; padding-left: 15px; }
.cx-meta li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* ---------- landscape screenshot scroller ---------- */

/* A landscape UI shot needs far more width than the portrait phone shots on the home
   page before its text is legible, and minmax() would collapse every column to its
   minimum here (five maxima overflow the track), so this is a clamp, not a minmax. */
.shots-wide { grid-auto-columns: clamp(282px, 44vw, 520px); }
.shots-wide .shot img { border-radius: 16px; }

/* ---------- the Chrome band on the home page ---------- */

.cx-strip { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (max-width: 900px) { .cx-strip { grid-template-columns: 1fr; } }
.cx-strip h2 { margin-bottom: 18px; max-width: 16ch; }
.cx-strip .lede { margin-bottom: .9em; }
.cx-strip .cx-dl-row { margin-top: 26px; }
.cx-strip-shot { margin: 0; }
.cx-strip-shot img { width: 100%; border-radius: 18px; border: 1px solid var(--line-2); box-shadow: var(--shadow-lift); }

/* ---------- pairing ---------- */

.cx-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (max-width: 880px) { .cx-pair { grid-template-columns: 1fr; } }
.cx-link { display: flex; align-items: center; gap: 0; }
.cx-end {
  flex: 1 1 0; text-align: center; padding: 22px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  box-shadow: var(--shadow);
}
.cx-end img { width: 46px; height: 46px; border-radius: 11px; margin: 0 auto 11px; }
.cx-end b { display: block; font-size: .95rem; letter-spacing: -0.02em; }
.cx-end span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; }
.cx-thread {
  flex: 0 0 76px; height: 2px; position: relative;
  background: linear-gradient(90deg, var(--line), var(--brand), var(--line));
}
.cx-thread::after {
  content: "⇄"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--paper); color: var(--brand-deep); font-size: 1.05rem; padding: 0 7px;
}
@media (max-width: 440px) { .cx-thread { flex-basis: 40px; } }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cx-live .pulse { animation: none; }
}