/* Plan To Win: shared styles for the inner pages (coaching, blog).
   Same tokens, Glass treatment, 3D stage and motion language as index.html. */
:root {
  --bg: #0E0C0A; --bg2: #141210; --bg3: #1C1916; --bg4: #232019;
  --line: rgba(255,255,255,0.07); --line2: rgba(255,255,255,0.11);
  --text: #F2EDE6; --body: #B9AEA2; --muted: #9C9187; --faint: #5E554C; --cement: #C4B8A8;
  --blue: #5BA4DC; --blue-hi: #8CC3F0;
  --fitness: #E07840; --diet: #C9A832; --finances: #5A9460; --relations: #C46882; --personal: #5BA4DC; --work: #8A70C0;
  --glass: rgba(255,255,255,0.045); --glass-hi: rgba(255,255,255,0.07);
  --glass-blur: blur(18px) saturate(160%);
  --r: 20px;
  --sh-glass: 0 8px 30px -14px rgba(0,0,0,.5);
  --sh-deep: 0 1px 1px rgba(0,0,0,.25), 0 6px 14px -4px rgba(0,0,0,.35), 0 28px 60px -18px rgba(0,0,0,.65), 0 70px 120px -40px rgba(0,0,0,.7);
  --ease: cubic-bezier(.16,1,.3,1);
  --wrap: 1160px; --gutter: 48px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
/* Also clip on <main>: on phones the body clip is propagated to the viewport, which does not stop the layout
   viewport growing to fit overflow. Cards waiting to reveal are tipped back in 3D and project ~20px past each side,
   which widened /coaching to 415px at 375 (fixed nav cut off, page pannable sideways) until they had all played.
   clip (not hidden) keeps position: sticky working inside. */
@supports (overflow: clip) { body, main { overflow-x: clip; } }
img { display: block; max-width: 100%; }
::selection { background: rgba(91,164,220,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2E2A24; border-radius: 3px; }
body::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--blue); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { left: 12px; }

/* ── TYPE ── */
.display { font-family: 'Syne', sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.h2 { font-size: clamp(34px, 5vw, 60px); margin: 18px 0 20px; }
.h2.tight { font-size: clamp(30px, 3.8vw, 50px); }
.lede { font-size: clamp(16px, 1.6vw, 18px); color: var(--body); line-height: 1.7; max-width: 580px; text-wrap: pretty; }
.grad-text { background: linear-gradient(180deg, #FFFCF7 10%, #CFC4B6 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accent-text { background: linear-gradient(100deg, var(--blue-hi), var(--blue) 60%, #3F86C2); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── BUTTONS ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 15px/1 'Inter', sans-serif; letter-spacing: .01em; padding: 17px 28px; border-radius: 14px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, border-color .25s; }
.btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { color: #0B0A09; background: linear-gradient(180deg, #74B5E6 0%, #5BA4DC 55%, #4E95CC 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(91,164,220,.65); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.3), 0 18px 44px -12px rgba(91,164,220,.8); }
.btn-primary:active { transform: translateY(0); }
.btn-glass { color: var(--text); background: var(--glass); border: 1px solid var(--line2); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--sh-glass); }
.btn-glass:hover { background: var(--glass-hi); border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn-dark { color: var(--text); background: #0E0C0A; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px -12px rgba(0,0,0,.7); }
.btn-dark:hover { transform: translateY(-2px); background: #171411; }

/* ── GLASS (the app's spec) ── */
.glass { position: relative; background: var(--glass); border: 1px solid rgba(var(--c-rgb, 255,255,255), .14); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--sh-glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.spot { isolation: isolate; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(var(--c-rgb, 255,255,255), .12), transparent 60%); opacity: 0; transition: opacity .4s; }
.spot:hover::before { opacity: 1; }
/* Cards that tilt toward the pointer, with their contents lifted off the glass */
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease); }
.tilt:hover { border-color: rgba(var(--c-rgb, 91,164,220), .4); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -30px rgba(var(--c-rgb, 0,0,0), .5); }
.tilt .z3 { transform: translateZ(30px); }
.tilt .z2 { transform: translateZ(18px); }
.tilt .z1 { transform: translateZ(10px); }

/* ── NAV (floating glass pill) ── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--fitness), var(--diet), var(--finances), var(--relations), var(--personal), var(--work)); }
.nav-shell { position: fixed; top: 14px; left: 0; right: 0; z-index: 100; padding: 0 16px; pointer-events: none; }
nav.nav { pointer-events: auto; max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 10px 10px 22px; border-radius: 18px; background: rgba(20,18,16,.55); border: 1px solid rgba(255,255,255,.08); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 40px -18px rgba(0,0,0,.8); transition: background .35s, max-width .45s var(--ease); }
.scrolled nav.nav { background: rgba(16,14,12,.78); max-width: 1000px; }
/* At the very top the nav sits over an always-moving hero; a backdrop blur there is re-computed every frame for no visible gain. Blur only once scrolled (same as the home page). */
.js:not(.scrolled) nav.nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20,18,16,.62); }
.nav-logo { display: flex; align-items: center; line-height: 1; }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a { display: block; padding: 9px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-links a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.06); }
.nav-cta { padding: 12px 18px; font-size: 13.5px; border-radius: 12px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 16px; height: 1.6px; background: currentColor; border-radius: 2px; position: relative; transition: transform .35s var(--ease), background .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav-toggle span::before { top: -5px; } .nav-toggle span::after { top: 5px; }
.menu-open .nav-toggle span { background: transparent; }
.menu-open .nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
.menu-open .nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }
.mobile-panel { pointer-events: auto; max-width: 1120px; margin: 8px auto 0; padding: 8px; border-radius: 18px; background: rgba(20,18,16,.92); border: 1px solid rgba(255,255,255,.08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); display: none; flex-direction: column; }
.menu-open .mobile-panel { display: flex; animation: panelIn .45s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.mobile-panel a:not(.btn) { color: var(--body); text-decoration: none; font-size: 16px; font-weight: 500; padding: 14px; border-radius: 12px; }
.mobile-panel a:not(.btn):active { background: rgba(255,255,255,.05); }
.mobile-panel .btn { margin: 8px 4px 4px; }

/* ── AMBIENT LIGHT ── */
.aurora { position: absolute; inset: -10% -10% 0; z-index: 0; pointer-events: none; }
.aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.aurora .a1 { width: 900px; height: 900px; left: 38%; top: -8%; background: radial-gradient(closest-side, rgba(91,164,220,.20), rgba(91,164,220,.06) 55%, transparent); animation: drift1 22s ease-in-out infinite alternate; }
.aurora .a2 { width: 700px; height: 700px; left: -12%; top: 40%; background: radial-gradient(closest-side, rgba(224,120,64,.15), rgba(224,120,64,.04) 55%, transparent); animation: drift2 26s ease-in-out infinite alternate; }
.aurora .a3 { width: 680px; height: 680px; left: 72%; top: 38%; background: radial-gradient(closest-side, rgba(138,112,192,.17), rgba(138,112,192,.04) 55%, transparent); animation: drift3 24s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(-80px, 60px, 0) scale(1.08); } }
@keyframes drift2 { to { transform: translate3d(90px, -50px, 0) scale(1.12); } }
@keyframes drift3 { to { transform: translate3d(-60px, -70px, 0) scale(.94); } }
.hero-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg)); }
section.block { position: relative; padding: 150px 0; }
.glows { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.block-glow { position: absolute; pointer-events: none; border-radius: 50%; }
.block-glow.drift-a { animation: drift1 24s ease-in-out infinite alternate; }
.block-glow.drift-b { animation: drift2 28s ease-in-out infinite alternate; }
.block-glow.drift-c { animation: drift3 26s ease-in-out infinite alternate; }
.hairline { height: 1px; max-width: var(--wrap); margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); }

