/* Get-started funnel (S018, /senumi/start/). Built on style.css's tokens, so
   both themes and the Senumi green come from there; nothing here defines a
   colour that the light or dark palette does not already have. One column,
   phone first: the funnel is reached mostly from TikTok and Instagram. */

body.start {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.start-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border);
}
.start-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  color: var(--text);
  border-radius: 10px;
}
.start-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.start-step { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.start-progress { height: 3px; background: var(--border); }
.start-progress span { display: block; height: 3px; background: var(--accent); }

.start-inapp {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  background: var(--deep);
  color: var(--deep-text);
}
.start-inapp[hidden] { display: none; }
.start-inapp p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--deep-muted); }
.start-copy {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 10px;
  border: 1px solid var(--deep-border);
  background: transparent;
  color: var(--deep-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.start-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.start-main h1 {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.start-lede { margin: 0; font-family: var(--serif); font-size: 1.06rem; line-height: 1.5; color: var(--muted); }

.start-footer {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1rem 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
}
.start-cta { width: 100%; min-height: 52px; border-radius: 12px; font-size: 1rem; font-weight: 700; }
.start-cta[aria-disabled="true"], .start-cta:disabled { opacity: 0.55; pointer-events: none; }
.start-link { text-align: center; font-weight: 600; font-size: 0.92rem; padding: 0.6rem 0; }
.start-small { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted); text-align: center; }

.start-hero { display: flex; align-items: center; gap: 1rem; }
/* The mascot (DD229 §6.5): fixed illustration colours, from the brand reference. */
.start-mascot { flex: none; display: block; width: 88px; height: 101px; overflow: visible; }
/* Limbs and shadow sit on the page ground, so they lighten in the dark theme. */
.start-mascot { --m-limb: #173f27; --m-shadow: rgba(0, 0, 0, 0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .start-mascot { --m-limb: #5f9c70; --m-shadow: rgba(255, 255, 255, 0.07); }
}
:root[data-theme="dark"] .start-mascot { --m-limb: #5f9c70; --m-shadow: rgba(255, 255, 255, 0.07); }
.start-mascot--lg { width: 132px; height: 152px; margin: 0 auto; }
.start-mascot .m-shadow { fill: var(--m-shadow); }
.start-mascot .m-bowl { fill: #2f7d45; }
.start-mascot .m-bowl-shade { fill: #26693a; }
.start-mascot .m-rim { fill: #24603a; }
.start-mascot .m-soup { fill: #d9a77c; }
.start-mascot .m-steam { fill: none; stroke: #d8d0bf; stroke-width: 9; stroke-linecap: round; opacity: 0.9; }
.start-mascot .m-eyes { fill: #3b2517; }
.start-mascot .m-cheek { fill: #f28b7d; }
.start-mascot .m-mouth { fill: none; stroke: #3b2517; stroke-width: 4; stroke-linecap: round; }
.start-mascot .m-arm path, .start-mascot .m-leg path { fill: none; stroke: var(--m-limb); stroke-width: 6; stroke-linecap: round; }
.start-mascot .m-arm circle, .start-mascot .m-leg ellipse { fill: var(--m-limb); }
.start-mascot .m-steam, .start-mascot .m-eyes, .start-mascot .m-body, .start-mascot .m-arm { transform-box: fill-box; }
.start-mascot .m-steam { transform-origin: 50% 100%; animation: m-steam 3.2s ease-in-out infinite alternate; }
/* A 120 ms blink every 4 s: 3% of the cycle. */
.start-mascot .m-eyes { transform-origin: 50% 50%; animation: m-blink 4s infinite; }
@keyframes m-steam { from { transform: skewX(-6deg) translateX(-2px); } to { transform: skewX(6deg) translateX(2px); } }
@keyframes m-blink { 0%, 96% { transform: scaleY(1); } 97.5% { transform: scaleY(0.1); } 99%, 100% { transform: scaleY(1); } }
/* Cheer, on Done: two hops with both arms raised (rotated about the shoulder). */
.start-mascot--cheer .m-body { transform-origin: 50% 100%; animation: m-hop 0.7s ease-in-out 0.3s 2; }
.start-mascot--cheer .m-arm--l { transform-origin: 100% 0; animation: m-arm-l 1.4s ease-in-out 0.3s 1; }
.start-mascot--cheer .m-arm--r { transform-origin: 0 0; animation: m-arm-r 1.4s ease-in-out 0.3s 1; }
.start-mascot--cheer .m-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: m-shadow 0.7s ease-in-out 0.3s 2; }
@keyframes m-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-14px); } }
@keyframes m-shadow { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(0.75); } }
@keyframes m-arm-l { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(110deg); } }
@keyframes m-arm-r { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(-110deg); } }
@media (prefers-reduced-motion: reduce) {
  .start-mascot * { animation: none !important; }
}

.start-goals { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.start-goals legend { font-weight: 700; margin-bottom: 0.6rem; padding: 0; }
.start-choice {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 56px;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
}
.start-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.start-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.start-choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.start-choice > span { display: flex; flex-direction: column; gap: 2px; }
.start-choice-title { font-weight: 700; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.start-choice-sub { font-size: 0.85rem; color: var(--muted); }

.start-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.start-compare section { border-radius: 14px; padding: 1rem 0.85rem; }
.start-compare h2 { margin: 0 0 0.85rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.start-compare ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.9rem; line-height: 1.35; }
.start-compare li { display: flex; gap: 0.5rem; align-items: flex-start; }
.start-compare li svg { flex: none; margin-top: 2px; }
.start-compare-others { background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.start-compare-senumi { background: var(--deep); color: var(--deep-text); font-weight: 600; }
.start-compare-senumi h2, .start-compare-senumi svg { color: var(--data-cal); }

.start-example {
  margin: 0;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.start-eyebrow { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.start-days { display: flex; flex-wrap: wrap; gap: 3px; }
.start-days span { width: 9px; height: 9px; border-radius: 2px; background: var(--border); }
.start-days .is-logged { background: var(--data-cal); }
.start-days .is-friday { background: var(--data-carb); }
.start-example figcaption { font-family: var(--serif); font-size: 1rem; line-height: 1.45; }
.start-note { font-size: 0.82rem; color: var(--muted); }

.start-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); }
.start-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.start-tabs button[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
/* Google's light-theme sign-in button (branding guidelines): white, a #747775
   outline, #1F1F1F text, the standard G. Dark mode uses Google's dark theme.
   These colours are Google's, so they are not drawn from the site's tokens. */
.start-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: 12px;
  border: 1px solid #747775;
  background: #ffffff;
  color: #1f1f1f;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.start-google:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%); }
.start-google:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.start-google:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.start-google-g { flex: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .start-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
  :root:not([data-theme="light"]) .start-google:hover { background: #1f1f20; }
}
:root[data-theme="dark"] .start-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
.start-google[hidden], .start-inapp-note[hidden], [data-for][hidden] { display: none; }
.start-inapp-note { margin: 0; font-size: 0.88rem; color: var(--muted); }
.start-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.82rem; }
.start-divider::before, .start-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.start-form { display: flex; flex-direction: column; gap: 0.85rem; }
.start-form label, .start-field { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; }
.start-form input, .start-field select {
  min-height: 48px;
  padding: 0 0.85rem;
  border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
}
.start-form input:focus-visible, .start-field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.start-hint { margin: 0; font-size: 0.82rem; color: var(--muted); }
.start-forgot { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.start-error { margin: 0; padding: 0.7rem 0.85rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); font-size: 0.9rem; }
.start-error[hidden], .start-code[hidden], .start-unavailable[hidden], .start-who[hidden], .start-waiting[hidden] { display: none; }

.start-code { margin: 0; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.9rem; line-height: 1.4; }
.start-unavailable { margin: 0; font-size: 0.92rem; }
.start-plans { display: flex; flex-direction: column; gap: 0.6rem; }
.start-plan { justify-content: space-between; min-height: 68px; }
.start-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.start-plan:has(input:checked) { border-width: 2px; }
.start-price { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.start-price small { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.start-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.start-badge:empty { display: none; }
.start-benefits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); }
.start-benefits li { display: flex; gap: 0.5rem; align-items: flex-start; }
.start-benefits svg { flex: none; margin-top: 2px; color: var(--accent); }

.start-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-top: 1rem; }
.start-who { margin: 0; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--border); background: var(--card); font-size: 0.9rem; }
.start-waiting { margin: 0; font-size: 0.9rem; color: var(--muted); }
.start-stores { justify-content: center; margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .start * { transition: none !important; animation: none !important; }
}
.start-plans[hidden] { display: none; }

/* ── layout: header, panel, wide screens ─────────────────────────────── */
.start-header { padding: 0; }
.start-header-inner {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.start-header-inner .start-step { margin-left: auto; }
.start-wordmark { font-size: 1rem; }
/* On a phone the back arrow stands where the wordmark would. */
.start-wordmark--wide { display: none; }
.start-panel { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }

/* The plan page's two parts. On a phone the intro's children join the
   card's column, so the controls come before the benefits. */
.start-plan-layout { display: flex; flex-direction: column; gap: 1.15rem; }
.start-plan-intro { display: contents; }
.start-plan-intro h1 { order: 0; }
.start-plan-card { order: 1; display: flex; flex-direction: column; gap: 1rem; }
.start-plan-intro .start-benefits { order: 2; }
.start-plan-mascot { display: none; }

@media (min-width: 900px) {
  .start-wordmark--wide { display: inline-flex; }
  .start-back { margin-left: -12px; margin-right: -0.25rem; }
  .start-panel {
    flex: 0 0 auto;
    width: min(32rem, calc(100% - 2.5rem));
    margin: 2.5rem auto 3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .start-panel .start-main { padding: 2rem 2rem 1.5rem; }
  .start-panel .start-footer { padding: 1.25rem 2rem 1.75rem; }
  .start-panel--wide { width: min(64rem, calc(100% - 2.5rem)); }
  .start-panel--wide .start-main { max-width: none; padding: 2.75rem 3rem; }
  .start-main h1 { font-size: 2rem; }
  .start-plan-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: start;
  }
  .start-plan-intro { display: flex; flex-direction: column; gap: 1.5rem; }
  .start-plan-intro h1 { font-size: 2.4rem; }
  .start-plan-intro .start-benefits { font-size: 1rem; gap: 0.75rem; }
  .start-plan-mascot { display: block; order: 3; margin: 0.5rem 0 0; }
  .start-plan-card {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
  }
}

/* ── onboarding questions (the app's F072 steps) ─────────────────────── */
.start-art { display: block; flex: none; border-radius: 16px; object-fit: cover; }
.start-art--hero { width: 150px; height: 150px; border-radius: 28px; margin: 0 auto; }
.start-centered { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.start-centered .start-art--hero[width="96"] { width: 96px; height: 96px; border-radius: 24px; }
.start-welcome { display: flex; flex-direction: column; gap: 1rem; }
.start-art--welcome { width: 100%; height: auto; aspect-ratio: 1; border-radius: 24px; background: #ffffff; }
.start-welcome h1 { font-size: 1.9rem; }

.start-options { display: flex; flex-direction: column; gap: 0.75rem; }
.start-choice--art { min-height: 80px; gap: 0.9rem; border-width: 2px; border-radius: 16px; }
.start-choice--art .start-art { width: 56px; height: 56px; }
.start-choice--art .start-art[width="72"] { width: 72px; height: 72px; border-radius: 18px; }
.start-choice--art > span:not(.start-check) { flex: 1; }
.start-choice--art input, .start-choice--icon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.start-choice:has(input:checked) { border-width: 2px; }
.start-check, .start-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  color: transparent;
}
.start-box { width: 22px; height: 22px; border-radius: 6px; }
.start-choice:has(input:checked) .start-check,
.start-choice:has(input:checked) .start-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.start-choice--icon { min-height: 58px; padding: 0.5rem 0.75rem; gap: 0.75rem; border-width: 2px; border-radius: 14px; }
.start-choice--icon .start-choice-title { flex: 1; font-weight: 600; }
.start-choice.is-disabled { opacity: 0.5; cursor: not-allowed; }
.start-icon-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
}
.start-icon-tile--sm { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }

.start-profile { display: flex; flex-direction: column; gap: 0.9rem; }
.start-profile[hidden] { display: none; }
.start-profile-head { display: flex; align-items: center; gap: 0.85rem; }
.start-profile-head h1 { font-size: 1.4rem; }
.start-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; align-items: end; }
.start-row:has(> [data-units="imperial"]:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.start-field[hidden] { display: none; }
.start-field input { min-height: 48px; padding: 0 0.85rem; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--card); color: var(--text); font: inherit; font-size: 1rem; font-weight: 400; }
.start-field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.start-question {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}
.start-row .start-question { padding: 0; border: 0; background: none; }
.start-question legend { float: left; width: 100%; padding: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.start-question legend + * { clear: both; }
.start-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.start-options--compact { gap: 0.4rem; }
.start-pill { position: relative; display: inline-flex; cursor: pointer; }
.start-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.start-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
}
.start-pill small { font-weight: 500; color: var(--muted); margin-left: 0.15rem; }
.start-pill--wide span { width: 100%; box-sizing: border-box; border-radius: 12px; }
.start-pill--wide { display: flex; }
.start-pill input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.start-pill input:checked + span small { color: inherit; }
.start-pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.start-units { align-self: flex-start; }
.start-type1[hidden] { display: none; }
.start-privacy { margin: 0; display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.start-privacy svg { flex: none; margin-top: 1px; }

.start-story-line { margin: 0; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; line-height: 1.4; }
.start-story-line[hidden] { display: none; }

.start-summary {
  margin: 0;
  padding: 1rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.start-summary:not(:has(li:not([hidden]))) { display: none; }
.start-summary li { display: flex; align-items: center; gap: 0.65rem; }
.start-summary li[hidden] { display: none; }
.start-summary .start-art { width: 32px; height: 32px; border-radius: 9px; }
.start-watch { padding: 1rem; border-radius: 16px; background: var(--deep); color: var(--deep-text); }
.start-watch h2 { margin: 0 0 0.35rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--data-cal); }
.start-watch p { margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.45; }
/* A bare title in an icon choice reads left to right, not as a centred column. */
.start-choice--icon > .start-choice-title { display: block; text-align: left; }
.start-choice--icon > .start-icon-tile, .start-choice > .start-check, .start-choice > .start-box { flex-direction: row; }

/* The plan reveal, as the app draws it. */
.start-art--circle { width: 96px; height: 96px; border-radius: 50%; }
.start-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.start-ticks li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.start-ticks li[hidden] { display: none; }
.start-tick { position: relative; flex: none; width: 20px; height: 20px; color: var(--border-strong); }
.start-tick svg { position: absolute; inset: 0; transition: opacity 0.2s ease; }
.start-tick svg:last-child { opacity: 0; color: var(--accent); }
.start-ticks li.is-ticked .start-tick svg:first-child { opacity: 0; }
.start-ticks li.is-ticked .start-tick svg:last-child { opacity: 1; }
.start-reveal { display: flex; flex-direction: column; gap: 0.75rem; opacity: 0; transition: opacity 0.3s ease; }
.start-reveal.is-shown { opacity: 1; }
.start-note-row { margin: 0; display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.start-note-row svg { flex: none; color: var(--accent); margin-top: 1px; }
.start-callout {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ── account page (part 2) ───────────────────────────────────────────── */
.acct-loading { margin: 0; color: var(--muted); }
[data-view][hidden] { display: none !important; }
.acct, .acct-signin { display: flex; flex-direction: column; gap: 1.1rem; }
.acct-head { display: flex; flex-direction: column; gap: 0.2rem; }
.acct-email { color: var(--muted); font-size: 0.92rem; overflow-wrap: anywhere; }
.acct-plan { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.acct-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.acct-plan-name { font-size: 1.15rem; }
.acct-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.acct-badge.is-cancelled { background: var(--surface); color: var(--muted); }
.acct-badge[hidden], .acct-dates[hidden], .acct-cancelled[hidden], .acct-store[hidden], .acct-none[hidden], .acct-cancel[hidden] { display: none; }
.acct-dates { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.acct-dates dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.acct-dates dd { margin: 0; font-weight: 700; }
.acct-plan p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.acct-cancelled, .acct-store { color: var(--muted); }
.acct-app p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.acct-signout { align-self: flex-start; min-height: 44px; }
.acct-danger { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.acct-danger p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.acct-delete { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #b42318; cursor: pointer; }
.acct-deleted { margin: 0; font-weight: 600; }
.acct-dialog {
  width: min(26rem, calc(100% - 2.5rem));
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-lift);
}
.acct-dialog::backdrop { background: rgb(16 26 19 / 45%); }
.acct-dialog h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.acct-dialog p { margin: 0 0 1.25rem; line-height: 1.5; color: var(--muted); }
.acct-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
.acct-delete-confirm { background: #b42318; color: #ffffff; }
.acct-delete-confirm:hover { background: #912018; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .acct-delete { color: #f97066; }
}
:root[data-theme="dark"] .acct-delete { color: #f97066; }
.acct-plan-row[hidden] { display: none; }
.acct-deleted { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .acct-deleted p { margin: 0; font-weight: 600; }

/* ── creators page (part 3) ──────────────────────────────────────────── */
.cr-offer, .cr-apply, .cr-how, .cr-approved { display: flex; flex-direction: column; gap: 0.9rem; }
.cr-how h2, .cr-apply > h2 { margin: 0; font-size: 1.2rem; }
.cr-apply { padding-top: 1.25rem; border-top: 1px solid var(--border); }
.cr-form textarea {
  min-height: 92px;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  resize: vertical;
}
.cr-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.cr-agree { flex-direction: row !important; align-items: flex-start; gap: 0.6rem !important; font-weight: 500 !important; line-height: 1.45; }
.cr-agree input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.cr-status { margin: 0; padding: 0.9rem 1rem; border-radius: 14px; background: var(--surface); line-height: 1.5; }
.cr-approved h3 { margin: 0; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cr-code { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: 0.04em; }
.cr-link { display: flex; gap: 0.5rem; }
.cr-link input { flex: 1; min-width: 0; min-height: 46px; padding: 0 0.75rem; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 0.85rem; }
.cr-totals { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.cr-totals li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--surface); }