/* ===== reset ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);color:var(--body);background:var(--surface);
     font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0 0 .6em;color:var(--ink);font-family:var(--font-display);
               line-height:1.18;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

h1{font-size:clamp(2.1rem,5.2vw,3.65rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
h4{font-size:1.06rem}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--body);max-width:62ch}

/* ===== layout ===== */
.wrap{width:min(100% - (var(--gutter)*2),var(--maxw));margin-inline:auto}
.section{padding-block:var(--section-y)}
.section--alt{background:var(--surface-alt)}
.section--dark{background:var(--dark);color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .lede,.section--dark p{color:color-mix(in srgb,var(--on-dark) 82%,transparent)}
.grid{display:grid;gap:clamp(1rem,2.4vw,1.75rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.center{text-align:center}
.center .lede{margin-inline:auto}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:.9rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);border-radius:2px}
.section--dark .eyebrow{color:var(--accent-on-dark)}
.section--dark .eyebrow::before{background:var(--accent-on-dark)}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:999px;font-weight:650;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s,color .18s}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--brand-strong);box-shadow:var(--shadow-md)}
.btn--ghost{border-color:currentColor;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--surface)}
.section--dark .btn--ghost{color:#fff}
.section--dark .btn--ghost:hover{background:#fff;color:var(--dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.center .btn-row{justify-content:center}

/* ===== header ===== */
/* No backdrop-filter here: it would make the header a containing block for
   position:fixed descendants, which breaks the full-screen mobile nav panel
   nested inside it. Solid background instead. */
.site-header{position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:1.25rem;min-height:74px}
/* The logo is rendered as a plain <img> so it keeps its own colours. Do not
   re-introduce a mask here — masking paints a flat colour through the file's
   alpha channel and throws the artwork's colours away. */
.logo{display:block}
.logo img{display:block;height:38px;width:auto}
.nav{margin-left:auto}
.nav>ul{display:flex;align-items:center;gap:.35rem}
.nav a{display:block;padding:.6rem .85rem;border-radius:var(--radius-sm);
  font-weight:550;font-size:.94rem;color:var(--ink);transition:color .15s,background .15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}
.has-sub{position:relative}
.has-sub>button{display:flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  padding:.6rem .85rem;border-radius:var(--radius-sm);font-weight:550;font-size:.94rem;color:var(--ink)}
.has-sub>button:hover{color:var(--brand);background:var(--brand-soft)}
.has-sub>button svg{transition:transform .2s}
.has-sub[data-open="true"]>button svg{transform:rotate(180deg)}
.subnav{position:absolute;top:calc(100% + 10px);left:0;min-width:268px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;max-height:70vh;overflow:auto}
.has-sub[data-open="true"] .subnav{opacity:1;visibility:visible;transform:none}
.subnav a{font-size:.9rem;padding:.5rem .7rem}
.subnav .group-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:.7rem .7rem .3rem}
.header-cta{display:flex;align-items:center;gap:.75rem}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.5rem .65rem;cursor:pointer}

@media (max-width:1080px){
  .nav-toggle{display:block;margin-left:auto}
  .nav{position:fixed;inset:74px 0 0;background:var(--surface);margin:0;padding:1rem var(--gutter) 3rem;
    overflow:auto;transform:translateX(100%);transition:transform .25s;border-top:1px solid var(--line)}
  .nav[data-open="true"]{transform:none}
  .nav>ul{flex-direction:column;align-items:stretch;gap:.15rem}
  .has-sub>button{width:100%;justify-content:space-between}
  .subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--line);border-radius:0;margin-left:.85rem;display:none;max-height:none}
  .has-sub[data-open="true"] .subnav{display:block}
  .header-cta .btn{display:none}
}

/* ===== hero ===== */
/* Section background art. These are the original site's own decorative
   backgrounds (url() lives here, not in a custom property — see the logo
   note above for why). They are tuned to the coral palette, so check them
   when switching to the ember/harbor themes. */
/* The hero art is saturated coral right across the text column, so hero copy
   is reversed to white. The gradient scrim is what makes it legible, measured
   against the actual artwork: white on the raw art is 2.95-3.34:1 (fails AA),
   under this scrim it is 5.7-6.3:1 (passes AA, 4.5:1).
   If you change the scrim opacity, re-check those numbers. */
