/* TradePace website v2 – store-listing style: navy, amber, Big Shoulders headlines, Poppins body.
   Homepage first, then the inner pages (giveaways, rules, legal…) at the bottom of this file. */
@font-face{font-family:"Big Shoulders";font-weight:800;font-display:swap;src:url(fonts/BigShoulders-800.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/Poppins-400.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/Poppins-500.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(fonts/Poppins-700.woff) format("woff")}

:root{
  --navy:#1E293B; --navy-d:#0D1320; --navy-m:#16202F; --line:#2B3A52;
  --amber:#F59E0B; --amber-d:#D97F06;
  --white:#fff; --text:#E2E8F0; --mist:#A9B6C8; --paper:#F4F1EA; --ink:#1E293B;
  --head:"Big Shoulders","Arial Narrow",Impact,sans-serif;
  --body:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:20px; --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--navy-d);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.6}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.amb{color:var(--amber)}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--navy-d);padding:8px 14px;border-radius:8px;z-index:20;font-weight:700}
.skip:focus{left:8px}

/* headings */
.big{font-family:var(--head);font-weight:800;line-height:.95;letter-spacing:-.003em;margin:0;font-size:clamp(44px,11vw,84px)}
.big span{display:block}
.mid{font-family:var(--head);font-weight:800;line-height:.98;margin:0;font-size:clamp(34px,8vw,52px)}
.kicker{display:inline-block;color:var(--amber);border:2px solid var(--amber);border-radius:999px;font-weight:500;font-size:13px;padding:5px 14px;margin:0 0 18px}
.sub{color:var(--text);font-size:17px;margin:18px 0 0;max-width:36em}

/* header */
.site-header{position:absolute;inset:0 0 auto 0;z-index:5;padding:14px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{font-family:var(--head);font-weight:800;font-size:26px;letter-spacing:.01em}
.nav{display:flex;gap:18px;font-size:14px;font-weight:500}
.nav a{text-decoration:none;opacity:.92}
.nav a:hover{color:var(--amber)}
.nav .hide-sm{display:none}
@media(min-width:760px){.nav .hide-sm{display:inline}}

/* store buttons */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.store{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border:1.5px solid rgba(255,255,255,.55);border-radius:12px;padding:9px 18px 9px 14px;text-decoration:none;min-width:178px}
.store:hover{border-color:var(--amber)}
.store svg{width:24px;height:24px;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.1}
.store small{font-size:11px;opacity:.85}
.store strong{font-size:18px;font-weight:700}
.store-note{font-size:14px;color:var(--mist);margin:14px 0 0}
.store-note b{color:var(--amber);font-weight:700}

/* tick bubble (same as the store frames) */
.bubble{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:999px;padding:10px 18px 10px 10px;font-weight:500;font-size:15px;box-shadow:0 14px 30px rgba(0,0,0,.35);white-space:nowrap}
.bubble i{width:26px;height:26px;border-radius:50%;background:var(--amber);display:grid;place-items:center;flex:none}
.bubble i::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 3px 3px;transform:translateY(-1px) rotate(-45deg)}

