/* ==========================================================================
   MAGNETIQ V2 : packages.css
   Page stylesheet for packages.html. Loads AFTER core.css and only adds what
   is specific to the pricing page.

   CONTENTS
     01  Hero and the currency toggle
     02  Pinned scope ladder
     03  Package cards, including the all in hosting band
     04  Rent versus own, the AI subscription comparison
     05  Care plans
     06  Marquee strip
     07  Quote builder
     08  Comparison table
     09  FAQ accordion
     10  Closing CTA
   ========================================================================== */


/* ==========================================================================
   01  HERO AND CURRENCY TOGGLE
   ========================================================================== */

.pk-hero{
  min-height:clamp(520px,84svh,940px);
  display:flex;
  align-items:flex-end;
  padding-top:calc(var(--hdr-h) + clamp(36px,7vh,90px));
  padding-bottom:clamp(44px,7vh,100px);
}
.pk-hero > .wrap{ width:100%; }

.pk-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:clamp(18px,3vh,34px);
}

.pk-hero h1{ margin-top:clamp(12px,2vh,22px); }

.pk-hero-in{
  display:grid;
  gap:clamp(24px,4vw,58px);
  margin-top:clamp(24px,4vh,46px);
}
@media (min-width:960px){
  .pk-hero-in{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
    align-items:end;
    column-gap:clamp(40px,6vw,110px);
  }
}
.pk-hero-in p{ max-width:44ch; }

.pk-hero-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  padding-top:clamp(14px,2vh,20px);
  border-top:1px solid var(--line);
  margin-top:clamp(18px,2.6vh,26px);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.pk-hero-facts b{ color:var(--fg); font-weight:500; }

/* ---- the toggle --------------------------------------------------------- */
/* The toggle floats over the liquid ink object, which can be near white at the
   top of its ramp. Both the pill and the note carry their own surface so the
   mono type never has to compete with the shader. */
.cur{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  flex:none;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
}
.cur-btn{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  padding:9px 14px;
  border-radius:999px;
  color:var(--fg-dim);
  transition:color .3s var(--e-out), background-color .3s var(--e-out);
}
.cur-btn:hover{ color:var(--fg); }
.cur-btn[aria-pressed="true"]{ color:var(--bg); background:var(--fg); }

.cur-wrap{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.cur-note{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  padding:5px 11px;
  border-radius:999px;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
}

/* Prices are rewritten by the page script, so they never wrap mid number. */
.price{ white-space:nowrap; font-variant-numeric:lining-nums tabular-nums; }


/* ==========================================================================
   02  PINNED SCOPE LADDER
   Driven entirely from --p, which motion.js writes on the [data-pin] host.
   ========================================================================== */

.pk-ladder{ padding-block:0; }
.ld-pin{ position:relative; }

.pin-inner.ld-inner{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:clamp(70px,10vh,120px);
}
.ld-inner > .wrap{ width:100%; }

.ld-head{ margin-bottom:clamp(30px,5vh,64px); max-width:min(760px,100%); }
.ld-head h2{ margin-top:clamp(12px,2vh,22px); }

.ld-rows{ display:flex; flex-direction:column; gap:clamp(18px,3vh,34px); }

.ld-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  align-items:center;
}
@media (min-width:760px){
  .ld-row{ grid-template-columns:160px minmax(0,1fr) 200px; gap:clamp(16px,2.4vw,34px); }
}

.ld-name{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg);
}
.ld-bar{
  position:relative;
  display:block;
  height:clamp(26px,4vh,44px);
  background:var(--faint);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}
.ld-bar > i{
  position:absolute;
  inset:0;
  display:block;
  background:var(--iris);
  background-size:240% 100%;
  background-position:0% 50%;
  transform-origin:0 50%;
  transform:scaleX(0);
}
.ld-val{
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  font-size:clamp(1.3rem,2.4vw,2rem);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--fg);
}
@media (min-width:760px){ .ld-val{ text-align:right; } }