/* ── ENTRANCE + REVEAL ── */
@keyframes rise { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes stageIn { from { opacity: 0; transform: translate3d(0, 50px, 0) scale(.96); } to { opacity: 1; transform: none; } }
.enter { animation: fadeUp .7s var(--ease) both; animation-delay: var(--d, 0s); }
.rise-title .line { display: block; overflow: hidden; padding: 0 .04em .1em; margin-bottom: -.1em; }
.rise-title .line > span { display: inline-block; animation: rise .9s var(--ease) both; animation-delay: var(--d, .1s); }
.js [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .6s var(--ease), transform .65s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="scale"] { transform: translate3d(0, 28px, 0) scale(.96); }
.js .story-steps[data-reveal] { opacity: 1; transform: none; }
/* Card entrance (same as the home page): tips up out of the page in 3D, its icon pops, and a band of its
   colour sweeps across it. One-shot. "is-done" (js/site.js) hands back the card's own hover/tilt transitions. */
.js [data-reveal="card"] { opacity: 0; transform: perspective(1000px) translate3d(0, 44px, 0) rotateX(20deg) scale(.96); transform-origin: 50% 0; transition: opacity .7s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="card"].is-in { opacity: 1; transform: none; }
.js [data-reveal="card"].is-done { transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease), background .4s; transition-delay: 0s; }
.js [data-reveal="card"] :is(.icon-tile, .check) { transition: transform .8s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; transition-delay: calc(var(--d, 0s) + .24s); }
.js [data-reveal="card"]:not(.is-in) :is(.icon-tile, .check) { opacity: 0; transform: scale(.3) rotate(-20deg); }
/* The light sweep is opt-in (.sweep) for a section's one featured card, not every card (founder feedback, round 4) */
.js [data-reveal="card"].sweep:not(.no-sweep)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: linear-gradient(105deg, transparent 32%, rgba(var(--c-rgb, 196,184,168), .20) 46%, rgba(255,255,255,.09) 50%, transparent 64%) no-repeat; background-size: 260% 100%; background-position: 135% 0; }
.js [data-reveal="card"].sweep.is-in:not(.no-sweep)::after { animation: sweep 1.4s cubic-bezier(.45,0,.2,1) calc(var(--d, 0s) + .3s) both; }
@keyframes sweep { from { background-position: 135% 0; } to { background-position: -35% 0; } }
/* Touch screens: each glass card lights up in its own colour as it passes the middle of the screen (scroll-driven, compositor only) */
@media (hover: none) {
  @supports (animation-timeline: view()) {
    .spot::before { background: radial-gradient(130% 90% at 12% 0%, rgba(var(--c-rgb, 196,184,168), .17), transparent 62%); animation: focusGlow linear both; animation-timeline: view(); animation-range: cover 12% cover 88%; }
    @keyframes focusGlow { 0%, 100% { opacity: 0; } 38%, 62% { opacity: 1; } }
  }
}

