/* Shared look for the capability pages (/i, /v, /g, /q). Same tokens as
   constants/colors.ts — keep in step by hand; this is the only CSS on the site. */
:root{
  --cream:#EDE6D8; --warm-white:#F5EFE2; --warm-white-hi:#FBF6EA;
  --ink:#3D2C20; --ink-mid:#5C4D3F; --ink-light:#6E6154;
  --sage:#8FA08A; --sage-dark:#6E8068; --sage-soft:#DCE3D8; --sage-light:#B5C2B0;
  --gold:#B89968; --gold-dark:#9A7E50; --gold-soft:#EFE3CD;
  --cream-deep:#E2D8C5;
  --border-soft:#E6DEC9; --danger:#9A4F3F;
  /* Mic glyph, masked so it takes the button's foreground colour. Matches the
     MaterialCommunityIcons "microphone" the app draws on its own record button. */
  --mic:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11z'/%3E%3C/svg%3E");
  /* The disc's four glyphs, masked so each takes the button's foreground
     colour — the MaterialCommunityIcons the app draws inside RecorderDisc. */
  --mic:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11z'/%3E%3C/svg%3E");
  --stop:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5' fill='%23000'/%3E%3C/svg%3E");
  --play:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5.14v13.72L19 12z'/%3E%3C/svg%3E");
  --pause:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 19h4V5h-4M6 19h4V5H6z'/%3E%3C/svg%3E");
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* The `hidden` ATTRIBUTE is how every page here shows and hides things, and the
   UA rule behind it (display:none) is beaten by any author rule that sets
   display — which .rec (flex) and .answer-photo (block) both do. That is how a
   recorder mid-recording and an empty photo frame reading "The photo you
   added" both ended up on screen beside the player they had been replaced by.
   Attribute wins, always. */
[hidden]{display:none!important}
body{background:var(--cream);color:var(--ink-mid);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:560px;margin:0 auto;padding:0 20px}
header{padding:24px 0;text-align:center}
/* The mark sits with the word, everywhere. The doc pages already carried the
   logo but the shared rule did not lay it out, so it sat on the text baseline;
   the capability pages (/i /v /g /q /s) had no mark at all — the one set of
   pages a stranger meets Cognom on for the first time, wearing nothing but a
   word. Same treatment as the marketing page's header. */
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:.5px}
.brand img,.brand .mark{width:27px;height:auto;display:block;overflow:visible}
/* If the inline swap never happens — scripts off, the fetch blocked — hover
   still answers, on the one element CSS can reach. */
.brand img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:scale(1.08)}
/* Hover runs the launch screen's wave (see web/_brand.js): a pass crosses the
   crown left to right, each disc swelling and settling. It replaced a tilt of
   the whole mark — a leaning tree is not something this product does anywhere
   else, and the app already has a motion for this exact artwork.

   The SPLASH swells 8%. Copying that number here produced nothing visible, and
   the reason is arithmetic: the mark is 27px wide against a 420-unit viewBox,
   so its largest disc renders about 4.4px across and 8% of that is a third of
   a pixel. On the launch screen the same disc is ~60px and 8% is a real 5px.
   A proportion that reads at full size is sub-pixel at favicon size, so the
   swell is sized for THIS canvas, with a dip in opacity to carry the pass at
   sizes where even this is close to the pixel grid.

   fill-box, or the scale would pivot on the SVG's origin and fling each disc
   across the canvas instead of swelling it in place. */
