/* ---------------------------------------------------------------------------
   try this one — site stylesheet

   Every value below is lifted from the app, not chosen here. Where a token came
   from is named in a comment, so when the app moves, this file has an address
   to follow:

     DesignSystem/Colors.swift      palette, per-tab backgrounds, tab identity
     DesignSystem/TTOTheme.swift    the shipped accent trio
     DesignSystem/Typography.swift  the two faces and the seven-step size scale
     Shared/TTOGlass.swift          the frosted-glass recipe and the radius scale
     Shared/TTOBackground.swift     the dot grid and the corner glows
   --------------------------------------------------------------------------- */

:root {
  /* -- Accents. The shipped trio from TTOTheme.shipped. The app lets these be
        retinted; a web page has one palette, so it wears the defaults. ------ */
  --cyan:   #00bfff;
  --green:  #90EE90;
  --indigo: #8b85ec;

  /* Chrome, fixed in the app and fixed here (Colors.swift). */
  --silver: #c7ccd4;
  --white:  #f5f7fa;

  /* -- Tab identity. Each tab owns a deep tone and a lit one. ---------------- */
  --tab-blue:      #15448f;
  --tab-blue-hi:   #2f6fe0;
  --tab-indigo:    #2f2c9e;
  --tab-indigo-hi: #5a54e0;
  --tab-maroon:    #77202a;
  --tab-maroon-hi: #a63e44;
  --maroon-soft:   #c9646b;

  /* -- Ground. Three near-blacks, one per tab. The page stands on the Tasks
        one and borrows the other two for the sections that belong to them. -- */
  --bg:           #0e0e10;
  --bg-braindump: #0c0c0e;
  --bg-reflect:   #0d0c0d;

  /* -- Ink. ----------------------------------------------------------------- */
  --ink:       var(--white);
  --ink-quiet: var(--silver);
  --ink-faint: rgba(199, 204, 212, .58);

  /* -- Glass, from TTOGlass.swift. ------------------------------------------
        The modifier stacks a blur, a white tint lit from the top, a hairline
        border that is brightest on its top edge, and one drop shadow. These are
        that stack, component by component, so a surface here is assembled the
        same way a surface in the app is. */
  --glass-blur:   9px;                       /* the prototype's backdrop-filter */
  --glass-top:    rgba(255, 255, 255, .075); /* tint gradient, 0%   */
  --glass-mid:    rgba(255, 255, 255, .020); /* tint gradient, 55%  */
  --glass-bot:    rgba(255, 255, 255, .012); /* tint gradient, 100% */
  --edge-lit:     rgba(255, 255, 255, .14);  /* strokeOpacity          */
  --edge-hair:    rgba(255, 255, 255, .039); /* strokeOpacity × 0.28   */
  --glass-shadow: 0 8px 18px rgba(0, 0, 0, .5);

  /* -- Radii, from TTORadius. Five steps, far enough apart to be deliberate.
        The rule is the role, not the size. ---------------------------------- */
  --r-chip:  6px;
  --r-card:  12px;
  --r-panel: 16px;
  --r-sheet: 20px;
  --r-stage: 26px;

  /* -- Type, from TTOSize. ---------------------------------------------------
        The app's scale is in points, for text held a foot from your face inside
        a 393pt-wide phone. A page read at arm's length needs more, so each step
        is carried up by about two points. What is kept is the shape of the
        scale: the five small steps a point apart, and the deliberate gulf
        before the two large ones — a heading is a different kind of text, not a
        slightly bigger label. */
  --t-micro:   11px;  /* 10 — timestamps, the smallest print   */
  --t-tiny:    12px;  /* 11 — captions, a line under something */
  --t-small:   13px;  /* 12 — chips, quiet remarks             */
  --t-base:    15px;  /* 13 — ordinary interface text          */
  --t-strong:  17px;  /* 14 — read this one first              */
  --t-title:   24px;  /* 20 — a section's heading              */
  --t-display: 34px;  /* 23 — the one biggest thing            */

  /* -- Rhythm. The app's own spacing is per-surface rather than a named scale,
        so this is a plain 4pt ladder — the grid everything in the app already
        lands on. ------------------------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --page: 980px;   /* the widest the content ever gets */
  --gutter: 20px;  /* the side margin on a phone       */
}

