/* ScamProof sites: shared styles. Style guide: navy #0B2A46, green #22C55E, light green #DFF7E6,
   text grey #475569, background #F8FAFC, border #E2E8F0. Poppins headings, Inter body, both self-hosted (fonts/OFL.txt). */
@font-face{font-family:"Poppins";src:url("/fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url("/fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600 700;font-display:swap}
:root{
  --navy:#0B2A46;--navy-2:#123a5e;--green:#22C55E;--green-dark:#166534;--green-soft:#DFF7E6;
  --text:#475569;--bg:#F8FAFC;--line:#E2E8F0;--white:#fff;
  --red:#B91C1C;--red-soft:#FDECEC;--blue:#1D4ED8;--blue-soft:#E8F0FE;
  --head:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --radius:12px;--measure:42rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:1.1875rem;line-height:1.65;color:var(--text);background:var(--bg)}
@media (min-width:48rem){body{font-size:1.25rem}}
img,svg{max-width:100%;height:auto}
a{color:var(--green-dark);text-underline-offset:.18em;text-decoration-thickness:.08em;font-weight:500}
a:hover{text-decoration-thickness:.15em}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.site-foot :focus-visible{outline-color:var(--green)}
h1,h2,h3,legend{font-family:var(--head);line-height:1.18;color:var(--navy);margin:1.6em 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:2.1rem;margin-top:.4em}
h2{font-size:1.6rem}
h3{font-size:1.25rem;font-weight:600}
@media (min-width:48rem){h1{font-size:2.75rem}h2{font-size:1.95rem}}
p,ul,ol{margin:0 0 1em}
li{margin-bottom:.45em}
strong,b{font-weight:600;color:var(--navy)}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--navy);padding:.6em 1em;font-weight:600;z-index:10}
.skip:focus{left:0}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.prose{max-width:var(--measure)}
.lede{font-size:1.15em}
.ico{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}

/* Draft banner (removed in --live builds) */
.draftbar{background:#5a1a7a;color:#fff;font-size:.8rem;line-height:1.35;text-align:center;padding:.25em 1em;font-weight:600}

/* Header */
.head-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;padding-top:.85rem;padding-bottom:.85rem}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;margin-right:auto}
/* Header logo, cover-matched, with the strapline (26 Oct 2026; shrunk ~20% the same evening on request).
   Strapline cap height = 12/92 of .logo-head height, 14.5/92 of .logo-stack height.
   40rem up: side by side, 258 x 55px, cap 7.2px (247 x 53px, cap 6.9px at 1025-1096px).
   Phones (<40rem): stacked, up to 178 x 41px, cap 6.4px. */
.brand .logo{display:block;flex:none}
.brand .logo-head{display:none;height:3.45rem;width:16.13rem}
/* Stacked phone logo is fluid: never wider than the space left by the Menu button (+ ~8px spare), max 11.1rem. */
.brand .logo-stack{width:min(11.1rem,calc(100vw - 10.9rem));height:auto;aspect-ratio:400/92}
@media (max-width:22.5rem){.brand .logo-stack{width:min(11.1rem,calc(100vw - 6.7rem))}}
@media (min-width:40rem){.brand .logo-head{display:block}.brand .logo-stack{display:none}}
/* Desktop: standard 4rem side padding (logo lines up with the hero text), slightly tighter nav gaps so logo, nav
   and CTA stay on one line. Just above the 64rem breakpoint (to 68.5rem) the header uses 2.5rem padding instead. */
@media (min-width:64.01rem){.site-head .head-row{column-gap:1.2rem}.site-head .nav ul{column-gap:1.05rem}.site-head .menu{gap:1.1rem}}
@media (min-width:64.01rem) and (max-width:68.5rem){.site-head .wrap{padding-left:2.5rem;padding-right:2.5rem}
  .brand .logo-head{height:3.3rem;width:15.43rem}.site-head .head-row{column-gap:1rem}.site-head .nav ul{column-gap:.8rem}.site-head .menu{gap:1rem}}
