/* PhoneDraft — The Candidate Dossier
   One page as a candidate file: manila ground, typed bond sheets, stamped verdicts.
   Plans and price IDs live in tiers.js; Paddle supplies every amount. */

/* ---------- tokens ---------- */
:root{
  --manila:#d9b384;
  --manila-deep:#c9a170;
  --manila-edge:#b08655;
  --bond:#f5f2e7;
  --bond-edge:#ddd6c2;

  --ink:#2a2118;
  --ink-soft:#40362a;
  --pencil:#6d6353;

  --red:#a72b1e;
  --ochre:#7a5410;
  --green:#2f5a42;

  --rule:rgba(42,33,24,.20);
  --rule-soft:rgba(42,33,24,.12);
  --rule-strong:rgba(42,33,24,.42);

  --lift:0 1px 2px rgba(28,24,18,.16), 0 14px 34px -12px rgba(28,24,18,.32);
  --lift-sm:0 1px 1px rgba(28,24,18,.18), 0 6px 16px -8px rgba(28,24,18,.28);

  --shell:min(1560px, 100%);
  --pad:clamp(20px, 3.4vw, 52px);
  --rail-h:56px;

  --s-body:1.1rem;
  --s-lede:clamp(.99rem, .95rem + .22vw, 1.1rem);
  --s-h2:clamp(1.72rem, 1.2rem + 1.7vw, 2.72rem);
  --s-h1:clamp(2.2rem, 1.15rem + 3.25vw, 3.95rem);
  --s-label:.7rem;

  --archivo:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --typed:'Courier Prime', 'Courier New', Courier, monospace;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background-color:var(--manila);
  background-image:var(--grain);
  background-blend-mode:multiply;
  color:var(--ink);
  font-family:var(--typed);
  font-size:var(--s-body);
  line-height:1.62;
  -webkit-font-smoothing:subpixel-antialiased;
}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}

html{scrollbar-color:var(--manila-edge) var(--manila); scrollbar-width:thin}
::selection{background:var(--ink); color:var(--bond)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
a:focus-visible{outline-offset:4px}
.slip:focus-visible,.slip:focus{outline:2px solid var(--bond); outline-offset:-4px; box-shadow:0 0 0 3px var(--ink), 0 10px 22px -12px rgba(42,33,24,.6)}
p a,li a,dd a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em}

.skip{
  position:absolute; left:12px; top:-64px; z-index:100;
  background:var(--bond); color:var(--ink); padding:10px 16px;
  font:700 .7rem/1 var(--archivo); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--rule-strong);
}
.skip:focus{top:12px}

.label{
  font-family:var(--archivo); font-weight:700; font-size:var(--s-label);
  letter-spacing:.17em; text-transform:uppercase; line-height:1.3; color:var(--ink-soft);
}

/* ---------- rail ---------- */
.rail{
  position:sticky; top:0; z-index:50;
  background:var(--manila-deep);
  background-image:var(--grain); background-blend-mode:multiply;
  border-bottom:1px solid var(--rule-strong);
  box-shadow:0 8px 18px -14px rgba(28,24,18,.45);
}
.rail-in{
  max-width:var(--shell); margin:0 auto;
  display:flex; align-items:flex-end; gap:clamp(14px, 2.4vw, 36px);
  padding:0 var(--pad);
}
.mark{
  display:flex; align-items:baseline; gap:10px; text-decoration:none;
  padding:18px 0 13px; color:var(--ink); flex:0 0 auto;
}
.mark-name{
  font-family:var(--archivo); font-weight:800; font-size:.94rem;
  letter-spacing:.07em; text-transform:uppercase;
}
.mark-sub{font-size:.72rem; letter-spacing:.02em; color:var(--ink-soft)}