.brand .mark circle{transform-box:fill-box;transform-origin:center}
.brand:hover .mark circle,.brand:focus-visible .mark circle{animation:leafPop .7s ease-in-out both}
@keyframes leafPop{
  0%{transform:scale(1);opacity:1}
  40%{transform:scale(1.45);opacity:.55}
  100%{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .brand:hover .mark circle,.brand:focus-visible .mark circle{animation:none}
}
.kicker{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:8px}
.lead{text-align:center;font-size:15px;color:var(--ink-mid);margin:12px 0 20px}
.lead strong{color:var(--ink)}
.card{background:var(--warm-white);border-radius:20px;box-shadow:0 3px 10px rgba(61,44,32,.10);margin-bottom:22px;padding:22px 24px 24px}
.card h1{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:24px;line-height:1.3;margin-bottom:10px}
.meta{font-size:13px;color:var(--ink-light);margin-bottom:14px}
.cta-box{background:var(--warm-white-hi);border:1px solid var(--border-soft);border-radius:16px;padding:22px 24px;text-align:center;margin-bottom:40px}
.cta-box h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:19px;margin-bottom:8px}
.cta-box p{font-size:14px;margin-bottom:16px}
.cta{display:inline-block;background:var(--sage);color:#fff;text-decoration:none;padding:12px 28px;border-radius:999px;font-size:15px;border:0;cursor:pointer;font-family:var(--sans)}
.cta:hover{background:var(--sage-dark)}
.cta.secondary{background:transparent;color:var(--sage-dark);border:1px solid var(--sage)}
.cta[disabled]{opacity:.55;cursor:default}
.hint{font-size:12px;color:var(--ink-light);margin-top:12px}
.state{text-align:center;padding:60px 0;font-size:15px;color:var(--ink-light)}
.state h1{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:24px;margin-bottom:10px}
footer{padding:24px 0 40px;text-align:center;font-size:12px;color:var(--ink-light)}
footer a{color:var(--ink-light)}
.error{color:var(--danger);font-size:13px;margin-top:8px;text-align:center}

/* roster chips */
.roster{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0 6px}
.chip{display:flex;flex-direction:column;align-items:center;width:56px;font-size:11px;color:var(--ink-mid)}
.face{width:44px;height:44px;border-radius:50%;background:var(--sage-soft);color:var(--sage-dark);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;overflow:hidden;border:2px solid transparent}
.face img{width:100%;height:100%;object-fit:cover}
.chip.answered .face{border-color:var(--sage)}
.chip .name{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56px}

/* ── The recorder disc ────────────────────────────────────────────────────
   components/ui/RecordingWidgets.tsx (RecorderDisc), in CSS. The app's one
   microphone: waveform above, a 96px disc between two side slots, status
   below, and three phases on the one button — mic, stop, play/pause. GOLD,
   because this is the weekly ritual, which is the tone the weekly card has
   always used (tone="gold"); the rings stay sage, as they do there.

   Geometry is copied, not approximated: 180 tall, wave at top:8, status at
   bottom:8, disc 96/48, icon 40, Redo pill 11x24 on cream-deep. */
.disc{position:relative;width:100%;height:180px;display:flex;align-items:center;justify-content:center}
.disc-row{display:flex;align-items:center;justify-content:center;width:100%}
.disc-side{flex:1;display:flex;align-items:center;justify-content:center}
.disc-mic{position:relative;width:96px;height:96px;flex:none;display:flex;align-items:center;justify-content:center}

.disc-btn{width:96px;height:96px;border-radius:50%;border:0;background:var(--gold);box-shadow:0 4px 12px rgba(184,153,104,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,background .18s ease;padding:0}
.disc-btn:active{transform:scale(.93)}
.disc-btn::before{content:'';width:40px;height:40px;background:var(--warm-white-hi);
  -webkit-mask:var(--mic) center/contain no-repeat;mask:var(--mic) center/contain no-repeat}
.disc.on .disc-btn{background:var(--gold-dark)}
.disc.on .disc-btn::before{-webkit-mask-image:var(--stop);mask-image:var(--stop)}
.disc.done .disc-btn{background:var(--warm-white);border:2.5px solid var(--gold);box-shadow:none}
.disc.done .disc-btn::before{background:var(--gold);-webkit-mask-image:var(--play);mask-image:var(--play)}
.disc.done.playing .disc-btn::before{-webkit-mask-image:var(--pause);mask-image:var(--pause)}

/* Two rings pulsing outward while it listens — 1 → 1.9 over 1.1s, the second
   420ms behind, exactly the loop PulsingRings runs. */
.disc-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--sage);opacity:0;pointer-events:none}
.disc-ring:nth-of-type(2){border-color:var(--sage-light)}
.disc.on .disc-ring{animation:discPulse 1.1s linear infinite}
.disc.on .disc-ring:nth-of-type(2){animation-name:discPulse2;animation-delay:.42s}
@keyframes discPulse{
  0%{transform:scale(1);opacity:0}
  18%{opacity:.45}
  100%{transform:scale(1.9);opacity:0}
}
/* The trailing ring is lighter and dimmer, as PulsingRings makes it. */
@keyframes discPulse2{
  0%{transform:scale(1);opacity:0}
  18%{opacity:.3}
  100%{transform:scale(1.9);opacity:0}
}

/* Ten bars, 3px wide, rising and falling out of step. */
.disc-wave{position:absolute;top:8px;left:0;right:0;height:32px;display:flex;align-items:center;justify-content:center;gap:4px}
.disc-wave i{display:block;width:3px;height:3px;border-radius:2px;background:var(--sage)}
.disc.on .disc-wave i{animation:discWave .6s ease-in-out infinite alternate}
.disc-wave i:nth-child(1){animation-delay:0s}
.disc-wave i:nth-child(2){animation-delay:.08s}
.disc-wave i:nth-child(3){animation-delay:.16s}
.disc-wave i:nth-child(4){animation-delay:.24s}
.disc-wave i:nth-child(5){animation-delay:.32s}
.disc-wave i:nth-child(6){animation-delay:.40s}
.disc-wave i:nth-child(7){animation-delay:.48s}
.disc-wave i:nth-child(8){animation-delay:.56s}
.disc-wave i:nth-child(9){animation-delay:.64s}
.disc-wave i:nth-child(10){animation-delay:.72s}
@keyframes discWave{from{height:3px}to{height:27px}}