.ld-row{ opacity:.3; transition:opacity .45s var(--e-out); }
.ld-row:nth-child(1){ opacity:clamp(.3,calc(var(--p,0) * 8),1); }
.ld-row:nth-child(2){ opacity:clamp(.3,calc((var(--p,0) - .3) * 8),1); }
.ld-row:nth-child(3){ opacity:clamp(.3,calc((var(--p,0) - .62) * 8),1); }

.ld-row:nth-child(1) .ld-bar > i{ transform:scaleX(clamp(0,calc(var(--p,0) * 3.4),.24)); }
.ld-row:nth-child(2) .ld-bar > i{ transform:scaleX(clamp(0,calc((var(--p,0) - .3) * 3.4),.58)); }
.ld-row:nth-child(3) .ld-bar > i{ transform:scaleX(clamp(0,calc((var(--p,0) - .62) * 3.4),1)); }

.ld-foot{
  max-width:min(820px,100%);
  margin-top:clamp(30px,5vh,60px);
  padding-top:clamp(16px,2.4vh,24px);
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

@media (prefers-reduced-motion: reduce){
  .pin-inner.ld-inner{ min-height:0; }
  .ld-row{ opacity:1 !important; }
  .ld-row:nth-child(1) .ld-bar > i{ transform:scaleX(.24); }
  .ld-row:nth-child(2) .ld-bar > i{ transform:scaleX(.58); }
  .ld-row:nth-child(3) .ld-bar > i{ transform:scaleX(1); }
}


/* ==========================================================================
   03  PACKAGE CARDS
   ========================================================================== */

.pk-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.2vw,30px);
  align-items:stretch;
}
@media (max-width:1024px){ .pk-grid{ grid-template-columns:minmax(0,1fr); max-width:640px; margin-inline:auto; } }

.pk-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2vh,24px);
  padding:clamp(24px,2.6vw,38px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  /* opacity is in the list because these cards also carry data-reveal, and a
     page stylesheet transition would otherwise replace the reveal's own. */
  transition:transform .55s var(--e-out), opacity .85s var(--e-out),
             border-color .45s var(--e-out), box-shadow .55s var(--e-out);
}
.pk-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--fg) 30%,transparent);
}

.pk-card.is-top{
  border-color:transparent;
  box-shadow:0 26px 70px rgba(75,43,255,.20);
}
.pk-card.is-top:hover{ transform:translateY(-12px); box-shadow:0 34px 90px rgba(75,43,255,.28); }

/* The iris ring is a masked gradient border. The @supports guard means an
   engine without mask compositing simply keeps the plain hairline instead of
   painting a solid gradient block over the card. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)){
  .pk-card.is-top::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1.5px;
    background:var(--iris);
    /* Only the violet into magenta half of the ramp is ever shown. */
    background-size:260% 100%;
    background-position:6% 50%;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    pointer-events:none;
  }
  .pk-card.is-top{ border-color:transparent; }
}

.pk-badge{
  position:absolute;
  top:0; left:clamp(24px,2.6vw,38px);
  transform:translateY(-50%);
  z-index:2;
  /* Window the iris ramp to its violet into magenta half, the same discipline
     core.css uses everywhere the gradient is painted as a surface. */
  background-size:260% 100%;
  background-position:6% 50%;
}

.pk-top{ display:flex; flex-direction:column; gap:10px; }
.pk-name{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'opsz' 32,'wght' 600;
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  letter-spacing:.02em;
  line-height:1;
  color:var(--fg);
}
.pk-for{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
  line-height:1.5;
}

/* The three cards sit side by side, so the "best for" line has to occupy the
   same number of rows on all of them or the prices, the all in bands and the
   tick lists step out of alignment across the row. Reserve two rows once the
   grid is actually three across. */
@media (min-width:1025px){
  /* three rows, because the longest of the three lines runs to three in
     English and in Indonesian at some widths. Reserving the same block on
     every card is what keeps the row honest in all three languages. */
  .pk-for{ min-height:45px; min-height:3lh; }
}

