/* Pricing page, design pass 2026-10-30. Theme "Ledger": warm cream paper, sienna accent, gold signature.
   Loads after system.css. Drawn at 390 first. Signature: a stack of 3D glass slabs, one per website size (js/sig-pricing.js).
   Fonts: only the system variables (--font-display, --font-text). Nothing under 14px, nothing under weight 400. */

body.page-pricing{
  --paper:var(--th-bg);--ink:var(--th-text);--mute:var(--th-mute);--rule:rgba(28,21,7,.16);--card:var(--th-bg2);
  --green:var(--th-accent);--green-d:#7C300F;--m:120px;
  /* slab colours: gold, amber, orange, coral. Bright, saturated, they only sit on the dark band. */
  --t0:#FFD36B;--t1:#FFA23C;--t2:#FF6B3D;--t3:#FF4F6A;
  --band:#0B0905;
  background:var(--th-bg);color:var(--th-text)}
@media (max-width:1100px){body.page-pricing{--m:48px}}
@media (max-width:760px){body.page-pricing{--m:20px}}
body.page-pricing .btn{color:var(--th-accent-ink)}
body.page-pricing .btn:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
body.page-pricing .nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--th-sig)}
body.page-pricing .pg-head h1,body.page-pricing .pg-head .lede,body.page-pricing .pg-head .row-cta{animation:none}
body.page-pricing h1 em,body.page-pricing h2 em{color:var(--th-accent)}
body.page-pricing .txt-link{color:var(--th-accent);text-decoration:underline;text-underline-offset:3px}
body.page-pricing .glass.d .txt-link,body.page-pricing .cta-end .txt-link,body.page-pricing .sigband .txt-link{color:#FFD36B}

/* ---------- rhythm ---------- */
.pg-sec{padding:44px 0;position:relative}
.pg-sec.aurora{--blob:min(95vw,640px)}
.pg-sec.alt{background:
  radial-gradient(circle var(--blob) at 90% 10%,var(--th-glow1),transparent),
  radial-gradient(circle var(--blob) at 6% 90%,var(--th-glow2),transparent),var(--th-bg2)}
.pg-sec h2{font-size:var(--h2);margin:0 0 var(--sp-3);color:var(--th-text)}
.pg-sec .sub{margin:0 0 var(--sp-5);max-width:32ch;font-size:var(--fs-lede);line-height:1.4;color:var(--th-mute)}
.pg-sec .eyebrow{display:flex;align-items:baseline;gap:10px}
.pg-sec .eyebrow .sec-n{font:700 var(--fs-meta)/1 var(--font-display);color:var(--th-accent);letter-spacing:.04em}
.pg-head.aurora{padding:56px 0 28px}
.pg-head .lede{color:var(--th-mute);max-width:26ch}
.pg-head h1{font-size:var(--h1)}

/* three steps: the whole page in one line */
.steps{list-style:none;margin:var(--sp-5) 0 0;padding:var(--sp-4) var(--sp-4);display:grid;gap:12px;max-width:420px}
.steps li{display:flex;align-items:center;gap:12px;font:600 var(--fs-body)/1.25 var(--font-text);color:var(--th-text)}
.steps b{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--th-accent);color:#fff;font:700 var(--fs-small)/1 var(--font-display)}
.pg-head .row-cta{margin-top:var(--sp-5)}
.pg-head .row-cta .or,.cta-end .or{font-size:var(--fs-body);color:var(--th-mute)}

/* chooser */
.pickwrap{padding:12px 0 36px}
.pick-h{font:700 var(--h3)/1.15 var(--font-display)!important;margin:0 0 var(--sp-4)!important}
.picks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pick{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 18px;text-decoration:none;color:var(--glass-text);transition:transform .2s,box-shadow .2s}
.pick:hover,.pick:focus-visible{transform:translateY(-2px);box-shadow:var(--glass-hi),0 0 0 2px var(--th-sig),var(--glass-shadow)}
.pk-n{font:700 var(--h3)/1.1 var(--font-display);letter-spacing:-.01em}
.pk-v{font:700 var(--h3)/1 var(--font-display);color:var(--th-accent);white-space:nowrap}
.pk-v small,.px-v small{font:600 var(--fs-meta)/1 var(--font-text);color:var(--glass-mute);letter-spacing:.02em}
.pk-v::after{content:"";display:inline-block;width:9px;height:9px;margin-left:12px;border:solid currentColor;border-width:2.5px 2.5px 0 0;transform:rotate(45deg) translateY(-1px)}

/* ---------- signature band: dark theatre ---------- */
.sigband{position:relative;isolation:isolate;overflow:hidden;color:#F6EFE2;padding:56px 0 48px;
  background:
   radial-gradient(circle min(110vw,820px) at 78% 22%,rgba(255,107,61,.22),transparent),
   radial-gradient(circle min(100vw,720px) at 8% 70%,rgba(224,168,46,.20),transparent),var(--band);--glass-text:#F6EFE2}
.sigband h2{color:#FFF6E4;font-size:var(--h2);margin:0 0 var(--sp-3)}
body.page-pricing .sigband h2 em{color:var(--t0)}
.sigband .eyebrow{color:var(--t0);display:flex;gap:10px;align-items:baseline}
.sigband .eyebrow .sec-n{color:#FFF6E4;font:700 var(--fs-meta)/1 var(--font-display)}
.sigband .sub{color:#E9DFCB;font-size:var(--fs-lede);line-height:1.4;max-width:28ch;margin:0 0 var(--sp-4)}
.sig-grid{display:grid;gap:var(--sp-4)}
.sig{position:relative;height:min(100vw,420px);margin-inline:calc(var(--m)*-.4);overflow:hidden;touch-action:pan-y;-webkit-mask-image:radial-gradient(ellipse 56% 54% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 56% 54% at 50% 50%,#000 45%,transparent 100%);
  background:radial-gradient(60% 55% at 50% 78%,rgba(255,163,60,.30),transparent 70%),radial-gradient(40% 30% at 50% 92%,rgba(255,107,61,.35),transparent 70%)}
.sig-cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
.sig.is-live .sig-cv{opacity:1}
.sig-fb{position:absolute;inset:0;transition:opacity .8s}
.sig.is-live .sig-fb{opacity:0;pointer-events:none}
/* css fallback: same four slabs in CSS 3D. Interactive: tilts with the pointer, lights with the active tier. */
.fbs{position:absolute;inset:0;perspective:900px;display:grid;place-items:center}
.fbs-in{position:relative;width:min(62vw,250px);aspect-ratio:1.3;transform-style:preserve-3d;
  transform:rotateX(calc(62deg + var(--rx,0deg))) rotateZ(calc(-26deg + var(--ry,0deg)));transition:transform .5s var(--ease,ease)}
.fbs-in i{position:absolute;left:50%;top:50%;display:block;border-radius:14px;
  width:calc(62% + var(--i)*13%);aspect-ratio:1.3;margin:calc(var(--w,0)*0px);
  transform:translate(-50%,-50%) translateZ(calc((3 - var(--i))*52px - 40px));
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,transparent),color-mix(in srgb,var(--c) 8%,transparent));
  border:2px solid var(--c);box-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 30px color-mix(in srgb,var(--c) 22%,transparent);
  opacity:.82;transition:opacity .3s,box-shadow .3s}
.fbs-in i:nth-child(1){--c:var(--t0)}.fbs-in i:nth-child(2){--c:var(--t1)}.fbs-in i:nth-child(3){--c:var(--t2)}.fbs-in i:nth-child(4){--c:var(--t3)}
.sig[data-active="0"] .fbs-in i:nth-child(1),.sig[data-active="1"] .fbs-in i:nth-child(2),.sig[data-active="2"] .fbs-in i:nth-child(3),.sig[data-active="3"] .fbs-in i:nth-child(4){opacity:1;box-shadow:0 0 44px var(--c),inset 0 0 40px color-mix(in srgb,var(--c) 45%,transparent)}

/* tier cards (HTML, crisp; prices never only in WebGL) */
.tiers{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:t}
.tier{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline;padding:18px 18px 16px 22px;
  --glass-fill:rgba(20,14,8,.82);--glass-solid:#17110A;--glass-text:#FFF6E4;--glass-mute:#E3D8C4;--glass-border:rgba(255,255,255,.16);
  transition:box-shadow .3s,border-color .3s,transform .3s}
.tier-sw{position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:0 5px 5px 0;background:var(--tc);box-shadow:0 0 16px var(--tc)}
.tier.on{border-color:var(--tc);box-shadow:var(--glass-hi),0 0 0 1px var(--tc),0 0 34px -6px var(--tc),var(--glass-shadow)}
.tier-n{margin:0;font:700 var(--h3)/1.1 var(--font-display);color:#FFF6E4;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tier .tier-v{margin:0;font:700 clamp(1.75rem,1.4rem + 1.4vw,2.5rem)/1 var(--font-display);color:var(--tc);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.tier .tier-d{grid-column:1/-1;margin:0;font-size:var(--fs-body);line-height:1.45;color:#E9DFCB;max-width:36ch}
.tier-m{grid-column:1/-1}
.tier .btn{grid-column:1/-1;justify-self:start;background:var(--tc);border-color:var(--tc);color:#1A0F03}
.tier .btn:hover{background:#fff;border-color:#fff;color:#1A0F03}
.px-t{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--th-sig);color:#1C1507;font:700 var(--fs-meta)/1.3 var(--font-text);letter-spacing:.02em}

/* details */
body.page-pricing details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px;font:600 var(--fs-small)/1.2 var(--font-text)}
body.page-pricing details>summary::-webkit-details-marker{display:none}
body.page-pricing details>summary::after{content:"";margin-left:10px;width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
body.page-pricing details[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
body.page-pricing details>p{margin:0 0 6px;font-size:var(--fs-body);line-height:1.5}
.tier .tier-m summary{color:#FFD36B}
.tier .tier-m p{color:#E9DFCB}

/* ---------- ledgers (rows inside one glass panel) ---------- */
.ledg{list-style:none;margin:0;padding:0}
.px{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n v" "d d" "m a";gap:2px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--glass-border)}
.px:has(.px-m[open]){grid-template-areas:"n v" "d d" "m m" "a a"}
.px:not(:has(.px-m)){grid-template-areas:"n v" "d d" "a a"}
.px.lp{grid-template-areas:"n n" "v v" "d d" "m a"}
.px.lp:has(.px-m[open]){grid-template-areas:"n n" "v v" "d d" "m m" "a a"}
.px.lp:not(:has(.px-m)){grid-template-areas:"n n" "v v" "d d" "a a"}
.px.lp .px-v{text-align:left;white-space:normal;margin-top:2px}
.px:first-child{border-top:0;padding-top:2px}
.px:last-child{padding-bottom:2px}
.px-n{align-self:baseline;grid-area:n;margin:0;font:700 var(--h3)/1.15 var(--font-display);color:var(--glass-text);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.px-v{grid-area:v;margin:0;font:700 clamp(1.5rem,1.25rem + 1vw,1.875rem)/1.1 var(--font-display);color:var(--th-accent);text-align:right;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.px-v .plus{font-weight:600;color:var(--glass-mute)}
.px-d{grid-area:d;margin:2px 0 0;font-size:var(--fs-body);line-height:1.45;color:var(--glass-mute);max-width:44ch}
.px-m{grid-area:m}
.px-m summary{color:var(--th-accent)}
.px-m p{color:var(--glass-mute);max-width:52ch}
.px-a{grid-area:a;justify-self:end;margin-top:2px}
.px:has(.px-m[open]) .px-a,.px:not(:has(.px-m)) .px-a,.px.lp:has(.px-m[open]) .px-a{justify-self:start;margin-top:6px}
.px.pop{margin-inline:-12px;padding-inline:12px;border-radius:14px;background:color-mix(in srgb,var(--th-sig) 18%,transparent);border-top-color:transparent}
.px.pop+.px{border-top-color:transparent}
.note{margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--glass-border);font-size:var(--fs-small);line-height:1.45;color:var(--glass-mute)}
/* mobile accordion: collapses each price list under a tap target; JS forces [open] back on at desktop width */
.pricing-acc{display:block}
.pricing-acc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 2px;font:700 var(--fs-body)/1.2 var(--font-text);color:var(--th-accent)}
.pricing-acc summary::-webkit-details-marker{display:none}
.pricing-acc summary::after{content:"+";flex:0 0 auto;width:22px;height:22px;line-height:19px;text-align:center;border:2px solid currentColor;border-radius:999px;font-size:16px;transition:transform .2s}
.pricing-acc[open] summary::after{transform:rotate(45deg)}
@media (min-width:768px){.pricing-acc summary{display:none}}
@media (prefers-reduced-motion:reduce){.pricing-acc summary::after{transition:none}}

/* group layout: photo + heading, then the panels */
.grp{display:grid;gap:var(--sp-5)}
.grp-b{display:grid;gap:var(--sp-4);align-content:start}
.shot{margin:0;border-radius:20px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(100,62,10,.6);border:1px solid var(--glass-border)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.two{display:grid;gap:var(--sp-4)}
.two .glass .panel-p{max-width:34ch;margin-bottom:var(--sp-4)}
.two .glass .px-n{font-size:var(--fs-lede)}

/* travel */
.tgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.tgrid .panel-p{margin-bottom:var(--sp-3)}
body.page-pricing .tgrid>li{padding:var(--panel-pad);border:1px solid var(--glass-border);background:var(--glass-fill);border-top:1px solid var(--glass-border)}
body.page-pricing .tgrid>li::before{display:none}

/* paying + faq */
.pay2{margin:0}
.pay2>div{padding:12px 0;border-top:1px solid var(--glass-border)}
.pay2>div:first-child{border-top:0;padding-top:0}
.pay2 dt{font:700 var(--fs-body)/1.2 var(--font-display);color:var(--glass-text);margin-bottom:2px}
.pay2 dd{margin:0;font-size:var(--fs-body);line-height:1.45;color:var(--glass-mute)}
.paymore{margin-top:var(--sp-3);border-top:1px solid var(--glass-border)}
.faqp details{border-top:1px solid var(--glass-border)}
.faqp details:first-child{border-top:0}
.faqp summary{justify-content:space-between;padding:6px 0;font:700 var(--fs-body)/1.25 var(--font-display);color:var(--glass-text)}
.faqp p{color:var(--glass-mute)}

/* end cta */
.cta-end{padding:12px 0 72px}
.cta-end .glass{--glass-fill:rgba(20,14,8,.9);--glass-solid:#17110A;--glass-text:#FFF6E4;--glass-mute:#E3D8C4;--glass-border:rgba(255,255,255,.16);
  background:radial-gradient(circle 420px at 100% 0,rgba(255,107,61,.28),transparent),radial-gradient(circle 360px at 0 100%,rgba(224,168,46,.24),transparent),#17110A}
.cta-end .panel-h{font-size:var(--h2)}
.cta-end .panel-p{margin-bottom:var(--sp-4)}
.cta-end .row-cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.cta-end .or{color:#E3D8C4}
.cta-end .btn{background:var(--t0);border-color:var(--t0);color:#1A0F03}
.cta-end .btn:hover{background:#fff;border-color:#fff;color:#1A0F03}

/* ---------- tablet and desktop ---------- */
@media (min-width:900px){
  .pg-head .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:var(--sp-7);align-items:center}
  .pg-head .wrap>*{grid-column:1}
  .pg-head .steps{grid-column:2;grid-row:1/5;margin:0;padding:var(--sp-5);gap:18px;max-width:none}
  .steps li{font-size:var(--fs-lede)}
  .steps b{width:40px;height:40px;font-size:var(--fs-body)}
}
@media (min-width:768px){
  .pg-sec{padding:72px 0}
  .picks{grid-template-columns:repeat(3,1fr);gap:14px}
  .pick{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;min-height:110px}
  .px,.px:has(.px-m[open]),.px:not(:has(.px-m)),.px.lp,.px.lp:has(.px-m[open]),.px.lp:not(:has(.px-m)){grid-template-columns:1fr auto auto;grid-template-areas:"n v a" "d d d" "m m m";gap:4px 20px;align-items:center}
  .px.lp .px-v{text-align:right;white-space:nowrap}
  .px-a,.px:has(.px-m[open]) .px-a,.px:not(:has(.px-m)) .px-a{margin-top:0;justify-self:end}
  .px-v{text-align:right;min-width:5.5ch}
  .tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sig-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--sp-4) var(--sp-7);align-items:start}
  .sig-h{grid-column:1/-1}
  .sig{position:sticky;top:96px;height:min(84vh,860px);margin-inline:0}
  .tiers{gap:16px}
  .tier{padding:22px 24px 20px 28px}
  .fbs-in{width:min(44vw,500px)}
}
@media (min-width:1100px){
  .two{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);align-items:start}
  .grp{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-7);align-items:start}
  .grp-h{position:sticky;top:96px}
  .picks{grid-template-columns:repeat(5,1fr)}
  .pick{min-height:130px}
  .tier-v{font-size:2.5rem}
}
@media (min-width:768px) and (max-width:1099px){.picks .pk-v::after{display:none}}
@media (min-width:768px){.pk-v::after{display:none}}
/* a row that is open puts the button under the text so the text can use the whole width */

/* reduced motion: a still stack, nothing hidden; the JS draws one still frame */
@media (prefers-reduced-motion:reduce){
  .pick,.tier,.sig-cv,.sig-fb,.fbs-in,.fbs-in i{transition:none}
  .pick:hover{transform:none}
}
html.lite .sig-cv{transition:none}
@media (forced-colors:active){.fbs-in i{border-color:CanvasText}}
.glass>.panel-p{margin-bottom:var(--sp-4)}

body.page-pricing .btn{white-space:nowrap}
@media (min-width:768px) and (max-width:1099px){.grp-h .shot{max-width:560px}.two{gap:var(--sp-5)}}