/* ================================================================
   APP OVERLAY
================================================================ */
#app {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.app-close {
  position: fixed; top: 12px; right: 12px; z-index: 301;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(26,26,23,0.09); border: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--fast); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-close:hover { background: rgba(26,26,23,0.14); }
.app-close svg { width: 14px; height: 14px; }
#sw ~ .app-close, .app-close-light { background: rgba(255,255,255,0.12); }
#sw ~ .app-close svg path, .app-close-light svg path { stroke: rgba(255,255,255,0.7); }

/* Screens */
.screen { display: none; flex-direction: column; align-items: center; min-height: 100svh; padding-bottom: 40px; }
.screen.show { display: flex; }

/* App bar */
.app-bar {
  width: 100%; max-width: var(--app-w);
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 8px;
}
.app-logo { font-family: var(--serif); font-size: 20px; color: var(--text-1); }
.app-back {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 8px 0;
  font-family: var(--sans); font-size: var(--t1); color: var(--text-3);
  cursor: pointer; transition: color var(--fast);
  min-height: var(--touch); -webkit-tap-highlight-color: transparent;
}
.app-back:hover { color: var(--text-1); }
.app-back svg { width: 13px; height: 13px; }

/* ================================================================
   WELCOME SCREEN
================================================================ */
#sw { background: var(--dark-1); padding: 0; justify-content: flex-end; }
.w-bg { position: fixed; inset: 0; z-index: 0; background: var(--dark-1); overflow: hidden; pointer-events: none; }
.w-bg-g1 { pointer-events: none; position:absolute; top:-15%; right:-10%; width:60vw; height:60vw; border-radius:50%; background:radial-gradient(circle, rgba(74,124,89,0.26) 0%, transparent 65%); }
.w-bg-g2 { pointer-events: none; position:absolute; bottom:30%; left:-15%; width:40vw; height:40vw; border-radius:50%; background:radial-gradient(circle, rgba(74,124,89,0.12) 0%, transparent 65%); }
.w-top { position:relative; z-index:2; width:100%; max-width:var(--app-w); padding: 60px 20px 24px; }
.w-h   { font-family:var(--serif); font-size:clamp(26px,7vw,40px); color:#fff; line-height:var(--lh-snug); margin-bottom:12px; }
.w-h em { font-style:italic; color:rgba(255,255,255,0.38); }
.w-sub { font-size:var(--t2); color:rgba(255,255,255,0.44); line-height:var(--lh-loose); margin-bottom:28px; }
.w-card {
  position: relative; z-index: 2;
  background: var(--bg); border-radius: 24px 24px 0 0;
  padding: 24px 20px max(env(safe-area-inset-bottom, 0px) + 48px, 48px);
  width: 100%;
}
.w-card h2 { font-family:var(--serif); font-size:var(--t4); margin-bottom:6px; }
.w-card p  { font-size:var(--t1); color:var(--text-3); line-height:var(--lh-loose); margin-bottom:18px; }
.w-trust   { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.w-ti      { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3); }
.w-tick    { width:16px; height:16px; border-radius:50%; background:var(--sage-subtle); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.w-tick svg { width:8px; height:8px; }

/* ================================================================
   QUESTION SCREENS
================================================================ */
.q-wrap { width:100%; max-width:var(--app-w); padding: 8px 20px 32px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.q-card { background:var(--surface); border-radius:var(--r4); padding:24px; box-shadow:var(--sh-md); margin-bottom:16px; }

/* Step dots */
.sdots { display:flex; gap:6px; margin-bottom:20px; align-items:center; }
.sd { width:7px; height:7px; border-radius:var(--r5); background:var(--border); transition:all 0.3s var(--ease); }
.sd.done { background:var(--sage); }
.sd.cur  { background:var(--sage); width:22px; }

.app-q    { font-family:var(--serif); font-size: clamp(20px,5vw,24px); line-height:var(--lh-snug); margin-bottom:6px; }
.app-hint { font-size:var(--t1); color:var(--text-3); line-height:var(--lh-loose); margin-bottom:18px; }

/* Input */
.inp-wrap { position:relative; margin-bottom:18px; }
.inp-pre  { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:var(--t2); font-weight:500; color:var(--text-2); pointer-events:none; z-index:1; user-select:none; }
input[type=number] {
  width:100%; border:1.5px solid var(--border); border-radius:var(--r2);
  padding:14px 16px; padding-left:28px;
  font-family:var(--sans); font-size:clamp(18px,5vw,20px); font-weight:600;
  color:var(--text-1); background:var(--bg); outline:none;
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--fast), box-shadow var(--fast);
  min-height:var(--touch);
}
input[type=number]:focus { border-color:var(--sage); box-shadow:0 0 0 3px rgba(74,124,89,0.10); }

/* Area grid */
.area-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.area-opt {
  border:1.5px solid var(--border); border-radius:var(--r2);
  padding:12px 14px; cursor:pointer; background:var(--bg);
  transition:all var(--fast); min-height:var(--touch);
  -webkit-tap-highlight-color:transparent;
}
.area-opt:hover  { border-color:var(--sage-mid); background:var(--sage-faint); }
.area-opt.picked { border-color:var(--sage); background:var(--sage-subtle); }
.area-name  { font-size:var(--t1); font-weight:700; color:var(--text-1); margin-bottom:2px; }
.area-price { font-size:11px; color:var(--text-2); }

/* ================================================================
   RESULT — STICKY BAR
================================================================ */
.sticky-bar {
  position:sticky; top:0; z-index:10;
  background:rgba(253,250,246,0.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:10px 20px; width:100%;
}
.sticky-inner { max-width:var(--app-w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; }

/* ================================================================
   STAGE HERO (result screen)
================================================================ */
.stage-hero {
  width:100%; max-width:var(--app-w);
  margin: 0 20px 14px;
  border-radius:var(--r4); padding:24px;
  position:relative; overflow:hidden;
}


.stage-hero::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.04); }
.s-exploring { background:#222220; }
.s-building  { background:#251E0F; }
.s-ontrack   { background:#0D2017; }
.s-ready     { background:#081510; }

.sh-ey   { font-size:var(--t0); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.30); margin-bottom:10px; }
.sh-name { font-family:var(--serif); font-size:34px; line-height:1; color:#fff; margin-bottom:8px; position:relative; z-index:1; }
.sh-line { font-size:var(--t1); color:rgba(255,255,255,0.56); line-height:var(--lh-loose); margin-bottom:20px; position:relative; z-index:1; }
.sh-path { display:flex; background:rgba(255,255,255,0.07); border-radius:var(--r1); padding:2px; margin-bottom:8px; }
.ps      { flex:1; text-align:center; padding:8px 4px; border-radius:6px; font-size:11px; font-weight:600; color:rgba(255,255,255,0.22); transition:all 0.2s; }
.ps.done   { color:rgba(255,255,255,0.42); }
.ps.active { background:rgba(255,255,255,0.13); color:#fff; }
.ps-div    { display:flex; align-items:center; font-size:10px; color:rgba(255,255,255,0.14); }
.sh-note   { font-size:11px; color:rgba(255,255,255,0.26); text-align:center; }

/* ================================================================
   RESULT SECTIONS
================================================================ */
.res-col { width:100%; max-width:var(--app-w); padding:0 20px; }
.res-lbl { font-size:var(--t0); font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--sage); margin-bottom:10px; }

/* Action cards — unified system, numbered 1 & 2 identically */
.action-primary,
.action-secondary {
  background:var(--surface); border-radius:var(--r3);
  border:1.5px solid var(--border);
  padding:16px 18px; display:flex; gap:14px; margin-bottom:10px;
  transition:box-shadow var(--fast), transform var(--fast);
}
.action-primary  { border-top:3px solid var(--text-1); }
.action-secondary { border-top:3px solid var(--sage); }
.action-primary:hover,
.action-secondary:hover { box-shadow:var(--sh-sm); transform:translateY(-1px); }
.action-num {
  width:28px; height:28px; border-radius:50%;
  background:var(--text-1); color:#fff;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  margin-top:1px;
}
.action-title  { font-size:var(--t2); font-weight:700; color:var(--text-1); margin-bottom:5px; line-height:var(--lh-snug); }
.action-desc   { font-size:var(--t1); color:var(--text-2); line-height:var(--lh-normal); }
.action-impact {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--sage-faint); border:1px solid var(--sage-subtle);
  color:var(--sage); font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:var(--r5); margin-top:8px;
}

/* Factor cards */
.factor {
  background:var(--surface); border-radius:var(--r3);
  border:1.5px solid var(--border); padding:14px 16px;
  margin-bottom:8px; display:flex; align-items:flex-start; gap:14px;
  transition:box-shadow var(--fast), transform var(--fast);
}
.factor:last-child { margin-bottom:0; }
.factor:hover { box-shadow:var(--sh-sm); transform:translateY(-1px); }
.factor-name { font-size:var(--t2); font-weight:600; color:var(--text-1); margin-bottom:3px; }
.factor-desc { font-size:var(--t1); color:var(--text-2); line-height:var(--lh-normal); }

/* Affordability card */
.aff-card {
  background:var(--sage); border-radius:var(--r4); padding:22px 24px;
  width:100%; max-width:var(--app-w); align-self:center;
  margin:0 0 14px; position:relative; overflow:hidden;
  box-shadow:var(--sh-sage);
}
.aff-card::before { content:''; position:absolute; top:-50px; right:-50px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,0.07); }
.aff-ey  { font-size:var(--t0); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.42); margin-bottom:6px; }
.aff-fig { font-family:var(--serif); font-size:42px; line-height:1; color:#fff; margin-bottom:4px; position:relative; z-index:1; }
.aff-sub { font-size:var(--t1); color:rgba(255,255,255,0.52); margin-bottom:14px; }
.aff-hr  { border:none; border-top:1px solid rgba(255,255,255,0.14); margin-bottom:12px; }
.aff-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; z-index:1; }
.aff-sl  { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.36); margin-bottom:2px; }
.aff-sv  { font-family:var(--serif); font-size:var(--t4); color:#fff; margin-bottom:2px; }
.aff-sn  { font-size:11px; color:rgba(255,255,255,0.42); line-height:1.4; }

/* Scheme cards */
#schemes-out { width:100%; }
.sc {
  background:var(--surface); border-radius:var(--r3);
  border:1.5px solid var(--border); margin-bottom:8px;
  overflow:hidden; transition:border-color var(--fast), box-shadow var(--fast);
  width:100%; max-width:var(--app-w); align-self:center;
}
.sc:hover { border-color:var(--sage-mid); box-shadow:var(--sh-sm); }
.sc.open  { border-color:var(--sage); }
/* Row layout — left text block + right chevron */
.sch {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; cursor:pointer; gap:14px;
  min-height:var(--touch);
  -webkit-tap-highlight-color:transparent;
}
/* All text left-aligned inside the flex child */
.sch-body { flex:1; min-width:0; text-align:left; }
.sbadge {
  display:inline-block; background:var(--sage-subtle); color:var(--sage);
  font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:var(--r5); margin-bottom:5px;
}
.stitle { font-size:var(--t2); font-weight:700; color:var(--text-1); margin-bottom:2px; line-height:var(--lh-snug); }
.ssum   { font-size:var(--t1); color:var(--text-2); line-height:var(--lh-snug); }
/* Chevron toggle button — right side only */
.stog {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--paper); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--mid) var(--ease);
}
.stog svg { width:12px; height:12px; transition:transform var(--mid) var(--ease); stroke:var(--text-2); }
.sc.open .stog { background:var(--sage); border-color:var(--sage); }
.sc.open .stog svg { transform:rotate(45deg); stroke:#fff; }
/* Expanded body */
.sbody { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease); }
.sc.open .sbody { max-height:500px; }
.sinner { padding:14px 16px 18px; border-top:1px solid var(--border); background:var(--paper); }
.swhy   { font-size:var(--t1); font-weight:400; color:var(--text-2); margin-bottom:8px; line-height:var(--lh-normal); font-style:italic; }
.sexpl  { font-size:var(--t1); color:var(--text-2); line-height:var(--lh-loose); margin-top:8px; }


/* ================================================================
   SITUATION SELECTOR (Q0)
================================================================ */
.sit-grid { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.sit-opt {
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r3);
  padding:14px 16px; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:14px;
  transition:all var(--fast); min-height:var(--touch);
  -webkit-tap-highlight-color:transparent;
}
.sit-opt:hover { border-color:var(--sage-mid); background:var(--sage-faint); }
.sit-opt.picked { border-color:var(--sage); background:var(--sage-subtle); }
.sit-icon {
  width:38px; height:38px; border-radius:var(--r2); flex-shrink:0;
  background:var(--paper); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--fast);
}
.sit-opt.picked .sit-icon { background:var(--sage-subtle); border-color:rgba(74,124,89,0.3); }
.sit-icon svg { width:18px; height:18px; }
.sit-label { font-size:var(--t2); font-weight:600; color:var(--text-1); line-height:var(--lh-snug); }
.sit-sub   { font-size:var(--t1); color:var(--text-2); margin-top:1px; }

