/* ═══════════════════════════════════════════════════════════════════════════════
   THE OFFER — the $399 template, the concierge build, and the switch between them.

   This lived only inside index.html's <style> block until the About page needed the
   same card. Copying it would have meant two of everything: two prices, two feature
   lists, two segmented controls, two concierge modals — and a price change that had to
   be made twice or be silently wrong on one page. rows.css was extracted from the two
   console pages for exactly this reason; same argument, same answer.

   Dedented from the <style> block it came out of. Depends only on the token names both
   pages already declare (--fg, --fg-muted, --line-strong, --bg-raised, --mono …).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ---- buy ---- */
.buy{ padding:40px 0 110px; }
.offer-switch{ display:flex; justify-content:center; margin:0 auto 24px; }
/* Segmented control, built like the console's (#ppToggle in dashboard.html): ONE
   shared thumb that slides between the options. Fading a background in on the
   newly-selected button and out on the old one is two independent animations that
   merely happen to overlap — nothing travels, so the control never shows you that the
   two options are the same seat. The thumb is the whole idea. */
.offer-toggle{ position:relative; isolation:isolate; display:inline-grid;
  grid-template-columns:repeat(2, minmax(148px, 1fr)); gap:5px; padding:5px;
  border-radius:999px; background:var(--bg-input);
  border:1px solid var(--card-line);
  box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.18); }
.offer-toggle::before{ content:""; position:absolute; z-index:0; top:5px; bottom:5px; left:5px;
  width:calc((100% - 15px) / 2); border-radius:999px;
  background:var(--bg-card); box-shadow:inset 0 1px 0 0 var(--card-top), 0 2px 10px rgba(0,0,0,.28);
  transform:translateX(0); transition:transform .32s cubic-bezier(.2,.8,.2,1), background .32s, box-shadow .32s; }
