/* amrin · mono paper theme, dimensional edition.
   Ivory + ink + one ember accent. White cards with ink borders and hard offset
   shadows, 3D tilt, live product widgets, film grain. Editorial but alive. */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* buttons and fields don't inherit the page font: without this the demo's ↑ and the modal's × rendered in Arial */
button, input, select, textarea { font-family: inherit; }

:root {
  --paper: #F6F4EE;
  --card: #FFFEFA;
  --ink: #17150F;
  --dim: #6E6A5E;
  --line: rgba(23, 21, 15, 0.16);
  --line-2: rgba(23, 21, 15, 0.4);
  --ember: #E8551E;
  --ember-text: #B8411A;   /* ember for text under 18px: #E8551E is 3.3-3.6:1 on the light cards, this is 5.0-5.5:1 */
  --ember-soft: rgba(232, 85, 30, 0.08);
  --mango: #FBB460;         /* the mango's own gradient (static/brand/mango.svg), for orange-to-light sweeps */
  --mango-light: #FFE3AE;
  --ok: #2C7A3F;            /* the "works right away" dot */
  --imsg: #0A84FF;          /* the "iMessage, some on Telegram too" dot */
  /* type scale (design audit 2026-11-01): every landing text sits on one of these */
  --fs-xs: 0.75rem;        /* 12px, the floor for any text */
  --fs-sm: 0.875rem;       /* 14px */
  --fs-base: 1rem;         /* 16px */
  --fs-lg: 1.125rem;       /* 18px */
  --fs-xl: 1.5rem;         /* 24px */
  --fs-2xl: 2rem;          /* 32px */
  --fs-display: clamp(2.1rem, 5vw, 3.6rem);   /* section headings and the numbers band; the hero keeps its own size */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;
  --shadow-sm: 2px 2px 0 var(--shadow-c); --shadow-md: 4px 4px 0 var(--shadow-c); --shadow-lg: 6px 6px 0 var(--shadow-c);
  --tint-peach: #FFE6D3; --tint-sky: #DDEBFF; --tint-mint: #DDF3D6; --tint-lilac: #E9E2FF; --tint-lemon: #FFF2BF;
  --tap-min: 44px;
  --shadow-c: rgba(23, 21, 15, 0.92);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.2, 1.2, 0.3, 1);
}

html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* grain backdrop (reuses the .aurora node) */
.aurora {
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--paper);
  /* mango wallpaper (faint, drawn not emoji) under the film grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22360%22 height=%22360%22 viewBox=%220 0 360 360%22%3E%3Cg transform=%22translate(95 105) rotate(-22) scale(0.95)%22%3E%3Cpath d=%22M-38-14C-50-44-14-62 14-50C40-40 54-10 46 22C38 52 8 66-14 54C-30 46-36 26-38-14Z%22 fill=%22%23FF9A2E%22 fill-opacity=%220.26%22 stroke=%22%23C2521A%22 stroke-opacity=%220.28%22 stroke-width=%222.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-6-52C-4-62 2-68 10-70%22 fill=%22none%22 stroke=%22%2317150F%22 stroke-opacity=%220.16%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2-58C14-72 36-70 46-58C34-50 14-50 2-58Z%22 fill=%22%232F7A3F%22 fill-opacity=%220.22%22/%3E%3Cpath d=%22M-22-2C-24 14-16 30-4 40%22 fill=%22none%22 stroke=%22%23E8551E%22 stroke-opacity=%220.3%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(268 255) rotate(28) scale(0.8)%22%3E%3Cpath d=%22M-38-14C-50-44-14-62 14-50C40-40 54-10 46 22C38 52 8 66-14 54C-30 46-36 26-38-14Z%22 fill=%22%23FF9A2E%22 fill-opacity=%220.26%22 stroke=%22%23C2521A%22 stroke-opacity=%220.28%22 stroke-width=%222.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-6-52C-4-62 2-68 10-70%22 fill=%22none%22 stroke=%22%2317150F%22 stroke-opacity=%220.16%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2-58C14-72 36-70 46-58C34-50 14-50 2-58Z%22 fill=%22%232F7A3F%22 fill-opacity=%220.22%22/%3E%3Cpath d=%22M-22-2C-24 14-16 30-4 40%22 fill=%22none%22 stroke=%22%23E8551E%22 stroke-opacity=%220.3%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(300 72) rotate(10) scale(0.48)%22%3E%3Cpath d=%22M-38-14C-50-44-14-62 14-50C40-40 54-10 46 22C38 52 8 66-14 54C-30 46-36 26-38-14Z%22 fill=%22%23FF9A2E%22 fill-opacity=%220.26%22 stroke=%22%23C2521A%22 stroke-opacity=%220.28%22 stroke-width=%222.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-6-52C-4-62 2-68 10-70%22 fill=%22none%22 stroke=%22%2317150F%22 stroke-opacity=%220.16%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2-58C14-72 36-70 46-58C34-50 14-50 2-58Z%22 fill=%22%232F7A3F%22 fill-opacity=%220.22%22/%3E%3Cpath d=%22M-22-2C-24 14-16 30-4 40%22 fill=%22none%22 stroke=%22%23E8551E%22 stroke-opacity=%220.3%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(70 298) rotate(-45) scale(0.42)%22%3E%3Cpath d=%22M-38-14C-50-44-14-62 14-50C40-40 54-10 46 22C38 52 8 66-14 54C-30 46-36 26-38-14Z%22 fill=%22%23FF9A2E%22 fill-opacity=%220.26%22 stroke=%22%23C2521A%22 stroke-opacity=%220.28%22 stroke-width=%222.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-6-52C-4-62 2-68 10-70%22 fill=%22none%22 stroke=%22%2317150F%22 stroke-opacity=%220.16%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2-58C14-72 36-70 46-58C34-50 14-50 2-58Z%22 fill=%22%232F7A3F%22 fill-opacity=%220.22%22/%3E%3Cpath d=%22M-22-2C-24 14-16 30-4 40%22 fill=%22none%22 stroke=%22%23E8551E%22 stroke-opacity=%220.3%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 360px 360px, 140px 140px;
  background-position: 0 0, 0 0;
}
.aurora i { display: none; }

.hidden { display: none !important; }
.muted { color: var(--dim); font-size: 0.95rem; }
.error { color: var(--ember-text); margin-top: 0.8rem; font-weight: 500; font-size: 0.92rem; }
.success { color: #2c7a3f; margin-top: 0.5rem; font-weight: 600; }
.center { text-align: center; }
.footnote { font-size: 0.85rem; color: var(--dim); }

.grad-text { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--ember); letter-spacing: -0.01em; }

/* ═════════ wordmark & buttons ═════════ */
.wordmark { display: flex; align-items: center; gap: 0.55rem; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.01em; }
.wordmark.sm { font-size: 1.15rem; }
.mark {
  font-size: 1.15rem; line-height: 1;
  animation: wobble 3.5s ease-in-out infinite;
}
.wordmark.sm .mark { font-size: 0.95rem; }
/* rin's face: the mango icon stands in for the 🥭 emoji wherever rin herself is shown.
   Sized in em so it follows the surrounding font-size (.mark), or fills its avatar frame. */
.rin-ico { display: block; width: 1.6em; height: 1.6em; border-radius: 26%; object-fit: cover; flex-shrink: 0; }
.ph-ava, .chat-ava, .msg-ava, .app-dot.core { overflow: hidden; }
.ph-ava .rin-ico, .chat-ava .rin-ico, .msg-ava .rin-ico, .app-dot .rin-ico { width: 100%; height: 100%; border-radius: inherit; }
.modal-mark .rin-ico { width: 60px; height: 60px; margin: 0 auto; border-radius: 22px; box-shadow: 3px 3px 0 var(--ink); }
@keyframes markPulse { 50% { box-shadow: 0 0 0 6px var(--ember-soft); } }
@keyframes wobble { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-9deg) scale(1.1); } }

.btn-glow {
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.6rem;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer;
  text-decoration: none;
  transition: background 0.25s var(--ease), border-color 0.25s, transform 0.25s var(--spring), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn-glow i { font-style: normal; transition: transform 0.25s var(--ease); }
.btn-glow:hover { background: var(--ember); border-color: var(--ember); box-shadow: 4px 4px 0 var(--shadow-c); transform: translate(-2px, -2px); }
.btn-glow:hover i { transform: translateX(4px); }
.btn-glow:active { transform: none; box-shadow: none; }
.btn-glow:disabled { opacity: 0.55; cursor: wait; }
.btn-glow.lg { padding: 0.95rem 2rem; font-size: 1.02rem; }
.btn-glow.wide { width: 100%; justify-content: center; }

.btn-glass {
  font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  padding: 0.72rem 1.4rem;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer;
  transition: box-shadow 0.22s var(--ease), transform 0.22s var(--spring), background 0.2s;
}
.btn-glass:hover { box-shadow: 4px 4px 0 var(--shadow-c); transform: translate(-2px, -2px); }
.btn-glass:active { transform: none; box-shadow: none; }
.btn-glass.lg { padding: 0.95rem 1.9rem; font-size: 1rem; }
.btn-glass.sm { padding: 0.5rem 1rem; font-size: 0.84rem; }

.link-btn { background: none; border: none; font-family: var(--sans); font-weight: 500; font-size: 0.95rem; color: var(--dim); cursor: pointer; transition: color 0.2s; }
.link-btn:hover { color: var(--ink); }

/* ═════════ nav ═════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem clamp(1.4rem, 5vw, 4rem);
  background: var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.nav .wordmark { color: var(--paper); }
.nav-links { display: flex; gap: 1.7rem; align-items: center; }
.nav-links a { color: rgba(246, 244, 238, 0.65); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--paper); }
.nav .link-btn { color: rgba(246, 244, 238, 0.65); }
.nav .link-btn:hover { color: var(--paper); }
.nav-cta { display: flex; gap: 1rem; align-items: center; }
.nav .btn-glow { background: var(--ember-text); border-color: var(--ember-text); color: var(--paper); }
.nav .btn-glow:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: none; }

/* ═════════ hero ═════════ */
.hero {
  position: relative;
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  max-width: 1240px; margin: 0 auto;
  padding: clamp(3rem, 9vh, 6rem) clamp(1.4rem, 5vw, 4rem) clamp(3.5rem, 9vh, 6rem);
}

.reveal-now { animation: fadeUp 0.9s var(--ease) both; }
.reveal-now.d1 { animation-delay: 0.08s; }
.reveal-now.d2 { animation-delay: 0.18s; }
.reveal-now.d3 { animation-delay: 0.28s; }
.reveal-now.d4 { animation-delay: 0.38s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } }

.badge-line {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim);
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0.45rem 0.95rem; margin-bottom: 1.4rem;
  background: var(--card);
  box-shadow: 3px 3px 0 var(--shadow-c);
}
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); animation: markPulse 1.8s ease-in-out infinite; }

.hero-h {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.9rem, 6.8vw, 5.4rem);
  line-height: 1.0; letter-spacing: -0.03em;
}
.hero-sub { margin: 1.3rem 0 1.9rem; max-width: 30rem; color: var(--dim); font-size: var(--fs-lg); line-height: 1.7; }
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.6rem; font-family: var(--mono); font-size: 0.78rem; color: var(--dim); }

/* ── 3D widget cluster ── */
.stage3d { perspective: 1200px; }
.cluster {
  position: relative; height: clamp(420px, 46vw, 520px);
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  animation: fadeUp 1s 0.3s var(--ease) both;
}

.w-card {
  position: absolute;
  background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 16px;
  box-shadow: 6px 6px 0 var(--shadow-c);
  padding: 1.1rem 1.2rem;
  animation: floatCard 7s ease-in-out infinite;
}
@keyframes floatCard { 50% { transform: translateY(-10px); } }

.wc-chat { left: 2%; top: 6%; width: min(340px, 78%); animation-delay: -1s; rotate: -1.5deg; }
.wc-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.8rem; }
.wc-ava { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.wc-live { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; color: var(--ember); }
.wc-bubble {
  border-radius: 12px; padding: 0.55rem 0.85rem; font-size: 0.88rem; line-height: 1.45;
  margin-bottom: 0.5rem; max-width: 95%;
}
.wc-bubble.user { background: var(--ink); color: var(--paper); margin-left: auto; border-bottom-right-radius: 4px; }
.wc-bubble.bot { background: var(--paper); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.wc-bubble.mono { font-family: var(--mono); font-size: 0.78rem; color: var(--ember); border-style: dashed; }
.caret { display: inline-block; width: 7px; height: 1em; background: var(--ember); vertical-align: text-bottom; margin-left: 2px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.wc-goal { right: 4%; top: 0; width: 190px; text-align: center; animation-delay: -3s; rotate: 2deg; }
.wc-title { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.6rem; }
.wc-foot { font-size: 0.85rem; color: var(--dim); margin-top: 0.5rem; }

.ring-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.ring-wrap.sm { width: 84px; height: 84px; margin: 1rem 0 0; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring-bg { stroke: rgba(23, 21, 15, 0.1); }
.ring-fg {
  stroke: var(--ember);
  stroke-dasharray: 226; stroke-dashoffset: 226;
  transition: stroke-dashoffset 1.4s var(--ease) 0.3s;
}
.visible .ring-fg, .cluster .ring-fg { stroke-dashoffset: 56.5; } /* 75% */
.ring-wrap b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }
.ring-wrap b small { font-size: 0.85rem; color: var(--dim); font-weight: 400; }

.wc-toast {
  right: 10%; top: 52%; width: 240px;
  display: flex; align-items: center; gap: 0.7rem;
  animation-delay: -5s; rotate: -1deg;
}
.toast-ico { font-size: 1.15rem; }
.wc-toast b, .demo-toast b { display: block; font-size: 0.92rem; font-weight: 700; }
.wc-toast small, .demo-toast small { color: var(--dim); font-size: 0.78rem; }
.toast-ok { margin-left: auto; color: var(--ember); font-weight: 800; animation: okPop 3.5s ease-in-out infinite; }
@keyframes okPop { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.5); } 86% { transform: scale(1); } }

.wc-mem { left: 8%; top: 62%; width: 235px; animation-delay: -2s; rotate: 1.5deg; }
.chip {
  display: inline-block; margin: 0.22rem 0.25rem 0 0;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 0.32rem 0.7rem;
  font-size: 0.8rem; font-weight: 500;
  transition: all 0.2s var(--spring);
}
.chip:hover { border-color: var(--ink); box-shadow: 2px 2px 0 var(--shadow-c); transform: translate(-1px, -1px); }

.wc-apps { left: 38%; top: 88%; display: flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1rem; animation-delay: -4s; rotate: -0.5deg; }
.app-dot {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.app-dot.core { background: var(--ink); border-color: var(--ink); font-size: 1.05rem; box-shadow: 0 0 0 3px var(--ember-soft); }
.link-line { width: 26px; height: 2px; background: linear-gradient(90deg, transparent, var(--ember), transparent); background-size: 200% 100%; animation: lineflow 2s linear infinite; }
@keyframes lineflow { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ═════════ marquee ═════════ */
.marquee { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background: var(--card); overflow: hidden; white-space: nowrap; padding: 0.85rem 0; }
.marq-track { display: inline-block; animation: marq 38s linear infinite; }
.marquee:hover .marq-track { animation-play-state: paused; }
.marq-track span { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═════════ reveal ═════════ */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s ease, transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ═════════ sections ═════════ */
.sec-h {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-display); letter-spacing: -0.025em; line-height: 1.06;
  text-align: center; margin-bottom: 2.8rem; text-wrap: balance;
}

.features { max-width: 1140px; margin: 0 auto; padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1.4rem, 5vw, 3rem); }
.f-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1.5rem; }
.see-all-link {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 2.2rem auto 0; width: fit-content;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--ink);
  text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 0.2rem;
  transition: color 0.2s, border-color 0.2s, gap 0.2s;
}
.see-all-link i { font-style: normal; transition: transform 0.2s var(--ease); }
.see-all-link:hover { color: var(--ember); border-color: var(--ember); }
.see-all-link:hover i { transform: translateX(4px); }

/* ── ability cards — shared by the homepage preview and /help's full list ── */
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0.9rem; }
.ab-card {
  position: relative; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-md);
  padding: 1.1rem 1.15rem 1rem; box-shadow: 4px 4px 0 var(--shadow-c);
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--spring);
  min-width: 0; overflow-wrap: break-word;
}
.ab-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-c); }
.ab-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.ab-ico {
  width: 34px; height: 34px; border-radius: 9px; background: var(--paper); border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
/* the same dot + word as /help's legend, so a card's tag and the legend read as one key (design audit 2026-11-01) */
.ab-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; margin-top: 0.2rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.ab-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dim); }
.ab-tag.on::before { background: var(--ok); }
.ab-tag.connect::before { background: var(--ember); }
.ab-tag.imsg::before { background: var(--imsg); }      /* iMessage, and the tag says if Telegram too */
.ab-card h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.35rem; line-height: 1.25; }
.ab-card p { color: var(--dim); font-size: var(--fs-sm); line-height: 1.45; }

/* rin on every card: the mango, holding the card's own thing (its emoji), sitting half above the top edge.
   The grid leaves room above each row for her top half, the card below it for her bottom half. */
.rin-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ab-grid { row-gap: 4.3rem; padding-top: 3.3rem; }   /* room for the tallest hats and held-up props */
.ab-card { padding-top: 3.1rem; }
.ab-card .ab-top { margin-bottom: 0; }
.ab-card .ab-ico {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -54%);
  width: 84px; height: 90px; border: 0; border-radius: 0; background: none; font-size: 1rem;
  transition: transform 0.25s var(--spring);
}
.ab-card .ab-mango { display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 3px 0 rgba(23, 21, 15, 0.1)); }
.ab-card .ab-prop {
  position: absolute; left: 58px; top: 44px; font-size: 1.75rem; line-height: 1; transform: rotate(8deg);
  filter: drop-shadow(0 2px 1px rgba(23, 21, 15, 0.18));
}
.ab-card:hover .ab-ico { transform: translate(-50%, -60%) rotate(-4deg); }
/* Each mango is drawn for its own ability by static/mangos.js (face, pose, outfit, where it holds the emoji) and
   does its own move on hover. .ab-act wraps the mango and the emoji so the thing she holds moves with her. */
