/* Wingward · wingwardphone.com. Direction B ("Calm") with direction C's privacy diagram.
   Tokens and layout from WEBSITE.md in wingward/docs. Mobile first; desktop from 761px. */

@font-face { font-family:"Fraunces"; src:url("/fonts/fraunces.woff2") format("woff2"); font-weight:300 500; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("/fonts/fraunces-italic.woff2") format("woff2"); font-weight:300 500; font-style:italic; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("/fonts/figtree.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root {
  --forest:#1D3830; --oat:#F4F0E8; --card:#FFFDF8; --sage:#E0E8DC; --rule:#DCD5C7;
  --muted:#4F625B; --clay:#A34B27; --clay-on-forest:#E9A27E; --field-line:#7E8B84; --error:#B42318;
  --ink:var(--forest); --accent:var(--clay);
  --serif:"Fraunces", Georgia, serif; --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--oat); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1, h2, h3 { font-family:var(--serif); font-weight:400; margin:0; font-variation-settings:"SOFT" 60, "WONK" 0; }
p { margin:0; }
a { color:inherit; }
ul, ol { margin:0; padding:0; list-style:none; }
figure { margin:0; }
[hidden] { display:none !important; }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nowrap { white-space:nowrap; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.skip { position:absolute; left:16px; top:-60px; z-index:10; background:var(--forest); color:var(--oat); padding:12px 18px; border-radius:99px; text-decoration:none; }
.skip:focus { top:12px; }

.wrap { max-width:1140px; margin:0 auto; padding:0 20px; }
section { padding:64px 0; scroll-margin-top:16px; }

/* nav */
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; }
.logo { display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-weight:500; font-size:24px; }
.logo svg { width:26px; height:26px; }
.links { display:none; }
.links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--muted); font-size:15px; }
.links a:hover { color:var(--ink); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border:0; border-radius:99px; background:var(--forest); color:#F7F3EA; font:500 16px/1.2 var(--sans); text-decoration:none; cursor:pointer; }
.btn:hover { background:#2C4A40; }
.btn-sm { min-height:44px; padding:0 18px; font-size:15px; }
.btn-ghost { display:inline-flex; align-items:center; gap:6px; min-height:48px; font-weight:500; font-size:16px; text-decoration:none; }
.btn-ghost:hover { text-decoration:underline; text-underline-offset:4px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin-top:32px; }

/* section heads */
.kicker, .eyebrow { color:var(--accent); font-size:16px; font-weight:500; }
.sec-head { text-align:center; }
.sec-head h2 { font-size:clamp(34px, 5vw, 56px); line-height:1.08; letter-spacing:-.01em; margin-top:14px; }
.sec-head > p:not(.kicker) { margin:18px auto 0; color:var(--muted); max-width:36em; font-size:18px; }
.sec-head em, .hero h1 em { font-style:italic; color:var(--accent); }

/* hero */
.hero { padding:40px 0 24px; text-align:center; }
.hero-copy { max-width:820px; margin:0 auto; }
.hero h1 { font-size:clamp(40px, 6.4vw, 80px); line-height:1.04; letter-spacing:-.015em; margin-top:18px; font-weight:380; }
.lede { font-size:18px; color:var(--muted); margin:24px auto 0; max-width:34em; }
.hero .cta-row { justify-content:center; }
.fine { font-size:15px; color:var(--muted); margin-top:18px; }
.building { display:inline-block; margin-top:14px; font-size:15px; padding:8px 16px; border-radius:99px; background:var(--sage); }
.hero-visual { margin-top:40px; }
.photo { border-radius:24px; aspect-ratio:4/3;
  /* Placeholder until real photos arrive: warm late-afternoon light. */
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255,226,180,.85), rgba(255,226,180,0) 55%),
    radial-gradient(90% 70% at 10% 100%, rgba(122,143,120,.9), rgba(122,143,120,0) 60%),
    linear-gradient(150deg, #dcc6a6 0%, #c19a76 50%, #8c9c84 100%); }
.photo-hero { display:block; overflow:hidden; }
.photo-hero img { display:block; width:100%; height:100%; object-fit:cover; object-position:30% 50%; }
.hero-visual .phone-wrap { margin-top:-48px; }

/* phone mockup */
.phone-wrap { display:flex; flex-direction:column; align-items:center; gap:18px; }
.phone { container-type:inline-size; width:220px; aspect-ratio:9/19; border-radius:42px; padding:10px; background:var(--forest); box-shadow:0 30px 70px -25px rgba(29,56,48,.55); position:relative; text-align:left; }
.screen { position:relative; height:100%; border-radius:32px; overflow:hidden; background:#FBF8F1; color:var(--forest); }
.cam { position:absolute; top:12px; left:50%; z-index:2; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#000; opacity:.6; }
.sb { display:flex; justify-content:space-between; padding:0 0 14px; font-size:12px; opacity:.8; }
.mode { position:absolute; inset:0; padding:12px 8% 0; transition:opacity .5s ease, transform .5s ease; }
.screen[data-mode="free"] .mode-school, .screen[data-mode="school"] .mode-free { opacity:0; transform:translateY(8px); visibility:hidden; }
.m-pill { display:inline-block; font-size:clamp(9px, 5cqi, 12px); font-weight:600; padding:5px 11px; border-radius:99px; background:var(--sage); }
.m-title { font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-size:clamp(20px, 11cqi, 30px); line-height:1.1; margin-top:16px; }
.apps { display:grid; grid-template-columns:repeat(3,1fr); gap:7cqi 3cqi; margin-top:11cqi; }
.app { display:flex; flex-direction:column; align-items:center; gap:2.5cqi; font-size:clamp(9px, 4.4cqi, 12px); }
.app i { width:21cqi; height:21cqi; border-radius:6.5cqi; display:flex; align-items:center; justify-content:center; background:var(--sage); }
.app svg { width:50%; height:50%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.m-foot { position:absolute; left:8%; right:8%; bottom:26px; font-size:clamp(9px, 4.6cqi, 12px); opacity:.8; }
.mode-school { background:#2C4A40; color:var(--oat); text-align:center; display:flex; flex-direction:column; align-items:center; padding-top:34%; }
.mode-school .lock { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(244,240,232,.14); }
.mode-school .lock svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.mode-school .m-title { margin-top:22px; }
.until { font-size:clamp(11px, 6cqi, 14px); opacity:.85; margin-top:8px; }
.sos { margin-top:auto; margin-bottom:36px; font-size:clamp(10px, 5.4cqi, 13px); padding:10px 18px; border-radius:99px; border:1px solid currentColor; }
.toggle { display:inline-flex; padding:4px; gap:4px; border-radius:99px; background:var(--card); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.toggle button { white-space:nowrap; font:inherit; font-size:15px; border:0; background:none; color:var(--muted); padding:0 16px; min-height:44px; border-radius:99px; cursor:pointer; }
.toggle button[aria-pressed="true"] { background:var(--forest); color:var(--oat); }

/* the problem */
.trio { display:grid; gap:16px; margin-top:40px; }
.trio > div, .promises > div { background:var(--card); border-radius:24px; padding:28px; }
.trio h3, .promises h3 { font-weight:450; font-size:22px; margin-bottom:8px; }
.trio p, .promises p { color:var(--muted); font-size:17px; }

/* how it works */
.steps { display:grid; gap:16px; margin-top:40px; }
.step { background:var(--card); border-radius:28px; padding:32px; }
.num { width:48px; height:48px; border-radius:50%; background:var(--sage); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-size:22px; }
.step h3 { font-size:26px; margin:16px 0 10px; }
.step p { color:var(--muted); font-size:17px; }

/* levels */
.levels-sec { background:var(--sage); }
.levels { display:grid; gap:16px; margin-top:40px; }
.level { background:var(--card); border-radius:28px; padding:28px; }
.level h3 { font-size:30px; }
.suits { font-size:15px; color:var(--muted); margin-top:4px; }
.level ul { margin-top:22px; }
.level li { padding:11px 0 11px 30px; position:relative; font-size:17px; border-top:1px solid #ECE6DA; }
.level li::before { content:""; position:absolute; left:2px; top:19px; width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
.level li.no { color:var(--muted); }
.level li.no::before { width:12px; height:0; border-left:0; border-bottom:2px solid var(--muted); transform:none; top:23px; }

/* school time */
.school .split { background:var(--forest); color:var(--oat); border-radius:28px; padding:36px 24px; display:grid; gap:40px; align-items:center; --muted:#BFCCC5; --accent:var(--clay-on-forest); }
.school .sec-head { text-align:left; }
.school .sec-head > p:not(.kicker) { margin-left:0; }
.school .phone { background:#0F231D; }
.school .toggle { background:rgba(244,240,232,.1); box-shadow:none; }
.school .toggle button { color:#BFCCC5; }
.school .toggle button[aria-pressed="true"] { background:var(--oat); color:var(--forest); }
.points { margin-top:28px; display:grid; gap:14px; }
.points li { font-size:17px; padding-left:22px; position:relative; }
.points li::before { content:""; position:absolute; left:0; top:10px; width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* privacy */
.privacy .big { font-size:clamp(38px, 6vw, 76px); line-height:1.05; font-weight:350; max-width:900px; margin-left:auto; margin-right:auto; }
.seal { margin-top:48px; display:grid; grid-template-columns:1fr; align-items:center; }
.node { background:var(--card); border-radius:24px; padding:26px; }
.node.mid { background:transparent; border:1.5px dashed #AEBBAA; }
.node .tag { font-size:14px; font-weight:500; color:var(--accent); }
.node b { display:block; font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-weight:450; font-size:26px; margin:8px 0 6px; }
.node p { font-size:16px; color:var(--muted); }
.packet { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; margin-top:10px; word-break:break-all; }
.wire { width:2px; height:32px; margin:0 auto; background:repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px); background-size:2px 12px; }
.promises { display:grid; gap:16px; margin-top:16px; }
.promises h3 { font-size:24px; }

/* pricing */
.pricing-grid { background:var(--card); border-radius:28px; padding:32px 24px; display:grid; gap:36px; align-items:start; margin-top:24px; }
.price { font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-size:clamp(64px, 9vw, 112px); line-height:1; letter-spacing:-.02em; }
.price small { font-family:var(--sans); font-size:18px; letter-spacing:0; color:var(--muted); margin-left:8px; }
.note { font-size:17px; color:var(--muted); margin-top:22px; }
.incl li { padding:13px 0; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:20px; font-size:17px; }
.incl li span:last-child { color:var(--muted); text-align:right; }

/* faq */
.faq { max-width:820px; margin:40px auto 0; border-bottom:1px solid var(--rule); }
.faq details { border-top:1px solid var(--rule); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:44px; padding:18px 0; font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-size:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--sans); color:var(--muted); font-size:22px; }
.faq details[open] summary::after { content:"–"; }
.faq details p { color:var(--muted); font-size:17px; max-width:40em; padding-bottom:20px; margin-top:-4px; }

/* join the pilot */
.join { text-align:center; }
.join .sec-head > p:not(.kicker) { max-width:32em; }
.pilot { max-width:560px; margin:32px auto 0; text-align:left; }
.pilot label { display:block; font-weight:500; font-size:16px; margin:0 0 8px 18px; }
.pilot .row { display:flex; flex-wrap:wrap; gap:12px; }
.pilot input[type="email"] { flex:1 1 260px; min-height:52px; padding:0 20px; font:inherit; font-size:17px; color:var(--ink); background:var(--card); border:1px solid var(--field-line); border-radius:99px; }
.pilot input[aria-invalid="true"] { border-color:var(--error); }
.pilot .btn { min-height:52px; flex:1 1 auto; }
.pilot .btn[aria-disabled="true"] { opacity:.7; cursor:progress; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.ts { margin-top:12px; display:flex; justify-content:center; }
.ts:empty { margin:0; }
.status { margin-top:12px; text-align:center; font-weight:500; }
.status:empty { margin:0; }
.status.error { color:var(--error); }
.form-note { font-size:15px; color:var(--muted); margin-top:14px; text-align:center; }
.done { margin:32px auto 0; max-width:560px; background:var(--card); border-radius:24px; padding:28px; font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-size:26px; }

/* footer */
footer { padding:40px 0 56px; font-size:15px; color:var(--muted); }
.foot-in { display:flex; justify-content:space-between; align-items:center; gap:12px 20px; flex-wrap:wrap; }
.foot-in nav { display:flex; gap:22px; }
.foot-in a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.foot-in a:hover { color:var(--ink); text-decoration:underline; }

/* plain pages (privacy, thanks) */
.page { max-width:720px; margin:0 auto; padding:40px 20px 80px; }
.page h1 { font-size:clamp(36px, 5vw, 52px); line-height:1.08; margin:14px 0 24px; }
.page h2 { font-size:26px; margin:40px 0 12px; }
.page p, .page li { color:var(--muted); font-size:17px; }
.page p + p { margin-top:14px; }
.page ul { list-style:disc; padding-left:22px; display:grid; gap:8px; margin-top:12px; }
.page a { text-underline-offset:3px; }

/* scroll reveal: only once JS is running, so the page reads fine without it */
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity:1; transform:none; }

@keyframes flow-down { to { background-position:0 12px; } }
@keyframes flow-right { to { background-position:12px 0; } }
.wire { animation:flow-down 1.2s linear infinite; }

@media (min-width: 761px) {
  body { font-size:18px; }
  .wrap { padding:0 40px; }
  section { padding:96px 0; }
  .nav-in { padding:22px 0; }
  .links { display:flex; gap:28px; }
  .lede { font-size:20px; }
  .sec-head > p:not(.kicker) { font-size:19px; }
  .hero { padding:56px 0 40px; }
  .hero-visual { margin-top:56px; }
  .photo-hero { aspect-ratio:16/9; border-radius:32px; }
  .hero-visual .phone-wrap { margin-top:-160px; }
  .trio, .steps, .promises { grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
  .promises { margin-top:20px; }
  .levels { grid-template-columns:1fr 1fr; gap:28px; margin-top:52px; }
  .level { padding:34px; }
  .school .split { grid-template-columns:1.05fr .95fr; gap:72px; padding:64px; border-radius:36px; }
  .seal { margin-top:56px; grid-template-columns:1fr auto 1fr auto 1fr; }
  .node { min-height:168px; }
  .wire { width:56px; height:2px; background:repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); background-size:12px 2px; animation-name:flow-right; }
  .pricing-grid { grid-template-columns:1fr 1fr; gap:56px; padding:56px; border-radius:36px; }
  .pilot .btn { flex:0 0 auto; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .links { gap:18px; }
}
/* Wide screens: the phone overlaps the photo's right edge. */
@media (min-width: 1100px) {
  .hero-visual { position:relative; }
  .photo-hero { aspect-ratio:2/1; }
  .hero-visual .phone-wrap { position:absolute; right:7%; bottom:-70px; margin:0; }
  .hero-visual .phone { width:200px; }
  .problem { padding-top:150px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .js .reveal { opacity:1; transform:none; transition:none; }
  .mode { transition:none; }
  .wire { animation:none; }
}