:root{
  --cream:#F7F3EC; --paper:#FCFAF6; --navy:#16304F; --maroon:#9B2427;
  --lifted:#C43336; --gold:#C3A268; --border:#E6DAC4; --body:#5B6B7A; --muted:#7D7161;
  --display:'Cormorant Garamond',Georgia,serif;
  --ui:'Jost','Century Gothic','Trebuchet MS',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--ui);
  font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.5}
#app{max-width:560px;margin:0 auto;padding:24px 20px 64px}

.masthead{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:22px}
.masthead .mark{height:32px;width:auto;display:block}
.masthead .place{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* The full lockup, at a size where the fourth tier of the stack is still
   legible — which is the whole reason it is not in the masthead. */
.lockup{display:block;height:140px;width:auto;margin:0 auto 20px}
@media (max-width:380px){ .lockup{height:118px} }

h1,h2{font-family:var(--display);font-weight:600;line-height:1.15;margin:0 0 12px}
h1{font-size:30px} h2{font-size:24px}
p{margin:0 0 14px}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

.progress{height:2px;background:var(--border);margin-bottom:22px}
.progress span{display:block;height:2px;background:var(--gold);transition:width .25s ease}

.nav[hidden]{display:none}

/* The animating layer. The arriving step always stays in normal flow and defines
   the height; only the leaving step is taken out of flow. That means a transition
   costs one layout write (min-height, set once) instead of one per frame — the
   difference between compositor-only motion and layout thrash on a mid-range
   phone. touch-action pan-y leaves vertical scrolling to the browser and
   horizontal to the swipe. */
.viewport{position:relative;touch-action:pan-y}
.viewport.is-animating{overflow:hidden}
.viewport > .step.is-leaving{position:absolute;top:0;left:0;width:100%}

/* A step must be opaque. Without this the arriving step is transparent, so the
   one it is covering reads straight through it and the two sets of text mix
   during the slide. */
.viewport > .step{background:var(--cream);position:relative}

.choice{display:block;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--border);border-radius:2px;padding:14px 16px;margin-bottom:10px;
  font-family:var(--ui);font-size:16px;color:var(--navy);cursor:pointer}
.choice:hover{border-color:var(--gold)}
.choice[aria-pressed="true"]{border-color:var(--maroon);box-shadow:inset 0 0 0 1px var(--maroon)}
.choice small{display:block;color:var(--body);font-size:13px;margin-top:6px;line-height:1.45}

/* Cormorant defaults to old-style figures, which drop digits below the baseline.
   Prices need lining figures to stay legible and to line up with each other. */
.band,.tier-card .amt,.lines .amt{font-variant-numeric:lining-nums;
  font-feature-settings:'lnum' 1,'onum' 0}

.band{font-family:var(--display);font-size:40px;font-weight:600;color:var(--navy);
  line-height:1.1;margin-bottom:8px}
.band .gst{font-family:var(--ui);font-size:40px;font-weight:300;color:var(--muted);
  white-space:nowrap}

.caveat{background:var(--paper);border-left:3px solid var(--maroon);padding:12px 14px;
  font-size:14px;color:var(--body);margin:18px 0}
.caveat b{color:var(--navy)}

.tier-row{display:flex;gap:8px;margin:18px 0}
.tier-card{flex:1;border:1px solid var(--border);padding:10px 6px;text-align:center;
  background:var(--paper);opacity:.5}
.tier-card.is-selected{opacity:1;border-color:var(--maroon)}
.tier-card .name{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tier-card .amt{font-family:var(--display);font-size:15px;font-weight:600;margin-top:4px;
  line-height:1.25}

.scope{font-size:14px;color:var(--body);margin:0 0 14px}
.scope b{color:var(--navy);font-weight:600}
.rule{border:0;border-top:1px solid var(--border);margin:22px 0}

label{display:block;font-size:13px;color:var(--muted);margin:14px 0 4px}
label.inline{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--body);
  line-height:1.45;margin:16px 0}
label.inline input{margin-top:3px;flex-shrink:0}
input[type=text],input[type=tel],input[type=email],input[type=number]{
  width:100%;padding:12px;border:1px solid var(--border);background:var(--paper);
  font-family:var(--ui);font-size:16px;color:var(--navy);border-radius:2px}
input:focus{outline:2px solid var(--gold);outline-offset:-1px}

.cta{width:100%;padding:15px;background:var(--maroon);color:#fff;border:none;
  font-family:var(--ui);font-size:16px;letter-spacing:.03em;cursor:pointer;
  border-radius:2px;margin-top:18px}
.cta:disabled{background:var(--muted);cursor:not-allowed}
.link{background:none;border:none;color:var(--maroon);text-decoration:underline;
  font-family:var(--ui);font-size:14px;padding:8px 0;cursor:pointer;display:block}
.back{color:var(--muted);text-decoration:none;font-size:13px;margin-bottom:14px}

.error{color:var(--maroon);font-size:13px;margin-top:6px;min-height:0}
.hp{position:absolute;left:-9999px}

.lines{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.lines td{border-bottom:1px solid var(--border);padding:9px 0;vertical-align:top}
.lines td.amt{text-align:right;white-space:nowrap;padding-left:10px}
.lines small{color:var(--muted);font-size:12px}

@media (max-width:380px){
  h1{font-size:26px}
  .band,.band .gst{font-size:31px}
  .tier-card .amt{font-size:13px}
}

@media print{
  body{background:#fff}
  #app{max-width:none;padding:0}
  .cta,.link,.progress,input[type=file],.back{display:none!important}
  .caveat{border-left:2px solid #000;background:none}
  .tier-card{opacity:1!important}
  h2{page-break-after:avoid}
  table{page-break-inside:avoid}
}

/* Reduced motion: motion.js swaps steps instantly and never attaches the edge
   swipe, so these rules only guard against a stray inline style surviving. */
@media (prefers-reduced-motion: reduce){
  .viewport > .step{transform:none !important;opacity:1 !important}
  .progress span{transition:none}
  .button,.choice,.cta{transition:none}
}