.tabs{display:flex; gap:5px; flex:1 1 auto; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; text-decoration:none; white-space:nowrap;
  display:inline-block; padding:11px 13px 9px; margin-bottom:-1px;
  border:1px solid transparent; border-bottom:0; border-radius:7px 7px 0 0;
  font-family:var(--archivo); font-weight:700; font-size:.7rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft);
  transition:background-color .18s ease, color .18s ease;
}
.tab:hover{background:rgba(245,242,231,.42); color:var(--ink)}
.tab[aria-current="true"]{
  background:var(--bond); color:var(--ink);
  border-color:var(--rule-strong);
  box-shadow:inset 0 2px 0 var(--ink);
}
.tab[aria-current="true"]:hover{background:var(--bond)}
.rail-ref{
  flex:0 0 auto; padding-bottom:14px; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.rail-ref b{font-weight:700}

/* ---------- opening: the folder spread ---------- */
.opening{
  position:relative;
  max-width:var(--shell); margin:0 auto;
  min-height:calc(100svh - var(--rail-h));
  display:grid; grid-template-columns:40% 1fr;
  align-items:stretch;
  overflow:clip;
  background:radial-gradient(150% 105% at 26% -12%, rgba(255,247,230,.42), rgba(255,247,230,0) 62%);
}
.fold{
  position:absolute; top:0; bottom:0; left:40%; width:2px; z-index:3;
  background:linear-gradient(90deg, rgba(120,86,44,.28), rgba(255,244,222,.5) 55%, transparent);
  box-shadow:14px 0 26px -18px rgba(28,24,18,.6);
  pointer-events:none;
}

.flap{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between; gap:clamp(22px,3.2vh,40px);
  padding:clamp(30px,3.6vw,54px) clamp(24px,3vw,44px) clamp(24px,3vw,40px) var(--pad);
}
.flap h1{
  font-family:var(--archivo); font-weight:800;
  font-size:var(--s-h1); line-height:.95; letter-spacing:-.025em;
  margin:0 0 0 -.05em;
  text-wrap:balance;
}
.lede{
  margin-top:clamp(16px,2.2vh,22px);
  font-size:var(--s-lede); line-height:1.55;
  max-width:37ch; color:var(--ink-soft);
}
.flap-act{margin-top:clamp(20px,2.8vh,28px)}

.slip{
  display:inline-flex; flex-direction:column; gap:3px;
  min-width:min(320px,100%);
  padding:14px 20px 15px;
  background:var(--ink); color:var(--bond);
  text-decoration:none; border-radius:2px;
  box-shadow:0 2px 0 rgba(42,33,24,.25), 0 10px 22px -12px rgba(42,33,24,.6);
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.slip:hover{transform:translateY(-1px); background:#1d1710; box-shadow:0 3px 0 rgba(42,33,24,.25), 0 16px 26px -14px rgba(42,33,24,.7)}
.slip:active{transform:translateY(0)}
.slip-act{
  font-family:var(--archivo); font-weight:800; font-size:.86rem;
  letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:10px;
}
.slip-act::after{content:""; width:18px; height:1px; background:currentColor; opacity:.7}
.slip-to{
  font-family:var(--typed); font-size:.78rem; letter-spacing:.01em;
  opacity:.72; text-transform:none;
}
.alt{margin-top:14px; font-size:.92rem; color:var(--ink-soft)}
.alt a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.alt a:hover{color:var(--ink)}
.small{margin-top:clamp(16px,2.2vh,22px); font-size:.78rem; line-height:1.55; color:var(--ink-soft); max-width:44ch}

.flap-foot{border-top:1px solid var(--rule-strong); padding-top:10px; max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px}
.file-line{
  display:flex; justify-content:space-between; gap:10px; align-items:baseline; min-width:0;
  border-bottom:1px dotted var(--rule); padding:6px 0 5px;
}
.file-line span:first-child{
  font-family:var(--archivo); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.file-line span:last-child{font-size:.8rem; letter-spacing:.02em; font-variant-numeric:tabular-nums}

/* ---------- sheets ---------- */
.sheet{
  position:relative;
  background-color:var(--bond);
  background-image:var(--grain); background-blend-mode:multiply;
  border:1px solid var(--bond-edge);
  box-shadow:var(--lift);
}
.sheet-hero{
  z-index:2;
  margin:0 -1px 0 0;
  min-height:calc(100svh - var(--rail-h));
  padding:clamp(22px,2.2vw,32px) clamp(24px,4vw,58px) clamp(18px,2vw,28px) clamp(30px,3.4vw,52px);
  display:flex; flex-direction:column; gap:clamp(12px,1.5vh,18px);
  box-shadow:-14px 0 30px -22px rgba(28,24,18,.5), var(--lift);
}
.punch{
  position:absolute; left:15px; width:13px; height:13px; border-radius:50%;
  background:var(--manila); box-shadow:inset 0 1px 3px rgba(58,38,16,.55), 0 0 0 1px rgba(58,38,16,.12);
}
.punch-a{top:22%} .punch-b{top:74%}
.staple{
  position:absolute; left:22px; top:15px; width:30px; height:7px; border-radius:1px;
  background:linear-gradient(180deg,#dfe2e4,#8b959a 60%,#6d787d);
  transform:rotate(-18deg); box-shadow:0 1px 2px rgba(42,33,24,.4);
}
.staple::after{
  content:""; position:absolute; left:3px; top:6px; width:9px; height:13px;
  transform:rotate(9deg); background:rgba(109,120,125,.55); border-radius:1px;
}

.sheet-head{display:grid; grid-template-columns:1fr auto; gap:2px 18px; align-items:baseline}
.typed-cap{
  font-family:var(--archivo); font-weight:700; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.sheet-head .right{text-align:right}
.typed-name{
  grid-column:1/-1; margin-top:12px;
  font-family:var(--typed); font-weight:700; font-size:clamp(1.14rem, 1rem + .5vw, 1.4rem);
  letter-spacing:.06em; text-transform:uppercase;
}
.typed-role{grid-column:1/-1; font-size:.88rem; color:var(--ink-soft)}
.typed-meta{
  grid-column:1/-1; margin-top:8px; padding-top:8px; border-top:1px solid var(--rule);
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule-soft); border:1px solid var(--rule-soft);
}
.facts>div{background:var(--bond); padding:9px 10px 10px; min-width:0}
.fact{display:block; margin-top:3px; font-weight:700; font-size:.86rem; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.fact small{display:block; font-weight:400; font-size:.7rem; color:var(--ink-soft); letter-spacing:0}

.reqs{display:flex; flex-direction:column; border-top:1px solid var(--rule-strong)}
.req{
  display:grid; grid-template-columns:1fr auto; gap:2px 16px; align-items:start;
  padding:10px 0 11px; border-bottom:1px solid var(--rule); position:relative;
}
.req-name{font-weight:700; font-size:.9rem; letter-spacing:.01em; line-height:1.35}
.req-quote{
  grid-column:1; position:relative; display:inline-block; margin-top:3px;
  font-style:italic; font-size:.84rem; line-height:1.45; color:var(--ink-soft);
  max-width:52ch; justify-self:start;
}
.req .stamp{grid-column:2; grid-row:1 / span 2; align-self:start; margin-top:2px}
.req.is-flagged{background:linear-gradient(90deg, rgba(167,43,30,.045), transparent 62%)}
.req.is-flagged .req-name{color:var(--red)}

.circle{position:absolute; inset:-7px -12px -8px -14px; color:var(--pencil); opacity:.8; pointer-events:none}
.circle svg{width:100%; height:100%; overflow:visible}
.circle path{stroke-dasharray:1; stroke-dashoffset:0}
.js .circle path{
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1100ms cubic-bezier(.3,.7,.2,1) .2s;
}
.circle.is-drawn path{stroke-dashoffset:0}

.sheet-foot{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.7rem; letter-spacing:.04em; color:var(--ink-soft);
}

/* stamps */
.stamp{
  --ink:var(--green); --rot:-1.6deg;
  display:inline-block; padding:5px 8px 4px;
  border:1.5px solid currentColor; border-radius:2px;
  color:var(--ink);
  font-family:var(--archivo); font-weight:800; font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase; line-height:1;
  white-space:nowrap;
  opacity:.95; transform:rotate(var(--rot));
  transition:opacity .3s ease, transform .42s cubic-bezier(.2,.9,.2,1);
}
.js .stamp:not(.is-stamped):not(.stamp-corner){opacity:0; transform:rotate(var(--rot)) scale(1.32)}
.stamp-met{--ink:var(--green)}
.stamp-part{--ink:var(--ochre); --rot:-2.2deg}
.stamp-miss{--ink:var(--red); --rot:-1.1deg}
.stamp-note{--ink:var(--ink-soft); --rot:-.8deg}
.stamp-ochre{--ink:var(--ochre)}
.is-stamped{opacity:.95; transform:rotate(var(--rot)) scale(1)}
.stamp-lg{font-size:.78rem; padding:7px 11px 6px; border-width:2px}

/* ---------- tear ---------- */
.tear{
  max-width:var(--shell); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:14px; height:44px;
}
.tear::before{
  content:""; flex:1 1 auto; height:2px;
  background-image:repeating-linear-gradient(90deg, var(--rule-strong) 0 7px, transparent 7px 15px);
}
.tear span{
  font-family:var(--archivo); font-weight:700; font-size:.7rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
}

/* ---------- section shell ---------- */
.section{padding:clamp(46px,6.4vw,86px) 0 0; scroll-margin-top:calc(var(--rail-h) + 8px)}
.shell{max-width:var(--shell); margin:0 auto; padding:0 var(--pad)}
h2{
  font-family:var(--archivo); font-weight:800;
  font-size:var(--s-h2); line-height:1.02; letter-spacing:-.022em;
  max-width:22ch; text-wrap:balance;
}
.sec-lede{max-width:56ch; margin-top:16px; color:var(--ink-soft); font-size:var(--s-lede); line-height:1.56}
.intro{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,4vw,64px); align-items:end}
.intro .sec-lede{margin-top:0; justify-self:end}

/* ---------- the page (document) ---------- */
.doc{
  margin-top:clamp(28px,3.4vw,46px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3vw,44px);
}
.doc-head{grid-column:1/-1; display:flex; justify-content:space-between; gap:18px; align-items:baseline; padding-bottom:12px; border-bottom:1px solid var(--rule-strong)}
.doc-head .typed-cap:last-child{text-align:right}
.doc-id{grid-column:1/-1; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:2px}
.doc-id strong{font-size:clamp(1.05rem, .98rem + .4vw, 1.3rem); letter-spacing:.07em; text-transform:uppercase}
.doc-id span{font-size:.82rem; color:var(--ink-soft)}

.doc-left{display:flex; flex-direction:column; gap:clamp(16px,2vw,22px); min-width:0}
.doc-facts{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; align-content:start; border-top:1px solid var(--rule-soft); margin-top:6px}
.doc-facts>div{padding:10px 0; border-bottom:1px solid var(--rule-soft)}
.doc-facts .fact{font-size:.94rem}
.doc-screen{padding-top:12px; border-top:1px solid var(--rule)}
.doc-screen p{margin-top:8px; font-size:.84rem; line-height:1.55; color:var(--ink-soft); max-width:36ch}
.doc-reqs{border-top:1px solid var(--rule-soft); margin-top:6px}
.doc-reqs .req{padding:12px 0 13px}
.doc-reqs .req-name{font-size:.92rem}
.doc-reqs .req-quote{font-size:.86rem}
.bottomline{grid-column:1/-1; margin-top:2px; padding:13px 16px 14px; background:rgba(42,33,24,.045); border-top:1px solid var(--rule-strong)}
.bottomline p{margin-top:6px; max-width:74ch; font-size:.95rem; line-height:1.55}
.doc-foot{grid-column:1/-1; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--rule); font-size:.7rem; letter-spacing:.03em; color:var(--ink-soft)}
.doc + .after{margin-top:18px; max-width:62ch; color:var(--ink-soft); font-size:.96rem}
.after strong{color:var(--ink)}

/* ---------- brief ---------- */
.brief-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(26px,4vw,64px); margin-top:clamp(28px,3.4vw,46px); align-items:start}
.route{border-top:1px solid var(--rule-strong)}
.route li{display:grid; grid-template-columns:104px minmax(0,1fr); gap:clamp(14px,2vw,26px); padding:20px 0 22px; border-bottom:1px solid var(--rule)}
.route .time{
  font-family:var(--archivo); font-weight:800; font-size:.98rem; letter-spacing:.03em;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.route h3{
  font-family:var(--typed); font-weight:700; font-size:1.02rem; letter-spacing:.01em; line-height:1.35;
}
.route p{margin-top:6px; font-size:.92rem; line-height:1.55; color:var(--ink-soft); max-width:48ch; overflow-wrap:anywhere}

.email{
  margin-top:6px; position:relative;
  background-color:var(--bond); background-image:var(--grain); background-blend-mode:multiply;
  border:1px solid var(--bond-edge); box-shadow:var(--lift);
  padding:18px 20px 20px; transform:rotate(.35deg);
}
.email-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding-bottom:10px; border-bottom:1px solid var(--rule-strong)}
.email-rows{margin:0}
.email-row{display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid var(--rule-soft)}
.email-row dt{font-family:var(--archivo); font-weight:700; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); padding-top:2px}
.email-row dd{margin:0; font-size:.84rem; line-height:1.45; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.email-body{margin-top:14px; padding-left:12px; border-left:1px solid var(--rule-strong); font-style:italic; font-size:.92rem; line-height:1.55; color:var(--ink-soft)}
.email-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 12px; margin-top:16px; padding-top:12px; border-top:1px solid var(--rule)}
.email-out{flex:1 1 auto; font-family:var(--archivo); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-align:right; line-height:1.5}

.brief-note{margin-top:clamp(22px,3vw,34px); max-width:none; border-top:1px solid var(--rule-strong); padding-top:16px; font-size:.96rem; color:var(--ink-soft)}
.brief-note span{display:block; max-width:56ch}
.brief-note b{color:var(--ink); font-weight:700}

/* ---------- cost ---------- */
.cost-note{margin-top:18px; max-width:64ch; font-size:.92rem; line-height:1.55; color:var(--ink-soft)}
.cost-note b{color:var(--ink)}

/* ---------- memo / questions ---------- */
.qa{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.6vw,56px); margin-top:clamp(28px,3.4vw,46px); align-items:start}
.q-index{display:flex; flex-direction:column; border-top:1px solid var(--rule-strong)}
.q-btn{
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:baseline;
  padding:13px 0 12px; background:none; border:0; border-bottom:1px solid var(--rule);
  text-align:left; cursor:pointer; color:var(--ink-soft);
  font-family:var(--typed); font-size:.96rem; line-height:1.4;
  transition:color .16s ease, padding-left .18s ease;
}
.q-btn .qn{font-family:var(--archivo); font-weight:700; font-size:.7rem; letter-spacing:.12em; color:var(--ink-soft)}
.q-btn:hover{color:var(--ink); padding-left:4px}
.q-btn[aria-selected="true"]{color:var(--ink)}
.q-btn[aria-selected="true"] .qn{color:var(--red)}
.q-btn[aria-selected="true"] .qt{
  text-decoration:underline; text-decoration-color:var(--pencil); text-decoration-thickness:1.5px;
  text-underline-offset:5px;
}
.answer-sheet{
  background-color:var(--bond); background-image:var(--grain); background-blend-mode:multiply;
  border:1px solid var(--bond-edge); box-shadow:var(--lift);
  padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,38px) clamp(20px,2.4vw,28px);
  min-height:clamp(250px,26vw,310px);
  display:flex; flex-direction:column;
}
.answer-sheet .qn-top{display:flex; justify-content:space-between; gap:14px; padding-bottom:10px; border-bottom:1px solid var(--rule); margin-bottom:16px}
.answer-sheet h3{font-size:1.14rem; line-height:1.35; letter-spacing:.01em; font-weight:700; max-width:30ch}
.answer-sheet p{margin-top:10px; font-size:.94rem; line-height:1.6; max-width:56ch}
.answer-sheet p + p{color:var(--ink-soft)}
.answer-sheet [role="tabpanel"][hidden]{display:none}
.answer-sheet .answer-ask{margin-top:auto; padding-top:16px; border-top:1px solid var(--rule); font-size:.82rem; color:var(--ink-soft); max-width:none}
.answer-sheet .answer-ask a{color:var(--ink)}

