/* Pricing (MKT-11): plans as paint swatches, the frozen cost comparison on one pinned card, answers as index cards. */

/* Hero: headline beside a paint-chip fan */
.pr-hero{position:relative;padding:54px 0 72px;overflow:hidden}
.pr-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.pr-hero h1{font-size:clamp(44px,5.2vw,78px);margin:22px 0 26px}
.pr-hero .sd-lead{margin-bottom:10px;max-width:30em}
.pr-hero-copy>p:not(.sd-lead){max-width:31em}
.pr-hero .hero-small{margin-top:22px!important}

.fan-area{position:relative;display:flex;justify-content:center;padding-top:10px}
.fan{position:relative;width:min(100%,520px);height:440px}
/* Paint chips: whole-colour strips fanned from one rivet. Each chip's name and price sit in the strip the next chip leaves showing. */
.fan-chip{position:absolute;left:50%;bottom:22px;width:180px;height:318px;margin-left:-90px;display:flex;flex-direction:column;border-radius:12px;border:1.5px solid var(--sd-ink);background:#f6efd9;box-shadow:var(--sd-print);text-decoration:none;color:var(--sd-ink);overflow:hidden;
  transform-origin:50% calc(100% - 22px);transform:rotate(calc(-4deg + var(--i) * 2deg));transition:transform .8s var(--sd-settle),box-shadow .25s var(--sd-ease);z-index:calc(1 + var(--i))}
