/* The Seekies app's new look on the website (Darcy, 27 Oct 2026: "update the website with new app branding").
   Tokens from the owner app (ios/Seekies/Design/Theme.swift and the Seekies colour set): red #FF4A3D,
   ink #131210, cream #F4F0E8, paper #FAF8F0; General Sans, big words Bold and sentence case, set tight;
   white cards on a hairline, radius 24; red only for buttons and the lead. No green, no red gradients.
   The hero (#zh) and the logo are kept exactly as they are. Loaded last; every rule sits under html.nl. */
html.nl body{--disp:"General Sans",system-ui,sans-serif}
html.nl body :is(#zh,.hero){--disp:"Bebas Neue","Anton",Impact,sans-serif}
html.nl{--nl-red:#FF4A3D;--nl-red-deep:#C8160F;--nl-ink:#2A1709;--nl-ink2:#5A4232;--nl-ink3:#8E7866;--nl-cream:#F6EFE2;--nl-paper:#FFFBF2;--nl-line:rgba(42,23,9,.08);
  --nl-lead:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M3 9c22 5 44-5 66-2s30 6 48 1' fill='none' stroke='%23FF4A3D' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E")}

/* type: Bebas display becomes General Sans Bold, sentence case, ink */
html.nl body :is(.disp,.wd-l,.hx-kick,.kick,.cl-kick,.bw-h,h4):where(:not(#zh *,.hero *)){font-family:"General Sans",system-ui,sans-serif!important;text-transform:none!important}
html.nl body .disp:where(:not(#zh *,.hero *)){font-weight:700!important;letter-spacing:-.04em!important;line-height:1.02!important;color:var(--nl-ink)!important}
html.nl body .disp:where(:not(#zh *,.hero *)) :is(span,em,i,b){color:inherit!important}
html.nl body :is(.kick,.hx-kick,.cl-kick,.wt-kick,.fa-kick,.fs-kick,.pk-kick):where(:not(#zh *)){font-family:"General Sans",system-ui,sans-serif!important;font-weight:600!important;font-size:12px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--nl-red-deep)!important}

/* section headings carry the red lead underneath, as the app's titles do */
html.nl body :is(#what>.wrap h2.disp,#what h2.disp,#track h2.disp,#safety.ppx h2.disp,#now h2.disp,#club.club h2.disp,#first h2.disp,#pack h2.disp,.svc-h h2.disp):not(.nl-nolead)::after{content:"";display:block;width:min(150px,32%);height:18px;margin-top:.22em;background:var(--nl-lead) left center/contain no-repeat}
html.nl body #first h2.disp::after,html.nl body #pack h2.disp::after{margin-left:auto;margin-right:auto;background-position:center}

/* sizes: General Sans sets wider than Bebas, so the big words come down (the app uses 0.72) */
html.nl body .hx-copy h3.disp{font-size:clamp(44px,5.4vw,84px)!important}
html.nl body .hx-num.disp{font-size:clamp(220px,30vw,460px)!important;letter-spacing:-.06em!important}
html.nl body .svc-h h2.disp{font-size:clamp(84px,14vw,200px)!important}
html.nl body .svx h3.disp{font-size:clamp(48px,6vw,92px)!important;color:var(--nl-ink)!important}
html.nl body #what h2.disp{font-size:clamp(44px,5.6vw,84px)!important}
html.nl body #what h3.disp{font-size:clamp(26px,2.4vw,34px)!important}
html.nl body .bookx .wd-l{font-weight:700!important;letter-spacing:-.05em!important;font-size:clamp(64px,11vw,160px)!important;line-height:1!important}
html.nl body .bookx h2.disp.iw-h{font-size:clamp(40px,4.6vw,64px)!important}
html.nl body #track h2.disp{font-size:clamp(52px,7vw,104px)!important}
html.nl body #safety.ppx h2.disp{font-size:clamp(44px,5.4vw,80px)!important}
html.nl body #safety.ppx :is(.pp-v,b).disp{font-weight:600!important;letter-spacing:-.02em!important;color:#1F4E79!important}
html.nl body #safety.ppx .pp-v.disp{font-size:clamp(20px,1.8vw,26px)!important}
html.nl body #safety.ppx :is(.ppm-fh,.pp-fh).disp{font-size:clamp(24px,2.4vw,34px)!important}
html.nl body #now h2.disp{font-size:clamp(52px,7vw,104px)!important}
html.nl body #club.club h2.disp{font-size:clamp(52px,7vw,104px)!important}
html.nl body #first h2.disp{font-size:clamp(52px,8vw,120px)!important}
html.nl body .bw-h{font-weight:700!important;letter-spacing:-.03em!important;font-size:clamp(26px,2.8vw,40px)!important;color:var(--nl-ink)!important}
html.nl body .svx h4{font-weight:700!important;letter-spacing:-.02em!important;color:var(--nl-ink)!important}

/* buttons: flat red pill, sentence case General Sans; the outline pill is ink on white */
html.nl body :is(.pill,.btn):where(:not(#zh *)){font-family:"General Sans",system-ui,sans-serif!important;font-weight:600!important;text-transform:none!important;letter-spacing:-.01em!important;font-size:17px!important;background-image:none!important}
html.nl body .pill:where(:not(#zh *)):not(.sv-reg):not(.ghost){background-color:var(--nl-red)!important;color:#fff!important}
html.nl body .pill.sv-reg{background:#fff!important;color:var(--nl-ink)!important;box-shadow:inset 0 0 0 1.5px rgba(19,18,16,.18)!important}

/* grounds: cream and paper, no pastels */
html.nl body .howx,html.nl body .howx :is(.hx-panel,.hx-bg,.hx-slide){background-color:var(--nl-cream)!important}


/* small display labels that were Bebas: General Sans; names and values in sentence case */
html.nl body :is(#safety.ppx dd,#safety.ppx .ppm-v,#safety.ppx .pp-v,#club .mc-name,.cs-t1,.cs-t2,.cs-cap,#built b,#built span,#svc .sv-time,#now .nr-chip){text-transform:none!important;letter-spacing:-.01em!important;font-weight:600!important}
html.nl body #built :is(b,span){letter-spacing:-.01em!important}
/* centred headings centre their lead */
html.nl body #track h2.disp::after{margin-left:auto;margin-right:auto;background-position:center}
/* maps keep their own colours: parks, river and roads exactly as drawn (Darcy, 27 Oct) */
/* service cards: white on a hairline, as the app's service rows; Regulars is the warm-black moment card */
html.nl body #what .wt-c:not(.wt-reg){background:#fff!important;box-shadow:inset 0 0 0 1px var(--nl-line),0 18px 40px -26px rgba(19,18,16,.35)!important}
html.nl body #what .wt-c.wt-reg{background:var(--nl-ink)!important}
html.nl body #what .wt-tag{background:var(--nl-cream)!important;color:var(--nl-ink)!important;border-color:transparent!important}
/* phones: the service copy column was sized by the card carousel (1000px), so its buttons ran off screen */
@media (max-width:900px){html.nl body #svc .sv-copy{grid-template-columns:minmax(0,1fr)!important}html.nl body #svc .sv-pills{width:100%!important;min-width:0!important}}
/* How it works on phones: one cream ground for every step, as the app */
html.nl body #how .hx-scene{background-color:var(--nl-cream)!important}
/* phone service cards: bold ink titles and numbers, as the app's service rows */
html.nl body #svc .dk-tx h3{font-weight:700!important;letter-spacing:-.035em!important;color:var(--nl-ink)!important}
html.nl body #svc .dk-num :is(b,span){color:var(--nl-ink)!important;font-weight:600!important;letter-spacing:-.04em!important}

/* every page: display sizes by role (General Sans sets wider than the Bebas they were sized for) */
html.nl body h1.disp:where(:not(#zh *,.hero *)){font-size:clamp(52px,8vw,124px)!important}
html.nl body h2.disp:where(:not(#zh *,.hero *)){font-size:clamp(40px,5.4vw,84px)!important}
html.nl body h3.disp:where(:not(#zh *,.hero *)){font-size:clamp(28px,3.6vw,56px)!important}

/* Become a walker */
html.nl body .rt-why h3.disp{font-size:clamp(44px,6.4vw,104px)!important}
html.nl body .rt-week h3.disp{font-size:clamp(44px,5.6vw,88px)!important}
html.nl body #apply-steps h3.disp{font-size:clamp(20px,1.9vw,27px)!important;letter-spacing:-.025em!important}
html.nl body .trk-bg{color:#E3D8C4!important}
html.nl body .rt-week,html.nl body .rt-ready{background:var(--nl-cream)!important}
html.nl body :is(.rt-earn,.rt-week,.rt-ready,#apply-steps,#walker-faq,#apply) h2.disp::after{content:"";display:block;width:min(150px,32%);height:18px;margin-top:.22em;background:var(--nl-lead) left center/contain no-repeat}
html.nl body :is(.rt-week,.rt-ready,#apply-steps) h2.disp::after{margin-left:auto;margin-right:auto;background-position:center}
html.nl.mo-h body .trk-ui::before,html.nl body .trk-ui::before{background:#E8DFCE!important}
html.nl body #walker-faq summary,html.nl body #walker-faq summary *{color:var(--nl-ink)!important}

/* inner pages (seekies-pages.css, help): sentence case, cream and paper grounds, no blue or pink bands */
html.nl body :is(.pg-hero h1,.pg-cta h2,.nwn h2,.ed-copy h3,.hh h1,.need h2),html.nl body :is(h1,h2.big):where(:not(#zh *,.hero *)){text-transform:none!important;letter-spacing:-.04em!important;line-height:1.02!important}
html.nl body .pg-hero{background:var(--nl-cream)!important}
html.nl body .pg-sec.pg-blue{background:var(--nl-paper)!important}
html.nl body .pg-cta{background:var(--nl-cream)!important}
html.nl body .pg-tier{background:#fff!important;box-shadow:inset 0 0 0 1px var(--nl-line)!important}
html.nl body .pg-tier.pop{background:#fff!important;box-shadow:inset 0 0 0 2px var(--nl-red)!important}
html.nl body .pg-hero h1::after{content:"";display:block;width:min(150px,40%);height:18px;margin-top:.24em;background:var(--nl-lead) left center/contain no-repeat}

/* The Club and What you can earn, light like the rest of the site (Darcy, 27 Oct: "black is a terrible
   choice"). Cream ground, white rows on a hairline, ink type, red numbers. The member card (.cl-face) is
   left exactly as it is: the one dark object, the hero of the section. */
html.nl body #club.club{background:var(--nl-cream)!important}
html.nl body #club.club .cl-kick{color:var(--nl-red-deep)!important}
html.nl body #club.club .cl-lede{color:var(--nl-ink2)!important}
html.nl body #club.club li:not(.cl-face *){background:#fff!important;box-shadow:inset 0 0 0 1px var(--nl-line)!important;color:var(--nl-ink)!important}
html.nl body #club.club li:not(.cl-face *) b{color:var(--nl-red)!important}
html.nl body #club.club li:not(.cl-face *) span{color:var(--nl-ink2)!important}
html.nl body #club.club li:not(.cl-face *) strong{color:var(--nl-ink)!important}
html.nl body #club.club li:not(.cl-face *) svg{color:var(--nl-red)!important;stroke:currentColor}
html.nl body #club.club :is(.tp,.tp i){box-shadow:none!important}
html.nl body #club.club .pill{box-shadow:none!important}

html.nl body .rt-earn{background:var(--nl-cream)!important}
html.nl body #earn.rt-earn .kick{color:var(--nl-red-deep)!important}
html.nl body #earn.rt-earn h2.disp{color:var(--nl-ink)!important}
html.nl body #earn.rt-earn :is(.lede,.ctl-q,output,.mix-q,.mix-q~*,span:not(.meter *)){color:var(--nl-ink2)!important}
html.nl body #earn.rt-earn :is(output,b:not(.meter *),.ctl-q){color:var(--nl-ink)!important}
html.nl body #earn.rt-earn .seg{background:#fff!important;box-shadow:inset 0 0 0 1px var(--nl-line)!important}
html.nl body #earn.rt-earn .seg button{color:var(--nl-ink2)!important}
html.nl body #earn.rt-earn .seg button[aria-checked="true"]{background:var(--nl-ink)!important;color:#fff!important;box-shadow:none!important}
html.nl body #earn.rt-earn .meter{background:#fff!important;box-shadow:inset 0 0 0 1px var(--nl-line),0 24px 50px -30px rgba(19,18,16,.35)!important}
html.nl body #earn.rt-earn .meter :is(.cur-s,.wh span,span.wh){color:var(--nl-ink)!important}

/* Palette v2 (Darcy 9 Nov 2026): highlighted headline words carry a coral dash; tomato stays for the brand marks */
html.nl body h2 em,html.nl body h1 em,html.nl body .yd-red{color:#2A1709!important;background:linear-gradient(transparent 58%,#FF7A6B 58%,#FF7A6B 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-style:normal}
html.nl body .yd-red{display:inline-block;width:fit-content}
html.nl body #zh h1 em{color:#fff!important;background:none}
html.nl body .cl-offer,html.nl body .cl-offer *,html.nl body .cl-price,html.nl body .cl-price *,html.nl body .cl-terms,html.nl body .cl-ben,html.nl body .cl-ben *{color:#2A1709!important;-webkit-text-fill-color:#2A1709!important;background:none!important;opacity:1!important}
html.nl body .cl-ben i{background:#FF4A3D!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

/* Darcy 9 Nov: the coral band replaces the wavy red line under headings */
html.nl body :is(#what>.wrap h2.disp,#what h2.disp,#track h2.disp,#safety.ppx h2.disp,#now h2.disp,#club.club h2.disp,#first h2.disp,#pack h2.disp,.svc-h h2.disp:not(#svch),.rt-earn h2.disp,.rt-week h2.disp,.rt-ready h2.disp,#apply-steps h2.disp,#walker-faq h2.disp,#apply h2.disp,.pg-hero h1)::after{content:none!important;display:none!important}
html.nl body :is(#what h2.disp,#track h2.disp,#safety.ppx h2.disp,#now h2.disp,#club.club h2.disp,#first h2.disp,#pack h2.disp,.svc-h h2.disp:not(#svch),.rt-earn h2.disp,.rt-week h2.disp,.rt-ready h2.disp,#apply-steps h2.disp,#walker-faq h2.disp,#apply h2.disp,.pg-hero h1):not(:has(em)) > span:last-child,
html.nl body :is(#what h2.disp,#track h2.disp,#safety.ppx h2.disp,#now h2.disp,#club.club h2.disp,#first h2.disp,#pack h2.disp,.svc-h h2.disp:not(#svch),.rt-earn h2.disp,.rt-week h2.disp,.rt-ready h2.disp,#apply-steps h2.disp,#walker-faq h2.disp,#apply h2.disp,.pg-hero h1):not(:has(em)):not(:has(span)){background:linear-gradient(transparent 58%,#FF7A6B 58%,#FF7A6B 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.nl body :is(#what h2.disp,#track h2.disp,#safety.ppx h2.disp,#now h2.disp,#club.club h2.disp,#first h2.disp,#pack h2.disp,.svc-h h2.disp:not(#svch),.rt-earn h2.disp,.rt-week h2.disp,.rt-ready h2.disp,#apply-steps h2.disp,#walker-faq h2.disp,#apply h2.disp,.pg-hero h1):not(:has(em)) > span:last-child{display:table}
html.nl body :is(#first,#track) h2.disp:not(:has(em)) > span:last-child{margin-inline:auto}
html.nl body #svch > span:last-child,html.nl body .svc-h h2.disp#svch{background:none!important}

/* centred headings keep the coral band under the centred line (Darcy 10 Nov) */
@media (max-width:900px){html.nl body #now h2.disp > span:last-child,html.nl body #pack h2.disp > span:last-child{margin-inline:auto}}