.pk-price{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding-block:clamp(10px,1.6vh,18px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.pk-price .num{ font-size:clamp(2.4rem,4.6vw,3.6rem); }
.pk-price em{
  font-style:normal;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

.pk-time{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.7em;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg);
}
.pk-time .dot{ background:var(--volt-2); }

/* The delivery promise is only safe with its condition attached, so the
   clause rides on a second row of the same line: indented past the dot so it
   reads as one block, dimmed so the number still leads. */
.pk-from{
  flex:1 0 100%;
  margin:-.35em 0 0;
  padding-left:calc(7px + .7em);
  font-style:normal;
  font-size:9.5px;
  letter-spacing:.11em;
  line-height:1.55;
  color:var(--fg-dim);
}

.pk-list{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
  flex:1 1 auto;
}
.pk-list li{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--fg-dim);
}
.pk-list li b{ color:var(--fg); font-weight:500; }
.pk-tick{
  flex:none;
  width:16px; height:16px;
  margin-top:3px;
  border-radius:50%;
  background:var(--faint);
  border:1px solid var(--line);
  position:relative;
}
.pk-tick::after{
  content:"";
  position:absolute;
  left:5px; top:3px;
  width:4px; height:8px;
  border:solid var(--fg);
  border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg);
  opacity:.85;
}
.pk-card.is-top .pk-tick{ background:var(--volt); border-color:transparent; }
.pk-card.is-top .pk-tick::after{ border-color:#FFFFFF; opacity:1; }

.pk-card .btn{ width:100%; }

/* ---- the all in band ---------------------------------------------------- */
/* Domain, SSL and hosting are now the whole selling point, so they get their
   own surface on the card instead of a line buried in the tick list. */
.pk-host{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:clamp(14px,1.8vw,18px);
  border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--volt) 34%,var(--line));
  background:color-mix(in srgb,var(--volt) 10%,transparent);
}
.pk-host-lbl{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.pk-host-val{
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--fg);
}
.pk-host-renew{
  display:block;
  padding-top:7px;
  border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
  font-family:var(--mono);
  font-size:9.5px;
  line-height:1.7;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.pk-host-renew b{ color:var(--fg); font-weight:500; text-transform:none; } /* keeps "Rp 1,6jt" readable inside the uppercase mono line */

.pk-card.is-top .pk-host{
  border-color:color-mix(in srgb,var(--volt) 55%,transparent);
  background:color-mix(in srgb,var(--volt) 16%,transparent);
}

.pk-plus{
  margin:0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg);
  max-width:none;
}

/* Guarantee strip, sits under the cards and reads as the last line of the
   packages block rather than a boxed disclaimer. 2026-09-08. */
.pk-guar{
  margin-top:clamp(26px,4vh,44px);
  padding-top:clamp(14px,2vh,20px);
  border-top:1px solid var(--line);
  max-width:min(760px,100%);
}
.pk-guar .kicker{ color:var(--fg); }
.pk-guar p{ margin-top:clamp(10px,1.4vh,16px); font-size:15px; line-height:1.6; max-width:none; }

.pk-note{
  margin-top:clamp(22px,3.4vh,38px);
  padding-top:clamp(14px,2vh,20px);
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px;
  line-height:1.8;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  max-width:min(760px,100%);
}

/* The route to /pay.html for someone who has already agreed a price. It sits
   with the notes rather than with the package buttons on purpose: nobody
   should reach a payment form before they have talked to us. */
.pk-paylink{
  border-top:0;
  padding-top:0;
  margin-top:clamp(12px,1.8vh,18px);
  text-transform:none;
  letter-spacing:normal;
}




/* ==========================================================================
   04  RENT VERSUS OWN
   The strongest argument on the page: one fixed price against the same
   stretch of time bought as an AI website subscription. Numbers are set
   large, the saving is the loudest thing in the card.
   ========================================================================== */

.pk-vs .sec-head{ margin-bottom:clamp(30px,5vh,58px); }

.vs-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px);
  align-items:stretch;
}
@media (max-width:1024px){ .vs-grid{ grid-template-columns:minmax(0,1fr); max-width:640px; margin-inline:auto; } }