/* Expandable sub-fields that slide in (e.g. partner income, gift amount, custom price) */
.sub-field {
  display:none; padding-top:14px; border-top:1px solid var(--border); margin-top:14px;
}
.sub-field.show { display:block; }
.sub-lbl { font-size:var(--t1); font-weight:600; color:var(--text-1); margin-bottom:8px; }
.sub-hint { font-size:var(--t1); color:var(--text-3); margin-bottom:10px; line-height:var(--lh-normal); }

/* Optional price input on area screen */
.custom-price-toggle {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:var(--r2); background:var(--paper);
  border:1.5px solid var(--border); cursor:pointer; margin-bottom:12px;
  transition:border-color var(--fast);
  -webkit-tap-highlight-color:transparent;
}
.custom-price-toggle:hover { border-color:var(--sage-mid); }
.custom-price-toggle.active { border-color:var(--sage); background:var(--sage-faint); }
.cpt-check {
  width:20px; height:20px; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all var(--fast);
}
.custom-price-toggle.active .cpt-check { background:var(--sage); border-color:var(--sage); }
.cpt-label { font-size:var(--t1); font-weight:600; color:var(--text-2); flex:1; }
.custom-price-toggle.active .cpt-label { color:var(--text-1); }
.custom-price-input { display:none; }
.custom-price-input.show { display:block; }