/* Three stacked layers, top to bottom: legibility scrim, hue tint, artwork.
   The tint uses blend-mode "hue", which takes ONLY the hue from --hero-tint
   and keeps the artwork's own luminosity and saturation. That is why the
   coral art can follow the theme without a recut asset, and why the contrast
   figures above still hold — luminosity is untouched by a hue blend, and
   neutral/grey pixels stay neutral because their saturation is zero.
   Retint by pointing --hero-tint at another token; a full recolour still
   wants a real asset. */
.hero{position:relative;padding-block:clamp(3rem,7vw,5.5rem) var(--section-y);overflow:hidden;
  background:linear-gradient(rgba(10,10,20,.34),rgba(10,10,20,.34)),
             linear-gradient(var(--hero-tint),var(--hero-tint)),
             url("../img/s1bg.webp") no-repeat center/cover;
  background-blend-mode:normal,hue,normal}
.hero h1,.hero .lede,.hero p{color:#fff}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:#fff}
.hero .btn--ghost{color:#fff;border-color:#fff}
.hero .btn--ghost:hover{background:#fff;color:var(--ink)}
/* s5bg is a dark photograph, so the band it backs is marked section--dark and
   its copy is reversed to white. Scrim first, same reasoning as the hero: the
   artwork has a bright window on the right that white text would sit on. */
.section--bg1{background:linear-gradient(rgba(10,10,20,.45),rgba(10,10,20,.45)),
              url("../img/s5bg.webp") no-repeat top/cover}
.section--bg2{background:url("../img/s12bg.webp") no-repeat center/cover}
.section--bg3{background:url("../img/s15bg.webp") no-repeat center/cover}
.hero__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:920px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero__media{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hero__media img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;object-fit:cover;aspect-ratio:4/3}
.hero__media img:first-child{grid-column:1/-1;aspect-ratio:16/9}

/* ===== cards ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.35rem,2.4vw,1.9rem);transition:transform .2s,box-shadow .2s,border-color .2s;height:100%}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--brand) 38%,var(--line))}
.card__icon{width:52px;height:52px;border-radius:var(--radius-sm);background:var(--brand-soft);
  display:grid;place-items:center;margin-bottom:1rem;padding:11px}
/* For icon sets drawn as solid white with transparency: invisible on the
   default --brand-soft tile, so give them a dark tile to sit on. */
.card__icon--dark{background:var(--dark)}
.card__icon img{width:100%;height:100%;object-fit:contain}
.card p{font-size:.95rem;margin-bottom:.9rem}
.card__more{font-weight:650;font-size:.88rem;color:var(--brand);display:inline-flex;gap:.35rem;align-items:center;
  transition:gap .18s}
.card__more:hover{gap:.6rem}
.section--dark .card__more{color:var(--accent-on-dark)}
.section--dark .card{background:color-mix(in srgb,#fff 7%,transparent);border-color:color-mix(in srgb,#fff 15%,transparent)}

/* ===== stats ===== */
.stats{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));text-align:center}
.stat__num{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;color:var(--brand);line-height:1;letter-spacing:-.03em}
.section--dark .stat__num{color:var(--accent-on-dark)}
.stat p{margin:.6rem 0 0;font-size:.95rem}

/* ===== process ===== */
.steps{counter-reset:s;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.step{position:relative;padding:1.6rem 1.4rem 1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:-.85rem;left:1.4rem;
  background:var(--brand);color:#fff;font-weight:750;font-size:.85rem;padding:.28rem .65rem;border-radius:999px}

/* ===== portfolio ===== */
.folio{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.folio img{border-radius:var(--radius);box-shadow:var(--shadow-sm);width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .25s,box-shadow .25s}
.folio a:hover img{transform:scale(1.02);box-shadow:var(--shadow-md)}

/* tabbed portfolio */
.folio-tabs__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem}
.folio-tabs__tab{border:1px solid var(--line);background:var(--surface);color:var(--body);cursor:pointer;
  font:650 .92rem/1 inherit;padding:.72rem 1.15rem;border-radius:999px;transition:background .2s,color .2s,border-color .2s}
.folio-tabs__tab:hover{border-color:var(--brand);color:var(--ink)}
.folio-tabs__tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:var(--shadow-sm)}
.folio-tabs__note{text-align:center;color:var(--muted);max-width:760px;margin:-.6rem auto 1.6rem;font-size:.95rem}
/* item shells: the crop is owned by the wrapper so scroll/video share it */
.folio__item{display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);background:var(--surface-alt);aspect-ratio:4/3;transition:box-shadow .25s}
.folio__item:hover{box-shadow:var(--shadow-md)}
.folio__item img,.folio__item video{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;
  box-shadow:none;aspect-ratio:auto}
.folio__item:hover img{transform:none}
/* full-page mockups: pan from the top of the page to the bottom on hover */
.folio__item--scroll img{height:auto;object-fit:fill;transition:transform 6s cubic-bezier(.2,.6,.3,1)}
.folio__item--scroll:hover img,.folio__item--scroll:focus-visible img{transform:translateY(calc(-100% + 75cqw))}
.folio__item--scroll{container-type:inline-size}
.folio__item--video video{object-fit:cover}
.folio__play{position:absolute;inset:auto auto 12px 12px;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(2px);transition:opacity .2s}
.folio__item--video:hover .folio__play{opacity:0}
@media (prefers-reduced-motion:reduce){
  .folio__item--scroll img{transition:none}
  .folio__item--scroll:hover img{transform:none}
}

/* ===== testimonials ===== */
.quote{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--radius);padding:1.6rem;height:100%}
.quote blockquote{margin:0 0 1rem;font-size:1rem;color:var(--body)}
.quote figcaption{font-size:.9rem}
.quote figcaption b{color:var(--ink);display:block}
.quote figcaption span{color:var(--muted)}

/* ===== FAQ ===== */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.15rem 2.4rem 1.15rem 0;font-weight:650;color:var(--ink);
  position:relative;list-style:none;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:50%;translate:0 -50%;
  font-size:1.5rem;font-weight:400;color:var(--brand);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.15rem;margin:0;font-size:.97rem}

/* ===== logos strip ===== */
.logos{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);align-items:center;justify-content:center}
.logos img{height:38px;width:auto;opacity:.62;filter:grayscale(1);transition:.2s}
.logos img:hover{opacity:1;filter:none}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(120deg,var(--dark),var(--dark-2));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(2.2rem,5vw,3.6rem);text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:color-mix(in srgb,#fff 80%,transparent);max-width:56ch;margin-inline:auto}

/* ===== form ===== */
.form{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--wide{grid-column:1/-1}
.field label{font-size:.87rem;font-weight:650;color:var(--ink)}
.field input,.field textarea,.field select{padding:.8rem .95rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);outline:none}
.field textarea{min-height:140px;resize:vertical}
/* honeypot: off-screen for people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.82rem;color:var(--muted);grid-column:1/-1}

/* ===== footer ===== */
.site-footer{background:var(--dark);color:var(--on-dark);padding-block:clamp(3rem,6vw,4.5rem) 1.5rem}
.site-footer h4{color:#fff;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:1rem}
.site-footer a{color:color-mix(in srgb,var(--on-dark) 78%,transparent);font-size:.92rem;
  display:block;padding:.25rem 0;transition:color .15s}
.site-footer a:hover{color:var(--accent-on-dark)}
.footer__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.footer__brand{max-width:32ch}
.footer__brand img{height:40px;width:auto;margin-bottom:1rem}
.footer__brand p{font-size:.92rem;color:color-mix(in srgb,var(--on-dark) 72%,transparent)}
.footer__bar{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,#fff 14%,transparent);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.86rem;
  color:color-mix(in srgb,var(--on-dark) 65%,transparent)}
.footer__bar a{display:inline;padding:0}

/* ===== page head / breadcrumb ===== */
.page-head{background:var(--surface-alt);padding-block:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.crumb{font-size:.86rem;color:var(--muted);margin-bottom:.6rem}
.crumb a:hover{color:var(--brand)}
.crumb span{margin-inline:.4rem}

.split{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center;grid-template-columns:1fr}
@media(min-width:880px){
  .split{grid-template-columns:1fr 1fr}
  .split--media-first .split__media{order:-1}
}
.split__media img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%}

/* checkmark tints with the theme via mask + currentColor */
.check{display:grid;gap:.7rem;margin:1.2rem 0}
.check li{display:flex;gap:.65rem;align-items:flex-start;font-size:.96rem}
.check li::before{content:"";flex:0 0 20px;height:20px;margin-top:.28rem;border-radius:50%;
  background:var(--brand);
  -webkit-mask:var(--tick) center/12px no-repeat;mask:var(--tick) center/12px no-repeat}
:root{--tick:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}

.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:.7rem 1.1rem;z-index:999;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}

/* ===== long-form prose (privacy policy, terms) ===== */
.prose{max-width:74ch;margin-inline:auto}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-top:2.4rem}
.prose h2:first-of-type{margin-top:0}
.prose ul{margin:0 0 1.1em;padding-left:1.15rem;display:grid;gap:.45rem}
.prose li{font-size:.97rem}
.prose .updated{font-size:.86rem;color:var(--muted);margin-bottom:2rem}

