/* Rev 07. Loaded last. Desktop rule from Justin, 21.9.2026: the three package cards must
   be readable in full without scrolling. Everything here is compaction of the existing
   card, no content removed. Mobile keeps its own slider layout from hybrid.css. */
@media (min-width:901px){
 html[data-concept=b] .packages{padding-top:64px;padding-bottom:72px}
 html[data-concept=b] .packages h2{margin:14px 0 10px}
 html[data-concept=b] .package-grid{margin-top:44px;gap:16px}
 html[data-concept=b] .package{padding:20px 22px 20px}
 html[data-concept=b] .package .tier{font-size:12px}
 html[data-concept=b] .package h3{min-height:0;font-size:18px;line-height:1.25;margin:4px 0 10px}
 html[data-concept=b] .package .spots{margin:0 0 6px}
 html[data-concept=b] .package .launch{margin-bottom:6px;font-size:10px;padding:4px 9px}
 html[data-concept=b] .package .was{min-height:0;margin:0}
 html[data-concept=b] .package .was-num{font-size:22px}
 html[data-concept=b] .package .price{font-size:42px;margin:0}
 html[data-concept=b] .packages .vat{margin:2px 0 0}
 html[data-concept=b] .package ul{margin:12px 0 8px}
 html[data-concept=b] .package li{font-size:14px;line-height:1.35;padding:5px 0}
 html[data-concept=b] .pack-detail{margin:4px 0 2px;padding-top:4px}
 html[data-concept=b] .pack-detail summary{min-height:34px;padding:6px 0}
 html[data-concept=b] .package .terms{font-size:12px;line-height:1.35;margin:6px 0 12px}
 html[data-concept=b] .package .cta{min-height:44px;padding:10px 20px}
 html[data-concept=b] .recommended{top:-24px;height:24px;padding:3px;font-size:10px}
}
/* Wider cards on laptop widths: less side padding means fewer two-line bullets. */
@media (min-width:901px) and (max-width:1500px){
 html[data-concept=b] .packages{padding-left:32px;padding-right:32px}
}
/* Short laptop screens (768 and 800 tall, minus browser chrome). Same content, tighter rows. */
@media (min-width:901px) and (max-height:860px){
 html[data-concept=b] .package{padding:16px 20px}
 html[data-concept=b] .package li{font-size:13.5px;line-height:1.3;padding:3px 0}
 html[data-concept=b] .package ul{margin:8px 0 4px}
 html[data-concept=b] .package h3{margin:2px 0 8px}
 html[data-concept=b] .package .price{font-size:38px}
 html[data-concept=b] .pack-detail summary{min-height:30px;padding:4px 0}
 html[data-concept=b] .package .terms{margin:4px 0 10px;line-height:1.3}
 html[data-concept=b] .package .cta{min-height:40px;padding:8px 18px}
}
/* The comparison table: compact rows on desktop so the whole table reads in one screen. */
@media (min-width:901px){
 html[data-concept=b] .compare{margin-top:36px}
 html[data-concept=b] .compare h3{margin:0 0 10px}
 html[data-concept=b] .compare thead th{padding:9px 10px 8px}
 html[data-concept=b] .compare tbody tr.grp th{padding:6px 16px}
 html[data-concept=b] .compare tbody th[scope="row"]{padding:5px 10px 5px 16px;font-size:.8rem;line-height:1.25}
 html[data-concept=b] .compare tbody td{padding:5px 8px}
 html[data-concept=b] .compare .ic{width:16px;height:16px}
 html[data-concept=b] .compare .val{font-size:.76rem;line-height:1.2}
 html[data-concept=b] .compare tr.cta-row td{padding:10px 8px}
 html[data-concept=b] .compare .tbtn{padding:7px 6px}
}
/* Tablet landscape and small laptops. */
@media (min-width:901px) and (max-width:1100px){
 html[data-concept=b] .packages{padding-left:20px;padding-right:20px}
 html[data-concept=b] .package-grid{gap:12px}
 html[data-concept=b] .package{padding:16px 16px}
 html[data-concept=b] .package li{font-size:13px;line-height:1.3;padding:3px 0}
 html[data-concept=b] .package .price{font-size:36px}
}
@media (min-width:901px) and (max-height:860px){
 html[data-concept=b] .compare tbody th[scope="row"]{padding:3px 10px 3px 16px;font-size:.76rem}
 html[data-concept=b] .compare tbody td{padding:3px 8px}
 html[data-concept=b] .compare tbody tr.grp th{padding:4px 16px}
 html[data-concept=b] .compare thead th{padding:7px 10px 6px}
 html[data-concept=b] .compare tr.cta-row td{padding:7px 8px}
 html[data-concept=b] .compare .ic{width:14px;height:14px}
}
/* Swipe hint: a finger on the phone glass drags the carousel to the next screen and back.
   Driven by hybrid.js, which adds .demo only once the phone is fully in view. */