/* ================================================================
   JOURNEY MAP
================================================================ */
.journey-h   { font-family:var(--serif); font-size:clamp(22px,5vw,28px); line-height:var(--lh-snug); margin:8px 0 5px; width:100%; max-width:var(--app-w); padding:0 20px; }
.journey-sub { font-size:var(--t1); color:var(--text-3); margin-bottom:24px; width:100%; max-width:var(--app-w); padding:0 20px; line-height:var(--lh-loose); }
.mlist       { width:100%; max-width:var(--app-w); padding:0 20px; }
.mi          { display:flex; gap:14px; position:relative; padding-bottom:20px; }
.mi:last-child { padding-bottom:0; }
.mi:not(:last-child)::after { content:''; position:absolute; left:11px; top:24px; bottom:0; width:2px; background:var(--border); }
.mi.done::after { background:rgba(74,124,89,0.3); }
.mn {
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border); background:var(--surface);
  flex-shrink:0; margin-top:1px; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.mi.done .mn { background:var(--sage); border-color:var(--sage); }
.mi.done .mn svg { display:block; }
.mn svg { display:none; width:11px; height:11px; }
.mi.next .mn { border-color:var(--text-1); border-width:2.5px; }
.mi.upcoming .mn { opacity:0.3; }
.mnext-tag { display:inline-flex; align-items:center; gap:5px; background:var(--sage); color:#fff; font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; padding:3px 10px; border-radius:var(--r5); margin-bottom:6px; box-shadow: 0 2px 8px rgba(74,124,89,0.30); }
.mlabel { font-size:var(--t2); font-weight:700; color:var(--text-1); line-height:var(--lh-snug); margin-bottom:2px; }
.mi.upcoming .mlabel { color:var(--text-3); font-weight:400; }
.mdesc  { font-size:var(--t1); color:var(--text-2); line-height:var(--lh-normal); }

/* Email block */
.eblock {
  background: var(--sage-faint); border: 1px solid var(--sage-subtle);
  border-radius: var(--r4); padding: 22px 20px;
  width: 100%; max-width: var(--app-w); align-self: center;
  margin: 24px 0 0;
}
.eblock-ey  { font-size:var(--t0); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-bottom:5px; }
.eblock-h   { font-family:var(--serif); font-size:var(--t4); margin-bottom:4px; }
.eblock-sub { font-size:var(--t1); color:var(--text-2); line-height:var(--lh-loose); margin-bottom:16px; }
.email-row  { display:flex; gap:8px; }
input[type=email] {
  flex:1; font-family:var(--sans); font-size:var(--t2); font-weight:500;
  border:1.5px solid var(--border); border-radius:var(--r2);
  padding:0 14px; min-height:var(--touch);
  background:var(--surface); color:var(--text-1); outline:none;
  transition:border-color var(--fast), box-shadow var(--fast);
}
input[type=email]:focus { border-color:var(--sage); box-shadow:0 0 0 3px rgba(74,124,89,0.10); }
.email-btn {
  background:var(--sage); color:#fff;
  border:none; border-radius:var(--r2);
  padding:0 18px; min-height:var(--touch);
  font-family:var(--sans); font-size:var(--t1); font-weight:700;
  cursor:pointer; white-space:nowrap; transition:background var(--fast);
  -webkit-tap-highlight-color:transparent;
}
.email-btn:hover { background:var(--sage-hover); }
#enote { font-size:11px; color:var(--text-3); margin-top:7px; line-height:var(--lh-normal); }

/* Success state */
.succ { text-align:center; padding:16px 0; }
.succ-icon { width:48px; height:48px; border-radius:50%; background:var(--sage); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; }
.succ-icon svg { width:22px; height:22px; }
.succ-title { font-family:var(--serif); font-size:var(--t4); margin-bottom:5px; }
.succ-body  { font-size:var(--t1); color:var(--text-2); line-height:var(--lh-loose); max-width:260px; margin:0 auto; }

/* Phase 2 block */
.p2-block { background:var(--text-1); border-radius:var(--r4); padding:22px; width:100%; max-width:var(--app-w); align-self:center; margin-top:12px; }
.p2-ey  { font-size:var(--t0); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.30); margin-bottom:5px; }
.p2-h   { font-family:var(--serif); font-size:var(--t4); color:#fff; margin-bottom:4px; }
.p2-sub { font-size:var(--t1); color:rgba(255,255,255,0.42); line-height:var(--lh-loose); margin-bottom:16px; }
.p2-feats { display:flex; flex-direction:column; gap:12px; }
.p2-feat  { display:flex; align-items:flex-start; gap:10px; }
.p2-fi    { width:26px; height:26px; border-radius:var(--r1); background:rgba(74,124,89,0.20); border:1px solid rgba(74,124,89,0.32); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.p2-fi svg { width:13px; height:13px; }
.p2-ft  { font-size:var(--t1); color:rgba(255,255,255,0.44); line-height:var(--lh-normal); }
.p2-ft strong { color:rgba(255,255,255,0.75); font-weight:600; }

/* ================================================================
   LEARN HUB
================================================================ */
.art-link {
  background:var(--surface); border-radius:var(--r3); border:1.5px solid var(--border);
  padding:14px 16px; width:100%; max-width:var(--app-w); align-self:center;
  margin-bottom:8px; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  transition:border-color var(--fast), transform var(--mid) var(--ease);
  -webkit-tap-highlight-color:transparent;
  min-height:var(--touch);
}
.art-link:hover { border-color:var(--sage-mid); transform:translateY(-1px); }
.art-ib  { width:40px; height:40px; border-radius:var(--r2); background:var(--sage-subtle); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.art-ib svg { width:20px; height:20px; }
.art-title { font-size:var(--t2); font-weight:700; color:var(--text-1); margin-bottom:2px; }
.art-desc  { font-size:var(--t1); color:var(--text-2); line-height:var(--lh-snug); }
.art-chev  { margin-left:auto; flex-shrink:0; opacity:0.35; }
.art-chev svg { width:15px; height:15px; }

/* Article content */
.art-content { width:100%; max-width:var(--app-w); padding:0 20px; }
.art-h    { font-family:var(--serif); font-size:clamp(22px,5vw,28px); line-height:var(--lh-snug); margin:8px 0 18px; }
.art-p    { font-size:var(--t3); color:var(--text-1); line-height:var(--lh-loose); margin-bottom:14px; }
.art-call { background:var(--sage-faint); border-left:3px solid var(--sage); border-radius:0 var(--r2) var(--r2) 0; padding:12px 16px; margin-bottom:14px; }
.art-call p { font-size:var(--t2); color:var(--text-1); line-height:var(--lh-loose); }

/* Tooltip */
.term { border-bottom:1.5px dashed var(--sage); color:var(--sage); cursor:help; }
#tip  {
  position:fixed; z-index:9999; background:var(--text-1); color:#fff;
  font-size:var(--t1); line-height:var(--lh-normal); padding:10px 14px;
  border-radius:var(--r2); max-width:240px; pointer-events:none;
  opacity:0; transition:opacity var(--fast); box-shadow:var(--sh-lg);
}

@media (min-width: 768px) {
  /* Welcome screen — centered card on desktop instead of bottom sheet */
  #sw {
    justify-content: center !important;
    align-items: center !important;
    padding: 40px 20px;
  }
  .w-top {
    text-align: center;
    max-width: 560px;
    padding: 0 0 24px;
  }
  .w-card {
    border-radius: var(--r4) !important;
    max-width: 480px;
    width: 100%;
    padding: 28px 32px 32px !important;
    box-shadow: var(--sh-lg);
  }
  .w-h { font-size: 28px; }
}.sc.open .stog { color:var(--sage); }
.sc.open .stog-icon { background:var(--sage); border-color:var(--sage); color:#fff; transform:rotate(45deg); }