.vs-card{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2vh,22px);
  padding:clamp(22px,2.4vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--faint);
  transition:opacity .85s var(--e-out), transform 1s var(--e-out),
             border-color .45s var(--e-out), background-color .45s var(--e-out);
}
.vs-card:hover{ border-color:color-mix(in srgb,var(--fg) 30%,transparent); }
.vs-card.is-top{
  background:color-mix(in srgb,var(--volt) 12%,transparent);
  border-color:color-mix(in srgb,var(--volt) 46%,transparent);
}

.vs-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:clamp(12px,1.8vh,16px);
  border-bottom:1px solid var(--line);
}
.vs-name{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg);
}
.vs-covers{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.vs-covers b{ color:var(--fg); font-weight:500; }

.vs-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;
  gap:clamp(10px,1.4vw,18px);
  flex:1 1 auto;
}
.vs-col{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.vs-lbl{
  font-family:var(--mono);
  font-size:9px;
  line-height:1.6;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
  min-height:2.4em;
}
.vs-num{
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:.95;
}
.vs-num.is-dim{ color:var(--fg-dim); }

/* A hairline instead of a word, so the divider needs no translation. */
.vs-div{
  align-self:stretch;
  width:1px;
  background:var(--line);
}

.vs-save{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:.6em;
  flex-wrap:wrap;
  padding-top:clamp(12px,1.8vh,16px);
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  max-width:none;
}
.vs-save b{
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1;
  letter-spacing:-.015em;
  color:var(--acid);
}

.vs-close{
  display:grid;
  gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(30px,4.6vh,58px);
  padding-top:clamp(22px,3vh,34px);
  border-top:1px solid var(--line);
}
@media (min-width:960px){
  .vs-close{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; }
  .vs-close .vs-fine{ grid-column:1 / -1; }
}
.vs-concl{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-variation-settings:'opsz' 32,'wght' 500;
  font-size:clamp(1.15rem,2.1vw,1.65rem);
  letter-spacing:-.025em;
  line-height:1.28;
  color:var(--fg);
  max-width:34ch;
}

.vs-rates{ display:flex; flex-direction:column; gap:9px; }
.vs-rates-lbl{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  line-height:1.6;
}
.vs-rates ul{ display:flex; flex-direction:column; gap:7px; margin:0; padding:0; list-style:none; }
.vs-rates li{
  display:flex;
  align-items:baseline;
  gap:.5em;
  flex-wrap:wrap;
  padding-top:7px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.vs-rates li span{ margin-right:auto; }
.vs-rates li b{ color:var(--fg); font-weight:500; white-space:nowrap; }
.vs-rates li em{ font-style:normal; font-size:9px; }

.vs-fine{
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--fg-dim);
  max-width:78ch;
}


/* ==========================================================================
   05  CARE PLANS
   ========================================================================== */

.pk-care{ padding-top:clamp(50px,8vh,110px); }

.care-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);
}
@media (max-width:900px){ .care-grid{ grid-template-columns:minmax(0,1fr); max-width:620px; margin-inline:auto; } }

.care-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--faint);
  transition:opacity .85s var(--e-out), transform 1s var(--e-out),
             border-color .45s var(--e-out), background-color .45s var(--e-out);
}
.care-card:hover{ border-color:color-mix(in srgb,var(--fg) 30%,transparent); }

.care-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.care-name{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg);
}
.care-price{ display:flex; align-items:baseline; gap:6px; }
.care-price .num{ font-size:clamp(1.7rem,3vw,2.4rem); }
.care-price em{
  font-style:normal;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.care-card p{ font-size:14.5px; max-width:none; }
.care-list{ display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.care-list li{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--fg-dim);
  line-height:1.6;
  padding-left:14px;
  position:relative;
}
.care-list li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--volt-2);
}
.care-card .btn-text{ align-self:flex-start; margin-top:auto; }


/* ==========================================================================
   06  MARQUEE STRIP
   ========================================================================== */

.pk-strip{ padding-block:clamp(26px,4vh,48px); }
.pk-strip .marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:14px;
}


/* ==========================================================================
   07  QUOTE BUILDER
   ========================================================================== */