.offer-toggle[data-offer="concierge"]::before{ transform:translateX(calc(100% + 5px));
  background:linear-gradient(135deg, #7a5722, #8a5b28 48%, #343b78);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.14), 0 5px 20px rgba(205,151,68,.22); }
.offer-toggle button{ position:relative; z-index:1; min-width:0; border:0; border-radius:999px;
  background:transparent; color:var(--fg-muted);
  padding:10px 18px; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center;
  gap:8px; transition:color .24s; }
.offer-toggle button:hover{ color:var(--fg); }
.offer-toggle button[aria-selected="true"]{ background:transparent; box-shadow:none; color:var(--fg); }
.offer-toggle button[data-offer="concierge"][aria-selected="true"]{ color:#fff8e8; background:transparent; }
.offer-toggle .ot-main{ font-size:14px; font-weight:650; }
.offer-toggle .ot-badge{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 6px; border-radius:999px; color:#e6bd72; background:rgba(230,189,114,.09); border:1px solid rgba(230,189,114,.25); }
.buy-card{ position:relative; max-width:720px; margin:0 auto; border:1px solid var(--accent-line);
  border-radius:22px; background:
    radial-gradient(120% 90% at 50% 0%, rgba(91,141,239,0.12), transparent 60%), var(--bg-raised);
  padding:50px 44px; text-align:center; overflow:hidden; isolation:isolate;
  transition:border-color .5s, box-shadow .5s, transform .5s, background .5s, height .5s cubic-bezier(.2,.8,.2,1); }
/* Border glimmer, not an orbit. The old conic sweep rotated forever behind the card:
   motion that never resolves reads as a loading state, and it announced itself far
   louder than the offer did. This is the masked rim from texture.css — a fixed light
   source above-left, soft-edged because the gradient fades out before the corners
   rather than being blurred (a blur would bleed the ring and lose the hairline). */
.buy-card::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  border-radius:inherit; padding:1px;
  background:
    radial-gradient(58% 44% at 84% 6%, rgba(255,255,255,.80) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 18%,
      transparent 46%, transparent 72%, rgba(230,189,114,.85) 100%);
  -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;
  transition:opacity .5s; }
/* The glimmer: a highlight that TRAVELS the rim rather than the whole card orbiting.
   ::after carries a narrow bright band on a 200%-wide gradient and slides its
   background-position, so the light appears to run around the edge and the card itself
   never moves. Same mask as ::before, so it too survives only in the 1px ring.
   background-position animates on the compositor here — nothing reflows. */
.bc-glimmer{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  border-radius:inherit; padding:1px;
  background:linear-gradient(100deg,
    transparent 0%, transparent 38%,
    rgba(255,236,196,.95) 47%, rgba(255,255,255,.95) 50%, rgba(255,236,196,.95) 53%,
    transparent 62%, transparent 100%);
  background-size:260% 100%; background-position:130% 0;
  -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;
  transition:opacity .5s; }
.buy-card.is-concierge .bc-glimmer{ opacity:.9; animation:conciergeGlimmer 4.6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes conciergeGlimmer{
  0%   { background-position:130% 0; }
  55%  { background-position:-130% 0; }
  100% { background-position:-130% 0; }   /* rest before it runs again */
}
.buy-card::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:32px 32px; mask-image:linear-gradient(to bottom, black, transparent 72%); transition:opacity .5s; }
.buy-card.is-concierge{ border-color:rgba(230,189,114,.55); transform:translateY(-4px);
  background:radial-gradient(90% 75% at 50% 0%, rgba(230,189,114,.17), transparent 58%),
    radial-gradient(80% 80% at 100% 100%, rgba(91,141,239,.15), transparent 62%), var(--bg-raised);
  box-shadow:0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(230,189,114,.07), 0 0 56px rgba(157,110,48,.10); }
.buy-card.is-concierge::before{ opacity:1; }
.buy-card.is-concierge::after{ opacity:1; }
.buy-card.is-changing.is-concierge{ animation:offerCardShiftIn .52s cubic-bezier(.2,.8,.2,1); }
.buy-card.is-changing:not(.is-concierge){ animation:offerCardShiftOut .52s cubic-bezier(.2,.8,.2,1); }
.buy-card .glow{ position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:560px; height:360px;
  background:radial-gradient(circle, rgba(91,141,239,0.10), transparent 65%); pointer-events:none;
  transition:background .5s, opacity .5s; }
.buy-card.is-concierge .glow{ background:radial-gradient(circle, rgba(238,190,99,.22), transparent 65%); }
.buy-card .inner{ position:relative; z-index:1; }
.offer-panel{ display:none; }
.offer-panel.active{ display:block; }
.offer-panel.is-measuring{ display:block; position:absolute; inset:0 0 auto; visibility:hidden; pointer-events:none; }
.offer-panel.is-entering{ animation:offerPanelIn .48s cubic-bezier(.2,.8,.2,1) both; }
.offer-panel.is-entering .inc{ animation:offerItemIn .4s cubic-bezier(.2,.8,.2,1) both; }
.offer-panel.is-entering .inc:nth-child(1){ animation-delay:.08s; }
.offer-panel.is-entering .inc:nth-child(2){ animation-delay:.13s; }
.offer-panel.is-entering .inc:nth-child(3){ animation-delay:.18s; }
.offer-panel.is-entering .inc:nth-child(4){ animation-delay:.23s; }
.buy-card .eyebrow{ justify-content:center; }
.buy-card h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,5vw,46px);
  letter-spacing:-0.02em; margin:18px 0 0; line-height:1.05; }
.buy-card h2 .em{ font-style:italic; color:var(--fg-muted); }
.buy-price{ margin:26px 0 6px; display:flex; align-items:baseline; justify-content:center; gap:10px; }
.buy-price .amt{ font-family:var(--serif); font-size:62px; letter-spacing:-0.02em; }
.buy-price .per{ font-family:var(--mono); font-size:13px; color:var(--fg-dim); letter-spacing:.04em; }
.buy-sub{ font-size:14px; color:var(--fg-muted); }
.includes{ margin:30px auto 0; max-width:520px; display:grid; grid-template-columns:1fr 1fr; gap:13px 26px; text-align:left; }
.includes .inc{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--fg-muted); }
.includes .inc svg{ width:16px; height:16px; flex:0 0 16px; margin-top:2px; color:var(--accent); }
.buy-card.is-concierge .includes .inc svg{ color:#e6bd72; }
#offer-concierge .includes .inc:last-child{ grid-column:1 / -1; }
.includes .inc b{ color:var(--fg); font-weight:550; }
.concierge-form{ margin:26px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; }
.concierge-form label{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.concierge-form label.full{ grid-column:1 / -1; }
.concierge-form .cf-label{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-muted); }
.concierge-form input, .concierge-form select, .concierge-form textarea{ width:100%; border:1px solid var(--line-strong);
  border-radius:10px; background:var(--bg-input); color:var(--fg); padding:11px 12px; font:inherit; font-size:13.5px;
  outline:none; transition:border-color .18s, box-shadow .18s; }
.concierge-form select{ min-height:43px; padding-right:42px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-color:var(--bg-input); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23727a89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px; }
.concierge-form select::-ms-expand{ display:none; }
.concierge-form select option{ color:var(--fg); background:var(--bg-raised); }
.concierge-form textarea{ min-height:110px; resize:vertical; line-height:1.5; }
.concierge-form input:focus, .concierge-form select:focus, .concierge-form textarea:focus{ border-color:rgba(230,189,114,.62);
  box-shadow:0 0 0 3px rgba(230,189,114,.1); }
.concierge-form .btn-primary{ grid-column:1 / -1; justify-self:center; border:0; cursor:pointer; font-family:inherit; }
.concierge-form .btn-primary:disabled{ opacity:.65; cursor:wait; }
.concierge-contact-fields{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding-top:18px; border-top:1px solid rgba(230,189,114,.2); animation:conciergeFieldsIn .3s cubic-bezier(.2,.8,.2,1) both; }
.concierge-contact-fields[hidden], .concierge-form .btn-primary[hidden]{ display:none; }
.concierge-form-status{ grid-column:1 / -1; text-align:center; font-size:12px; color:var(--fg-dim); }
.concierge-form-status.is-success{ color:#4f9f72; }
.concierge-form-status.is-error{ color:#d26a61; }
.cf-hp{ position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important; }
.buy-card .btn-primary{ margin-top:36px; font-size:16px; padding:15px 30px; }
.buy-card button.btn-primary{ border:0; cursor:pointer; font-family:inherit; }
.buy-card.is-concierge .btn-primary{ color:#171009; background:linear-gradient(135deg,#f2d28e,#d9a94f 60%,#c99239);
  box-shadow:0 12px 34px rgba(211,156,65,.2); }
.buy-note{ margin-top:16px; font-size:12.5px; color:var(--fg-dim); }
body.concierge-modal-open{ overflow:hidden; }
.concierge-modal[hidden]{ display:none; }
.concierge-modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px;
  opacity:0; transition:opacity .22s ease; }
.concierge-modal.is-open{ opacity:1; }
.concierge-modal-backdrop{ position:absolute; inset:0; background:rgba(4,7,12,.82); backdrop-filter:blur(10px); }
.concierge-dialog{ position:relative; z-index:1; width:min(680px,100%); max-height:calc(100dvh - 48px); overflow:auto;
  padding:36px; border:1px solid rgba(230,189,114,.28); border-radius:22px; background:var(--bg-raised);
  box-shadow:0 10px 30px rgba(0,0,0,.3), 0 0 52px rgba(211,156,65,.08);
  transform:translateY(12px) scale(.985); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.concierge-modal.is-open .concierge-dialog{ transform:none; }
.concierge-dialog-kicker{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#e6bd72; }
.concierge-dialog h2{ margin:10px 42px 0 0; font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,42px);
  line-height:1.06; letter-spacing:-.02em; }
.concierge-dialog-intro{ margin-top:10px; max-width:530px; color:var(--fg-muted); font-size:14px; line-height:1.55; }
.concierge-close{ position:absolute; top:22px; right:22px; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:50%; background:rgba(255,255,255,.035); color:var(--fg-muted);
  cursor:pointer; transition:border-color .18s, color .18s, transform .18s; }
.concierge-close:hover{ border-color:rgba(230,189,114,.48); color:var(--fg); transform:rotate(3deg); }
.concierge-close svg{ width:16px; height:16px; }
.concierge-dialog .concierge-form .btn-primary{ color:#171009; background:linear-gradient(135deg,#f2d28e,#d9a94f 60%,#c99239);
  box-shadow:0 12px 34px rgba(211,156,65,.2); font-size:15px; padding:14px 26px; }
@keyframes conciergeFieldsIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes offerCardShiftIn{ 0%{ transform:translateY(0) scale(1); } 48%{ transform:translateY(-7px) scale(1.012); } 100%{ transform:translateY(-4px) scale(1); } }
@keyframes offerCardShiftOut{ 0%{ transform:translateY(-4px) scale(1); } 48%{ transform:translateY(-7px) scale(1.012); } 100%{ transform:translateY(0) scale(1); } }
@keyframes offerPanelIn{ from{ opacity:0; transform:translateY(12px); filter:blur(5px); }
  to{ opacity:1; transform:none; filter:blur(0); } }
@keyframes offerItemIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@media (max-width:560px){
  .includes{ grid-template-columns:1fr; }
  .buy-card{ padding:40px 24px; }
  .offer-toggle{ width:100%; }
  .offer-toggle button{ min-width:0; flex:1; padding:10px 12px; }
  .offer-toggle .ot-badge{ display:none; }
  .concierge-form{ grid-template-columns:1fr; }
  .concierge-form label.full, .concierge-form .btn-primary, .concierge-form-status{ grid-column:1; }
  .concierge-contact-fields{ grid-template-columns:1fr; }
  .concierge-modal{ padding:12px; }
  .concierge-dialog{ max-height:calc(100dvh - 24px); padding:28px 20px 24px; border-radius:18px; }
  .concierge-close{ top:16px; right:16px; }
  .concierge-dialog h2{ margin-right:44px; }
}

@media (prefers-reduced-motion:reduce){
  .buy-card.is-concierge::before, .buy-card.is-concierge .bc-glimmer, .buy-card.is-changing,
  .offer-panel.is-entering, .offer-panel.is-entering .inc, .concierge-contact-fields{ animation:none !important; }
  .buy-card, .offer-toggle button, .concierge-modal, .concierge-dialog{ transition:none !important; }
}