/* ---------- envelope ---------- */
.close{padding-top:clamp(46px,6.4vw,86px)}
.env{
  position:relative; max-width:var(--shell); margin:0 auto;
  padding:clamp(28px,4vw,54px) var(--pad) clamp(30px,4vw,52px);
}
.env-card{
  position:relative; background:var(--manila-deep);
  background-image:var(--grain); background-blend-mode:multiply;
  border:1px solid var(--manila-edge);
  box-shadow:0 2px 3px rgba(28,24,18,.18), 0 30px 60px -30px rgba(28,24,18,.55);
  padding:clamp(26px,4vw,52px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,56px); align-items:start;
}
.env-flap{display:none}
.env-copy h2{max-width:18ch}
.env-copy p{margin-top:16px; max-width:44ch; font-size:.98rem; line-height:1.58}
.env-actions{margin-top:clamp(22px,3vw,30px); display:flex; flex-wrap:wrap; align-items:center; gap:18px}
.env-actions .alt{margin-top:0}
.env-note{grid-column:1/-1; margin-top:6px; padding-top:12px; border-top:1px solid var(--rule); font-size:.76rem; letter-spacing:.02em; color:var(--ink-soft)}
.env-side{display:flex; flex-direction:column; gap:18px; align-items:flex-start; justify-self:end; align-self:stretch; justify-content:space-between}
.postage{
  position:relative; width:132px; padding:12px 10px 11px; text-align:center;
  background:var(--bond); color:var(--red); border:1px solid var(--red);
  box-shadow:var(--lift-sm); transform:rotate(2.4deg); opacity:1;
}
.postage::before,.postage::after{
  content:""; position:absolute; left:0; right:0; height:5px;
  background:radial-gradient(circle at 5px 3px, var(--bond) 2.5px, transparent 3px) 0 0/10px 5px repeat-x;
}
.postage::before{top:-1px; background-color:var(--red); border:0}
.postage::after{bottom:-1px; background-color:var(--red)}
.postage b{display:block; font-family:var(--archivo); font-weight:800; font-size:.82rem; letter-spacing:.08em; line-height:1.15; text-transform:uppercase}
.postage span{display:block; margin-top:5px; font-family:var(--typed); font-size:.7rem; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase}
.env-meta{border-top:1px solid var(--rule-strong); padding-top:10px; width:100%; max-width:280px; margin-left:auto}
.env-meta p{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dotted var(--rule); font-size:.74rem; color:var(--ink-soft)}
.env-meta p b{font-family:var(--archivo); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.env-meta p span{font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
.file-foot{
  max-width:var(--shell); margin:clamp(34px,5vw,64px) auto 0;
  padding:18px var(--pad) clamp(30px,4vw,48px);
  border-top:1px solid var(--rule-strong);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.78rem; line-height:1.6; color:var(--ink-soft);
}
.file-foot a{text-decoration:underline; text-underline-offset:.2em}

/* ---------- legal page ---------- */
.rail-back{
  order:2;
  margin-left:auto; padding:18px 0 13px;
  font-family:var(--archivo); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  text-decoration:none;
}
.rail-back:hover{color:var(--ink)}

.legal,.doc-page{max-width:920px; margin:0 auto; padding:0 var(--pad)}
.legal .paper,.doc-page .paper{
  margin-top:clamp(26px,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,4vw,54px) clamp(22px,4.4vw,58px) clamp(28px,4vw,52px)
}
.paper-head{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--rule-strong);
}
.paper h1{
  margin-top:clamp(22px,3vw,34px);
  font-family:var(--archivo); font-weight:800;
  font-size:clamp(1.9rem, 1.15rem + 2.4vw, 3.1rem); line-height:.98; letter-spacing:-.025em;
  max-width:20ch; text-wrap:balance;
}
.paper .paper-lede{margin-top:18px; max-width:62ch; font-size:1.04rem; line-height:1.6; color:var(--ink-soft)}
.paper h2{
  margin-top:clamp(34px,4.2vw,48px); padding-top:16px; border-top:1px solid var(--rule);
  font-family:var(--archivo); font-weight:800; font-size:clamp(1.12rem, 1rem + .45vw, 1.34rem);
  line-height:1.2; letter-spacing:-.01em; max-width:30ch;
}
.paper p{margin-top:12px; font-size:1rem; line-height:1.62; color:var(--ink-soft); max-width:66ch}
.paper p strong,.paper li strong{color:var(--ink); font-weight:700}
.paper ul{margin-top:12px; display:grid; gap:9px; max-width:66ch}
.paper ul li{position:relative; padding-left:18px; font-size:1rem; line-height:1.55; color:var(--ink-soft)}
.paper ul li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border:1px solid var(--rule-strong)}
.paper a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; color:var(--ink)}