.cfg{
  display:grid;
  gap:clamp(22px,2.6vw,40px);
  align-items:start;
}
@media (min-width:1000px){
  .cfg{ grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr); }
}

.cfg-main{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); min-width:0; }

/* ---- the package chooser ------------------------------------------------ */
.cfg-pick{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(16px,2vw,22px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--faint);
}
.cfg-pick-lbl{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.cfg-packs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
@media (max-width:520px){ .cfg-packs{ grid-template-columns:minmax(0,1fr); } }

.cfg-pack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  text-align:left;
  transition:color .3s var(--e-out), background-color .3s var(--e-out),
             border-color .3s var(--e-out);
}
.cfg-pack b{
  font-family:var(--mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg);
}
.cfg-pack span{
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1;
  letter-spacing:-.015em;
  color:var(--fg-dim);
}
.cfg-pack:hover{ border-color:color-mix(in srgb,var(--fg) 40%,transparent); }
.cfg-pack[aria-pressed="true"]{
  border-color:transparent;
  background:var(--volt);
}
.cfg-pack[aria-pressed="true"] b,
.cfg-pack[aria-pressed="true"] span{ color:#FFFFFF; }

/* The package line is never hidden, so it reads as the base of the quote
   rather than as one more optional tick. */
.cfg-break li.is-pack{
  padding-bottom:7px;
  border-bottom:1px solid var(--line);
  color:var(--fg);
}
.cfg-break li.is-pack span{ letter-spacing:.18em; }

.cfg-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--faint);
}

.cfg-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:clamp(16px,2vw,22px) clamp(16px,2vw,24px);
  border-bottom:1px solid var(--line);
  transition:background-color .35s var(--e-out);
}
.cfg-row:last-child{ border-bottom:0; }
.cfg-row.is-on{ background:color-mix(in srgb,var(--volt) 12%,transparent); }

.cfg-check{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex:1 1 260px;
  min-width:0;
  cursor:pointer;
}
.cfg-check input{
  position:absolute;
  left:0; top:0;
  width:1px; height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.cfg-box{
  flex:none;
  position:relative;
  width:22px; height:22px;
  margin-top:2px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--faint);
  transition:background-color .3s var(--e-out), border-color .3s var(--e-out);
}
.cfg-box::after{
  content:"";
  position:absolute;
  left:7px; top:4px;
  width:5px; height:10px;
  border:solid #FFFFFF;
  border-width:0 1.8px 1.8px 0;
  transform:rotate(42deg) scale(.4);
  opacity:0;
  transition:opacity .25s var(--e-out), transform .35s var(--e-spring);
}
.cfg-check input:checked + .cfg-box{ background:var(--volt); border-color:var(--volt); }
.cfg-check input:checked + .cfg-box::after{ opacity:1; transform:rotate(42deg) scale(1); }
.cfg-check input:focus-visible + .cfg-box{ outline:2px solid var(--volt-2); outline-offset:3px; }

.cfg-txt{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.cfg-txt b{
  font-family:var(--body);
  font-weight:500;
  font-size:16px;
  letter-spacing:-.01em;
  color:var(--fg);
}
.cfg-txt i{
  font-style:normal;
  font-size:13.5px;
  line-height:1.5;
  color:var(--fg-dim);
}

.cfg-side{ display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-left:auto; flex-wrap:wrap; }
/* A shared minimum keeps the steppers and the prices on one vertical line
   across every row instead of each one landing wherever its label ends. */
@media (min-width:760px){
  .cfg-side{ min-width:300px; }
  .cfg-cost{ min-width:190px; justify-content:flex-end; }
}

.cfg-cost{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg);
  white-space:nowrap;
}
.cfg-cost em{ font-style:normal; color:var(--fg-dim); font-size:10px; }

.stepper{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  flex:none;
}
.stepper button{
  width:30px; height:30px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:14px;
  line-height:1;
  color:var(--fg-dim);
  transition:color .3s var(--e-out), background-color .3s var(--e-out);
}
.stepper button:hover{ color:var(--bg); background:var(--fg); }
.stepper button[disabled]{ opacity:.3; pointer-events:none; }
.stepper output{
  min-width:26px;
  text-align:center;
  font-family:var(--mono);
  font-size:12px;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}