.ab-card .ab-act { position: absolute; inset: 0; transform-origin: 50% 88%; }
.ab-card:is(:hover, :focus-visible) .ab-act { animation: var(--act) infinite; }
.ab-act[data-act="bob"]      { --act: m-bob 0.5s ease-in-out alternate; }
.ab-act[data-act="hop"]      { --act: m-hop 0.7s ease-out; }
.ab-act[data-act="jump"]     { --act: m-jump 0.8s ease-out; }
.ab-act[data-act="nod"]      { --act: m-nod 0.7s ease-in-out; }
.ab-act[data-act="sway"]     { --act: m-sway 1.4s ease-in-out alternate; }
.ab-act[data-act="rock"]     { --act: m-sway 1.8s ease-in-out alternate; }
.ab-act[data-act="droop"]    { --act: m-droop 1.6s ease-in-out alternate; }
.ab-act[data-act="flip"]     { --act: m-flip 1.2s ease-in-out; }
.ab-act[data-act="spin"]     { --act: m-spin 1.1s cubic-bezier(.5, 0, .3, 1); }
.ab-act[data-act="think"]    { --act: m-think 1.6s ease-in-out alternate; }
.ab-act[data-act="ring"]     { --act: m-ring 0.12s linear alternate; }
.ab-act[data-act="scribble"] { --act: m-scribble 0.18s linear alternate; }
.ab-act[data-act="stomp"]    { --act: m-stomp 0.45s ease-in; }
.ab-act[data-act="lunge"]    { --act: m-lunge 0.9s ease-in-out alternate; }
.ab-act[data-act="jiggle"]   { --act: m-jiggle 0.35s ease-in-out alternate; }
.ab-act[data-act="flicker"]  { --act: m-flicker 0.5s ease-in-out alternate; }
.ab-act[data-act="lift"]     { --act: m-lift 0.7s ease-in-out alternate; }
.ab-act[data-act="wave"]     { --act: m-bob 0.8s ease-in-out alternate; }
.ab-act[data-act="sweep"]    { --act: m-sweep 0.7s ease-in-out alternate; }
.ab-act[data-act="dash"]     { --act: m-dash 0.25s ease-in-out alternate; }
.ab-act[data-act="float"]    { --act: m-float 1.8s ease-in-out alternate; }
.ab-act[data-act="wobble"]   { --act: m-wobble 1.1s ease-in-out alternate; }
.ab-act[data-act="march"]    { --act: m-march 0.36s ease-in-out alternate; }
.ab-act[data-act="breathe"]  { --act: m-breathe 1.8s ease-in-out alternate; }
.ab-act[data-act="shiver"]   { --act: m-ring 0.09s linear alternate; }
.ab-act[data-act="look"]     { --act: m-look 2s ease-in-out; }
.ab-act[data-act="pump"]     { --act: m-pump 0.4s ease-in-out alternate; }
.ab-act[data-act="strut"]    { --act: m-strut 0.8s ease-in-out alternate; }
.ab-act[data-act="wiggle"]   { --act: m-wiggle 0.3s ease-in-out alternate; }
@keyframes m-bob { to { transform: translateY(-5px); } }
@keyframes m-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-11px) scale(0.96, 1.05); }
  70% { transform: translateY(0) scale(1.06, 0.94); } }
@keyframes m-jump { 0%, 100% { transform: none; } 40% { transform: translateY(-17px) rotate(-4deg); }
  55% { transform: translateY(-17px) rotate(4deg); } 80% { transform: scale(1.08, 0.92); } }
@keyframes m-nod { 0%, 100% { transform: none; } 40% { transform: rotate(-7deg) translateY(2px); } }
@keyframes m-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes m-droop { from { transform: rotate(-2deg); } to { transform: rotate(-6deg) translateY(3px); } }
@keyframes m-flip { 0% { transform: none; } 60%, 100% { transform: rotateY(360deg); } }
@keyframes m-spin { 0% { transform: none; } 70%, 100% { transform: rotate(360deg); } }
@keyframes m-think { from { transform: rotate(-3deg); } to { transform: rotate(-11deg) translateX(-2px); } }
@keyframes m-ring { from { transform: translateX(-2px) rotate(-2deg); } to { transform: translateX(2px) rotate(2deg); } }
@keyframes m-scribble { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes m-stomp { 0%, 100% { transform: none; } 50% { transform: translateY(-6px) rotate(3deg); }
  85% { transform: scale(1.05, 0.95); } }
@keyframes m-lunge { from { transform: none; } to { transform: translateX(6px) rotate(8deg); } }
@keyframes m-jiggle { from { transform: scale(1.06, 0.94); } to { transform: scale(0.95, 1.06); } }
@keyframes m-flicker { from { transform: scale(1); } to { transform: scale(1.06) rotate(2deg); } }
@keyframes m-lift { from { transform: translateY(0) scale(1.04, 0.95); } to { transform: translateY(-6px) scale(0.97, 1.04); } }
@keyframes m-sweep { from { transform: rotate(-6deg) translateX(-4px); } to { transform: rotate(6deg) translateX(4px); } }
@keyframes m-dash { from { transform: translateX(-3px) skewX(-5deg); } to { transform: translateX(3px) skewX(-9deg); } }
@keyframes m-float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-8px) rotate(2deg); } }
@keyframes m-wobble { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes m-march { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4px) rotate(3deg); } }
@keyframes m-breathe { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes m-look { 0%, 100% { transform: none; } 30% { transform: rotate(-6deg) translateX(-3px); }
  65% { transform: rotate(6deg) translateX(3px); } }
@keyframes m-pump { from { transform: scale(1); } to { transform: scale(1.09) translateY(-2px); } }
@keyframes m-strut { from { transform: rotate(-4deg) translateX(-3px); } to { transform: rotate(4deg) translateX(3px); } }
@keyframes m-wiggle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .ab-card:is(:hover, :focus-visible) .ab-act { animation: none; } }

/* "example" on each card opens the phone and plays a short chat with rin (static/examples.js). The phone itself
   is the landing's (.phone / .ph-*); these are only the pop-up around it and the bits a real chat needs. */
.ab-ex {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto;
  font: 600 var(--fs-xs)/1 var(--sans); padding: 0.4rem 0.72rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--shadow-c);
  transition: transform 0.15s var(--spring), box-shadow 0.15s var(--spring), background 0.15s, color 0.15s;
}
.ab-ex i { font-style: normal; font-size: 0.58rem; }
/* orange on hover (owner, 2026-11-01); the deeper ember, so the small white label stays readable (5:1) */
.ab-ex:hover, .ab-ex:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow-c);
  background: var(--ember-text); border-color: var(--ink); color: #fff; outline: none; }
html.ex-open { overflow: hidden; }
.ex-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ex-modal[hidden] { display: none; }
.ex-backdrop { position: absolute; inset: 0; background: rgba(23, 21, 15, 0.58); backdrop-filter: blur(6px); animation: ex-fade 0.25s ease both; }
.ex-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-height: 100%;
  animation: ex-rise 0.4s var(--spring) both; }
.ex-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: min(340px, 86vw); color: #fff; }
.ex-top h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.ex-x { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.18);
  color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.ex-x:hover, .ex-x:focus-visible { background: rgba(255, 255, 255, 0.32); outline: none; }
.ex-phone.phone { height: min(620px, calc(100vh - 150px)); animation: none; text-align: left; }
.ex-phone .ph-thread { scroll-behavior: smooth; }
.ex-phone .ph-b { cursor: default; }
.ex-phone .ph-b.typing { align-self: flex-start; background: #E9E9EB; border-bottom-left-radius: 6px; }
.ex-replay { font: 600 0.82rem/1 var(--sans); padding: 0.6rem 1.1rem; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); }
.ex-replay:hover, .ex-replay:focus-visible { background: #fff; outline: 2px solid #1B8CFF; outline-offset: 2px; }
.ex-field { flex: 1; min-width: 0; min-height: 34px; display: flex; align-items: center; flex-wrap: wrap;
  border: 1px solid #d1d1d6; border-radius: 18px; padding: 0.42rem 0.9rem; font-size: 0.93rem; line-height: 1.3;
  color: #111; background: #fff; word-break: break-word; }
.ex-ph { color: #6e6e73; }
.ex-field.typing .ex-ph { display: none; }
.ex-caret { display: none; width: 2px; height: 1.15em; margin-left: 1px; background: #1B8CFF; animation: ex-blink 1s steps(1) infinite; }
.ex-field.typing .ex-caret { display: inline-block; }
.ex-send { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #1B8CFF; color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s, transform 0.2s var(--spring); }
.ex-send.on { opacity: 1; }
.ex-send.go { transform: scale(1.2); }
.ex-rec { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; margin-right: 0.45rem;
  animation: ex-blink 0.8s steps(1) infinite; }
.ex-w { display: inline-block; animation: ex-word 0.32s ease backwards; }   /* visible by default; the fade plays on top */
.ph-stamp.ex-jump { animation: ex-fade 0.4s ease both; margin-top: 0.5rem; }
.ex-from { font-size: 0.64rem; color: #6e6e73; margin: 0.25rem 0 -0.15rem 0.75rem; }
.ph-b.ex-voice { display: inline-flex; align-items: center; gap: 0.5rem; }
.ex-play { font-size: 0.7rem; }
.ex-wave { display: inline-flex; align-items: center; gap: 2px; height: 22px; }
.ex-wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: 0.75; }
.ex-dur { font-size: 0.75rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.ph-b.ex-poll { display: grid; gap: 0.4rem; width: 78%; background: #fff; border: 1px solid #E5E5EA; }
.ex-poll b { font-size: 0.9rem; }
.ex-opt { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 12px; background: #F2F2F7;
  font-size: 0.85rem; transition: background 0.25s; }
.ex-opt i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c7c7cc; flex-shrink: 0; transition: all 0.25s var(--spring); }
.ex-opt.on { background: #E5F1FF; }
.ex-opt.on i { background: #1B8CFF; border-color: #1B8CFF; box-shadow: inset 0 0 0 3px #fff; transform: scale(1.15); }
.ph-b.ex-card { display: flex; align-items: center; gap: 0.6rem; }
.ex-card-ic { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.ex-card b { display: block; font-size: 0.85rem; }
.ex-card small { color: #6b6b70; font-size: 0.7rem; }
.ex-call { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding-top: 120px; color: #fff; background: linear-gradient(#45454a, #121214); animation: ex-fade 0.3s ease both; }
.ex-call[hidden] { display: none; }
.ex-call-ava { width: 86px; height: 86px; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center;
  justify-content: center; margin-bottom: 0.4rem; animation: ex-ringing 1.3s ease-out infinite; }
.ex-call-name { font-size: 1.7rem; font-weight: 500; }
.ex-call-state { color: #c7c7cc; font-size: 0.85rem; }
.ex-call-btns { display: flex; gap: 90px; margin: auto 0 70px; }
.ex-call-btns span { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; transition: transform 0.25s var(--spring); }
.ex-dec { background: #ff3b30; }
.ex-acc { background: #34c759; }
.ex-acc.go { transform: scale(1.15); }
.ex-confetti { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.ex-confetti i { position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 2px;
  animation: ex-fall 1.7s cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
@keyframes ex-fade { from { opacity: 0; } }
@keyframes ex-rise { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
@keyframes ex-blink { 50% { opacity: 0; } }
@keyframes ex-word { from { opacity: 0; transform: translateY(3px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ex-ringing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); } 100% { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); } }
@keyframes ex-fall { to { transform: translate(var(--dx), 700px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .ex-w { animation: none; } }
/* The on / connect / iMessage tag goes under the text, lined up across a row: in the top corner the longer ones
   ("connect google") ran into the thing rin is holding. */
.ab-card { display: flex; flex-direction: column; }
.ab-card .ab-try { order: 1; align-self: flex-start; }
.ab-card .ab-top { order: 2; margin-top: auto; padding-top: 0.8rem; align-items: center; }
/* "iMessage + Telegram" and the example button don't fit side by side on a narrow card, and the button slid out of it (owner,
   2026-11-03). Below the width that fits both, every card stacks them, not only the ones with the long tag, so a row of cards
   still lines up. The homepage's preview cards lay this out their own way. */
.ab-card:not(.ab-preview .ab-card) { container-type: inline-size; }
@container (max-width: 259px) {
  .ab-card .ab-top { flex-direction: column; align-items: stretch; }
  .ab-card .ab-top .ab-tag { align-self: center; }
  .ab-card .ab-top .ab-ex { justify-content: center; margin-left: 0; }
}
.ab-card .ab-tag { margin: 0; }
.ab-card h3 { text-align: center; font-size: var(--fs-lg); line-height: 1.25; margin: 0 0 0.45rem; }
/* centred like the title above it and the mango on top: a centred title over a left-aligned paragraph gave every card
   two edges (design audit 2026-11-01); the homepage's preview cards already did this */
.ab-card p { text-align: center; text-wrap: pretty; }

.ab-preview { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1.4rem, 5vw, 3rem) clamp(3.5rem, 9vh, 6.5rem); }
.ab-view-all { display: flex; width: fit-content; margin: 2.4rem auto 0; }

.f-card, .g-card, .t-card {
  position: relative; overflow: hidden;
  background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 18px;
  box-shadow: 6px 6px 0 var(--shadow-c);
  transition: box-shadow 0.25s var(--ease), transform 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.f-card { padding: 1.7rem 1.6rem; }
.f-card:hover, .g-card:hover { box-shadow: 10px 10px 0 var(--shadow-c); }

.f-glow {
  position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--ember-soft), transparent 70%);
  pointer-events: none; opacity: 0.6; transition: opacity 0.4s;
}
.f-card:hover .f-glow { opacity: 1; }

.f-kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); margin-bottom: 0.7rem; }
.f-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; letter-spacing: -0.015em; margin-bottom: 0.55rem; }
.f-card p { color: var(--dim); font-size: 0.98rem; line-height: 1.65; }

.demo-chips { margin-top: 1.1rem; }
.demo-toast {
  margin-top: 1.2rem;
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 13px; padding: 0.8rem 0.95rem;
  animation: floatCard 5s ease-in-out infinite;
}
.net { display: flex; align-items: center; gap: 0.45rem; margin-top: 1.4rem; }

/* ═════════ stats ═════════ */
.stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.6rem, 6vw, 4.5rem);
  padding: clamp(2.5rem, 7vh, 4.5rem) 1.4rem; text-align: center;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  background: var(--card);
}
.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1; font-variant-numeric: tabular-nums; }
.stat b::after { content: "."; color: var(--ember); }
.stat span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

/* ═════════ testimonials ═════════ */
.voices { padding: clamp(3rem, 8vh, 5.5rem) 0; overflow: hidden; }
.t-marquee { display: flex; flex-direction: column; gap: 1.3rem; }
.t-row { display: flex; gap: 1.3rem; width: max-content; padding: 10px 0; }
.t-row.left  { animation: marqL 46s linear infinite; }
.t-row.right { animation: marqR 52s linear infinite; }
.t-row:hover { animation-play-state: paused; }
@keyframes marqL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.t-set { display: flex; gap: 1.3rem; padding-right: 1.3rem; }
.t-card { width: 21.5rem; flex-shrink: 0; padding: 1.35rem 1.4rem; font-size: 0.98rem; line-height: 1.6; box-shadow: 5px 5px 0 var(--shadow-c); }
.t-card:nth-child(odd) { rotate: -0.6deg; }
.t-card:nth-child(even) { rotate: 0.6deg; }
.t-card:hover { box-shadow: 8px 8px 0 var(--shadow-c); rotate: 0deg; }
.t-card b { display: block; margin-top: 0.8rem; font-family: var(--mono); font-weight: 400; font-size: var(--fs-xs); color: var(--ember-text); }
/* the cards run off both edges of the screen: fade them out instead of cutting them */
.t-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }

/* ═════════ finale + foot ═════════ */
.finale { text-align: center; padding: clamp(3.5rem, 10vh, 6.5rem) 1.4rem; }
.finale h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 6.5vw, 4.6rem); letter-spacing: -0.025em; line-height: 1.04; margin-bottom: 1.8rem; }
.finale .footnote { margin-top: 1.1rem; }

/* ═════════ site footer (homepage and /help) ═════════
   The ink band of the dashboard's top bar: what rin is in one line, where everything is, the apps she lives on, and a
   giant outlined "rin" bleeding off the bottom for a bit of personality. */
.site-foot { position: relative; overflow: hidden; background: var(--ink); color: var(--paper);
  padding: clamp(3rem, 8vh, 4.5rem) clamp(1.4rem, 5vw, 4rem) 0; }
.sf-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: var(--sp-7); max-width: 1180px; margin: 0 auto; }
.site-foot .wordmark { width: fit-content; min-height: var(--tap-min); color: var(--paper); text-decoration: none; font-size: var(--fs-xl); }
.sf-brand p { max-width: 22rem; margin-top: var(--sp-4); font-size: var(--fs-base); line-height: 1.55; color: rgba(246, 244, 238, 0.72); }
.sf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.sf-cols div { display: grid; align-content: start; justify-items: start; gap: 0; }
.sf-cols h2 { margin-bottom: var(--sp-2); font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ember); }
.sf-cols a, .sf-cols button, .sf-cols span { display: inline-flex; align-items: center; min-height: var(--tap-min); min-width: var(--tap-min); padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--fs-base); color: rgba(246, 244, 238, 0.78); text-decoration: none; cursor: pointer; }
.sf-cols span { cursor: default; }
.sf-cols a:hover, .sf-cols button:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--ember);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sf-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; max-width: 1180px;
  margin: var(--sp-7) auto 0; padding: var(--sp-4) 0; border-top: 1px solid rgba(246, 244, 238, 0.16);
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em; color: rgba(246, 244, 238, 0.6); }
.sf-bottom a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: rgba(246, 244, 238, 0.78); text-decoration: none; }
.sf-bottom a:hover { color: var(--paper); }
.site-foot :is(a, button):focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }
/* lowercase has no ascenders past the i's dot: pull the word up into that empty space, let it bleed off the bottom */
/* the giant "rin": an outline of moving orange (owner, 2026-11-01). The gradient is clipped to the letters, the
   letters are filled with the footer's own ink, and the stroke is transparent, so the gradient shows only in a band
   around each letter's edge. One tile of the gradient starts and ends on the same orange, so sliding it by exactly
   one tile loops without a seam. */
.sf-giant { margin: -0.1em auto -0.2em; text-align: center; font-family: var(--serif); font-weight: 600; font-size: clamp(7rem, 28vw, 22rem);
  line-height: 1; letter-spacing: -0.05em; user-select: none;
  color: var(--ink); -webkit-text-stroke: 4px transparent;
  background: linear-gradient(90deg, var(--ember), var(--mango) 30%, var(--mango-light) 50%, var(--mango) 70%, var(--ember)) 0 0 / 1.6em 100% repeat-x;
  -webkit-background-clip: text; background-clip: text;
  animation: sf-run 7s linear infinite; }
@keyframes sf-run { to { background-position: 1.6em 0; } }
/* the dot of the i, solid orange: a circle laid exactly over the font's own dot (measured in Fraunces 600: centre 0.12em
   in from the glyph's left, 0.59em above the baseline, 0.14em across; the baseline is 0.98em below the span's top),
   a few px larger so the outline under it never peeks out */
.sf-i { position: relative; }
.sf-i::after { --d: calc(0.143em + 6px); content: ""; position: absolute; width: var(--d); height: var(--d);
  left: calc(0.1207em - var(--d) / 2); top: calc(0.3921em - var(--d) / 2);
  border-radius: 50%; background: var(--ember); box-shadow: 0 0 0.06em rgba(232, 85, 30, 0.6); }
/* the global reduced-motion rule only shortens animations, and an infinite one would then flicker: stop it outright */
@media (prefers-reduced-motion: reduce) { .sf-giant { animation: none; } }
@media (max-width: 760px) {
  .sf-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the page you're on, in the ink top bar */
.nav-links a[aria-current="page"] { color: var(--paper); text-decoration: underline; text-decoration-color: var(--ember);
  text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav .wordmark { min-height: var(--tap-min); text-decoration: none; }
.nav-cta a.link-btn { text-decoration: none; }

/* ── the phone menu (static/nav.js) ──
   Under 920px the links used to vanish with nothing in their place (owner, 2026-11-01). Now a round menu button opens
   them in a card under the bar; on the smallest phones "log in" moves in there too, to leave room for get started. */
.nav-menu { display: none; }
.nav-links .nav-phone-only { display: none; }
@media (max-width: 920px) {
  .nav-cta { gap: var(--sp-2); }
  .nav-menu {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; flex: none;
    width: var(--tap-min); height: var(--tap-min); padding: 0; border: 1.5px solid rgba(246, 244, 238, 0.35); border-radius: 50%;
    background: transparent; color: var(--paper); cursor: pointer;
  }
  #view-auth .nav-menu { color: var(--ink); border-color: rgba(23, 21, 15, 0.25); background: rgba(255, 255, 255, 0.75); }
  .nav-menu i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform 0.25s var(--spring), opacity 0.2s; }
  .nav.open .nav-menu i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.open .nav-menu i:nth-child(2) { opacity: 0; }
  .nav.open .nav-menu i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-menu:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; z-index: 60;
    top: calc(100% + 6px); left: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem); padding: var(--sp-2);
    background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    animation: navDrop 0.25s var(--ease) both;
  }
  .nav.open .nav-links :is(a, button), #view-auth .nav.open .nav-links :is(a, button) {
    padding: 12px var(--sp-4); border-radius: 12px; line-height: 24px; text-align: left;
    color: var(--ink); font-size: var(--fs-base); font-weight: 600; text-decoration: none;
  }
  .nav.open .nav-links :is(a, button):hover, .nav.open .nav-links a[aria-current="page"] { background: var(--paper); }
  .nav.open .nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ember); }
}
@media (max-width: 480px) {
  .nav-cta .link-btn { display: none; }
  .nav.open .nav-links .nav-phone-only { display: block; }
}
@keyframes navDrop { from { opacity: 0; translate: 0 -6px; } }