/* ── HERO ── */
.hero{position:relative;overflow:hidden;padding:96px 0 0;
  background:radial-gradient(900px 500px at 85% 30%,rgba(245,158,11,.10),transparent 60%),linear-gradient(180deg,var(--navy) 0%,var(--navy) 35%,var(--navy-d) 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:44px 44px}
.hero .grid{position:relative;display:grid;gap:44px;padding-bottom:56px}
.hero h1{font-family:var(--head);font-weight:800;line-height:.92;letter-spacing:-.005em;margin:0;font-size:clamp(52px,13.6vw,112px)}
.hero h1 span{display:block;white-space:nowrap}
.lead{font-size:17px;line-height:1.6;color:var(--text);margin:22px 0 0;max-width:34em}
.lead + .lead{margin-top:12px}
.lead strong{color:#fff}
.phone{position:relative;width:min(300px,78vw);aspect-ratio:9/16;border-radius:40px;background:#0B0F17;padding:10px;box-shadow:0 0 0 2px #2E3A4F,0 30px 60px rgba(0,0,0,.5)}
.phone video{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:31px;background:var(--navy)}
.hero .phone-wrap{position:relative;justify-self:center;margin-bottom:10px}
.hero .phone{transform:rotate(3deg)}
.hero .bubble{position:absolute;left:-28px;bottom:70px;transform:rotate(-2deg)}
@media(min-width:900px){
  .hero{padding-top:120px}
  .hero .grid{grid-template-columns:1.25fr .75fr;align-items:center;gap:30px;padding-bottom:80px}
  .hero .phone{width:320px}
  .hero .bubble{left:-90px;bottom:90px}
}

/* ── tape-measure proof strip ── */
.tape{position:relative;background:var(--amber);color:var(--navy-d);padding:22px 0 16px}
.tape::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;opacity:.85;
  background:repeating-linear-gradient(90deg,var(--navy-d) 0 2px,transparent 2px 100px) 0 0/100% 14px no-repeat,
             repeating-linear-gradient(90deg,var(--navy-d) 0 1.5px,transparent 1.5px 50px) 0 0/100% 9px no-repeat,
             repeating-linear-gradient(90deg,var(--navy-d) 0 1px,transparent 1px 10px) 0 0/100% 5px no-repeat}
.tape .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px}
.stat b{display:block;font-family:var(--head);font-weight:800;font-size:40px;line-height:.95}
.stat span{font-size:13px;font-weight:500;line-height:1.3;display:block}
.tape .claim{grid-column:1/-1;font-family:var(--head);font-weight:800;font-size:28px;line-height:1;text-transform:uppercase;border-top:2px solid rgba(13,19,32,.25);padding-top:12px;margin:4px 0 0}
@media(min-width:900px){.tape .wrap{grid-template-columns:auto auto auto 1fr;gap:12px 48px;align-items:end}.stat b{font-size:52px}.tape .claim{grid-column:auto;border:0;padding:0;margin:0;text-align:right;font-size:34px}}

/* ── the old way (paper section) ── */
.oldway{background:var(--paper);color:var(--ink);padding:64px 0}
.oldway .wrap{display:grid;gap:34px;align-items:center}
.oldway .big{color:var(--navy-d)}
.oldway .big .amb{color:var(--amber-d)}
.oldway p{font-size:17px;margin:18px 0 0;max-width:34em;color:#334155}
.oldway p strong{color:var(--navy-d)}
.polaroid{background:#fff;padding:12px 12px 46px;box-shadow:0 18px 40px rgba(13,19,32,.22);transform:rotate(-2.5deg);max-width:420px;justify-self:center;position:relative}
.polaroid img{width:100%;height:auto}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-weight:500;font-size:14px;color:#475569}
@media(min-width:900px){.oldway{padding:96px 0}.oldway .wrap{grid-template-columns:1fr 1.1fr;gap:70px}.oldway .polaroid{order:-1}}

/* ── how it works: the 8 store headlines ── */
.how{padding:72px 0 20px;background:linear-gradient(180deg,var(--navy-d),var(--navy) 18%,var(--navy) 82%,var(--navy-d))}
.how-intro{margin-bottom:28px}
.step{display:grid;gap:26px;align-items:center;padding:34px 0}
.step + .step{border-top:1px solid rgba(255,255,255,.07)}
.step .shot{justify-self:center;width:min(380px,92vw);filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
.step .shot img{width:100%;height:auto;border-radius:22px}
.step .num{font-family:var(--head);font-weight:800;font-size:18px;color:var(--amber);letter-spacing:.08em;margin:0 0 6px}
.step h3{font-family:var(--head);font-weight:800;font-size:clamp(44px,11vw,76px);line-height:.92;margin:0}
.step h3 span{display:block}
.step p{color:var(--text);font-size:17px;margin:16px 0 0;max-width:32em}
.step ul{margin:16px 0 0;padding:0;list-style:none;color:var(--text)}
.step li{position:relative;padding-left:30px;margin:8px 0}
.step li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--amber)}
.step li::after{content:"";position:absolute;left:5px;top:10px;width:7px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.step .small{font-size:14px;color:var(--mist)}
@media(min-width:900px){
  .how{padding:110px 0 40px}
  .step{grid-template-columns:1fr 1fr;gap:70px;padding:60px 0}
  .step:nth-of-type(even) .shot{order:2}
  .step .shot{width:400px}
}

/* ── trades ── */
.trades-sec{background:var(--paper);color:var(--ink);padding:64px 0}
.trades-sec .wrap{display:grid;gap:34px;align-items:center}
.trades-sec .big{color:var(--navy-d)}
.trades-sec .big .amb{color:var(--amber-d)}
.trades-sec p{font-size:17px;color:#334155;margin:18px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{background:var(--navy);color:#fff;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500}
.photo{margin:0;position:relative}
.photo img{width:100%;height:auto;border-radius:18px;box-shadow:0 18px 40px rgba(13,19,32,.25)}
.photo .bubble{position:absolute;left:-6px;bottom:22px;transform:rotate(-2deg);font-size:14px}
@media(min-width:900px){.trades-sec{padding:96px 0}.trades-sec .wrap{grid-template-columns:1.1fr 1fr;gap:70px}.trades-sec .photo .bubble{left:-40px}}

/* ── banner: built on the tools ── */
.banner{position:relative;min-height:420px;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-d)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,19,32,.15) 0%,rgba(13,19,32,.35) 45%,rgba(13,19,32,.95) 100%)}
.banner .wrap{position:relative;z-index:2;width:100%;padding-bottom:40px}
.banner .big{text-shadow:0 4px 30px rgba(0,0,0,.4)}
@media(min-width:900px){.banner{min-height:560px}.banner .wrap{padding-bottom:64px}}

/* ── story ── */
.story{padding:56px 0 72px;background:var(--navy-d)}
.story .wrap{display:grid;gap:40px;align-items:start}
.story p{color:var(--text);font-size:17px;margin:0 0 16px;max-width:34em}
.story p.big-line{font-family:var(--head);font-weight:800;font-size:clamp(30px,7vw,42px);line-height:1.02;color:#fff}
.story .sig{color:var(--amber);font-weight:700}
.story .pair{position:relative;max-width:460px;justify-self:center;width:100%;padding-bottom:60px}
.story .pair img{height:auto;border-radius:16px;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.story .pair .a{width:78%;transform:rotate(-2deg)}
.story .pair .b{position:absolute;right:0;bottom:0;width:52%;border:6px solid var(--navy-d);transform:rotate(3deg)}
.story .pair .bubble{position:absolute;left:4%;bottom:6px;font-size:14px;transform:rotate(-2deg);z-index:2}
@media(min-width:900px){.story{padding:90px 0 110px}.story .wrap{grid-template-columns:1.1fr 1fr;gap:80px}}

/* ── pricing ── */
.pricing{background:var(--navy);padding:72px 0}
.plans{display:grid;gap:18px;margin-top:30px}
.plan{position:relative;background:var(--navy-m);border:1.5px solid var(--line);border-radius:22px;padding:26px 24px}
.plan h3{font-family:var(--head);font-weight:800;font-size:40px;line-height:1;margin:0}
.plan .price{margin:10px 0 0;color:var(--text)}
.plan .price strong{font-family:var(--head);font-weight:800;font-size:44px;color:#fff;line-height:1}
.plan.pro{border-color:var(--amber);background:linear-gradient(180deg,rgba(245,158,11,.10),var(--navy-m) 40%)}
.plan .tag{position:absolute;top:-14px;right:20px;background:var(--amber);color:var(--navy-d);font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px}
.ticks{list-style:none;padding:0;margin:18px 0 0;color:var(--text)}
.ticks li{position:relative;padding-left:30px;margin:9px 0}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--amber)}
.ticks li::after{content:"";position:absolute;left:5px;top:9px;width:7px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.small-print{font-size:13px;color:var(--mist);margin:22px 0 0;max-width:60em}
@media(min-width:900px){.pricing{padding:110px 0}.plans{grid-template-columns:1fr 1fr;gap:26px}}

/* ── giveaways ── */
.gw{background:var(--amber);color:var(--navy-d);padding:52px 0}
.gw .wrap{display:grid;gap:22px;align-items:center}
.gw .mid{color:var(--navy-d)}
.gw p{margin:12px 0 0;font-size:17px;max-width:40em}
.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:12px;padding:14px 22px;border:0;cursor:pointer;font-family:var(--body);font-size:16px}
.btn-navy{background:var(--navy-d);color:#fff}
.btn-navy:hover{background:var(--navy)}
@media(min-width:900px){.gw .wrap{grid-template-columns:1fr auto;gap:40px}}

/* ── help ── */
.help{background:var(--paper);color:var(--ink);padding:72px 0}
.help .wrap{display:grid;gap:40px}
.help .mid{color:var(--navy-d)}
.help .intro{color:#334155;margin:12px 0 22px}
.faq details{background:#fff;border-radius:14px;margin:0 0 10px;box-shadow:0 2px 0 rgba(13,19,32,.06)}
.faq summary{cursor:pointer;list-style:none;padding:16px 46px 16px 18px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:24px;color:var(--amber-d);font-weight:500}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 18px 16px;color:#334155}
.form-card{background:var(--navy);color:#fff;border-radius:22px;padding:26px 22px}
.form-card h3{font-family:var(--head);font-weight:800;font-size:36px;line-height:1;margin:0}
.form-card > p{color:var(--text);margin:8px 0 18px}
.field{margin:0 0 14px}
.field label{display:block;font-size:14px;font-weight:500;margin:0 0 6px}
.field .opt{color:var(--mist);font-weight:400}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:2px solid transparent;border-radius:10px;padding:11px 12px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber);outline:none}
.field textarea{min-height:130px;resize:vertical}
.row2{display:grid;gap:0 14px}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.form-card .btn{background:var(--amber);color:var(--navy-d)}
.form-card .btn:hover{background:#FBB437}
.form-note,.email-line{font-size:13px;color:var(--mist);margin:12px 0 0}
.form-note a{color:var(--amber)}
.hp{position:absolute;left:-9999px}
@media(min-width:900px){.help{padding:110px 0}.help .wrap{grid-template-columns:1.1fr 1fr;gap:60px}}

/* ── closing CTA ── */
.closer{position:relative;overflow:hidden;padding:110px 0 70px;min-height:620px;display:flex;align-items:flex-end}
.closer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.closer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,19,32,.25) 0%,rgba(13,19,32,.55) 40%,rgba(13,19,32,.96) 78%)}
.closer .wrap{position:relative;z-index:2;width:100%}
@media(min-width:900px){.closer{min-height:720px;align-items:center;padding:110px 0}
  .closer::after{background:linear-gradient(90deg,rgba(13,19,32,.96) 0%,rgba(13,19,32,.85) 38%,rgba(13,19,32,.2) 70%,rgba(13,19,32,.05) 100%)}}

/* ── follow + footer ── */
.follow{background:var(--navy-d);padding:40px 0;border-top:1px solid var(--line)}
.follow .wrap{display:grid;gap:18px;align-items:center}
.follow h2{font-family:var(--head);font-weight:800;font-size:34px;margin:0;line-height:1}
.follow p{color:var(--mist);margin:6px 0 0}
.follow-links{display:flex;flex-wrap:wrap;gap:10px}
.follow-links a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500}
.follow-links a:hover{border-color:var(--amber);color:var(--amber)}
.follow-links svg,.social svg{width:18px;height:18px;fill:currentColor}
@media(min-width:900px){.follow .wrap{grid-template-columns:1fr auto}}
.site-footer{background:#090D16;color:var(--mist);font-size:13px;padding:30px 0 40px}
.site-footer .wrap{display:grid;gap:16px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:16px}
.site-footer nav a{text-decoration:none;color:var(--text)}
.site-footer nav a:hover{color:var(--amber)}
.social{display:flex;gap:14px}
.social a{color:var(--text)}
.social a:hover{color:var(--amber)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ════════════ INNER PAGES ════════════ */
.nav a[aria-current="page"]{color:var(--amber);opacity:1}
.cream{background:var(--paper);color:var(--ink)}
.cream .big,.cream .mid{color:var(--navy-d)}
.cream .big .amb,.cream .mid .amb{color:var(--amber-d)}
.cream .sub{color:#334155}
.cream .small-print{color:#64748B}
.cream a{color:var(--amber-d);font-weight:700}
.sec{padding:64px 0}
@media(min-width:900px){.sec{padding:100px 0}}

/* page closer (no photo) */
.page-closer{position:relative;overflow:hidden;padding:80px 0;border-top:1px solid var(--line);
  background:radial-gradient(800px 420px at 85% 20%,rgba(245,158,11,.12),transparent 60%),var(--navy-d)}
.page-closer::before{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:44px 44px}
.page-closer .wrap{position:relative}
@media(min-width:900px){.page-closer{padding:110px 0}}

/* ── giveaways: hero ── */
.gw-hero h1{font-family:var(--head);font-weight:800;line-height:.92;margin:0;font-size:clamp(50px,13vw,104px)}
.gw-hero h1 span{display:block}
.ticket{position:relative;justify-self:center;width:min(420px,100%);margin-bottom:34px;background:var(--navy-m);
  border:2px solid var(--amber);border-radius:24px;padding:26px 26px 30px;transform:rotate(-1.5deg);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--navy);border:2px solid var(--amber)}
.ticket::before{left:-15px;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-15px;clip-path:inset(0 50% 0 0)}
.tracker-label{font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin:0 0 4px}
.tracker-prize{font-family:var(--head);font-weight:800;font-size:clamp(66px,17vw,96px);line-height:.88;margin:0;color:#fff}
.tracker-prize small{display:block;font-size:.42em;line-height:1;color:var(--text);margin-top:6px}
.tracker-line{color:var(--text);margin:16px 0 0;font-size:16px}
.tracker-count{margin:0 0 14px;color:var(--mist);font-size:17px}
.tracker-count strong{font-family:var(--head);font-weight:800;font-size:72px;line-height:.9;color:#fff;margin-right:4px}
.tracker-track{height:14px;border-radius:999px;background:var(--line);overflow:hidden}
.tracker-fill{display:block;height:100%;width:2%;border-radius:999px;background:var(--amber);transition:width .6s ease}
.tracker-note{margin:18px 0 0;padding-top:16px;border-top:2px dashed var(--line);color:var(--amber);font-weight:700}
.tracker-month{margin-top:18px;padding-top:16px;border-top:2px dashed var(--line)}
.tracker-month .tracker-prize{font-size:44px}
.tracker-draw{margin:6px 0 0;color:var(--mist);font-size:15px}
.hero .ticket .bubble{position:absolute;left:auto;right:-6px;bottom:-24px;transform:rotate(2deg);font-size:14px}
@media(min-width:900px){.ticket{width:400px}.hero .ticket .bubble{left:auto;right:-40px;bottom:-24px}}
@media (prefers-reduced-motion:reduce){.tracker-fill{transition:none}}

/* tape strip with four short points */
.tape-points .wrap{grid-template-columns:1fr 1fr;gap:10px 18px}
.tape-points p{margin:0;font-family:var(--head);font-weight:800;font-size:23px;line-height:1;text-transform:uppercase}
@media(min-width:900px){.tape-points .wrap{grid-template-columns:repeat(4,auto);justify-content:space-between;align-items:end}.tape-points p{font-size:30px}}

/* ── prize ladder ── */
.ladder{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:14px;max-width:920px}
.rung{display:grid;gap:6px}
.rung-at{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#475569}
.rung-bar{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;width:calc(52% + var(--step) * 9.6%);max-width:100%;
  padding:14px 18px;border-radius:14px;background:var(--navy);color:#fff;box-shadow:0 10px 24px rgba(13,19,32,.18)}
.rung-bar{position:relative;overflow:hidden;padding-top:20px}
.rung-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;opacity:.55;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--amber) 0 1.5px,transparent 1.5px 50px) 0 0/100% 9px no-repeat,
             repeating-linear-gradient(90deg,var(--amber) 0 1px,transparent 1px 10px) 0 0/100% 5px no-repeat}
.rung.now .rung-bar::before{background:repeating-linear-gradient(90deg,var(--navy-d) 0 1.5px,transparent 1.5px 50px) 0 0/100% 9px no-repeat,
             repeating-linear-gradient(90deg,var(--navy-d) 0 1px,transparent 1px 10px) 0 0/100% 5px no-repeat}
.rung-value{font-family:var(--head);font-weight:800;font-size:42px;line-height:.95;color:var(--amber)}
.rung-what{font-size:14px;color:var(--text)}
.rung.done .rung-bar{background:var(--navy-m)}
.rung.now .rung-bar{background:var(--amber)}
.rung.now .rung-value,.rung.now .rung-what{color:var(--navy-d)}
.rung-tag{margin-left:auto;align-self:center;background:var(--navy-d);color:#fff;font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;white-space:nowrap}
@media(min-width:900px){.rung{grid-template-columns:150px 1fr;align-items:center;gap:18px}.rung-bar{width:calc(36% + var(--step) * 12.8%)}.rung-value{font-size:50px}}

/* ── how to enter: three cards ── */
.gw-how{background:var(--navy)}
.gw-steps{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:16px;counter-reset:s}
.gw-steps li{background:var(--navy-m);border:1.5px solid var(--line);border-radius:22px;padding:24px;counter-increment:s}
.gw-steps li::before{content:"0" counter(s);display:block;font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:.08em;color:var(--amber);margin:0 0 6px}
.gw-steps h3{font-family:var(--head);font-weight:800;font-size:42px;line-height:.95;margin:0}
.gw-steps p{color:var(--text);margin:10px 0 0}
@media(min-width:900px){.gw-steps{grid-template-columns:repeat(3,1fr);gap:22px}}

/* past winners */
.winners{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.winners li{background:var(--navy-m);border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;display:grid;gap:2px}
.winners strong{font-family:var(--head);font-weight:800;font-size:28px;line-height:1}
.winners span{color:var(--text)}
.winners small{color:var(--mist);font-size:13px}

/* key rules + FAQ */
.gw-rules .wrap{display:grid;gap:40px;align-items:start}
.cream .ticks{color:#334155}
.gw-rules .faq{margin-top:4px}
@media(min-width:900px){.gw-rules .wrap{grid-template-columns:1fr 1fr;gap:60px}.gw-rules .faq{margin-top:0}}

/* giveaways hero: rising ladder (decorative, no figures) */
.rise{position:relative;justify-self:center;width:min(400px,100%);margin-bottom:40px}
.rise-bars{display:flex;align-items:flex-end;gap:12px;height:clamp(280px,74vw,420px);padding:0 6px;border-bottom:3px solid var(--amber)}
.rise-bars span{position:relative;flex:1;height:var(--h);border-radius:10px 10px 0 0;transform-origin:bottom;
  background:linear-gradient(180deg,#FBB437 0%,var(--amber) 35%,var(--amber-d) 100%);box-shadow:0 18px 40px rgba(0,0,0,.35);
  animation:rise .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .14s + .2s)}
.rise-bars span::before{content:"";position:absolute;left:0;top:12px;bottom:0;width:14px;opacity:.55;pointer-events:none;
  background:repeating-linear-gradient(0deg,var(--navy-d) 0 2px,transparent 2px 30px) 0 100%/14px 100% no-repeat,
             repeating-linear-gradient(0deg,var(--navy-d) 0 1px,transparent 1px 6px) 0 100%/7px 100% no-repeat}
.rise-bars span:last-child{box-shadow:0 0 60px rgba(245,158,11,.45),0 18px 40px rgba(0,0,0,.35)}
.hero .rise .bubble{left:-6px;right:auto;bottom:-24px;transform:rotate(-2deg);animation:fadein .4s ease both;animation-delay:1.1s}
@media(min-width:900px){.hero .rise .bubble{left:-40px;bottom:-24px}}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.rise-bars span,.hero .rise .bubble{animation:none}}

/* the live member counter, once switched on, sits above the ladder */
.cream .ticket{margin:30px 0 0;transform:none}
.cream .ticket::before,.cream .ticket::after{background:var(--paper)}
.rise{padding-top:40px}
.rise-bars span::after{content:attr(data-p);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;
  font-family:var(--head);font-weight:800;font-size:clamp(18px,5vw,28px);line-height:1;letter-spacing:-.02em;color:var(--amber);white-space:nowrap}
.rise-bars span:last-child::after{text-shadow:0 0 24px rgba(245,158,11,.6)}
/* glow builds bar by bar */
.rise-bars span{box-shadow:0 0 calc(var(--i) * 15px) rgba(245,158,11,calc(var(--i) * .11)),0 18px 40px rgba(0,0,0,.35)}
.rise-bars span::after{text-shadow:0 0 calc(var(--i) * 6px + 2px) rgba(245,158,11,calc(.1 + var(--i) * .13))}

/* ── legal pages: giveaway rules, privacy, terms ── */
.narrow{max-width:820px}
.legal-hero{position:relative;overflow:hidden;padding:104px 0 44px;
  background:radial-gradient(900px 500px at 85% 30%,rgba(245,158,11,.10),transparent 60%),linear-gradient(180deg,var(--navy) 0%,var(--navy-d) 100%)}
.legal-hero::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:44px 44px}
.legal-hero .wrap{position:relative}
.legal-hero h1{font-family:var(--head);font-weight:800;line-height:.92;margin:0;font-size:clamp(54px,14vw,100px)}
.legal-hero .meta{color:var(--mist);margin:16px 0 0;font-size:15px}
.legal-body{background:var(--paper);color:var(--ink);padding:40px 0 80px}
.toc{background:#fff;border-radius:18px;padding:20px 22px;box-shadow:0 2px 0 rgba(13,19,32,.06)}
.toc p{font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-d);margin:0 0 8px}
.toc ol{margin:0;padding-left:24px;columns:2 260px;column-gap:30px}
.toc li{margin:0;padding:3px 0;break-inside:avoid}
.toc li::marker{color:var(--amber-d);font-weight:700}
.toc a{color:var(--ink);font-weight:500;text-decoration:none}
.toc a:hover{color:var(--amber-d)}
.legal{font-size:16px;color:#334155;counter-reset:sec}
.legal h2{font-family:var(--head);font-weight:800;font-size:clamp(30px,7vw,40px);line-height:1;color:var(--navy-d);margin:48px 0 16px;scroll-margin-top:20px;counter-increment:sec}
.legal p{margin:0 0 14px}
.legal strong{color:var(--navy-d)}
.legal a{color:var(--amber-d);font-weight:700}
.legal > ol{list-style:none;padding:0;margin:0;counter-reset:item}
.legal > ol > li{position:relative;padding-left:48px;margin:0 0 14px;counter-increment:item}
.legal > ol > li::before{content:counter(sec) "." counter(item);position:absolute;left:0;top:1px;font-family:var(--head);font-weight:800;font-size:19px;line-height:1.4;color:var(--amber-d)}
.legal ul{list-style:none;padding:0;margin:10px 0 0}
.legal ul li{position:relative;padding-left:22px;margin:8px 0}
.legal ul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--amber)}
.legal table{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 4px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 0 rgba(13,19,32,.06)}
.legal th{background:var(--navy);color:#fff;text-align:left;font-weight:700;font-size:14px;padding:12px 16px}
.legal td{padding:10px 16px;border-top:1px solid #E7E2D6}
.legal td:last-child{font-family:var(--head);font-weight:800;font-size:22px;color:var(--navy-d)}
.legal .lede{background:#fff;border-left:4px solid var(--amber);border-radius:12px;padding:18px 20px;font-size:17px;margin:32px 0 0}
.legal .switch{margin-top:44px;padding-top:20px;border-top:1px solid #DDD6C6;font-size:15px}
@media(min-width:900px){.legal-hero{padding:130px 0 60px}.legal-body{padding:56px 0 110px}}
.legal .lede:first-child{margin-top:0}

/* ── message pages: 404, thanks ── */
.msg-page{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:110px 0 70px;
  background:radial-gradient(900px 500px at 85% 30%,rgba(245,158,11,.12),transparent 60%),linear-gradient(180deg,var(--navy) 0%,var(--navy-d) 100%)}
.msg-page::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:44px 44px}
.msg-page .wrap{position:relative;width:100%}
.msg-page .sub{margin-bottom:28px}
.btn-amber{background:var(--amber);color:var(--navy-d)}
.btn-amber:hover{background:#FBB437}
.msg-links{margin:22px 0 0;color:var(--mist);font-size:15px}
.msg-links a{color:var(--text);font-weight:500}
.msg-links a:hover{color:var(--amber)}


/* ── quote time calculator (/quote-time-calculator/) ── */
.qc-hero .grid{padding-bottom:48px}
.qc-hero h1{font-family:var(--head);font-weight:800;line-height:.92;margin:0;font-size:clamp(54px,14vw,108px)}
.qc-hero h1 span{display:block}
.qc-card{position:relative;background:var(--navy-m);border:2px solid var(--amber);border-radius:24px;padding:24px 22px 26px;box-shadow:0 30px 60px rgba(0,0,0,.45);width:100%;max-width:460px;justify-self:center}
.qc-card h2{font-family:var(--head);font-weight:800;font-size:34px;line-height:1;margin:0 0 16px}
.qc-card .field select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231E293B' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.qc-pound{position:relative}
.qc-pound::before{content:"£";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink);font-weight:500;pointer-events:none}
.qc-pound input{padding-left:28px}
.field .hint{display:block;color:var(--mist);font-size:13px;font-weight:400;margin-top:2px}
.qc-card .btn{width:100%;background:var(--amber);color:var(--navy-d);font-size:17px;margin-top:6px}
.qc-card .btn:hover{background:#FBB437}
.qc-err{color:#FCA5A5;font-size:14px;margin:10px 0 0}
@media(min-width:900px){.qc-hero .grid{grid-template-columns:1fr 460px;gap:60px;padding-bottom:80px}}

.qc-result{background:var(--navy);padding:56px 0 64px;border-top:1px solid var(--line)}
.qc-result[hidden]{display:none}
.qc-head .kicker{margin-bottom:10px}
.qc-big{font-family:var(--head);font-weight:800;line-height:.86;margin:0;font-size:clamp(110px,34vw,220px);color:var(--amber);letter-spacing:-.01em}
.qc-big-line{font-family:var(--head);font-weight:800;font-size:clamp(34px,8vw,56px);line-height:.95;margin:6px 0 0}
.qc-stats{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.qc-stats li{background:var(--navy-m);border:1.5px solid var(--line);border-radius:16px;padding:12px 18px;color:var(--text);font-size:15px}
.qc-stats b{display:block;font-family:var(--head);font-weight:800;font-size:38px;line-height:1;color:#fff}
.qc-put{font-family:var(--head);font-weight:800;font-size:clamp(30px,7vw,42px);line-height:1;margin:44px 0 0}
.qc-cards{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px}
.qc-cards li{position:relative;overflow:hidden;background:var(--navy-m);border:1.5px solid var(--line);border-radius:18px;padding:26px 20px 20px;font-size:18px;line-height:1.45;color:var(--text);animation:fadein .35s ease both}
.qc-cards li::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;opacity:.55;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--amber) 0 1.5px,transparent 1.5px 50px) 0 0/100% 9px no-repeat,
             repeating-linear-gradient(90deg,var(--amber) 0 1px,transparent 1px 10px) 0 0/100% 5px no-repeat}
.qc-cards b{font-family:var(--head);font-weight:800;font-size:1.65em;line-height:1;color:var(--amber);letter-spacing:.01em}
.qc-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.btn-line{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.btn-line:hover{border-color:var(--amber);color:var(--amber)}
.qc-turn{margin:56px 0 0;padding-top:40px;border-top:2px dashed var(--line)}
.qc-turn .big{font-size:clamp(42px,10.5vw,76px)}
.qc-foot{font-size:13px;color:var(--mist);margin:30px 0 0;max-width:62em}
@media(min-width:900px){.qc-result{padding:90px 0 100px}.qc-cards{grid-template-columns:repeat(3,1fr);gap:18px}}
@media (prefers-reduced-motion:reduce){.qc-cards li{animation:none}}
.qc-how .wrap{display:grid;gap:40px;align-items:start}
@media(min-width:900px){.qc-how .wrap{grid-template-columns:1fr 1fr;gap:60px}}
.oldway p.oldway-link{margin-top:22px}
.oldway-link a{color:var(--amber-d);font-weight:700;text-decoration:none;border-bottom:2px solid currentColor}
.oldway-link a:hover{color:var(--navy-d)}

/* ── site menu: phones get a ☰ button + drop-down, bigger screens keep the links in the bar ── */
.menu-btn{display:none}
@media(max-width:759px){
  .site-header .wrap{position:relative}
  .menu-btn{display:grid;place-content:center;gap:5px;width:46px;height:46px;padding:0;cursor:pointer;
    border:1.5px solid rgba(255,255,255,.4);border-radius:12px;background:rgba(13,19,32,.6)}
  .menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
  .menu-btn[aria-expanded="true"]{border-color:var(--amber)}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-header .nav{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 10px);z-index:30;
    flex-direction:column;gap:0;background:var(--navy-d);border:1.5px solid var(--line);border-radius:18px;padding:4px 20px;box-shadow:0 24px 50px rgba(0,0,0,.55)}
  .site-header .nav.open{display:flex;animation:fadein .15s ease both}
  .site-header .nav a{display:block;font-family:var(--head);font-weight:800;font-size:30px;line-height:1;padding:15px 0;opacity:1;border-top:1px solid var(--line)}
  .site-header .nav a:first-child{border-top:0}
  .site-header .nav a[aria-current="page"]{color:var(--amber)}
}
@media (prefers-reduced-motion:reduce){.menu-btn span{transition:none}.site-header .nav.open{animation:none}}