/* ---- the running total -------------------------------------------------- */
.cfg-total{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--card);
}
.cfg-tot-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.cfg-tot-row + .cfg-tot-row{ padding-top:14px; border-top:1px solid var(--line); }
.cfg-tot-row .num{ font-size:clamp(1.8rem,3.2vw,2.6rem); }
.cfg-tot-lbl{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

.cfg-break{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  padding:14px 0 0;
  list-style:none;
  border-top:1px solid var(--line);
  min-height:20px;
}
.cfg-break li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.cfg-break li b{ color:var(--fg); font-weight:500; white-space:nowrap; }
.cfg-break li[hidden]{ display:none; }
.cfg-empty{ color:var(--fg-dim); }

.cfg-note{ font-size:10px; line-height:1.7; color:var(--fg-dim); }

/* The number lifts a hair whenever it changes, so the total never updates
   silently. The class is removed by the page script. */
.cfg-bump{ animation:cfgBump .5s var(--e-spring); }
@keyframes cfgBump{
  0%   { transform:translateY(0) scale(1); }
  35%  { transform:translateY(-3px) scale(1.04); }
  100% { transform:translateY(0) scale(1); }
}


/* ==========================================================================
   08  COMPARISON TABLE
   ========================================================================== */

.cmp-scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--card);
  -webkit-overflow-scrolling:touch;
}
.cmp{
  width:100%;
  min-width:660px;
  border-collapse:separate;
  border-spacing:0;
}
.cmp th,.cmp td{
  padding:14px clamp(12px,1.6vw,22px);
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid var(--line);
}
.cmp thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--card);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  font-variation-settings:'wght' 500;
  color:var(--fg);
  white-space:nowrap;
  padding-block:16px;
}
.cmp thead th span{ display:block; color:var(--fg-dim); letter-spacing:.14em; margin-top:5px; }
.cmp tbody th{
  font-family:var(--body);
  font-weight:500;
  font-size:14.5px;
  letter-spacing:-.005em;
  color:var(--fg);
  position:sticky;
  left:0;
  z-index:2;
  background:var(--card);
  min-width:200px;
}
.cmp td{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.cmp td.is-yes{ color:var(--fg); }
.cmp td.is-no{ opacity:.5; }
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp tbody tr:hover th,
.cmp tbody tr:hover td{ background:var(--faint); }
.cmp col.is-top,
.cmp .col-top{ background:color-mix(in srgb,var(--volt) 7%,transparent); }
.cmp-hint{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-top:14px;
}
@media (min-width:900px){ .cmp-hint{ display:none; } }


/* ==========================================================================
   09  FAQ ACCORDION
   ========================================================================== */

.faq{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.faq-item{ border-bottom:1px solid var(--line); }

.faq-q{ margin:0; font-family:inherit; font-size:inherit; letter-spacing:normal; line-height:inherit; }
.faq-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:20px;
  padding:clamp(20px,3vh,30px) 0;
  text-align:left;
  color:var(--fg-dim);
  transition:color .35s var(--e-out);
}
.faq-btn > span{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--display);
  font-weight:500;
  font-variation-settings:'opsz' 32,'wght' 500;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  letter-spacing:-.025em;
  line-height:1.25;
  color:var(--fg);
}
.faq-btn:hover{ color:var(--fg); }

.faq-ico{
  flex:none;
  position:relative;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  transition:border-color .35s var(--e-out), transform .5s var(--e-spring),
             background-color .35s var(--e-out);
}
.faq-ico::before,
.faq-ico::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  background:currentColor;
  border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .45s var(--e-spring), opacity .3s var(--e-out);
}
.faq-ico::before{ width:12px; height:1.5px; }
.faq-ico::after{ width:1.5px; height:12px; }
.faq-btn:hover .faq-ico{ border-color:currentColor; }
.faq-item.is-open .faq-ico{ background:var(--fg); border-color:var(--fg); color:var(--bg); transform:rotate(90deg); }
.faq-item.is-open .faq-ico::after{ opacity:0; transform:translate(-50%,-50%) scaleY(0); }