/* ===========================================================================
   Ground
   =========================================================================== */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: Quicksand, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The living background, from TTOBackground.swift: a dot grid and two soft
   corner glows. Fixed rather than scrolling, because in the app this sits
   behind the whole tab stack and the content moves over it.

   The app's grid drifts at 0.55 of the board's pan, which is what reads as
   depth instead of one flat sheet. Nothing here pans, so the grid is still. */
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.4px)
   at 24×24, offset 12,6 — the Brain Dump floor, exactly. */
.ground::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.4px);
  background-size: 24px 24px;
  background-position: 12px 6px;
}

/* The two glows. Sized off the prototype's 393pt design width, so they hold
   their proportions on a monitor the way they do on a phone. */
.ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 42% at 12% -6%,  rgba(0, 191, 255, .09), transparent 62%),
    radial-gradient(68% 50% at 90% 112%, rgba(21, 68, 143, .18), transparent 60%);
}

/* ===========================================================================
   Frosted glass — the one surface the whole app is built from
   =========================================================================== */

.glass {
  position: relative;
  background-color: rgba(255, 255, 255, .028);
  background-image: linear-gradient(
    to bottom,
    var(--glass-top) 0%,
    var(--glass-mid) 55%,
    var(--glass-bot) 100%
  );
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-panel);
  box-shadow: var(--glass-shadow);
}

/* The border is drawn as an overlay rather than a plain `border` because it
   isn't one colour: it is lit along the top edge and a hairline everywhere
   else, which is the whole reason the surface reads as glass catching a light
   rather than as a grey box. TTOGlass fades the top 16% from .14 to .039. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    var(--edge-lit) 0%,
    var(--edge-hair) 16%,
    var(--edge-hair) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ===========================================================================
   Layout
   =========================================================================== */

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow { max-width: 640px; }

/* ===========================================================================
   The bar at the top — the app's nav pill
   =========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--s3) var(--gutter);
  /* The bar has to stay legible over whatever scrolls under it. */
  background: linear-gradient(to bottom, rgba(14, 14, 16, .82), rgba(14, 14, 16, 0));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.topbar__inner {
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: Mali, cursive;
  font-weight: 600;
  font-size: var(--t-strong);
  color: var(--cyan);
  text-decoration: none;
  /* Lit from inside, the way the icon writes it. */
  text-shadow: 0 0 3px rgba(0, 191, 255, .5), 0 0 12px rgba(0, 191, 255, .25);
  white-space: nowrap;
}