/* ═════════ modal ═════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(23, 21, 15, 0.4); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  animation: fade 0.2s ease both;
}
@keyframes fade { from { opacity: 0; } }

.auth-card {
  background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 22px; padding: 2.3rem;
}
.modal-card {
  width: 100%; max-width: 400px; position: relative; text-align: center;
  animation: modalIn 0.4s var(--spring) both;
  box-shadow: 10px 10px 0 var(--shadow-c);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(26px) scale(0.96); } }
.modal-mark { font-size: 2.2rem; line-height: 1; text-align: center; margin: 0 auto 0.6rem; animation: wobble 3.5s ease-in-out infinite; }
.modal-head { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin-bottom: 1.3rem; }
.modal-close { position: absolute; top: 1.1rem; right: 1.2rem; background: none; border: none; cursor: pointer; color: var(--dim); font-size: 0.95rem; }
.modal-close:hover { color: var(--ember); }

.tabs { display: flex; border-bottom: 1.5px solid var(--ink); margin-bottom: 1.4rem; }
.tab {
  flex: 1; padding: 0.7rem; background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -1.5px;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--dim);
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.tab.active { color: var(--ink); border-bottom-color: var(--ember); }

input {
  width: 100%; padding: 0.85rem 1.05rem; margin-bottom: 0.85rem;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: 12px;
  font-family: var(--sans); font-size: 1rem; outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
input::placeholder { color: rgba(23, 21, 15, 0.35); }
input:focus { border-color: var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--shadow-c); }

/* ═════════ LOVE ═════════ */
#view-love { min-height: 100vh; padding-bottom: 4rem; }
.love-back {
  position: fixed; top: 1.2rem; left: 1.4rem; z-index: 60;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0.55rem 1.15rem; color: var(--ink);
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem;
  cursor: pointer; box-shadow: 3px 3px 0 var(--shadow-c);
  transition: transform 0.2s var(--spring), box-shadow 0.2s;
}
.love-back:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shadow-c); }

.lv-hero { text-align: center; padding: clamp(5rem, 15vh, 8rem) 1.4rem 2rem; }
.lv-title { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 8.5vw, 6rem); letter-spacing: -0.03em; animation: fadeUp 0.9s var(--ease) both; }
.lv-sub { margin-top: 0.9rem; color: var(--dim); animation: fadeUp 0.9s 0.15s both; }

.lv-flow { position: relative; max-width: 1060px; margin: 0 auto; padding: 2rem clamp(1.4rem, 5vw, 3rem); display: flex; flex-direction: column; gap: clamp(2rem, 6vh, 3.2rem); }
.lv-q {
  position: relative;
  max-width: 34rem; padding: 1.5rem 1.7rem;
  background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 18px; border-bottom-left-radius: 5px;
  box-shadow: 6px 6px 0 var(--shadow-c);
  font-size: 1.1rem; line-height: 1.65;
  rotate: -0.8deg;
  transition: box-shadow 0.25s var(--ease), transform 0.2s ease-out;
}
.lv-q.right { align-self: flex-end; rotate: 0.8deg; border-radius: 18px; border-bottom-right-radius: 5px; }
.lv-q:hover { box-shadow: 9px 9px 0 var(--shadow-c); }
.lv-q b { display: block; margin-top: 0.8rem; font-family: var(--mono); font-weight: 400; font-size: 0.78rem; color: var(--ember); }
.lv-q u { text-decoration-color: var(--ember); }

/* marginalia in the empty gutters: mono metadata opposite each letter */
.lv-q::after {
  content: attr(data-meta);
  position: absolute; top: 50%;
  left: calc(100% + 2.2rem); transform: translateY(-50%);
  width: 13rem;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.8;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim);
  border-left: 1.5px solid var(--ember);
  padding-left: 0.9rem;
  pointer-events: none;
}
.lv-q.right::after {
  left: auto; right: calc(100% + 2.2rem);
  border-left: none; border-right: 1.5px solid var(--ember);
  padding: 0 0.9rem 0 0; text-align: right;
}

/* postage stamp on each letter */
.lv-stamp {
  position: absolute; top: -0.85rem; right: 1.2rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); background: var(--card);
  border: 1.5px dashed var(--ember); border-radius: 4px;
  padding: 0.25rem 0.55rem;
  rotate: 3deg;
}
.lv-q.right .lv-stamp { right: auto; left: 1.2rem; rotate: -3deg; }

/* vertical side rails */
.lv-rail {
  position: fixed; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(23, 21, 15, 0.28);
  pointer-events: none; z-index: 1;
  white-space: nowrap;
}
.lv-rail.left { left: 1.1rem; }
.lv-rail.right { right: 1.1rem; }

/* floating ember marks between letters */
.lv-deco {
  position: absolute;
  font-family: var(--serif); font-style: italic;
  color: var(--ember); opacity: 0.55;
  font-size: 1.6rem;
  animation: decoBob 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes decoBob { 50% { transform: translateY(-12px) rotate(8deg); } }
.lv-deco.d1 { top: 6%; right: 12%; animation-delay: -1s; }
.lv-deco.d2 { top: 24%; left: 8%; font-size: 1.2rem; animation-delay: -3s; }
.lv-deco.d3 { top: 46%; right: 6%; font-size: 2rem; animation-delay: -2s; }
.lv-deco.d4 { top: 66%; left: 12%; animation-delay: -4.5s; }
.lv-deco.d5 { top: 86%; right: 16%; font-size: 1.3rem; animation-delay: -0.5s; }

.lv-mono {
  align-self: center; font-family: var(--mono); font-size: 0.88rem;
  border: 1.5px dashed var(--ink); border-radius: 10px;
  padding: 1.4rem 1.7rem; background: var(--card);
  rotate: -1.2deg; box-shadow: 6px 6px 0 var(--shadow-c);
}
.lv-mono i { display: block; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px dashed var(--line-2); padding-bottom: 0.5rem; margin-bottom: 0.6rem; }
.lv-mono em { display: block; font-style: normal; padding: 0.1rem 0; }
.lv-mono u { display: block; text-decoration: none; font-family: var(--serif); font-style: italic; margin-top: 0.6rem; }
.lv-mono b { display: block; margin-top: 0.5rem; color: var(--ember); font-weight: 400; font-size: 0.78rem; }

.lv-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.lv-reveal.visible { opacity: 1; transform: none; }
.lv-fineprint { text-align: center; color: var(--dim); font-size: 0.82rem; padding: 0 1.4rem; }

/* ═════════ app shell ═════════ */
#view-app { display: flex; flex-direction: column; height: 100vh; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem clamp(1.2rem, 4vw, 2.4rem);
  border-bottom: 1.5px solid var(--ink);
  background: var(--ink);
}
.topbar .wordmark { color: var(--paper); }
.nav-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(246, 244, 238, 0.6); padding: 0.5rem 0.9rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-btn.active { color: var(--paper); border-bottom-color: var(--ember); }
.nav-btn.subtle:hover { color: var(--ember); }

.page { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#page-home, #page-settings, #page-pricing { overflow-y: auto; }

.sheet { max-width: 1020px; margin: 0 auto; width: 100%; padding: clamp(1.8rem, 5vh, 3rem) clamp(1.4rem, 4vw, 2.5rem) 4rem; }
.sheet-h { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.025em; margin-bottom: 0.7rem; animation: fadeUp 0.7s var(--ease) both; }

.home-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.term { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); margin-bottom: 0.5rem; animation: fadeUp 0.7s 0.1s var(--ease) both; }
.term-p { color: var(--ember); }

.plan-mark {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ember); border: 1.5px solid var(--ember); border-radius: 999px;
  padding: 0.14rem 0.6rem;
}

.quick-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.4rem 0 1.8rem; animation: fadeUp 0.7s 0.18s var(--ease) both; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.2rem; margin-bottom: 1.8rem; }
.s-card {
  position: relative; overflow: hidden;
  background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--shadow-c);
  padding: 1.3rem 1.2rem;
  transition: box-shadow 0.22s var(--ease), transform 0.2s ease-out;
  transform-style: preserve-3d;
}
.s-card:nth-child(odd) { rotate: -0.7deg; }
.s-card:nth-child(even) { rotate: 0.7deg; }
.s-card:hover { box-shadow: 8px 8px 0 var(--shadow-c); rotate: 0deg; }
.s-card b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2.5rem; line-height: 1; }
.s-card b::after { content: "."; color: var(--ember); }
.s-card span { font-size: 0.88rem; color: var(--dim); font-weight: 500; }
.s-glow { position: absolute; top: -50px; right: -50px; width: 140px; height: 140px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--ember-soft), transparent 70%); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-bottom: 1.3rem; }
.split.top-gap { margin-top: 1.6rem; }
.g-card { padding: 1.4rem 1.5rem; }
.g-card .btn-glass { margin-top: 0.9rem; }
.g-head { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: 0.9rem; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.g-p { line-height: 1.6; margin-bottom: 1rem; }
.g-form { display: flex; gap: 0.7rem; }
.g-form input { margin-bottom: 0; flex: 1; }
.wide-card { margin-top: 1.3rem; }
.beta-mark { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }

/* google connect card */
.gg-row { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.btn-ghost {
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem;
  padding: 0.7rem 1.3rem;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: 999px; cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s, background 0.25s;
}
.btn-ghost:hover { border-color: var(--ember); color: var(--ember); }
.gg-row + .footnote { margin-top: 0.9rem; font-family: var(--mono); letter-spacing: 0.02em; }

/* channel picker */
.chan-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.chan-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 0.9rem; border: 1.5px solid var(--line-2); border-radius: 12px;
  cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s;
}
.chan-row:hover { border-color: var(--ink); }
.chan-row.off { opacity: 0.5; cursor: not-allowed; }
.chan-row .radio {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); flex: none;
  transition: border-color 0.2s, background 0.2s;
}
.chan-row .radio.on { border-color: var(--ember); background: radial-gradient(circle, var(--ember) 45%, transparent 50%); }
.chan-name { font-weight: 600; }
.chan-status { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }

/* toggle switch */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.switch {
  width: 46px; height: 26px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--line); position: relative; cursor: pointer; flex: none; padding: 0;
  transition: background 0.2s var(--ease), border-color 0.2s;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: left 0.2s var(--spring);
}
.switch.on { background: var(--ember); border-color: var(--ember); }
.switch.on .knob { left: 22px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(1.4rem);
  z-index: 90; max-width: min(92vw, 460px);
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 0.92rem;
  padding: 0.85rem 1.3rem; border-radius: 14px;
  box-shadow: 5px 5px 0 var(--shadow-c);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--spring);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* rows */
.row-list { display: flex; flex-direction: column; }
.row, .receipt-row, .goal-row-h {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.75rem 0.1rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease);
}
.row:last-child, .receipt-row:last-child, .goal-row-h:last-child { border-bottom: none; }
.row:hover, .receipt-row:hover, .goal-row-h:hover { padding-left: 0.6rem; }
.row i, .receipt-row i { flex: 1; border-bottom: 1.5px dotted var(--line-2); transform: translateY(-4px); }
.row b, .receipt-row b { font-family: var(--mono); font-size: 0.8rem; color: var(--ember); font-weight: 500; white-space: nowrap; }
.receipt-row .rr-dot { color: var(--ember); font-size: 0.7rem; }
.rr-text { font-weight: 500; }

/* github device flow */
.device-box {
  margin-top: 1rem; padding: 1rem 1.2rem;
  border: 1.5px dashed var(--line-2); border-radius: 14px;
  background: var(--paper);
}
.device-box .footnote { margin: 0.15rem 0; }

/* how to connect an app: one short action per line, the button to tap in bold, a numbered circle each, and a
   green tick for "done" (owner, 2026-11-01: "neatly written steps ... like you are legit the dumbest person in
   the world"). A finished step turns into a tick too (li.done). One grey line under it at most, for "stuck?". */
.steps { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: var(--sp-3); counter-reset: step; }
/* a block line with the circle beside it (not flex: that would split "Tap" and the bold button name apart) */
.steps li { counter-increment: step; position: relative; min-height: 28px; padding: 3px 0 0 40px; min-width: 0;
  font-size: var(--fs-base); line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: var(--fs-sm);
  font-weight: 700; }
.steps li.end, .steps li.done { color: var(--dim); }
.steps li.end::before, .steps li.done::before { content: "✓"; background: var(--ok); }
.steps li.done { text-decoration: line-through; text-decoration-color: var(--line-2); }
.steps b { font-weight: 700; }
.steps a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.steps .device-code { display: inline-block; margin-left: 0.3rem; padding: 2px 10px; border: 1.5px solid var(--ink);
  border-radius: var(--r-sm); background: var(--card); font-family: var(--mono); font-size: var(--fs-lg); letter-spacing: 0.08em; }
.steps-warn { display: inline-block; margin-left: 0.35rem; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--ember-soft); color: var(--ember-text); font-size: var(--fs-xs); font-style: normal; font-weight: 700; }
.steps-alt { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--dim); }
.steps-alt code { padding: 1px 6px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  font-size: var(--fs-sm); }
.steps-alt a, .steps-alt .link-btn.inline { color: var(--ink); font-weight: 600; }
.steps-box { margin-top: var(--sp-4); }
.steps-box .btn-glow { width: fit-content; }
/* Claude Code's one line: which computer, then the line itself with a copy button */
.rn-os { display: inline-flex; gap: 4px; padding: 4px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--paper); }
.rn-tab { position: relative; min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.rn-tab::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--tap-min); transform: translateY(-50%); }
.rn-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rn-tab:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.rn-line { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: 8px 8px 8px 14px;
  border: 1.5px solid var(--ink); border-radius: var(--r-md); background: var(--ink); }
.rn-line code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #F6F4EE; font-family: var(--mono); font-size: var(--fs-sm);
  line-height: 1.5; user-select: all; }
.rn-line .btn-glow { flex: none; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.device-code {
  display: block; margin: 0.6rem 0;
  font-family: var(--mono); font-size: 1.7rem; font-weight: 500;
  letter-spacing: 0.22em; color: var(--ember);
}

.cmd {
  display: block; margin: 0.5rem 0 0.9rem;
  padding: 0.6rem 0.8rem; background: var(--paper);
  border: 1.5px solid var(--line-2); border-radius: 10px;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 400;
  color: var(--ink); word-break: break-all; line-height: 1.5;
}

/* tasks */
.task-row, .auto-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 0.1rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease), opacity 0.3s ease;
}
.task-row:last-child, .auto-row:last-child { border-bottom: none; }
.task-row:hover, .auto-row:hover { padding-left: 0.6rem; }
.task-row b, .auto-row b { font-weight: 600; display: block; line-height: 1.35; }
.task-row small, .auto-row small { display: block; font-size: 0.82rem; }
.task-row .tick {
  flex: none; width: 22px; height: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--ink); border-radius: 50%;
  color: var(--ember); font-size: 0.7rem; cursor: pointer; padding: 0;
  transition: background 0.18s ease, transform 0.18s var(--ease);
}
.task-row .tick::after { content: "✓"; opacity: 0; transition: opacity 0.15s ease; }
.task-row .tick:hover { background: var(--ember); transform: scale(1.12); }
.task-row .tick:hover::after { opacity: 1; color: var(--paper); }
.task-row.ticked .tick { background: var(--ember); }
.task-row.ticked .tick::after { opacity: 1; color: var(--paper); }
.task-row.hot b::after {
  content: "high"; margin-left: 0.5rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ember);
}
.task-row.ticked { opacity: 0.35; text-decoration: line-through; }

/* automations */
.ar-kind { font-size: 0.95rem; flex: none; }
.ar-body { flex: 1; min-width: 0; }
.ar-acts { display: flex; gap: 0.35rem; flex: none; }
.ar-acts button {
  width: 26px; height: 26px; padding: 0; line-height: 1;
  background: none; border: 1.5px solid var(--line-2); border-radius: 8px;
  font-family: var(--mono); font-size: 0.7rem; color: var(--dim); cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s var(--ease);
}
.ar-acts button:hover { border-color: var(--ink); color: var(--ember); transform: translateY(-1px); }
.ar-acts button:disabled { cursor: default; transform: none; }

.goal-row-h { align-items: center; }
.gr-flame { color: var(--ember); font-size: 0.7rem; animation: markPulse 2s ease-in-out infinite; border-radius: 50%; }
.goal-row-h b { font-weight: 600; display: block; }
.goal-row-h small { display: block; color: var(--dim); font-size: 0.85rem; }

/* memory chips */
.chip-flow { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mem-note {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 999px; padding: 0.5rem 1rem;
  font-size: 0.9rem; font-weight: 500;
  animation: fadeUp 0.5s var(--ease) both;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--spring);
}
.mem-note:hover { box-shadow: 3px 3px 0 var(--shadow-c); transform: translate(-1px, -2px); }
.mem-note p { display: inline; }
.mn-cat { color: var(--ember); }
.mem-note.mn1 { animation-delay: 0.05s; }
.mem-note.mn2 { animation-delay: 0.1s; }
.mem-note.mn3 { animation-delay: 0.15s; }
.mn-del { border: none; background: none; cursor: pointer; color: var(--dim); font-size: 0.75rem; padding: 0 0.1rem; opacity: 0; transition: opacity 0.15s, color 0.15s; }
.mem-note:hover .mn-del { opacity: 1; }
.mn-del:hover { color: var(--ember); }

/* pricing */
.plan-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin: 1.8rem 0; align-items: stretch; }
.plan-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.8rem 1.6rem; }
.plan-card.popular { background: #FFF9F0; }
.plan-card.popular::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--ember);
}
.plan-card.current { border-color: #2c7a3f; }
.plan-flag {
  position: absolute; top: 1.1rem; right: 1.1rem;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ember);
}
.plan-price { font-family: var(--serif); font-weight: 400; font-size: 3.2rem; line-height: 1; }
.plan-price span { font-family: var(--mono); font-size: 0.8rem; color: var(--dim); }
.plan-feats { list-style: none; flex: 1; }
.plan-feats li { padding: 0.4rem 0; font-size: 0.94rem; border-bottom: 1px solid var(--line); }
.plan-feats li:last-child { border-bottom: none; }
.plan-feats li::before { content: "✓ "; color: var(--ember); font-weight: 700; }
.plan-feats li.off { color: rgba(23, 21, 15, 0.32); }
.plan-feats li.off::before { content: "· "; color: rgba(23, 21, 15, 0.32); }
.plan-card.current .f-kicker::after { content: " · current ✓"; color: #2c7a3f; }
.plan-card.current .choose-plan { opacity: 0.45; pointer-events: none; }

/* chat */
.chat-head { display: flex; align-items: center; gap: 0.9rem; max-width: 760px; margin: 0 auto; width: 100%; padding: 1rem 1.4rem 0.6rem; }
.chat-id { flex: 1; }
.voice-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0.4rem 0.85rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--spring);
}
.voice-pill:hover { box-shadow: 3px 3px 0 var(--shadow-c); transform: translate(-1px, -1px); }
.voice-pill i { font-style: normal; color: var(--ember); }
.vp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.voice-pill.genz .vp-dot { background: #2c7a3f; }
.chat-ava {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--ink);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 0 rgba(23, 21, 15, 0.25);
}
.chat-head b { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; display: block; }
.chat-status { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--dim); display: flex; align-items: center; gap: 0.4rem; }
.chat-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); animation: markPulse 1.8s ease-in-out infinite; }