.disc-status{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:14px;color:var(--ink-mid)}
.redo-btn{background:var(--cream-deep);border:0;border-radius:999px;padding:11px 24px;font-size:14px;line-height:1.2;color:var(--ink-mid);letter-spacing:.3px;font-weight:500;cursor:pointer;font-family:var(--sans)}
.redo-btn:hover{background:var(--border-soft)}

@media (prefers-reduced-motion:reduce){
  .disc.on .disc-ring{animation:none;opacity:.35}
  .disc.on .disc-wave i{animation:none;height:14px}
}

/* the picked photo, reviewed before it is sent */
.answer-photo{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:14px;margin:4px 0 14px;background:var(--sage-soft)}

/* player — /v and /g still use the row form (a card, not a recorder) */
.player{display:flex;align-items:center;gap:14px;margin:10px 0 14px}
.play{width:52px;height:52px;border-radius:50%;background:var(--sage);border:0;color:#fff;font-size:20px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.play::before{content:'▶';margin-left:3px}
.playing .play::before{content:'❚❚';margin-left:0;font-size:15px}
.track{flex:1}
.bar-bg{height:6px;border-radius:3px;background:var(--sage-soft);overflow:hidden}
.bar{height:100%;width:0;background:var(--sage)}
.time{font-size:12px;color:var(--ink-light);margin-top:6px}
.captions{font-size:16px;line-height:1.7;color:var(--ink-light);font-family:var(--serif)}
.captions span.on{color:var(--ink)}

/* Quiet actions. A default browser link — blue, underlined — belongs to no
   page on this site; these are actions, and they read as the app's. */
.hint a,.error a{color:var(--sage-dark);text-decoration:none;font-weight:600}
.hint a:hover{color:var(--ink)}
/* "Add a photo" — an action that adds something, so it takes a shape. */
.chip-btn{display:inline-block;padding:7px 16px;border:1px solid var(--sage);border-radius:999px;color:var(--sage-dark);text-decoration:none;font-size:13px;font-weight:600;line-height:1.4}
.chip-btn:hover{background:var(--sage-soft);color:var(--sage-dark)}
/* "Record again", "remove it" — undo affordances, deliberately quieter. */
.quiet-btn{color:var(--ink-light);text-decoration:none;font-weight:400}
.quiet-btn:hover{color:var(--ink-mid)}

/* "Email me when it opens" — what stands in for the store button until there
   is a listing (see storeCta in web/_lib.js). Sized like the CTA it replaces,
   so the page's shape does not change when the real button arrives. */
/* Full width of its flex line, so it is alone on one: flex-basis is clamped
   by max-width when the hypothetical size is worked out, so a 380px cap made
   the form measure 380px and sit on the SAME line as "See how it works",
   pushing the pair off centre. The cap belongs on the row inside it. */
.waitlist{width:100%;flex-basis:100%;text-align:center}
.waitlist-lead{font-size:13px;color:var(--ink-light);margin-bottom:10px;line-height:1.5}
.waitlist-row{display:flex;gap:8px;align-items:stretch;max-width:380px;margin:0 auto}
.waitlist-row input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--border-soft);border-radius:999px;background:var(--warm-white-hi);font-size:16px;color:var(--ink);font-family:var(--sans)}
.waitlist-row .cta{padding:12px 20px;white-space:nowrap}
.waitlist-note{font-size:13px;color:var(--ink-mid);margin-top:10px;line-height:1.5}
@media (max-width:420px){
  .waitlist-row{flex-direction:column}
  .waitlist-row .cta{width:100%}
}

/* forms */
.field{margin-bottom:12px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--border-soft);border-radius:12px;background:var(--warm-white-hi);font-size:16px;color:var(--ink);font-family:var(--sans)}

/* The trademark mark. ™ needs no registration — it asserts a claim, where ®
   would assert a grant we do not have yet.
   Once, on the most prominent mention (the header brand on the landing page),
   and nowhere else: on every heading it reads as clutter, and next to the
   splash wordmark at phone size it reads as a rendering fault.
   aria-hidden, because a screen reader announcing "Cognom trade mark" on a
   nav link is noise, not information. Half size and raised, because the glyph
   is drawn at full cap height in the serif and otherwise sits like a typo. */
.tm { font-size: .5em; vertical-align: super; line-height: 0; letter-spacing: 0; opacity: .7; }