/* ===== pricing packages ===== */
.pkg-switch{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.5rem}
.pkg-switch a{border:1px solid var(--line);background:var(--surface);color:var(--body);
  font-weight:650;font-size:.92rem;line-height:1;padding:.72rem 1.15rem;border-radius:999px;
  transition:background .2s,color .2s,border-color .2s}
.pkg-switch a:hover{border-color:var(--brand);color:var(--ink)}
.pkg-switch a[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
/* Carousel track: cards sit in one row and scroll sideways with snap points.
   --per sets how many cards fit across; the rest are reached by swipe/arrows.
   padding-top leaves room for the "Most popular" badge, which would
   otherwise be clipped by the track's overflow. */
.pkg-carousel{position:relative}
.pricing{--per:1.12;--gap:clamp(1rem,2vw,1.4rem);display:flex;gap:var(--gap);align-items:flex-start;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  padding:1rem 2px 1.2rem;scrollbar-width:none}
.pricing::-webkit-scrollbar{display:none}
.pricing>.pkg{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start}
@media(min-width:600px){.pricing{--per:2}}
@media(min-width:900px){.pricing{--per:3}}
@media(min-width:1200px){.pricing{--per:4}}
.pricing:focus-visible{outline-offset:4px}
.pkg-carousel__btn{position:absolute;top:50%;translate:0 -50%;z-index:2;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-md);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.pkg-carousel__btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.pkg-carousel__btn:disabled{opacity:0;pointer-events:none}
.pkg-carousel__btn--prev{left:-14px}
.pkg-carousel__btn--next{right:-14px}
.pkg-carousel[data-fits] .pkg-carousel__btn{display:none}
@media(max-width:599px){.pkg-carousel__btn{display:none}}
@media(min-width:1360px){.pkg-carousel__btn--prev{left:-60px}.pkg-carousel__btn--next{right:-60px}}
.pricing--single{display:block;max-width:520px;margin-inline:auto;padding-top:1rem}
.pkg{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(1.4rem,2.4vw,1.8rem);transition:box-shadow .2s,border-color .2s}
.pkg:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--brand) 38%,var(--line))}
.pkg--popular{border:2px solid var(--brand);box-shadow:var(--shadow-md)}
.pkg__badge{position:absolute;top:-.8rem;left:50%;translate:-50% 0;background:var(--brand);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;
  border-radius:999px;white-space:nowrap}