/* Pills under a page title */
.tag-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--blue-hi); background: rgba(91,164,220,.08); border: 1px solid rgba(91,164,220,.24); }
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--blue); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.hero-note { margin-top: 22px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 14px; height: 14px; color: var(--finances); }

/* ── 3D STAGE (same engine as the home hero; js/site.js drives [data-stage]) ── */
.stage { position: relative; width: 100%; max-width: 1160px; height: 680px; margin: 56px auto 0; perspective: 1600px; perspective-origin: 50% 20%; animation: stageIn 1.1s var(--ease) .15s both; }
.stage-sway { position: absolute; inset: 0; transform-style: preserve-3d; animation: sway 16s ease-in-out infinite alternate; }
@keyframes sway { 0% { transform: rotateY(-2deg); } 100% { transform: rotateY(2deg); } }
.stage-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(12deg); --sep: 1; }
.layer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translate3d(var(--x, 0px), var(--y, 0px), calc(var(--z, 0) * var(--sep) * 1px)) rotateZ(var(--rz, 0deg)); transform-style: preserve-3d; }
.float { animation: bob var(--bob, 7s) ease-in-out infinite alternate; animation-delay: var(--bob-d, 0s); }
@keyframes bob { from { translate: 0 -7px; } to { translate: 0 7px; } }
.orbit { width: 760px; height: 760px; border-radius: 50%; border: 1px solid rgba(91,164,220,.16); position: relative; }
.orbit::before { content: ''; position: absolute; inset: 70px; border-radius: 50%; border: 1px solid rgba(196,184,168,.08); }
.orbit::after { content: ''; position: absolute; inset: -90px; border-radius: 50%; border: 1px dashed rgba(196,184,168,.06); }
.orbit-spin { position: absolute; inset: 0; border-radius: 50%; animation: spin 60s linear infinite; }
.orbit-spin.rev { inset: 70px; animation-duration: 44s; animation-direction: reverse; }
.orbit-spin b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c), 0 0 3px var(--c); }
@keyframes spin { to { transform: rotate(360deg); } }
.stage-glow { width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(91,164,220,.30), rgba(91,164,220,.08) 60%, transparent); }
.is-off .aurora i, .is-off .orbit-spin, .is-off .float, .is-off .stage-sway, .is-off .pulse-dot::after, .is-off .block-glow { animation-play-state: paused; }
.stage-caption { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-size: 12px; color: var(--faint); z-index: 5; padding: 0 12px; }