.wordmark img {
  width: 26px;
  height: 26px;
  border-radius: var(--r-chip);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.topbar__link {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-quiet);
  text-decoration: none;
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.topbar__link:hover {
  color: var(--white);
  border-color: var(--edge-hair);
}


h1 {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.12;
  margin: 0 0 var(--s2);
}

/* ===========================================================================
   The App Store badge
   ---------------------------------------------------------------------------
   PLACEHOLDER. Apple requires its own badge artwork, which can't be redrawn by
   hand — when the app is approved, download the official badge from
   https://developer.apple.com/app-store/marketing/guidelines/ and replace the
   whole <a class="badge"> element in index.html with it, pointing at the real
   App Store link.
   =========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--white);
  transition: transform .18s ease, box-shadow .18s ease;
}
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .58);
}
.badge:active { transform: translateY(0); }

.badge__glyph {
  width: 26px;
  height: 26px;
  flex: none;
  fill: var(--white);
  opacity: .92;
}

.badge__text {
  text-align: left;
  line-height: 1.2;
}
.badge__sup {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.badge__main {
  display: block;
  font-size: var(--t-strong);
  font-weight: 700;
}

.badge-note {
  font-size: var(--t-tiny);
  color: var(--ink-faint);
  margin: var(--s3) 0 0;
}


/* ===========================================================================
   Sections
   =========================================================================== */

section { padding: var(--s7) 0; }

.section-head {
  text-align: center;
  margin-bottom: var(--s6);
}

h2 {
  font-size: var(--t-title);
  font-weight: 700;
  margin: 0 0 var(--s2);
  letter-spacing: .2px;
}

.section-head p {
  font-size: var(--t-base);
  color: var(--ink-quiet);
  margin: 0 auto;
  max-width: 46ch;
}


/* ===========================================================================
   Landing page
   ---------------------------------------------------------------------------
   Built from the same pieces as the App Store screenshots: a glowing sign
   pinned above the phone, memos pinned around it, and the grid floor the
   splash screen stands on. The memos are the app's own cards: near-black
   board, Mali ink in one of the three accents, a blue pin, and the short tick
   under the pin that every memo carries (BoardMemoView).
   =========================================================================== */

/* The pin. A glossy blue ball, lit from the upper left, casting down. */
.pin {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    #cfe6ff 0%, #5aa2ff 18%, #1f5fe0 48%, #0b2f8a 80%, #061a52 100%);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .5);
}

/* The sign: the splash screen's glowing note, blown up to hold a headline.
   The glow stays soft, a lit edge rather than a neon tube. */
.sign {
  position: relative;
  display: inline-block;
  max-width: 680px;
  padding: 40px clamp(20px, 5vw, 44px) 32px;
  background: linear-gradient(175deg, #16171c 0%, #0e0f12 100%);
  border: 2px solid rgba(0, 191, 255, .72);
  border-radius: 8px;
  box-shadow:
    0 0 18px rgba(0, 191, 255, .26),
    inset 0 0 22px rgba(0, 191, 255, .08),
    0 24px 50px rgba(0, 0, 0, .6);
  transform: rotate(-1.2deg);
}

.sign h1,
.sign h2 {
  margin: 0;
  font-family: Mali, cursive;
  font-weight: 600;
  line-height: 1.18;
  color: #8fe2ff;
  text-shadow: 0 0 12px rgba(0, 191, 255, .5), 0 0 28px rgba(0, 191, 255, .18);
}
.sign h1 { font-size: clamp(32px, 7.4vw, 58px); }
.sign h2 { font-size: clamp(26px, 5.6vw, 42px); }

/* A memo, pinned. */
.note {
  position: absolute;
  z-index: 2;
  width: clamp(132px, 30vw, 200px);
  margin: 0;
  padding: 30px 18px 18px;
  border-radius: 10px;
  background: linear-gradient(172deg, #303137 0%, #26272c 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .45);
  font-family: Mali, cursive;
  font-weight: 500;
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.3;
  text-align: left;
  color: var(--ink);
}
.note::before {                     /* the pin */
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    #cfe6ff 0%, #5aa2ff 18%, #1f5fe0 48%, #0b2f8a 80%, #061a52 100%);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .6);
}
.note::after {                      /* the tick under it */
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 30px;
  height: 2px;
  margin-left: -15px;
  border-radius: 2px;
  background: var(--ink);
  opacity: .45;
}

/* A phone, in the frame the screenshots wear. */
.phone {
  position: relative;
  z-index: 1;
  width: min(300px, 70vw);
  margin: 0 auto;
  padding: 9px;
  border-radius: 48px;
  background: linear-gradient(160deg, #1b1c21, #08080a 40%, #121317);
  box-shadow:
    0 0 0 1.5px #30333b,
    0 0 0 3px #0a0a0c,
    0 30px 70px rgba(0, 0, 0, .7),
    0 0 90px rgba(0, 191, 255, .07);
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 39px;
}

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

/* The floor below is deliberately wider than the page. `overflow-x: hidden`
   on body is not enough to stop it: iOS Safari lets the page pan sideways
   into anything the viewport doesn't clip itself. `clip` cuts it off without
   making main a scroll container. */
main { overflow-x: clip; }

.lp-hero {
  text-align: center;
  padding: var(--s7) 0 0;
}

.lp-lead {
  font-size: var(--t-strong);
  color: var(--ink-quiet);
  max-width: 46ch;
  margin: var(--s6) auto var(--s5);
}

.stage {
  position: relative;
  max-width: 640px;
  margin: var(--s7) auto 0;
  padding-bottom: var(--s7);
}

.note--l { left: 0;  top: 24%; transform: rotate(-4deg); }
.note--r { right: 0; top: 58%; transform: rotate(3.5deg); }

/* The grid floor from the splash screen, running away from you under the
   phone. Wider than the page on purpose: body clips the overflow. */
.floor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1600px;
  height: 420px;
  margin-left: -800px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 191, 255, .34) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(0, 191, 255, .34) 1.5px, transparent 1.5px);
  background-size: 80px 80px;
  background-position: center bottom;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .7) 35%, transparent 85%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .7) 35%, transparent 85%);
}