#chat-scroll { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; }
#chat-messages { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }

.msg {
  max-width: 74%; padding: 0.75rem 1.1rem;
  border-radius: 16px; line-height: 1.55; font-size: 0.98rem;
  white-space: pre-wrap; word-wrap: break-word;
  animation: msgIn 0.3s var(--spring);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.msg.user { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 5px; }
.msg.assistant {
  align-self: flex-start;
  background: var(--card); border: 1.5px solid var(--ink);
  border-bottom-left-radius: 5px;
  box-shadow: 3px 3px 0 rgba(23, 21, 15, 0.18);
}

.msg-row { display: flex; align-items: flex-end; gap: 0.55rem; align-self: flex-start; max-width: 84%; }
.msg-row.grouped { padding-left: calc(26px + 0.55rem); margin-top: -0.2rem; }
.msg-row .msg { max-width: 100%; }
.msg-ava {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--ink); font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
#chat-typing { margin: 0.4rem auto 0; padding: 0 1.4rem; max-width: 760px; width: 100%; }
.msg.typing { display: inline-flex; gap: 5px; padding: 0.9rem 1.05rem; }
.msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); animation: tdot 1.2s ease-in-out infinite; }
.msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tdot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.chip-row { display: flex; gap: 0.55rem; flex-wrap: wrap; max-width: 788px; margin: 0 auto; width: 100%; padding: 0.4rem 1.4rem 0; }
#chat-form { display: flex; gap: 0.7rem; padding: 0.8rem 1.4rem 1.3rem; max-width: 788px; margin: 0 auto; width: 100%; }
#chat-form input { margin-bottom: 0; flex: 1; border-radius: 999px; background: var(--card); }
#chat-form .btn-glow.send { padding: 0.78rem 1.5rem; }

/* settings extras */
.code {
  font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.35rem; font-weight: 500;
  color: var(--ember);
  border: 1.5px dashed var(--ember); border-radius: 10px;
  padding: 0.85rem 1rem; text-align: center;
  max-width: 18rem; margin: 1rem 0 0.5rem;
  background: var(--card);
}
code { font-family: var(--mono); font-size: 0.86rem; color: var(--ember); }

/* ═════════ responsive ═════════ */
/* ── live phone (landing hero) ── */
.phone-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.2rem 0 0; perspective: 1400px; }
.phone-tilt { transform-style: preserve-3d; transition: transform 0.6s var(--ease); will-change: transform; }
.phone {
  position: relative; width: min(330px, 86vw); height: 640px; max-height: 78vh;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 46px;
  box-shadow: 10px 10px 0 var(--shadow-c), inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px rgba(23,21,15,0.35);
  display: flex; flex-direction: column; overflow: hidden;
  animation: phoneFloat 10s ease-in-out infinite;
  will-change: transform;
}
@keyframes phoneFloat { 50% { transform: translateY(-6px); } }
.ph-island { position: absolute; top: 14px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%); background: var(--ink); border-radius: 999px; z-index: 3; }
.ph-head {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 3.4rem 1.1rem 0.7rem; border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.ph-back { font-size: 1.5rem; line-height: 1; color: var(--ember); margin-right: 0.2rem; margin-top: -3px; }
.ph-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.ph-name { font-weight: 700; font-size: 0.92rem; }
.ph-name i { font-style: normal; color: var(--dim); font-weight: 400; }
.ph-voice {
  margin-left: auto; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--card); color: var(--dim); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.3rem 0.6rem; cursor: pointer;
  transition: all 0.2s var(--spring);
}
.ph-voice:hover { border-color: var(--ink); color: var(--ink); box-shadow: 2px 2px 0 var(--shadow-c); transform: translate(-1px, -1px); }
.ph-voice.pro { color: var(--ember); border-color: var(--ember); }
.ph-thread { flex: 1; overflow-y: auto; padding: 0.9rem 0.9rem 0.6rem; display: flex; flex-direction: column; gap: 0.38rem; scroll-behavior: smooth; scrollbar-width: none; }
.ph-thread::-webkit-scrollbar { display: none; }
.ph-stamp { align-self: center; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 0.2rem 0 0.6rem; }
.ph-b {
  max-width: 82%; padding: 0.52rem 0.8rem; border-radius: 18px; font-size: 0.9rem; line-height: 1.4;
  animation: bubbleIn 0.32s var(--spring) both; word-wrap: break-word; white-space: pre-wrap;
}
@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.ph-b.bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--line-2); border-bottom-left-radius: 5px; }
.ph-b.user { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 5px; }
.ph-b.err { align-self: center; background: transparent; border: 1px dashed var(--ember); color: var(--ember); font-size: 0.78rem; font-family: var(--mono); max-width: 92%; text-align: center; }
.ph-b.typing { display: inline-flex; gap: 4px; padding: 0.7rem 0.85rem; }
.ph-b.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); animation: dotBounce 1.1s ease-in-out infinite; }
.ph-b.typing span:nth-child(2) { animation-delay: 0.15s; }
.ph-b.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } }
.ph-compose { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem 0.5rem; border-top: 1px solid var(--line); background: var(--paper); }
.ph-compose input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 0.92rem; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: 999px; padding: 0.6rem 0.95rem; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ph-compose input:focus { border-color: var(--ink); box-shadow: 2px 2px 0 var(--shadow-c); }
.ph-compose input::placeholder { color: var(--dim); }
.ph-compose button {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  font-size: 1.1rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.25s var(--spring);
}
.ph-compose button:hover { background: var(--ember); border-color: var(--ember); transform: translateY(-2px); }
.ph-compose button:disabled { opacity: 0.5; cursor: wait; transform: none; }
/* after the first text, the send arrow turns into a "get started" pill (see syncDemoButton) */
.ph-compose button.is-cta {
  width: auto; height: 36px; padding: 0 0.95rem; border-radius: 999px;
  background: var(--ember); border-color: var(--ember);
  font-size: 0.8rem; gap: 0.3rem; white-space: nowrap;
  animation: ctaPop 0.5s var(--spring);
}
.ph-compose button.is-cta i { font-style: normal; }
@keyframes ctaPop { from { transform: scale(0.7); opacity: 0.4; } }
.ph-bar { height: 5px; width: 40%; margin: 0.15rem auto 0.55rem; border-radius: 999px; background: var(--ink); opacity: 0.85; }

.ph-tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 360px; }
.ph-tries .chip { cursor: pointer; font-family: var(--sans); background: var(--card); }

.ph-sticker, .ph-emoji {
  position: absolute; z-index: 4; pointer-events: none;
  background: var(--card); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow-c);
  animation: floatCard 9s ease-in-out infinite;
  will-change: transform;
}
.ph-sticker { font-size: 0.8rem; font-weight: 500; padding: 0.5rem 0.8rem; border-radius: 14px; max-width: 190px; line-height: 1.35; }
.ph-emoji { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; }
.st-a { left: -16%; top: 11%; rotate: -5deg; animation-delay: -1s; border-bottom-left-radius: 4px; }
.st-b { right: -15%; top: 30%; rotate: 4deg; animation-delay: -3s; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.st-c { left: -18%; top: 58%; rotate: 3deg; animation-delay: -5s; font-family: var(--mono); font-size: 0.7rem; color: var(--ember); border-style: dashed; }
.st-d { right: -2%; top: 6%; rotate: 8deg; animation-delay: -2s; }
.st-e { left: 2%; top: 36%; rotate: -8deg; animation-delay: -4s; width: 44px; height: 44px; font-size: 1.2rem; }
.st-f { right: 0; top: 66%; rotate: -6deg; animation-delay: -6s; }
.st-g { left: 6%; bottom: 14%; rotate: 5deg; animation-delay: -2.5s; width: 44px; height: 44px; font-size: 1.2rem; background: var(--ember); }

/* ── phone: interactive bits ── */
.ph-status { position: absolute; top: 18px; left: 26px; right: 26px; display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700; z-index: 3; pointer-events: none; }
.ph-sig { font-size: 0.55rem; letter-spacing: 0.05em; }
.ph-sig i { font-style: normal; margin-left: 4px; color: var(--ember); }
.ph-name { display: inline-grid; grid-template-columns: auto auto; column-gap: 3px; align-items: baseline; line-height: 1.1; }
.ph-name small { grid-column: 1 / -1; font-family: var(--mono); font-size: 0.58rem; font-weight: 400; color: var(--dim); letter-spacing: 0.06em; }
.ph-name small.busy { color: var(--ember-text); }
.ph-count { font-family: var(--mono); font-size: 0.62rem; color: var(--dim); min-width: 2ch; text-align: right; }
.ph-count.hot { color: var(--ember); font-weight: 700; }

/* tapbacks: click a bubble to react */
.ph-b.user, .ph-b.bot { position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; margin-top: 0.15rem; }
.ph-b[data-react]::after {
  content: attr(data-react); position: absolute; top: -13px; font-size: 0.78rem; line-height: 1;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 6px;
  box-shadow: 2px 2px 0 var(--shadow-c); animation: reactPop 0.35s var(--spring) both;
}
.ph-b.bot[data-react]::after { right: -10px; }
.ph-b.user[data-react]::after { left: -10px; }
@keyframes reactPop { from { transform: scale(0.2); opacity: 0; } }
.ph-b.user, .ph-b.bot { transition: scale 0.15s var(--ease); }
.ph-b.user.pressed, .ph-b.bot.pressed { scale: 0.97; }
.ph-receipt { align-self: flex-end; font-family: var(--mono); font-size: 0.58rem; color: var(--dim); margin: -0.15rem 0.4rem 0.2rem 0; letter-spacing: 0.04em; }

/* in-thread reminder card (the "texts you first" moment) */
.ph-card {
  align-self: flex-start; display: flex; align-items: center; gap: 0.6rem; max-width: 88%;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--shadow-c);
  padding: 0.6rem 0.75rem; animation: bubbleIn 0.32s var(--spring) both;
}
.ph-card .ico { font-size: 1.2rem; }
.ph-card b { display: block; font-size: 0.86rem; }
.ph-card small { color: var(--dim); font-size: 0.72rem; }
.ph-card button {
  margin-left: auto; font-family: var(--sans); font-weight: 700; font-size: 0.72rem;
  background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0.35rem 0.65rem; cursor: pointer;
  transition: all 0.2s var(--spring);
}
.ph-card button:hover { background: var(--ember); border-color: var(--ember); }
.ph-card.done { opacity: 0.6; }
.ph-card.done b { text-decoration: line-through; }
.ph-card.done button { background: transparent; color: var(--ember); border-style: dashed; cursor: default; }

/* stickers are now alive: drag them around, tap to send */
.ph-sticker, .ph-emoji { pointer-events: auto; cursor: grab; touch-action: none; transition: scale 0.25s var(--spring); }
.ph-sticker:hover, .ph-emoji:hover { scale: 1.04; }
.ph-sticker.dragging, .ph-emoji.dragging { cursor: grabbing; animation-play-state: paused; scale: 1.06; z-index: 6; transition: none; }
.ph-emoji.bounce { animation: emojiBounce 0.5s var(--spring); }
@keyframes emojiBounce { 30% { scale: 1.35; rotate: 12deg; } 60% { scale: 0.9; } }
.ph-tries .chip.swap { animation: bubbleIn 0.35s var(--spring) both; }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; }
  .cluster { height: 460px; }
  .phone { height: 560px; }
  .st-a, .st-c { left: -2%; } .st-b, .st-f { right: -2%; }
  .split { grid-template-columns: 1fr; }
  .home-top { flex-direction: column; }
}
@media (max-width: 1180px) {
  .lv-q::after { display: none; }
  .lv-rail { display: none; }
}

@media (max-width: 600px) {
  .ph-sticker { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ═════════ app shell v2 · sidebar + pages (folk-style information layout) ═════════ */
#view-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100vh; overflow: hidden; }
.side {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ink); color: var(--paper);
  border-right: 1.5px solid var(--ink);
}
.side-brand { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.25rem 0.6rem; }
.side-brand .wordmark { color: var(--paper); }
.side-burger { display: none; background: none; border: 1.5px solid rgba(246,244,238,0.35); color: var(--paper); border-radius: 10px; width: 36px; height: 34px; cursor: pointer; font-size: 1rem; }
.side-scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 0.4rem 0.85rem 1rem; }
.side-cta { justify-content: center; margin: 0.4rem 0.4rem 1rem; background: var(--ember); border-color: var(--ember); }
.side-cta:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: none; }
.side-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.side-link {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; text-decoration: none;
  color: rgba(246,244,238,0.68); font-family: var(--sans); font-weight: 500; font-size: 0.97rem;
  padding: 0.62rem 0.8rem; border-radius: 12px;
  transition: background 0.18s var(--ease), color 0.18s;
}
.side-link:hover { background: rgba(246,244,238,0.08); color: var(--paper); }
.side-link.active { background: var(--paper); color: var(--ink); }
.side-link.active .sl-ico { color: var(--ember); }
.side-link.subtle { font-size: 0.88rem; color: rgba(246,244,238,0.5); }
.sl-ico { width: 1.3rem; text-align: center; font-style: normal; font-family: var(--mono); font-size: 0.95rem; opacity: 0.9; }
.side-count { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; font-weight: 500; color: inherit; opacity: 0.7; }
.side-count:empty { display: none; }
.side-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(246,244,238,0.14); display: flex; flex-direction: column; gap: 0.15rem; }
.side-acct {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  background: rgba(246,244,238,0.06); border: 1px solid rgba(246,244,238,0.14); border-radius: 14px;
  padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; cursor: pointer; color: var(--paper);
  transition: background 0.18s var(--ease);
}
.side-acct:hover { background: rgba(246,244,238,0.12); }
.side-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--ember); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; flex-shrink: 0; }
.side-who { display: flex; flex-direction: column; min-width: 0; }
.side-who b { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-who small { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }

.app-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.app-main .page { flex: 1; min-height: 0; overflow-y: auto; }
.app-main #page-chat { display: flex; flex-direction: column; overflow: hidden; }
.app-main #page-chat.hidden { display: none; }
.sheet { max-width: 1080px; }

/* home */
.home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.home-date { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.6rem; animation: fadeUp 0.6s var(--ease) both; }
.home-idline { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; }
.home-idline .rin-chip { margin-top: 0; }
.home-side { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.streak {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0.5rem 1rem; box-shadow: 3px 3px 0 var(--shadow-c);
  font-size: 0.86rem; color: var(--dim); font-weight: 500;
  animation: fadeUp 0.7s 0.1s var(--ease) both;
}
.streak b { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--ink); line-height: 1; }
.streak b::after { content: "🔥"; font-size: 0.85rem; margin-left: 0.25rem; }
.streak.zero b::after { content: ""; }

.setup { margin-top: 1.6rem; padding: 1.3rem 1.5rem 1.1rem; }
.setup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.setup-head .g-head { margin-bottom: 0.6rem; }
.setup-count { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); }
.setup-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 0.9rem; }
.setup-bar i { display: block; height: 100%; width: 0; background: var(--ember); border-radius: 999px; transition: width 0.9s var(--ease); }
.setup-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.5rem 1.2rem; }
.setup-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.6rem; border-radius: 12px; border: 1.5px solid transparent;
  cursor: pointer; font-weight: 500; font-size: 0.94rem; text-align: left; background: none; width: 100%; font-family: var(--sans); color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s;
}
.setup-item:hover { border-color: var(--line-2); background: var(--paper); }
.setup-item .tickbox { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 0.65rem; flex: none; color: var(--paper); }
.setup-item.done .tickbox { background: var(--ember); border-color: var(--ember); }
.setup-item.done { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(23,21,15,0.3); }
.setup-item small { display: block; font-size: 0.78rem; color: var(--dim); font-weight: 400; text-decoration: none; }
.setup.hidden-by-user { display: none; }
.setup-restore { margin-top: 0.9rem; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-bottom: 1.3rem; }
.who-row { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.6rem; }
.who-ava { width: 52px; height: 52px; border-radius: 16px; background: var(--ink); display: grid; place-items: center; overflow: hidden; box-shadow: 3px 3px 0 rgba(23,21,15,0.25); }
.who-ava .rin-ico { width: 100%; height: 100%; border-radius: inherit; }
.who-id b { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; display: block; }
.who-id small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); }
.who-desc { margin-bottom: 1rem; }
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.voice-opt {
  text-align: left; background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 14px;
  padding: 0.85rem 0.95rem; cursor: pointer; font-family: var(--sans); color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--spring);
}
.voice-opt:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow-c); }
.voice-opt.on { border-color: var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--shadow-c); }
.voice-opt b { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.voice-opt b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.voice-opt.on b::before { background: var(--ember); }
.voice-opt small { display: block; color: var(--dim); font-size: 0.8rem; margin-top: 0.25rem; line-height: 1.4; }
.voice-opt .sample { display: block; margin-top: 0.5rem; font-family: var(--serif); font-style: italic; font-size: 0.88rem; color: var(--ink); }

.g-sub { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 0.9rem 0 0.1rem; }
.g-sub:first-of-type { margin-top: 0; }
.card-foot { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.card-foot .btn-glass { margin-top: 0; }
.g-head .go { margin-left: auto; font-size: 0.82rem; font-family: var(--sans); font-weight: 600; }
.g-head .go:hover { color: var(--ember); }

.skill-mini { display: flex; flex-direction: column; gap: 0.5rem; }
.sk-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.1rem; border-bottom: 1px solid var(--line); }
.sk-row:last-child { border-bottom: none; }
.sk-row .ab-ico { width: 30px; height: 30px; font-size: 0.95rem; }
.sk-row b { display: block; font-size: 0.93rem; line-height: 1.25; }
.sk-row small { color: var(--dim); font-size: 0.8rem; }
.sk-row .ab-tag { margin-left: auto; margin-top: 0; }

/* generic page header + filters */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.page-head .footnote { margin-top: -0.3rem; }
.page-head .btn-glow { margin-bottom: 0.3rem; }
.filter-row { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.f-chip {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--card); color: var(--dim); border: 1.5px solid var(--line-2); border-radius: 999px;
  padding: 0.4rem 0.8rem; cursor: pointer; transition: all 0.2s var(--spring);
}
.f-chip:hover { border-color: var(--ink); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--shadow-c); }
.f-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* skills page */
.sk-group { margin-bottom: 2rem; }
.sk-kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember-text); margin: 0 0 0.9rem; }
.ab-card .ab-try {
  margin-top: 0.75rem; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 0.82rem; color: var(--ink);
  border-bottom: 1.5px solid var(--ink); transition: color 0.2s, border-color 0.2s;
}
.ab-card .ab-try:hover { color: var(--ember-text); border-color: var(--ember-text); }
.ab-card.needs { background: var(--paper); }
.ab-card.needs .ab-try { color: var(--ember-text); border-color: var(--ember-text); }
.ab-legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; font-family: var(--mono); font-size: 0.7rem; margin-bottom: 0.4rem; }
.ab-legend span { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--dim); }
.ab-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ab-legend .dot-on { background: #2c7a3f; }
.ab-legend .dot-connect { background: var(--ember); }

/* routines page */
.rt-section { margin-bottom: 1.8rem; }
.rt-head { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.rt-head b { color: var(--ink); font-weight: 500; }
.rt-list { display: flex; flex-direction: column; gap: 0.6rem; }
.rt-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 16px;
  padding: 0.9rem 1.1rem; box-shadow: 4px 4px 0 var(--shadow-c);
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--ease), opacity 0.3s;
}
.rt-row:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-c); }
.rt-row.paused { opacity: 0.72; background: var(--paper); }
.rt-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 1.1rem; }
.rt-row.paused .rt-ico { background: var(--card); }
.rt-body { min-width: 0; }
.rt-body b { display: block; font-size: 1rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.55rem; font-family: var(--mono); font-size: 0.7rem; color: var(--dim); margin-top: 0.15rem; }
.rt-meta .kind { color: var(--ember); }
.rt-meta .next { color: var(--ink); }
.rt-acts { display: flex; gap: 0.35rem; }
.rt-acts button {
  height: 30px; min-width: 30px; padding: 0 0.6rem; line-height: 1;
  background: none; border: 1.5px solid var(--line-2); border-radius: 9px;
  font-family: var(--mono); font-size: 0.7rem; color: var(--dim); cursor: pointer; white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s var(--ease);
}
.rt-acts button:hover { border-color: var(--ink); color: var(--ember); transform: translateY(-1px); }
.rt-acts button:disabled { cursor: default; transform: none; opacity: 0.6; }
.rt-foot { margin-top: 0.5rem; line-height: 1.6; }
.rt-foot b { color: var(--ink); font-weight: 600; }

