/* Run Carmelian — design system (Plus Jakarta Sans + Inter, light & modern) */
:root{
  --bg:#FBFAF6; --surface:#FFFFFF; --surface-2:#F5F1E9;
  --ink:#1C1A16; --ink-soft:#5A554B; --ink-faint:#948C7D;
  --brand:#3E241A;
  --gold:#B67F12; --gold-bright:#E0A320;
  --primary:#E4572E; --primary-press:#C6441F; --on-primary:#FFFFFF;
  --line:rgba(28,26,22,.10); --line-strong:rgba(28,26,22,.18);
  --ring:rgba(228,87,46,.28);
  --ok:#3F7A46; --ok-bg:rgba(63,122,70,.12);
  --warn:#B67F12; --warn-bg:rgba(182,127,18,.14);
  --err:#C6441F; --err-bg:rgba(198,68,31,.12);
  --shadow-sm:0 1px 2px rgba(28,26,22,.05),0 2px 8px rgba(28,26,22,.05);
  --shadow-md:0 8px 30px rgba(28,26,22,.09);
  --shadow-lg:0 24px 60px rgba(28,26,22,.14);
  --radius:20px;
  --disp:'Plus Jakarta Sans',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15120D; --surface:#1E1A13; --surface-2:#241E15;
    --ink:#F3EEE3; --ink-soft:#C3BBAB; --ink-faint:#8C8371;
    --brand:#F3EEE3;
    --gold:#E7AE3C; --gold-bright:#F3C264;
    --primary:#F0714C; --primary-press:#D95C39; --on-primary:#1C1108;
    --line:rgba(243,238,227,.12); --line-strong:rgba(243,238,227,.22);
    --ring:rgba(240,113,76,.4);
    --ok:#7FB888; --ok-bg:rgba(127,184,136,.16);
    --warn:#E7AE3C; --warn-bg:rgba(231,174,60,.16);
    --err:#F0714C; --err-bg:rgba(240,113,76,.16);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 10px 34px rgba(0,0,0,.45);
    --shadow-lg:0 28px 64px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#15120D; --surface:#1E1A13; --surface-2:#241E15;
  --ink:#F3EEE3; --ink-soft:#C3BBAB; --ink-faint:#8C8371;
  --brand:#F3EEE3;
  --gold:#E7AE3C; --gold-bright:#F3C264;
  --primary:#F0714C; --primary-press:#D95C39; --on-primary:#1C1108;
  --line:rgba(243,238,227,.12); --line-strong:rgba(243,238,227,.22);
  --ring:rgba(240,113,76,.4);
  --ok:#7FB888; --ok-bg:rgba(127,184,136,.16);
  --warn:#E7AE3C; --warn-bg:rgba(231,174,60,.16);
  --err:#F0714C; --err-bg:rgba(240,113,76,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 34px rgba(0,0,0,.45);
  --shadow-lg:0 28px 64px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:800;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.eyebrow{font-size:.76rem;font-weight:700;color:var(--primary);display:inline-flex;align-items:center;gap:.5rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--primary);border-radius:2px}
.num{font-variant-numeric:tabular-nums}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
svg.i{width:1em;height:1em;fill:currentColor;flex:none}
main{flex:1 0 auto;width:100%}