.proc-table{width:100%; margin-top:16px; border-collapse:collapse; text-align:left}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.proc-table thead th{
  padding:10px 22px 9px 0; border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
  font-family:var(--archivo); font-weight:700; font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft); vertical-align:bottom;
}
.proc-table thead th:last-child{padding-right:0}
.proc-table tbody th{
  padding:12px 22px 13px 0; border-bottom:1px solid var(--rule); vertical-align:top;
  font-family:var(--typed); font-weight:700; font-size:.96rem; letter-spacing:.01em; color:var(--ink);
  width:32%;
}
.proc-table td{
  padding:12px 22px 13px 0; border-bottom:1px solid var(--rule); vertical-align:top;
  font-size:.94rem; line-height:1.5; color:var(--ink-soft);
}
.proc-table td:last-child{padding-right:0; white-space:nowrap; font-variant-numeric:tabular-nums}
.proc-table tbody tr:last-child th,.proc-table tbody tr:last-child td{border-bottom:0}
.td-label{display:none}
.legal .note-block,.doc-page .note-block{
  margin-top:22px; padding:16px 18px; border-top:1px solid var(--rule-strong);
  background:rgba(42,33,24,.045);
}
.legal .note-block p,.doc-page .note-block p{margin-top:6px; font-size:.96rem; max-width:64ch}
.legal .paper-foot,.doc-page .paper-foot{
  margin-top:clamp(30px,4vw,44px); padding-top:14px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.7rem; color:var(--ink-soft);
}
.legal-back{margin-top:26px; display:flex; flex-wrap:wrap; gap:16px; font-size:.92rem; color:var(--ink-soft)}
.legal-back a{color:var(--ink)}