/* Phone frame around real app screenshots */
.phone { --pw: 272px; position: relative; width: var(--pw); aspect-ratio: 9 / 19.4; border-radius: calc(var(--pw) * .16); padding: calc(var(--pw) * .032); background: linear-gradient(150deg, #3A342D 0%, #1B1815 38%, #110F0D 70%, #2A2520 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1.5px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.6), var(--sh-deep); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .13); overflow: hidden; background: #0B0A09; transform: translateZ(0); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.025) 26%, transparent 42%); }
.phone-back .phone-screen img { filter: brightness(.72) saturate(.9); }

/* Real photo, framed like the phones */
.photo-card { --cw: 300px; position: relative; width: var(--cw); aspect-ratio: 4 / 5; border-radius: calc(var(--cw) * .09); overflow: hidden; background: #1C1916; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--sh-deep); transform: translateZ(0); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.photo-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(14,12,10,.7)), linear-gradient(115deg, rgba(255,255,255,.09) 0%, transparent 34%); pointer-events: none; }
.photo-stripe { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, var(--fitness) 0 16.66%, var(--diet) 0 33.33%, var(--finances) 0 50%, var(--relations) 0 66.66%, var(--personal) 0 83.33%, var(--work) 0); }
.photo-card figcaption, .photo-card .cap { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.photo-card figcaption small, .photo-card .cap small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cement); }

/* Floating glass chips on a stage */
.chip-card { padding: 14px 18px; border-radius: 18px; min-width: 190px; background: rgba(28,25,22,.72); border: 1px solid rgba(91,164,220,.25); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 50px -20px rgba(0,0,0,.8); }
.chip-label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.chip-value { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; color: var(--blue); white-space: nowrap; }
.chip-sub { font-size: 12px; color: var(--muted); }
.pillar-dots { display: flex; gap: 5px; margin-top: 10px; }
.pillar-dots i { flex: 1; height: 4px; border-radius: 3px; background: var(--c); }
/* Chips on a stage float over layers that never stop moving: near-opaque fill instead of a per-frame backdrop blur (same as the home hero) */
.stage .chip-card { background: rgba(28,25,22,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
.list-card { width: 270px; padding: 18px 20px 16px; }
.list-card .chip-label { color: var(--blue); }
.list-card ul { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.list-card li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.list-card li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex-shrink: 0; }

/* ── STAT RIBBON ── */
.ribbon { position: relative; z-index: 3; margin-top: -30px; }
.ribbon-inner { display: grid; grid-template-columns: repeat(3, 1fr) 1.6fr; align-items: stretch; border-radius: 22px; overflow: hidden; }
.ribbon-cell { padding: 24px 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.ribbon-cell:last-child { border-right: 0; }
.ribbon-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.ribbon-lbl { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ribbon-quote { font-size: 15px; color: var(--body); line-height: 1.55; }
.ribbon-quote strong { color: var(--text); font-weight: 600; }

/* ── SCROLL STORY (sticky 3D stage, swaps as each step comes into focus) ── */
.story-host { --accent: var(--blue); --accent-rgb: 91,164,220; }
.story { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 40px; }
.story-stage { position: relative; }
.story-sticky { position: sticky; top: calc(50vh - 330px); height: 660px; display: grid; place-items: center; perspective: 1400px; }
.story-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--accent-rgb), .38), rgba(var(--accent-rgb), .10) 58%, transparent); transition: background .6s var(--ease); }
.story-ring { position: absolute; width: 470px; height: 470px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(var(--accent-rgb), .22); transition: border-color .6s var(--ease); }
.story-ring::after { content: ''; position: absolute; inset: -60px; border-radius: 50%; border: 1px solid rgba(255,255,255,.04); }
.story-3d { position: relative; transform-style: preserve-3d; }
.story-phone { position: relative; transform: rotateY(-10deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .7s var(--ease), filter .7s var(--ease); }
.story[data-step="1"] .story-phone { transform: rotateY(8deg) rotateX(4deg); }
.story[data-step="2"] .story-phone { transform: rotateY(-8deg) rotateX(-2deg); }
.story-phone .phone { --pw: 292px; }
.screen { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .45s var(--ease), transform .65s var(--ease); }
.screen.on { opacity: 1; transform: none; }
/* A photo that waits behind the phone, then comes forward on its step */
.story-photo { position: absolute; left: 50%; top: 50%; margin: calc(var(--cw) * -.625) 0 0 calc(var(--cw) * -.5); --cw: 250px; transform: translate3d(170px, 190px, -260px) rotateY(-16deg); filter: brightness(.4) saturate(.8); transition: transform .7s var(--ease), filter .7s var(--ease); }
.story[data-step="3"] .story-phone { transform: translate3d(-120px, -40px, -200px) rotateY(14deg) rotateX(4deg); filter: brightness(.5); }
.story[data-step="3"] .story-photo { transform: translate3d(30px, 10px, 90px) rotateY(-9deg) rotateX(3deg); filter: none; }
.story-dots { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.story-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.16); transition: background .5s, height .5s var(--ease); }
.story-dots i.on { background: var(--accent); height: 22px; border-radius: 4px; }
.story-steps { list-style: none; }
.story-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; }
.story-card { padding: 34px 34px 32px; --c-rgb: var(--step-rgb); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .5s; }
.js .story.is-live .story-step:not(.is-active) .story-card { opacity: .38; transform: scale(.975); }
.story-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--step-rgb)); }
.story-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #0E0C0A; background: rgb(var(--step-rgb)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -10px rgba(var(--step-rgb), .9); font: 800 13px/1 'Syne', sans-serif; }
.story-icon svg { width: 20px; height: 20px; }
.story-card h3 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -.03em; line-height: 1.08; margin: 18px 0 12px; text-wrap: balance; }
.story-card p { color: var(--body); font-size: 15.5px; line-height: 1.7; }
.story-card .fine { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.phone-inline { display: none; }
.story-caption { margin-top: 18px; font-size: 12px; color: var(--faint); }
.story-pager { display: none; justify-content: center; gap: 8px; margin-top: 20px; }
.story-pager button { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.18); cursor: pointer; transition: width .3s var(--ease), background-color .3s; }
.story-pager button::after { content: ''; position: absolute; inset: -12px -6px; }
.story-pager button.on { width: 24px; background: var(--accent); }

/* ── SOLID HERO CARD (the one solid-filled element per section, per the Glass rule) ── */
.solid-card { position: relative; border-radius: 32px; padding: 64px; color: #0E0C0A; background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.28), transparent 50%), radial-gradient(90% 90% at 0% 100%, rgba(30,70,110,.55), transparent 60%), linear-gradient(135deg, #79B9E9 0%, #5BA4DC 45%, #3E82BD 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 100px -40px rgba(91,164,220,.55), 0 30px 60px -30px rgba(0,0,0,.8); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.solid-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 80% at 80% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 80% 30%, #000, transparent 75%); }
.solid-copy { position: relative; z-index: 2; }
.solid-card h2 { font-size: clamp(38px, 5.4vw, 68px); margin: 0 0 14px; color: #0B0A09; letter-spacing: -.045em; }
.solid-card .solid-lede { font-size: 17px; line-height: 1.6; color: rgba(11,10,9,.84); max-width: 500px; font-weight: 500; }
.solid-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.solid-meta { margin-top: 16px; font-size: 13px; font-weight: 600; color: rgba(11,10,9,.7); }
.solid-meta a { color: #0B0A09; font-weight: 800; }
.solid-visual { position: relative; z-index: 1; height: 100%; min-height: 420px; perspective: 1200px; }
.solid-visual > .phone, .solid-visual > .photo-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%) rotateY(calc(-18deg + var(--tx, 0deg))) rotateX(calc(8deg + var(--ty, 0deg))) rotateZ(4deg); transition: transform .5s var(--ease); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1.5px 0 rgba(255,255,255,.16), 0 50px 90px -30px rgba(10,30,50,.9), 0 20px 40px -20px rgba(0,0,0,.7); }
.solid-visual > .phone { --pw: 270px; }
.solid-visual > .photo-card { --cw: 280px; transform: translate(-50%, -50%) rotateY(calc(-16deg + var(--tx, 0deg))) rotateX(calc(6deg + var(--ty, 0deg))) rotateZ(3deg); }

/* ── OFFER CARD ── */
.offer { position: sticky; top: 110px; padding: 36px; border-radius: 26px; --c-rgb: 91,164,220; border-color: rgba(91,164,220,.22); overflow: hidden; }
.offer::after { content: ''; position: absolute; width: 340px; height: 340px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(91,164,220,.22), transparent); pointer-events: none; }
.offer-label { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.offer h3 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -.03em; margin: 14px 0 10px; }
.offer-sub { font-size: 14.5px; color: var(--body); margin-bottom: 22px; }
.offer .pillar-dots { margin: 0 0 22px; }
.offer-price { padding-top: 20px; border-top: 1px solid var(--line); margin-bottom: 20px; font-size: 13.5px; color: var(--muted); }
.offer .btn { width: 100%; }
.offer-foot { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }
.offer-foot a { color: var(--blue); text-decoration: none; }
.offer-foot a:hover { text-decoration: underline; }