/* lore page */
.lore-tools { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.lore-tools input { margin-bottom: 0; max-width: 460px; border-radius: 999px; background: var(--card); }
.lore-tools .filter-row { margin-bottom: 0; }
.lore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; }
.lore-note {
  position: relative; background: var(--card); border: 1.5px solid var(--ink); border-radius: 14px;
  padding: 0.95rem 1rem 0.85rem; box-shadow: 4px 4px 0 var(--shadow-c);
  animation: fadeUp 0.45s var(--ease) both;
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--ease);
}
.lore-note:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-c); }
.lore-note:nth-child(3n+1) { rotate: -0.4deg; } .lore-note:nth-child(3n+2) { rotate: 0.4deg; }
.lore-note .ln-cat { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); display: block; margin-bottom: 0.35rem; }
.lore-note p { font-size: 0.95rem; line-height: 1.45; font-weight: 500; }
.lore-note .mn-del { position: absolute; top: 0.6rem; right: 0.7rem; }
.lore-note:hover .mn-del { opacity: 1; }

/* settings: sticky section nav + body */
.settings-sheet { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2rem; align-items: start; max-width: 1140px; }
.set-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.9rem; }
.set-nav-label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 0.8rem 0 0.35rem 0.75rem; }
.set-nav-label:first-child { margin-top: 0; }
.set-nav a {
  color: var(--dim); text-decoration: none; font-weight: 500; font-size: 0.93rem;
  padding: 0.5rem 0.75rem; border-radius: 10px;
  transition: background 0.18s var(--ease), color 0.18s;
}
.set-nav a:hover { background: var(--card); color: var(--ink); }
.set-nav a.on { background: var(--ink); color: var(--paper); }
.set-body { min-width: 0; }
.set-sec { margin-top: 2.4rem; scroll-margin-top: 1rem; }
.set-sec .g-card + .g-card, .set-sec .g-card + .app-list, .set-sec .plan-cols + .g-card { margin-top: 1rem; }
.set-h { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; letter-spacing: -0.015em; margin-bottom: 0.9rem; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.set-h small { font-family: var(--sans); font-size: 0.85rem; color: var(--dim); font-weight: 400; }
.kv-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem 1.2rem; margin-top: 0.4rem; }
.kv { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 0.85rem; background: var(--paper); border: 1.5px dashed var(--line-2); border-radius: 12px; }
.kv span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kv b { font-size: 0.95rem; font-weight: 600; }
.kv b.plan-mark { align-self: flex-start; }
.settings-sheet .plan-cols { margin: 0.2rem 0 0; }
.settings-sheet .rin-number.g-card { padding: 1.4rem 1.5rem; }

.app-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.app-row {
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--shadow-c); overflow: hidden;
  transition: box-shadow 0.2s var(--ease);
}
.app-row:hover { box-shadow: 6px 6px 0 var(--shadow-c); }
.app-top { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1.1rem; }
.app-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.app-name { flex: 1; min-width: 0; }
.app-name b { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.98rem; flex-wrap: wrap; }
.app-name small { display: block; color: var(--dim); font-size: 0.84rem; line-height: 1.4; margin-top: 0.15rem; }
.app-row.is-on .app-name small::before { content: "● "; color: #2c7a3f; font-size: 0.7rem; }
.app-acts { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.app-top > .btn-glow, .app-top > .btn-ghost, .app-acts .btn-glow, .app-acts .btn-ghost { flex: none; }
.btn-glow.sm { padding: 0.55rem 1.05rem; font-size: 0.85rem; }
.app-more { padding: 0 1.1rem 1.05rem; border-top: 1px dashed var(--line); margin-top: 0; }
.app-more > :first-child { margin-top: 0.9rem; }
.app-more .g-p { margin-bottom: 0.6rem; }
.app-more .device-box { margin-top: 0.7rem; }
.app-more .g-form { margin-top: 0.8rem; }
.app-row.is-on .app-more { display: none; }
.app-row.is-on.show-more .app-more { display: block; }

/* responsive */
@media (max-width: 1020px) {
  .settings-sheet { grid-template-columns: 1fr; }
  .set-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.3rem; padding-top: 0; }
  .set-nav-label { display: none; }
}
@media (max-width: 920px) {
  #view-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100vh; }
  .side { border-right: none; border-bottom: 1.5px solid var(--ink); }
  .side-burger { display: inline-grid; place-items: center; }
  .side-scroll { display: none; padding-bottom: 0.9rem; }
  .side.open .side-scroll { display: flex; }
  .side-foot { margin-top: 0.6rem; }
  .app-main { height: auto; min-height: 0; }
  .home-grid { grid-template-columns: 1fr; }
  .voice-grid { grid-template-columns: 1fr; }
  .rt-row { grid-template-columns: 34px minmax(0, 1fr); }
  .rt-acts { grid-column: 1 / -1; justify-content: flex-end; }
  .app-top { flex-wrap: wrap; }
  .app-acts { width: 100%; justify-content: flex-start; }
}

/* ── connect google: the step most people skip at sign-up, kept in sight until it's done ── */
.gg-nudge {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem;
  padding: 1.05rem 1.3rem 1.05rem 1.6rem; border-radius: 22px;
  background: var(--card); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow-c);
  animation: fadeUp 0.5s var(--ease) both;
}
.gg-nudge::before {   /* Google's four colours, as a thin edge */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(#4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%);
}
.gg-nudge-ico {
  width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 16px; background: var(--paper); border: 1.5px solid var(--ink);
}
.gg-nudge-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.gg-nudge-body b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.gg-nudge-body small { color: var(--dim); font-size: 0.9rem; line-height: 1.4; }
.gg-nudge-acts { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
@media (max-width: 640px) {
  .gg-nudge { flex-wrap: wrap; }
  .gg-nudge-acts { width: 100%; justify-content: space-between; }
}

.side-google {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; cursor: pointer;
  background: rgba(232, 85, 30, 0.14); border: 1px solid rgba(232, 85, 30, 0.55); color: var(--paper);
  border-radius: 12px; padding: 0.55rem 0.75rem; margin-bottom: 0.5rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.88rem;
  transition: background 0.18s var(--ease);
}
.side-google:hover { background: rgba(232, 85, 30, 0.26); }
.sg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); flex-shrink: 0; animation: markPulse 1.8s ease-in-out infinite; }
/* phone width folds the sidebar away, so the burger carries the dot */
.side-burger { position: relative; }
.side.needs-google .side-burger::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--ember); border: 2px solid var(--ink);
}

/* ═════════ app shell v8 · warm, top bar, numbers ═════════
   Where the day's iterations landed. v5 was "too simple, no brand colours, no personality"; v6's full-height sidebar was
   turned down by the owner's client; the owner then asked for the metrics and the persona switcher back, connections
   shown clearly, and less white. So: the landing's ink top bar with the wobbling mango mark and icon + label links
   (ember active pill); a warm sand page with paper cards (nothing pure white but inputs); one mango-gradient hero with
   the greeting, the ask bar and rin herself (waving); a row of pastel number tiles; a full-width "where rin lives" card
   with every channel's state in words, the number to text and one button per missing link; today + routines; who rin
   is (voice switch) + set up. Inter everywhere, the serif on the greeting only; one icon set (masks); pastel tiles on
   every row. Overrides the v2 sidebar shell above; every id the JS uses is unchanged. Motion is transform/opacity only. */
#view-app { position: relative; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: linear-gradient(180deg, #BDE2FF 0%, #E6F1FF 26%, #FFE7CB 58%, #FFD4A3 100%); }
#view-app::before { content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22360%22 height=%22360%22 viewBox=%220 0 360 360%22%3E%3Cg transform=%22translate(95 105) rotate(-22) scale(0.95)%22%3E%3Cpath d=%22M-38-14C-50-44-14-62 14-50C40-40 54-10 46 22C38 52 8 66-14 54C-30 46-36 26-38-14Z%22 fill=%22%23FF9A2E%22 fill-opacity=%220.26%22 stroke=%22%23C2521A%22 stroke-opacity=%220.28%22 stroke-width=%222.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-6-52C-4-62 2-68 10-70%22 fill=%22none%22 stroke=%22%2317150F%22 stroke-opacity=%220.16%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2-58C14-72 36-70 46-58C34-50 14-50 2-58Z%22 fill=%22%232F7A3F%22 fill-opacity=%220.22%22/%3E%3Cpath d=%22M-22-2C-24 14-16 30-4 40%22 fill=%22none%22 stroke=%22%23E8551E%22 stroke-opacity=%220.3%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(268 255) rotate(28) scale(0.8)%22%3E%3Cpath d=%22M-38-14C-50-44-14-62 14-50C40-40 54-10 46 22C38 52 8 66-14 54C-30 46-36 26-38-14Z%22 fill=%22%23FF9A2E%22 fill-opacity=%220.26%22 stroke=%22%23C2521A%22 stroke-opacity=%220.28%22 stroke-width=%222.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-6-52C-4-62 2-68 10-70%22 fill=%22none%22 stroke=%22%2317150F%22 stroke-opacity=%220.16%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2-58C14-72 36-70 46-58C34-50 14-50 2-58Z%22 fill=%22%232F7A3F%22 fill-opacity=%220.22%22/%3E%3Cpath d=%22M-22-2C-24 14-16 30-4 40%22 fill=%22none%22 stroke=%22%23E8551E%22 stroke-opacity=%220.3%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(300 72) rotate(10) scale(0.48)%22%3E%3Cpath d=%22M-38-14C-50-44-14-62 14-50C40-40 54-10 46 22C38 52 8 66-14 54C-30 46-36 26-38-14Z%22 fill=%22%23FF9A2E%22 fill-opacity=%220.26%22 stroke=%22%23C2521A%22 stroke-opacity=%220.28%22 stroke-width=%222.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-6-52C-4-62 2-68 10-70%22 fill=%22none%22 stroke=%22%2317150F%22 stroke-opacity=%220.16%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2-58C14-72 36-70 46-58C34-50 14-50 2-58Z%22 fill=%22%232F7A3F%22 fill-opacity=%220.22%22/%3E%3Cpath d=%22M-22-2C-24 14-16 30-4 40%22 fill=%22none%22 stroke=%22%23E8551E%22 stroke-opacity=%220.3%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(70 298) rotate(-45) scale(0.42)%22%3E%3Cpath d=%22M-38-14C-50-44-14-62 14-50C40-40 54-10 46 22C38 52 8 66-14 54C-30 46-36 26-38-14Z%22 fill=%22%23FF9A2E%22 fill-opacity=%220.26%22 stroke=%22%23C2521A%22 stroke-opacity=%220.28%22 stroke-width=%222.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-6-52C-4-62 2-68 10-70%22 fill=%22none%22 stroke=%22%2317150F%22 stroke-opacity=%220.16%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2-58C14-72 36-70 46-58C34-50 14-50 2-58Z%22 fill=%22%232F7A3F%22 fill-opacity=%220.22%22/%3E%3Cpath d=%22M-22-2C-24 14-16 30-4 40%22 fill=%22none%22 stroke=%22%23E8551E%22 stroke-opacity=%220.3%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E"); background-size: 360px 360px; }