.wrap{max-width:1140px;margin:0 auto;padding:0 24px;width:100%}
.narrow{max-width:560px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--disp);font-weight:700;font-size:.95rem;padding:.8rem 1.35rem;border-radius:12px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn svg.i{font-size:1.1rem}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:0 6px 16px rgba(228,87,46,.28)}
.btn-primary:hover{background:var(--primary-press);transform:translateY(-2px);box-shadow:0 12px 26px rgba(228,87,46,.34)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-block{width:100%}
.btn-sm{padding:.55rem .9rem;font-size:.85rem;border-radius:10px}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
header.nav.scrolled{border-color:var(--line);box-shadow:var(--shadow-sm)}
/* min-height, not height: "Mater Carmeli School of Novaliches" wraps to two
   lines on a narrow phone, and a fixed height would clip the second one. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:70px;padding-block:8px;gap:16px}
.nav-links{display:none;align-items:center;gap:4px}
@media(min-width:880px){.nav-links{display:flex}}
.nav-links a{color:var(--ink-soft);font-weight:500;font-size:.92rem;padding:.5rem .85rem;border-radius:9px}
.nav-links a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.nav-cta{display:flex;gap:8px;align-items:center}
.brand{display:flex;align-items:center;gap:11px;background:none;border:0;text-decoration:none}
.brand:hover{text-decoration:none}
.crest{width:38px;height:38px;flex:none;border-radius:10px;display:block}
.brand .txt{font-family:var(--disp);font-weight:800;font-size:1rem;letter-spacing:-.02em;color:var(--ink);text-align:left;line-height:1.1}
.brand .txt small{display:block;font-family:var(--body);font-weight:500;font-size:.62rem;letter-spacing:.04em;color:var(--ink-faint);margin-top:2px}
/* The full school name is long enough to wrap on a narrow phone. Let it, and
   let the brand shrink to make room — .nav-inner is min-height, so the second
   line grows the bar instead of being clipped. */
.brand{min-width:0}
.brand .txt small{text-wrap:balance}
.navlink{color:var(--ink-soft);font-family:var(--disp);font-weight:600;font-size:.92rem;padding:.55rem .9rem;border-radius:9px;background:none;border:0;cursor:pointer}
.navlink:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.hide-mobile{display:none}
@media(min-width:880px){.hide-mobile{display:inline-flex}}
/* The inverse: only on mobile, where the desktop nav links are hidden. */
.only-mobile{display:inline-flex}
@media(min-width:880px){.only-mobile{display:none}}

/* messages */
.messages{max-width:1140px;margin:18px auto 0;padding:0 24px;display:grid;gap:10px}
.msg{padding:.85rem 1.1rem;border-radius:12px;font-size:.92rem;font-weight:500;line-height:1.5;border:1px solid var(--line)}
.msg a{font-weight:600}
.msg.success{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.msg.warning{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.msg.error{background:var(--err-bg);color:var(--err);border-color:color-mix(in srgb,var(--err) 30%,transparent)}
.msg.info{background:var(--surface-2);color:var(--ink-soft)}

/* HERO */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 78% 8%,rgba(224,163,32,.16),transparent 60%),radial-gradient(60% 55% at 6% 92%,rgba(228,87,46,.10),transparent 62%);pointer-events:none;transform:translateY(var(--par,0))}
/* padding-block, not the padding shorthand: .hero-inner shares specificity with
   .wrap, so a shorthand here would zero out .wrap's 24px inline padding and the
   hero would sit flush against the screen edge on mobile. */
.hero-inner{position:relative;display:grid;gap:48px;align-items:center;padding-block:72px 84px}
@media(min-width:900px){.hero-inner{grid-template-columns:1.08fr .92fr}}
.badge-pill{display:inline-flex;align-items:center;gap:.55rem;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--ink-soft);padding:.4rem .8rem .4rem .5rem;border-radius:999px;font-size:.78rem;font-weight:600;width:max-content}
.badge-pill .yr{background:var(--gold-bright);color:#3A2A08;font-family:var(--disp);font-weight:800;font-size:.72rem;padding:.15rem .5rem;border-radius:999px}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);color:var(--ink);margin:22px 0 20px}
.hero h1 .grad{background:linear-gradient(100deg,var(--primary),var(--gold-bright));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(1.05rem,2.1vw,1.25rem);color:var(--ink-soft);max-width:44ch;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-meta .stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow-sm)}
.hero-meta .stat .n{font-family:var(--disp);font-weight:800;font-size:1.35rem;color:var(--ink)}
.hero-meta .stat .l{font-size:.72rem;color:var(--ink-faint);margin-top:2px;font-weight:500}
.hero-badge{position:relative;aspect-ratio:1/1;border-radius:28px;background:linear-gradient(160deg,var(--surface),var(--surface-2));border:1px solid var(--line);box-shadow:var(--shadow-lg);display:grid;place-items:center;padding:32px;overflow:hidden}
.hero-badge img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1}
.hero-badge::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 20%,rgba(224,163,32,.14),transparent 60%)}
.badge-slot{position:relative;text-align:center;color:var(--ink-faint)}
.badge-slot .ring{width:150px;height:150px;margin:0 auto 18px;border-radius:50%;border:2px dashed var(--line-strong);display:grid;place-items:center;color:var(--gold-bright)}
.badge-slot .ring svg{width:64px;height:64px}
.badge-slot .cap{font-family:var(--disp);font-weight:700;color:var(--ink-soft);font-size:.95rem}
.badge-slot .sub{font-size:.8rem;margin-top:4px}
.float-chip{position:absolute;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);border-radius:14px;padding:.6rem .85rem;display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;font-family:var(--disp);z-index:2}
.float-chip svg.i{color:var(--primary);font-size:1.1rem}
.float-chip.c1{top:22px;left:-14px;animation:floaty 4s ease-in-out infinite}
.float-chip.c2{bottom:26px;right:-12px;animation:floaty 4s ease-in-out infinite .8s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

section.band{padding:88px 0}
.sec-head{display:grid;gap:14px;max-width:640px;margin-bottom:48px}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);color:var(--ink)}
.sec-head p{color:var(--ink-soft);font-size:1.08rem}

