/* Print Buddy: styles for the home page. Split out of site.css on 19 Oct 2026 (speed: every shop page loaded all of it);
   linked right after site.css by index.html. New rules that only these pages use go here; see docs/STYLE-GUIDE.md. */
/* ---------- Home ---------- */
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-art{position:relative;display:flex;justify-content:flex-end}
.hero-art .big{width:100%}
/* Multiply-blend melts the photo's light background into the hero and a soft radial
   mask feathers every edge, so nothing reads as a rectangle or a cut-off. */
.hero-art .big img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(42,42,51,.18))}
.hero-art .chip{position:absolute;right:4px;top:4px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:8px 14px;font-size:12px;font-weight:500;box-shadow:0 6px 18px rgba(42,42,51,.1)}
/* ---------- Homepage components ---------- */
.reviews-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rev .stars-inline{color:var(--star);letter-spacing:1.5px;font-size:14px}
.cta-band{border:1px solid var(--line);border-radius:var(--radius);padding:46px 48px;text-align:center}
.cta-band h2{font-size:30px;font-weight:400;margin:6px 0 10px}
.cta-band h2 b{font-weight:500;color:var(--primary)}
.cta-band p{max-width:440px}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Compact two-up promo row (same-day + wedding) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Slim 3-step strip (attached to the bottom of the hero) */
.strip-attach{position:relative;z-index:5}
.strip-attach .stripline{box-shadow:0 16px 38px rgba(42,42,51,.1)}
.stripline{border:1px solid var(--line);border-radius:var(--radius);display:grid;background:#fff}
.stripline div{display:flex;gap:12px;align-items:center;padding:16px 20px;font-size:12px;line-height:1.4}
.stripline div+div{border-left:1px solid var(--line)}
.stripline .n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:500}
.stripline b{display:block;font-weight:500}
.team-list{border-top:1px solid var(--line)}
.team-list div{display:flex;gap:18px;padding:19px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.team-list .n{color:var(--accent-ink);font-weight:500;font-size:12px;margin-top:3px;flex:none}
.team-list b{font-size:15px;font-weight:500;display:block;margin-bottom:3px}
/* ---------- Responsive ---------- */
@media (max-width:900px){.duo{grid-template-columns:1fr}
.stripline div+div{border-top:1px solid var(--line)}
.reviews-strip{grid-template-columns:1fr}
.cta-band{padding:34px 22px}}
/* ---- colour balance: --ground is the big-area background; neutral by default so the theme stays on buttons, links and pills ---- */
.cta-band{background:linear-gradient(135deg,var(--ground),var(--ground-2))}
/* ---- companion colour: a second hue that belongs to each theme, used for small accents so one colour never dominates ---- */
.stripline .n{background:var(--second-tint);color:var(--second)}
/* ---- Three Best Rated in the trust strip ---- */
@media (max-width:900px){.stripline div+div{border-left:0}}
@media (max-width:520px){.stripline div{border-left:0!important;border-top:1px solid var(--line)}}
/* ---- round nine ---- */
.stripline{grid-template-columns:repeat(3,1fr)}
/* ---- audit fixes ---- */
@media (max-width:520px){.stripline{grid-template-columns:1fr}}
/* ---- narrow phones: Galaxy Z Fold cover screen and other 320 to 380 px viewports ---- */
@media (max-width:480px){.hero-ctas{flex-direction:column;align-items:stretch}
.hero-ctas .btn,.hero-ctas .btn-ghost{justify-content:center}}
/* ======================================================================
   PHONES FIRST (Junaid, 15 Oct 2026): one sticky bar, a menu drawer, the product page in money-making order
   (picture, options, price, basket; the trust points and templates card after), the hero picture back, account tabs.
   ====================================================================== */
@media (max-width:900px){.hero-ctas{order:4}
.hero-art{order:5;display:flex;justify-content:center;margin:24px 0 0}}
.stripline.sl-icons div{font-size:12.5px}
.stripline.sl-icons b{font-size:13.5px;margin-bottom:1px}
@media (min-width:601px) and (max-width:900px){.hero-art{justify-content:center;margin:-6px 0 6px}
.stripline.sl-icons div{flex-direction:column}}
/* ---- Fact cards everywhere (Junaid, 17 Oct 2026: "the About figures cards, I love those; apply that style wherever there is a
   card"). One pattern: an icon tile beside a small capitals label and the title, a hairline, the words underneath. Used by the
   About figures, the step cards (About, Help, Templates, Turnaround), the help and My Account quick-link cards, the quote
   reasons, the delivery contact cards and the 1-2-3 strip under the homepage hero. Markup: .as-ic, .as-k, b, .as-t ---- */
.stripline.sl-icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:0;border-radius:0;background:transparent}
.strip-attach .stripline.sl-icons{box-shadow:none}
.stripline.sl-icons>div{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 16px 38px rgba(42,42,51,.1)}
.stripline.sl-icons>div+div{border-left:1px solid var(--line)}
@media (max-width:700px){.stripline.sl-icons{grid-template-columns:minmax(0,1fr)}
.stripline.sl-icons>div{border:1px solid var(--line)!important}}
@media (max-width:520px){.stripline.sl-icons>div{border:1px solid var(--line)!important}}
/* ---- Sixth round (Junaid, 17 Oct 2026): compact step strip, search with suggestions, lighter phone, compact chat button ---- */
.stripline.sl-icons>div{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic k" "ic v" "ic t";padding:12px 16px;column-gap:14px;row-gap:0;align-items:center}
.stripline.sl-icons .as-ic{width:38px;height:38px;border-radius:var(--radius);align-self:center}
.stripline.sl-icons .as-ic svg{width:18px;height:18px}
.stripline.sl-icons .as-k{font-size:10px;letter-spacing:.6px}
.stripline.sl-icons>div>b{font-size:13.5px;margin:1px 0 0}
.stripline.sl-icons .as-t{grid-area:t;margin:3px 0 0;padding:0;border:0;font-size:12px;line-height:1.45}
.strip-attach{margin-top:-26px}
/* ---- Hero facts (Junaid, 17 Oct 2026, "do something about these cards, reduce the height"): the Same-Day and Three Best
   Rated cards leave the picture and join the figures row as three quiet facts with hairlines between them: icon tile,
   figure, line; the award and same-day facts are links. Hero padding and picture trimmed. ---- */
.hero-art{padding:0!important}
.hero-art .big{max-width:440px}
.hf-live{width:7px;height:7px;border-radius:50%;background:var(--logo);box-shadow:0 0 0 3px rgba(140,165,39,.25);flex:none}
/* ---- Twelfth round (Junaid, 17 Oct 2026): the facts row runs the full hero width under both columns, each fact two
   lines (figure with its label beside it, then the line), spaced out; the product page notice is as wide as the rest ---- */
@media (min-width:901px){.hero-art .big{max-width:400px}}
/* ---- Thirteenth round (Junaid, 17 Oct 2026): the hero facts live in the three strip cards (the 1-2-3 steps are told
   on the help and product pages); the chat and back-to-top buttons turn light over the footer ---- */
.stripline.sl-icons>div{position:relative;transition:border-color .15s,box-shadow .15s,transform .15s}
.stripline.sl-icons>div:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 16px 38px rgba(42,42,51,.1);transform:translateY(-2px)}
.sl-cover{position:absolute;inset:0;border-radius:var(--radius);z-index:1}
.stripline.sl-icons .as-k{display:flex;align-items:center;gap:6px}
.stripline.sl-icons .as-k .hf-live{width:7px;height:7px}
.stripline.sl-icons>div>b .stars-inline{font-size:12px;letter-spacing:.5px;color:var(--star)}
/* ---- Look D, plain and aligned (Junaid, 17 Oct 2026: the refinement was not wanted; alignment was off): picture,
   one-line name, the range under it at the same height on every card ---- */