/* ── BLOG CARDS ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.blog-grid.two { grid-template-columns: repeat(2, 1fr); }
.blog-card { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; border-color: rgba(var(--c-rgb), .16); transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease); }
.blog-card:hover { transform: translateY(-6px); border-color: rgba(var(--c-rgb), .42); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 34px 70px -34px rgba(var(--c-rgb), .55); }
/* Each cover is a small 3D stage: real screens fanned in the post's own colour (same as the home page) */
.blog-cover { position: relative; aspect-ratio: 16 / 11; line-height: 0; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); perspective: 900px; perspective-origin: 50% 0%; background: radial-gradient(80% 90% at 50% 108%, rgba(var(--c-rgb), .30), transparent 70%), linear-gradient(180deg, #181512, #100E0C); }
.bc-ring { position: absolute; left: 50%; top: 82%; width: 118%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(var(--c-rgb), .24); }
.bc-ring::after { content: ''; position: absolute; inset: 15%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.07); }
.bc-glow { position: absolute; left: 50%; top: 74%; width: 86%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--c-rgb), .5), transparent); opacity: .7; transition: opacity .6s, transform .8s var(--ease); }
.bc-item { position: absolute; left: 50%; top: 15%; transform: var(--bt); transition: transform .8s var(--ease); }
.bc-front { z-index: 2; --bt: translateX(-50%) rotateX(20deg) rotateZ(-3deg); --ht: translateX(-50%) translateY(-10px) rotateX(8deg) rotateZ(-1deg) scale(1.04); --st: translateX(-50%) translateY(75%) rotateX(55deg) rotateZ(-8deg); }
.bc-back { z-index: 1; top: 21%; --bt: translateX(-2%) rotateX(20deg) rotateZ(10deg); --ht: translateX(10%) translateY(-4px) rotateX(12deg) rotateZ(15deg); --st: translateX(-50%) translateY(80%) rotateX(55deg) rotateZ(0deg); }
.blog-card:hover .bc-item { transform: var(--ht); }
.blog-card:hover .bc-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
.blog-cover .phone { --pw: 132px; }
.blog-cover .bc-back .phone { --pw: 114px; }
.bc-back .phone-screen img { filter: brightness(.62) saturate(.9); }
.bc-photo { position: relative; width: 150px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #1C1916; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), var(--sh-deep); }
.bc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.bc-photo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--fitness) 0 16.66%, var(--diet) 0 33.33%, var(--finances) 0 50%, var(--relations) 0 66.66%, var(--personal) 0 83.33%, var(--work) 0); }
.bc-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.1) 0%, transparent 34%), linear-gradient(180deg, transparent 55%, rgba(14,12,10,.45)); }
@keyframes bcIn { from { transform: var(--st); opacity: 0; } 30% { opacity: 1; } }
.js .blog-card.is-in .bc-front { animation: bcIn 1.1s var(--ease) calc(var(--d, 0s) + .18s) backwards; }
.js .blog-card.is-in .bc-back { animation: bcIn 1.1s var(--ease) calc(var(--d, 0s) + .3s) backwards; }
.blog-body { padding: 24px 24px 22px; display: flex; flex-direction: column; flex: 1; }
/* Keep-reading (two posts): side-by-side cover and text, so the pair reads as a tight row, not two big pictures */
.blog-grid.two > .blog-card { flex-direction: row; }
.blog-grid.two .blog-cover { flex: 0 0 40%; aspect-ratio: auto; min-height: 264px; border-bottom: 0; border-right: 1px solid var(--line); }
.blog-grid.two .bc-item { top: 13%; }
.blog-grid.two .bc-back { left: 46%; }
.blog-grid.two .blog-body { padding: 26px 26px 22px; }
.blog-grid.two p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 0 1 auto; }
.blog-grid.two .blog-meta { margin-top: auto; }
.blog-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--c-rgb)); }
.blog-card h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; margin: 12px 0 10px; color: var(--text); text-wrap: balance; }
.blog-card p { font-size: 14px; color: var(--body); line-height: 1.65; flex: 1; }
.blog-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.blog-meta .read { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.blog-meta svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.blog-card:hover .blog-meta svg { transform: translateX(3px); }

/* ── FOOTER ── */
.footer-stripe { height: 3px; background: linear-gradient(90deg, var(--fitness) 0 16.66%, var(--diet) 0 33.33%, var(--finances) 0 50%, var(--relations) 0 66.66%, var(--personal) 0 83.33%, var(--work) 0); opacity: .85; }
footer { border-top: 1px solid var(--line); padding: 48px 0 56px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 12px; color: var(--faint); }
.footer-note { flex-basis: 100%; order: 3; font-size: 12px; line-height: 1.5; color: var(--faint); }

/* ══ BLOG POST ══ */
.post-head { position: relative; padding: 140px 0 40px; overflow: hidden; }
@supports (overflow: clip) { .post-head { overflow: clip; } }
.post-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg)); }
.post-head-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: color .2s, border-color .2s; }
.back-link:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.back-link svg { width: 14px; height: 14px; }
.post-tag { display: inline-flex; align-items: center; gap: 10px; margin: 30px 0 18px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.post-tag::before, .post-tag::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; }
h1.post-title { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.04em; }
.post-meta { margin-top: 22px; font-size: 13.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; justify-content: center; }