.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--e-io);
}
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a-in{ overflow:hidden; min-height:0; }
.faq-a-in p{
  max-width:62ch;
  padding-bottom:clamp(20px,3vh,30px);
  font-size:15.5px;
}
.faq-a-in p + p{ margin-top:0; padding-top:0; }

.faq-foot{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:clamp(28px,4vh,46px);
}
.faq-foot p{ margin:0; max-width:38ch; }

/* Engines without 0fr to 1fr interpolation still open and close, just without
   the glide. Content is never trapped. */
@supports not (grid-template-rows: 0fr){
  .faq-a{ display:block; height:0; overflow:hidden; }
  .faq-item.is-open .faq-a{ height:auto; }
}


/* ==========================================================================
   10  CLOSING CTA
   ========================================================================== */

.pk-cta{ text-align:center; }
.pk-cta .kicker{ justify-content:center; }
.pk-cta h2{ margin-top:clamp(16px,2.4vh,28px); }
.pk-cta p{ margin-inline:auto; max-width:48ch; }
.pk-cta .cluster{ justify-content:center; margin-top:clamp(26px,4vh,44px); }
.pk-cta-note{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-top:clamp(20px,3vh,32px);
}


/* ==========================================================================
   DOMAIN CHECK + MARKET PRICES (#domain)
   Dark section. The input is set in the display face at headline size, so
   typing a name feels like naming the thing, not filling in a form.
   ========================================================================== */

.pk-domain{ padding-block:var(--sec); }

.dom-form{ margin-top:clamp(28px,4vh,44px); display:grid; gap:14px; }

.dom-field{
  display:flex; align-items:stretch; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
}
.dom-input{
  flex:1 1 320px; min-width:0;
  background:transparent; border:0; outline:0;
  color:var(--fg);
  font-family:var(--display);
  font-variation-settings:'opsz' 96,'wght' 500;
  font-size:clamp(2rem,4.6vw,4rem);
  line-height:1;
  letter-spacing:-.03em;
  padding:6px 0;
}
.dom-input::placeholder{ color:color-mix(in srgb, var(--fg) 26%, transparent); }
.dom-input:focus-visible{ outline:0; box-shadow:none; }
.dom-field:focus-within{ border-bottom-color:var(--volt-2); }
.dom-go{ align-self:center; white-space:nowrap; }

.dom-tlds{ display:flex; flex-wrap:wrap; gap:8px; }
.dom-tld{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:lowercase;
  padding:9px 13px; border-radius:999px; border:1px solid var(--line);
  color:var(--fg-dim); background:transparent; cursor:pointer;
  transition:color .25s var(--e-out), border-color .25s var(--e-out), background-color .25s var(--e-out);
}
.dom-tld:hover{ color:var(--fg); border-color:color-mix(in srgb, var(--fg) 42%, transparent); }
.dom-tld.is-on{ color:var(--bg); background:var(--fg); border-color:var(--fg); }
.dom-tld:disabled{ opacity:.35; cursor:not-allowed; }

.dom-hint{
  margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
}
.dom-hint.is-err{ color:var(--flare); }

/* ---- results ---- */
.dom-results{ display:grid; gap:10px; margin-top:clamp(22px,3vh,34px); }
.dom-results:empty{ display:none; }

.dom-row{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) auto auto auto;
  align-items:center; gap:14px 22px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  animation:domIn .5s var(--e-out) both;
}
@keyframes domIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.dom-row.is-free{ border-color:color-mix(in srgb, var(--acid) 55%, transparent); }