.fan.is-open .fan-chip{transform:rotate(calc((var(--i) - 1.5) * 25deg))}
.fan.is-open .fan-chip:hover,.fan.is-open .fan-chip:focus-visible{transform:rotate(calc((var(--i) - 1.5) * 25deg)) translateY(-20px);box-shadow:var(--sd-print-lg),var(--sd-lift)}
.fan-chip:focus-visible{outline:3px solid var(--sd-ink);outline-offset:3px}
.sd-page .fan-chip{color:var(--sd-ink)}
.fan-chip[data-shade="2"]{background:#f6e08a}
.fan-chip[data-shade="3"]{background:#bcd5c4}
.sd-page .fan-chip[data-shade="4"]{background:var(--sd-ink);color:var(--sd-canvas)}
.fan-shade{display:flex;flex-direction:column;gap:3px;padding:15px 13px 4px}
.fan-shade b{font-size:16.5px;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.fan-shade small{display:none;font-size:12px;line-height:1.3;font-weight:800;opacity:.85}
.fan-chip:last-of-type .fan-shade small,.fan-chip:hover .fan-shade small,.fan-chip:focus-visible .fan-shade small{display:block}
.fan-price{display:flex;flex-direction:column;gap:2px;padding:8px 13px 0}
.fan-price strong{font-size:34px;letter-spacing:-.04em;line-height:1}
.fan-price small{font-size:11.5px;font-weight:800;opacity:.8}
.fan-code{margin-top:auto;padding:10px 16px 34px;font:800 10px var(--sd-font);letter-spacing:.14em;text-transform:uppercase;opacity:.75;border-top:1.5px solid rgba(16,61,54,.16)}
.fan-chip[data-shade="4"] .fan-code{border-top-color:rgba(255,253,247,.2)}
.fan-rivet{position:absolute;left:50%;bottom:33px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--sd-gold);border:1.5px solid var(--sd-ink);box-shadow:inset 0 0 0 5px var(--sd-paper),2px 2px 0 var(--sd-ink);z-index:10;pointer-events:none}
.fan-note{position:absolute;z-index:11;top:0;right:4px;width:160px;padding:13px 14px 12px;background:#f8e27a;border-radius:3px 3px 12px 3px;box-shadow:var(--sd-print);transform:rotate(4deg);font:800 14.5px/1.25 var(--sd-font);color:var(--sd-ink);letter-spacing:-.01em}
.fan-note::before{content:"";position:absolute;top:-9px;left:50%;width:56px;height:18px;margin-left:-28px;background:rgba(255,255,255,.55);transform:rotate(-4deg)}

/* Plans */
.pr-plans{padding:104px 0 88px;border-top:1.5px solid var(--sd-line-soft)}
.pr-plans .plans-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:end;margin-bottom:46px}
.pr-plans .plans-head h2{margin-top:22px}
.plan-groups{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.group-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:16px!important;font-weight:800;font-size:15px;color:var(--sd-ink)!important}
.group-label small{font-size:13px;color:var(--sd-ink-faint);font-weight:700}
.group-label::after{content:"";flex:1 1 40px;align-self:center;border-top:2px dashed rgba(16,61,54,.3)}
.plan-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;border:1.5px solid var(--sd-ink);border-radius:14px;overflow:hidden;background:var(--sd-paper);box-shadow:var(--sd-print);scroll-margin-top:96px}
.plan:target{box-shadow:0 0 0 4px var(--sd-swash),var(--sd-print-lg)}
.plan-chip{position:relative;padding:22px 20px 20px;border-bottom:1.5px solid var(--sd-ink)}
.plan-chip::after{content:"";position:absolute;top:16px;right:16px;width:14px;height:14px;border-radius:50%;background:var(--sd-canvas);box-shadow:inset 0 0 0 1.5px var(--sd-ink)}
.plan[data-shade="1"] .plan-chip{background:#f6efd9}
.plan[data-shade="2"] .plan-chip{background:#f6e08a}
.plan[data-shade="3"] .plan-chip{background:#bcd5c4}
.plan[data-shade="4"] .plan-chip{background:var(--sd-ink)}
.plan[data-shade="4"] .plan-chip *{color:var(--sd-canvas)!important}
.plan-kicker{display:block;font:800 11px var(--sd-font);letter-spacing:.12em;text-transform:uppercase;color:var(--sd-ink-soft);margin-bottom:8px}
.plan h3{font-size:24px}
.plan-intro{margin-top:8px!important;font-size:14px;line-height:1.5;color:var(--sd-ink)!important;min-height:4.5em}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-top:14px!important}
.plan-price strong{font-size:44px;letter-spacing:-.04em;line-height:1;color:var(--sd-ink)}
.plan-price small{font-size:13px;font-weight:800;color:var(--sd-ink)}
.plan-body{display:flex;flex-direction:column;gap:14px;padding:20px 20px 22px;flex:1}
.list-head{font:800 12px var(--sd-font);letter-spacing:.1em;text-transform:uppercase;color:var(--sd-ink)!important}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.45;color:var(--sd-ink)}
.ticks li::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--sd-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23103d36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat;border:1.5px solid var(--sd-ink)}
.plan-note{font-size:13px;line-height:1.5;color:var(--sd-ink-faint)!important;font-weight:700}
.plan-note--coming{padding:12px 12px 12px;border:1.5px dashed var(--sd-line);border-radius:10px;background:#fffaf0}
.plan-note--coming .sd-plan{margin-right:4px;vertical-align:1px}
.plan-body .sd-btn{margin-top:auto;align-self:flex-start;white-space:normal;text-align:left}
.pr-plans .terms{margin-top:34px!important;max-width:62em;font-size:13px;line-height:1.6;color:var(--sd-ink-faint)!important}

/* Cost comparison: one pinned card */
.pr-costs{padding:104px 0 112px;border-top:1.5px solid var(--sd-line-soft)}
.costs-head{max-width:760px;margin-bottom:48px}
.costs-head h2{margin:22px 0 18px}
.cost-card{padding:34px 34px 28px;max-width:1040px}
.cost-caption{font-size:13.5px;font-weight:700;color:var(--sd-ink-faint)!important;margin-bottom:18px!important}
.cost-table{width:100%;border-collapse:collapse}
.cost-table thead th{text-align:left;font:800 11.5px var(--sd-font);letter-spacing:.12em;text-transform:uppercase;color:var(--sd-ink-soft);padding:0 0 12px;border-bottom:1.5px solid var(--sd-ink)}
.cost-table thead th:last-child{width:44%}
.cost-table tbody tr{border-bottom:1.5px dashed var(--sd-line)}
.cost-table th[scope=row],.cost-table td{text-align:left;vertical-align:top;padding:16px 18px 16px 0}
.cost-table th[scope=row] b{display:block;font-size:16.5px;letter-spacing:-.01em}
.cost-table th[scope=row] span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--sd-ink-soft)}
.cost{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.cost strong{font-size:24px;letter-spacing:-.03em;line-height:1.1}
.cost small{font-size:13px;font-weight:800;color:var(--sd-ink-soft)}
.cost--words strong{font-size:18px;letter-spacing:-.015em}
.cost-note{margin-top:5px!important;font-size:12.5px;line-height:1.45;font-weight:700;color:var(--sd-ink-faint)!important}
.cost-note a{color:var(--sd-ink);font-weight:800;white-space:nowrap}
.cost-table tfoot tr{background:#fff5c4;border-top:2px solid var(--sd-ink)}
.cost-table tfoot th[scope=row],.cost-table tfoot td{padding:18px 18px}
.cost--total strong{font-size:34px}
.cost-fine{margin-top:18px!important;font-size:12.5px;line-height:1.6;color:var(--sd-ink-faint)!important;max-width:62em}

/* Answers: index cards */
.pr-faq{padding:104px 0 112px;border-top:1.5px solid var(--sd-line-soft)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-head{position:sticky;top:110px}
.faq-head h2{margin-top:22px}
.faq-list{display:grid;gap:12px}
.faq-list details{border:1.5px solid var(--sd-ink);border-radius:12px;background:var(--sd-paper);box-shadow:3px 3px 0 rgba(16,61,54,.13);overflow:hidden}
.faq-list details:nth-child(odd){border-left:7px solid var(--sd-gold)}
.faq-list details:nth-child(even){border-left:7px solid #bcd5c4}
.faq-list summary{list-style:none;display:flex;align-items:center;gap:16px;padding:17px 18px 17px 20px;font-weight:800;font-size:17px;letter-spacing:-.01em;cursor:pointer;color:var(--sd-ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{position:relative;margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--sd-ink);background:#fff}
.faq-list summary span::before,.faq-list summary span::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--sd-ink);transition:transform .25s var(--sd-ease)}
.faq-list summary span::after{transform:rotate(90deg)}
.faq-list details[open] summary span{background:var(--sd-gold)}
.faq-list details[open] summary span::after{transform:rotate(0)}
.faq-list details p{padding:0 20px 18px;font-size:15.5px;line-height:1.6}
.faq-list summary:focus-visible{outline:3px solid var(--sd-ink);outline-offset:-4px;border-radius:10px}

@media (max-width:1160px){
  .plan-groups{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:1024px){
  .pr-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px}
  .pr-plans .plans-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .faq-head{position:static}
}
@media (max-width:860px){
  .pr-hero-grid{grid-template-columns:minmax(0,1fr)}
  .fan{height:440px}
}
@media (max-width:620px){
  .pr-hero{padding:34px 0 56px}
  .pr-hero h1{font-size:10.6vw;margin:18px 0 20px}
  .fan{height:330px;width:100%}
  .fan-chip{width:126px;height:236px;margin-left:-63px}
  .fan.is-open .fan-chip{transform:rotate(calc((var(--i) - 1.5) * 21deg))}
  .fan.is-open .fan-chip:hover,.fan.is-open .fan-chip:focus-visible{transform:rotate(calc((var(--i) - 1.5) * 21deg)) translateY(-14px)}
  .fan-shade{padding:11px 8px 2px}
  /* Phones: each name and price must fit the strip the next chip leaves showing ("Website Plus" wraps; "$199" stays whole) */
  .fan-shade b{font-size:13px;white-space:normal;max-width:66px}
  .fan-chip:last-of-type .fan-shade small{display:none}
  .fan-price{padding:5px 8px 0}
  .fan-price strong{font-size:20px}
  .fan-chip:last-of-type .fan-price strong{font-size:26px}
  .fan-price small{font-size:10.5px}
  .fan-code{padding:8px 10px 30px;font-size:9px}
  .fan-note{width:128px;font-size:12.5px;padding:10px 10px 9px;right:0;top:-6px}
  .pr-plans,.pr-costs,.pr-faq{padding:76px 0 80px}
  .plan-pair{grid-template-columns:minmax(0,1fr)}
  .plan-intro{min-height:0}
  .cost-card{padding:24px 18px 20px}
  .cost-table thead{display:none}
  .cost-table,.cost-table tbody,.cost-table tfoot,.cost-table tr,.cost-table th[scope=row],.cost-table td{display:block;width:100%}
  .cost-table tbody tr{padding:14px 0}
  .cost-table th[scope=row],.cost-table td{padding:0}
  .cost-table td{margin-top:10px}
  .cost-table tfoot tr{padding:16px 14px;margin-top:14px;border-radius:10px;border:2px solid var(--sd-ink)}
  .cost-table tfoot th[scope=row],.cost-table tfoot td{padding:0}
  .cost--total strong{font-size:28px}
  .faq-list summary{font-size:16px;padding:15px 14px 15px 16px}
  .faq-list details p{padding:0 16px 16px}
}
@media (max-width:360px){
  .fan-chip{width:116px;height:224px;margin-left:-58px}
  .fan.is-open .fan-chip{transform:rotate(calc((var(--i) - 1.5) * 20deg))}
  .fan-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fan .fan-chip{transform:rotate(calc((var(--i) - 1.5) * 25deg))!important}
}