/* -- The pitch ------------------------------------------------------------- */

.statement {
  text-align: center;
  padding: var(--s8) 0;
}
.statement p {
  margin: 0 auto;
  max-width: 24ch;
  font-family: Mali, cursive;
  font-weight: 500;
  font-size: clamp(26px, 5.4vw, 42px);
  line-height: 1.32;
  color: var(--white);
}
.statement span { color: var(--cyan); }
.statement span:nth-of-type(2) { color: var(--green); }
.statement span:nth-of-type(3) { color: var(--indigo); }

/* -- A feature: words beside the phone that shows it ----------------------- */

.feature {
  display: grid;
  gap: var(--s6);
  align-items: center;
}

.feature__text h2 {
  font-size: var(--t-title);
  line-height: 1.2;
  margin: 0 0 var(--s4);
}
.feature__text p {
  color: var(--ink-quiet);
  font-size: var(--t-strong);
  margin: 0 0 var(--s4);
  max-width: 48ch;
}

/* The tab's name, dressed the way the app's tab bar dresses it. */
.pill {
  display: inline-block;
  margin: 0 0 var(--s4) !important;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: var(--t-small) !important;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--white) !important;
}
.pill--tasks     { background: rgba(47, 111, 224, .28); box-shadow: inset 0 0 0 1px rgba(47, 111, 224, .6); }
.pill--braindump { background: rgba(90, 84, 224, .28);  box-shadow: inset 0 0 0 1px rgba(90, 84, 224, .6); }
.pill--reflect   { background: rgba(166, 62, 68, .30);  box-shadow: inset 0 0 0 1px rgba(166, 62, 68, .65); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 4px 12px;
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-family: Mali, cursive;
  font-size: var(--t-base);
  color: var(--ink);
}

/* -- Five ways to write something down ------------------------------------ */

.lp-head {
  text-align: center;
  margin-bottom: var(--s6);
}
.lp-head h3 {
  font-size: var(--t-title);
  margin: 0 0 var(--s2);
}
.lp-head p {
  color: var(--ink-quiet);
  margin: 0;
}

.tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: var(--s5) var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each tool is a memo on the wall, tilted a little either way. */
.tool {
  position: relative;
  padding: var(--s5) var(--s4) var(--s4);
  border-radius: 10px;
  background: linear-gradient(172deg, #2b2c31 0%, #232428 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .5);
  transform: rotate(-1deg);
}
.tool:nth-child(even) { transform: rotate(1.2deg); }
.tool p { margin: 0; color: var(--ink-quiet); font-size: var(--t-base); line-height: 1.45; }

/* The dock's round button, holding the tool's icon. */
.tool__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s3);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #3a3b41, #1e1f23);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tool__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool .tool__name {
  font-family: Mali, cursive;
  font-weight: 600;
  font-size: var(--t-strong);
  color: var(--ink);
  margin-bottom: var(--s1);
}

/* -- Closing --------------------------------------------------------------- */

.lp-close {
  text-align: center;
  padding: var(--s8) 0 var(--s7);
}
.sign--close { max-width: 600px; }
.sign--close p {
  margin: var(--s3) 0 0;
  font-family: Mali, cursive;
  font-weight: 500;
  font-size: clamp(19px, 3.6vw, 24px);
  color: var(--white);
}
.signoff {
  font-family: Mali, cursive;
  font-weight: 500;
  font-size: var(--t-title);
  color: var(--cyan);
  margin: var(--s7) 0 var(--s5);
}

