/* ============ PAGES-2 — bundles, regulated commerce, intake, product pages ============
   Loaded after film-warm.css. Tokens only: every colour, space and duration is a var() from
   atelier.css / film-warm.css. Layout follows the .pane / .pblock / .cs-grid cadence already
   on the site so these pages read as the same house. */

/* ---- bundles ---- */
.bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);margin-top:clamp(24px,4vh,40px);align-items:stretch}
.bundle{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,40px)}
.bundle-head{display:grid;gap:8px}
.bundle-head h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;line-height:1.1}
.bundle-who{font-size:14.5px;line-height:1.6;color:var(--ink-70)}
.bundle-parts{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0}
.bundle-parts td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-70)}
.bundle-parts td:first-child{width:58%;padding-right:12px}
.bundle-parts td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.bundle-parts tr.list td{color:var(--ink-45)}
.bundle-parts tr.bundle-price td{border-bottom:0;padding-top:14px;color:var(--ink)}
.bundle-parts tr.bundle-price b{font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;white-space:nowrap}
.bundle-parts tr.saves td{border-bottom:0;padding-top:0;color:var(--ember-ink);font-weight:500}
.bundle-why{font-size:14px;line-height:1.6;color:var(--ink-70);flex:1}
.bundle .btn{align-self:flex-start}
.bundle-hot{outline:1px solid var(--ember);outline-offset:-1px}
.bundle-hot .srow-code{color:var(--ember)}
@media(max-width:980px){.bundle-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.bundle-grid{grid-template-columns:1fr}}

/* ---- regulated commerce: the gates ---- */
.gates{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,4vh,40px)}
.gate{padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;gap:10px}
.gate b{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.015em}
.gate p{font-size:13.5px;line-height:1.55;color:var(--ink-70)}
.gate .gate-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
@media(max-width:980px){.gates{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gates{grid-template-columns:1fr}}
.boundary{margin-top:clamp(20px,3vh,32px);padding:clamp(18px,2.2vw,28px);border-left:2px solid var(--ember);background:var(--white)}
.boundary p{font-size:14.5px;line-height:1.65;color:var(--ink-70);max-width:70ch}
.boundary b{color:var(--ink)}

/* ---- intake form ---- */
.intake{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(24px,4vh,40px)}
.intake-aside{position:sticky;top:96px;display:grid;gap:18px}
.intake-aside .pane{padding:clamp(18px,2.2vw,28px)}
.intake-aside h3{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.015em;margin-bottom:8px}
.intake-aside li{font-size:13.5px;line-height:1.55;color:var(--ink-70)}
.fieldset{display:grid;gap:18px;padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);background:var(--white)}
.fieldset legend{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;padding:0 8px;color:var(--ink)}
.fieldset .hint{font-size:13px;color:var(--ink-45);line-height:1.5}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}
.choices-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:560px){.choices-wrap{grid-template-columns:1fr}}
.choice,.field .choice,.field label.choice{display:flex;gap:10px;align-items:flex-start;font-family:var(--body);font-size:14px;line-height:1.5;letter-spacing:0;text-transform:none;text-align:left;color:var(--ink-70);padding:10px 12px;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.choices-wrap>.hint{grid-column:1/-1}
.choice{justify-content:flex-start}
.choice input,.field .choice input{flex:0 0 auto;width:auto;min-width:0;min-height:0;padding:0;border:0;background:none;box-shadow:none;margin-top:3px}
.choice>span{flex:1 1 auto;text-align:left}
.choice input{margin-top:3px;accent-color:var(--cobalt)}
.choice:has(input:checked){border-color:var(--cobalt);color:var(--ink)}
.choice:has(input:focus-visible){outline:2px solid var(--cobalt);outline-offset:2px}
.hard-no{margin-top:8px;padding:clamp(16px,2vw,24px);border-left:2px solid var(--ember);background:var(--paper-2)}
.hard-no b{display:block;font-family:var(--display);font-weight:500;font-size:18px;margin-bottom:8px}
.hard-no li{font-size:13.5px;line-height:1.55;color:var(--ink-70);padding-left:14px;position:relative}
.hard-no li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--ember)}
.consent .choice{font-size:13.5px;line-height:1.55}
.form-state{display:none;padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);background:var(--white)}
.form-state[data-show]{display:block}
.form-state h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;margin-bottom:10px}
.form-state p{font-size:14.5px;line-height:1.6;color:var(--ink-70)}
@media(max-width:900px){.intake{grid-template-columns:1fr}.intake-aside{position:static}}

/* ---- product pages: the proof strip and the deliverables ---- */
.proof-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(20px,3vh,32px)}
.proof-strip .stat{padding:clamp(18px,2.2vw,28px)}
.proof-strip .stat b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ember)}
.proof-strip .stat span{font-size:13px;color:var(--ink-45);line-height:1.5}
@media(max-width:640px){.proof-strip{grid-template-columns:1fr}}
.deliverables{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(20px,3vh,32px)}
.deliverable{padding:clamp(18px,2.2vw,28px);display:grid;gap:8px}
.deliverable b{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.015em}
.deliverable p{font-size:13.5px;line-height:1.55;color:var(--ink-70)}
@media(max-width:640px){.deliverables{grid-template-columns:1fr}}
.price-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 22px;margin-top:clamp(20px,3vh,32px);padding:clamp(18px,2.2vw,28px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-line b{font-family:var(--display);font-weight:500;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-line span{font-size:13.5px;color:var(--ink-45)}

.after{margin-top:clamp(20px,3vh,32px)}

/* ---- SLA block ---- */
.sla{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(20px,3vh,32px)}
.sla .pane{padding:clamp(18px,2.2vw,28px);display:grid;gap:8px}
.sla b{font-family:var(--display);font-weight:500;font-size:18px}
.sla p{font-size:13.5px;line-height:1.55;color:var(--ink-70)}
@media(max-width:640px){.sla{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.bundle,.gate,.deliverable{transition:none}}

/* ---- media inside cards (12 Sept): same pane-bar + footage component as the services page ---- */
.bundle .practice-media,.deliverable .practice-media,.intake-aside .practice-media{margin:-1px -1px 6px;border-bottom:1px solid var(--line)}
.bundle .practice-media video,.deliverable .practice-media video,.intake-aside .practice-media video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--paper-2)}
.deliverable{padding:0;overflow:hidden}.deliverable>b,.deliverable>p{padding:0 clamp(18px,2.2vw,28px)}.deliverable>b{padding-top:14px}.deliverable>p{padding-bottom:18px}
.bundle{padding-top:0;overflow:hidden}.bundle>.bundle-head,.bundle>.bundle-who,.bundle>.bundle-parts,.bundle>.bundle-why,.bundle>.btn{margin-left:clamp(24px,3vw,40px);margin-right:clamp(24px,3vw,40px)}
.bundle>.bundle-head{margin-top:18px}.bundle>.btn{margin-bottom:clamp(24px,3vw,40px)}
.bundle>.bundle-parts{width:auto}
.cs-cols .practice-media{border:1px solid var(--line)}
.intake-aside .practice-media{border:1px solid var(--line);margin:0}

/* ---- the trace mocks (12 Sept): never clip their own screens; content sets the height ---- */
.trace-shot.ta{aspect-ratio:auto;max-height:none;height:auto;padding:clamp(16px,2vw,28px) 0}
.trace-shot.ta .ta-device{max-width:100%}