/* generated by build.js from BRAND/tokens.json + design-overrides.json (PROPOSED) · font: jakarta — do not edit */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/jakarta-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/jakarta-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{--surface:#FBF7F0;--surface-raised:#FFFFFF;--surface-sunken:#F3ECE0;--ink:#1D3C40;--ink-muted:#56626A;--deep:#1E2B32;--on-deep:#FBF7F0;--amber:#E8A33D;--on-amber:#1E2B32;--amber-text:#8F530A;--teal:#2A9D8F;--teal-text:#1B6E68;--path-muted:#C9C1B3;--border:#DDD3C2;--error:#B3261E;--ink-soft:#455259;--mint:#E9F2EF;--way-display:#C47F14;--night:#1E2B32;--night-chip:#2C3B44;--on-night-soft:#C9D1D6;--on-night-muted:#A9B2B8;--teal-on-night:#5CC2B8;--sky-top:#E9F2EF;--sky-bottom:#FBF7F0;--error-on-night:#F2B8B5;--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--display-size:112px;--display-line:106px;--display-weight:800;--display-sm-size:50px;--display-sm-line:49px;--display-sm-weight:800;--title-size:56px;--title-line:58px;--title-weight:800;--heading-size:22px;--heading-line:28px;--heading-weight:700;--body-lg-size:22px;--body-lg-line:34px;--body-lg-weight:400;--body-size:17px;--body-line:28px;--body-weight:400;--small-size:15px;--small-line:22px;--small-weight:400;--label-size:14px;--label-line:20px;--label-weight:700;--space-2:8px;--space-4:16px;--space-6:24px;--space-10:40px;--space-section:160px;--space-section-sm:80px;--container:1200px;--measure:680px;--radius-sm:8px;--radius-md:16px;--radius-pill:999px;--radius-lg:48px;}
/* Whyora site styles — built from WHYORA/DESIGN/home-desktop.dc.html (1440) + home-phone.dc.html (390).
   Colour/type/spacing VARIABLES are generated by build.js (theme.js) and prepended. LIGHT ONLY for now.
   Phone layout below 760px. CSP is style-src 'self': no style="" attributes; SVG colours come from classes. */

/* @font-face rules are generated by theme.js from the font profile (design-overrides.json "font"). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--body-size); line-height: 1.6; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
:lang(hu) p, :lang(hu) li, :lang(hu) dd { hyphens: auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); }
a:hover { color: var(--teal-text); }
:focus-visible { outline: 3px solid var(--amber-text); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 20; background: #FFFFFF; color: var(--ink); padding: 8px 16px; border-radius: 8px; }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }

/* logo: the Y, drawn with the design's own strokes */
.y-you, .y-why, .y-way { fill: none; stroke-width: 4; stroke-linecap: round; }
.y-you { stroke: var(--ink); } .y-why { stroke: var(--teal); } .y-way { stroke: var(--amber); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(30, 43, 50, 0.6); }
.btn-dark, .btn-dark:hover { background: var(--night); color: var(--on-deep); }
.btn-amber, .btn-amber:hover { background: var(--amber); color: var(--ink); font-weight: 700; }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.link-btn { border: 0; background: none; padding: 4px; font: inherit; font-size: 15px; font-weight: 600; color: var(--teal-text); text-decoration: underline; cursor: pointer; }
.short { display: none; }

/* ---------- header: logo left · menu pill truly centred · EN·HU + Join right ---------- */
.site-header { width: min(1280px, calc(100% - 64px)); height: 96px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); justify-self: start; }
.wordmark span { font-size: 24px; font-weight: 800; letter-spacing: -0.035em; }
.wordmark:hover { color: var(--ink); }
.pill-nav { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #FFFFFF; font-size: 15px; font-weight: 500; }
.pill-nav a { text-decoration: none; padding: 10px 18px; border-radius: 999px; }
.pill-nav a:hover { background: var(--surface); }
.header-end { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.lang { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink-muted); }
.lang .on { color: var(--ink); }
.btn-head { height: 48px; padding: 0 24px; font-size: 15px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary path { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.menu-panel { position: absolute; right: 0; top: 54px; z-index: 30; min-width: 220px; padding: 10px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 24px 48px -24px rgba(30, 43, 50, 0.45); display: flex; flex-direction: column; }
.menu-panel a { text-decoration: none; font-weight: 600; padding: 12px 16px; border-radius: 16px; }
.menu-panel a:hover { background: var(--surface); }

/* ---------- home: hero ---------- */
.home-hero { width: min(1280px, calc(100% - 64px)); margin: 72px auto 0; display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.badge-mint { padding: 8px 18px; border-radius: 999px; background: var(--mint); font-size: 14px; font-weight: 600; color: var(--teal-text); }
.home-h1 { font-size: clamp(64px, 7.8vw, 112px); line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; }
.why-word { color: var(--teal-text); }
.way-word { color: var(--way-display); }
.home-lede { font-size: 22px; line-height: 1.55; color: var(--ink-soft); max-width: 560px; }
.try { width: min(620px, 100%); margin-top: 8px; border-radius: 32px; background: #FFFFFF; box-shadow: 0 30px 60px -34px rgba(30, 43, 50, 0.35); padding: 32px; text-align: left; }
.try-ask, .try-done { display: flex; flex-direction: column; gap: 16px; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.try .eyebrow { font-size: 13px; letter-spacing: 0.08em; }
.eyebrow-teal { color: var(--teal-text); }
.eyebrow-amber { color: var(--amber-text); }
.try-q { font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.try textarea { width: 100%; resize: none; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--ink-muted); background: var(--surface); font: inherit; font-size: 17px; line-height: 1.5; color: var(--ink); }
.try textarea::placeholder, .waitlist-form input::placeholder { color: var(--ink-muted); opacity: 1; }
.try-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.try-foot-done { justify-content: flex-start; gap: 18px; }
.try-note { font-size: 13px; color: var(--ink-muted); }
.try-body { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

.hero-image { width: min(1360px, calc(100% - 80px)); margin: 80px auto 0; border-radius: 48px; overflow: hidden; background: #F6E9D6; aspect-ratio: 1360 / 544; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- home: sections ---------- */
.split-why, .goals, .pricing-home { width: min(1200px, calc(100% - 80px)); margin: 160px auto 0; }
.split-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack-tight { --gap: 14px; gap: var(--gap); }
.h2 { font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; }
.body-lg { font-size: 19px; line-height: 1.65; color: var(--ink-soft); }
.body { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.chat { border-radius: 40px; background: #FFFFFF; padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.bubble { max-width: 380px; padding: 18px 22px; }
.bubble-q { align-self: flex-start; border-radius: 24px 24px 24px 8px; background: var(--mint); font-size: 18px; line-height: 1.45; font-weight: 600; }
.bubble-you { align-self: flex-end; border-radius: 24px 24px 8px 24px; background: var(--surface); font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.chat-caption { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }

.goals { display: flex; flex-direction: column; gap: 64px; }
.goals-h { max-width: 720px; }
.goal-steps { list-style: none; margin: 0; padding: 32px 0 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.goal-steps li { display: flex; flex-direction: column; gap: 12px; }
.goal-steps li > div { display: flex; flex-direction: column; gap: 12px; }
.goal-steps h3 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.goal-steps p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.n { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.n-why { color: var(--teal-text); } .n-way { color: var(--amber-text); }

.compass-panel { width: min(1200px, calc(100% - 80px)); margin: 160px auto 0; border-radius: 48px; background: #FFFFFF; padding: 88px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: start; }
.compass-img { width: 100%; height: 320px; object-fit: cover; border-radius: 28px; margin-bottom: 10px; }
.h2-compass { font-size: 52px; line-height: 1.05; }
.example { border-radius: 28px; background: var(--night); color: var(--on-deep); padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.example-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-on-night); }
.example-purpose { font-size: 23px; line-height: 1.35; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chips span { padding: 6px 12px; border-radius: 999px; background: var(--night-chip); font-size: 13px; font-weight: 500; }
.goal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 22px; background: var(--surface); padding: 20px 24px; }
.goal { font-size: 16px; font-weight: 700; }
.tag { font-size: 13px; font-weight: 600; color: var(--amber-text); }

.pricing-home { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.center-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.price-grid { width: min(960px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.price-card { border-radius: 36px; background: #FFFFFF; padding: 44px; display: flex; flex-direction: column; gap: 22px; border-top: 6px solid var(--teal); }
.card-way { border-top-color: var(--amber); }
.card-why .eyebrow { color: var(--teal-text); } .card-way .eyebrow { color: var(--amber-text); }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.price { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.period { font-size: 17px; color: var(--ink-muted); }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.ticks svg { flex-shrink: 0; margin-top: 3px; }
.ticks path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.card-why .ticks path { stroke: var(--teal-text); } .card-way .ticks path { stroke: var(--amber-text); }
.small-note { font-size: 15px; color: var(--ink-muted); text-align: center; margin-top: 24px; }
.pricing-home .small-note { margin-top: 0; }

/* ---------- waitlist band (every page) ---------- */
.band-night { width: min(1360px, calc(100% - 80px)); margin: 160px auto 0; border-radius: 48px; background: var(--night); color: var(--on-deep); padding: 110px 120px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.band-night h2 { font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -0.045em; }
.night-lede { font-size: 19px; line-height: 1.6; color: var(--on-night-soft); max-width: 640px; }
.waitlist-form { margin-top: 14px; width: min(520px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.waitlist-form label { font-size: 14px; font-weight: 600; }
.waitlist-form .row { display: flex; gap: 10px; }
.waitlist-form input[type="email"] { flex-grow: 1; min-width: 0; height: 60px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); }
.waitlist-form input[type="email"]:focus { outline: 3px solid var(--amber); outline-offset: 2px; }
.waitlist-form .btn { height: 60px; padding: 0 30px; }
.consent { font-size: 13px; line-height: 1.5; color: var(--on-night-muted); }
.consent a { color: var(--on-night-muted); }
.consent a:hover { color: var(--on-deep); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.msg { display: none; font-weight: 600; text-align: center; color: var(--on-deep); }
.msg:target, .msg.show { display: block; }
.msg.bad { color: var(--error-on-night); }

/* ---------- footer ---------- */
/* centred and stacked (Shaz 28-09): logo · links · disclaimer · © */
.site-footer { width: min(1280px, calc(100% - 64px)); margin: 90px auto 0; padding-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.footer-top { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.wordmark-sm span { font-size: 19px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; font-size: 14px; font-weight: 500; }
.site-footer nav a { text-decoration: none; color: var(--ink-soft); }
.site-footer nav a:hover { color: var(--teal-text); }
.footer-bottom { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 24px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.footer-bottom p { max-width: 640px; }
.footer-bottom a { color: var(--ink-muted); }

/* ---------- inner pages (content unchanged; new type, colours, header, footer) ---------- */
.hero-soft { width: min(1360px, calc(100% - 80px)); margin: 24px auto 0; border-radius: 48px; background-color: var(--sky-top); background-image: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); padding: 96px 32px 88px; text-align: center; }
.hero-soft .inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.page-h1 { font-size: clamp(48px, 5.5vw, 76px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; }
.page-h1.teal, .h2-page.teal { color: var(--teal-text); }
.page-lede { font-size: 20px; line-height: 1.6; color: var(--ink-soft); max-width: 600px; }
.compass { width: 88px; height: 88px; color: var(--teal); }
.compass-sm { width: 44px; height: 44px; margin: 0 auto 12px; }
.page-section { width: min(1200px, calc(100% - 80px)); margin: 120px auto 0; }
.page-narrow { max-width: 760px; }
.page-wide { display: flex; flex-direction: column; gap: 24px; }
.page-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: start; }
.h2-page { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 24px; }
.h3-page { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; margin: 36px 0 10px; }
.prose .h3-page:first-child, .rule-card .h3-page { margin-top: 0; }
.prose p, .page-narrow > p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 16px; }
.prose a, .page-section a, .hero-soft a:not(.btn) { color: var(--amber-text); }
.page-lede-left { font-size: 19px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 20px; }
.small-note-left { font-size: 15px; color: var(--ink-muted); }
.measure-left { max-width: 680px; display: flex; flex-direction: column; gap: 12px; color: var(--ink-soft); }
.list-lines { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.list-lines li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.list-lines .n { width: 28px; flex-shrink: 0; }
.list-lines p { color: var(--ink-soft); }
.sheet { background: #FFFFFF; border-radius: 36px; padding: 44px 36px; text-align: center; }
.sheet-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--teal-text); margin-bottom: 24px; }
.sheet dl { text-align: left; margin: 0; }
.sheet dt { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-text); }
.sheet dd { margin: 4px 0 22px; font-size: 20px; line-height: 1.45; font-weight: 600; }
.sheet dd:last-child { margin-bottom: 0; }
.white-panel { background: #FFFFFF; border-radius: 40px; padding: 64px; }
.goal-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.goal-steps-5 p { font-size: 17px; }
.badge-line { display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--amber-text); color: var(--amber-text); }
.rule-card { background: var(--mint); border-radius: 32px; padding: 40px; }
.rule-card p { margin: 0; }
.support { list-style: none; margin: 0 0 24px; padding: 0; border-top: 2px solid var(--ink); }
.support li { padding: 20px 0; border-bottom: 1px solid var(--border); color: var(--ink-soft); }
.support .eyebrow { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 4px; }
.support strong { color: var(--ink); }

/* ---------- phone (below 760px) ---------- */
@media (max-width: 759px) {
  .long { display: none; } .short { display: inline; }
  .site-header { width: calc(100% - 32px); height: 72px; display: flex; justify-content: space-between; }
  .wordmark { gap: 8px; } .wordmark svg { width: 26px; height: 26px; } .wordmark span { font-size: 21px; }
  .pill-nav, .lang { display: none; }
  .header-end { gap: 10px; }
  .btn-head { height: 44px; padding: 0 18px; font-size: 14px; }
  .menu { display: block; }

  .home-hero { width: calc(100% - 32px); margin-top: 28px; gap: 20px; }
  .badge-mint { padding: 7px 14px; font-size: 13px; }
  .home-h1 { font-size: 50px; line-height: 0.98; letter-spacing: -0.045em; }
  .home-lede { font-size: 18px; }
  .try { padding: 24px; border-radius: 28px; box-shadow: 0 24px 48px -30px rgba(30, 43, 50, 0.35); }
  .try-ask, .try-done { gap: 14px; }
  .try .eyebrow { font-size: 12px; }
  .try-q { font-size: 22px; }
  .try textarea { padding: 14px 16px; border-radius: 16px; font-size: 16px; }
  .try-foot { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .try-foot .btn { width: 100%; }
  .try-note { font-size: 12px; text-align: center; }
  .try-foot-done { flex-direction: column; gap: 14px; }

  .hero-image { width: calc(100% - 16px); margin-top: 36px; border-radius: 28px; aspect-ratio: auto; height: 220px; }
  .split-why, .goals, .pricing-home, .page-section { width: calc(100% - 32px); margin-top: 80px; }
  .split-why { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .eyebrow { font-size: 13px; }
  .h2, .h2-compass { font-size: 36px; line-height: 1.05; }
  .body-lg { font-size: 17px; }
  .body { font-size: 16px; }
  .chat { border-radius: 28px; padding: 22px; gap: 12px; }
  .bubble { max-width: 270px; padding: 14px 18px; }
  .bubble-q { border-radius: 20px 20px 20px 6px; font-size: 16px; }
  .bubble-you { border-radius: 20px 20px 6px 20px; font-size: 15px; }
  .chat-caption { font-size: 12px; margin-top: 0; }

  .goals { gap: 28px; }
  .goal-steps { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .goal-steps li { flex-direction: row; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
  .goal-steps li:last-child { border-bottom: 0; }
  .goal-steps li > div { gap: 4px; }
  .goal-steps .n { width: 24px; font-size: 14px; align-self: flex-start; }
  .goal-steps .n svg { display: none; }
  .goal-steps h3 { font-size: 18px; }
  .goal-steps p { font-size: 15px; line-height: 1.5; }

  .compass-panel { width: calc(100% - 16px); margin-top: 80px; border-radius: 32px; padding: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .compass-panel .stack { gap: 18px; }
  .compass-panel .stack-tight { --gap: 18px; }
  .compass-img { height: 220px; border-radius: 22px; margin-bottom: 0; }
  .h2-compass { font-size: 34px; line-height: 1.06; }
  .example { border-radius: 22px; padding: 22px; gap: 10px; }
  .example-label { font-size: 11px; }
  .example-purpose { font-size: 19px; }
  .chips { gap: 6px; margin-top: 0; }
  .chips span { padding: 5px 11px; font-size: 12px; font-weight: 400; }
  .goal-row { border-radius: 18px; padding: 16px 18px; }
  .goal { font-size: 15px; }
  .tag { font-size: 12px; }

  .pricing-home { gap: 22px; align-items: stretch; }
  .center-stack { gap: 22px; }
  .center-stack .body-lg { font-size: 16px; line-height: 1.6; }
  .price-grid { grid-template-columns: 1fr; gap: 22px; }
  .price-card { border-radius: 28px; padding: 28px; gap: 16px; }
  .price-card .eyebrow { font-size: 13px; }
  .price-row { gap: 8px; }
  .price { font-size: 48px; }
  .period { font-size: 15px; }
  .ticks { gap: 0; }
  .ticks li { font-size: 15px; line-height: 1.7; gap: 0; }
  .ticks svg { display: none; }
  .small-note { font-size: 14px; line-height: 1.5; }

  .band-night { width: calc(100% - 16px); margin-top: 80px; border-radius: 32px; padding: 48px 24px; gap: 16px; }
  .band-night h2 { font-size: 40px; line-height: 1.02; }
  .night-lede { font-size: 16px; }
  .waitlist-form { margin-top: 8px; gap: 10px; }
  .waitlist-form .row { flex-direction: column; }
  .waitlist-form input[type="email"], .waitlist-form .btn { height: 54px; }
  .waitlist-form input[type="email"] { padding: 0 20px; }
  .consent { font-size: 12px; }

  .site-footer { width: calc(100% - 32px); margin-top: 56px; padding-bottom: 48px; gap: 20px; }
  .footer-top { gap: 20px; }
  .wordmark-sm svg { width: 22px; height: 22px; } .wordmark-sm span { font-size: 18px; }
  .site-footer nav { gap: 12px 24px; }
  .footer-bottom { padding-top: 18px; font-size: 12px; }

  .hero-soft { width: calc(100% - 16px); margin-top: 8px; border-radius: 32px; padding: 56px 20px 48px; }
  .page-h1 { font-size: 44px; }
  .page-lede { font-size: 17px; }
  .page-split { grid-template-columns: 1fr; gap: 48px; }
  .h2-page { font-size: 32px; }
  .white-panel { padding: 32px 24px; border-radius: 28px; }
  .goal-steps-5 { grid-template-columns: 1fr; }
  .sheet { padding: 32px 24px; border-radius: 28px; }
  .rule-card { padding: 28px 24px; border-radius: 24px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .split-why, .compass-panel, .page-split { grid-template-columns: 1fr; }
  .goal-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compass-panel { padding: 56px; }
  .band-night { padding: 80px 48px; }
  .band-night h2 { font-size: 56px; }
  .pill-nav a { padding: 10px 12px; }
}

/* ---------- home: problem · who we are · FAQ (28-09 reorder) ---------- */
.center-stack p, .pricing-home > p { max-width: 720px; }
.placeholder-card { border: 2px dashed var(--ink-muted); border-radius: 28px; background: #FFFFFF; padding: 32px; font-size: 19px; line-height: 1.6; color: var(--ink-soft); }
.more-link { align-self: flex-start; font-size: 16px; font-weight: 700; color: var(--teal-text); }
.more-link-way, .more-link-way:hover { color: var(--amber-text); }  /* Way links amber, Why links teal */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { border-radius: 24px; background: #FFFFFF; padding: 26px 30px; display: flex; flex-direction: column; gap: 8px; }
.faq-item h3 { font-size: 20px; line-height: 1.3; font-weight: 700; }
.faq-item p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.faq-item a { color: var(--teal-text); }
@media (max-width: 759px) {
  .text-section { width: calc(100% - 32px); margin-top: 80px; gap: 18px; }
  .placeholder-card { padding: 24px; border-radius: 22px; font-size: 17px; }
  .faq-item { padding: 20px 22px; border-radius: 20px; }
  .faq-item h3 { font-size: 18px; }
  .faq-item p { font-size: 15px; }
}

/* ---------- holding page (/holding/ on staging; whyora.io after Shaz says go) ---------- */
html.js[data-lang="en"] .l-hu, html.js[data-lang="hu"] .l-en { display: none !important; }
html:not(.js) .l-hu::before { content: " · "; }
html:not(.js) .lang-switch { visibility: hidden; }
.holding-top .wordmark { grid-column: 1; }
.lang-switch { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.lang-switch button { border: 0; background: none; font: inherit; color: var(--ink-muted); padding: 10px 8px; min-width: 44px; min-height: 44px; border-radius: 999px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.holding { width: min(720px, calc(100% - 64px)); margin: 72px auto 0; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.holding .home-h1 { font-size: clamp(50px, 6.4vw, 88px); }
.holding-form { margin-top: 12px; }
.holding-form label { color: var(--ink); }
.holding-form input[type="email"] { background: #FFFFFF; border: 1px solid var(--ink-muted); }
.holding-form .consent, .holding-form .consent a { color: var(--ink-muted); }
.holding-form .consent a:hover { color: var(--teal-text); }
.holding-form .msg, .holding-form .msg.bad { color: var(--ink); }
@media (max-width: 759px) {
  .holding { width: calc(100% - 32px); margin-top: 32px; gap: 22px; }
  .holding .home-h1 { font-size: 50px; }
  .holding-form .row { flex-direction: column; }
  .holding-form input[type="email"], .holding-form .btn { height: 54px; }
}

/* Your Way: a fine line from the purpose card down to each goal (the goals point back to the purpose) */
.goal-linked { position: relative; margin-left: 40px; }
.goal-linked::before { content: ""; position: absolute; left: -24px; top: calc(-1 * var(--gap)); width: 24px; height: calc(50% + var(--gap)); border-left: 1.5px solid var(--amber); border-bottom: 1.5px solid var(--amber); border-bottom-left-radius: 10px; }
.goal-linked:not(:last-child)::after { content: ""; position: absolute; left: -24px; top: 50%; bottom: calc(-1 * var(--gap)); border-left: 1.5px solid var(--amber); }
@media (max-width: 759px) {
  .goal-linked { margin-left: 32px; }
  .goal-linked::before, .goal-linked:not(:last-child)::after { left: -18px; }
  .goal-linked::before { width: 18px; }
}
.holding + .hero-image { margin-top: 72px; }
@media (max-width: 759px) { .holding + .hero-image { margin-top: 40px; } }

/* ---------- home sections: ONE pattern (Shaz 28-09 final pass) ----------
   Every home section opens with a centred heading block (eyebrow + heading + intro, ≤ 720px);
   content below may be columns. No section has its own box: only the waitlist band is dark. */
.home-sec { width: min(1200px, calc(100% - 80px)); margin: 160px auto 0; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.sec-head { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.sec-head-wide { max-width: none; }
.sec-head p, .sec-body p { max-width: 720px; }
.sec-head .more-link, .sec-body .more-link { align-self: center; }
.sec-body { width: 100%; max-width: 720px; margin-top: -24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.placeholder-card { width: min(760px, 100%); text-align: center; }
.faq-list { width: min(760px, 100%); text-align: center; }
.goal-steps { width: 100%; }
.goal-steps li, .goal-steps li > div { align-items: center; text-align: center; }
.why-cols { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.compass-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.compass-figure .compass-img { height: auto; aspect-ratio: 3 / 2; margin: 0; border-radius: 40px; }
.compass-figure figcaption { font-size: 15px; font-weight: 600; color: var(--ink-muted); text-align: center; }
.way-diagram { --gap: 14px; width: min(640px, 100%); display: flex; flex-direction: column; gap: var(--gap); }
.way-diagram .goal-row { background: #FFFFFF; }
@media (max-width: 759px) {
  .home-sec { width: calc(100% - 32px); margin-top: 80px; gap: 28px; }
  .sec-head { gap: 14px; }
  .sec-body { margin-top: -8px; }
  .goal-steps li { flex-direction: column; align-items: center; gap: 8px; }
  .goal-steps .n { width: auto; align-self: center; }
  .why-cols { display: flex; flex-direction: column; gap: 22px; }
  .compass-figure .compass-img { border-radius: 28px; }
  .way-diagram { --gap: 14px; }
}
@media (min-width: 760px) and (max-width: 1099px) { .why-cols { grid-template-columns: 1fr; } }

/* ---------- typography (Shaz 29-09): Plus Jakarta Sans set calmer, in our style ---------- */
.home-h1, .holding .home-h1 { font-size: 76px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.h2, .band-night h2, .h2-page, .page-h1 { letter-spacing: -0.03em; line-height: 1.12; }
.h2 { font-size: 48px; }
.band-night h2 { font-size: 54px; }
.page-h1 { font-size: clamp(44px, 5vw, 60px); }
@media (max-width: 759px) {
  .home-h1, .holding .home-h1 { font-size: 46px; }
  .h2 { font-size: 32px; }
  .band-night h2 { font-size: 34px; }
  .page-h1 { font-size: 38px; }
}

/* ---------- step rows (Shaz 29-09): one shared grid, so across the columns the numbers, the titles
   (2 lines reserved) and the descriptions each start on one line. Phone: plain stack. ---------- */
@media (min-width: 760px) {
  .goal-steps { gap: 12px 32px; }
  .goal-steps li { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 12px; justify-items: center; align-items: start; align-content: start; }
  .goal-steps-5 li { grid-row: span 2; }
  .goal-steps h3 { min-height: calc(2 * 1.3em); }
}
/* ---------- Why + Way pages on the home pattern (Shaz 29-09) ---------- */
.hero-soft { width: 100%; margin: 0; border-radius: 0; }
.h2.teal { color: var(--teal-text); }
#what .why-cols { text-align: left; }
.list-lines { width: 100%; }
.badge-line { align-self: center; }
@media (max-width: 759px) {
  .hero-soft { width: 100%; margin-top: 0; border-radius: 0; }
}

/* ================= WHOLE-SITE PASS (Shaz 29-09) =================
   Exactly three widths, all centred on one axis: TEXT 720 · CONTENT 1040 · WIDE 1200.
   One section gap, one hero-to-first-section gap. */
:root { --w-text: 720px; --w-content: 1040px; --w-wide: 1200px; --gap-section: 120px; --gap-hero: 64px; }
.w-text, .w-content, .w-wide { margin-left: auto; margin-right: auto; }
.w-text { width: min(var(--w-text), calc(100% - 80px)); }
.w-content { width: min(var(--w-content), calc(100% - 80px)); }
.w-wide { width: min(var(--w-wide), calc(100% - 80px)); }
.hero-soft .inner.w-text { width: min(var(--w-text), 100%); max-width: none; }
.site-header, .site-footer { width: min(var(--w-wide), calc(100% - 80px)); }
main > *:not(:first-child) { margin-top: var(--gap-section); }
main > .home-hero + .hero-image, main > .hero-soft + * { margin-top: var(--gap-hero); }
main > .home-hero:first-child { margin-top: 56px; }
.hero-soft { padding: 88px 32px 72px; }
.page-narrow { max-width: none; }
.site-footer { margin-top: var(--gap-section); }
.band-night { padding: 96px 80px; }
.home-hero .try { width: 100%; }

/* inner blocks fill their section: no widths of their own */
.faq-list, .placeholder-card, .price-grid, .way-diagram, .goal-steps, .why-cols, .sec-head-wide { width: 100%; max-width: none; }

/* badges above headings: mint (Why, home) and amber (Way) pills */
.badge-caps { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.badge-amber { padding: 8px 18px; border-radius: 999px; background: #FBEBD3; font-size: 14px; color: var(--amber-text); }

/* headings: the full stop sits tight */
.stop { margin-left: -0.06em; }

/* How it works: 4 equal columns in CONTENT width */
.goal-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; }
.goal-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.goal-steps h3 { font-size: 20px; }

/* Your Why: chat card and compass card equal height, caption inside the card */
.why-cols { align-items: stretch; }
.chat { width: 100%; }
.compass-figure { background: #FFFFFF; border-radius: 40px; overflow: hidden; gap: 0; }
.compass-figure picture { flex: 1; display: block; min-height: 0; }
.compass-figure .compass-img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.compass-figure figcaption { padding: 18px 24px 22px; }
/* Why page: list and Your Compass card equal height */
#what .why-cols { align-items: stretch; }
.sheet { height: 100%; }
.sheet-caption { margin-top: 20px; font-size: 14px; color: var(--ink-muted); text-align: center; }

/* Your Way: card and goal rows share both edges; the amber line runs through the gaps */
.goal-linked { margin-left: 0; }
.goal-linked::before { left: 40px; top: calc(-1 * var(--gap)); width: 0; height: var(--gap); border-left: 2px solid var(--amber); border-bottom: 0; border-radius: 0; }
.goal-linked:not(:last-child)::after { content: none; }

/* pricing: the colour strip is an inner bar, cards equal height */
.price-grid { align-items: stretch; }
.price-card { position: relative; overflow: hidden; border-top: 0; }
.price-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--teal); }
.card-way::before { background: var(--amber); }

/* waitlist: one form column, 520px, label / input / small print left-aligned */
.waitlist-form { width: min(520px, 100%); text-align: left; }
.waitlist-form .consent { text-align: left; }

/* holding: EN · HU exactly like the header's switch */
.lang-switch { gap: 0; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.lang-switch button { min-width: 32px; padding: 10px 4px; font-weight: 600; color: var(--ink-muted); }
.lang-switch button[aria-pressed="true"] { color: var(--ink); text-decoration: none; }

@media (max-width: 759px) {
  :root { --gap-section: 72px; --gap-hero: 40px; }
  .w-text, .w-content { width: calc(100% - 32px); }
  .w-wide { width: calc(100% - 16px); }
  .band-night.w-wide { width: calc(100% - 16px); }
  .site-header, .site-footer { width: calc(100% - 32px); }
  main > .home-hero:first-child { margin-top: 28px; }
  .hero-soft { padding: 48px 20px 40px; }
  .band-night { padding: 48px 24px; }
  .goal-steps, .goal-steps-5 { grid-template-columns: 1fr; }
  .compass-figure { border-radius: 28px; }
  .compass-figure .compass-img { height: 220px; }
  .goal-linked::before { left: 28px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .goal-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Why page "What happens": the 4 rows spread over the card's full height, so the last divider
   sits level with the card's bottom edge (Shaz 29-09: same height = what a visitor sees). Stacked on phone. */
@media (min-width: 760px) {
  #what .list-lines { display: flex; flex-direction: column; justify-content: space-between; }
}