/* Pricing — the rate sheet with a billing switch.
   Uses the site's tokens from styles.css; nothing here invents a colour.
   This lives inside the home page's "What it costs" section. */

.price-sheet{
  margin-top:clamp(24px,3.4vw,44px);
  background-color:var(--bond);
  background-image:var(--grain); background-blend-mode:multiply;
  border:1px solid var(--bond-edge);
  box-shadow:var(--lift);
  padding:clamp(24px,3.4vw,46px) clamp(20px,3.4vw,52px) clamp(26px,3vw,42px);
}
.price-sheet[hidden],.pricing-alert[hidden]{display:none}

.price-head{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-bottom:4px;
}

/* billing switch */
.billing{
  display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap;
  padding:14px 0 16px;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
}
.billing-options{display:inline-flex; border:1px solid var(--rule-strong); border-radius:2px; overflow:hidden}
.billing-options input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.billing-options label{
  padding:9px 15px 8px; cursor:pointer;
  font-family:var(--archivo); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  transition:background-color .16s ease, color .16s ease;
}
.billing-options label:hover{background:rgba(42,33,24,.06); color:var(--ink)}
.billing-options input:checked + label{background:var(--ink); color:var(--bond)}
.billing-options input:focus-visible + label{outline:2px solid var(--ink); outline-offset:-4px}
.billing-note{font-size:.86rem; color:var(--ink-soft); margin:0}

/* tier rows: plan | what is included | price and action */
.tiers{border-top:1px solid var(--rule-strong)}
.tier{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr) auto;
  gap:clamp(18px,3vw,44px); align-items:start;
  padding:clamp(20px,2.6vw,28px) 0;
  border-bottom:1px solid var(--rule);
}
.tier-main{min-width:0}
.tier-name{
  font-family:var(--archivo); font-weight:800;
  font-size:clamp(1.3rem, 1.1rem + .6vw, 1.62rem);
  line-height:1.15; letter-spacing:-.01em; max-width:none;
}
.tier-desc{margin-top:6px; font-size:.96rem; line-height:1.5; color:var(--ink-soft); max-width:42ch}
.tier-features{display:grid; gap:8px; align-content:start; margin-top:2px}
.tier-features li{position:relative; padding-left:15px; font-size:.84rem; line-height:1.45; color:var(--ink-soft)}
.tier-features li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:6px; height:6px; border:1px solid var(--rule-strong);
}

.tier-buy{display:flex; flex-direction:column; align-items:flex-end; gap:9px; text-align:right; min-width:172px}
.tier-price{
  font-family:var(--archivo); font-weight:800;
  font-size:clamp(1.7rem, 1.1rem + 1.4vw, 2.3rem);
  line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tier-price .period{
  margin-left:6px;
  font-family:var(--typed); font-weight:400; font-size:.74rem;
  letter-spacing:.02em; color:var(--ink-soft);
}

/* buttons */
.btn-buy{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:10px 18px; border:0; border-radius:2px;
  background:var(--ink); color:var(--bond); cursor:pointer;
  font-family:var(--archivo); font-weight:800; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 2px 0 rgba(42,33,24,.22), 0 10px 18px -12px rgba(42,33,24,.5);
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.btn-buy:hover:not(:disabled){transform:translateY(-1px); background:#1d1710}
.btn-buy:active:not(:disabled){transform:translateY(0)}
.btn-buy:focus-visible{outline:2px solid var(--bond); outline-offset:-4px; box-shadow:0 0 0 3px var(--ink)}
.btn-buy:disabled{opacity:.42; cursor:default; box-shadow:none; transform:none}

/* one-off */
.one-off{margin-top:clamp(20px,2.6vw,28px)}
.one-off > .label{display:block; padding-bottom:8px; border-bottom:1px solid var(--rule-strong)}
.oneoff-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px 18px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--rule);
}
.oneoff-name{font-weight:700; font-size:.98rem; grid-column:1; grid-row:1}
.oneoff-name span{display:block; margin-top:2px; font-weight:400; font-size:.8rem; color:var(--ink-soft)}
.oneoff-price{
  grid-column:2; grid-row:1;
  font-family:var(--archivo); font-weight:800; font-size:1.3rem;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.oneoff-row .btn-quiet{grid-column:3; grid-row:1}
.btn-quiet{
  background:transparent; color:var(--ink);
  border:1px solid var(--rule-strong); box-shadow:none;
  min-height:36px; padding:8px 15px;
}
.btn-quiet:hover:not(:disabled){background:rgba(42,33,24,.06); transform:none}

.price-foot{
  margin-top:clamp(20px,2.6vw,28px); padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:.86rem; line-height:1.6; color:var(--ink-soft); max-width:70ch;
}

.pricing-alert{
  margin-top:clamp(20px,3vw,32px); padding:16px 18px;
  background-color:var(--bond);
  border:1px solid var(--rule-strong); border-top:3px solid var(--red);
  font-size:.94rem; line-height:1.55; color:var(--ink);
}

/* first paint: amounts are "…" until Paddle answers */
.tier-price .amount:empty::before{content:"…"}

@media (max-width:900px){
  .tier{grid-template-columns:1fr; gap:14px}
  .tier-buy{
    flex-direction:row; align-items:center; justify-content:space-between;
    text-align:left; min-width:0; width:100%; gap:12px;
  }
}

@media (max-width:760px){
  .price-sheet{padding:22px 18px 26px}
  .billing{gap:10px 14px}
  .billing-note{flex-basis:100%}
  .tier-price{font-size:1.75rem}
  .oneoff-row{grid-template-columns:minmax(0,1fr) auto}
  .oneoff-name{grid-column:1; grid-row:1}
  .oneoff-price{grid-column:1; grid-row:2; font-size:1.15rem}
  .oneoff-row .btn-quiet{grid-column:2; grid-row:1 / span 2; align-self:center}
}

@media (max-width:420px){
  .billing-options label{padding:8px 12px 7px; letter-spacing:.1em}
  .tier-buy{flex-wrap:wrap}
  .btn-buy{min-height:42px}
}