/* Pricing page: the plan card, the brands calculator, the hosting timeline and the questions. */
@layer components{
  .pr-section{padding-top:0}
  .pr-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(18px,2.4vw,32px);align-items:start}
  @media (max-width:900px){.pr-grid{grid-template-columns:1fr}}

  .pr-plan{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);padding:clamp(24px,3.4vw,48px);background:oklch(.17 .03 265);color:oklch(.97 .006 95);box-shadow:var(--shadow-2)}
  .pr-plan::before{content:"";position:absolute;inset:0;z-index:-1;background:
    radial-gradient(60% 80% at 100% 0%,oklch(.88 .19 125/.38),transparent 62%),
    radial-gradient(50% 60% at 0% 100%,oklch(.5 .09 235/.35),transparent 60%)}
  .pr-kicker{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:oklch(.88 .19 125)}
  .pr-price{margin-top:14px;font:800 clamp(3.4rem,2.4rem + 4vw,5.6rem)/1 var(--f-display);letter-spacing:-.04em;display:flex;align-items:baseline;gap:.06em}
  .pr-cur{font-size:.55em;font-weight:700;opacity:.9}
  .pr-gst{margin-left:.35em;font:600 clamp(1rem,.9rem + .4vw,1.3rem)/1 var(--f-mono);letter-spacing:0;color:oklch(.88 .19 125)}
  .pr-per{margin-top:8px;color:oklch(.84 .012 265);font-size:1.05rem}
  .pr-list{margin-top:26px;display:grid;gap:12px}
  .pr-list li{position:relative;padding-left:30px;color:oklch(.86 .012 265);line-height:1.45}
  .pr-list li::before{content:"";position:absolute;left:0;top:.18em;width:18px;height:18px;border-radius:50%;background:oklch(.88 .19 125) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231a1f2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 10.5 3.2 3L15 6.5'/%3E%3C/svg%3E") center/12px no-repeat}
  .pr-list b{color:oklch(.97 .006 95);font-weight:650}
  .pr-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .pr-plan .btn-ghost{color:oklch(.97 .006 95);border-color:oklch(1 0 0/.28);background:oklch(1 0 0/.06)}
  .pr-plan .btn-ghost:hover{background:oklch(1 0 0/.14)}

  .pr-calc{border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);padding:clamp(22px,2.8vw,36px)}
  .pr-calc-t{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
  .pr-calc-sub{margin-top:8px;color:var(--ink-2)}
  .pr-step{display:flex;align-items:center;gap:18px;margin-top:22px}
  .pr-step .icon-btn{width:48px;height:48px;font:600 1.4rem/1 var(--f-display);color:var(--ink)}
  .pr-step .icon-btn:disabled{opacity:.35;cursor:not-allowed}
  .pr-n{min-width:2.4ch;text-align:center;font:800 2.6rem/1 var(--f-display);letter-spacing:-.03em}
  .pr-sum{margin-top:24px;display:grid;gap:10px;font-size:.92rem}
  .pr-sum div{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
  .pr-sum dt{color:var(--muted)}
  .pr-sum .pr-total{border-bottom:0;padding-top:4px;font-size:1.1rem;font-weight:700}
  .pr-sum .pr-total dt{color:var(--ink)}
  .pr-sum .pr-total dd{color:var(--accent-text)}
  .pr-calc-note{margin-top:6px;color:var(--muted);font-size:.9rem}

  .pr-time{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);counter-reset:none}
  .pr-time::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 30%,var(--line)))}
  .pr-time li{position:relative;padding-top:34px}
  .pr-dot{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
  .pr-when{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
  .pr-time h3{margin-top:8px;font-size:1.12rem}
  .pr-time p:last-child{margin-top:6px;color:var(--ink-2);font-size:.95rem}
  @media (max-width:820px){
    .pr-time{grid-template-columns:1fr;gap:22px}
    .pr-time::before{left:8px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,var(--accent),var(--line))}
    .pr-time li{padding:0 0 0 38px}
  }
  .pr-foot{margin-top:28px;color:var(--muted);font-size:.9rem}

  .pr-faq{max-width:860px}
  .pr-faq details{border-top:1px solid var(--line);padding:18px 2px}
  .pr-faq details:last-of-type{border-bottom:1px solid var(--line)}
  .pr-faq summary{cursor:pointer;font:650 1.08rem/1.35 var(--f-display);list-style:none;display:flex;justify-content:space-between;gap:16px}
  .pr-faq summary::-webkit-details-marker{display:none}
  .pr-faq summary::after{content:"+";font:500 1.4rem/1 var(--f-mono);color:var(--accent-text);transition:transform .25s var(--ease)}
  .pr-faq details[open] summary::after{transform:rotate(45deg)}
  .pr-faq details p{margin-top:10px;color:var(--ink-2);max-width:68ch}
}