.shield{width:2.6rem;height:2.6rem;flex:none}
.wordmark{font-family:var(--head);font-weight:700;font-size:1.55rem;color:#fff;letter-spacing:-.01em;line-height:1}
.wordmark span{color:var(--green)}
/* Nav: desktop row above 64rem. Up to 64rem (phones and tablets incl. iPad landscape) a hamburger opens a
   full-width navy panel. Without JS the button stays hidden and the nav shows stacked under the logo. */
.menu-btn{display:none}
.nav ul{list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav a{text-decoration:none;font-family:var(--head);font-weight:600}
@media (min-width:64.01rem){
  .brand{margin-right:0}
  .menu{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
  .nav ul{display:flex;flex-wrap:wrap;gap:.1rem 1.4rem}
  .nav a{display:inline-block;font-size:1rem;padding:.45em 0;border-bottom:3px solid transparent}
  .nav a:hover{border-bottom-color:rgba(34,197,94,.55)}
  .nav a[aria-current="page"]{border-bottom-color:var(--green)}
}
@media (max-width:64rem){
  .menu{width:100%}
  .nav a{display:flex;align-items:center;min-height:48px;font-size:1.25rem;padding:.35rem 0 .35rem 1rem;border-left:4px solid transparent;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav a[aria-current="page"]{border-left-color:var(--green);color:var(--green)}
  .nav a:hover{color:var(--green)}
  .menu .head-cta{margin-top:1rem;width:100%;justify-content:center;font-size:1.1rem;min-height:52px}
  /* JS on: hide the stacked nav behind the button */
  .js-menu .menu{display:none}
  .js-menu .menu-btn{display:inline-flex;align-items:center;gap:.55rem;min-width:44px;min-height:44px;padding:.45rem .8rem;margin-left:auto;
    background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);border-radius:10px;font-family:var(--head);font-weight:600;font-size:1rem;cursor:pointer}
  .js-menu .menu-btn:hover{border-color:var(--green)}
  .menu-ico,.menu-ico::before,.menu-ico::after{display:block;width:1.35rem;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,background-color .2s}
  .menu-ico{position:relative}
  .menu-ico::before,.menu-ico::after{content:"";position:absolute;left:0}
  .menu-ico::before{top:-7px}.menu-ico::after{top:7px}
  .menu-btn[aria-expanded="true"] .menu-ico{background:transparent}
  .menu-btn[aria-expanded="true"] .menu-ico::before{transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .menu-ico::after{transform:translateY(-7px) rotate(-45deg)}
  .menu-open,.menu-open body{overflow:hidden}
  .menu-open .menu{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;top:8rem;z-index:50;overflow-y:auto;overscroll-behavior:contain;
    background:var(--navy);border-top:1px solid rgba(255,255,255,.12);padding:1rem max(1.25rem,calc((100vw - 44rem)/2)) 2rem}
  .menu-open .nav a{font-size:1.6rem;min-height:3.6rem}
  .menu-open .menu .head-cta{margin-top:auto;position:sticky;bottom:0}
  .menu-open .nav{margin-bottom:1.5rem}
}
/* White header at all widths (26 Oct 2026) with the dark-text logo (design-v4/logo-light.svg colours).
   Logo: "scam" navy, "proof" and shield #22C55E (logotype, exempt from text contrast), strapline #334155 (10.3:1).
   The open mobile menu panel stays navy, so its links, focus rings and CTA keep their dark-background styles. */
.site-head{background:#fff;color:var(--navy);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(11,42,70,.10);position:relative;z-index:3}
.site-head .logo .lw{fill:var(--navy);stroke:var(--navy)}
.site-head .logo .ls{fill:var(--navy)}
.site-head .wordmark{color:var(--navy)}
.site-head .wordmark span{color:var(--green-dark)}
.site-head :focus-visible{outline-color:var(--navy)}
.nav a{color:var(--navy)}
@media (min-width:64.01rem){
  /* hover underline brand green; current page a stronger green (#16A34A, 3.3:1 on white) so the indicator meets 3:1 */
  .nav a:hover{border-bottom-color:var(--green)}
  .nav a[aria-current="page"]{border-bottom-color:#16A34A}
  .site-head .head-cta{color:var(--navy)}
}
@media (max-width:64rem){
  .js-menu .nav a{color:#fff}
  .js-menu .nav a[aria-current="page"],.js-menu .nav a:hover{color:var(--green)}
  .js-menu .menu-btn{color:var(--navy);border-color:var(--navy)}
  .js-menu .menu-btn:hover{border-color:var(--green-dark);color:var(--green-dark)}
  .menu-btn[aria-expanded="true"]{background:var(--navy);color:#fff}
  .js-menu .menu-btn[aria-expanded="true"]:hover{color:#fff;border-color:var(--navy)}
  /* No JS: the nav shows stacked on the white header, so use dark links */
  html:not(.js-menu) .nav a{color:var(--navy);border-bottom-color:var(--line)}
  html:not(.js-menu) .nav a[aria-current="page"],html:not(.js-menu) .nav a:hover{color:var(--green-dark)}
  .menu-open .menu{border-top:0}
  .menu-open .menu :focus-visible{outline-color:var(--green)}
}
/* Very narrow phones (360px and under): keep logo and button on one row; the label stays for screen readers */
@media (max-width:22.5rem){.menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.js-menu .menu-btn{padding:.45rem .65rem}.brand-iitas .wordmark{font-size:1.3rem}.brand-iitas .shield{width:2.2rem;height:2.2rem}}

/* Hero (navy, cover on the right, green arc, curved edge into the light section) */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#DCE5EE;padding:2.2rem 0 4.2rem}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(2.5rem,8vw,4.6rem);line-height:1.02;letter-spacing:-.02em;margin:.25em 0 .35em}
.hero h1 .g{display:block;color:var(--green)}
.hero .hero-sub{color:#fff;font-size:1.2em;line-height:1.45;margin-bottom:.8em;max-width:34rem}
.hero .lede,.hero p{color:#DCE5EE;max-width:36rem}
.hero .lede{font-size:1.05em}
.hero strong,.hero b{color:#fff}
.hero a:not(.btn){color:#fff}
.hero-grid{display:grid;gap:2.4rem;align-items:center}
@media (min-width:64.01rem){.hero-grid{grid-template-columns:1.25fr 1fr}}
/* Phones and tablets: cover first, centred, above the kicker and headline */
@media (max-width:64rem){.hero{padding-top:1.6rem}.hero-grid{gap:1.4rem}.hero-art{order:-1;min-height:0}}
/* Phones and tablets: centred hero copy (the longer bio paragraph, .hero-bio, stays left), stacked full-width CTAs */
@media (max-width:64rem){
  .hero-grid>div:not(.hero-art){text-align:center}
  .hero-grid>div:not(.hero-art) p{margin-left:auto;margin-right:auto}
  .hero .hero-bio{text-align:left}
  .hero .ctas{flex-direction:column;align-items:stretch;max-width:28rem;margin-left:auto;margin-right:auto}
  .hero .ctas .btn{justify-content:center;text-align:left}
  .hero .badges{margin-left:auto;margin-right:auto;justify-items:center}
  .hero .badges li{text-align:left}
}
.kicker{display:block;font-family:var(--head);font-weight:600;font-size:.9rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green);margin:0 0 .4rem}
.kicker-light{color:var(--green-dark);display:flex;align-items:center;gap:.6rem}
.kicker-light::before{content:"";width:1.6rem;height:3px;border-radius:2px;background:var(--green)}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:18rem}
.hero-arc{display:none}
/* Green swirl (desktop only). The SVG covers the full hero height, from the top edge down under the bottom wave, so
   there is never a navy band above the wave. Its right side is solid, and .hero-art::before carries the same green on to
   the viewport edge, so the curve is always fully visible and the shape bleeds off the right edge cleanly. #21BD5D is
   the old #22C55E at .95 opacity over navy, as a solid colour so the two pieces join without a seam. */
@media (min-width:64.01rem){
  .hero-art{align-self:stretch}
  .hero-arc{display:block;position:absolute;left:8%;top:-2.2rem;width:96%;height:calc(100% + 7.4rem);max-width:none;z-index:-1;pointer-events:none}
  .hero-art::before{content:"";position:absolute;top:-2.2rem;height:calc(100% + 7.4rem);left:calc(104% - 2px);
    right:calc((min(100vw,72rem) - 100vw) / 2 - 5rem);background:#21BD5D;z-index:-1;pointer-events:none}
}
.hero-art .book{z-index:1}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:3.2rem;z-index:2;display:block}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0 1.6rem}
.badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.2rem;max-width:36rem}
@media (min-width:40rem) and (max-width:64rem),(min-width:75rem){.badges{grid-template-columns:repeat(4,minmax(0,1fr))}}
.badges li{display:flex;align-items:center;gap:.55rem;margin:0;font-size:.85rem;line-height:1.3;color:#DCE5EE}
.badges .ico{width:1.9rem;height:1.9rem;color:var(--green)}

/* Real book covers */
.book{position:relative;display:block;width:100%;max-width:15rem;margin:0 auto 1rem;border-radius:3px 8px 8px 3px;box-shadow:0 12px 26px rgba(11,42,70,.25)}
.book img{display:block;width:100%;height:auto;border-radius:3px 8px 8px 3px}
.book::after{content:"";position:absolute;inset:0 auto 0 0;width:7%;border-radius:3px 0 0 3px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.12) 55%,rgba(0,0,0,0));pointer-events:none}
.book-3d{max-width:21rem;margin:0 auto;transform:perspective(1600px) rotateY(-14deg) rotateX(2deg);box-shadow:-18px 26px 40px rgba(0,0,0,.45),-2px 0 0 #0a2238}
@media (max-width:64rem){.book-3d{max-width:min(260px,70vw);transform:perspective(1600px) rotateY(-8deg)}}
@media (min-width:40rem) and (max-width:64rem){.book-3d{max-width:18rem}}
.cover-wrap{position:relative}
.ribbon{position:absolute;top:1rem;right:50%;transform:translateX(8.5rem) rotate(8deg);background:var(--green);color:var(--navy);font-family:var(--head);font-weight:700;font-size:.95rem;padding:.25em .8em;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.25);z-index:2}
.hero .ribbon{transform:translateX(10rem) rotate(8deg)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--head);font-weight:600;font-size:1.05rem;line-height:1.2;text-decoration:none;padding:.8em 1.3em;border-radius:10px;border:2px solid transparent;cursor:pointer;min-height:48px}
.btn .ico{width:1.5em;height:1.5em}
.btn small{display:block;font-family:var(--body);font-weight:400;font-size:.8rem;margin-top:.2rem;opacity:.9}
.btn-sm{font-size:.9rem;padding:.55em .85em;min-height:44px;gap:.45rem}
@media (min-width:64.01rem){.head-row{column-gap:1.5rem}}
.btn-sm .ico{width:1.2em;height:1.2em}
.btn-primary{background:var(--green);color:var(--navy)}
.btn-primary:hover{background:#4ADE80}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--green-soft)}
.btn[aria-disabled="true"]{cursor:not-allowed}
.btn-note{display:block;font-size:.9rem;color:var(--text);margin-top:.35rem}
.hero .btn-note{color:#B8C6D4}
.arrow-link{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--head);font-weight:600;color:var(--green-dark);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:.3em}

/* Sections and cards */
.section{padding:2.6rem 0}
.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:44rem){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.3rem;box-shadow:0 1px 2px rgba(11,42,70,.04)}
.card h3{margin-top:0}
.card h3 a{color:var(--navy)}
.card p:last-child{margin-bottom:0}
.card a.more{font-weight:600}
.card.link-card:hover{border-color:var(--green)}

/* Green circle-tick list */
ul.ticks{list-style:none;padding:0}
ul.ticks li{position:relative;padding-left:2.2rem;margin-bottom:.6rem}
ul.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}

/* Explain section with the open-book example */
.explain-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:56rem){.explain-grid{grid-template-columns:1fr 1.1fr}}
.explain h2{margin-top:.2em;font-size:clamp(1.8rem,4vw,2.5rem)}
.openbook{margin:0;display:grid;grid-template-columns:1fr;gap:0;filter:drop-shadow(0 18px 24px rgba(11,42,70,.18));transform:rotate(-1.5deg)}
@media (min-width:36rem){.openbook{grid-template-columns:1fr 1fr}}
.openbook .page{background:#fff;padding:1.4rem 1.3rem;border:1px solid var(--line);font-size:.95rem}
.openbook .page.left{border-radius:14px 4px 4px 14px;background:linear-gradient(90deg,#fff 85%,#EEF2F6)}
.openbook .page.right{border-radius:4px 14px 14px 4px;background:linear-gradient(90deg,#EEF2F6,#fff 15%)}
@media (max-width:35.99rem){.openbook{transform:none}.openbook .page.left{border-radius:14px 14px 0 0}.openbook .page.right{border-radius:0 0 14px 14px}}
.openbook h3{margin:0 0 .8rem;font-size:1.15rem}
.openbook .bubble{background:#EEF2F6;border-radius:16px 16px 16px 4px;padding:.8rem 1rem;line-height:1.45;color:#1f2d3d}
.openbook .fake-link{color:var(--blue);text-decoration:underline;overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.06em;padding:.35em .9em;border-radius:8px;margin:.9rem 0 .6rem}
.pill .ico{width:1.1em;height:1.1em}
.redflags{padding-left:1.1rem;margin:0}
.redflags li::marker{color:var(--red)}
ol.spot{list-style:none;counter-reset:n;padding:0;margin:0}
ol.spot li{counter-increment:n;position:relative;padding-left:2.4rem;min-height:1.8rem;margin-bottom:.75rem;line-height:1.35}
ol.spot li::before{content:counter(n);position:absolute;left:0;top:-.1em;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--red);color:#fff;font-family:var(--head);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}

/* Callouts: Tip green, Important blue, Warning red, quote box navy */
.callout{border-left:8px solid var(--navy);background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.4rem 0}
.callout.tip,.callout.good{border-left-color:var(--green);background:var(--green-soft);border-color:var(--green-soft);border-left-color:var(--green)}
.callout.important{border-left-color:var(--blue);background:var(--blue-soft)}
.callout.warn{border-left-color:var(--red);background:var(--red-soft);border-color:var(--red-soft);border-left-color:var(--red)}
.callout.quote{background:var(--navy);color:#fff;border:0;border-radius:var(--radius)}
.callout h2,.callout h3{margin-top:0}
.callout p:last-child,.callout ul:last-child,.callout ol:last-child{margin-bottom:0}
.todo{background:#fff3a6;outline:2px dashed #8a6d00;padding:0 .25em;border-radius:3px;font-weight:600}

/* Numbers people must use: big and unmissable */
.numbers{display:grid;gap:.8rem;grid-template-columns:1fr;margin:1.2rem 0}
@media (min-width:44rem){.numbers{grid-template-columns:repeat(2,1fr)}}
.num{border:2px solid var(--navy);border-radius:var(--radius);padding:.9rem 1.1rem;background:#fff}
.num b{display:block;font-family:var(--head);font-size:clamp(1.3rem,4.6vw,1.75rem);line-height:1.15;color:var(--navy);font-weight:700;overflow-wrap:anywhere}
.num span{display:block}

/* Steps: icon-style numbers in light-green circles */
ol.steps{list-style:none;counter-reset:s;padding:0}
ol.steps>li{counter-increment:s;position:relative;padding:0 0 0 3.4rem;margin-bottom:1.1rem;min-height:2.6rem}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:-.05em;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--green-soft);color:var(--green-dark);font-family:var(--head);font-weight:700;display:flex;align-items:center;justify-content:center}

/* Stop, Check, Call: red, blue, green */
.scc{display:grid;gap:.8rem;grid-template-columns:1fr;margin:1.4rem 0}
@media (min-width:44rem){.scc{grid-template-columns:repeat(3,1fr)}}
.scc div{border-radius:var(--radius);padding:1rem 1.1rem;color:#fff}
.scc div:nth-child(1){background:var(--red)}
.scc div:nth-child(2){background:var(--blue)}
.scc div:nth-child(3){background:var(--green-dark)}
.scc b{display:block;font-family:var(--head);font-size:1.6rem;color:#fff}

/* Example scams: always stamped */
.example{position:relative;border:2px solid var(--line);border-radius:18px;background:#fff;padding:1rem;margin:1.6rem 0;max-width:34rem}
.example .meta{font-size:1rem;color:var(--text);margin-bottom:.4rem}
.example .bubble{background:#EEF2F6;border-radius:18px 18px 18px 6px;padding:.8rem 1rem;font-size:1.05rem;line-height:1.45;color:#1f2d3d}
.example .mail{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;font-size:1.02rem}
.example .mail .hdr{font-size:.95rem;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:.6rem}
.example .fake-link{color:var(--blue);text-decoration:underline;word-break:break-all}
.example .fake-btn{display:inline-block;background:var(--blue);color:#fff;padding:.45em 1em;border-radius:6px;font-weight:600}
.stamp{position:absolute;top:-.9rem;right:.8rem;transform:rotate(-6deg);border:3px solid var(--red);color:var(--red);background:#fff;font-family:var(--head);font-weight:700;font-size:.95rem;letter-spacing:.06em;padding:.05em .5em;border-radius:6px}
.example figcaption{font-size:1rem;color:var(--text);margin-top:.6rem}
.flags{padding-left:1.2rem}
.flags li::marker{color:var(--red);font-weight:700}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:var(--radius);padding:.2rem 1.1rem;margin:.7rem 0;background:#fff}
.faq summary{cursor:pointer;font-family:var(--head);font-weight:600;color:var(--navy);padding:.75rem 0;list-style-position:outside}
.faq details[open] summary{border-bottom:1px solid var(--line);margin-bottom:.6rem}

/* Checklist (Is this a scam?): navy band with clipboard, navy tick boxes */
.check{border:1px solid var(--line);border-radius:16px;background:#fff;margin:1.4rem 0;overflow:hidden;box-shadow:0 2px 6px rgba(11,42,70,.06)}
.check-band{display:flex;align-items:center;gap:.7rem;background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;font-size:1.25rem;padding:.85rem 1.1rem}
.check-band .ico{width:1.6rem;height:1.6rem;color:var(--green)}
.check fieldset{border:0;padding:.9rem 1.1rem 0;margin:0}
.check legend{font-size:1.15rem;margin:0;padding-top:.9rem;font-weight:600}
.q{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem .1rem;border-top:1px solid var(--line)}
.q:first-of-type{border-top:0}
.q input{width:1.75rem;height:1.75rem;flex:none;margin-top:.15rem;accent-color:var(--navy)}
.q label{cursor:pointer}
.q label b{display:block;color:var(--navy)}
.q small{display:block;font-size:1rem;color:var(--text)}
.result{border-radius:12px;padding:1rem 1.1rem;margin:1rem 1.1rem 1.1rem;background:var(--bg);border:2px solid var(--navy)}
.result.stop{background:var(--red-soft);border-color:var(--red)}
.result h3{margin-top:0}

/* Breadcrumb and page meta */
.crumbs{font-size:.95rem;margin:1.2rem 0 0;color:var(--text)}
.crumbs a{color:var(--text)}
.checked{font-size:.95rem;color:var(--text);border-top:1px solid var(--line);padding-top:.8rem;margin-top:2rem}

/* Footer */
.site-foot{background:var(--navy);color:#CBD5E1;margin-top:3rem;padding:2.2rem 0 1.2rem;font-size:1rem}
.site-foot a{color:#fff}
.site-foot strong,.site-foot b{color:#fff}
.foot-grid{display:grid;gap:1.4rem}
@media (min-width:48rem){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.site-foot h2{color:#fff;font-size:1.1rem;margin:0 0 .5rem}
.site-foot ul{list-style:none;padding:0;margin:0}
.foot-logo{margin:0 0 .6rem}
.foot-logo .logo{width:min(19rem,100%);height:auto;display:block}
.foot-logo .wordmark-link{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.foot-logo .shield{width:2.2rem;height:2.2rem}
.foot-logo .wordmark{font-size:1.3rem}
.small{font-size:.95rem}

@media print{
  .site-head,.site-foot,.draftbar,.offerbar,.btn,.menu-btn,.hero-arc,.hero-wave,.badges,.skip{display:none}
  body{font-size:12pt;background:#fff;color:#000}
  .hero{background:#fff;color:#000;padding:0}.hero h1,.hero .hero-sub,.hero p{color:#0B2A46}
  .check{break-inside:avoid;page-break-inside:avoid;box-shadow:none;border:1px solid #999}
  .check-band,.scc div,.pill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .book-3d{transform:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* Home hero v2 (Oct 2026): longer headline, tick bullets, repeat CTAs, inert email capture */
.hero h1.h1-long{font-size:clamp(2rem,5.6vw,3rem);line-height:1.1;letter-spacing:-.015em;max-width:36rem}
.hero .hero-sub2{color:#DCE5EE;max-width:36rem;font-size:1rem;line-height:1.6}
.hero-ticks{margin:1rem 0 0;max-width:36rem}
.hero-ticks li{color:#C3CFDB;font-size:1rem;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-left:1.75rem;margin-bottom:.4rem}
.hero-ticks li strong{color:#fff;font-weight:500}
.hero-ticks li::before{width:1.15rem;height:1.15rem;top:.18em}
@media (max-width:64rem){.hero .hero-ticks{text-align:left;margin-left:auto;margin-right:auto;max-width:28rem}}
.cta-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.4rem;margin:2rem 0 0;padding:1.1rem 1.3rem;background:var(--green-soft);border:1px solid #BBE9CB;border-radius:var(--radius)}
.cta-line p{margin:0;flex:1 1 18rem;font-family:var(--head);font-weight:600;color:var(--navy);font-size:1.05em;line-height:1.4}
@media (max-width:40rem){.cta-line{flex-direction:column;align-items:stretch;text-align:center}.cta-line p{flex:none}.cta-line .btn{justify-content:center;text-align:left}}
.signup{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.2rem 0 1.6rem;max-width:44rem}
.signup label{display:block;font-weight:600;color:var(--navy);margin-bottom:.4rem}
.signup .opt{font-weight:400;color:var(--text)}
.signup-row{display:flex;flex-wrap:wrap;gap:.7rem}
.signup input[type=email]{flex:1 1 15rem;min-height:48px;font:inherit;font-size:1rem;padding:.6rem .8rem;border:2px solid #94A3B8;border-radius:10px;background:#fff;color:var(--navy)}
.signup input[type=email]:disabled{background:#F1F5F9;border-style:dashed;cursor:not-allowed}
.signup .btn{flex:0 0 auto}
.signup .btn:disabled{opacity:.6;cursor:not-allowed}
.signup-note{font-size:.9rem;margin:.6rem 0 0}
.signup-sm{padding:0;border:0;background:none;margin:.6rem 0 1rem}
.signup-sm .btn{min-height:48px}
@media (max-width:40rem){.signup-row{flex-direction:column}.signup-row input[type=email]{flex:none;width:100%}.signup-row .btn{justify-content:center}}
.more-guides{margin-top:.4rem}
.result-book{margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);font-weight:600}
@media (min-width:64.01rem){.hero .hero-ticks{margin-top:.6rem}.hero .hero-ticks li{margin-bottom:.35rem}.hero .ctas{margin-top:1.1rem}}

/* Home v3 (Oct 2026): sales sections combined from the example page */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem .6rem}
.chips li{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-size:.85rem;line-height:1.3;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}
.chips .ico{width:1.05rem;height:1.05rem;color:var(--green);flex:none}
@media (max-width:64rem){.hero .chips{justify-content:center;max-width:30rem;margin:0 auto}}
.chips-dark li{background:var(--green-soft);border-color:#BBE9CB;color:var(--navy)}
.chips-dark .ico{color:var(--green-dark)}
.h2-big{font-size:clamp(1.8rem,4vw,2.5rem);margin-top:.2em}
ol.levers{list-style:none;counter-reset:lv;padding:0;margin:1.4rem 0;display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:44rem){ol.levers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){ol.levers{grid-template-columns:repeat(4,1fr)}}
ol.levers li{counter-increment:lv;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;margin:0}
ol.levers li::before{content:counter(lv);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--red);color:#fff;font-family:var(--head);font-weight:700;margin-bottom:.6rem}
ol.levers b{display:block;font-family:var(--head);color:var(--navy);font-size:1.1rem;margin-bottom:.3rem}
ol.levers span{display:block;font-size:.95rem;line-height:1.5}
/* Example scam mock-ups (HTML/CSS, made up, .example addresses, Ofcom drama numbers) */
.scams{display:grid;gap:1.4rem;grid-template-columns:1fr;margin:1.6rem 0}
@media (min-width:56rem){.scams{grid-template-columns:repeat(2,1fr)}}
.scam{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.2rem 1.1rem}
.scam h3{margin:0 0 1.2rem}
.mock{position:relative;background:#fff;border:2px solid #CBD5E1;border-radius:18px;padding:0;overflow:visible;box-shadow:0 10px 24px rgba(11,42,70,.10);font-size:.95rem;line-height:1.45;color:#1f2d3d;max-width:26rem;margin:0 auto}
.mock-mail{max-width:none;border-radius:10px}
.ex-stamp{position:absolute;top:-.85rem;right:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.35rem;background:var(--red);color:#fff;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.06em;padding:.25em .7em;border-radius:6px;transform:rotate(-3deg);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ex-stamp .ico{width:1rem;height:1rem}
.mp-top{display:flex;flex-direction:column;align-items:center;padding:.9rem 1rem .6rem;border-bottom:1px solid var(--line);background:#F1F5F9;border-radius:16px 16px 0 0}
.mp-from{font-weight:600;color:var(--navy)}
.mp-sub{font-size:.8rem;color:var(--text)}
.mp-body{padding:.9rem .9rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.bub{margin:0;max-width:88%;padding:.6rem .85rem;border-radius:16px 16px 16px 4px;background:#EEF2F6}
.bub.out{align-self:flex-end;border-radius:16px 16px 4px 16px;background:#DCF3E4}
.mock-chat .bub.in{background:#fff;border:1px solid var(--line)}
.mock-chat .mp-body{background:#EFEAE2}
.mock .fake-link{color:var(--blue);text-decoration:underline;overflow-wrap:anywhere}
.mock .fake-btn{display:inline-block;background:var(--blue);color:#fff;padding:.45em 1em;border-radius:6px;font-weight:600}
i.fl{display:inline-flex;align-items:center;justify-content:center;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-family:var(--head);font-weight:700;font-size:.78rem;vertical-align:middle;margin-left:.15rem}
.mm-head{background:#F1F5F9;border-bottom:1px solid var(--line);padding:.8rem 1rem;border-radius:8px 8px 0 0}
.mm-head p{margin:.15rem 0;overflow-wrap:anywhere}
.mm-head span{display:inline-block;min-width:4.2rem;font-size:.8rem;color:var(--text);text-transform:uppercase;letter-spacing:.05em}
.mm-body{padding:.9rem 1rem 1rem}
.mm-body p{margin:.5rem 0}
.mm-hover{font-size:.8rem;background:#FFF8DB;border:1px dashed #B59200;border-radius:6px;padding:.3rem .5rem}
.mock-call{background:#0B2A46;border-color:#0B2A46}
.mc-screen{display:flex;flex-direction:column;align-items:center;padding:1.1rem 1rem .8rem;color:#fff;text-align:center}
.mc-label{font-size:.8rem;color:#B8C6D4}
.mc-name{font-family:var(--head);font-weight:700;font-size:1.3rem}
.mc-note{font-size:.78rem;color:#FCA5A5}
.mock-call .mp-body{background:#fff;border-radius:0 0 16px 16px}
.flaglist{list-style:none;counter-reset:fl;padding:0;margin:1.2rem 0 .8rem}
.flaglist li{counter-increment:fl;position:relative;padding-left:2.1rem;margin:0 0 .55rem;font-size:.95rem;line-height:1.5}
.flaglist li::before{content:counter(fl);position:absolute;left:0;top:.05em;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--red);color:#fff;font-family:var(--head);font-weight:700;font-size:.78rem;display:flex;align-items:center;justify-content:center}
.flaglist b{color:var(--navy)}
.scam-do{margin:0;font-size:.95rem;background:var(--green-soft);border-radius:10px;padding:.7rem .9rem;line-height:1.5}
.scam-do b{color:var(--navy)}
.getcards .ch{margin:0 0 .3rem;font-size:.8rem;font-family:var(--head);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dark)}
.who-grid{display:grid;gap:1.4rem;align-items:start}
@media (min-width:56rem){.who-grid{grid-template-columns:1fr 1.1fr}}
.who-grid h2{margin-top:.2em}
.author-band{background:var(--navy);color:#DCE5EE}
.author-band h2{color:#fff;margin-top:.2em}
.author-band a.more{color:#fff}
.author-band :focus-visible{outline-color:var(--green)}
.author-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:56rem){.author-grid{grid-template-columns:1.2fr 1fr}}
.buy-card{background:#fff;color:var(--text);border-radius:16px;padding:1.4rem;display:grid;gap:.8rem;justify-items:start;box-shadow:0 16px 30px rgba(0,0,0,.25)}
.buy-card h3{margin:0}
.buy-card p{margin:0}
.buy-card .book{max-width:9rem}
@media (max-width:40rem){.buy-card{justify-items:stretch;text-align:center}.buy-card .book{margin:0 auto}.buy-card .chips{justify-content:center}.buy-card .btn{justify-content:center;text-align:left}}
.biz-grid{display:grid;gap:1.6rem;align-items:center}
@media (min-width:48rem){.biz-grid{grid-template-columns:14rem 1fr}}
.biz-cover .book{max-width:14rem;margin:0 auto;display:block}
.biz-grid h2{margin-top:.2em}
.scams{align-items:start}
.mm-head p{display:flex;gap:.5rem;align-items:baseline}
.mm-head span{flex:none}
@media (min-width:40.01rem){.buy-card{grid-template-columns:8.5rem 1fr;column-gap:1.3rem;align-items:start}.buy-card .book{grid-row:1 / span 5;margin:0;max-width:8.5rem}}
/* Fold / tablet fix (26 Oct 2026): below 64rem every capped-width child of the hero copy is centred as a block,
   not just its text, so the stack stays centred at any width (Galaxy Z Fold inner screen ~850-1000px) */
@media (max-width:64rem){
  .hero-grid>div:not(.hero-art)>*{margin-left:auto;margin-right:auto}
  .hero-grid>div:not(.hero-art) h1,.hero .h1-long{margin-left:auto;margin-right:auto}
}

/* Side space (26 Oct 2026): phones 1.5rem, tablets and Fold (600 to 1023px) 2.75rem, desktop 4rem, max width 72rem */
@media (min-width:37.5rem){.wrap{padding-left:2.75rem;padding-right:2.75rem}}
@media (min-width:64rem){.wrap{padding-left:4rem;padding-right:4rem}}
@media (max-width:22rem){.wrap{padding-left:1.25rem;padding-right:1.25rem}}
/* Reader review slots (placeholders until real reviews exist; see REVIEWS in build.py) */
.reviews{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:1.4rem}
@media (min-width:48rem){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:0 6px 18px rgba(11,42,70,.06)}
.review-mark{font-family:var(--head);font-size:3.6rem;line-height:.6;color:var(--green);height:1.6rem}
.review blockquote{margin:0}.review blockquote p{margin:0;color:var(--navy)}
.review figcaption{font-family:var(--head);font-weight:600;color:var(--navy);font-size:.95rem;border-top:1px solid var(--line);padding-top:.7rem;margin-top:auto}
.review-empty{border-style:dashed;border-color:#CBD5E1;box-shadow:none}
.review-empty .review-mark{color:#CBD5E1}
.review-empty figcaption{color:#94A3B8}
.review-stars{display:flex;gap:.3rem}
.review-stars i{width:1.05rem;height:1.05rem;border:1.5px solid #CBD5E1;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#E2E8F0}
.review-text{margin:0;color:#64748B;font-style:italic}
.review-tag{position:absolute;top:1rem;right:1rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#FFF8DB;color:#6B5200;border:1px dashed #B59200;border-radius:6px;padding:.15em .5em}

/* 3D book mockup (26 Oct 2026): pure CSS. .book = sizing + drop shadow; .book-inner = turned book with a cream
   page block on the right (fore-edge), spine shading on the left. Falls back to the flat cover without 3D support. */
.book{box-shadow:none;border-radius:0;--turn:-26deg;--tilt:3deg;
  filter:drop-shadow(-14px 22px 18px rgba(0,0,0,.42)) drop-shadow(-2px 4px 4px rgba(0,0,0,.25))}
.book::after{content:none}
.book-3d{transform:none;box-shadow:none}
.book-inner{position:relative;display:block;transform-style:preserve-3d;
  transform:perspective(1400px) rotateY(var(--turn)) rotateX(var(--tilt));transform-origin:50% 50%}
.book-inner picture{display:block;position:relative;transform:translateZ(0)}
.book .book-inner img{border-radius:2px 5px 5px 2px}
/* spine shading and a soft sheen on the cover */
.book-inner picture::after{content:"";position:absolute;inset:0;border-radius:2px 5px 5px 2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.12) 2.2%,rgba(255,255,255,.22) 3.4%,rgba(255,255,255,0) 6%,rgba(0,0,0,.07) 7.5%,rgba(0,0,0,0) 10%),
             linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 18%,rgba(0,0,0,0) 85%,rgba(0,0,0,.12))}
/* page block: sits on the right edge, folded back 90deg so it reads as the paper edge */
.book-inner::before{content:"";position:absolute;top:1.1%;bottom:1.1%;left:calc(100% - 2px);width:11%;
  transform-origin:0 50%;transform:rotateY(90deg);border-radius:0 3px 3px 0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 14%,rgba(0,0,0,0) 86%,rgba(0,0,0,.22)),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 4%,rgba(0,0,0,0) 96%,rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg,#FBF7EC 0 1px,#EDE6D3 1px 2px,#F7F2E4 2px 3px);
  box-shadow:inset -2px 0 0 #0B2A46}
.book-inner::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;transform:translateZ(-1px);
  background:#0B2A46;border-radius:2px 5px 5px 2px}
.hero-art .book{z-index:1}
@media (min-width:64.01rem){.hero .book{--turn:-30deg}}
@media (max-width:64rem){.book{--turn:-26deg}}
.buy-card .book,.biz-cover .book{filter:drop-shadow(-8px 12px 10px rgba(11,42,70,.30)) drop-shadow(-1px 2px 2px rgba(11,42,70,.2))}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (min-width:64.01rem){
  .book-inner{transition:transform .5s ease}
  .book:hover .book-inner{transform:perspective(1400px) rotateY(calc(var(--turn) + 8deg)) rotateX(var(--tilt))}}
@supports not (transform-style:preserve-3d){.book-inner{transform:none}.book-inner::before,.book-inner::after{display:none}}
@media print{.book{filter:none}.book-inner{transform:none}.book-inner::before,.book-inner::after,.book-inner picture::after{display:none}}

/* Floating hero book (26 Oct 2026): .book-inner rises and falls using the separate translate property, so the 3D
   transform stays intact; a ground shadow (.book-3d::after) shrinks and softens as the book rises. Hero books only.
   Off for prefers-reduced-motion. */
.book-3d::after{content:"";position:absolute;left:12%;right:4%;bottom:-1.6rem;height:1.4rem;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none;z-index:-1}
@keyframes book-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes book-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.55}}
@media (prefers-reduced-motion:no-preference){
  .book-3d .book-inner{animation:book-float 5.5s ease-in-out infinite}
  .book-3d::after{animation:book-shadow 5.5s ease-in-out infinite}
  .hero .ribbon{animation:book-float 5.5s ease-in-out infinite}
}
@media print{.book-3d::after{display:none}.book-3d .book-inner,.hero .ribbon{animation:none}}
@media (min-width:64.0625rem){.hero .chips{flex-wrap:nowrap;gap:.5rem}.hero .chips li{white-space:nowrap;font-size:.8rem;padding:.32rem .6rem}}
.hero .hero-sub2{color:#C3CFDB;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hero .hero-sub2 strong{font-weight:500;color:#fff}
.hero h1 .gi{color:var(--green)}
@media (min-width:64.0625rem){.hero-grid{grid-template-columns:1.5fr 1fr}.hero h1.h1-long{font-size:min(3.375rem,4.4vw);max-width:40rem;line-height:1.06}}
.faq summary{list-style:none;display:flex;align-items:flex-start;gap:.7rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:none;width:.5rem;height:.5rem;margin-top:.42em;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);transition:transform .2s}
.faq details[open] summary::before{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.faq summary::before{transition:none}}
.faq details{padding:.25rem 1.5rem}.faq summary{gap:.85rem;padding:.9rem 0}.faq summary::before{width:.55rem;height:.55rem}
.faq summary::before{margin-top:.5em}

/* "Look inside first" popup (26 Oct 2026): native <dialog>, opened by sample.js from any [data-sample] link.
   DRAFT / INERT form: nothing is sent or stored (see sample.js and README before going live). */
html.dialog-open{overflow:hidden}
.sample-dialog{padding:0;border:0;background:transparent;max-width:min(30rem,calc(100vw - 1.5rem));width:100%;
  max-height:calc(100dvh - 1.5rem);overflow:visible;color:var(--text)}
.sample-dialog::backdrop{background:rgba(11,42,70,.72)}
.sample-card{position:relative;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  padding:1.6rem 1.6rem 1.4rem;max-height:calc(100dvh - 1.5rem);overflow-y:auto;font-size:1rem;line-height:1.55}
.sample-close{position:absolute;top:.7rem;right:.7rem;width:44px;height:44px;display:grid;place-items:center;border:0;
  border-radius:50%;background:#F1F5F9;color:var(--navy);cursor:pointer;z-index:2}
.sample-close:hover{background:var(--green-soft)}
.sample-close svg{width:20px;height:20px}
.sample-top{display:grid;grid-template-columns:5.6rem 1fr;gap:1.1rem;align-items:center;margin:0 3rem 1rem 0}
.sample-cover .book{max-width:5.6rem;margin:0;--turn:-22deg;filter:drop-shadow(-6px 9px 8px rgba(11,42,70,.30)) drop-shadow(-1px 2px 2px rgba(11,42,70,.2))}
.sample-dialog .kicker{margin:0 0 .3rem;font-size:.78rem}
.sample-dialog h2{font-size:1.45rem;line-height:1.2;margin:0;color:var(--navy)}
.sample-dialog h2:focus{outline:none}
.sample-dialog p{margin:0 0 .8rem}
.sample-small{font-size:.92rem;color:#475569}
.sample-form label{display:block;font-weight:600;font-size:.95rem;margin:.9rem 0 .3rem;color:var(--navy)}
.sample-form label .opt{font-weight:400;color:#64748B}
.sample-form input{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:.7rem .85rem;min-height:48px;
  border:2px solid #64748B;border-radius:10px;background:#fff;color:var(--navy)}
.sample-form input:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--navy)}
.sample-send{width:100%;justify-content:center;margin-top:1.1rem}
.sample-privacy{font-size:.85rem;color:#64748B;text-align:center;margin:.7rem 0 0 !important}
.sample-done{padding-top:.4rem}
.sample-done h2{margin:0 3rem .7rem 0}
.sample-ok{margin-top:.4rem}
@media (max-width:22.5rem){.sample-card{padding:1.3rem 1.1rem 1.1rem}.sample-top{grid-template-columns:4.4rem 1fr;gap:.8rem;margin-right:2.6rem}
  .sample-cover .book{max-width:4.4rem}.sample-dialog h2{font-size:1.25rem}}
@media (prefers-reduced-motion:no-preference){
  .sample-dialog[open] .sample-card{animation:sample-in .22s ease-out}
  .sample-dialog[open]::backdrop{animation:sample-fade .22s ease-out}
}
@keyframes sample-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sample-fade{from{opacity:0}to{opacity:1}}
@media print{.sample-dialog{display:none}}

/* Business landing page (28 Oct 2026, from the supplied design). Scoped classes; reuses hero, levers, chips, cards, ticks,
   cta-line, who-grid, author-grid, faq and the sample dialog. [Bracketed] placeholders use .todo (yellow, dashed). */
.draft-note{display:block;margin:1.2rem 0 0;padding:.5rem .8rem;font-size:.95rem;font-weight:500;color:#4A3B00}
.btn .todo{color:#3D3000;font-weight:700;padding:0 .3em}
.hero .chips .todo{color:#3D3000;font-weight:600}
.biz-cta{margin-top:1.6rem}
.rule-box{display:grid;gap:1.4rem 2.4rem;align-items:center;background:var(--navy);color:#C3CFDB;border-radius:16px;padding:1.6rem 1.5rem;margin:1.4rem 0 0}
@media (min-width:56rem){.rule-box{grid-template-columns:1.25fr 1fr;padding:2.2rem 2.4rem}}
.rule-box blockquote{margin:0;padding-left:1.1rem;border-left:5px solid var(--green)}
.rule-box blockquote p{margin:0;font-family:var(--head);font-weight:600;color:#fff;font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.3}
.rule-box strong{color:#fff}
.rule-box p{font-size:1rem;line-height:1.6}
.rule-box div p:last-child{margin-bottom:0}
.scc-line{font-family:var(--head);font-weight:600;color:var(--navy);font-size:1.1em;margin-top:1.2rem}
.scc-line .gd{color:var(--green-dark)}
.scam-tags{gap:.55rem .6rem;margin-top:1.2rem}
.scam-tags li{font-size:.95rem;padding:.45rem .85rem}
.band-navy{background:var(--navy);color:#C3CFDB}
.band-navy h2{color:#fff}
.band-navy strong{color:#fff}
.band-navy a{color:#fff}
.band-navy :focus-visible{outline-color:var(--green)}
.band-centre{text-align:center;max-width:52rem}
.band-centre p{max-width:44rem;margin-left:auto;margin-right:auto;font-size:1.05rem}
.band-centre .ctas{justify-content:center}
.band-small{font-size:.95rem !important;color:#9FB0C2}
ol.chapters{counter-reset:ch;list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.15rem 2.4rem;grid-template-columns:1fr}
@media (min-width:48rem){ol.chapters{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(7,auto)}}
ol.chapters li{counter-increment:ch;position:relative;padding:.55rem 0 .55rem 2.7rem;margin:0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.45;color:var(--navy)}
ol.chapters li::before{content:counter(ch);position:absolute;left:0;top:.45rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--green-soft);color:var(--green-dark);font-family:var(--head);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.biz-author{align-items:start}
.price-card{background:var(--navy);color:#C3CFDB;border-radius:16px;padding:1.6rem 1.5rem;box-shadow:0 16px 30px rgba(11,42,70,.22)}
.price-card h2{color:#fff;margin:0 0 .4rem;font-size:1.5rem}
.price-card .price{font-family:var(--head);font-weight:700;font-size:2.6rem;line-height:1.1;color:var(--green);margin:0 0 .8rem}
.price-card .price .todo{color:#3D3000}
.price-card .ticks li{font-size:1rem;color:#DCE5EE}
.price-card .btn{width:100%;justify-content:center}
.price-card .price-micro{font-size:.9rem;margin:.9rem 0 0;color:#9FB0C2}
.price-card :focus-visible{outline-color:var(--green)}
.bundle h2{margin:0 0 .4rem;font-size:clamp(1.35rem,3vw,1.7rem)}
.bundle>div{flex:1 1 22rem}
.bundle .bundle-text{font-family:var(--body);font-weight:400;color:var(--text);font-size:1rem;margin:0}
@media (max-width:64rem){.hero-biz .hero-ticks li{text-align:left}}
.hero-biz h1{text-wrap:balance}
.price-card .todo,.band-navy .todo,.hero .todo{color:#3D3000}
@media (min-width:44rem) and (max-width:63.99rem){#get .cards .card:last-child:nth-child(odd){grid-column:1 / -1}}
@media (min-width:64rem){#get .cards.three .card:last-child:nth-child(3n+1){grid-column:1 / -1}}
@media (max-width:40rem){.bundle>div{flex:none}}

/* Home brand hub (28 Oct 2026, from the home page visual guide). Scoped .hub-* classes, home page only.
   Business accent: light blue #93C5FD with navy text (10.3:1). Scammed band: warm cream with dark brown text. */
.hub-hero{padding:2.6rem 0 2rem}
.hub-hero-copy{max-width:46rem}
.hero h1.hub-h1{font-size:clamp(2.4rem,6.4vw,4.1rem);line-height:1.05;margin:.3em 0 .4em}
.hub-lede{max-width:38rem}
.hub-paths{display:grid;gap:1rem;margin:1.8rem 0 1.4rem;grid-template-columns:1fr}
@media (min-width:44rem){.hub-paths{grid-template-columns:repeat(2,1fr)}}
.hub-path{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.3rem 1.4rem;border-radius:var(--radius);background:#123a5e;border:1px solid #2B5479;text-decoration:none;color:#DCE5EE;font-weight:400;transition:border-color .15s}
.hub-path:hover{border-color:var(--green)}
.hub-path-biz:hover{border-color:#93C5FD}
.hub-path-kicker{font-family:var(--head);font-weight:600;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}
.hub-path-biz .hub-path-kicker{color:#93C5FD}
.hub-path-title{font-family:var(--head);font-weight:700;font-size:1.55rem;line-height:1.15;color:#fff}
.hub-path-text{font-size:1rem;line-height:1.55}
.hub-path-btn{display:inline-flex;align-items:center;gap:.45rem;margin-top:.5rem;font-family:var(--head);font-weight:600;font-size:.98rem;padding:.55em 1em;border-radius:8px;background:var(--green);color:var(--navy);min-height:44px}
.hub-path-biz .hub-path-btn{background:#93C5FD}
.hub-now{margin:0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);max-width:none!important;font-size:1rem}
.hero .hub-now a{color:var(--green)}
.hub-scammed{background:#FDF0E1;border-bottom:1px solid #F2DCC2;padding:1.8rem 0}
.hub-scammed h2{color:#4A2511;margin:0 0 .4rem;font-size:1.55rem}
.hub-scammed p{color:#5B3418;margin:0;max-width:38rem;font-size:1.05rem}
.hub-scammed-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.1rem 2rem}
.hub-btn-navy{background:var(--navy);color:#fff}
.hub-btn-navy:hover{background:#123a5e}
.hub-btn-navy:disabled{opacity:.6;cursor:not-allowed}
.hub-btn-biz{background:#93C5FD;color:var(--navy)}
.hub-btn-biz:hover{background:#BFDBFE}
.hub-narrow{max-width:34rem}
.hub-scc{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;background:var(--navy);border-radius:var(--radius);padding:1.4rem 1.2rem;margin:1.4rem 0 1rem;text-align:center}
.hub-scc b{display:block;font-family:var(--head);font-size:clamp(1.5rem,3.5vw,2rem);color:var(--green);margin-bottom:.3rem}
.hub-scc span{display:block;color:#DCE5EE;font-size:.98rem;line-height:1.45}
@media (max-width:30rem){.hub-scc{grid-template-columns:1fr;gap:1.1rem}}
.hub-guide{display:flex;flex-direction:column;align-items:flex-start}
.hub-guide h3{font-size:1.45rem}
.hub-guide p{font-size:1rem;line-height:1.55;margin-bottom:.7rem}
.hub-guide .btn{margin-top:auto}
.hub-guide-family{border-top:4px solid var(--green)}
.hub-guide-biz{border-top:4px solid #93C5FD}
.hub-pair{margin:1rem 0 0;font-size:1rem}
.hub-trust{display:grid;gap:1.6rem;align-items:center}
@media (min-width:56rem){.hub-trust{grid-template-columns:1.4fr 1fr;gap:3rem}}
.hub-trust p{max-width:38rem}
.hub-trust .kicker{color:var(--green)}
.hub-pills{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.hub-pills li{margin:0;background:#123a5e;border:1px solid #2B5479;border-radius:10px;padding:.8rem 1rem;color:#fff;font-family:var(--head);font-weight:600;font-size:1rem;line-height:1.35}
.hub-checklist{text-align:center}
.hub-checklist h2{max-width:30rem;margin:.2em auto .4em}
.hub-checklist .signup{margin:1.2rem auto 0;text-align:left;max-width:34rem}
.hub-pick{text-align:center}
.hub-pick h2{margin:0 0 1rem}
.hub-pick-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
@media (max-width:40rem){.hub-pick-row{flex-direction:column;align-items:stretch;max-width:22rem;margin:0 auto}.hub-pick-row .btn,.hub-scammed .btn{justify-content:center}.hub-scammed .btn{width:100%}}
/* Home hero covers (28 Oct 2026): each guide card shows its cover as a small product shot on the right.
   Text column first; the cover sits in its own column so the headline still leads. Compact on phones. */
.hub-path{display:grid;grid-template-columns:minmax(0,1fr) 5.4rem;grid-template-areas:"k c" "t c" "x c" "b b";column-gap:1rem;row-gap:.45rem;align-items:start;justify-items:start}
.hub-path-kicker{grid-area:k}.hub-path-title{grid-area:t}.hub-path-text{grid-area:x}.hub-path-btn{grid-area:b}
.hub-path-cover{grid-area:c;align-self:center;justify-self:end;width:100%;padding:.2rem .3rem .5rem 0}
.hub-path .book-card{max-width:none;margin:0;--turn:-18deg;--tilt:2deg;filter:drop-shadow(-8px 12px 10px rgba(0,0,0,.45)) drop-shadow(-1px 2px 3px rgba(0,0,0,.3))}
.hub-path .book-card .book-inner{transition:transform .35s ease}
@media (prefers-reduced-motion:no-preference) and (hover:hover){.hub-path:hover .book-card .book-inner{transform:perspective(1400px) rotateY(-8deg) rotateX(2deg)}}
@media (prefers-reduced-motion:reduce){.hub-path .book-card .book-inner{transition:none}}
@media (min-width:44rem){.hub-path{grid-template-columns:minmax(0,1fr) 6.6rem}}
@media (min-width:64.0625rem){.hub-path{grid-template-columns:minmax(0,1fr) 7.6rem;grid-template-areas:"k c" "t c" "x c" "b c";column-gap:1.4rem;padding:1.4rem 1.6rem}}
.hub-path-btn{white-space:nowrap}
@media print{.hub-path .book-card{filter:none}}

/* Home hero photo (29 Oct 2026, mockup). CSS-only background, so screen readers skip it. One photo class (hero-photo-2) on the
   home hero section (00-home.html); add another hero-photo-N class to try a different photo. The navy overlay is darkest behind the headline;
   the cards keep their own solid fills, so they look the same as before. Photos: Pexels / Unsplash licences, no
   attribution required, re-encoded with Pillow with all metadata dropped (see README). */
.hero-photo{--hero-photo:none;--hero-photo-sm:var(--hero-photo);--hero-photo-pos:center;
  --ov-l:.9;--ov-m:.88;--ov-r:.82;--ov-sm:.9;--scrim:0;--scrim-foot:0;
  background:radial-gradient(ellipse 48rem 22rem at 50% 12.5rem,rgba(11,42,70,var(--scrim)) 0%,rgba(11,42,70,calc(var(--scrim) * .75)) 55%,rgba(11,42,70,0) 100%),
    linear-gradient(0deg,rgba(11,42,70,var(--scrim-foot)) 0,rgba(11,42,70,var(--scrim-foot)) 4.5rem,rgba(11,42,70,0) 9rem),
    linear-gradient(90deg,rgba(11,42,70,var(--ov-l)) 0%,rgba(11,42,70,var(--ov-m)) 62%,rgba(11,42,70,var(--ov-r)) 100%),
    var(--hero-photo) var(--hero-photo-pos)/cover no-repeat,var(--navy)}
@media (max-width:44rem){.hero-photo{background:linear-gradient(180deg,rgba(11,42,70,var(--scrim)) 0,rgba(11,42,70,var(--scrim)) 19rem,rgba(11,42,70,0) 24rem),
    linear-gradient(0deg,rgba(11,42,70,var(--scrim-foot)) 0,rgba(11,42,70,var(--scrim-foot)) 6rem,rgba(11,42,70,0) 9rem),
    linear-gradient(180deg,rgba(11,42,70,var(--ov-sm)),rgba(11,42,70,var(--ov-sm))),var(--hero-photo-sm) var(--hero-photo-pos)/cover no-repeat,var(--navy)}}
/* Stronger photo (30 Oct 2026, "too washed out"): A clearly stronger (default), B a little stronger. The base overlay is
   lighter so the photo shows, and a soft navy scrim sits behind the centred headline and intro and under the
   60-second line, so the text keeps at least 4.5:1 against the lightest photo pixel behind it. */
.hero-photo-strong-a{--ov-l:.75;--ov-m:.7;--ov-r:.62;--ov-sm:.78;--scrim:.68;--scrim-foot:.62}
.hero-photo-strong-b{--ov-l:.82;--ov-m:.78;--ov-r:.72;--ov-sm:.84;--scrim:.5;--scrim-foot:.5}
.hero-photo-strong-a .hub-hero-copy,.hero-photo-strong-a .hub-now,.hero-photo-strong-b .hub-hero-copy,.hero-photo-strong-b .hub-now{text-shadow:0 1px 10px rgba(11,42,70,.65)}
.hero-photo-2{--hero-photo:url(/img/hero-family-2-1800.webp);--hero-photo-sm:url(/img/hero-family-2-900.webp);--hero-photo-pos:center 35%}
@media print{.hero-photo{background:#fff}}

/* Home hero centred text and small eyebrow (30 Oct 2026, owner feedback). Scoped to .hub-hero (home only). The guide
   cards stay a centred pair with left-aligned text inside. */
.hub-hero .hub-hero-copy{margin-left:auto;margin-right:auto;text-align:center}
.hub-hero .kicker{font-size:.72rem;letter-spacing:.09em;max-width:none}
.hub-hero .hub-lede{margin-left:auto;margin-right:auto}
.hub-hero .hub-path{text-align:left}
.hub-hero .hub-now{text-align:center}
@media (max-width:44rem){.hub-hero .kicker{font-size:.68rem}}

/* Inner-page book sidebar (30 Oct 2026). Built by sidebar_html() in build.py on the SIDEBAR_PATHS pages.
   From 60rem: two columns, the sidebar sticks in view while it fits the screen height (it stops at the end of
   .with-aside, so it never covers the footer). Below 60rem: a normal block under the content, two cards side by side
   from 37.5rem, stacked on phones. Family accent green, business accent light blue #93C5FD (as on the home cards). */
.with-aside{display:block}
.book-aside{margin:2.6rem 0 0}
.book-aside-inner{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.1rem 1.2rem;box-shadow:0 1px 2px rgba(11,42,70,.04)}
.book-aside-title{font-family:var(--head);font-weight:700;color:var(--navy);font-size:1.15rem;line-height:1.25;margin:0 0 .2rem}
.book-aside-sub{font-size:.92rem;line-height:1.45;margin:0 0 .9rem}
.aside-books{display:grid;gap:.9rem}
.aside-book{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.55rem .85rem;align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.8rem}
.aside-book-family{border-top:4px solid var(--green)}
.aside-book-business{border-top:4px solid #93C5FD}
.aside-book-family:hover{border-color:var(--green)}
.aside-book-business:hover{border-color:#93C5FD}
.aside-book picture{display:block}
.aside-cover{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 3px 8px rgba(11,42,70,.22)}
.aside-book-title{font-family:var(--head);font-weight:700;color:var(--navy);font-size:1rem;line-height:1.25;margin:0 0 .3rem}
.aside-book-line{font-size:.9rem;line-height:1.45;margin:0}
.aside-book .btn{grid-column:1 / -1;justify-content:center;width:100%;font-size:.9rem}
@media (prefers-reduced-motion:no-preference){.aside-book{transition:border-color .2s ease}}
@media (min-width:37.5rem) and (max-width:59.99rem){.aside-books{grid-template-columns:1fr 1fr}}
@media (min-width:60rem){
  .with-aside{display:grid;grid-template-columns:minmax(0,1fr) 16.5rem;gap:2.5rem;align-items:start}
  .book-aside{margin:1.6rem 0 0;align-self:stretch}
}
@media (min-width:72rem){.with-aside{grid-template-columns:minmax(0,1fr) 18rem;gap:3rem}}
/* Sticky only when the whole sidebar fits the viewport height; otherwise it scrolls with the page. */
@media (min-width:60rem){.aside-book{grid-template-columns:4rem minmax(0,1fr)}.aside-book-line{font-size:.88rem}}
@media (min-width:60rem) and (max-width:71.99rem) and (min-height:47rem),(min-width:72rem) and (min-height:42rem){.book-aside-inner{position:sticky;top:1.5rem}}
@media print{.book-aside{display:none}}
/* 30 Oct 2026: Business lander cover matches the Family lander. The business hero chips are wider than the
   family ones (four, nowrap), which pushed the grid's 1fr art column down to 230px; minmax(0,..) and wrapping chips
   keep the same 1.5fr/1fr split as /family/, so the book renders at the same 21rem size. */
@media (min-width:64.0625rem){.hero-biz .hero-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.hero-biz .chips{flex-wrap:wrap}}

/* 30 Oct 2026: site-wide bundle offer bar (scamproof.co.uk, draft and live; offer_bar() in build.py). Sits under the
   small purple draft bar in draft builds. One slim line on desktop, wraps to two centred lines on phones. */
.offerbar{background:var(--navy);color:#fff;text-align:center;padding:.5rem 1rem;font-size:.92rem;line-height:1.4}
.offerbar p{margin:0;max-width:none}
.offerbar b{color:#fff;font-weight:700}
.offerbar a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:.18em;white-space:nowrap;margin-left:.35rem}
.offerbar a:hover{color:#4ADE80}
.offerbar a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
@media (max-width:40rem){.offerbar{font-size:.86rem;padding:.45rem .9rem}}

/* 30 Oct 2026: home bundle panel under the two guide cards (owner request).
   Navy offer card: two small 3D covers, heading, saving, benefit line, green button. Stacks on phones. */
.hub-bundle{display:grid;gap:1.2rem 2rem;align-items:center;margin:2rem 0 0;padding:1.6rem 1.4rem;background:var(--navy);color:#DCE5EE;
  border-radius:var(--radius);border-top:5px solid var(--green);box-shadow:0 10px 28px rgba(11,42,70,.18);scroll-margin-top:1rem}
.hub-bundle-covers{display:flex;justify-content:center;align-items:flex-end;gap:0;padding:.4rem 0 0}
.hub-bundle .book-bundle{width:6.4rem;max-width:none;margin:0;--turn:-20deg;--tilt:2deg;filter:drop-shadow(-8px 12px 10px rgba(0,0,0,.45)) drop-shadow(-1px 2px 3px rgba(0,0,0,.3))}
.hub-bundle .book-bundle+.book-bundle{margin-left:.9rem}
.hub-bundle .kicker{margin:0 0 .35rem;font-size:.8rem}
.hub-bundle h3{color:#fff;font-size:clamp(1.45rem,3.2vw,1.9rem);line-height:1.2;margin:0 0 .35rem}
.hub-bundle-save{font-family:var(--head);font-weight:600;color:var(--green);font-size:1.08rem;margin:0 0 .5rem}
.hub-bundle-text p:last-child{margin:0;font-size:1rem;line-height:1.55}
.hub-bundle-text b{color:#fff;font-weight:600}
.hub-bundle-cta .btn{font-size:1.1rem;padding:.9em 1.5em;white-space:nowrap;box-shadow:0 4px 14px rgba(34,197,94,.35)}
@media (max-width:43.99rem){.hub-bundle{text-align:center;padding:1.5rem 1.1rem}.hub-bundle .kicker{justify-content:center}
  .hub-bundle-cta .btn{width:100%;justify-content:center;white-space:normal}}
@media (min-width:44rem){.hub-bundle{grid-template-columns:auto minmax(0,1fr);padding:1.7rem 2rem}.hub-bundle-cta{grid-column:2}}
@media (min-width:64.0625rem){.hub-bundle{grid-template-columns:auto minmax(0,1fr) auto;padding:1.8rem 2.2rem}.hub-bundle-cta{grid-column:auto}
  .hub-bundle .book-bundle{width:7rem}}
@media print{.hub-bundle .book-bundle{filter:none}}

/* 30 Oct 2026: /family/ business teaser in buy mode (price, button, bundle line) */
.teaser-price{font-family:var(--head);color:var(--navy);margin:.2rem 0 .8rem}
.teaser-price b{font-size:1.35rem}
.teaser-cta{margin:0 0 .7rem}
.teaser-pair{margin:0;font-weight:600}
/* One habit section: Stop / Check / Call stacked, photo supplied by the owner (30 Oct 2026) on the right */
.onehabit{position:relative;overflow:hidden;padding-top:0}
.onehabit-photo{position:relative;height:clamp(13rem,52vw,24rem);margin-bottom:-1.5rem}
.onehabit-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 28%}
.onehabit-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(248,250,252,0) 55%,var(--bg) 100%)}
.onehabit-text{position:relative}
.onehabit .hub-scc{grid-template-columns:1fr;gap:0;text-align:left;padding:.4rem 1.3rem;max-width:34rem}
.onehabit .hub-scc>div{display:grid;grid-template-columns:6.4rem minmax(0,1fr);align-items:center;gap:1rem;padding:.95rem 0}
.onehabit .hub-scc>div+div{border-top:1px solid rgba(220,229,238,.18)}
.onehabit .hub-scc b{margin:0;font-size:clamp(1.5rem,3.5vw,1.9rem);line-height:1.1}
.onehabit .hub-scc span{font-size:1.02rem}
@media (max-width:22rem){.onehabit .hub-scc>div{grid-template-columns:1fr;gap:.2rem}}
@media (min-width:64.01rem){
.onehabit{padding-top:2.6rem}
.onehabit-photo{position:absolute;top:0;right:0;bottom:0;width:50%;height:auto;margin:0}
.onehabit-photo::after{background:linear-gradient(to right,var(--bg) 0%,rgba(248,250,252,.85) 12%,rgba(248,250,252,0) 48%)}
.onehabit-text{width:min(34rem,48%)}
.onehabit .h2-big{margin-top:.4em}
}

/* Home guide cards with covers (30 Oct 2026) */
.gc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch;margin-top:1.5rem}
.gc{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(11,42,70,.08)}
.gc-panel{display:flex;justify-content:center;align-items:center;padding:2rem 1rem 2.25rem;height:330px;box-sizing:border-box}
.gc-family .gc-panel{background:#DFF7E6;border-top:4px solid #22C55E}
.gc-biz .gc-panel{background:#E3F0FE;border-top:4px solid #93C5FD}
.gc-book{display:block;width:180px;transform:translateY(-4px) rotate(-1.5deg);transition:transform .3s}
.gc-book img{display:block;width:100%;height:auto;border-radius:3px 6px 6px 3px;box-shadow:0 18px 30px -10px rgba(11,42,70,.45),0 4px 10px rgba(11,42,70,.18)}
.gc:hover .gc-book{transform:translateY(-8px) rotate(-1.5deg)}
.gc-body{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.6rem 1.75rem;color:#0B2A46}
.gc-body h3{margin:0 0 .75rem;color:#0B2A46}
.gc-ticks{list-style:none;margin:0 0 1rem;padding:0}
.gc-ticks li{position:relative;padding-left:1.6rem;margin:.5rem 0;color:#334155}
.gc-ticks li::before{content:"";position:absolute;left:0;top:.35em;width:1rem;height:1rem;border-radius:50%;background:#22C55E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.gc-biz .gc-ticks li::before{background-color:#3B82F6}
.gc-price{margin:auto 0 1rem;color:#475569}
.gc-price span{font-size:2rem;font-weight:800;color:#0B2A46;margin-right:.4rem}
.gc-body .btn{align-self:flex-start}
.gc-pair{text-align:center;margin:1.25rem 0 0;padding:.85rem 1rem;border-radius:999px;background:rgba(34,197,94,.12);font-weight:600}
.gc-pair a{text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
@media (max-width:47.99rem){.gc-grid{grid-template-columns:1fr}.gc-panel{height:auto;padding:1.75rem 1rem 2rem}.gc-book{width:170px}.gc-body .btn{align-self:stretch;justify-content:center}}
@media (prefers-reduced-motion:reduce){.gc-book{transition:none}}

/* Family big idea photo (30 Oct 2026), same fade treatment as the home one-habit section */
.bi-top{position:relative}
.bi-photo{position:relative;height:clamp(15rem,64vw,20rem);margin:0 calc(50% - 50vw) 1rem;overflow:hidden}
.bi-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 12%}
.bi-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(248,250,252,0) 55%,var(--bg) 100%)}
.bi-text{position:relative}
@media (min-width:48rem){
  .bi-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center;margin-bottom:1.5rem}
  .bi-photo{order:2;margin:0;height:100%;min-height:22rem;border-radius:0 18px 18px 0}
  .bi-photo img{object-position:68% 28%}
  .bi-photo::after{background:linear-gradient(to right,var(--bg) 0%,rgba(248,250,252,0) 35%)}
  .bi-text .prose{max-width:none}
}

/* Family printables photo (30 Oct 2026): mirror of the big idea photo, fades right into the white .alt background */
.ct-photo{position:relative;height:clamp(15rem,64vw,20rem);margin:-2.6rem calc(50% - 50vw) 1rem;overflow:hidden}
.ct-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ct-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0) 55%,#fff 100%)}
.ct-text{position:relative}
@media (min-width:48rem){
  .ct-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center}
  .ct-photo{margin:0;height:100%;min-height:22rem;border-radius:18px 0 0 18px}
  .ct-photo img{object-position:62% 50%}
  .ct-photo::after{background:linear-gradient(to left,#fff 0%,rgba(255,255,255,.6) 12%,rgba(255,255,255,0) 40%)}
  .ct-text{max-width:none}
}

/* Business problem photo (30 Oct 2026): reuses .bi-*; his face sits left of centre, so the fade is narrower */
.bi-photo-man img{object-position:30% 25%}
@media (min-width:48rem){
  .bi-photo-man img{object-position:10% 30%}
  .bi-photo-man::after{background:linear-gradient(to right,var(--bg) 0%,rgba(248,250,252,.55) 8%,rgba(248,250,252,0) 24%)}
}
/* Business hero, desktop: cover top aligned near the headline top; both CTAs on one line (30 Oct 2026) */
@media (min-width:64.0625rem){
  .hero-biz .hero-art{align-items:flex-start;padding-top:var(--bizcover-top,4.6rem)}
  .hero-biz .ctas{flex-wrap:nowrap;gap:.7rem}
  .hero-biz .ctas .btn{white-space:nowrap;padding-left:1.05rem;padding-right:1.05rem}
}
.site-head .tk{stroke:var(--navy)}
/* Header nav, desktop: items shifted left for more breathing space before the CTA (30 Oct 2026) */
@media (min-width:64.01rem){.site-head .menu{gap:2.75rem}.site-head .nav ul{column-gap:1.4rem}}
@media (min-width:64.01rem) and (max-width:68.5rem){.site-head .menu{gap:1.8rem}.site-head .nav ul{column-gap:1rem}}

/* Home hero photo fade (30 Oct 2026, owner request). Same technique as .onehabit-photo:
   the photo sits on one side and a gradient fades it into the section colour (navy here). CSS-only, so screen readers skip it.
   Desktop: photo on the right (55%), fading left into navy, text left on solid navy. Up to 64rem (phones, Fold, tablets):
   photo on top, fading down into navy, the same as the woman photo on phones. */
.hero-photo.hero-fade{background:var(--navy);position:relative;overflow:hidden}
.hero-fade::before{content:"";position:absolute;top:0;left:0;right:0;height:clamp(13rem,52vw,24rem);
  background:linear-gradient(to bottom,rgba(11,42,70,0) 45%,rgba(11,42,70,.85) 82%,var(--navy) 100%),var(--hero-photo-sm) 62% 18%/cover no-repeat}
@media (min-width:44.01rem){.hero-fade::before{background-image:linear-gradient(to bottom,rgba(11,42,70,0) 45%,rgba(11,42,70,.85) 82%,var(--navy) 100%),var(--hero-photo)}}
.hero-fade>.wrap{position:relative}
.hub-hero.hero-fade{padding-top:calc(clamp(13rem,52vw,24rem) - 3.2rem)}
.hero-fade .hub-hero-copy,.hero-fade .hub-now{text-shadow:0 1px 10px rgba(11,42,70,.65)}
@media (min-width:64.01rem){
.hub-hero.hero-fade{padding-top:3.4rem}
.hero-fade::before{left:auto;width:55%;height:min(100%,37rem);
  background:linear-gradient(to right,var(--navy) 0%,rgba(11,42,70,.85) 12%,rgba(11,42,70,0) 48%),
    linear-gradient(to top,var(--navy) 0%,rgba(11,42,70,.6) 15%,rgba(11,42,70,0) 38%),var(--hero-photo) 58% 25%/cover no-repeat}
.hub-hero.hero-fade .hub-hero-copy{margin-left:0;margin-right:0;text-align:left;width:min(36rem,50%)}
.hub-hero.hero-fade .hub-lede{margin-left:0}
.hero-fade h1.hub-h1{font-size:clamp(2.6rem,4.2vw,3.5rem)}
.hub-hero.hero-fade .hub-now{text-align:left}
}
@media print{.hero-fade::before{display:none}}

/* Contact page (30 Oct 2026): urgent help panel and the contact form. Form is INERT until build.py CONTACT_FORM_ACTION
   is set (see contact.js). */
.help-now{background:var(--red-soft);border:1px solid #F5C2C2;border-left:8px solid var(--red);border-radius:0 var(--radius) var(--radius) 0;
  padding:1.2rem 1.3rem 1.1rem;margin:1.8rem 0 2.2rem;font-size:1.02rem}
.help-now-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.help-now-head .ico{width:1.6rem;height:1.6rem;color:var(--red)}
.help-now h2{margin:0;font-size:1.3rem}
.help-now p{margin:0 0 .9rem}
.help-now-list{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.6rem}
.help-now-list li{margin:0;background:#fff;border:1px solid #F5C2C2;border-radius:10px;padding:.7rem .9rem;display:grid;align-content:start}
.help-now-who{font-family:var(--head);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.help-now-num,.help-now-num a{font-family:var(--head);font-weight:700;font-size:1.75rem;line-height:1.2;color:var(--navy);text-decoration:none}
.help-now-num-sm{font-size:1.3rem;line-height:1.55;white-space:nowrap}
a.help-now-num:hover,.help-now-num a:hover{text-decoration:underline}
.help-now-note{font-size:.88rem;line-height:1.4;color:var(--text)}
.help-now-check{font-weight:500;margin:0 !important}
@media (min-width:40rem){.help-now-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:60rem) and (max-width:71.99rem){.help-now-list{grid-template-columns:1fr}}

.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 18px rgba(11,42,70,.06);
  padding:1.4rem 1.3rem 1.5rem;margin:0 0 2rem;font-size:1rem;line-height:1.55}
@media (min-width:40rem){.contact-card{padding:1.8rem 2rem 2rem}}
.contact-card h2{margin:0 0 .3rem;font-size:1.5rem}
.contact-sub{font-size:.92rem;color:#64748B;margin:0 0 .4rem}
.cf-row{display:grid;gap:0 1rem}
@media (min-width:40rem){.cf-row{grid-template-columns:1fr 1fr}}
.contact-form label,.contact-form legend,.cf-label{display:block;font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--navy);margin:1rem 0 .3rem;letter-spacing:0}
.contact-form .opt{font-weight:400;color:#64748B}
.contact-form input[type=text],.contact-form input[type=email],.contact-form select,.contact-form textarea{display:block;width:100%;
  font:inherit;font-size:1rem;padding:.7rem .85rem;min-height:48px;border:2px solid #64748B;border-radius:10px;background:#fff;color:var(--navy)}
.contact-form textarea{resize:vertical;min-height:9rem;line-height:1.5}
.contact-form select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A46' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center/1.2rem}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--navy)}
.cf-hint{font-size:.85rem;color:#64748B;margin:.3rem 0 0}
.cf-correction{border:0;border-left:4px solid var(--green);background:var(--green-soft);border-radius:0 10px 10px 0;margin:1.1rem 0 0;padding:.2rem 1rem 1rem}
.cf-correction[hidden]{display:none}
.cf-correction legend{float:left;width:100%;margin:.8rem 0 0;padding:0}
.cf-correction legend + *{clear:both}
.cf-js .cf-nojs-hint{display:none}
.cf-correction .cf-label{margin-top:.8rem}
.cf-radios{display:flex;flex-wrap:wrap;gap:.5rem}
.contact-form .cf-radio{display:inline-flex;align-items:center;gap:.5rem;margin:0;font-weight:500;background:#fff;border:2px solid #CBD5E1;
  border-radius:10px;padding:.55rem .85rem;min-height:44px;cursor:pointer}
.cf-radio input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--navy)}
.cf-radio:has(input:checked){border-color:var(--navy)}
.cf-radio:has(input:focus-visible){outline:3px solid var(--green);outline-offset:1px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-privacy{font-size:.88rem;color:var(--text);margin:1.1rem 0 1rem}
.cf-send{min-width:13rem;justify-content:center}
.cf-send:disabled{opacity:.55;cursor:not-allowed}
.cf-send .ico{width:1.3em;height:1.3em}
.cf-soon{display:inline-block;margin:.8rem 0 0;padding:.35rem .7rem;font-size:.85rem;font-weight:500;color:#4A3B00;background:#FFF7CC;border:1px dashed #8a6d00;border-radius:6px}
.cf-done{padding:.6rem 0 0}
.cf-done h3{margin:0 0 .5rem;font-size:1.2rem}
.cf-done h3:focus{outline:none}
@media (max-width:40rem){.cf-send{width:100%}.cf-radios{flex-direction:column}}
.cf-correction legend{font-family:var(--head);font-weight:600;font-size:1rem}
.cf-correction .cf-label{margin-top:1rem}
.cf-correction legend{margin-bottom:.4rem}
.cf-correction .cf-label{clear:both;padding-top:.1rem}

/* Home printable checklists (31 Oct 2026): reuses the Family .ct-* photo fade and the .gc-ticks lists
   (green for Family, blue for Business via .gc-biz). Lists side by side from 64rem, stacked below. */
.hub-print-lists{display:grid;gap:.4rem 1.6rem;margin-top:1rem}
.hub-print-list h3{font-size:1.05rem;margin:.6rem 0 .2rem}
.hub-print-list .gc-ticks{margin-bottom:.4rem}
.hub-print-list .gc-ticks li{margin:.35rem 0;font-size:.97rem;line-height:1.45}
.hub-print-pair{margin-top:1rem;font-weight:500}
.hub-print-pair a{display:inline-flex;align-items:center;gap:.3rem}
.hub-print-pair a .ico,.hub-print-pair a svg{width:1em;height:1em}
@media (min-width:64rem){.hub-print-lists{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Home lead magnet panel (31 Oct 2026): light green panel, text and an HTML/CSS mock of the one-page
   Stop, Check, Call sheet (now the Payhip image, see below). Areas: text/sheet/form, sheet beside from 56rem. */
.hub-checklist{text-align:left}
.lm{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "sheet" "form";gap:1.4rem;
  background:var(--green-soft);border:1px solid #BBE9C8;border-radius:20px;padding:1.6rem 1.25rem;max-width:68rem;margin:0 auto;
  box-shadow:0 10px 30px rgba(11,42,70,.08)}
.lm-text{grid-area:text}.lm-sheet-wrap{grid-area:sheet}.lm-form{grid-area:form}
.lm h2{margin:.1em 0 .45em;font-size:clamp(1.65rem,3.2vw,2.3rem);max-width:none}
.lm .kicker-light{margin-bottom:.5rem}
.lm-lead{color:#334155;margin:0 0 .9rem;max-width:36rem}
.lm-ticks li{color:var(--navy);font-weight:500}
.lm-ticks li::before{background-color:var(--green-dark)}
/* 2 Nov 2026: the HTML/CSS sheet mock and the inert sign-up are replaced by the Payhip product image
   (free-checklist-*.webp|jpg, square, re-rendered without its own mint background and arc,
   WebP keeps transparency, JPG fallback flattened onto the panel colour #DFF7E6; no tile, border or shadow) and one primary button to the free checklist on Payhip. */
.lm-sheet-wrap{display:flex;justify-content:center;align-items:center}
.lm-img{display:block;width:100%;max-width:26rem}
.lm-img img{display:block;width:100%;height:auto}
.lm-cta{margin:0}
.lm-cta-note{margin:.6rem 0 0;color:#475569;font-size:.92rem}
@media (min-width:40rem){.lm{padding:2rem 2rem}}
@media (min-width:56rem){
  .lm{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);grid-template-areas:"text sheet" "form sheet";gap:1.2rem 2.6rem;padding:2.6rem 2.8rem}
  .lm-sheet-wrap{align-self:center}
  .lm-form{align-self:start}
}
@media (max-width:40rem){.lm-cta .btn{width:100%;justify-content:center}}
.lm .nowrap{white-space:nowrap}

/* Business Free help office photo (31 Oct 2026): same soft fade as .hero-fade, into the navy band.
   Up to 64rem: photo on top, full width, fading down into navy, text below. From 64rem: text on the left,
   photo on the right (58%), fading left into navy. */
.fh-fade{position:relative;overflow:hidden;padding-top:0}
.fh-photo{position:relative;height:clamp(13rem,56vw,24rem);margin-bottom:-2.4rem}
.fh-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.fh-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,42,70,0) 45%,rgba(11,42,70,.85) 82%,var(--navy) 100%)}
.fh-copy{position:relative;max-width:52rem}
.fh-copy p{font-size:1.05rem}
@media (min-width:64.01rem){
.fh-fade{padding:3.8rem 0;display:flex;align-items:center;min-height:27rem}
.fh-photo{position:absolute;top:0;right:0;bottom:0;width:63%;height:auto;margin:0}
.fh-photo img{object-position:88% 45%}
.fh-photo::after{background:linear-gradient(to right,var(--navy) 0%,rgba(11,42,70,.8) 9%,rgba(11,42,70,0) 30%)}
.fh-copy{width:100%;max-width:72rem}
.fh-copy>*{max-width:min(27rem,37%)}
.fh-copy .h2-big{font-size:clamp(1.8rem,2.4vw,2.15rem)}
}
@media print{.fh-photo{display:none}}

/* Card icons (Business "What you get"): green line icon on a soft green circle above the title */
.card-ic{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 0 .8rem;border-radius:50%;background:var(--green-soft);color:var(--green-dark)}
.card-ic .ico{width:1.7rem;height:1.7rem;vertical-align:0}
/* 31 Oct 2026: link inside the navy bundle panel (Business page) */
.hub-bundle-text a{color:#fff;text-decoration-color:var(--green);text-underline-offset:3px}