/* pagekit.css: the home page's design language as 1 shared file (buttons, flame, shining lines, dark hero with dawn and grain, starlit bands, cards, journey list, links).
   Every rule below is copied line for line from index.html's inline <style> (lines noted), so pages that load this look the same as the home page. Load after tokens.css and before brand.css, as the home page does. */
/* index.html 30-32 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--fg); background: var(--bg); line-height: 1.65; }
/* index.html 34-38 */
::selection { background: #D44040; color: #fff; }
::-moz-selection { background: #D44040; color: #fff; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; position: relative; }
@media (min-width: 48em) { .wrap { padding: 0 40px; } }
h1, h2, h3 { font-family: var(--font-heading); color: var(--fg-heading); line-height: 1.08; text-wrap: balance; letter-spacing: -0.02em; margin: 0 0 .45em; }
/* index.html 39-46 */
h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.75rem); } h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); } h3 { font-size: 1.2rem; letter-spacing: -.01em; }
.band { padding: 72px 0; position: relative; overflow: hidden; }
.muted { color: var(--fg-muted); }
.note { font-size: .875rem; color: var(--fg-muted); max-width: 74ch; }
.label { font: 600 .875rem var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel-deep); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 18px; height: 2px; background: #D44040; }
.dark { color: var(--d-text); } .dark h1, .dark h2, .dark h3 { color: #fff; } .dark .muted, .dark .note { color: var(--d-muted); } .dark .label { color: var(--d-muted); }
.grid { display: grid; gap: 16px; } @media (min-width: 48em) { .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } }
/* index.html 54-69 */
/* ============ DL-22: shining lines under important words (fade from the left, sharp on the right, like a meteor) ============ */
.ln { padding-bottom: .08em; background:
        linear-gradient(90deg, rgba(200,58,58,0) 0%, rgba(200,58,58,.55) 45%, #D44040 88%, #FFC75A 100%) 0 100% / 100% 3px no-repeat; }
.ln2 { padding-bottom: .22em; background:
        linear-gradient(90deg, rgba(200,58,58,0) 0%, rgba(200,58,58,.55) 45%, #D44040 88%, #FFC75A 100%) 0 100% / 100% 3px no-repeat,
        linear-gradient(90deg, rgba(200,58,58,0) 10%, rgba(200,58,58,.4) 55%, #D44040 92%, #FFC75A 100%) 0 calc(100% - 8px) / 100% 2px no-repeat; }
.ul1 { background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .34em; padding-bottom: .22em;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C30 3 62 11 100 6 S160 8 198 4' fill='none' stroke='%23C83A3A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
       animation: drawIn .8s cubic-bezier(.2,.6,.2,1) .2s both; }
@keyframes drawIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.dark .ln { background-image: linear-gradient(90deg, rgba(255,138,92,0) 0%, rgba(255,138,92,.6) 45%, #FF8A5C 88%, #FFE3A3 100%); }
.dark .ln2 { background-image:
        linear-gradient(90deg, rgba(255,138,92,0) 0%, rgba(255,138,92,.6) 45%, #FF8A5C 88%, #FFE3A3 100%),
        linear-gradient(90deg, rgba(255,138,92,0) 10%, rgba(255,138,92,.45) 55%, #FF8A5C 92%, #FFE3A3 100%); }
.ln, .ln2 { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl { background: #D44040; color: #fff; padding: 0 .28em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* index.html 71-80 */
/* ============ flame: the LeapCode logo's own flame (traced from the A in the wordmark), pointing right in buttons and bullets, down under rockets and planets ============ */
.fl { display: inline-block; width: 1.15em; height: .82em; flex: none; background: linear-gradient(90deg, #FFC75A, #D44040 55%, #D44040);
      -webkit-mask: var(--flame) center / contain no-repeat; mask: var(--flame) center / contain no-repeat; }
:root { --flamed: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 15 20'><path stroke='black' stroke-width='.7' stroke-linejoin='round' d='M2.4 .2 L3.5 .7 L4.5 3.9 L6.5 6 L8.5 3.9 L9.5 .7 L10.6 .2 L12.4 3.4 L13 6.2 L12.4 8.2 L10.6 11.2 L8.6 14.6 L6.5 18 L4.4 14.6 L2.4 11.2 L.6 8.2 L0 6.2 L.6 3.4 Z'/></svg>"); }
:root { --flame: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 20 15'><path transform='matrix(0 -1 1 0 0 13)' stroke='black' stroke-width='.7' stroke-linejoin='round' d='M2.4 .2 L3.5 .7 L4.5 3.9 L6.5 6 L8.5 3.9 L9.5 .7 L10.6 .2 L12.4 3.4 L13 6.2 L12.4 8.2 L10.6 11.2 L8.6 14.6 L6.5 18 L4.4 14.6 L2.4 11.2 L.6 8.2 L0 6.2 L.6 3.4 Z'/></svg>"); }
ul.flame { list-style: none; padding: 0; margin: 0 0 1em; }
ul.flame li { position: relative; padding-left: 1.7em; margin: .5em 0; }
ul.flame li::before { content: ""; position: absolute; left: .1em; top: .3em; width: .72em; height: 1em; background: linear-gradient(180deg, #FFD27A, #FF8A5C 55%, #D44040);
      -webkit-mask: var(--flamed) center / contain no-repeat; mask: var(--flamed) center / contain no-repeat; }
.dark ul.flame li::before { background: linear-gradient(180deg, #FFE3A3, #FF9A70 60%, #D44040); }
/* index.html 82-87 */
/* DL-29: journey lists use the NUMBER as the bullet (a flag-numbered circle); other lists use the flame */
ol.journey { list-style: none; counter-reset: j; padding: 0; margin: 0 0 1em; }
ol.journey li { counter-increment: j; position: relative; padding-left: 2.6em; margin: .7em 0; min-height: 1.9em; }
ol.journey li::before { content: counter(j); position: absolute; left: 0; top: -.05em; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem var(--font-heading); background: #D44040; color: #fff; }
ol.journey li::after { content: ""; position: absolute; left: .95em; top: 1.9em; bottom: -.9em; width: 2px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 9px); }
ol.journey li:last-child::after { display: none; }
/* index.html 89-111 */
/* ============ buttons ============ */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 28px; border: 1.5px solid transparent;
       border-radius: var(--r-btn, 999px); font: 600 1rem var(--font-body); text-decoration: none; cursor: pointer; isolation: isolate;
       transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn:focus-visible { outline: 3px solid #D44040; outline-offset: 2px; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; transform: skewX(-22deg); z-index: -1; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); }
.btn:hover::after { opacity: 1; left: 130%; transition: left .6s ease, opacity .1s; }
/* call: coral outline on dark / filled coral on light; the flame travels to the right on hover, the gift fades */
.btn--call { background: #D44040; color: #fff; }
.btn--call .slot { display: inline-block; transition: opacity .3s ease .1s; }
.btn--call .fl { transition: transform .5s cubic-bezier(.3,.8,.3,1); }
.btn--call:focus-visible { background: #B3471A; transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(179,71,26,.7); }
.btn--call:focus-visible .fl { transform: translate(var(--travel, 120px), -9px) rotate(-14deg); }
.btn--call:focus-visible .slot { opacity: 0; }
/* W2f M-04: hover effects only on real hover devices (no stuck flame on touch); the flame distance is measured by assets/js/btn-flame.js on every page */
@media (hover:hover) and (pointer:fine){
  .btn--call:hover { background: #B3471A; transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(179,71,26,.7); }
  .btn--call:hover .fl { transform: translate(var(--travel, 120px), -9px) rotate(-14deg); }
  .btn--call:hover .slot { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .btn, .btn--call, .btn--call *, .btn::after { transition: none !important; } .btn--call:hover, .btn--call:focus-visible { transform: none !important; } .btn--call:hover .fl, .btn--call:focus-visible .fl { transform: none !important; } .btn:hover::after { opacity: 0 !important; } }
.btn--call:active { transform: translateY(0) scale(.98); }
.dark .btn--call.ghost { background: transparent; border-color: #FF9B93; color: #fff; }
.dark .btn--call.ghost:hover { background: #B3471A; border-color: #B3471A; }
/* momentum check: inverse of its ground; coral fills in from the left like a throttle */
.btn--check { color: #fff; background: linear-gradient(90deg, #D44040 0 50%, #1A1A1A 50% 100%) 100% 0 / 204% 100% no-repeat border-box; transition: background-position .5s cubic-bezier(.2,.7,.2,1), transform .25s ease, box-shadow .25s ease, color .25s ease; }
.btn--check:hover { background-position: 0 0; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(26,26,26,.55); }
.dark .btn--check { color: #1A1A1A; background-image: linear-gradient(90deg, #D44040 0 50%, #FFFFFF 50% 100%); }
.dark .btn--check:hover { color: #fff; box-shadow: 0 12px 24px -12px rgba(255,255,255,.25); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 26px; }
/* index.html 114-121 */
.hero { background: #121212; min-height: 640px; padding: 96px 0 88px; }
.hero::before { /* dawn: maroon-red from the top right edge, so the dark stays dark and a little hope comes in */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 560px at 92% -10%, rgba(178,40,54,.78), rgba(108,22,38,.46) 42%, transparent 72%),
    linear-gradient(180deg, rgba(120,26,40,.5) 0, rgba(80,18,32,.22) 16%, transparent 42%); }
.hero::after { /* grain, 2-3% */ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* index.html 147-149 */
.hero-copy { position: relative; z-index: 3; max-width: 760px; }
.hero .lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: #E7EBEC; max-width: 56ch; }
.hero .sub { font: 600 clamp(1.1rem, 1rem + .6vw, 1.45rem) var(--font-heading); color: #fff; margin: 0 0 18px; }
/* index.html 151-156 */
/* ============ light bands: subtle yellow stars so white is never dull ============ */
.starlit { background-color: #fff; background-image:
    radial-gradient(1.3px 1.3px at 40px 50px, rgba(232,178,58,.55), transparent 62%), radial-gradient(1px 1px at 190px 130px, rgba(232,178,58,.45), transparent 62%),
    radial-gradient(1.6px 1.6px at 310px 60px, rgba(232,178,58,.4), transparent 62%), radial-gradient(1px 1px at 120px 260px, rgba(232,178,58,.5), transparent 62%), radial-gradient(1.2px 1.2px at 340px 290px, rgba(232,178,58,.4), transparent 62%);
    background-size: 380px 340px; }
.starlit.sunk { background-color: var(--g-sunk); }
/* index.html 167-169 */
.card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card, 16px); padding: 24px; background: #fff; }
.card--fn { border-top: 4px solid var(--fc); } .card--fn::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right bottom, transparent 55%, color-mix(in srgb, var(--fc) 16%, transparent)); }
.card > * { position: relative; } .num { font: 700 .875rem var(--font-heading); color: var(--fd); letter-spacing: .04em; }
/* index.html 316-316 */
.tri { display: grid; gap: 16px; margin-top: 20px; } @media (min-width: 48em) { .tri { grid-template-columns: repeat(3, 1fr); } } .tri div { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: #fff; } .tri .i { font-size: 2rem; display: block; } .tri b { font: 700 1.1rem var(--font-heading); display: block; margin: 4px 0; }
/* index.html 318-318 */
.anchor { background: #1A1A1A; } .anchor .lead { color: #E7EBEC; max-width: 60ch; margin: 0 auto 22px; } .anchor .wrap { text-align: center; } .anchor .cn { color: var(--d-muted); font-size: var(--fs-body, 1.125rem); max-width: 62ch; margin: 18px auto 0; }
/* index.html 320-321 */
.p-problem { --pc: #D44040; background-color: #FCF1EA; background-image: radial-gradient(circle at 20px 20px, rgba(200,58,58,.11) 1.5px, transparent 1.7px); background-size: 40px 40px; }
.p-how { --pc: #488ECE; background-color: #ECF2FA; background-image: repeating-linear-gradient(115deg, rgba(72,142,206,.08) 0 2px, transparent 2px 24px); }
/* index.html 323-327 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* W10: plain text links (the only non-button call to action) */
.tlink { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #D44040; }
.tlink:hover { text-decoration-color: currentColor; } .tlink:focus-visible { outline: 3px solid #D44040; outline-offset: 2px; border-radius: 4px; }
.dark .tlink { color: #fff; }
/* index.html 329-329 */
.tri .k { display: block; font: 700 .75rem var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-sol-text,#B83434); margin-top: 6px; }
/* index.html 331-335 */
.cdt { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 48em) { .cdt { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.cdt li { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.cdt .n { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #D44040; color: #fff; display: grid; place-items: center; font: 700 1.4rem var(--font-heading); }
.cdt b { font: 700 1.1rem var(--font-heading); display: block; }
/* index.html 362-362 */
/* R4: layer label and team links */ .lyr { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* index.html 122-128 */
.sky { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
/* stars drift DOWN very slowly (3 depths); the ship drifts UP; the pair gives the feeling of rising */
.stars { position: absolute; left: 0; right: 0; top: -400px; height: calc(100% + 400px); background-repeat: repeat; will-change: transform; }
.stars--1 { background-image: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.8), transparent 60%), radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,.6), transparent 60%), radial-gradient(1px 1px at 260px 200px, rgba(255,255,255,.7), transparent 60%), radial-gradient(1px 1px at 90px 330px, rgba(255,255,255,.55), transparent 60%); background-size: 400px 400px; animation: down 160s linear infinite; }
.stars--2 { background-image: radial-gradient(1.5px 1.5px at 60px 70px, rgba(255,236,190,.9), transparent 60%), radial-gradient(1.5px 1.5px at 230px 250px, rgba(255,255,255,.85), transparent 60%), radial-gradient(1.5px 1.5px at 330px 40px, rgba(255,226,170,.8), transparent 60%); background-size: 400px 400px; animation: down 110s linear infinite; }
.stars--3 { background-image: radial-gradient(2.2px 2.2px at 120px 160px, rgba(255,244,214,.95), transparent 62%), radial-gradient(2.2px 2.2px at 310px 340px, rgba(255,255,255,.9), transparent 62%); background-size: 400px 400px; animation: down 70s linear infinite; }
@keyframes down { from { transform: translateY(0); } to { transform: translateY(400px); } }
/* index.html 164-165 */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 600; margin: 0 6px 6px 0; }
.chip--fn { background: var(--fd); color: #fff; }               /* DL-04a: inverted, deep step, white text */