/* The cover art as a layered diorama: each shape on its own depth plane */
.post-stage { position: relative; z-index: 1; max-width: 1080px; margin: 50px auto 0; padding: 0 24px; perspective: 1400px; perspective-origin: 50% 0%; animation: stageIn 1.1s var(--ease) .2s both; }
.post-stage-box { position: relative; height: 320px; }
.post-stage .stage-inner { transform: rotateX(10deg); }
.dlayer { position: absolute; inset: 0; transform: translate3d(var(--x, 0px), var(--y, 0px), calc(var(--z, 0) * var(--sep) * 1px)); transform-style: preserve-3d; pointer-events: none; }
.dlayer svg { display: block; width: 100%; height: 100%; }
.dlayer.plate { border-radius: 26px; overflow: hidden; border: 1px solid var(--line2); background: #141210; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--sh-deep); }
.dlayer.plate::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 30%), linear-gradient(180deg, transparent 60%, rgba(14,12,10,.5)); }
.dlayer.glowl { inset: -40% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--g, 91,164,220), .26), rgba(var(--g, 91,164,220), .06) 60%, transparent); }
.dlayer .float { width: 100%; height: 100%; }

.post-main { position: relative; }
.post-main .glows { z-index: 0; }
.post-body { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 64px 24px 80px; font-size: 17.5px; line-height: 1.85; color: #CFC5B9; }
.post-body p { margin-bottom: 24px; text-wrap: pretty; }
.post-body > p:first-child { font-size: 21px; line-height: 1.7; color: var(--text); }
.post-body h2 { position: relative; font-family: 'Syne', sans-serif; font-size: clamp(23px, 2.7vw, 30px); font-weight: 800; color: var(--text); margin: 60px 0 18px; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.post-body h2::before { content: ''; display: block; width: 44px; height: 3px; border-radius: 3px; margin-bottom: 18px; background: linear-gradient(90deg, var(--fitness), var(--diet), var(--finances), var(--relations), var(--personal), var(--work)); opacity: .9; }
.post-body strong { color: var(--text); }
.post-body a { color: var(--blue-hi); }
.post-body blockquote { position: relative; margin: 48px -24px; padding: 34px 38px 34px 42px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(20px, 2.3vw, 24px); line-height: 1.45; letter-spacing: -.015em; color: var(--text); background: var(--glass); border: 1px solid rgba(91,164,220,.24); border-radius: 24px; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -40px rgba(91,164,220,.35), var(--sh-glass); overflow: hidden; }
.post-body blockquote::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--blue-hi), var(--blue)); }
.post-body blockquote::after { content: ''; position: absolute; width: 300px; height: 300px; right: -120px; top: -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(91,164,220,.2), transparent); pointer-events: none; }

.post-end { position: relative; padding: 0 0 120px; }
.post-end .solid-card { max-width: 1080px; margin: 0 auto; }
.more-posts { max-width: 1080px; margin: 110px auto 0; }