/* categories */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:15px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.cat .dist{font-family:var(--disp);font-weight:800;font-size:2.2rem;color:var(--ink);line-height:1;letter-spacing:-.03em}
.cat .dist span{font-size:1rem;color:var(--ink-faint);font-weight:600;margin-left:2px}
.cat .cat-meta{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.04em}
.cat .cat-meta svg.i{font-size:.95rem}
.cat .cat-name{font-family:var(--disp);font-weight:800;font-size:1.35rem;line-height:1.15;color:var(--ink);letter-spacing:-.02em}
.cat .price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.cat .price .peso{font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--primary)}
.cat .price .sub{font-size:.72rem;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:var(--surface-2);padding:.2rem .5rem;border-radius:999px}
.cat ul{list-style:none;display:grid;gap:9px;font-size:.92rem;color:var(--ink-soft)}
.cat li{display:flex;gap:10px;align-items:flex-start}
.cat li svg.i{color:var(--gold);font-size:1.05rem;margin-top:2px}
.cat .tag{position:absolute;top:18px;right:18px;font-size:.64rem;font-weight:700;background:var(--primary);color:#fff;padding:.28rem .6rem;border-radius:999px;font-family:var(--disp)}
.cat .full-tag{background:var(--ink-faint)}
.cat.featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow-md)}
.cat .btn{margin-top:auto}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 24px;box-shadow:var(--shadow-sm)}
.step .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.step .ic{width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,color-mix(in srgb,var(--primary) 16%,transparent),color-mix(in srgb,var(--gold-bright) 20%,transparent));display:grid;place-items:center;color:var(--primary)}
.step .ic svg.i{font-size:1.45rem}
.step .no{font-family:var(--disp);font-weight:800;font-size:.78rem;color:var(--ink-faint)}
.step h3{font-size:1.1rem;margin-bottom:7px;color:var(--ink)}
.step p{font-size:.9rem;color:var(--ink-soft)}

/* progress track */
.motiv{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:44px;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.motiv::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 100% 0,rgba(224,163,32,.10),transparent 60%);pointer-events:none}
.motiv h2{color:var(--ink);font-size:clamp(1.6rem,3.4vw,2.3rem);margin:12px 0 10px}
.motiv p{color:var(--ink-soft);max-width:54ch}
.track-wrap{margin-top:38px;position:relative}
.track-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.track-top .cur{font-family:var(--disp);font-weight:800;font-size:1.7rem;color:var(--ink)}
.track-top .cur small{font-size:.95rem;color:var(--ink-faint);font-weight:600}
.track-top .goal{font-size:.8rem;color:var(--ink-faint);font-weight:600;background:var(--surface-2);padding:.3rem .7rem;border-radius:999px}
.track{position:relative;height:70px}
.track .rail{position:absolute;left:0;right:0;top:34px;height:14px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.track .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--gold-bright),var(--primary));transition:width 1.5s cubic-bezier(.4,.7,.2,1)}
.track .runner{position:absolute;top:0;left:0;color:var(--primary);filter:drop-shadow(0 4px 6px rgba(228,87,46,.3));transition:left 1.5s cubic-bezier(.4,.7,.2,1);z-index:2}
.track .runner svg{width:36px;height:36px;display:block;transform:translateX(-50%);animation:bob 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
.flags{position:absolute;left:0;right:0;top:0;height:100%}
/* Badges straddle the rail so a milestone reads as a marker on the route. */
.flag{position:absolute;top:30px;transform:translateX(-50%);text-align:center}
.flag .badge{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:var(--surface);border:2px solid var(--surface-2);color:var(--ink-faint);transition:background .4s,border-color .4s,color .4s}
.flag .badge svg{width:12px;height:12px;display:block;fill:currentColor}
.flag.done .badge{background:var(--gold-bright);border-color:var(--gold-bright);color:#3A2A08}
.flag.next .badge{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 5px var(--ring)}
.flag .ml{display:block;font-size:.66rem;color:var(--ink-faint);margin-top:6px;font-weight:600}
.flag.done .ml{color:var(--gold)}

/* Only the finish line animates. A track that moves everywhere at once reads as
   noise rather than progress, and the checkered flag means more for waiting. */
@keyframes wave{0%,100%{transform:skewX(0) translateY(0)}50%{transform:skewX(-11deg) translateY(-1px)}}
/* Faint until the finish is genuinely in sight, then it starts waving. */
.track.is-near .flag[data-at="100"] .badge{opacity:.62;border-color:color-mix(in srgb,var(--ink-faint) 45%,transparent)}
.track.is-near .flag[data-at="100"] .badge svg{animation:wave 1.8s ease-in-out infinite;transform-origin:0 50%}

@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
.track.is-finished .flag[data-at="100"] .badge{background:var(--ok);border-color:var(--ok);color:#fff;opacity:1;animation:pop .55s cubic-bezier(.2,1.5,.4,1) both}
.track.is-finished .flag[data-at="100"] .badge svg{animation:wave 1.1s ease-in-out infinite;transform-origin:0 50%}
.track.is-finished .flag[data-at="100"] .ml{color:var(--ok)}

/* Finisher celebration */
.finish-cheer{position:relative;margin-top:30px;display:flex;align-items:center;gap:14px;padding:1rem 1.25rem;border-radius:16px;border:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--gold-bright) 20%,transparent),color-mix(in srgb,var(--ok) 14%,transparent))}
.finish-cheer .cheer-flag{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.finish-cheer .cheer-flag svg{width:22px;height:22px;fill:currentColor;animation:wave 1.1s ease-in-out infinite;transform-origin:0 50%}
.finish-cheer .cheer-txt{display:grid;gap:2px}
.finish-cheer strong{font-family:var(--disp);font-weight:800;font-size:1.05rem;color:var(--ink)}
.finish-cheer span{font-size:.88rem;color:var(--ink-soft)}
/* A reached milestone replays its own celebration when clicked. celebrate.js
   adds .can-cheer, so the affordance only appears where the click works.
   Feedback is a ring rather than a scale — the 100% badge holds a transform
   from its pop animation, and a hover transform would be ignored there. */
.flag.can-cheer .badge{cursor:pointer}
.flag.can-cheer .badge:hover{box-shadow:0 0 0 4px var(--ring)}
.flag.can-cheer .badge:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* Runs once and settles — a looping celebration stops being one. */
.confetti{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;overflow:visible}
.confetti i{position:absolute;top:-6px;left:calc(var(--x) * 8.4%);width:7px;height:11px;border-radius:2px;opacity:0;background:var(--gold-bright);animation:confetti 2.4s cubic-bezier(.3,.5,.5,1) forwards;animation-delay:calc(var(--x) * .09s)}
.confetti i:nth-child(3n){background:var(--primary);width:6px;height:6px;border-radius:50%}
.confetti i:nth-child(3n+1){background:var(--ok)}
.confetti i:nth-child(4n){width:9px;height:4px}
@keyframes confetti{
  0%{opacity:0;transform:translateY(-4px) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translateY(96px) rotate(520deg)}
}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
.milestone-note{margin-top:28px;display:inline-flex;gap:10px;align-items:center;background:linear-gradient(120deg,color-mix(in srgb,var(--gold-bright) 16%,transparent),color-mix(in srgb,var(--primary) 12%,transparent));border:1px solid var(--line);color:var(--ink);padding:.7rem 1.05rem;border-radius:12px;font-size:.88rem;font-weight:600}
.milestone-note svg.i{font-size:1.2rem;color:var(--gold)}

/* footer */
footer.foot{flex-shrink:0;border-top:1px solid var(--line);padding:48px 0;color:var(--ink-soft);font-size:.9rem;background:var(--surface-2);margin-top:auto}
.foot-grid{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center}
.foot-grid .run-with{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:600}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* cards & forms (register/payment/auth/dashboard) */
.page{padding:56px 0 80px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:32px}
.card h1{font-size:1.7rem;color:var(--ink);margin-bottom:6px}
.card .sub{color:var(--ink-soft);margin-bottom:26px}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.field input,.field select,.field textarea{width:100%;padding:.82rem .95rem;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-family:var(--body);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.field .help{font-size:.78rem;color:var(--ink-faint)}
.field .err{font-size:.82rem;color:var(--err);font-weight:600}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}
.form-error{background:var(--err-bg);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 30%,transparent);padding:.7rem 1rem;border-radius:12px;margin-bottom:16px;font-size:.88rem;font-weight:500}