/* one icon set (masks, so they take the text colour) */
.ic { display: inline-block; width: 18px; height: 18px; flex: none; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic-chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.3 8.4 8.4 0 0 1-3.8-.9L3 21l2.1-5.7A8.3 8.3 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3a8.5 8.5 0 0 1 8.5 8.5z'/%3E%3C/svg%3E"); }
.ic-sparkles { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.6 5.6 1.9-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9zM5 3v4M3 5h4M19 17v4M17 19h4'/%3E%3C/svg%3E"); }
.ic-repeat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
.ic-pen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.ic-sliders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
.ic-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2'/%3E%3C/svg%3E"); }
.ic-target { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E"); }
.ic-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.ic-play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l14 9-14 9V3z'/%3E%3C/svg%3E"); }
.ic-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ic-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.ic-globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.ic-message { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ic-send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
.ic-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L8.1 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E"); }
.ic-hash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3L8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
.ic-branch { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E"); }
.ic-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7L12 19'/%3E%3C/svg%3E"); }
.ic-flame { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.4-.5-2-1-3-1.1-2.2-.2-4.1 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.2.2-2.5 1-3.5.5 1.5 1.5 2.5 2.5 3z'/%3E%3C/svg%3E"); }
.ic-list { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E"); }
.ic-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM22 6l-10 7L2 6'/%3E%3C/svg%3E"); }
.tile { width: 32px; height: 32px; flex: none; border-radius: 10px; border: 1.5px solid var(--ink); display: grid; place-items: center; color: var(--ink); background: #fff; overflow: hidden; }
.tile .ic { width: 16px; height: 16px; }
.tile svg { width: 16px; height: 16px; display: block; }
.tile.peach { background: #FFDCC6; } .tile.mint { background: #DDF5D4; } .tile.sky { background: #D9ECFF; } .tile.lemon { background: #FFF1A8; } .tile.rose { background: #FFD9E8; } .tile.lilac { background: #E6DDFF; } .tile.paper { background: var(--paper); }

/* ── top bar ── */
.topnav { flex: none; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px clamp(14px, 2.5vw, 28px); background: var(--ink); color: var(--paper); }
.topnav .wordmark { color: var(--paper); font-size: 1.3rem; gap: 0.45rem; }
.tn-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.topnav .side-link { width: auto; color: rgba(246,244,238,0.72); font-size: 14.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px; gap: 8px; border: 1.5px solid transparent; }
.topnav .side-link .ic { width: 17px; height: 17px; }
.topnav .side-link:hover { background: rgba(246,244,238,0.1); color: var(--paper); }
.topnav .side-link.active { background: var(--ember); color: var(--paper); border-color: var(--ember); }
.topnav .side-count { margin-left: 2px; font-family: var(--sans); font-size: 11px; font-weight: 800; color: var(--ink); opacity: 1; padding: 1px 6px; border-radius: 999px; background: var(--paper); }
.topnav .side-count:empty { display: none; }
.tn-right { display: flex; align-items: center; gap: 10px; }
.topnav .side-google { width: auto; margin: 0; background: transparent; border: 1.5px solid rgba(246,244,238,0.35); color: var(--paper); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; }
.topnav .side-google:hover { border-color: var(--paper); background: rgba(246,244,238,0.1); }
.topnav .side-cta { margin: 0; height: 40px; padding: 0 16px; gap: 8px; font-size: 14px; font-weight: 700; border-radius: 999px; background: var(--ember); border: 1.5px solid var(--ember); color: var(--paper); }
.topnav .side-cta:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: none; transform: none; }
.topnav .side-burger { display: none; }
.acct-wrap { position: relative; }
.topnav .side-acct { width: auto; background: none; border: 0; padding: 0; margin: 0; gap: 0; }
.topnav .side-ava { position: relative; width: 38px; height: 38px; font-family: var(--sans); font-weight: 800; font-size: 14px; background: var(--ember); color: var(--paper); border: 2px solid var(--paper); transition: transform 0.2s var(--spring); }
.topnav .side-acct:hover .side-ava { transform: translateY(-1px) scale(1.04); }
.topnav.needs-google .side-ava::after { content: ""; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--ember); border: 2px solid var(--ink); }
.topnav .side-who { display: none; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; z-index: 40; padding: 5px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--shadow-c);
  display: flex; flex-direction: column; animation: fadeUp 0.2s var(--ease) both;
}
.acct-menu button, .acct-menu a { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--ink); text-decoration: none; cursor: pointer; }
.acct-menu button:hover, .acct-menu a:hover { background: #fff; color: var(--ember); }
.calls-minutes { min-height: 36px; margin-right: 10px; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  background: #fff; font-size: 13.5px; color: var(--ink); }
.calls-minutes:disabled { opacity: 0.5; }
.tx-open { flex: none; min-height: var(--tap-min); }
.tx-body { padding: 14px 18px 18px; border-top: 1px solid var(--line); line-height: 1.55; overflow-wrap: anywhere; }
.tx-body p { margin: 0 0 0.7rem; }
.tx-body b { margin-right: 4px; }
.tx-copy { min-height: var(--tap-min); }
#set-calls .footnote { margin-top: 0.8rem; }
#calls-routines { margin-top: 0.8rem; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; padding: 0; border: 0; }
.fb-kinds legend, .fb-label { display: block; margin-bottom: 8px; padding: 0; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.fb-kinds label { cursor: pointer; }
.fb-kinds input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-kinds span { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 14px; border: 1.5px solid var(--ink);
  border-radius: 999px; background: var(--card); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.fb-kinds label:hover span { color: var(--ember-text); border-color: var(--ember); }
.fb-kinds input:checked + span { background: var(--ink); color: var(--paper); }
.fb-kinds input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
#fb-text { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px; border: 1.5px solid var(--ink);
  border-radius: var(--r-md); background: #fff; font-size: 16px; line-height: 1.5; color: var(--ink); resize: vertical; }
#fb-text:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
.fb-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.fb-thanks { margin: 12px 0 0; font-weight: 600; color: var(--ok); }
.acct-menu .am-sep { height: 1px; margin: 4px 8px; background: rgba(23, 21, 15, 0.14); }

/* ── pages ── */
.app-main { position: relative; z-index: 1; flex: 1; min-height: 0; height: auto; }
.app-main .page { flex: 1; min-height: 0; overflow-y: auto; }
#view-app .sheet { max-width: 1120px; padding: 26px 36px 60px; }
#view-app .sheet-h { font-size: 1.9rem; }

/* ── home ── */
.home6 { animation: fadeUp 0.45s var(--ease) both; }
.hero6 {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: center;
  padding: 26px 30px; margin-bottom: 16px; border: 1.5px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--shadow-c);
  background: linear-gradient(120deg, #FFE9BF 0%, #FFD08A 55%, #FDB362 100%);
}
.h6-date { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(23,21,15,0.7); margin-bottom: 6px; }
.h6-greet { font-family: var(--serif); font-weight: 500; font-size: 38px; letter-spacing: -0.015em; line-height: 1.05; margin-bottom: 8px; }
.h6-line { font-size: 15px; color: rgba(23,21,15,0.78); max-width: 36rem; }
.ask6 { display: flex; gap: 8px; margin-top: 18px; max-width: 560px; }
.ask6 input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; font-family: var(--sans); font-size: 15px; color: var(--ink); box-shadow: 3px 3px 0 var(--shadow-c); }
.ask6 input:focus { outline: none; box-shadow: 3px 3px 0 var(--ember); }
.ask6 input::placeholder { color: var(--dim); }
.ask6 .btn-glow { height: 46px; padding: 0 20px; border-radius: 12px; font-size: 14.5px; font-weight: 700; box-shadow: 3px 3px 0 var(--shadow-c); }
.ask6 .btn-glow:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ember); background: var(--ink); border-color: var(--ink); }
.hero6-rin { position: relative; display: grid; place-items: end center; min-height: 200px; }
.mascot6 { width: 170px; filter: drop-shadow(4px 5px 0 rgba(23,21,15,0.16)); animation: bob 4.5s ease-in-out infinite; }
.mascot6 .wave { transform-origin: 46px 8px; animation: wave 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(0); } }
.say6 {
  position: absolute; left: 50%; top: 2px; transform: translateX(-56%) rotate(-2deg); max-width: 220px; text-align: center; z-index: 1;
  background: #fff; color: var(--ink); font-weight: 600; font-size: 13px; line-height: 1.3; padding: 8px 12px;
  border: 1.5px solid var(--ink); border-radius: 14px 14px 14px 4px; box-shadow: 3px 3px 0 var(--shadow-c);
}
.hero6 .streak { position: absolute; right: 0; bottom: 0; z-index: 1; display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 11px; box-shadow: 3px 3px 0 var(--shadow-c); font-size: 12.5px; font-weight: 700; color: var(--ink); animation: none; }
.hero6 .streak b { font-family: var(--sans); font-size: 12.5px; font-weight: 800; color: var(--ink); }
.hero6 .streak b::after { content: ""; margin: 0; }
.hero6 .streak .flame { font-style: normal; font-size: 13px; }
.hero6 .streak.zero { display: none; }

/* the numbers */
.stats6 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat6 { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--shadow-c); background: var(--paper); text-align: left; cursor: pointer; font-family: var(--sans); color: var(--ink); transition: transform 0.15s var(--spring), box-shadow 0.15s; }
.stat6:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-c); }
.stat6.peach { background: #FFDCC6; } .stat6.mint { background: #DDF5D4; } .stat6.sky { background: #D9ECFF; } .stat6.lemon { background: #FFF1A8; } .stat6.lilac { background: #E6DDFF; }
.stat6 .tile { background: #fff; width: 34px; height: 34px; }
.stat6 b { display: block; font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stat6 small { display: block; font-size: 12px; font-weight: 600; color: rgba(23,21,15,0.7); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat6 > div { min-width: 0; }

.h6-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.h6-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card6 { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--shadow-c); padding: 18px 20px; margin-bottom: 16px; }
.h6-col .card6 { margin-bottom: 0; }
.c6-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.c6-head h2 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15.5px; font-weight: 700; letter-spacing: 0; }
.c6-head h2 .ic { width: 16px; height: 16px; color: var(--ember); }
.c6-count { font-weight: 600; font-size: 12px; color: var(--ink); margin-left: 4px; padding: 2px 8px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; }
.c6-tag { font-size: 12px; font-weight: 700; color: var(--ember); padding: 3px 9px; border-radius: 999px; border: 1.5px solid var(--ember); background: #fff; white-space: nowrap; }
.c6-sub { font-size: 13.5px; color: var(--dim); margin: -2px 0 12px; line-height: 1.5; }
.c6-head .link-btn { font-size: 13px; font-weight: 700; color: var(--ember); white-space: nowrap; }
.c6-head .link-btn:hover { color: var(--ink); }
.c6-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip6 { background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 12px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: transform 0.15s var(--spring), box-shadow 0.15s, background 0.15s; }
.chip6:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--shadow-c); background: var(--paper); }
.list6 { display: flex; flex-direction: column; }
.list6 .muted, .conn-grid .muted { font-size: 13px; padding: 8px 0; }

/* where rin lives */
.conn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.conn6 { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; }
.conn6.on { background: #E8F6E2; }
.conn6 .tile { grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 12px; }
.conn6 .tile svg { width: 18px; height: 18px; }
.conn6 .tile .ic { width: 18px; height: 18px; }
.conn6 b { display: block; font-size: 14.5px; font-weight: 700; }
.conn6 small { display: block; font-size: 12.5px; color: var(--dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn6.on small { color: #2c7a3f; font-weight: 600; }
.conn6 .conn-acts { grid-column: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.conn6 .conn-act { height: 28px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ember); color: var(--paper); font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform 0.15s var(--spring), box-shadow 0.15s, background 0.15s; }
.conn6 .conn-act:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--shadow-c); background: var(--ink); }
.conn6 .conn-act.ghost { background: #fff; color: var(--ink); }
.conn6 .conn-act.ghost:hover { background: var(--paper); }
.conn6 .conn-ok { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; background: #2c7a3f; color: #fff; font-size: 12px; font-weight: 700; }
.conn6 .conn-ok .ic { width: 12px; height: 12px; }
.conn6 .conn-num { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* today: rows with a pastel icon tile */
.hc-today .receipt-row, .hc-today .task-row, .hc-today .goal-row-h {
  display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1.5px dashed var(--line-2);
  font-size: 14.5px; transition: none;
}
.hc-today .list6:last-of-type .receipt-row:last-child, .hc-today .list6:last-of-type .task-row:last-child, .hc-today .list6:last-of-type .goal-row-h:last-child { border-bottom: 0; }
.hc-today .receipt-row:hover, .hc-today .task-row:hover, .hc-today .goal-row-h:hover { padding-left: 0; }
.hc-today .receipt-row i { display: none; }
.hc-today .receipt-row .rr-text { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-today .receipt-row .cd { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ember); white-space: nowrap; }
.hc-today .task-row .tick { width: 22px; height: 22px; margin: 0 5px; border: 1.5px solid var(--ink); flex: none; background: #DDF5D4; }
.hc-today .task-row > div, .hc-today .goal-row-h > div { flex: 1; min-width: 0; }
.hc-today .task-row b, .hc-today .goal-row-h b { font-size: 14.5px; font-weight: 600; }
.hc-today .task-row small, .hc-today .goal-row-h small { font-size: 12.5px; color: var(--dim); }
.hc-today .task-row.hot b::after { content: " · high"; color: var(--ember); font-family: var(--sans); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0; }

/* who rin is: her face, the current voice, the switch */
.who6 { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.who6-ava { width: 48px; height: 48px; flex: none; border-radius: 14px; border: 1.5px solid var(--ink); background: #fff; display: grid; place-items: center; overflow: hidden; }
.who6-ava .rin-ico { width: 100%; height: 100%; border-radius: inherit; }
.who6 b { display: block; font-size: 15px; font-weight: 700; }
.who6 small { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.45; margin-top: 2px; }
.hc-who .voice-grid { gap: 10px; }
.hc-who .voice-opt { border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; padding: 12px 12px 11px; box-shadow: none; transition: transform 0.15s var(--spring), box-shadow 0.15s, background 0.15s; }
.hc-who .voice-opt:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow-c); border-color: var(--ink); }
.hc-who .voice-opt.on { background: #FFDCC6; box-shadow: 3px 3px 0 var(--shadow-c); border-color: var(--ink); }
.hc-who .voice-opt .vo-ava { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 8px; border: 1.5px solid var(--ink); }
.hc-who .voice-opt.genz .vo-ava { filter: hue-rotate(300deg) saturate(0.9); }
.hc-who .voice-opt b { font-size: 14px; font-weight: 700; }
.hc-who .voice-opt b::before { display: none; }
.hc-who .voice-opt small { display: none; }
.hc-who .voice-opt .sample { font-family: var(--sans); font-style: normal; font-size: 12.5px; color: var(--dim); margin-top: 4px; }
.hc-who .voice-opt.on .sample { color: rgba(23,21,15,0.75); }

/* setup checklist */
.card6.setup { margin-top: 0; padding: 18px 20px; }
.card6 .setup-bar { height: 10px; margin: 10px 0 12px; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; }
.card6 .setup-bar i { background: var(--ember); border-radius: 999px; }
.card6 .setup-list { grid-template-columns: 1fr; gap: 0; }
.card6 .setup-item { padding: 7px 4px; font-size: 14px; font-weight: 600; border-radius: 8px; gap: 10px; border: 1.5px solid transparent; }
.card6 .setup-item:hover { background: #fff; border-color: transparent; }
.card6 .setup-item .tickbox { width: 20px; height: 20px; border-width: 1.5px; font-size: 10px; background: #fff; }
.card6 .setup-item.done .tickbox { background: var(--ember); border-color: var(--ink); }
.card6 .setup-item.done { font-weight: 500; }
.card6 .setup-item small { display: none; }
.h6-col > .setup-restore { margin: 0; font-size: 13px; font-weight: 600; color: var(--ember); text-align: left; }

/* routines: rows with a tile, run/stop */
.hc-routines .auto-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1.5px dashed var(--line-2); transition: none; }
.hc-routines .auto-row:last-child { border-bottom: 0; }
.hc-routines .auto-row:hover { padding-left: 0; }
.hc-routines .ar-body b { font-size: 14.5px; font-weight: 600; }
.hc-routines .ar-body small { font-size: 12.5px; color: var(--dim); }
.hc-routines .ar-acts { flex: none; gap: 5px; }
.hc-routines .ar-acts button { white-space: nowrap; width: auto; min-width: 0; overflow: visible; height: 28px; padding: 0 10px; border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.hc-routines .ar-acts .ar-run { background: var(--ink); color: var(--paper); }
.hc-routines .ar-acts button:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--shadow-c); color: var(--ink); background: #fff; }
.hc-routines .ar-acts .ar-run:hover { background: var(--ember); color: var(--paper); }

.h6-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 22px; font-size: 12.5px; color: var(--dim); }
.h6-foot strong { font-weight: 600; }
.h6-foot .plan-mark { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; border: 0; padding: 0; background: none; color: var(--dim); }
.h6-foot .link-btn { font-size: 12.5px; font-weight: 600; color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.h6-foot .link-btn:hover { color: var(--ember); }
.h6-foot .rin-chip { margin: 0; }

/* ── other pages: brand cards, on paper rather than white, labels in one font ── */
#view-app .g-card, #view-app .t-card, #view-app .ab-card, #view-app .rt-row, #view-app .lore-note, #view-app .app-row, #view-app .plan-col, #view-app .device-box { background: var(--paper); }
#view-app .voice-opt .vo-ava { width: 26px; height: 26px; border-radius: 8px; margin-bottom: 6px; }
#view-app .voice-opt.genz .vo-ava { filter: hue-rotate(300deg) saturate(0.9); }
#view-app .rt-meta, #view-app .rt-meta span, #view-app .ln-cat, #view-app .sk-kicker, #view-app .g-sub, #view-app .beta-mark, #view-app .ab-tag, #view-app .f-chip, #view-app .kv small, #view-app .kv span, #view-app .set-h small, #view-app .wc-title, #view-app .rt-head, #view-app .chat-status, #view-app .voice-pill, #view-app .set-nav-label, #view-app .plan-mark, #view-app .rt-acts button, #view-app .mn-del {
  font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12px;
}
#view-app .sk-kicker, #view-app .rt-head { font-size: 13px; font-weight: 700; color: var(--dim); }
#view-app .voice-pill { font-weight: 600; }
#view-app .f-chip { padding: 6px 12px; font-weight: 600; }
#view-app .rt-acts button { font-weight: 700; }

/* ── phone: the bar keeps brand, "text rin" and the account; an outlined tab bar takes the pages ── */
.tabbar { display: none; }
@media (max-width: 1100px) { .h6-grid { grid-template-columns: 1fr; } .stats6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .conn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 920px) {
  .topnav { padding: 10px 14px; gap: 10px; }
  .tn-nav, .topnav .side-google { display: none; }
  .topnav .wordmark { margin-right: auto; }
  .topnav .side-cta { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .acct-menu { right: 0; }
  .app-main .page { padding-bottom: 90px; }
  #view-app .sheet { padding: 18px 14px 110px; }
  .hero6 { grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; padding: 20px 18px; }
  .h6-greet { font-size: 28px; }
  .hero6-rin { min-height: 130px; }
  .mascot6 { width: 108px; }
  .say6 { display: none; }
  .hero6 .streak { display: none; }   /* the streak tile below says it; on a phone the pill sat on rin's face */
  .ask6 { max-width: none; }
  .stats6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat6 { padding: 10px 12px; }
  .conn-grid { grid-template-columns: 1fr; }
  .tabbar {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; justify-content: space-around; align-items: flex-end;
    padding: 6px; border-radius: 18px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow-c);
  }
  .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--dim); font-family: var(--sans); font-size: 11px; font-weight: 700; cursor: pointer; }
  .tabbar button .ic { width: 20px; height: 20px; }
  .tabbar button.on { color: var(--ember); }
  .tabbar button.big { position: relative; isolation: isolate; color: var(--ink); }
  .tabbar button.big .ic { position: relative; z-index: 1; color: var(--paper); margin-top: -11px; margin-bottom: 8px; }
  .tabbar button.big::before { content: ""; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--ember); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow-c); }
}

/* links inside rin's replies (research answers end with a sources block) */
.msg .msg-link { color: var(--ember); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; font-weight: 600; }
.msg.user .msg-link { color: var(--paper); }

/* ═════════ landing hero v2 · poke-style ═════════
   The owner's client liked poke.com's hero: a realistic phone standing in a soft, hazy photo that fades into the
   page, a transparent nav, a centred headline. Ours keeps the serif + ember headline and the live demo (you can still
   type to rin), loses the cartoon outline on the phone and the stickers around it, and paints the scene in CSS
   (sky → haze → a sea line → sand, a mango sun, film grain). A real photo can replace the gradients by setting
   --hero-photo on .hero-scene. */
#view-auth { position: relative; }
#view-auth .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: transparent; border-bottom: 0; padding-top: 1.1rem; }
/* Links centred on the PAGE, in line with the centred hero. With space-between they sat midway between the narrow
   wordmark and the much wider log in + get started group, about 70px left of the headline. */
#view-auth .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
#view-auth .nav .wordmark { justify-self: start; }
#view-auth .nav .nav-cta { justify-self: end; }
@media (max-width: 920px) { #view-auth .nav { display: flex; } }       /* links hidden: logo left, buttons right */
#view-auth .nav .wordmark { color: var(--ink); }
#view-auth .nav-links a, #view-auth .nav .link-btn { color: rgba(23,21,15,0.72); font-weight: 600; }
#view-auth .nav-links a:hover, #view-auth .nav .link-btn:hover { color: var(--ink); }
#view-auth .nav .btn-glow { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }
#view-auth .nav .btn-glow:hover { background: var(--ember); border-color: var(--ember); color: var(--paper); transform: translate(-1px, -1px); }
.hero-wrap { position: relative; overflow: hidden; }
.hero-scene {
  /* the real photo (static/brand/hero.jpg, credited in static/brand/CREDITS.md) under a light haze veil and a fade
     into the page; the gradients below it are the fallback while the photo loads or if it is removed */
  --hero-photo: url("/static/brand/hero.jpg");
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(246,244,238,0.62) 0%, rgba(246,244,238,0.3) 28%, rgba(246,244,238,0.12) 50%, rgba(246,244,238,0.55) 82%, var(--paper) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.34)),
    var(--hero-photo),
    radial-gradient(48% 34% at 50% 60%, rgba(255,196,120,0.6), rgba(255,196,120,0) 70%),
    linear-gradient(180deg, #D6E7F5 0%, #E6EFF5 24%, #F0E9E0 50%, #F2E3CD 70%, #F5EEE0 88%, var(--paper) 100%);
  background-size: cover; background-position: center 38%;
}
.hero-scene::before { content: none; }
.hero-meta { gap: 0.6rem; }
.hero-meta span { background: rgba(255,255,255,0.72); border: 1px solid rgba(23,21,15,0.15); border-radius: 999px; padding: 0.35rem 0.75rem; backdrop-filter: blur(6px); color: var(--ink); font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; }
.hero-sub { text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.hero-scene::after { content: ""; position: absolute; inset: 0; opacity: 0.55; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; }
.hero-scene i { display: none; }
.hero-scene .c1 { width: 460px; height: 130px; left: 6%; top: 15%; }
.hero-scene .c2 { width: 340px; height: 110px; right: 8%; top: 24%; opacity: 0.85; }
.hero-scene .c3 { width: 260px; height: 80px; left: 38%; top: 8%; opacity: 0.7; }
.hero { position: relative; z-index: 1; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(1.6rem, 4vh, 2.8rem); max-width: 1100px; padding-top: calc(72px + clamp(2.4rem, 7vh, 5rem)); padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.hero-copy { max-width: 780px; display: flex; flex-direction: column; align-items: center; }
.hero .badge-line { box-shadow: none; border-color: rgba(23,21,15,0.2); background: rgba(255,255,255,0.65); backdrop-filter: blur(8px); }
.hero-h { font-size: clamp(2.8rem, 6.4vw, 5.2rem); }
.hero-sub { max-width: 34rem; color: rgba(23,21,15,0.72); }
.hero-ctas { justify-content: center; }
.hero .btn-glass { background: rgba(255,255,255,0.7); border-color: rgba(23,21,15,0.25); backdrop-filter: blur(8px); }
.hero .btn-glass:hover { border-color: var(--ink); box-shadow: none; }
.hero-meta { justify-content: center; color: rgba(23,21,15,0.6); }

/* the phone: a real one */
/* The hero centres its own copy, and the phone sits inside it, so every bubble, name and
   timestamp inherited that. A message thread reads left-aligned. */
.phone-stage, .phone { text-align: left; }
.ph-status, .ph-stamp, .ph-name, .ph-tries { text-align: center; }

.phone-stage { padding-top: 0.4rem; gap: 1.2rem; }
.ph-sticker, .ph-emoji { display: none; }
.phone-tilt { position: relative; }
.phone-tilt::before, .phone-tilt::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2c2f; box-shadow: inset 0 0 0 1px #0e0e0f; }
.phone-tilt::before { left: -4px; top: 150px; height: 64px; }
.phone-tilt::after { right: -4px; top: 190px; height: 96px; }
.phone {
  width: min(340px, 86vw); height: 700px; max-height: none;
  background: #fff; color: #111; border: 9px solid #111114; border-radius: 54px;
  box-shadow: 0 0 0 1.5px #56565a, 0 0 0 3px #1a1a1d, 0 34px 70px -28px rgba(23,21,15,0.55), 0 80px 120px -50px rgba(23,21,15,0.45), inset 0 0 0 1px rgba(255,255,255,0.6);
  animation: phoneFloat 10s ease-in-out infinite;
}
.ph-island { top: 11px; width: 118px; height: 34px; background: #0a0a0b; box-shadow: inset 0 0 0 1px #1c1c1f; }
.ph-status { top: 20px; left: 30px; right: 26px; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: #111; align-items: center; }
.ph-sig { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0; }
.ph-sig i { margin: 0; color: #111; display: inline-block; }
.ph-cell { width: 17px; height: 11px; background: linear-gradient(to right, #111 0 3px, transparent 3px 4.5px, #111 4.5px 7.5px, transparent 7.5px 9px, #111 9px 12px, transparent 12px 13.5px, #111 13.5px 17px); clip-path: polygon(0 60%, 25% 60%, 25% 40%, 50% 40%, 50% 20%, 75% 20%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.ph-wifi { width: 15px; height: 11px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: radial-gradient(circle at 50% 100%, #111 0 2px, transparent 2.5px 4px, #111 4.5px 6px, transparent 6.5px 8px, #111 8.5px 10px, transparent 10.5px); }
.ph-batt { width: 25px; height: 12px; border: 1.5px solid rgba(17,17,17,0.5); border-radius: 4px; position: relative; background: linear-gradient(to right, #111 0 78%, transparent 78%); background-clip: content-box; padding: 1.5px; }
.ph-batt::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: rgba(17,17,17,0.5); }
.ph-head { position: relative; flex-direction: column; align-items: center; gap: 1px; padding: 3.5rem 1rem 0.55rem; border-bottom: 1px solid #E5E5EA; background: rgba(249,249,249,0.94); }
.ph-back { position: absolute; left: 14px; top: 3.45rem; color: #1B8CFF; font-size: 1.7rem; margin: 0; }
.ph-ava { width: 46px; height: 46px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.ph-name { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline; column-gap: 3px; font-size: 0.72rem; font-weight: 500; color: #111; }
.ph-name small { grid-column: 1 / -1; text-align: center; }
.ph-name i { color: #6e6e73; font-size: 0.66rem; margin-left: 2px; }
.ph-name small { font-family: var(--sans); font-size: 0.6rem; color: #6e6e73; letter-spacing: 0; text-transform: none; }
.ph-voice { position: absolute; right: 12px; top: 3.55rem; margin: 0; font-family: var(--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0; text-transform: none; background: #F2F2F7; color: #3a3a3c; border: 1px solid #E5E5EA; }
.ph-voice:hover { box-shadow: none; transform: none; border-color: #1B8CFF; color: #1B8CFF; }
.ph-voice.pro { color: var(--ember-text); border-color: var(--ember-text); background: #fff; }
.ph-thread { padding: 0.8rem 0.8rem 0.5rem; gap: 0.3rem; background: #fff; }
.ph-stamp { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0; text-transform: none; color: #6e6e73; font-weight: 500; }
.ph-b { font-size: 0.93rem; padding: 0.5rem 0.78rem; border-radius: 19px; max-width: 78%; }
.ph-b.bot { background: #E9E9EB; color: #111; border: 0; border-bottom-left-radius: 6px; }
.ph-b.user { background: #1B8CFF; color: #fff; border-bottom-right-radius: 6px; }
.ph-b.err { border-color: #ff3b30; color: #ff3b30; font-family: var(--sans); }
.ph-b.typing span { background: #8e8e93; }
.ph-receipt, .ph-b + small, .ph-thread small.receipt { align-self: flex-end; font-family: var(--sans); font-size: 0.62rem; color: #6e6e73; margin: -2px 6px 2px 0; }
.ph-compose { border-top: 0; background: #fff; padding: 0.5rem 0.8rem 0.35rem; }
.ph-compose input { background: #fff; border: 1px solid #d1d1d6; border-radius: 999px; padding: 0.5rem 0.9rem; font-size: 0.95rem; }
.ph-compose input:focus { border-color: #1B8CFF; box-shadow: none; }
.ph-compose input::placeholder { color: #6e6e73; }
.ph-compose button { width: 32px; height: 32px; background: #1B8CFF; border-color: #1B8CFF; font-size: 1rem; }
.ph-compose button:hover { background: #0a6fd6; border-color: #0a6fd6; transform: none; }
.ph-compose button.is-cta { background: var(--ember); border-color: var(--ember); height: 32px; }
.ph-bar { width: 36%; height: 5px; background: #111; opacity: 1; margin: 0.15rem auto 0.5rem; }
.ph-tries { max-width: 420px; }
.ph-tries .chip { background: rgba(255,255,255,0.75); border: 1px solid rgba(23,21,15,0.18); backdrop-filter: blur(8px); font-weight: 600; }
.ph-tries .chip:hover { border-color: var(--ink); box-shadow: none; transform: translateY(-1px); }
@media (max-width: 720px) {
  #view-auth .nav { padding-top: 0.8rem; }
  .hero { padding-top: calc(64px + 1.6rem); }
  .phone { height: 600px; border-width: 8px; border-radius: 48px; }
  .hero-scene .c1 { width: 260px; } .hero-scene .c2 { width: 200px; }
}

/* ── the first screen shows the phone (owner, 2026-11-01: "when i open it i want to see the phone", then "make
   phone bigger") ──
   Stacked under the copy, the phone started ~640px down: a 1440x900 screen showed a third of it, a 1366x768 laptop a
   fifth. From 1024px the copy goes left and the phone right, both centred in the first screen. The suggestions move
   under the buttons on the left so the phone gets the whole height, and it is zoomed to fill it: 770px tall at
   1440x900, 840px on a 1080p screen. Narrower than 1024px it stays stacked, with the copy tightened so the chat itself
   is on screen when the page opens. */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy phone" "tries phone";
    justify-items: stretch; align-items: center; text-align: left;
    column-gap: clamp(3rem, 7vw, 7rem); row-gap: var(--sp-5); max-width: 1180px; min-height: 100vh; min-height: 100svh;
    padding-top: calc(72px + var(--sp-5)); padding-bottom: var(--sp-5); perspective: 1400px;
  }
  .hero-copy { grid-area: copy; align-self: end; position: relative; isolation: isolate; align-items: flex-start; max-width: 600px; }
  /* on the left the copy sits over the island and the surf: a soft paper glow keeps the words on calm ground */
  .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -18% -20% -20% -26%;
    background: radial-gradient(closest-side, rgba(246, 244, 238, 0.82) 35%, rgba(246, 244, 238, 0)); }
  .hero-ctas { justify-content: flex-start; }
  .hero-sub { text-wrap: pretty; }
  /* the stage's box goes away so the phone and the suggestions can sit in different columns (the tilt's perspective
     moves up to .hero; app.js scrolls to #phone, not the stage) */
  .phone-stage { display: contents; }
  .phone-tilt { grid-area: phone; align-self: center; animation: fadeIn 0.9s var(--ease) 0.18s both; }
  .ph-tries { grid-area: tries; align-self: start; justify-content: flex-start; max-width: none; text-align: left;
    animation: fadeUp 0.9s var(--ease) 0.38s both; }
  .ph-tries::before { content: "or try one on the phone →"; flex-basis: 100%; margin-bottom: 2px;
    font-size: var(--fs-xs); font-weight: 600; color: var(--dim); }
}
@keyframes fadeIn { from { opacity: 0; } }
/* zoom (not transform) so the layout grows and shrinks with it. The phone gets the screen height minus the nav above
   and a margin below (~120px), in steps: */
@media (min-width: 1024px) { .phone-tilt { zoom: 1.2; } }
@media (min-width: 1024px) and (max-height: 959px) { .phone-tilt { zoom: 1.1; } }
@media (min-width: 1024px) and (max-height: 899px) { .phone-tilt { zoom: 1.02; } }
@media (min-width: 1024px) and (max-height: 839px) { .phone-tilt { zoom: 0.94; } }
@media (min-width: 1024px) and (max-height: 779px) { .phone-tilt { zoom: 0.86; } }
@media (min-width: 1024px) and (max-height: 719px) { .phone-tilt { zoom: 0.77; } }
@media (min-width: 1024px) and (max-height: 659px) { .phone-tilt { zoom: 0.68; } }
@media (max-width: 1023px) {
  .hero { gap: var(--sp-5); padding-top: calc(72px + var(--sp-5)); }
  .hero .badge-line { margin-bottom: var(--sp-4); }
  .hero-sub { margin: var(--sp-4) 0 var(--sp-5); }
}
@media (max-width: 600px) {
  .hero { padding-top: calc(64px + var(--sp-3)); }
  .hero .badge-line { letter-spacing: 0.1em; padding: 0.4rem 0.8rem; }
  .hero-sub { font-size: var(--fs-base); line-height: 1.55; }
  .phone { width: min(360px, 92vw); height: 620px; }
}
/* the suggestions under the phone are real buttons: 36px tall with an 8px gap, so each 44px tap area is its own */
.ph-tries { gap: var(--sp-2); }
.ph-tries .chip { min-height: 36px; margin: 0; padding: 0.4rem 0.9rem; font-size: var(--fs-sm); display: inline-flex; align-items: center; }

/* ── "texts you first." (static/app.js initHeroKinetic; owner, 2026-11-01: "make this font better, interactive") ──
   Same Fraunces, with its SOFT and WONK axes on: rounder strokes and the playful italic forms, closer to the mango.
   It arrives like a text (a typing bubble, then the letters, then a mango for the full stop), the letters swell
   toward the cursor along the weight axis, and a tap sends a wave through them. */
.hero-h .hk { position: relative; display: inline-block; font-variation-settings: "SOFT" 100, "WONK" 1; cursor: default; }
.hk-w { display: inline-block; white-space: nowrap; }
.hk-l { --w: 0; display: inline-block; font-weight: calc(500 + var(--w) * 380); translate: 0 calc(var(--w) * -0.07em);
  transition: font-weight 0.3s ease, translate 0.35s var(--spring); }
/* the drawing has room for arms and a stem around the body, so it is sized up and tucked in to read as a full stop */
.hk-dot { display: inline-block; width: 0.46em; height: 0.5em; margin-left: -0.1em; vertical-align: -0.02em; overflow: visible; }
.hk-typing { position: absolute; left: 0; top: 50%; translate: 0 -50%; display: inline-flex; gap: 6px; padding: 14px 16px;
  border-radius: 24px 24px 24px 6px; background: #FBE1D3; opacity: 0; pointer-events: none; animation: hk-typing 0.95s ease 0.2s both; }
.hk-typing i { width: 10px; height: 10px; border-radius: 50%; background: var(--ember); animation: dotBounce 0.9s ease-in-out infinite; }
.hk-typing i:nth-child(2) { animation-delay: 0.12s; } .hk-typing i:nth-child(3) { animation-delay: 0.24s; }
.hk-l, .hk-dot { animation: hk-in 0.55s var(--spring) backwards; animation-delay: calc(1.05s + var(--i) * 38ms); }
.hk-waving .hk-l { animation: hk-wave 0.6s ease calc(var(--i) * 35ms); }
.hk-waving .hk-dot { animation: hk-wave-dot 0.7s var(--spring) calc(var(--i) * 35ms); }
@keyframes hk-typing { 0% { opacity: 0; scale: 0.6; } 18%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 0.85; } }
@keyframes hk-in { from { opacity: 0; translate: 0 0.35em; rotate: -10deg; } }
@keyframes hk-wave { 40% { font-weight: 860; translate: 0 -0.12em; } }
@keyframes hk-wave-dot { 50% { translate: 0 -0.3em; rotate: 24deg; } }
@media (prefers-reduced-motion: reduce) {
  .hk-l, .hk-dot { animation: none !important; }
  .hk-typing { display: none; }
}

/* ── plan: the pill in the bar, the card on home ── */
.tn-plan { height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid rgba(246,244,238,0.35); background: transparent; color: var(--paper); font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.tn-plan:hover { border-color: var(--paper); background: rgba(246,244,238,0.1); }
.tn-plan.top { border-color: var(--ember); color: #FFC9A8; }
.plan-perks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.plan-perks .perk { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1.5px solid var(--ink); font-size: 12.5px; font-weight: 600; }
.plan-perks .perk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.hc-plan .plan-up { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--ember); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow-c); }
.hc-plan .plan-up:hover { background: var(--ink); transform: translate(-1px, -1px); }
.hc-plan .c6-foot .link-btn { font-size: 13px; font-weight: 700; color: var(--ember); }

/* ── routines page in the dashboard's language ── */
#view-app .rt-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
#view-app .rt-head b { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; }
#view-app .rt-row { padding: 0.85rem 1rem; gap: 0.9rem; }
#view-app .rt-row .rt-ico { width: 40px; height: 40px; border-radius: 12px; }
#view-app .rt-row .rt-ico .ic { width: 18px; height: 18px; }
#view-app .rt-row.paused .rt-ico { background: var(--paper); }
#view-app .rt-body b { font-size: 15px; font-weight: 700; }
#view-app .rt-meta { align-items: center; gap: 4px 6px; margin-top: 4px; font-size: 12.5px; color: var(--dim); }
#view-app .rt-meta .kind { font-size: 11px; font-weight: 700; color: var(--ember); border: 1.5px solid var(--ember); border-radius: 999px; padding: 1px 7px; margin-right: 2px; }
#view-app .rt-meta .next { color: var(--ink); font-weight: 700; }
#view-app .rt-acts { gap: 6px; }
#view-app .rt-acts button { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; }
#view-app .rt-acts button .ic { width: 12px; height: 12px; }
#view-app .rt-acts .ar-run { background: var(--ink); color: var(--paper); }
#view-app .rt-acts .ar-x { padding: 0; width: 30px; justify-content: center; }
#view-app .rt-acts button:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--shadow-c); color: var(--ink); background: #fff; }
#view-app .rt-acts .ar-run:hover { background: var(--ember); color: var(--paper); }
#view-app .rt-acts .ar-x:hover { color: var(--ember); }
#view-app .rt-foot { font-size: 13px; }
@media (max-width: 920px) {
  #view-app .rt-row { grid-template-columns: 40px minmax(0, 1fr); }
  #view-app .rt-acts { justify-content: flex-start; padding-left: 52px; margin-top: -2px; }
  .tn-plan { display: none; }
}

/* login: the password form explains itself */
.mini-hint { font-size: 0.82rem; color: var(--dim); line-height: 1.45; margin: 0 0 0.6rem; }

/* ═════════ landing · the abilities, told poke-style ═════════ */
.story { max-width: 1140px; margin: 0 auto; padding: clamp(3rem, 8vh, 5.5rem) clamp(1.4rem, 5vw, 3rem) 1rem; }
/* a soft paper glow behind the heading, so the wallpaper never sits under words */
.story-open { position: relative; isolation: isolate; text-align: center; margin-bottom: 2.6rem; }
.story-open::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -30px; width: min(900px, 100%); height: 260px;
  transform: translateX(-50%); background: radial-gradient(closest-side, var(--paper) 55%, rgba(246, 244, 238, 0)); }
.story-open .sec-h { margin-bottom: 0.8rem; }
.story-lead { margin: 0 auto 2rem; color: var(--ink); font-size: 1.15rem; font-weight: 500; }
/* ── a week with rin (index.html #features) ──
   Replaced the apps diagram and the five pastel tiles (owner, 2026-11-01: the diagram didn't get the message across,
   the tiles had no creativity). Five days down a calendar spine, alternating sides, each day on a different app drawn
   in that app's own look, on a tinted card in the day's colour. The messages in each window arrive in order when the
   day scrolls in, and a sticker pops onto the window with the thing rin kept. */
.wk-apps { display: grid; justify-items: center; gap: var(--sp-3); }
.wk-grp { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2); }
.wk-apps-l { margin-right: var(--sp-1); font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.wk-app { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 12px 4px 4px; background: #fff;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); font-size: var(--fs-sm); font-weight: 700; }
.wk-app .tile { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: none; }
.wk-app .tile.sky { background: var(--tint-sky); } .wk-app .tile.mint { background: var(--tint-mint); } .wk-app .tile.lilac { background: var(--tint-lilac); }
.wk-app .tile .ic, .wk-app .tile svg { width: 15px; height: 15px; }

.wk-line { position: relative; list-style: none; max-width: 1080px; margin: clamp(3rem, 8vh, 5rem) auto 0; padding: 0;
  display: grid; gap: clamp(4rem, 11vh, 6.5rem); }
/* the spine: a dashed line, filled in ember as you scroll where the browser can do that without script */
.wk-line::before, .wk-line::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; translate: -1px 0; }
.wk-line::before { border-left: 2px dashed var(--line-2); }
.wk-day { --wk-tint: var(--tint-peach); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(4.5rem, 10vw, 8rem); align-items: center; }
.wk-day.sky { --wk-tint: var(--tint-sky); } .wk-day.mint { --wk-tint: var(--tint-mint); }
.wk-day.lilac { --wk-tint: var(--tint-lilac); } .wk-day.lemon { --wk-tint: var(--tint-lemon); }
.wk-pin { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; min-width: 56px; padding: 7px 12px;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--card); box-shadow: var(--shadow-sm);
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  transition: background-color 0.4s ease 0.2s, color 0.4s ease 0.2s; }
.wk-day.visible .wk-pin { background: var(--ink); color: var(--paper); }

.wk-copy { position: relative; isolation: isolate; max-width: 400px; }
/* a paper glow under each day's words, so the mango wallpaper never runs under them */
.wk-copy::before { content: ""; position: absolute; z-index: -1; inset: -40px -56px;
  background: radial-gradient(closest-side, var(--paper) 62%, rgba(246, 244, 238, 0)); }
.wk-day:nth-child(odd) .wk-copy { grid-column: 1; justify-self: end; text-align: right; }
.wk-day:nth-child(odd) .wk-shot { grid-column: 2; justify-self: start; }
.wk-day:nth-child(even) .wk-copy { grid-column: 2; grid-row: 1; justify-self: start; }
.wk-day:nth-child(even) .wk-shot { grid-column: 1; grid-row: 1; justify-self: end; }
.wk-where { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.wk-copy h3 { margin: var(--sp-2) 0 var(--sp-3); font-family: var(--serif); font-weight: 500; font-size: clamp(var(--fs-2xl), 3.6vw, 2.75rem);
  letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
.wk-copy h3 em { color: var(--ember); }
.wk-copy p { font-size: var(--fs-lg); line-height: 1.5; color: #4A463D; text-wrap: pretty; }

/* the picture: an app window on a tinted card turned a few degrees, the turn alternating like the sides */
.wk-shot { position: relative; isolation: isolate; width: min(380px, 100%); }
.wk-shot::before { content: ""; position: absolute; z-index: -1; inset: -20px -24px; border: 1.5px solid var(--ink); border-radius: 30px;
  background: var(--wk-tint); rotate: -2.5deg; }
.wk-day:nth-child(even) .wk-shot::before { rotate: 2.5deg; }
.wk-win { overflow: hidden; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg); }
.ws-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #E9EDEF; }
.ws-bar img { width: 30px; height: 30px; border-radius: 50%; background: #FFF1DC; }
.ws-bar b { display: grid; font-size: 15px; line-height: 1.2; }
.ws-bar small { font-size: var(--fs-xs); font-weight: 500; color: #667781; }
.ws-body { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.ws-b { max-width: 84%; align-self: flex-start; padding: 7px 10px 6px; border-radius: 10px; background: #fff; color: #111B21;
  font-size: var(--fs-sm); line-height: 1.4; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.ws-b.me { align-self: flex-end; }
.ws-b i { float: right; margin: 6px 0 -4px 10px; font-style: normal; font-size: var(--fs-xs); color: #54656F; }
/* whatsapp: beige doodle paper, green for what you sent */
.wa .ws-body { background: #EFEAE2 radial-gradient(rgba(120, 100, 70, 0.1) 1px, transparent 1.5px) 0 0 / 14px 14px; padding-bottom: 56px; }
.wa .ws-b.me { background: #D9FDD3; }
/* telegram: its green wallpaper, rounder bubbles */
.tg .ws-bar small { color: #1F6BC0; }
.tg .ws-body { background: linear-gradient(160deg, #DCE8C5 0%, #C6DCA9 55%, #ADCD94 100%); padding-bottom: 60px; }
.tg .ws-b { border-radius: 16px 16px 16px 5px; }
.tg .ws-b.me { background: #EEFFDE; border-radius: 16px 16px 5px 16px; }
.tg .ws-b.me i { color: #2F7D32; }
/* the lock screen: a sunrise wallpaper, the big clock, two notifications */
.lock .wk-win { display: grid; gap: 8px; align-content: start; min-height: 330px; padding: 22px 14px 18px; border-radius: 28px; color: #fff;
  background: linear-gradient(170deg, #2C3A66 0%, #6B5B95 40%, #E0846E 78%, #F6C27A 100%); }
.ls-time { display: grid; justify-items: center; margin-bottom: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15); }
.ls-time small { font-size: 15px; font-weight: 600; opacity: 0.9; }
.ls-time b { font-size: 76px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ls-n { display: flex; gap: 10px; padding: 10px 12px; border-radius: 18px; color: #111; background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ls-n + .ls-n { opacity: 0.85; }
.ls-n img { width: 34px; height: 34px; flex: none; border-radius: 9px; background: #FFF1DC; }
.ls-n div { min-width: 0; font-size: var(--fs-sm); line-height: 1.35; }
.ls-n b { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); }
.ls-n b small { font-size: var(--fs-xs); font-weight: 500; color: #5E5E63; }
/* slack: the aubergine rail, square avatars, link previews */
.sl .wk-win { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.sl-side { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; background: #3F0E40; }
.sl-side i { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.18); }
.sl-side i:first-child { background: var(--ember); }
.sl-top { padding: 11px 14px; border-bottom: 1px solid #E8E8E8; font-size: 15px; font-weight: 800; color: #1D1C1D; }
.sl-msg { display: flex; gap: 10px; padding: 10px 14px 4px; }
.sl-msg:last-child { padding-bottom: 14px; }
.sl-ava { width: 34px; height: 34px; flex: none; border-radius: 8px; background: #FFF1DC; }
.sl-ava.you { display: grid; place-items: center; background: #187A52; color: #fff; font-weight: 800; }
.sl-msg > div { min-width: 0; }
.sl-msg b { font-size: var(--fs-sm); font-weight: 800; color: #1D1C1D; }
.sl-msg b em { padding: 0 4px; border-radius: 3px; background: #E8E8E8; font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: #616061; }
.sl-msg b small { font-size: var(--fs-xs); font-weight: 400; color: #616061; }
.sl-msg p { font-size: var(--fs-sm); line-height: 1.45; color: #1D1C1D; }
.sl-links { display: grid; gap: 4px; margin-top: 6px; }
.sl-links span { display: flex; align-items: center; gap: 6px; padding: 2px 10px; border-left: 4px solid #DDDDDD; font-size: var(--fs-sm); font-weight: 700; color: #1264A3; }
.sl-links .ic { width: 13px; height: 13px; }
/* the web: browser chrome and rin's own chat */
.wb-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #F1EFEA; border-bottom: 1.5px solid var(--ink); }
.wb-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.wb-bar > i:nth-child(2) { background: #FEBC2E; } .wb-bar > i:nth-child(3) { background: #28C840; }
.wb-bar span { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 12px; border-radius: 8px 8px 0 0;
  background: #fff; font-size: var(--fs-xs); font-weight: 700; }
.web .ws-body { background: var(--card); }
.web .ws-b { border: 1px solid var(--line-2); border-bottom-left-radius: 4px; box-shadow: none; background: var(--paper); }
.web .ws-b.me { border: 0; border-radius: 10px 10px 4px 10px; background: var(--ink); color: var(--paper); }
.wb-done { display: grid; grid-template-columns: minmax(0, 1fr); border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; padding: 2px 12px; }
.wb-done > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1.5px dashed var(--line-2); }
.wb-done > div:last-child { border-bottom: 0; }
.wb-done .ic { width: 16px; height: 16px; color: var(--dim); }
.wb-done b { flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-done em { flex: none; padding: 1px 8px; border: 1.5px solid #2C7A3F; border-radius: var(--r-pill); font-style: normal;
  font-size: var(--fs-xs); font-weight: 700; color: #2C7A3F; }

/* the sticker: what rin kept, slapped on the window's corner */
.wk-stk { position: absolute; z-index: 3; display: grid; gap: 4px; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: var(--r-md);
  background: #fff; box-shadow: var(--shadow-md); font-size: var(--fs-sm); font-weight: 700; }
.wk-stk small { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-text); }
.wk-stk.mem { right: -34px; bottom: -40px; rotate: 4deg; }
.wk-stk.goal { left: -38px; bottom: -36px; display: flex; align-items: center; gap: 10px; rotate: -4deg; line-height: 1.25; }
.wk-stk .ring-wrap.sm { width: 58px; height: 58px; margin: 0; }
.wk-stk .ring-wrap b { font-size: 1.2rem; }

/* each day plays as it scrolls in: the messages arrive in order, then the sticker lands */
.wk-day .ws-b, .wk-day .ls-n, .wk-day .sl-msg, .wk-day .wb-done > div { opacity: 0; translate: 0 10px; transition: opacity 0.4s ease, translate 0.5s var(--spring); }
.wk-day .wk-stk { opacity: 0; scale: 0.8; transition: opacity 0.3s ease 1.5s, scale 0.45s var(--spring) 1.5s; }
.wk-day.visible :is(.ws-b, .ls-n, .sl-msg, .wb-done > div) { opacity: 1; translate: none; }
.wk-day.visible .wk-stk { opacity: 1; scale: 1; }
.wk-day.visible :is(.ws-b, .ls-n, .sl-msg):nth-child(1) { transition-delay: 0.35s; }
.wk-day.visible :is(.ws-b, .ls-n, .sl-msg):nth-child(2), .wk-day.visible .wb-done > div:nth-child(1) { transition-delay: 0.85s; }
.wk-day.visible :is(.ws-b, .ls-n, .sl-msg):nth-child(3), .wk-day.visible .wb-done > div:nth-child(2) { transition-delay: 1.3s; }
.wk-day.visible .wb-done > div:nth-child(3) { transition-delay: 1.6s; }
.wk-day.visible .ls-n:nth-of-type(1) { transition-delay: 0.35s; }
.wk-day.visible .ls-n:nth-of-type(2) { transition-delay: 0.85s; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wk-line::after { border-left: 2px solid var(--ember); transform-origin: 50% 0;
      animation: wk-fill linear both; animation-timeline: view(); animation-range: cover 20% cover 80%; }
  }
}
@keyframes wk-fill { from { scale: 1 0; } to { scale: 1 1; } }

/* tablet and phone: one column, the spine down the left, each day's pin at its top */
@media (max-width: 860px) {
  .wk-line { gap: var(--sp-8); }
  .wk-line::before, .wk-line::after { left: 14px; }
  .wk-day { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); padding-left: 52px; }
  .wk-pin { left: 14px; top: 0; }
  .wk-day .wk-pin { translate: -50% 0; }
  .wk-day:nth-child(n) .wk-copy, .wk-day:nth-child(n) .wk-shot { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
  .wk-shot { width: min(400px, calc(100% - 12px)); }
  .wk-shot::before { inset: -14px -12px; }
  .wk-stk.mem { right: -12px; bottom: -30px; }
  .wk-stk.goal { left: auto; right: -12px; bottom: -30px; }
}
.ab-preview { padding-top: clamp(2rem, 5vh, 3.5rem); }

/* the hero photo is CC BY: the credit stays visible */
.photo-credit { margin-top: 0.4rem; font-size: 0.72rem; opacity: 0.75; }
.photo-credit a { color: inherit; }

/* landing ability cards feed the live demo */
.ab-preview .ab-card[data-say] { cursor: pointer; }
.ab-preview .ab-card[data-say]:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.ab-preview .ab-card .ab-try { margin-top: 0.7rem; background: none; border: 0; padding: 0; font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm); color: var(--ember-text); cursor: pointer; border-bottom: 1.5px solid var(--ember-text); }
.ab-preview .ab-card:hover .ab-try { color: var(--ink); border-color: var(--ink); }

/* ═══ VOICES (personas) ═══
   One interactive card per voice. --pa is the character's accent, set per card from the API, so
   the grid stays in rin's palette while each card still reads as its own thing. */
.persona-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.persona-card {
  display: grid; justify-items: center; text-align: center; gap: 0.45rem;
  padding: 1.1rem 0.9rem 0.9rem; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 18px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.14s var(--spring), box-shadow 0.14s var(--spring), background 0.14s ease;
}
.persona-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.persona-card:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.persona-card:focus-visible { outline: 3px solid var(--pa, var(--ember)); outline-offset: 3px; }

.persona-face {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: color-mix(in srgb, var(--pa, var(--ember)) 14%, transparent);
  border: 1.5px solid var(--ink);
}
.persona-face img { display: block; width: 72px; height: 72px; }
.persona-name { font-weight: 700; font-size: 1rem; }
.persona-blurb { font-size: 0.82rem; line-height: 1.45; color: var(--dim); }
.persona-pick {
  margin-top: 0.3rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.34rem 0.8rem; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--paper);
}

/* the one that is speaking */
.persona-card.on { background: color-mix(in srgb, var(--pa, var(--ember)) 10%, var(--card)); }
.persona-card.on .persona-pick { background: var(--pa, var(--ember)); color: #fff; }
.persona-card.on .persona-face { background: color-mix(in srgb, var(--pa, var(--ember)) 26%, transparent); }

.persona-note { margin-top: 1.1rem; }

@media (max-width: 520px) {
  .persona-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
  .persona-face { width: 72px; height: 72px; }
  .persona-face img { width: 56px; height: 56px; }
  .persona-blurb { font-size: 0.76rem; }
}

/* ═══ LANDING: who rin sounds like ═══
   Twelve faces and one card: tap a face and the card shows that voice (static/app.js initLandingVoices). Twelve
   full cards were 3,177px on a phone, a third of the page. The card shows one real line that voice would send,
   pulled from its own style block so the sample can never drift from what the model is actually told. */
.chars { max-width: 1120px; margin: 0 auto; padding: clamp(3rem, 8vh, 5rem) 1.4rem clamp(2.5rem, 7vh, 4.5rem); }
.chars-sub {
  max-width: 44rem; margin: 0.7rem auto 0; text-align: center;
  color: var(--dim); line-height: 1.6; text-wrap: pretty;
}
.chars-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 6vw, 4.5rem);
  max-width: 1000px; margin: clamp(2.4rem, 6vh, 3.4rem) auto 0;
}
/* the cast: polaroids of every voice pinned to a dotted lemon board. Each sits a little crooked; the one speaking
   straightens, lifts and takes its character's colour. */
.chars-pick {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4) var(--sp-5); border: 1.5px solid var(--ink); border-radius: 28px; box-shadow: var(--shadow-lg);
  background: var(--tint-lemon) radial-gradient(rgba(23, 21, 15, 0.13) 1px, transparent 1.5px) 0 0 / 16px 16px;
}
.chars-pick::before { content: "pick a voice"; position: absolute; top: -15px; left: 24px; padding: 5px 14px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
  text-transform: uppercase; rotate: -2deg; }
.char-face {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 10px 4px 8px;
  border: 1.5px solid var(--ink); border-radius: var(--r-md); background: #fff; color: var(--ink); box-shadow: var(--shadow-sm);
  cursor: pointer; rotate: -2deg;
  transition: rotate 0.25s var(--spring), translate 0.25s var(--spring), box-shadow 0.2s, background-color 0.2s;
}
.char-face:nth-child(even) { rotate: 2deg; }
.char-face:nth-child(3n) { rotate: -1deg; }
.char-face img {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: color-mix(in srgb, var(--pa, var(--ember)) 22%, #fff);
}
.char-face span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; text-align: center; }
.char-face:hover { rotate: 0deg; translate: 0 -3px; box-shadow: var(--shadow-md); }
.char-face:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.char-face[aria-pressed="true"] { rotate: 0deg; translate: 0 -4px; box-shadow: var(--shadow-md);
  background: color-mix(in srgb, var(--pa, var(--ember)) 26%, #fff); }

/* the reply: a text thread on a card in the speaking character's colour, turned a few degrees */
.char-stage { position: relative; isolation: isolate; }
.char-stage::before { content: ""; position: absolute; z-index: -1; inset: -18px -20px; border: 1.5px solid var(--ink); border-radius: 32px;
  background: color-mix(in srgb, var(--pa, var(--ember)) 34%, #fff); rotate: 3deg; transition: background-color 0.4s ease; }
.char-chat { overflow: hidden; border: 1.5px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: var(--shadow-lg); }
.cc-bar { display: flex; align-items: center; gap: var(--sp-3); padding: 14px 18px; background: #F9F9F9; border-bottom: 1px solid #E5E5EA; }
.cc-bar img { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink);
  background: color-mix(in srgb, var(--pa, var(--ember)) 22%, #fff); }
.cc-bar h3 { margin: 0 0 2px; font-size: var(--fs-lg); font-weight: 700; }
.char-blurb { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--dim); }
.cc-body { display: flex; flex-direction: column; gap: 6px; min-height: 15rem; padding: 14px 16px 20px; }
.cc-stamp { align-self: center; margin-bottom: 4px; font-size: var(--fs-xs); font-weight: 500; color: #6E6E73; }
.cc-b { max-width: 84%; padding: 9px 14px; border-radius: 20px; font-size: var(--fs-base); line-height: 1.4; }
.cc-b.me { align-self: flex-end; border-bottom-right-radius: 6px; background: #1B8CFF; color: #fff; }
.cc-b.them { align-self: flex-start; border-bottom-left-radius: 6px; background: #E9E9EB; color: #111; animation: bubbleIn 0.32s var(--spring) both; }
.cc-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.cc-typing[hidden], .char-say[hidden] { display: none; }
.cc-typing i { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; animation: dotBounce 1s ease-in-out infinite; }
.cc-typing i:nth-child(2) { animation-delay: 0.15s; } .cc-typing i:nth-child(3) { animation-delay: 0.3s; }
.chars-note { text-align: center; margin-top: clamp(2.2rem, 5vh, 3rem); }

@media (max-width: 760px) {
  .chars-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .char-stage::before { inset: -12px -10px; rotate: 2deg; }
  .cc-body { min-height: 13.5rem; }
}
@media (max-width: 480px) {
  .chars-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--sp-6) var(--sp-3) var(--sp-4); }
  .char-face img { width: 48px; height: 48px; }
}

/* ═══ LANDING · design audit, 2026-11-01 ═══
   The ability cards are shared with /help and the dashboard, so everything here is scoped to the homepage. */

/* six preview cards in rows of three (four across left an orphan row of two), two on a tablet, one on a phone */
.ab-preview .ab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ab-preview .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ab-preview .ab-grid { grid-template-columns: 1fr; } }

/* one footer row per card: the demo link on the left, the example on the right. The "on" tag only means something
   in the dashboard; "connect google" still matters here, so it stays, above the row. */
.ab-preview .ab-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: var(--sp-3); }
.ab-preview .ab-card > h3 { grid-column: 1 / -1; grid-row: 1; }
.ab-preview .ab-card > p { grid-column: 1 / -1; grid-row: 2; text-align: center; text-wrap: pretty; }
.ab-preview .ab-card .ab-top { display: contents; }
.ab-preview .ab-card .ab-tag.on { display: none; }
.ab-preview .ab-card .ab-tag.connect { grid-column: 1 / -1; grid-row: 3; justify-self: center; align-self: end; margin-top: var(--sp-3); font-size: var(--fs-xs); }
.ab-preview .ab-card .ab-try { grid-column: 1; grid-row: 4; justify-self: start; align-self: center; margin-top: var(--sp-4); }
.ab-preview .ab-card .ab-ex { grid-column: 2; grid-row: 4; align-self: center; margin: var(--sp-4) 0 0; font-size: var(--fs-xs); }
.ab-preview .ab-card .ab-ex i { font-size: 0.75em; }

/* 44px tap areas without changing how these look: they were 17-27px tall, easy to miss with a thumb */
.nav-links a, .nav .link-btn, .ab-preview .ab-card .ab-try, .ab-ex, .ph-tries .chip,
#demo-send { position: relative; }
.nav-links a::after, .nav .link-btn::after, .ab-preview .ab-card .ab-try::after, .ab-ex::after,
.ph-tries .chip::after, #demo-voice::after, #demo-send::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, var(--tap-min)); height: max(100%, var(--tap-min));
}

/* phones have no hover, so each mango does its move a couple of times as its card scrolls in */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .ab-preview .ab-card.visible .ab-act { animation: var(--act) 4; animation-delay: 0.6s; }
}

/* one type scale: each landing text maps onto a step (it had 61 size/weight combinations, many a fraction of a pixel
   apart). Font sizes only, so hover and colour rules elsewhere are untouched. */
#view-auth .badge-line, #view-auth .stat span, #view-auth .marq-track span, #view-auth .ab-tag,
#view-auth .ph-voice, #view-auth .ph-stamp, #view-auth .ph-name, #view-auth .ph-name small,
#view-auth .mini-label, #view-auth .code-wait { font-size: var(--fs-xs); }
#view-auth .ab-card p, #view-auth .footnote, #view-auth .link-btn.inline,
#view-auth .switch-link, #view-auth .mini-hint, #view-auth .ph-status { font-size: var(--fs-sm); }
#view-auth .nav-links a, #view-auth .nav .link-btn, #view-auth .nav .btn-glow, #view-auth .btn-glow.lg, #view-auth .btn-glow.wide,
#view-auth .t-card, #view-auth .code-to, #view-auth form .link-btn { font-size: var(--fs-base); }
#view-auth .story-lead, #view-auth .ab-card h3 { font-size: var(--fs-lg); }
#view-auth .wordmark, #view-auth .modal-head { font-size: var(--fs-xl); }

/* ═══ QA tickets, 2026-11-01 (dashboard) ═══ */
/* L5: log out in settings > account */
.acct-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-4); }
/* B6: the Telegram card lights up when the home tile sends someone here */
.app-row.flash { animation: rowFlash 2.4s ease; }
@keyframes rowFlash { 0%, 60% { box-shadow: 0 0 0 3px var(--ember), var(--shadow-md); } 100% { box-shadow: var(--shadow-md); } }
#tg-open { display: inline-flex; margin: 0 0 var(--sp-3); }
#tg-open.hidden { display: none; }
/* P15: forgetting a memory works by tap and keyboard, not only on hover */
.mn-del:focus-visible { opacity: 1; outline: 2px solid var(--ember); outline-offset: 2px; }
@media (hover: none) {
  .mn-del, .lore-note .mn-del { opacity: 1; min-width: var(--tap-min); min-height: var(--tap-min); display: inline-grid; place-items: center; }
  .lore-note .mn-del { top: 0.1rem; right: 0.1rem; }
}
/* L4: delete account */
.acct-actions { gap: var(--sp-4); align-items: center; }
.acct-del-open { margin-right: auto; color: var(--ember-text); font-size: var(--fs-sm); }
.acct-del { margin-top: var(--sp-4); padding: var(--sp-4); border: 1.5px dashed var(--ember-text); border-radius: var(--r-md); background: var(--card); }
.acct-del-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.acct-del-row input { flex: 1 1 10rem; min-width: 0; padding: 0.6rem 0.9rem; border: 1.5px solid var(--ink); border-radius: var(--r-pill); font: inherit; letter-spacing: 0.1em; }
.acct-del-go { background: var(--ember-text); border-color: var(--ember-text); }
.acct-del-go:disabled { opacity: 0.4; cursor: not-allowed; }
/* T6: settings shows every voice from the one catalogue; home shows the one speaking now */
.voice-grid.persona-grid.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.voice-grid.persona-grid.compact .persona-face { width: 64px; height: 64px; }
.voice-grid.persona-grid.compact .persona-face img { width: 48px; height: 48px; }
.voice-grid.persona-grid.compact .persona-blurb { font-size: var(--fs-xs); }
#home-voices.persona-grid.compact { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
#home-voices .voices-all { justify-self: start; font-size: var(--fs-sm); font-weight: 700; color: var(--ember-text); }
/* P8: a long reply says so */
.chat-slow { max-width: 760px; width: 100%; margin: 0.2rem auto 0; padding: 0 1.4rem 0 3.6rem; font-size: var(--fs-xs); color: var(--dim); }
.set-sec .g-p a { color: var(--ember-text); text-underline-offset: 3px; }