.hero-ctas .btn,.hero-ctas .btn-ghost,.cta-band .row .btn,.cta-band .row .btn-ghost{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:1px solid var(--ink);border-radius:var(--radius);font-size:14px;font-weight:500;line-height:1}
.hero-ctas .btn-ghost,.cta-band .row .btn-ghost{background:#fff;color:var(--ink)}
.hero-ctas .btn-ghost:hover,.cta-band .row .btn-ghost:hover{background:var(--panel)}
/* ==== Home promo boxes, v2 (Junaid, 17 Oct 2026: "looking very basic", and the text colour setting must change their text).
   A tinted card (theme tint / accent tint, or Site Content's own colours), an icon tag, a bigger heading, quick links as
   chips, a solid button in the text colour, the picture behind a curved corner. Everything takes --promo-ink and
   --promo-bg, so a background or text colour chosen in HQ reaches every word in every theme. ==== */
.duo3{gap:22px}
.promo3{--promo-bg:var(--tint);--promo-ink:var(--ink);position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:330px;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:var(--promo-bg);color:var(--promo-ink)}
.promo3[data-pn="2"]{--promo-bg:var(--accent-tint)}
.promo3.p3-white{box-shadow:inset 0 0 0 1px var(--line)}
.p3-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:34px 12px 34px 36px;min-width:0}
.p3-tag{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 13px 0 10px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--promo-ink) 32%,transparent);font-size:12px;font-weight:500;line-height:1}
.p3-tag svg{width:15px;height:15px;flex:none}
.promo3 h3{margin:16px 0 10px;max-width:17ch;text-wrap:balance;font-size:25px;font-weight:500;line-height:1.22;letter-spacing:-.01em;color:inherit}
.promo3 p{max-width:42ch;font-size:13.5px}
.p3-live{display:inline-flex;align-items:center;gap:9px;margin:-4px 0 16px;font-size:12.5px;font-weight:500}
.p3-live[hidden]{display:none}
.p3-live::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(63,157,107,.2)}
.p3-live.later::before{background:#D9A23A;box-shadow:0 0 0 4px rgba(217,162,58,.22)}
.p3-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.p3-chips a{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);border:1px solid color-mix(in srgb,var(--promo-ink) 22%,transparent);font-size:12.5px;text-decoration:none;transition:background-color .18s ease,border-color .18s ease}
.p3-chips a:hover,.p3-chips a:focus-visible{background:color-mix(in srgb,var(--promo-ink) 9%,transparent);border-color:color-mix(in srgb,var(--promo-ink) 45%,transparent);outline:0}
.p3-cta{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 20px;border-radius:var(--radius);background:var(--promo-ink);color:var(--promo-bg);font-size:13.5px;font-weight:500;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.p3-cta svg{width:16px;height:16px;transition:transform .2s ease}
.p3-cta:hover,.p3-cta:focus-visible{transform:translateY(-1px);box-shadow:0 12px 24px -14px color-mix(in srgb,var(--promo-ink) 75%,transparent);color:var(--promo-bg)}
.p3-cta:hover svg{transform:translateX(3px)}
.p3-art{position:relative;margin:14px 14px 14px 0;border-radius:var(--radius) var(--radius) var(--radius) 130px;overflow:hidden;background:#EBEDEF}
.p3-art img{position:absolute;inset:0;width:100%;height:100%;transition:transform .6s ease}
.promo3:hover .p3-art img{transform:scale(1.04)}
@media (max-width:1100px){.promo3{grid-template-columns:minmax(0,1fr) minmax(0,.75fr)}
.p3-body{padding:28px 10px 28px 28px}
.promo3 h3{font-size:22px}}
@media (max-width:900px){.duo3{gap:16px}
.promo3{grid-template-columns:1fr;min-height:0}
.p3-art{order:-1;height:210px;margin:12px 12px 0;border-radius:var(--radius) var(--radius) var(--radius) 70px}
.p3-body{padding:22px 22px 26px}
.promo3 h3{max-width:none;font-size:22px}}
@media (prefers-reduced-motion:reduce){.p3-art img,.p3-cta,.p3-cta svg{transition:none}
.promo3:hover .p3-art img{transform:none}}
/* ==== Home free guides panel (Junaid, 17 Oct 2026: "make them smaller so they don't take more space, squeeze a few more in,
   design this panel better"): a tinted panel, the intro with three small facts and a button on the left, every guide as a
   small cover in a strip that scrolls with arrows (about five in view on a laptop) ==== */
.hg2{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:center;padding:34px 0 34px 38px;border-radius:var(--radius);background:var(--panel);overflow:hidden}
.hg2-t h2{margin:10px 0 10px;text-wrap:balance;font-size:26px;font-weight:500;line-height:1.2}
.hg2-facts{display:flex;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.hg2-facts li{display:flex;flex-direction:column;gap:3px;min-width:76px;padding:10px 13px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.hg2-facts b{font-size:17px;font-weight:500;line-height:1.1;color:var(--ink)}
.hg2-facts span{font-size:11px;font-weight:500;color:var(--muted)}
.hg2-cta{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--radius);background:var(--primary);color:#fff;font-size:13px;font-weight:500;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.hg2-cta svg{width:15px;height:15px;transition:transform .2s ease}
.hg2-cta:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 24px -14px rgba(20,24,28,.6)}
.hg2-cta:hover svg{transform:translateX(3px)}
.hg2-strip{position:relative;min-width:0}
.hg2-list{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;padding:8px 38px 12px 4px;scroll-snap-type:x proximity;scroll-padding-left:4px;scrollbar-width:none;overscroll-behavior-x:contain}
.hg2-list::-webkit-scrollbar{display:none}
.hg2-list .gcard{flex:0 0 156px;scroll-snap-align:start}
.hg2-list .gcard .gk{margin-top:12px;font-size:10px}
.hg2-list .gcard .gk i{font-size:11px}
.hg2-list .gcard b{margin-top:4px;font-size:13px;line-height:1.35}
.hg2-nav{position:absolute;top:118px;z-index:2;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 6px 16px rgba(20,24,28,.16);transition:border-color .15s ease}
.hg2-nav[hidden]{display:none}
.hg2-nav:hover{border-color:rgba(var(--prgb),.4)}
.hg2-nav.prev{left:-10px}
.hg2-nav.next{right:16px}
.hg2-nav svg{width:16px;height:16px}
@media (max-width:1100px){.hg2{grid-template-columns:1fr;gap:22px;padding:28px 0 28px 28px}
.hg2-t{padding-right:28px}}
@media (max-width:600px){.hg2{padding:24px 0 22px 18px;border-radius:var(--radius)}
.hg2-t{padding-right:18px}
.hg2-t h2{font-size:23px}
.hg2-list{gap:14px;padding-right:18px}
.hg2-list .gcard{flex-basis:132px}
.hg2-nav{display:none!important}
.hg2-facts li{flex:1;min-width:0}}
.hg2-list{padding-bottom:18px}
/* ==== Home slider (Junaid, 18 Oct 2026): ChatGPT's ten panoramic pictures (2.4 to 1, products on the right, the left third
   kept clear for live words). A full-width band in the picture's own grey, the picture at the page width, the words on its
   left third, controls under the words; a crossfade between slides. Phones: the words, then the picture below them. ==== */
.hslider{--hs-bg:#EAECED;position:relative;background:var(--hs-bg);border-bottom:1px solid var(--line);transition:background-color .6s ease}
/* the designed slides' soft glow bleeds 6% past each slide: clip it sideways so the page never scrolls left and right */
.hslider{overflow-x:hidden;overflow-x:clip}
.hs-in{position:relative;max-width:var(--page-w,1340px);margin:0 auto;aspect-ratio:2.4/1;max-height:600px}
.hs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
.hs-slide.on{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s}
.hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;transform:scale(1.015);transition:transform 6s ease}
.hs-slide.on .hs-img{transform:none}
.hs-txt{position:absolute;left:24px;top:0;bottom:84px;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:min(36%,470px)}
.hs-txt>*{opacity:0;transform:translateY(10px);transition:opacity .5s ease .25s,transform .5s ease .25s}
.hs-slide.on .hs-txt>*{opacity:1;transform:none}
.hs-slide.on .hs-txt>:nth-child(2){transition-delay:.32s}
.hs-slide.on .hs-txt>:nth-child(3){transition-delay:.39s}
.hs-slide.on .hs-txt>:nth-child(4){transition-delay:.46s}
.hs-txt .eyebrow{margin:0}
.hs-txt h1,.hs-txt h2{margin:14px 0 14px;font-size:clamp(28px,3.1vw,44px);font-weight:400;line-height:1.12;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.hs-txt h2{font-size:clamp(26px,2.7vw,38px);font-weight:500}
.hs-txt h1 b{font-weight:500;color:var(--primary)}
.hs-txt p{max-width:40ch}
.hs-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hs-ctas .btn,.hs-ctas .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border:1px solid var(--ink);border-radius:var(--radius);font-size:14px;font-weight:500;line-height:1}
.hs-ctas .btn{background:var(--primary);color:#fff}
.hs-ctas .btn-ghost{background:#fff;color:var(--ink)}
.hs-ctas .btn svg{width:16px;height:16px;transition:transform .2s ease}
.hs-ctas .btn:hover svg{transform:translateX(3px)}
.hs-ui{position:absolute;left:24px;bottom:30px;z-index:3;display:flex;align-items:center;gap:10px}
.hs-nav{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(20,24,28,.12);border-radius:50%;background:rgba(255,255,255,.85);color:var(--ink);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.hs-nav:hover{background:#fff;border-color:rgba(20,24,28,.28)}
.hs-nav svg{width:16px;height:16px}
.hs-play .i-play,.hslider.paused .hs-play .i-pause{display:none}
.hslider.paused .hs-play .i-play{display:block}
.hs-dots{display:flex;align-items:center;gap:6px;padding:0 4px}
/* each dot is a 28 px tall touch target; the 8 px track is drawn by ::before and the fill (i) sits on it */
.hs-dots button{position:relative;width:8px;height:28px;padding:0;border:0;border-radius:0;background:none;cursor:pointer;overflow:hidden;transition:width .3s ease}
.hs-dots button::before{content:"";position:absolute;left:0;right:0;top:10px;bottom:10px;border-radius:var(--bar-r);background:rgba(20,24,28,.22);transition:background-color .2s ease}
.hs-dots button:hover::before{background:rgba(20,24,28,.4)}
.hs-dots button.on{width:34px}
.hs-dots button.on::before{background:rgba(20,24,28,.18)}
.hs-dots button i{position:absolute;left:0;top:10px;bottom:10px;width:0;border-radius:var(--bar-r);background:var(--primary)}
.hs-dots button.on i{width:100%}
.hslider.run .hs-dots button.on i{width:0;animation:hsFill var(--hs-t,7s) linear forwards}
@media (max-width:1100px){.hs-txt{width:40%}}
@media (max-width:760px){.hs-in{aspect-ratio:auto;max-height:none;display:grid}
.hs-slide{position:relative;grid-area:1/1;display:flex;flex-direction:column}
.hs-txt{position:static;order:-1;width:auto}
.hs-txt h1,.hs-txt h2{font-size:28px;margin:10px 0}
.hs-img{position:relative;inset:auto;aspect-ratio:2.1/1;height:auto}
.hs-ui{position:relative;left:auto;bottom:auto;grid-area:2/1;justify-content:center;padding:4px 0 18px}}
@media (prefers-reduced-motion:reduce){.hs-slide,.hs-img,.hs-txt>*{transition:none}
.hs-img{transform:none}}
/* the brand slide's picture reaches further left than the others: drawn a little smaller from the right so the words stay clear */
.hs-slide[data-i="0"] .hs-img{transform-origin:100% 55%;transform:scale(.88)}
.hs-slide[data-i="0"].on .hs-img{transform:scale(.865)}
@media (max-width:760px){.hs-slide[data-i="0"] .hs-img,.hs-slide[data-i="0"].on .hs-img{transform:none}}
/* ==== Home slider, designed look (Junaid, 18 Oct 2026: "clear background ... add some really nice effects in the background").
   The products are cut out (tools/cut_hero_slides.py: BiRefNet masks, natural shadows kept as black with alpha) and stand on
   a background drawn in the theme's own colours: a soft tint gradient, two slow-drifting light blobs (primary and accent), a
   pale floor under the products and a fine ring with an accent dot circling it. Every slide places them a little
   differently. The products are drawn about 15 per cent smaller. Store Settings > Site Content > Slider look: Plain shows the
   photos as shot. ==== */
.hslider.designed{background:linear-gradient(112deg,color-mix(in srgb,var(--tint) 60%,#fff) 0%,#fff 40%,color-mix(in srgb,var(--tint) 90%,#fff) 100%);border-bottom-color:transparent}
.hslider.designed .hs-in{aspect-ratio:2.6/1;max-height:540px}
.hslider.designed .hs-slide{--bx:74%;--by:46%;--ax:96%;--ay:10%;--rx:16%;--ry:7%;--rs:62%}
.hslider.designed .hs-slide[data-i="1"]{--bx:70%;--by:58%;--ax:52%;--ay:6%;--rx:10%;--ry:12%}
.hslider.designed .hs-slide[data-i="2"]{--bx:78%;--by:40%;--ax:58%;--ay:88%;--rx:22%;--ry:4%}
.hslider.designed .hs-slide[data-i="3"]{--bx:66%;--by:52%;--ax:94%;--ay:86%;--rx:12%;--ry:9%;--rs:58%}
.hslider.designed .hs-slide[data-i="4"]{--bx:76%;--by:50%;--ax:50%;--ay:14%;--rx:18%;--ry:6%}
.hslider.designed .hs-slide[data-i="5"]{--bx:68%;--by:44%;--ax:97%;--ay:80%;--rx:14%;--ry:10%}
.hslider.designed .hs-slide[data-i="6"]{--bx:74%;--by:56%;--ax:55%;--ay:10%;--rx:20%;--ry:5%;--rs:66%}
.hslider.designed .hs-slide[data-i="7"]{--bx:70%;--by:42%;--ax:95%;--ay:90%;--rx:11%;--ry:11%}
.hslider.designed .hs-slide[data-i="8"]{--bx:78%;--by:54%;--ax:52%;--ay:88%;--rx:17%;--ry:6%}
.hslider.designed .hs-slide[data-i="9"]{--bx:72%;--by:48%;--ax:94%;--ay:12%;--rx:13%;--ry:8%}
.hslider.designed .hs-slide::before{content:"";position:absolute;inset:-6%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 30%,transparent),transparent) var(--bx) var(--by)/58% 115% no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--accent) 32%,transparent),transparent) var(--ax) var(--ay)/34% 72% no-repeat,
    radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0)) 74% 98%/62% 26% no-repeat;
  animation:hsDrift 16s ease-in-out infinite alternate}
.hslider.designed .hs-slide::after{content:"";position:absolute;right:4%;top:6%;z-index:0;width:28%;height:62%;pointer-events:none;opacity:.55;
  background:radial-gradient(circle,color-mix(in srgb,var(--ink) 16%,transparent) 1.1px,transparent 1.6px) 0 0/16px 16px;
  -webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent)}
.hs-ring{display:none}
.hslider.designed .hs-ring{display:block;position:absolute;right:var(--rx);top:var(--ry);z-index:0;width:auto;height:var(--rs);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--primary) 26%,transparent);pointer-events:none;animation:hsOrbit 40s linear infinite}
.hslider.designed .hs-ring::after{content:"";position:absolute;left:50%;top:-6px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent)}
.hslider.designed .hs-img{z-index:1;object-fit:contain;object-position:right center;transform-origin:90% 62%;transform:scale(.87)}
.hslider.designed .hs-slide.on .hs-img{transform:scale(.85)}
.hslider.designed .hs-slide[data-i="0"] .hs-img{transform:scale(.8)}
.hslider.designed .hs-slide[data-i="0"].on .hs-img{transform:scale(.78)}
.hslider.designed .hs-ui .hs-nav{background:#fff}
@media (max-width:760px){.hslider.designed .hs-in{aspect-ratio:auto;max-height:none}
.hslider.designed .hs-img,.hslider.designed .hs-slide.on .hs-img,.hslider.designed .hs-slide[data-i="0"] .hs-img,.hslider.designed .hs-slide[data-i="0"].on .hs-img{transform:none}
.hslider.designed .hs-ring{height:auto;width:56%;right:6%;top:auto;bottom:6%}
.hslider.designed .hs-slide::after{display:none}}
@media (prefers-reduced-motion:reduce){.hslider.designed .hs-slide::before,.hslider.designed .hs-ring{animation:none}}
/* ==== Order received (Junaid, 18 Oct 2026) ==== */
/* the ring with the circling dot behind the slider products is off unless Site Content > Slider ring turns it on
   (Junaid, 18 Oct 2026: the moving dot went up and down behind the pictures) */
.hslider.designed:not(.ring) .hs-ring{display:none}
@media (min-width:761px){.hs-ui{bottom:58px}
.hs-txt{bottom:106px}}
@media (max-width:760px){.hs-slide{justify-content:flex-start}
.hs-slide .hs-img{margin-top:auto}
/* the picture keeps its place above the controls whatever the length of the words */
.hs-txt{padding:22px 18px 4px}
.hs-txt .hs-ctas .btn,.hs-txt .hs-ctas .btn-ghost{height:44px}
.hslider.designed .hs-img,.hslider.designed .hs-slide.on .hs-img,.hslider.designed .hs-slide[data-i="0"] .hs-img,.hslider.designed .hs-slide[data-i="0"].on .hs-img{aspect-ratio:1.6/1;object-fit:cover;object-position:100% 52%}
.hslider.designed .hs-slide[data-i="0"] .hs-img,.hslider.designed .hs-slide[data-i="0"].on .hs-img{object-position:84% 52%}
/* the collection starts further left */
.hslider .hs-ui{padding:8px 0 48px}}
/* ==== SHOP SKIN 2026: the home page (21 Oct 2026). The three strip cards under the slider float on a shadow (no outline, a
   tinted icon tile); the guide facts, the reviews, the band at the foot and the slider arrows lose their borders. ==== */
.stripline.sl-icons>div{border:0!important;box-shadow:0 1px 2px rgba(25,32,38,.05),0 18px 40px -20px rgba(25,32,38,.28)}
.stripline.sl-icons>div:hover{box-shadow:var(--card-sh2);transform:translateY(-2px)}
.stripline.sl-icons .as-ic{border:0;background:var(--tint);color:var(--icon,var(--primary))}
.hero-art .chip{border:0;box-shadow:var(--card-sh)}
.hg2-facts li{border:0;box-shadow:var(--card-sh)}
.hg2-nav{border:0}
.rev{border:0;box-shadow:var(--card-sh)}
.cta-band{border:0;box-shadow:var(--card-sh)}
.promo3.p3-white{box-shadow:var(--card-sh)}
.hs-nav{border:0;box-shadow:var(--card-sh)}
.hs-nav:hover{box-shadow:var(--card-sh2)}
/* ==== EVERY SCREEN (21 Oct 2026): tablets and small laptops (761 to 1100 px). The slider's words (eyebrow, two-line title,
   three lines, two stacked buttons) grew taller than the band and the eyebrow slid under the menu; the band is taller here and
   the words a little wider so the buttons sit side by side. ==== */
@media (min-width:761px) and (max-width:1100px){
  .hs-in,.hslider.designed .hs-in{aspect-ratio:2/1;max-height:none}
  .hs-txt{width:46%;bottom:92px}
  .hs-txt h1,.hs-txt h2{font-size:clamp(26px,3vw,36px);margin:10px 0 10px}
  .hs-txt p{margin-bottom:16px}
  .hs-ui{bottom:40px}}

/* ---- NO LAYOUT SHIFT (31 Oct 2026): the classic hero is only for heroMode "classic" (index.html removes the slider then); while the slider
   is on the page the classic hero is not drawn, so the page is not first painted with both and then shortened by a whole screen */
.hslider~.hero{display:none}

/* ==== HOME AS THE PDF (7 Nov 2026, Junaid: "Where are the home screen cards I gave you?"; design/print-buddy-one-theme PDF pages 3 to 10,
   "Home 1 of 8" to "8 of 8"). Pack colours only; stars in the logo lime; product photos keep their own grey (decision 5j). ==== */
/* hero: Popular chips, the dashes with the slide's name beside them */
.hs-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:var(--muted)}
.hs-pop a{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);font-size:12.5px;text-decoration:none}
.hs-pop a:hover{background:var(--tint)}
html .hslider .hs-txt h1{color:var(--ink)}
.hs-name{font-size:12px;color:var(--muted);white-space:nowrap;margin-right:6px}
.hs-dots button{width:16px}
.hs-dots button::before{top:13px;bottom:13px;border-radius:0;background:var(--line-strong)}
.hs-dots button.on{width:22px}
.hs-dots button.on::before{background:var(--ink)}
/* the strip: four white tiles over the hero's foot, each icon in a round tint disc */
.stripline.sl-four{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border:0;background:none;box-shadow:none}
.strip-attach .stripline.sl-four{box-shadow:none}
.sl-four .sl-fact{position:relative;padding:18px 20px;border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),0 10px 28px rgba(42,42,51,.06)}
.stripline.sl-four div+div{border:0}
.sl-four .as-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--tint);color:var(--muted)}
.sl-four .as-ic svg{width:17px;height:17px}
.sl-four .as-k{display:block;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sl-four b{font-size:14px;font-weight:400;color:var(--ink);margin:2px 0}
.sl-four .as-t{display:block;font-size:12px;color:var(--muted)}
.sl-four .sd-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--logo);vertical-align:1px;margin-left:4px}
.sl-four .sl-sd.later .sd-dot{background:var(--line-strong)}
@media (max-width:1100px){.stripline.sl-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stripline.sl-four{grid-template-columns:minmax(0,1fr);gap:10px}.sl-four .sl-fact{padding:14px 16px}}
/* Shop by Need: nine cards on the warm panel, words left, the range's cut-out right */
.need-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.need-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;min-height:200px;border-radius:var(--radius-card);background:var(--panel);color:var(--ink);text-decoration:none;overflow:hidden;transition:background .2s}
.need-card:hover{background:var(--tint)}
.nd-t{display:flex;flex-direction:column;gap:6px;padding:26px 0 26px 24px}
.nd-t .eyebrow{margin:0 0 4px;font-size:10.5px;letter-spacing:.14em}
.nd-t b{font-size:17px;font-weight:400;line-height:1.25;color:var(--ink)}
.nd-t small{font-size:13px;line-height:1.45;color:var(--muted)}
.nd-go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--ink)}
.nd-go svg{width:13px;height:13px;transition:transform .2s}
.need-card:hover .nd-go svg{transform:translateX(3px)}
.nd-im{display:block;align-self:stretch;position:relative}
.nd-im img{position:absolute;inset:8px 0 8px 0;width:100%;height:calc(100% - 16px);object-fit:contain;object-position:center right}
.need-card.full .nd-im{margin:6px 6px 6px 0;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.need-card.full .nd-im img{inset:0;height:100%;object-fit:cover;object-position:center}
@media (max-width:1100px){.need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.need-grid{grid-template-columns:minmax(0,1fr);gap:12px}.need-card{min-height:150px}.nd-t{padding:20px 0 20px 18px}.nd-t b{font-size:16px}}
/* Browse by Category: the photo on its own grey with 16 px corners, the name left and the count right, no box */
.cat-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 18px}
.ct-tile{display:flex;flex-direction:column;gap:12px;color:var(--ink);text-decoration:none}
.ct-im{position:relative;display:block;aspect-ratio:29/25;border-radius:var(--radius-card);overflow:hidden;background:#EBEDEF}
.ct-im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.ct-tile:hover .ct-im img{transform:scale(1.02)}
.ct-flag{position:absolute;left:12px;top:12px;z-index:1;padding:4px 10px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--ink);color:#fff;font-size:11px}
.ct-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 4px}
.ct-row b{font-size:15.5px;font-weight:400}
.ct-row small{font-size:12px;color:var(--muted);white-space:nowrap}
@media (max-width:900px){.cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.ct-row{flex-direction:column;gap:2px;padding:0 2px}}
/* Popular Choices: product cards on the warm panel */
.pop-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pc-card{display:flex;flex-direction:column;padding:10px 10px 16px;border-radius:var(--radius-card);background:var(--panel);color:var(--ink);text-decoration:none;transition:background .2s}
.pc-card:hover{background:var(--tint)}
.pc-im{position:relative;display:block;aspect-ratio:27/19;border-radius:var(--radius-card);overflow:hidden;background:#EBEDEF;margin-bottom:14px}
.pc-im img{display:block;width:100%;height:100%;object-fit:cover}
.pc-flag{position:absolute;left:10px;top:10px;z-index:1;padding:4px 9px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--surface);color:var(--ink);font-size:11px}
.pc-card>b{padding:0 6px;font-size:15.5px;font-weight:400}
.pc-card>small{padding:4px 6px 14px;font-size:13px;line-height:1.45;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:12px}
.pc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:0 6px;margin-top:auto}
.pc-price small{display:block;font-size:11px;color:var(--muted)}
.pc-price b{display:block;font-size:15px;font-weight:500;line-height:1.3}
.pc-go{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:12.5px;font-weight:500}
.pc-go svg{width:12px;height:12px}
.pc-card:hover .pc-go{background:var(--primary-hover)}
@media (max-width:1100px){.pop-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.pop-cards{gap:12px}.pc-foot{flex-direction:column;align-items:flex-start}}
/* Finishes That Get Noticed */
.finishes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--radius-card);overflow:hidden;background:var(--panel)}
.fn-pic{min-height:440px;background:#EBEDEF}
.fn-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fn-body{padding:56px 48px}
.fn-body h2{margin:8px 0 0;font-size:38px;font-weight:500;line-height:1.1;letter-spacing:-.02em}
.fn-body>p{margin:14px 0 0;font-size:15px;color:var(--muted)}
.fn-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:26px 0;max-width:520px}
.fn-tiles a{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.fn-tiles a:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.fn-tiles b{font-size:14px;font-weight:400}
.fn-tiles small{font-size:12px;color:var(--muted)}
.finishes .row{display:flex;flex-wrap:wrap;gap:10px}
.finishes .btn-ghost{height:46px;padding:0 20px;box-shadow:inset 0 0 0 1px var(--line-strong);border:0;color:var(--ink)}
@media (max-width:900px){.finishes{grid-template-columns:minmax(0,1fr)}.fn-pic{min-height:0;aspect-ratio:16/10}.fn-body{padding:28px 20px}.fn-body h2{font-size:26px}}
/* What Customers Say: the dark score tile and white review cards, stars in lime (real reviews only) */
.rv-row{display:grid;grid-template-columns:minmax(0,.85fr) repeat(3,minmax(0,1fr));gap:18px}
.rv-list{display:contents}
.rv-score{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:26px 24px;border-radius:var(--radius-card);background:var(--ink);color:#fff}
.rv-score b{font-size:48px;font-weight:400;line-height:1}
.rv-score small{font-size:13px;color:rgba(255,255,255,.74)}
.rv-stars{color:var(--logo);letter-spacing:3px;font-size:17px}
.rv-card{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--radius-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.rv-card p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.rv-card small{font-size:12px;color:var(--muted)}
@media (max-width:1100px){.rv-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rv-row{grid-template-columns:minmax(0,1fr)}}
/* Free Print Guides: the warm panel and charcoal covers with a short lime bar */
#homeGuides .hg2{border-radius:var(--radius-card);background:var(--panel);padding:40px 34px}
#homeGuides .hg2-facts li{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-sm)}
.hgc2{display:flex;flex-direction:column;gap:10px;flex:0 0 150px;color:var(--ink);text-decoration:none;scroll-snap-align:start}
.hgc-cov{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:150/196;padding:34px 12px 14px;border-radius:var(--radius-sm);background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(42,42,51,.16)}
.hgc-cov[data-t="1"]{background:var(--primary)}
.hgc-cov[data-t="2"]{background:var(--primary-hover)}
.hgc-cov i{position:absolute;left:12px;top:12px;width:24px;height:3px;border-radius:0;background:var(--logo)}
.hgc-cov b{margin-top:auto;margin-bottom:auto;font-size:14px;font-weight:500;line-height:1.3}
.hgc-cov small{font-size:10.5px;color:rgba(255,255,255,.74)}
.hgc-k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hgc2:hover .hgc-cov{transform:translateY(-2px)}
.hgc-cov{transition:transform .2s}
/* How It Works: four tiles in one outlined row */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.steps4 li{display:flex;flex-direction:column;gap:6px;padding:22px}
.steps4 li+li{border-left:1px solid var(--line)}
.st-n{display:grid;place-items:center;width:26px;height:26px;margin-bottom:12px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px}
.steps4 b{font-size:15px;font-weight:400}
.steps4 small{font-size:13px;color:var(--muted)}
@media (max-width:900px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}.steps4 li:nth-child(3){border-left:0}.steps4 li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){.steps4{grid-template-columns:minmax(0,1fr)}.steps4 li+li{border-left:0;border-top:1px solid var(--line)}}
/* the closing band: warm panel, the lime line under "brilliant." */
main .cta-band{border-radius:var(--radius-card);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
main .cta-band h2 b{font-weight:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--logo);text-decoration-thickness:4px;text-underline-offset:6px;text-decoration-skip-ink:none}
main .cta-band h2 b .stop{color:var(--ink)}
.sl-four .sl-fact>div{display:block;padding:0;font-size:inherit}
/* the two promo panels as drawn: warm panel, the photo square to the edge, white outline chips */
.duo3 .promo3{--promo-bg:var(--panel);border-radius:var(--radius-card);min-height:360px}
.duo3 .p3-art{margin:0;border-radius:0}
.duo3 .p3-chips a,.duo3 .p3-tag{background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--line-strong)}
.duo3 .p3-chips a{font-weight:400}
@media (max-width:900px){.duo3 .p3-art{margin:0;border-radius:0;height:220px}}
.fn-pic img{object-position:center 75%}
.hs-slide,.hs-txt{min-width:0;max-width:100%}
.hs-pop{max-width:100%}
.stripline.sl-four .sl-fact>div{border:0!important}
#homeGuides .hg2-facts li{min-width:0}
#homeGuides .hg2-facts span{white-space:nowrap}
@media (max-width:420px){#homeGuides .hg2-facts{flex-wrap:wrap}}
@media (max-width:760px){.hs-in,.hslider.designed .hs-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.hs-name{display:none}}
@media (min-width:561px){.sl-four .sl-fact{min-height:96px}}
/* Shop by Need, round 2 (Junaid: "some of the pictures were too small ... the text was too close touching"): product cut-outs on
   transparent grounds, large in their own column, a clear gap between the words and the picture */
.need-card{grid-template-columns:minmax(0,1fr) minmax(150px,44%);gap:22px;min-height:210px}
.nd-t{padding:26px 0 26px 24px}
.nd-im{display:flex;align-items:center;justify-content:center;padding:14px 14px 14px 0}
.nd-im img{position:static;inset:auto;width:100%;height:auto;max-height:190px;aspect-ratio:1/1;object-fit:contain;object-position:center;transform:scale(1.04);transition:transform .3s ease}
.need-card:hover .nd-im img{transform:scale(1.08)}
@media (max-width:640px){.need-card{grid-template-columns:minmax(0,1fr) 42%;min-height:170px}.nd-im img{max-height:150px}}
/* Shop by Need, round 3: the redesign artifact's cards (.h-n: 14 px corners on --panel, padding 22 18 22 24, words 17 px at 500) with the
   artifact's group pictures cut tight from the 1600 px slide cut-outs, so they fill their 200 px column and never reach the words */
.need-card{grid-template-columns:minmax(0,1fr) 200px;gap:16px;min-height:150px;padding:22px 18px 22px 24px;border-radius:var(--radius-card);align-items:center}
.nd-t{padding:0;gap:0}
.nd-t .eyebrow{font-size:11px;letter-spacing:.12em;margin:0}
.nd-t b{font-size:17px;font-weight:500;line-height:1.25;margin:6px 0 4px}
.nd-t small{font-size:13px;line-height:1.45}
.nd-go{margin-top:12px;font-weight:500}
.nd-im{padding:0;display:flex;align-items:center;justify-content:center}
.nd-im img{width:100%;height:auto;max-height:170px;aspect-ratio:auto;object-fit:contain;transform:none}
.need-card:hover .nd-im img{transform:scale(1.04)}
.need-card.photo .nd-im{border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.need-card.photo .nd-im img{aspect-ratio:1/1;max-height:none;object-fit:cover}
@media (max-width:1240px){.need-card{grid-template-columns:minmax(0,1fr) 160px}}
@media (max-width:640px){.need-card{grid-template-columns:minmax(0,1fr) 42%;padding:20px 14px 20px 18px;min-height:0}.nd-im img{max-height:130px}}
/* Round 3: the rest of the home page to the redesign artifact's exact values (Main.dc.html in "Print Buddy Website Redesign") */
.sl-four .sl-fact{border-radius:var(--radius);padding:16px 18px;gap:14px}
.sl-four .as-ic{width:40px;height:40px;background:var(--panel)}
.sl-four b{font-size:15px;font-weight:500}
.sl-four .as-k{font-size:11px}
.sl-four .as-t{font-size:12.5px}
.cat-tiles{gap:28px 20px}
.ct-im{aspect-ratio:1/1}
.ct-row b{font-weight:500}
.ct-row small{font-size:12.5px}
.ct-tile:hover .ct-row b{text-decoration:underline;text-underline-offset:4px}
.ct-flag{font-weight:500}
.pop-cards{gap:20px}
.pc-card{padding:0 0 18px;border-radius:var(--radius-card);overflow:hidden}
.pc-im{aspect-ratio:1/.92;margin:10px 10px 16px;border-radius:var(--radius);background:var(--surface)}
.pc-flag{font-weight:500;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.pc-card>b{padding:0 18px;font-weight:500}
.pc-card>small{padding:4px 18px 14px;margin:0 0 0;border-bottom:0}
.pc-foot{margin:0 18px;padding:14px 0 0;border-top:1px solid var(--line);align-items:center}
.pc-price small{font-size:12px;line-height:1.2}
.pc-go{height:36px;padding:0 14px;border-radius:var(--radius-sm);background:var(--ink);font-size:13px}
.finishes{border-radius:var(--radius-card)}
.fn-pic{min-height:380px}
.fn-body{padding:52px}
.fn-body h2{font-size:34px;line-height:1.12}
.fn-tiles{margin:24px 0}
.fn-tiles a{border-radius:var(--radius)}
.fn-tiles b{font-weight:500}
.fn-tiles small{font-size:12.5px}
.duo3 .promo3{min-height:300px}
.duo3 .p3-body{padding:34px}
.duo3 .promo3 h3{font-size:26px;font-weight:500;letter-spacing:-.015em;line-height:1.15;margin:14px 0 10px}
.duo3 .promo3 p{font-size:14px}
.duo3 .p3-chips a{border-radius:var(--radius-sm);font-size:12px;height:auto;padding:4px 10px}
.rv-row{grid-template-columns:280px repeat(3,minmax(0,1fr))}
.rv-score{border-radius:var(--radius-card);padding:26px}
.rv-score b{font-size:56px;font-weight:500;letter-spacing:-.02em}
.rv-stars{font-size:18px}
.rv-card{border-radius:var(--radius-card)}
.rv-card p{font-size:15px}
#homeGuides .hg2{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;padding:36px;border-radius:var(--radius-card);align-items:center}
#homeGuides .hg2-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;overflow:hidden}
#homeGuides .hg2-list .hgc2:nth-child(n+6){display:none}
#homeGuides .hg2-nav{display:none}
.hgc2{flex:none}
.hgc-cov{aspect-ratio:3/4;border-radius:var(--radius-sm);padding:12px;box-shadow:0 6px 18px rgba(42,42,51,.14)}
.hgc-cov i{left:12px;top:12px;width:28px;border-radius:0}
.hgc-cov b{font-size:15px;line-height:1.2}
.hgc-k{font-size:11px;letter-spacing:.1em}
#homeGuides .hg2-facts b{font-size:20px}
#homeGuides .hg2-facts span{font-size:12px}
.steps4{border-radius:var(--radius-card)}
.steps4 li{padding:24px}
.st-n{width:30px;height:30px;margin-bottom:14px;font-size:13px;font-weight:500}
.steps4 b{font-weight:500}
.steps4 small{font-size:13.5px}
main .cta-band{border-radius:var(--radius-card);padding:60px 24px}
main .cta-band h2{font-size:42px}
main .cta-band h2 b{text-decoration:none;box-shadow:inset 0 -10px 0 color-mix(in srgb,var(--logo) 35%,transparent)}
@media (max-width:1100px){.rv-row{grid-template-columns:repeat(2,minmax(0,1fr))}#homeGuides .hg2{grid-template-columns:minmax(0,1fr)}#homeGuides .hg2-list{grid-template-columns:repeat(3,minmax(0,1fr))}#homeGuides .hg2-list .hgc2:nth-child(n+4){display:none}}
@media (max-width:900px){.fn-body{padding:28px 20px}.fn-body h2{font-size:26px}main .cta-band h2{font-size:28px}.duo3 .p3-body{padding:24px 20px}}
@media (max-width:560px){.rv-row{grid-template-columns:minmax(0,1fr)}#homeGuides .hg2{padding:24px 18px}#homeGuides .hg2-list{grid-template-columns:repeat(2,minmax(0,1fr))}#homeGuides .hg2-list .hgc2:nth-child(n+3){display:none}}
.team h2{font-size:36px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.team-list b{font-size:15.5px;font-weight:500}
@media (max-width:900px){.team h2{font-size:26px}}
/* Shop by Need, round 4 (Junaid's phone, a wide phone with a large text size): the cards follow their OWN width, not the screen's.
   The grid's width decides the columns (one, two with the last card across both, or three: never a hole); a card narrower than
   30em puts its picture above the words; words top-aligned so the rows line up; eyebrows on one line. */
.hm-need{container-type:inline-size;container-name:need}
.need-grid{grid-template-columns:minmax(0,1fr)}
@container need (min-width:44em){.need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.need-grid>.need-card:last-child:nth-child(odd){grid-column:1/-1}}
@container need (min-width:68em){.need-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.need-grid>.need-card:last-child:nth-child(odd){grid-column:auto}}
.need-card{display:block;padding:0;min-height:0;container-type:inline-size;container-name:card}
.nd-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(9em,44%);gap:16px;align-items:start;align-content:start;height:100%;box-sizing:border-box;padding:22px 18px 22px 24px}
.nd-t{min-width:0}
.nd-t .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:clip;letter-spacing:.08em}
.nd-im{align-self:center}
.nd-im img{max-height:11em}
@container card (max-width:30em){
  .nd-in{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 18px 20px}
  .nd-im{order:-1;align-self:stretch;height:11em}
  .nd-im img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:center}
  .need-card.photo .nd-im img{aspect-ratio:auto;object-fit:cover}
}
@media (max-width:1240px){.need-card{grid-template-columns:none}}
@media (max-width:640px){.need-card{grid-template-columns:none;padding:0}}
/* The slider stacks (words over the picture) by its OWN width in ems, not the screen's (7 Nov 2026, Junaid's large phone with a big text
   size): index.html adds .stack when the band is narrower than 58em; these are the max-width:760px rules, repeated for that class. */
.hslider.stack .hs-in{aspect-ratio:auto;max-height:none;display:grid}
.hslider.stack .hs-slide{position:relative;grid-area:1/1;display:flex;flex-direction:column}
.hslider.stack .hs-txt{position:static;order:-1;width:auto}
.hslider.stack .hs-img{position:relative;inset:auto;aspect-ratio:2.1/1;height:auto}
.hslider.stack .hs-ui{position:relative;left:auto;bottom:auto;grid-area:2/1;justify-content:center;padding:4px 0 18px}
.hslider.stack .hs-slide[data-i="0"] .hs-img,.hslider.stack .hs-slide[data-i="0"].on .hs-img{transform:none}
.hslider.stack.designed .hs-in{aspect-ratio:auto;max-height:none}
.hslider.stack.designed .hs-img,.hslider.stack.designed .hs-slide.on .hs-img,.hslider.stack.designed .hs-slide[data-i="0"] .hs-img,.hslider.stack.designed .hs-slide[data-i="0"].on .hs-img{transform:none}
.hslider.stack.designed .hs-ring{height:auto;width:56%;right:6%;top:auto;bottom:6%}
.hslider.stack.designed .hs-slide::after{display:none}
.hslider.stack .hs-slide{justify-content:flex-start}
.hslider.stack .hs-slide .hs-img{margin-top:auto}
.hslider.stack .hs-txt{padding:22px 18px 4px}
.hslider.stack .hs-txt .hs-ctas .btn,.hslider.stack .hs-txt .hs-ctas .btn-ghost{height:44px}
.hslider.stack.designed .hs-img,.hslider.stack.designed .hs-slide.on .hs-img,.hslider.stack.designed .hs-slide[data-i="0"] .hs-img,.hslider.stack.designed .hs-slide[data-i="0"].on .hs-img{aspect-ratio:1.6/1;object-fit:cover;object-position:100% 52%}
.hslider.stack.designed .hs-slide[data-i="0"] .hs-img,.hslider.stack.designed .hs-slide[data-i="0"].on .hs-img{object-position:84% 52%}
.hslider.stack .hs-ui{padding:8px 0 48px}
.hslider.stack .hs-in,.hslider.stack.designed .hs-in{grid-template-columns:minmax(0,1fr)}
.hm-fin{container-type:inline-size;container-name:fin}
@container fin (max-width:52em){.finishes{grid-template-columns:minmax(0,1fr)}.fn-pic{min-height:0;aspect-ratio:16/10}.fn-body{padding:28px 20px}.fn-body h2{font-size:26px}}
/* the rest of the home grids follow the page's width in ems too (a big text size gets fewer columns) */
body>main.wrap{container-type:inline-size;container-name:home}
.ct-row{flex-wrap:wrap;row-gap:2px}
@container home (max-width:58em){.cat-tiles,.pop-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}.steps4 li:nth-child(3){border-left:0}.steps4 li:nth-child(n+3){border-top:1px solid var(--line)}.rv-row{grid-template-columns:repeat(2,minmax(0,1fr))}#homeGuides .hg2{grid-template-columns:minmax(0,1fr)}.duo3{grid-template-columns:minmax(0,1fr)}.team{grid-template-columns:minmax(0,1fr)}}
@container home (max-width:30em){.steps4,.rv-row{grid-template-columns:minmax(0,1fr)}.steps4 li+li{border-left:0;border-top:1px solid var(--line)}.cat-tiles{gap:22px 12px}}
/* Hero round 2 (Junaid's phone through the lead, 7 Nov 2026): the slide sits cleanly on the warm ground: no charcoal glows or dot cloud behind
   the picture (the old themes' decoration read as a grey smudge with the one theme) */
.hslider.designed .hs-slide::before,.hslider.designed .hs-slide::after{display:none}
/* phones, tablets and big text (the band stacked): the whole picture, contained and centred, at most about half the screen; the words full
   width; buttons side by side only when both fit, else full width, 46 px; quiet Popular chips in one row that scrolls sideways */
.hslider.stack .hs-txt{width:auto;max-width:none;padding-right:18px}
.hslider.stack .hs-txt p{max-width:none}
.hslider.stack .hs-ctas{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.hslider.stack .hs-ctas .btn,.hslider.stack .hs-ctas .btn-ghost{flex:1 1 auto;height:46px;padding:0 18px;font-size:14px}
.hslider.stack .hs-pop{flex-wrap:nowrap;overflow-x:auto;width:100%;margin-top:14px;padding-bottom:2px;gap:6px;font-size:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hslider.stack .hs-pop::-webkit-scrollbar{display:none}
.hslider.stack .hs-pop span{flex:none}
.hslider.stack .hs-pop a{flex:none;min-height:28px;padding:0 10px;font-size:12px;white-space:nowrap;background:var(--tint);box-shadow:none}
.hslider.stack.designed .hs-img,.hslider.stack.designed .hs-slide.on .hs-img,.hslider.stack.designed .hs-slide[data-i="0"] .hs-img,.hslider.stack.designed .hs-slide[data-i="0"].on .hs-img{aspect-ratio:auto;width:100%;height:min(46vh,58vw);max-height:none;object-fit:contain;object-position:center;transform:none;margin:14px 0 0}
.hslider.stack .hs-ui{justify-content:flex-start;padding:8px 64px 24px 18px}
.hslider.stack .hs-ui .hs-nav{flex:none;width:40px;height:40px}
.hslider.stack .hs-dots{min-width:0;overflow:hidden}
/* WIDE PHONES AND BIG TEXT, ROUND 3 (7 Nov 2026, Junaid's screenshots at about 900 px with large text, through the lead session) */
/* hero: the slide's buttons are normal buttons (their own width, 44 px), full width only on a narrow phone */
.hslider.stack .hs-ctas .btn,.hslider.stack .hs-ctas .btn-ghost{flex:0 1 auto;width:auto;height:auto;min-height:44px;padding:10px 22px;line-height:1.25;white-space:normal;text-align:center}
@media (max-width:480px){.hslider.stack .hs-ctas .btn,.hslider.stack .hs-ctas .btn-ghost{flex:1 1 100%}}
/* the picture whole, at most about 42% of the screen's height */
.hslider.stack.designed .hs-img,.hslider.stack.designed .hs-slide.on .hs-img,.hslider.stack.designed .hs-slide[data-i="0"] .hs-img,.hslider.stack.designed .hs-slide[data-i="0"].on .hs-img{height:min(42svh,56vw)}
/* the controls: 44 px buttons, 44 px dashes, the slide's name on its own line, a clear gap above the strip tiles */
.hslider.stack .hs-ui{flex-wrap:wrap;gap:6px 8px;padding:10px 18px 20px}
.hslider.stack .hs-ui .hs-nav{width:44px;height:44px}
.hslider.stack .hs-name{order:-1;flex:0 0 100%;margin:0;font-size:12px}
.hslider.stack .hs-dots{flex:0 1 auto;gap:0;padding:0;overflow:visible}
.hslider.stack .hs-dots button,.hslider.stack .hs-dots button.on{flex:none;width:44px;height:44px;border-left:11px solid transparent;border-right:11px solid transparent;background-clip:padding-box}
.hslider.stack .hs-dots button::before,.hslider.stack .hs-dots button i{top:20px;bottom:20px}
@media (max-width:640px){.hslider.stack .hs-dots{display:none}.hslider.stack .hs-name{display:block}}
.hslider.stack~.strip-attach{margin-top:0}
/* strip tiles: no orphan word, an open slot shows the success colour, the pack's light float shadow */
.stripline.sl-icons.sl-four>.sl-fact{box-shadow:var(--shadow-float)}
.stripline.sl-icons.sl-four>div:hover{box-shadow:var(--shadow-callout)}
.sl-four .as-t,.sl-four b{text-wrap:pretty}
.sl-four .sd-dot,.sl-four .sl-sd.later .sd-dot{background:var(--success)}
.sl-four .sl-sd.paused .sd-dot{background:var(--line-strong)}
/* Free Guides: the colourful covers with title, level and minutes under each; five across on a wide panel, four, then two by two on phones */
#homeGuides .hg2{container-type:inline-size;container-name:guides}
#homeGuides .hg2-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;overflow:visible;padding:4px 0 0}
#homeGuides .hg2-list .hgc2:nth-child(n){display:flex}
#homeGuides .hg2-list .hgc2:nth-child(n+6){display:none}
.hgc2{flex-direction:column;gap:8px;min-width:0}
.hgc-cov{display:block;aspect-ratio:900/1273;padding:0;overflow:hidden;border-radius:var(--radius-sm);background:none;box-shadow:var(--shadow-callout)}
.hgc-cov img{display:block;width:100%;height:100%;object-fit:cover}
.hgc-t{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink);text-wrap:pretty;margin-top:4px}
.hgc-k{font-size:11px;letter-spacing:.08em}
.hgc-k span{white-space:nowrap}
.hgc2:hover .hgc-t{text-decoration:underline;text-underline-offset:3px}
@container guides (max-width:58em){
  #homeGuides .hg2-t{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;grid-template-areas:"e f" "h f" "p c";align-items:start}
  #homeGuides .hg2-t>.eyebrow{grid-area:e}#homeGuides .hg2-t>h2{grid-area:h}#homeGuides .hg2-t>p{grid-area:p;margin:0}
  #homeGuides .hg2-facts{grid-area:f;margin:0;align-self:end}
  #homeGuides .hg2-cta{grid-area:c;justify-self:end;align-self:end;margin-top:14px}
}
@container guides (max-width:40em){
  #homeGuides .hg2-list{grid-template-columns:repeat(4,minmax(0,1fr))}#homeGuides .hg2-list .hgc2:nth-child(n+5){display:none}
}
@container guides (max-width:36em){
  #homeGuides .hg2-t{display:block}#homeGuides .hg2-t>p{margin:0 0 18px}#homeGuides .hg2-facts{margin:0 0 20px}#homeGuides .hg2-cta{margin:0}
}
@container guides (max-width:30em){
  #homeGuides .hg2-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
}
/* HERO GAPS (8 Nov 2026, Junaid's screenshot of the Booklets slide on a wide phone): every stacked slide is as tall as the tallest (the first,
   with two buttons and the Popular chips), so a shorter slide left a band of empty page under its picture, and the slide's name sat alone under
   it, repeating the eyebrow. The picture now takes the slide's spare height (still whole, centred), and the repeated name goes. */
.hslider.stack.designed .hs-img,.hslider.stack.designed .hs-slide.on .hs-img,.hslider.stack.designed .hs-slide[data-i="0"] .hs-img,.hslider.stack.designed .hs-slide[data-i="0"].on .hs-img{flex:1 1 auto;min-height:min(42svh,56vw);height:auto;max-height:70svh}
.hslider.stack .hs-name{display:none!important}

/* ==== HOME TIDY, 8 Nov 2026 (Junaid: the finishes block "too high, too much empty space"; the two promo cards "over crowded";
   How It Works and the team list "need icons/illustrations and better design"). ==== */
/* finishes: the picture follows the words' height, never the other way round */
@media (min-width:901px){html .finishes{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}}
@container fin (max-width:52em){html .finishes{grid-template-columns:minmax(0,1fr)}}
html .fn-pic{position:relative;min-height:0}
html .fn-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%}
html .fn-body{padding:44px 48px;align-self:center}
html .fn-body h2{font-size:32px}
html .fn-tiles{margin:22px 0 24px;max-width:560px}
html .fn-tiles a{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
html .fn-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-sm);background:var(--tint);color:var(--icon)}
html .fn-tiles .fn-ic svg{width:24px!important;height:24px!important}
html .fn-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
@media (max-width:900px){html .fn-pic{aspect-ratio:16/10}html .fn-body{padding:26px 20px}html .fn-body h2{font-size:26px}}
@container fin (max-width:52em){html .fn-pic{aspect-ratio:16/10}html .fn-body{padding:26px 20px}}
/* promo cards: one line of words, the button; the chips stay on phones only where the picture sits on top */
html .duo3 .p3-chips{display:none}
html .duo3 .p3-body h3{margin-bottom:10px}
html .duo3 .p3-body>p{max-width:34ch;margin-bottom:18px}
html .duo3 .p3-live{margin:0 0 20px}
/* How It Works: a drawing per step, the number small beside the title, an arrow between steps */
html .steps4.st-ill li{position:relative;gap:8px;padding:28px 26px 26px}
html .st-art{display:grid;place-items:center;width:72px;height:72px;margin-bottom:10px;border-radius:var(--radius);background:var(--tint);color:var(--ink)}
html .steps4 .st-art svg{width:48px!important;height:48px!important}
html .steps4.st-ill .st-n{position:absolute;top:24px;right:24px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:none;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted);font-size:12px;font-weight:500}
html .steps4.st-ill li+li::before{content:"";position:absolute;left:-7px;top:52px;width:12px;height:12px;background:var(--surface);border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg)}
@media (max-width:900px){html .steps4.st-ill li+li::before{display:none}}
@container home (max-width:58em){html .steps4.st-ill li+li::before{display:none}}
/* the team list: drawings instead of 01 02 03 */
html .team-list div{align-items:center;gap:18px;padding:18px 4px}
html .team-list .tm-ic{display:grid;place-items:center;width:52px;height:52px;margin:0;border-radius:var(--radius);background:var(--tint);color:var(--ink)}
html .team-list .tm-ic svg{width:32px!important;height:32px!important}
/* ==== END HOME TIDY ==== */
@media (max-width:520px){html .fn-tiles a{flex-direction:column;align-items:flex-start;gap:8px}html .fn-ic{width:34px;height:34px}}
/* phones: the four facts under the slider as a compact two-by-two grid, not four tall cards (8 Nov 2026) */
@media (max-width:640px){
  html .sl-four{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html .sl-four .sl-fact{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;padding:12px!important;min-width:0}
  html .sl-four .sl-fact .as-ic{display:none!important}
  html .sl-four .sl-fact b{font-size:13.5px}
  html .sl-four .sl-fact .as-t{font-size:12px;line-height:1.4}
}

.pc-price .pc-unit{font-style:normal;font-weight:400;font-size:.78em;color:var(--muted)}