/* oauth buttons */
.oauth{display:grid;gap:10px}
.oauth a,.oauth button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:.82rem;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font-family:var(--disp);font-weight:600;font-size:.92rem;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;text-decoration:none}
.oauth a:hover,.oauth button:hover{background:var(--surface-2);border-color:var(--ink-faint);transform:translateY(-1px);text-decoration:none}
.oauth .ic{width:20px;height:20px;flex:none}
.divider{display:flex;align-items:center;gap:14px;color:var(--ink-faint);font-size:.78rem;margin:22px 0}
.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}
.auth-alt{text-align:center;margin-top:22px;font-size:.92rem;color:var(--ink-soft)}
.fineprint{font-size:.78rem;color:var(--ink-faint);margin-top:20px;line-height:1.55}

/* two-column auth layout */
.auth{min-height:calc(100vh - 70px);display:grid;grid-template-columns:1fr;align-items:stretch}
@media(min-width:900px){.auth{grid-template-columns:1.02fr .98fr}}
.auth-aside{position:relative;padding:56px 52px;display:none;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(155deg,#FFF7E9,#FBEFE0 55%,#F7E3D3);color:#3E241A}
@media(min-width:900px){.auth-aside{display:flex}}
.auth-aside::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 100% 0,rgba(228,87,46,.14),transparent 55%),radial-gradient(50% 45% at 0 100%,rgba(224,163,32,.2),transparent 60%)}
.auth-aside .inner{position:relative}
.auth-aside h2{font-size:2.4rem;color:#2A1710;margin:18px 0 14px;line-height:1.04}
.auth-aside p{color:#6a4b3a;max-width:34ch}
.aside-stats{display:flex;gap:30px;margin-top:26px}
.aside-stats .n{font-family:var(--disp);font-weight:800;font-size:1.7rem;color:#2A1710}
.aside-stats .l{font-size:.72rem;color:#7a5b48;font-weight:500}
.aside-logo{width:70px;height:70px;border-radius:18px;background:#fff;box-shadow:var(--shadow-md);display:grid;place-items:center;color:var(--gold);margin-bottom:8px}
.aside-logo svg{width:40px;height:40px}
.auth-form-wrap{display:grid;place-items:center;padding:52px 24px}
.auth-card{width:100%;max-width:400px}

/* Sign-up context band — shown above the form because the sign-up link is
   handed out directly and mobile users otherwise see a form with no context. */
.signup-intro{padding:40px 0 8px;border-bottom:1px solid var(--line)}
.signup-intro .wrap{max-width:760px}
.si-title{font-size:clamp(1.7rem,5vw,2.4rem);margin:10px 0 12px}
.si-lead{font-size:1.05rem;color:var(--ink-soft);max-width:60ch;margin-bottom:22px}
.si-facts{margin-bottom:24px}
/* On phones the four fact tiles push the sign-up form (and its Google/Facebook
   buttons) far down the page, so hide them there — the summary and links stay.
   Scoped under .signup-intro to outrank the later `.facts{display:grid}` rule. */
@media(max-width:640px){.signup-intro .si-facts{display:none}}
.si-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:18px;font-size:.92rem}
.si-links span{color:var(--ink-faint)}
.si-links a{font-weight:600}
.si-cue{margin-top:20px;text-align:center;font-family:var(--disp);font-weight:700;color:var(--primary)}

/* dashboard */
/* Single column since the bib moved out to its own full-width band above. */
.dash-grid{display:grid;gap:24px;grid-template-columns:1fr;margin-top:8px}
.dash-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end;margin-bottom:8px}
.dash-head h1{font-size:1.9rem;color:var(--ink)}
.dash-head .who{color:var(--ink-soft);margin-top:4px}
.status-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700;font-family:var(--disp)}
.status-pill.paid{background:var(--ok-bg);color:var(--ok)}
.status-pill.submitted{background:var(--warn-bg);color:var(--warn)}
.status-pill.pending{background:var(--surface-2);color:var(--ink-soft)}
.status-pill.rejected{background:var(--err-bg);color:var(--err)}
.status-pill.finished{background:var(--ok-bg);color:var(--ok)}

/* DIGITAL RACE BIB
   The artwork is fixed, so data is positioned on top of it in container units:
   1cqw is 1% of the card's own width, which keeps every element in register at
   any size without a single breakpoint. Coordinates mirror funrun/bib.py.
   Colours here are literal, not tokens — this text sits on printed artwork, so
   it must not follow the site's light/dark theme. */
.bib-band{container-type:inline-size;margin:20px 0 4px}
.bibcard{position:relative;container-type:inline-size;width:100%;max-width:900px;margin-inline:auto;aspect-ratio:1436/960;border-radius:2.2cqw;overflow:hidden;background:#F6E8D2;box-shadow:var(--shadow-md)}
.bibcard>.art{position:absolute;inset:0;width:100%;height:100%;display:block}
.bibcard .stack{position:absolute;left:41.6%;top:0;width:46%;height:100%;font-family:var(--disp);color:#3E241A}
/* Each line is placed on its own coordinate rather than stacked in flow: a
   shrunk long name must not push the batch line down into the painted pill.
   The tops are bib.py's Y constants plus half-leading — Pillow puts the top of
   the ascender at Y, CSS puts the top of the line box there, and the two differ
   by (ascent + descent - font-size) / 2. Compensating makes both renders land
   on the same pixels. */
.bibcard .stack>*{position:absolute;left:0;width:100%;text-align:center;line-height:1}
.bibcard .lbl{top:39.97%;font-size:2.09cqw;font-weight:700;letter-spacing:.42cqw;text-transform:uppercase;color:#8C6A52}
.bibcard .num{top:45.16%;font-size:max(38px,13.2cqw);font-weight:800;letter-spacing:-.02em}
.bibcard .num.locked{color:#B49A85}
/* font-size comes from the template — measured server-side with the same font
   and fit rule the PNG uses, so long names shrink identically in both. */
.bibcard .nm{top:66.28%;font-weight:800;white-space:nowrap}
.bibcard .bt{top:71.86%;font-size:1.67cqw;font-weight:600;letter-spacing:.25cqw;text-transform:uppercase;color:#8C6A52}
.bibcard .chip{position:absolute;left:52.79%;top:76.98%;width:23.68%;height:4.27%;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.88cqw;letter-spacing:.2cqw;white-space:nowrap;color:#FFF4E4}
/* Under 600px the painted pill is only ~17px tall — too small for real text.
   Hand those two lines off to .bib-facts below the card instead. */
@container (max-width:600px){.bibcard .lbl,.bibcard .bt,.bibcard .chip{display:none}}

.bib-facts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.bib-facts .fact{font-family:var(--disp);font-weight:700;font-size:.78rem;padding:.3rem .8rem;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
.bib-facts .fact.strong{background:var(--primary);color:var(--on-primary);border-color:transparent}
@container (min-width:600px){.bib-facts{display:none}}

.bib-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
/* On a phone the bib and the progress card otherwise run together with ~26px
   between them. The extra room separates the two, and pushes the track toward
   the fold so the bar fills as you scroll to it rather than before you've
   looked at it. */
@media(max-width:920px){
  .bib-actions{margin-bottom:36px}
  .dash-grid{margin-top:28px}
}

/* past seasons list */
.season-list{display:grid;gap:10px}
.season-row{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);text-decoration:none}
.season-row:hover{border-color:var(--line-strong);text-decoration:none}
.season-row .yr{font-family:var(--disp);font-weight:800}
.season-row .det{color:var(--ink-soft);font-size:.88rem}
.season-row .res{font-family:var(--disp);font-weight:700;font-size:.88rem;color:var(--ink-soft);justify-self:end}
@media(max-width:560px){.season-row{grid-template-columns:1fr;justify-items:start}.season-row .res{justify-self:start}}

/* runs table */
.runs{border-collapse:collapse;width:100%;font-size:.9rem}
.runs th{text-align:left;font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);padding:10px 12px;border-bottom:1px solid var(--line)}
.runs td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.runs td.km{font-family:var(--disp);font-weight:700;color:var(--ink)}
.run-status{font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:999px}
.run-status.verified{background:var(--ok-bg);color:var(--ok)}
.run-status.flagged{background:var(--warn-bg);color:var(--warn)}
.run-status.rejected{background:var(--err-bg);color:var(--err)}
.empty{color:var(--ink-faint);text-align:center;padding:32px;font-size:.92rem}
.table-wrap{overflow-x:auto}

/* tabs (submit run) */
.tabs{display:flex;gap:8px;background:var(--surface-2);padding:6px;border-radius:14px;margin-bottom:24px;width:max-content;max-width:100%}
.tab{padding:.6rem 1.1rem;border-radius:10px;border:0;background:transparent;color:var(--ink-soft);font-family:var(--disp);font-weight:700;font-size:.9rem;cursor:pointer}
.tab.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.dropzone{border:1.5px dashed var(--line-strong);border-radius:14px;padding:26px;text-align:center;color:var(--ink-faint);background:var(--surface-2)}
.ocr-hint{font-size:.82rem;color:var(--gold);font-weight:600;margin-top:6px;min-height:1.1em}
/* A distance we read off the screenshot: locked, and visibly so. */
.field input.is-read{background:var(--surface-2);color:var(--ink);font-weight:700;cursor:not-allowed}

.info-box{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:.9rem;color:var(--ink-soft);display:grid;gap:8px}
.info-box .row{display:flex;justify-content:space-between;gap:12px}
.info-box .row b{color:var(--ink);font-family:var(--disp)}

/* Waiver, release & acknowledgement (registration) */
.waiver{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;max-height:280px;overflow-y:auto;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.waiver-h{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--ink);margin:0 0 8px}
.waiver-intro{margin:0 0 10px}
.waiver-list{margin:0 0 12px;padding-left:1.2em;display:grid;gap:9px}
.waiver-list li{padding-left:.2em}
.waiver-list b,.waiver-minor b{color:var(--ink)}
.waiver-minor{margin:0;padding-top:10px;border-top:1px solid var(--line)}
.waiver-agree .check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;font-weight:500;color:var(--ink-soft);cursor:pointer;line-height:1.45}
.waiver-agree .check input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--primary);cursor:pointer}

/* Payment QR — shown for the selected method */
.qr-panel{margin:-4px 0 16px;display:grid;justify-items:center}
.qr-card{margin:0;display:grid;justify-items:center;gap:10px}
.qr-panel[hidden],.qr-card[hidden]{display:none}
.qr-card img{display:block;width:100%;max-width:300px;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.qr-card figcaption{font-size:.82rem;color:var(--ink-soft);text-align:center;max-width:340px;line-height:1.45}
.qr-empty{margin:0;font-size:.86rem;color:var(--ink-faint);text-align:center}

/* "Paying from outside the Philippines?" panel */
.intl-pay{margin:-12px 0 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.intl-pay>summary{list-style:none;cursor:pointer;padding:14px 18px;font-size:.9rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.intl-pay>summary::-webkit-details-marker{display:none}
.intl-pay>summary::before{content:"🌏";font-size:1rem}
.intl-pay>summary::after{content:"+";margin-left:auto;font-size:1.2rem;color:var(--ink-faint);font-weight:700}
.intl-pay[open]>summary::after{content:"–"}
.intl-pay .info-box{margin:0 14px 14px}
.intl-lead{margin:0 0 4px;font-size:.86rem;color:var(--ink-soft);line-height:1.45}

/* PRINT — used by the "Print bib" page. */
.print-page .print-head{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.print-page .print-head h1{font-size:1.9rem;color:var(--ink);margin-top:8px}
.print-hint{color:var(--ink-soft);font-size:.9rem;max-width:52ch;margin-top:8px}
.print-actions{display:flex;flex-wrap:wrap;gap:10px}

@media print{
  @page{size:landscape;margin:10mm}
  .nav,.foot,.messages,.no-print{display:none!important}
  body{background:#fff;display:block}
  main{flex:none}
  .page{padding:0}
  .wrap{max-width:none;padding:0}
  /* Browsers strip background art by default; the bib is nothing without it. */
  .bibcard,.bibcard *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bibcard{max-width:100%;box-shadow:none;border-radius:0;break-inside:avoid}
  /* The sheet is far wider than 600px, so the painted pill has room for its
     own text and the fallback chips are not needed on paper. */
  .bib-facts{display:none!important}
}

:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* LEGAL PAGES (privacy, terms) */
/* padding-block only — .legal shares specificity with .wrap, and a padding
   shorthand here would wipe out .wrap's inline padding. */
.legal{max-width:768px;padding-block:8px 8px}
.legal h1{font-size:clamp(2.1rem,4.6vw,3rem);color:var(--ink);margin:10px 0 6px}
.legal .updated{color:var(--ink-faint);font-size:.9rem;margin-bottom:34px}
.legal h2{font-size:1.3rem;color:var(--ink);margin:40px 0 12px;scroll-margin-top:90px}
.legal p{color:var(--ink-soft);line-height:1.72;margin-bottom:14px}
.legal ul{margin:0 0 18px;padding-left:22px}
.legal li{color:var(--ink-soft);line-height:1.7;margin-bottom:8px}
.legal strong{color:var(--ink);font-weight:650}
.legal a{color:var(--primary);text-underline-offset:3px}
.legal table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:.93rem}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal thead th{color:var(--ink);font-weight:650;background:var(--surface)}
.legal td{color:var(--ink-soft);line-height:1.62}
.legal tbody td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
@media(max-width:560px){
  .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block}
  .legal thead{display:none}
  .legal tr{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
  .legal td{border:0;padding:2px 0}
  .legal tbody td:first-child{white-space:normal;margin-bottom:4px}
}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--ink-soft);font-size:.9rem;font-weight:500}
.foot-links a:hover{color:var(--primary)}

/* ===== Event Info (raceroster-style sidebar + sections) ===== */
.event-info{padding-top:64px}
.info-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
@media(min-width:900px){.info-layout{grid-template-columns:230px minmax(0,1fr);gap:48px}}
.info-nav{position:static;min-width:0}
@media(min-width:900px){.info-nav{position:sticky;top:88px}}
.info-nav-inner{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm)}
.info-nav .eyebrow{margin:4px 8px 8px}
.info-link{padding:.6rem .8rem;border-radius:10px;color:var(--ink-soft);font-weight:600;font-size:.92rem;font-family:var(--disp);border-left:3px solid transparent}
.info-link:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.info-link.active{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);border-left-color:var(--primary)}
.info-register{margin-top:10px}
/* Desktop shows the full label; mobile swaps to the short one (below). */
.lbl-short{display:none}
/* Mobile: sidebar becomes a scrollable chip row that sticks under the header */
@media(max-width:899px){
  .info-nav{position:sticky;top:70px;z-index:20;min-width:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
  .info-nav-inner{flex-direction:row;overflow-x:auto;gap:8px;padding:12px;box-shadow:var(--shadow-sm)}
  .info-nav .eyebrow,.info-register{display:none}
  /* Categories has its own full-width band above; drop it from the mobile chips
     and use short labels so the row stays tidy. The "Register" chip (which only
     scrolls to the poster) is dropped too — the header Register button covers it. */
  .info-nav .cat-link,.info-nav .poster-nav{display:none}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .info-link{white-space:nowrap;border-left:0;border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;font-size:.85rem}
  .info-link.active{border-color:var(--primary)}
}
.info-content{min-width:0}
.info-block{scroll-margin-top:92px;padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line)}
/* Mobile: clear the 70px header AND the sticky chip row, so a jumped-to heading
   lands below them. Must sit after the base rule above — equal specificity, so
   source order decides. */
@media(max-width:899px){.info-block{scroll-margin-top:134px}}
.info-block:last-child{border-bottom:0;margin-bottom:0}
.info-block h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ink);margin:10px 0 16px}
.info-lead{color:var(--ink-soft);font-size:1.05rem;max-width:62ch;margin-bottom:24px}

.aims{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.aim{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm)}
.aim .ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,color-mix(in srgb,var(--primary) 16%,transparent),color-mix(in srgb,var(--gold-bright) 20%,transparent));display:grid;place-items:center;color:var(--primary);margin-bottom:12px}
.aim .ic svg.i{font-size:1.35rem}
.aim h3{font-size:1.05rem;color:var(--ink);margin-bottom:6px}
.aim p{font-size:.9rem;color:var(--ink-soft)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.fact{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.fact svg.i{color:var(--gold);font-size:1.3rem;flex:none;margin-top:2px}
.fact b{display:block;color:var(--ink);font-family:var(--disp);font-size:.98rem}
.fact span{font-size:.82rem;color:var(--ink-faint)}

.mech-poster{display:block;margin:0 0 22px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.mech-poster img{display:block;width:100%;height:auto}
.mech{display:grid;gap:14px}
.mech-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.mech-item h3{display:flex;align-items:center;gap:.6rem;font-size:1.08rem;color:var(--ink);margin-bottom:8px}
.mech-item h3 svg.i{color:var(--primary);font-size:1.2rem;flex:none}
.mech-item p{font-size:.94rem;color:var(--ink-soft)}

.merch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:14px}
.merch-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.merch-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.merch-media{aspect-ratio:1/1;background:linear-gradient(160deg,var(--surface-2),color-mix(in srgb,var(--gold-bright) 8%,var(--surface-2)));display:grid;place-items:center;overflow:hidden}
.merch-media img{width:100%;height:100%;object-fit:cover}
.merch-ph{color:var(--gold);opacity:.7}
.merch-ph svg.i{font-size:2.6rem}
.merch-name{padding:12px 14px;font-family:var(--disp);font-weight:700;font-size:.9rem;color:var(--ink);text-align:center}

.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:var(--disp);font-weight:700;font-size:.98rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);transform:rotate(45deg);transition:transform .2s;flex:none;margin-top:-4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq details[open] summary{color:var(--primary)}
.faq summary:hover{background:var(--surface-2)}
.faq p{padding:0 20px 18px;font-size:.94rem;color:var(--ink-soft);line-height:1.6}

/* Registration: rate options + live price */
.pricing-options{display:flex;gap:10px;flex-wrap:wrap}
.pricing-opt{flex:1;min-width:150px;display:flex;align-items:center;gap:9px;border:1.5px solid var(--line-strong);border-radius:12px;padding:.7rem .9rem;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:.92rem;background:var(--surface);color:var(--ink)}
.pricing-opt input{accent-color:var(--primary);width:18px;height:18px;flex:none}
.pricing-opt:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--primary)}
.price-summary{margin-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.75rem 1rem}
.price-summary .lbl{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.price-summary .amt{font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--primary)}