.app-showcase .screen .swipe-finger{position:absolute;left:50%;top:56%;z-index:4;width:58px;height:58px;margin:-29px 0 0 -29px;display:grid;place-items:center;border-radius:50%;background:#141413c4;color:#fff;box-shadow:0 0 0 1.5px #ffffff38,0 10px 26px #000a;opacity:0;pointer-events:none;transform:translateX(40px) scale(.9)}
.app-showcase .screen .swipe-finger .sf-dot{position:absolute;left:14px;top:9px;width:12px;height:12px;border-radius:50%;background:#f47708;box-shadow:0 0 0 0 #f4770888}
.app-showcase .screen .swipe-finger.demo{animation:hwFinger 2.4s cubic-bezier(.45,.05,.3,1) both}
.app-showcase .screen .swipe-finger.demo .sf-dot{animation:hwTap 2.4s ease-out both}
@keyframes hwFinger{
 0%{opacity:0;transform:translateX(52px) scale(.9)}
 12%{opacity:1;transform:translateX(52px) scale(1)}
 16%{opacity:1;transform:translateX(52px) scale(.94)}
 44%{opacity:1;transform:translateX(-62px) scale(.94)}
 52%{opacity:1;transform:translateX(-62px) scale(1)}
 58%{opacity:1;transform:translateX(-62px) scale(.94)}
 86%{opacity:1;transform:translateX(52px) scale(.94)}
 100%{opacity:0;transform:translateX(52px) scale(1)}
}
@keyframes hwTap{0%,12%{box-shadow:0 0 0 0 #f4770888}24%{box-shadow:0 0 0 12px #f4770800}52%{box-shadow:0 0 0 0 #f4770888}64%{box-shadow:0 0 0 12px #f4770800}100%{box-shadow:0 0 0 0 #f4770800}}
@media (prefers-reduced-motion:reduce){.app-showcase .screen .swipe-finger{display:none}}
/* The hero strip now carries one line. concept.css styles span:last-child as the
   second tagline (smaller, no tracking) and hides it on phones, which would restyle
   and then hide the only line left. */
.hero-bottom span:only-child{letter-spacing:inherit;font-size:inherit;display:inline}
/* Hero spacing. The credential chips sat flush against the buttons (0px) and the price
   line hung between two gaps of different sizes. Price and chips now read as one block,
   with clear air before the calls to action. */
html[data-concept=b] .hero-copy .intro-copy{margin:24px 0 0}
html[data-concept=b] .hero-copy .hero-price{margin:24px 0 0}
html[data-concept=b] .hero-copy .hero-creds{margin:12px 0 0;gap:8px}
html[data-concept=b] .hero-copy .actions{margin-top:36px}
@media (max-width:700px){
 html[data-concept=b] .hero-copy .intro-copy{margin:18px 0 0}
 html[data-concept=b] .hero-copy .hero-price{margin:20px 0 0}
 html[data-concept=b] .hero-copy .actions{margin-top:28px}
 html[data-concept=b] .hero-copy .hero-creds{gap:6px}
 html[data-concept=b] .hero-copy .hero-creds li{font-size:.7rem;padding:4px 9px;letter-spacing:.02em}
}
/* Desktop hint: a pointer that taps the arrow buttons. The fingertip of the icon sits at
   about (8,2) in its 24-unit box, so the box is shifted to put the tip on the button. */
.app-showcase .swipe-ui{position:relative}
.app-showcase .arrow-finger{position:absolute;left:0;top:0;z-index:5;width:26px;height:26px;margin:-2px 0 0 -8px;color:#fff;filter:drop-shadow(0 2px 6px #000c);opacity:0;pointer-events:none;transform-origin:8px 2px}
.app-showcase .arrow-finger.demo{animation:hwArrowTap 2.7s cubic-bezier(.45,.05,.3,1) both}
@keyframes hwArrowTap{
 0%{opacity:0;transform:translate(10px,26px)}
 14%{opacity:1;transform:translate(0,0) scale(1)}
 19%{transform:translate(0,0) scale(.82)}
 25%{transform:translate(0,0) scale(1)}
 46%{opacity:1;transform:translate(var(--back,-80px),0) scale(1)}
 57%{transform:translate(var(--back,-80px),0) scale(.82)}
 63%{opacity:1;transform:translate(var(--back,-80px),0) scale(1)}
 100%{opacity:0;transform:translate(calc(var(--back,-80px) - 10px),26px)}
}
.app-showcase .prev.poke,.app-showcase .next.poke{background:#f4770855;border-color:#f47708;transform:scale(.92)}
@media (max-width:900px){.app-showcase .arrow-finger{display:none}}
@media (prefers-reduced-motion:reduce){.app-showcase .arrow-finger{display:none}}

/* 21.9 phones: each package card fits one screen, text size unchanged */
@media(max-width:700px){
 .package-grid[data-slider]{margin-top:28px!important;padding-top:26px!important;align-items:flex-start!important}
 .package-grid[data-slider] .package{flex-basis:90%!important}
 html[data-concept=b] .package{padding:18px!important;display:grid!important;grid-template-columns:1fr auto;column-gap:10px;align-content:start}
 html[data-concept=b] .package>*{grid-column:1/-1}
 html[data-concept=b] .package .tier{grid-column:1;grid-row:1;margin:0!important;align-self:center}
 html[data-concept=b] .package .spots{grid-column:2;grid-row:1;margin:0!important;align-self:center}
 html[data-concept=b] .package h3{margin:6px 0 10px!important}
 html[data-concept=b] .package .launch{margin:0 0 6px!important;justify-self:start}
 html[data-concept=b] .package .was{min-height:0!important;margin:0!important}
 html[data-concept=b] .package .vat{margin:0!important}
 html[data-concept=b] .package ul{margin:10px 0 6px!important}
 html[data-concept=b] .package li{padding:4px 0!important}
 html[data-concept=b] .pack-detail{margin:0!important;padding-top:2px!important}
 html[data-concept=b] .pack-detail summary{min-height:32px!important;padding:4px 0!important}
 html[data-concept=b] .package .terms{margin:4px 0 12px!important;display:block!important}
 html[data-concept=b] .package .terms>*{display:inline!important}
 html[data-concept=b] .package .terms>*+*:before{content:" · "}
}

/* 21.9 phones: comparison table shows one category at a time */
.cmp-tabs{display:none}
@media(max-width:700px){
 html[data-concept=b] .compare.tabbed .cmp-tabs{display:flex;flex-wrap:wrap;gap:8px 6px;margin:0 0 12px}
 .cmp-tabs button{flex:0 0 auto;font:700 13px/1 var(--body);color:var(--paper);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 13px;cursor:pointer;min-height:40px}
 .cmp-tabs button[aria-selected=true]{background:var(--orange);border-color:var(--orange);color:#1a1005}
 .cmp-tabs button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
 html[data-concept=b] .compare.tabbed tbody tr.grp{display:none}
 html[data-concept=b] .compare.tabbed tbody tr[data-g]:not(.on){display:none}
 html[data-concept=b] .compare.tabbed .val{overflow-wrap:normal;hyphens:manual}
}
@media(max-width:700px) and (min-width:370px){html[data-concept=b] .package .launch{letter-spacing:.05em;white-space:nowrap}}
/* 21.9 nutrition add-on row */
html[data-concept=b] .compare tr.upsell th[scope="row"]{color:var(--paper);font-weight:600}
html[data-concept=b] .compare tr.upsell td.hl .val{font-weight:700;white-space:nowrap}
/* 21.9 phones: all three cards the same height, footer pinned to the bottom */
@media(max-width:700px){
 .package-grid[data-slider]{align-items:stretch!important}
 html[data-concept=b] .package{display:flex!important;flex-direction:column;align-items:stretch!important;text-align:left}
 html[data-concept=b] .package .tier{align-self:flex-start}
 html[data-concept=b] .package .spots{margin:0 0 8px!important;align-self:flex-start}
 html[data-concept=b] .package .pack-detail{margin-top:auto!important}
}
@media(max-width:700px) and (min-width:370px){html[data-concept=b] .package .spots{white-space:nowrap;letter-spacing:.05em}}

/* 24.9: review rotator. One card at a time, crossfade every 7 s. All cards share one grid cell so the height never jumps */
.testimonials h2{margin-bottom:40px}
.rv-track{display:grid;margin:0;padding:0;list-style:none;max-width:760px}
.rv-card{grid-area:1/1;display:flex;flex-direction:column;gap:16px;padding:32px 32px 26px;background:var(--surface);border-top:2px solid var(--orange);opacity:1;transition:opacity .8s ease,visibility 0s}
.rv.on .rv-card:not(.is-on){opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.rv-stars{display:flex;gap:4px;color:var(--orange)}
.rv-stars svg{width:18px;height:18px}
.rv-card blockquote{margin:0;flex:1}
.rv-card blockquote p{margin:0;font-size:22px;line-height:1.5;color:var(--paper)}
.rv-who{margin:0;display:flex;flex-direction:column;font-size:14px}
.rv-who b{font-weight:600;color:var(--paper)}
.rv-who span{color:var(--muted)}
.rv-more{font-size:13px;color:var(--orange);text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start;padding:6px 0}
.rv-more:hover{border-color:var(--orange)}
.rv-bar{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:24px;max-width:760px}
.rv-bar .secondary-action{margin-left:auto}
.rv-dots{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.rv-dots button{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.rv-dots button::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.rv-dots button[aria-current=true]::before{background:var(--orange);transform:scale(1.2)}
.rv-dots button:focus-visible{outline:2px solid var(--orange);outline-offset:-6px}
.rv-toggle{background:none;border:1px solid var(--line);color:var(--muted);font:400 13px var(--body);padding:10px 16px;min-height:44px;cursor:pointer}
.rv-toggle:hover{color:var(--paper);border-color:var(--paper)}
.rv:not(.on) .rv-dots,.rv:not(.on) .rv-toggle{display:none}
.rv:not(.on) .rv-track{gap:16px}
.rv:not(.on) .rv-card{grid-area:auto}
@media(prefers-reduced-motion:reduce){.rv-card,.rv.on .rv-card:not(.is-on){transition:none}}
@media(max-width:700px){.rv-card{padding:24px 20px 20px}.rv-card blockquote p{font-size:18px}.rv-bar .secondary-action{margin-left:0;width:100%}}

/* 24.9: sharpened portrait, separate desktop (wider, wall extended) and phone files */
.portrait picture{display:block;width:100%;height:100%}
.portrait img{object-position:center top}
@media(max-width:700px){.portrait,html[data-concept=b] .portrait{height:440px}}
/* 24.9: Pete wants the claw marks behind the app phones clearly visible: larger and stronger */
.app-showcase .sclaws{width:88%;right:-6%;top:-4%;opacity:.26}
.app-showcase .claws{width:900px;height:900px;margin:-450px 0 0 -450px;opacity:calc(.26 * var(--e,1))}
@media(max-width:700px){.app-showcase .claws{width:560px;height:560px;margin:-280px 0 0 -280px}}
/* 24.9: hero sub-line holds the three short commands on one line; bio paragraphs get air */
@media(min-width:701px){.hero-copy .intro-copy{max-width:580px}}
.bio-more p+p{margin-top:12px}
/* 24.9: price line and credential chips join the hero intro, between the sub-line (1.2 s) and the buttons */
.js .hero-copy .hero-price,.js .hero-copy .hero-creds{opacity:0}
.js.intro .hero-copy .hero-price{animation:introRise 1.1s cubic-bezier(.22,1,.36,1) 1.28s both}
.js.intro .hero-copy .hero-creds{animation:introRise 1.1s cubic-bezier(.22,1,.36,1) 1.36s both}
.js.intro .hero-copy .actions{animation-delay:1.44s}
@media(prefers-reduced-motion:reduce){.js .hero-copy .hero-price,.js .hero-copy .hero-creds{opacity:1;animation:none!important}}

/* 28.9: centered review loop. Heading, stars, quote and name centered; cards crossfade on a continuous loop */
.testimonials{text-align:center}
.testimonials .eyebrow{justify-content:center}
.rv{max-width:820px;margin:0 auto}
.rv-track{max-width:none}
.rv-card{align-items:center;text-align:center;padding:40px 40px 30px;border-top:0;background:none}
.rv-stars{justify-content:center;gap:6px}
.rv-stars svg{width:24px;height:24px}
.rv-card blockquote p{font-size:24px}
.rv-who{align-items:center}
.rv-more{align-self:center}
.rv-bar{flex-direction:column;justify-content:center;max-width:none}
.rv-bar .secondary-action{margin:4px auto 0}
.rv-controls{display:flex;align-items:center;gap:12px}
.rv.on .rv-card{transition:opacity 1s ease,visibility 0s}
.rv.on .rv-card:not(.is-on){transition:opacity 1s ease,visibility 0s 1s}
@media(max-width:700px){.rv-card{padding:28px 4px 20px}.rv-card blockquote p{font-size:19px}.rv-stars svg{width:20px;height:20px}.rv-bar .secondary-action{width:auto;margin:4px auto 0}}

/* Christmas gift voucher strip (removes itself after data-until) */
.gift-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px;padding:24px 26px;border:1px solid var(--orange,#f47708);border-radius:18px;background:linear-gradient(120deg,#f4770822,#f4770808)}
.gift-strip .eyebrow{margin:0 0 6px}
.gift-strip h3{margin:0;font-size:clamp(22px,3vw,28px)}
.gift-strip p:not(.eyebrow){margin:8px 0 0;max-width:52ch}
.gift-strip .cta{flex:none}
@media(max-width:700px){.gift-strip{flex-direction:column;align-items:flex-start}.gift-strip .cta{width:100%;text-align:center}}