/* ══ COACHING PAGE ══ */
.cp-hero { position: relative; padding: 150px 0 90px; overflow: hidden; }
@supports (overflow: clip) { .cp-hero { overflow: clip; } }
.cp-hero .wrap { position: relative; z-index: 2; }
.cp-hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cp-hero h1 { font-size: clamp(34px, 5.3vw, 76px); line-height: .98; letter-spacing: -.045em; margin: 28px auto 26px; max-width: 1160px; }
.cp-hero .lede { margin: 0 auto 34px; text-align: center; max-width: 620px; text-wrap: balance; }
.cp-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cp-section { position: relative; padding: 130px 0; }
.cp-section .wrap { position: relative; z-index: 1; }
.cp-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.cp-stack { display: flex; flex-direction: column; gap: 16px; perspective: 1200px; }
.cp-card { padding: 30px 30px 28px; display: grid; grid-template-columns: 52px 1fr; gap: 18px; }
.cp-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.cp-card p { font-size: 15px; color: var(--body); line-height: 1.7; }
.cp-card a { color: var(--blue-hi); text-decoration: none; }
.cp-card a:hover { text-decoration: underline; }
.icon-tile { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #0E0C0A; background: rgb(var(--c-rgb)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 12px 24px -12px rgba(var(--c-rgb), .9); }
.icon-tile svg { width: 21px; height: 21px; }
.pillar-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 48px; perspective: 1200px; }
.pillar-tile { padding: 26px 12px 22px; text-align: center; border-color: rgba(var(--c-rgb), .24); }
.pillar-tile .icon-tile { margin: 0 auto 14px; width: 50px; height: 50px; }
.pillar-tile span { display: block; font-size: 14px; font-weight: 700; color: rgb(var(--c-rgb)); }
.cp-includes-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; margin-top: 44px; }
.includes { list-style: none; display: flex; flex-direction: column; gap: 12px; perspective: 1200px; }
.includes li { --c-rgb: 91,164,220; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 22px 24px; }
.includes .check { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: rgba(91,164,220,.12); border: 1px solid rgba(91,164,220,.3); }
.includes .check svg { width: 14px; height: 14px; }
.includes strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.includes p { font-size: 14px; color: var(--body); line-height: 1.65; }
.qualify { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; perspective: 1200px; }
.qualify .glass { padding: 34px 32px 32px; overflow: hidden; }
.qualify .glass::after { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--c-rgb), .7), transparent); }
.qualify .q-glow { position: absolute; width: 320px; height: 320px; right: -140px; top: -170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--c-rgb), .2), transparent); pointer-events: none; }
.qualify h3 { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; color: rgb(var(--c-rgb)); }
.qualify ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.qualify li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; color: var(--body); line-height: 1.6; }
.qualify li svg { width: 16px; height: 16px; margin-top: 4px; color: rgb(var(--c-rgb)); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-head { position: sticky; top: 120px; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { padding: 0; border-radius: 18px; transition: border-color .4s, background .4s; }
.faq details[open] { border-color: rgba(91,164,220,.26); background: var(--glass-hi); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-size: 16.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details p { padding: 0 26px 24px; font-size: 15px; color: var(--body); line-height: 1.75; }

/* ── RESPONSIVE ── */
@media (max-width: 1080px) {
  :root { --gutter: 32px; }
  .nav-links a { padding: 9px 10px; }
  .ribbon-inner { grid-template-columns: repeat(3, 1fr); }
  .ribbon-cell.quote-cell { grid-column: 1 / -1; border-top: 1px solid var(--line); border-right: 0; }
  .cp-stage .back .phone { --pw: 200px !important; }
  .cp-stage .left { --x: -250px !important; } .cp-stage .right { --x: 250px !important; }
  .cp-stage .chip { --x: 270px !important; } .cp-stage .list { --x: -250px !important; }
  .pillar-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .nav-links, nav.nav > .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  nav.nav { padding: 8px 8px 8px 18px; }
  section.block, .cp-section { padding: 100px 0; }
  .cp-hero { padding: 120px 0 40px; }
  .stage { height: 580px; margin-top: 36px; }
  .cp-stage .front .photo-card { --cw: 250px; }
  .cp-stage .back .phone { --pw: 180px !important; }
  .cp-stage .left { --x: -190px !important; --y: 34px !important; } .cp-stage .right { --x: 190px !important; --y: 34px !important; }
  .cp-stage .chip { --x: 170px !important; --y: -190px !important; }
  .cp-stage .list { --x: -120px !important; --y: 190px !important; }
  .orbit { width: 520px; height: 520px; }
  .stage-glow { width: 420px; height: 420px; }
  .ribbon { margin-top: 10px; }
  .cp-split, .cp-includes-grid, .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-head { position: static; }
  .offer { position: relative; top: 0; }
  .qualify { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
  .story-stage { display: none; }
  /* Mobile: the steps become one swipeable rail (compact visual over a short card), same as the home page */
  .story-steps { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .story-steps::-webkit-scrollbar { display: none; }
  .story-step { flex: 0 0 min(84%, 340px); min-height: 0; padding: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
  .story-step:last-child { scroll-snap-align: end; }
  .js .story.is-live .story-step:not(.is-active) .story-card { opacity: 1; transform: none; }
  .js .story-steps .story-card[data-reveal] { opacity: 1; transform: none; }
  .phone-inline { order: -1; display: flex; justify-content: center; padding: 22px 0 18px; position: relative; perspective: 1200px; }
  .phone-inline::before { content: ''; position: absolute; width: 270px; height: 270px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--step-rgb), .30), transparent); }
  .phone-inline .phone { --pw: 168px; transform: rotateX(4deg); }
  .phone-inline .photo-card { --cw: 250px; margin: 16px 0 12px; transform: rotateX(4deg) rotateY(-6deg); }
  .story-card { flex: 1; padding: 20px; }
  .story-icon { width: 34px; height: 34px; border-radius: 11px; }
  .story-card h3 { font-size: 23px; margin: 14px 0 8px; }
  .story-card p { font-size: 14.5px; line-height: 1.6; }
  .story-pager { display: flex; }
  /* Rail choreography (same as the home page): the card in focus stands its visual up and lights its glow, the others lean away */
  .phone-inline .phone, .phone-inline .photo-card { transition: transform .7s var(--ease), opacity .7s var(--ease); }
  .phone-inline::before { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .story-step:not(.is-active) .phone-inline :is(.phone, .photo-card) { transform: rotateX(8deg) rotateY(-24deg) scale(.88); opacity: .72; }
  .story-step:has(~ .is-active) .phone-inline :is(.phone, .photo-card) { transform: rotateX(8deg) rotateY(24deg) scale(.88); }
  .story-step:not(.is-active) .phone-inline::before { opacity: .35; transform: translate(-50%, -50%) scale(.8); }
  .story-step.is-active .story-card { border-color: rgba(var(--step-rgb), .34); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 50px -30px rgba(var(--step-rgb), .6); }
  .js .story-steps[data-reveal] .story-step { transition: opacity .6s var(--ease), transform .9s var(--ease); }
  .js .story-steps[data-reveal]:not(.is-in) .story-step { opacity: 0; transform: translate3d(90px, 0, 0); }
  .story-steps .story-step:nth-child(2) { transition-delay: .1s; }
  .solid-card { grid-template-columns: 1fr; padding: 40px 26px 0; border-radius: 28px; overflow: hidden; }
  .solid-visual { min-height: 340px; margin: 0 -26px; overflow: hidden; }
  .solid-visual > .phone { --pw: 210px; top: 30px; transform: translate(-50%, 0) rotateX(10deg) rotateZ(3deg); }
  .solid-visual > .photo-card { --cw: 230px; top: 36px; transform: translate(-50%, 0) rotateX(8deg) rotateZ(3deg); }
  .blog-grid, .blog-grid.two { grid-template-columns: 1fr; }
  .post-head { padding-top: 120px; }
  .post-stage-box { height: 240px; }
  .more-posts { margin-top: 80px; }
}
/* Keep-reading on small screens: compact rows (mini 3D cover beside the title) instead of tall stacked cards */
@media (max-width: 700px) {
  .blog-grid { gap: 12px; margin-top: 26px; }
  .blog-grid > .blog-card { flex-direction: row; }
  .blog-grid > .blog-card .blog-cover { flex: 0 0 112px; aspect-ratio: auto; min-height: 132px; border-bottom: 0; border-right: 1px solid var(--line); perspective-origin: 50% 20%; }
  .blog-grid > .blog-card .bc-item { top: 18px; }
  .blog-grid > .blog-card .bc-back { display: none; }
  .blog-grid > .blog-card .phone { --pw: 74px; }
  .blog-grid > .blog-card .bc-photo { width: 80px; border-radius: 10px; }
  .blog-grid > .blog-card .bc-ring { width: 190%; top: 92%; }
  .blog-grid > .blog-card .blog-body { padding: 16px 16px 14px; }
  .blog-grid > .blog-card h3 { font-size: 16px; margin: 8px 0 0; }
  .blog-grid > .blog-card p { display: none; }
  .blog-grid > .blog-card .blog-meta { margin-top: auto; padding-top: 12px; border-top: 0; }
  .more-posts { margin-top: 64px; }
}
@media (max-width: 620px) {
  .post-stage { padding: 0 16px; margin-top: 38px; }
  .post-stage-box { height: 180px; }
  .dlayer.plate { border-radius: 18px; }
  .post-body { font-size: 17px; padding-top: 48px; }
  .post-body > p:first-child { font-size: 19px; }
  .post-body blockquote { margin: 40px 0; padding: 26px 22px 26px 26px; }
}
@media (max-width: 560px) {
  .hero-note { font-size: 12.5px; }
  .cp-ctas { width: 100%; }
  .cp-ctas .btn { flex: 1 1 100%; }
  .stage { height: 500px; margin-top: 56px; }
  .cp-stage .front .photo-card { --cw: 196px; }
  .cp-stage .back .phone { --pw: 144px !important; }
  .cp-stage .left { --x: -128px !important; --y: 30px !important; } .cp-stage .right { --x: 128px !important; --y: 30px !important; }
  .cp-stage .chip { --x: 52px !important; --y: -206px !important; --z: 90 !important; }
  .cp-stage .chip .chip-card { min-width: 0; padding: 11px 14px; }
  .cp-stage .chip .chip-value { font-size: 21px; }
  .cp-stage .list { --x: -26px !important; --y: 196px !important; --z: 100 !important; }
  .cp-stage .list-card { width: 236px; padding: 14px 16px 12px; }
  .cp-stage .list-card ul { gap: 6px; }
  .cp-stage .list-card li { font-size: 12.5px; }
  .orbit { width: 400px; height: 400px; }
  .ribbon-inner { grid-template-columns: repeat(3, 1fr); }
  .ribbon-cell { padding: 18px 14px; }
  .ribbon-num { font-size: 30px; }
  .ribbon-lbl { font-size: 10px; letter-spacing: .12em; }
  .ribbon-cell.quote-cell { padding: 18px; }
  .cp-card { grid-template-columns: 42px 1fr; gap: 14px; padding: 20px 18px 20px 16px; }
  .cp-card .icon-tile { width: 42px; height: 42px; border-radius: 13px; }
  .cp-card h3 { font-size: 16.5px; }
  .cp-card p { font-size: 14.5px; }
  .pillar-row { grid-template-columns: repeat(2, 1fr); }
  .includes li { padding: 20px; }
  .offer { padding: 28px 24px; }
  .solid-card h2 { font-size: 40px; }
  .solid-actions .btn { flex: 1 1 100%; }
  .post-end { padding-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}