.cat .cat-note{font-size:.78rem;color:var(--gold);font-weight:600;margin-top:-4px}

/* Kit inclusions artwork under the category dropdown — deliberately compact */
.cat-inclusions{margin:-6px 0 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem}
.cat-inclusions .lbl{display:block;font-size:.72rem;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.cat-inclusions a{display:block;cursor:zoom-in}
.cat-inclusions img{display:block;margin:0 auto;max-width:100%;max-height:240px;width:auto;height:auto;border-radius:8px}

/* Size charts under the singlet / finisher shirt size fields — collapsed by default */
.size-charts{margin:-6px 0 14px;display:flex;flex-direction:column;gap:6px}
.size-charts details{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:.45rem .8rem}
.size-charts summary{cursor:pointer;font-size:.8rem;color:var(--ink-soft);font-weight:600}
.size-charts img{display:block;margin:8px auto 4px;max-width:100%;height:auto;border-radius:8px}

/* Verbatim mechanics blocks (multi-paragraph + lists) */
.mech-item p + p{margin-top:10px}
.mech-item ul{margin:10px 0;padding-left:20px;font-size:.94rem;color:var(--ink-soft)}
.mech-item li{margin:4px 0}
/* FAQ groups + rich answers */
.faq-group{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--gold);margin:26px 0 10px}
.faq-group:first-child{margin-top:0}
.faq-a{padding:2px 20px 18px;font-size:.94rem;color:var(--ink-soft);line-height:1.6}
.faq-a p{margin:0}
.faq-a p + p{margin-top:8px}
.faq-a ul{margin:8px 0 0;padding-left:20px}
.faq-a li{margin:3px 0}

/* Race kit gallery (official artwork) + registration poster */
/* A responsive grid, not one full-width column: the inclusion cards are ~432px
   squares, so showing them near native size keeps them crisp (2-up on desktop,
   single column on a phone). */
.racekit-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.racekit-figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.racekit-figure img{display:block;width:100%;height:auto}
.racekit-figure figcaption{padding:12px 16px;font-family:var(--disp);font-weight:700;font-size:.9rem;color:var(--ink);border-top:1px solid var(--line)}
.racekit-ph{aspect-ratio:3/4;display:grid;place-items:center;gap:10px;background:linear-gradient(160deg,var(--surface-2),color-mix(in srgb,var(--gold-bright) 8%,var(--surface-2)));color:var(--gold);text-align:center;padding:20px}
.racekit-ph svg.i{font-size:2.6rem;opacity:.7}
.racekit-ph span{font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--ink-soft)}

.poster-block{display:grid;gap:14px;justify-items:start}
.poster-h{font-family:var(--disp);font-weight:800;font-size:1.35rem;color:var(--ink)}
.poster-link{display:block;width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.poster-link img{display:block;width:100%;height:auto}