.dom-fqdn{
  font-family:var(--display); font-variation-settings:'opsz' 40,'wght' 500;
  font-size:clamp(1.05rem,1.8vw,1.5rem); letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.dom-fqdn em{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.08em; color:var(--fg-dim); }
.dom-row.is-free .dom-fqdn em{ color:var(--acid); }

.dom-status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim); white-space:nowrap;
}
.dom-status i{ width:8px; height:8px; border-radius:50%; background:var(--fg-dim); flex:none; }
.dom-status.is-free{ color:var(--acid); } .dom-status.is-free i{ background:var(--acid); box-shadow:0 0 0 4px color-mix(in srgb, var(--acid) 22%, transparent); }
.dom-status.is-taken{ color:var(--fg-dim); } .dom-status.is-taken i{ background:var(--flare); }
.dom-status.is-wait i{ animation:domPulse 1s ease-in-out infinite; }
@keyframes domPulse{ 50%{ opacity:.25; } }

.dom-price{ font-family:var(--serif); font-size:clamp(1.1rem,1.6vw,1.35rem); white-space:nowrap; }
.dom-price small{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.dom-price.is-na{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }

.dom-act{ justify-self:end; }
.dom-act .btn{ white-space:nowrap; }

/* ---- price list ---- */
.dom-prices{ margin-top:clamp(56px,8vh,96px); }
.dom-prices-head{
  display:grid; gap:18px; align-items:end;
  grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  margin-bottom:clamp(18px,2.6vh,28px);
}
.dom-prices-head h3{ margin:0 0 10px; font-size:clamp(1.3rem,2.2vw,1.9rem); }
.dom-prices-head p{ margin:0; max-width:58ch; }
.dom-search input{
  width:100%; padding:12px 14px;
  background:var(--faint); border:1px solid var(--line); border-radius:12px;
  color:var(--fg); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
}
.dom-search input:focus-visible{ outline:2px solid var(--volt); outline-offset:2px; }

.dom-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.dom-table{ width:100%; border-collapse:collapse; min-width:520px; }
.dom-table th, .dom-table td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); }
.dom-table th{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim);
  position:sticky; top:0; background:var(--card);
}
.dom-table tbody tr:last-child td{ border-bottom:0; }
.dom-table tbody tr:hover td{ background:var(--faint); }
.dom-table td:first-child{ font-family:var(--display); font-size:1.05rem; letter-spacing:-.01em; }
.dom-table td.num{ font-family:var(--serif); font-size:1.15rem; white-space:nowrap; }
.dom-table td.pre{ color:var(--fg-dim); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.dom-table .dom-badge{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--fg-dim);
}
.dom-table .dom-badge.is-ok{ color:var(--acid); border-color:color-mix(in srgb, var(--acid) 45%, transparent); }
.dom-table .dom-badge.is-prem{ color:var(--flare); border-color:color-mix(in srgb, var(--flare) 45%, transparent); margin-left:6px; }

.dom-fine{
  margin:14px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.1em; line-height:1.7;
  color:var(--fg-dim);
}
.dom-stamp{ opacity:.7; }

@media (max-width:760px){
  .dom-row{ grid-template-columns:1fr 1fr; }
  .dom-fqdn{ grid-column:1 / -1; }
  .dom-act{ grid-column:1 / -1; justify-self:stretch; }
  .dom-act .btn{ width:100%; justify-content:center; }
  .dom-prices-head{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .dom-row{ animation:none; }
  .dom-status.is-wait i{ animation:none; }
}

/* The floating WhatsApp bubble parks bottom right and every result row scrolls
   under it, which put the bubble on top of the "take this one" button. The
   results stop short of the bubble's column instead. */
@media (min-width:900px){
  .dom-results{ padding-right:96px; }
}
/* On phones the promo tab hugs the right edge around the lower third of the
   screen, which is exactly where the ending chips wrap to. Keep the chips out
   of that column so none of them is ever covered. */
@media (max-width:640px){
  .dom-tlds, .dom-hint{ padding-right:88px; }
}

/* price list: nothing matched the ending search, offer the checker instead */
.dom-none{ padding:22px 16px 24px; font-size:15px; line-height:1.55; }
.dom-none span{ display:block; max-width:60ch; opacity:.82; }
.dom-none-btn{ margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); background:var(--volt); border:0; border-radius:999px; padding:11px 18px; cursor:pointer; }
.dom-none-btn:hover{ background:var(--volt-2); }
.dom-none-btn:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; }