/* ================================================================
   EPB-GUIDE | THEWING.AI
   iPhone-first, Apple-inspired, light UI.
   Companion to ./index.html; no frameworks or CSS dependencies.
   ================================================================ */
:root {
  color-scheme: light;
  --canvas: #fafbfd;
  --white: #fff;
  --ink: #101b31;
  --muted: #758099;
  --muted-strong: #53617a;
  --line: #e7eaf0;
  --line-strong: #d8dfe9;
  --ice: #f1f5fb;
  --ice-2: #eaf1fa;
  --gold: #c79b48;
  --gold-deep: #ac7a2b;
  --gold-wash: #fff5e3;
  --gold-light: #f4d89e;
  --gold-bg: #f8edda;
  --shadow: 0 8px 30px rgba(26, 46, 83, .045);
  --radius-lg: 27px;
  --radius-md: 19px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", sans-serif;
}
* {box-sizing: border-box;}
html {scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
body {margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(ellipse at 35% 0, #fff 0%, var(--canvas) 58%); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;}
body.sheet-open {overflow: hidden;}
button, textarea, input {font: inherit;}
button {cursor: pointer; -webkit-tap-highlight-color: transparent;}
button:disabled {cursor: not-allowed; opacity:.5;}
a, button, input, textarea {touch-action: manipulation;}
:focus-visible {outline: 3px solid #9cbeec; outline-offset: 3px;}
[hidden] {display: none !important;}
.svg-sprite {position: absolute; width: 0; height: 0; overflow: hidden;}
svg:not(.svg-sprite) {width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;}
.sr-only {position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* Page canvas */
.app-shell {width: min(100%, 790px); margin: 0 auto; padding: 0 clamp(20px, 4.4vw, 42px) 130px;}
.site-header {display:flex; align-items:center; justify-content: space-between; gap:18px; padding: clamp(34px, 5vw, 56px) 0 26px;}
.eyebrow {margin:0 0 6px; color:#9a8360; letter-spacing:.13em; font-size:10px; font-weight:750;}
.site-header h1 {font-size: clamp(35px, 6vw, 51px); line-height: 1.08; letter-spacing:-.055em; font-weight:770; margin:0;}
.site-subtitle {font-size:clamp(14px, 2.6vw, 18px); letter-spacing:-.01em; color:var(--muted); margin:4px 0 0;}
.icon-button {border:0; background: #f0f3f7; color: var(--ink); flex-shrink: 0; display:grid; place-items:center; width:43px; height:43px; border-radius:50%;}
.icon-button:hover {background:#e8edf5;}
.menu-button {font-size:25px; line-height:1; font-weight:700; letter-spacing:2px; padding-bottom:10px;}
.screen {animation: appear .24s ease both;}
@keyframes appear {from {opacity:.15; transform:translateY(7px)} to {opacity:1;transform:translateY(0)}}

/* Welcome: just Amy and the 3 starting choices. No timeline/chat bubbles. */
.welcome-surface {border:1px solid #f0f1f4; background:#fff; border-radius:var(--radius-lg); padding:clamp(18px, 3vw, 27px); box-shadow: var(--shadow);}
.amy-welcome {display:flex; align-items:flex-start; gap:22px; padding-bottom:26px;}
.amy-avatar {object-fit:cover; border-radius:50%; background:#e9ded1; box-shadow:0 0 0 5px #f6f0e7; flex-shrink:0;}
.amy-avatar--large {width:108px; height:108px;}
.amy-avatar--medium {width:86px; height:86px;}
.amy-introduction h2 {font-size:clamp(29px,4.2vw,41px); font-weight:780; letter-spacing:-.045em; line-height:1.13; margin:3px 0 1px;}
.amy-role {color:var(--muted); font-size:16px; margin:0 0 14px;}
.amy-welcome-text {color:var(--muted-strong); font-size:15px; line-height:1.65; max-width:440px; margin:0;}
.choice-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px;}
.choice {min-width:0; display:flex; text-align:left; flex-direction:column; position:relative; gap:15px; min-height:196px; border:1px solid #e9edf3; border-radius:19px; padding:21px 18px; background:linear-gradient(152deg,#fff 55%,#f9fafc); color:var(--ink); box-shadow:0 4px 16px rgba(16,27,49,.035); transition:transform .18s,box-shadow .18s,border-color .18s;}
.choice:hover {transform:translateY(-3px); border-color:#d6bf96; box-shadow:0 10px 30px rgba(16,27,49,.07);}
.choice:active {transform:scale(.99);}
.choice-icon {display:grid; place-items:center; width:50px; height:50px; border-radius:50%;}
.choice-icon svg {width:27px; height:27px;stroke-width:2;}
.choice-icon--gold {background:#fff4df; color:#c7963c;}
.choice-icon--blue {background:#edf4ff;color:#243d61;}
.choice-copy {display:block;}
.choice-copy strong {display:block; font-size:17px;line-height:1.25; letter-spacing:-.025em; font-weight:730;}
.choice-copy > span {display:block; margin-top:10px; color:var(--muted); font-size:13px;line-height:1.45;}
.choice-arrow {display:none; margin-left:auto; color:#748199;}
.gentle-note {text-align:center; color:#8993a6; font-size:13px; margin:22px 10px 0;}

/* Interior header + original bullet */
.screen-nav {display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:8px; padding:26px 0 26px;}
.back-button {border:none;background:none;color:#1c2a40;display:inline-flex;align-items:center;gap:1px;font-size:15px;padding:8px 0;justify-self:start;}
.back-button svg {width:19px;height:19px;}
.screen-nav-title {font-size:15px; font-weight:700; letter-spacing:-.01em; text-align:center;}
.partner-head {display:flex;gap:24px;align-items:center;padding:12px 0 28px;border-bottom:1px solid var(--line);margin-bottom:28px;}
.partner-head h2 {margin:0; font-size:25px;line-height:1.2;letter-spacing:-.04em;}
.partner-head p {font-size:15px;color:var(--muted);margin:2px 0 10px;}
.partner-head em {display:block;border-top:1px solid var(--line);padding-top:8px;font-size:14px;line-height:1.55;color:var(--muted-strong);}
.field-header {display:flex; justify-content:space-between;align-items:center;gap:15px; margin-bottom:9px;color:#33435a;}
.field-header label,.section-eyebrow {font-size:12px;letter-spacing:.09em;font-weight:750;}
.field-header span {font-size:12px;color:#9099aa;letter-spacing:0;}
.draft-textarea {display:block; width:100%; min-height:150px; padding:21px 20px; font-size:17px;line-height:1.65;resize:vertical; color:var(--ink); background:#f7f8fb; border:1px solid #ecedf2; border-radius:22px;outline:none;}
.draft-textarea:focus {border-color:#d4b780;background:#fff;box-shadow:0 0 0 3px #eddcbe66;}
.draft-textarea::placeholder {color:#98a3b3;}
.field-tip {font-size:12.5px;color:#8792a5;margin:9px 2px 20px;}
.editor-actions {display:grid;gap:12px;}
.action-row {display:flex;align-items:center;gap:16px;width:100%;padding:18px 20px;min-height:80px;border:1px solid #eceef3; border-radius:20px;background:#f5f6f9; color:var(--ink);text-align:left;transition:background .16s,border-color .16s;}
.action-row:hover {background:#fff;border-color:#e6c991;}
.row-icon {width:36px;height:38px;display:grid;place-items:center;flex-shrink:0;color:#222d40;}
.action-row > span:nth-child(2){display:grid;gap:3px;min-width:0;}