.pkg__tier{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0 0 .3rem}
.pkg__name{font-size:1.1rem;margin:0}
.pkg__price{font-size:clamp(2.1rem,3.6vw,2.6rem);font-weight:800;color:var(--ink);letter-spacing:-.03em;
  line-height:1;margin:.9rem 0 1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.pkg__price span{font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:.2rem}
.pkg__list{gap:.5rem;margin:0}
.pkg__list li{font-size:.9rem;line-height:1.5}
.pkg__list li::before{flex-basis:18px;height:18px;margin-top:.1rem}
.pkg__list .pkg__group{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.5rem}
.pkg__list .pkg__group::before{display:none}
.pkg__more{margin-top:.5rem}
.pkg__more summary{cursor:pointer;font-weight:650;font-size:.88rem;color:var(--brand);padding:.35rem 0;list-style:none}
.pkg__more summary::-webkit-details-marker{display:none}
.pkg__more[open] summary{margin-bottom:.4rem}
.pkg__addons{margin-top:1.1rem;padding:.8rem .9rem;background:var(--surface-alt);border-radius:var(--radius-sm)}
.pkg__addons p{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.pkg__addons li{display:flex;justify-content:space-between;gap:.75rem;font-size:.88rem}
.pkg__addons b{color:var(--ink);white-space:nowrap}
.pkg__note{font-size:.82rem;color:var(--muted);margin:1rem 0 0}
.pkg__cta{margin-top:1.4rem;width:100%}
.pkg-help{text-align:center;margin:2.2rem 0 0;color:var(--muted)}
.pkg-help a{color:var(--brand);font-weight:650}