/* welcome + checkout states */
.checkout-status{
  margin-top:22px; padding:16px 18px; border-top:1px solid var(--rule-strong);
  background:rgba(42,33,24,.045); font-size:.98rem; color:var(--ink);
}
.welcome-action{margin-top:26px}
.paper a.slip,.doc-page a.slip{color:var(--bond); text-decoration:none}
.paper a.slip:hover,.doc-page a.slip:hover{color:var(--bond)}
.welcome-note{margin-top:22px; font-size:.9rem; color:var(--ink-soft); max-width:64ch}
.welcome-note a{color:var(--ink)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .stamp{opacity:.95 !important; transform:rotate(var(--rot)) scale(1) !important}
  .circle path{stroke-dashoffset:0 !important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .opening{grid-template-columns:1fr; min-height:0}
  .fold{display:none}
  .flap{padding-bottom:clamp(20px,3vw,30px)}
  .flap h1{font-size:clamp(2.2rem, 1.4rem + 4.6vw, 3.4rem)}
  .lede{max-width:48ch}
  .flap-foot{max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:0 22px; border-top:1px solid var(--rule-strong)}
  .sheet-hero{margin:0; min-height:0; border-left:0; border-right:0}
  .intro,.brief-grid,.qa,.doc,.env-card{grid-template-columns:minmax(0,1fr)}
  .intro .sec-lede{justify-self:start}
  .doc-facts{grid-template-columns:1fr 1fr}
  .env-side{justify-self:start; align-items:flex-start; text-align:left}
  .env-meta{margin-left:0}
  .doc{margin-top:26px}
}

@media (max-width:760px){
  :root{--pad:18px; --s-body:1.04rem}
  .rail-in{flex-wrap:wrap; gap:0 12px; padding:0 16px}
  .mark{padding:12px 0 9px; order:1; flex:1 1 auto}
  .mark-sub{display:none}
  .rail-ref{order:2; padding-bottom:11px}
  .tabs{order:3; flex-basis:100%; gap:2px; padding-bottom:0; mask-image:linear-gradient(90deg, #000 88%, transparent 100%)}
  .tab{padding:9px 10px 8px; font-size:.7rem; letter-spacing:.1em}
  .flap{padding-top:clamp(24px,5vw,34px)}
  .flap-foot{grid-template-columns:1fr; gap:0}
  .sheet-hero{padding:22px 18px 24px 26px}
  .punch,.staple{display:none}
  .facts{grid-template-columns:1fr 1fr}
  .typed-meta{font-size:.7rem}
  .req{grid-template-columns:1fr auto; gap:2px 10px}
  .req-quote{font-size:.8rem}
  .doc{padding:20px 16px 24px}
  .doc-head{flex-direction:column; gap:4px}
  .doc-head .typed-cap:last-child{text-align:left}
  .doc-facts{grid-template-columns:1fr}
  .route li{grid-template-columns:78px minmax(0,1fr); gap:12px}
  .answer-sheet{min-height:0}
  .env-card{padding:22px 18px 26px}
  .env-flap::before,.env-flap::after{height:70px}
  .postage{transform:rotate(-1.6deg)}
  .file-foot{font-size:.7rem}
  .tear{height:34px; padding:0 18px}
  .proc-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .proc-table,.proc-table tbody,.proc-table tr,.proc-table th,.proc-table td{display:block; width:auto}
  .proc-table tr{padding:12px 0 13px; border-bottom:1px solid var(--rule)}
  .proc-table tbody th{padding:0 0 3px; border:0}
  .proc-table td{padding:0; border:0}
  .proc-table td:last-child{white-space:normal; margin-top:4px; font-size:.84rem}
  .td-label{display:inline; font-family:var(--archivo); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-right:6px}
  .paper{padding:22px 18px 26px}
  .rail-back{padding:12px 0 9px; font-size:.7rem}
}

@media (max-width:420px){
  .facts{grid-template-columns:1fr 1fr}
  .route li{grid-template-columns:1fr; gap:5px}
  .route .time{font-size:.9rem; letter-spacing:.05em}
  .q-btn{grid-template-columns:24px minmax(0,1fr); font-size:.9rem}
}

/* ---------- print ---------- */
@media print{
  .rail,.skip,.tear,.alt{display:none !important}
  body{background:transparent; color:var(--ink)}
  .sheet,.doc,.rate-card,.answer-sheet,.env-card{box-shadow:none; border-color:var(--rule-strong); background:transparent}
  .stamp{opacity:1 !important; transform:none !important}
  .section{padding-top:18pt; break-inside:avoid}
}