/* -- Arrival --------------------------------------------------------------
   Each section settles in once as it scrolls into view and then stays put.
   Only when scripting is on, so nothing is ever hidden without a way back. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ===========================================================================
   Support page
   ---------------------------------------------------------------------------
   Same tokens, lighter hand: no glows behind sections, less glass, more room.
   =========================================================================== */

.doc { padding: var(--s6) 0 var(--s7); }

.doc h1 { text-align: center; }

.doc__lead {
  text-align: center;
  color: var(--ink-quiet);
  font-size: var(--t-strong);
  margin: 0 auto var(--s7);
  max-width: 42ch;
}

.faq { display: grid; gap: var(--s3); }

/* <details> rather than a script: the browser already knows how to open and
   close one, and it stays open when someone prints or searches the page. */
.faq details {
  border-radius: var(--r-card);
  padding: 0;
  overflow: hidden;
  /* Lighter than the glass on the landing page — enough of an edge to tell one
     question from the next, and no blur, because there is nothing behind these
     worth seeing through to. */
  background: rgba(255, 255, 255, .022);
  border: 1px solid rgba(255, 255, 255, .055);
  transition: border-color .18s ease, background-color .18s ease;
}
.faq details:hover { border-color: var(--edge-hair); }
.faq details[open] {
  background: rgba(255, 255, 255, .034);
  border-color: var(--edge-hair);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s5);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.faq summary::-webkit-details-marker { display: none; }

/* The chevron turns instead of swapping glyph, so nothing jumps. */
.faq summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq details > div {
  padding: 0 var(--s5) var(--s4);
  color: var(--ink-quiet);
  font-size: var(--t-base);
}
.faq details > div p { margin: 0 0 var(--s3); }
.faq details > div p:last-child { margin-bottom: 0; }

.contact {
  margin-top: var(--s6);
  padding: var(--s5);
  border-radius: var(--r-panel);
  text-align: center;
}

.contact h2 { margin-bottom: var(--s2); }
.contact p { color: var(--ink-quiet); margin: 0 0 var(--s4); }

.contact__mail {
  font-family: Mali, cursive;
  font-weight: 600;
  font-size: var(--t-title);
  color: var(--cyan);
  text-decoration: none;
  word-break: break-word;
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
}
.contact__mail:hover { border-bottom-color: var(--cyan); }

.contact__note {
  font-size: var(--t-tiny);
  color: var(--ink-faint);
  margin: var(--s4) 0 0;
}

/* ===========================================================================
   Footer
   =========================================================================== */

footer {
  padding: var(--s6) var(--gutter) var(--s7);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .05);
  margin-top: var(--s6);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s5);
  margin: 0 0 var(--s4);
  padding: 0;
  list-style: none;
}

footer a {
  color: var(--ink-quiet);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}
footer a:hover { color: var(--white); }

.footer__fine {
  font-size: var(--t-tiny);
  color: var(--ink-faint);
  margin: 0;
}

a { color: var(--cyan); }

/* Focus has to be visible, and the app's own accent is the obvious ring. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-chip);
}


/* ===========================================================================
   Wider screens
   ---------------------------------------------------------------------------
   Phone layout is the one above; these only add room. Most of the traffic
   arrives from an App Store listing on a phone.
   =========================================================================== */

@media (min-width: 600px) {
  :root {
    --t-display: 46px;
    --t-title: 30px;
    --gutter: 32px;
  }
}

@media (min-width: 860px) {
  /* A feature becomes words beside the phone, alternating sides so the eye
     has somewhere new to land each time. */
  .feature {
    grid-template-columns: 1fr 300px;
    gap: var(--s8);
    padding: var(--s8) 0;
  }
  .feature--flip .phone { order: -1; }
  .feature .phone { width: 300px; }
  .tools { padding: var(--s7) 0 var(--s8); }
  .stage { padding-bottom: var(--s8); }
  .note--l { left: -10px; }
  .note--r { right: -10px; }
}

/* Somebody who has asked their phone to stop animating things gets a page that
   doesn't. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}