/* commerce.css — GENERATED by tools/v3_commerce.py (edit it there, never here). /pricing/, /plans/, /contact/, /thank-you/.
   Reads v3.css tokens and builds on its components (section head, engagement card, FAQ, steps). Hairlines, not boxes;
   red stays on the primary CTA and the REC dots; native scroll, nothing pinned. */

/* ------------------------------------------------------------------ inner page head */
.ph{padding-block:clamp(40px,6vw,96px) clamp(40px,5vw,72px)}
.ph-in{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6)}
.ph-label{grid-column:1/-1;display:flex;align-items:center;padding-top:var(--s-4);border-top:1px solid var(--line)}
.ph-h{grid-column:1/span 10}
.ph-side{grid-column:1/span 7;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
.ph-lede{font-size:var(--fs-lede);line-height:1.3;letter-spacing:-.01em;color:var(--fg-2);max-width:40ch;text-wrap:pretty}
.ph-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ph-meta{color:var(--fg-3)}
@media (max-width:1023px){.ph-h,.ph-side{grid-column:1/-1}}

/* ------------------------------------------------------------------ pricing index + sections */
.pr-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pr-index{display:flex;flex-wrap:wrap;column-gap:clamp(18px,2.4vw,36px);padding-block:6px}
.pr-index a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;color:var(--fg-2);transition:color var(--t-micro)}
.pr-index a span{font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--fg-3)}
@media (hover:hover){.pr-index a:hover{color:var(--fg-1)}}
.sec--pr{padding-block:clamp(72px,8vw,136px)}
.sec--pr+.sec--pr:not(.sec--paper){padding-top:0}
.sec--pr+.sec--pr:not(.sec--paper)>.wrap>.sh{padding-top:clamp(40px,4vw,64px)}
.ecards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1199px){.ecards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.ecards--4{grid-template-columns:minmax(0,1fr)}}
.dash li{position:relative;padding:6px 0 6px 18px;font-size:15px;line-height:1.45;color:var(--fg-2)}
.dash li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:1px;background:var(--fg-3)}
.grp-foot{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);margin-top:clamp(40px,5vw,72px);padding-top:var(--s-5);border-top:1px solid var(--line)}
.gf-needs{grid-column:1/span 5;display:flex;flex-direction:column;gap:var(--s-3)}
.gf-notes{grid-column:7/-1;display:flex;flex-direction:column;gap:var(--s-4);color:var(--fg-2);font-size:15px;line-height:1.55;max-width:62ch}
.gf-notes b{color:var(--fg-1);font-weight:500}
.gf-notes .tlink{font-size:15px}
.gf-needs:only-child,.gf-notes:only-child{grid-column:1/-1}
@media (max-width:1023px){.gf-needs,.gf-notes{grid-column:1/-1}}

/* ------------------------------------------------------------------ rate rows (scoped work, add-ons, care) */
.rrs{border-top:1px solid var(--line-strong)}
.rr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr);grid-template-areas:"main meta price cta" "more more more more";
  column-gap:var(--gutter);row-gap:var(--s-3);padding-block:var(--s-6) var(--s-4);border-bottom:1px solid var(--line);align-items:start}
.rr-main{grid-area:main;min-width:0}
.rr-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:12px}
.rr-h{font:500 clamp(22px,1.9vw,30px)/1.1 var(--font-display);letter-spacing:-.015em;text-wrap:balance}
.rr-sum{margin-top:10px;color:var(--fg-2);font-size:16px;line-height:1.5;max-width:52ch}
.rr-meta{grid-area:meta;display:grid;align-content:start;gap:14px;padding-top:4px;min-width:0}
.rr-meta div{display:flex;flex-direction:column;gap:4px}
.rr-meta dt,.rr-specs dt{font:500 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.rr-meta dd{font-size:15px;line-height:1.4}
.rr-price{grid-area:price;display:flex;flex-direction:column;gap:6px;min-width:0}
.rr-amt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:500 clamp(28px,2.4vw,38px)/1 var(--font-display);letter-spacing:-.02em}
.rr-from{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.rr-unit{font:400 15px/1 var(--font-text);letter-spacing:0;color:var(--fg-2);white-space:nowrap}
.rr-typ{font-size:14px;line-height:1.45;color:var(--fg-3)}
.rr-cta{grid-area:cta;justify-self:end;padding-top:2px}
.rr-more{grid-area:more}
.rr-more summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);transition:color var(--t-micro)}
.rr-more summary::-webkit-details-marker{display:none}
.rr-more summary::after{content:"";width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;transition:transform var(--t-ui) var(--ease-ui)}
.rr-more[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.rr-more summary:hover{color:var(--fg-1)}}
.rr-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-4) var(--gutter);padding:var(--s-2) 0 var(--s-4)}
.rr-inc{columns:2;column-gap:var(--gutter)}
.rr-inc li{break-inside:avoid}
.rr-specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;align-content:start;border-top:1px solid var(--line)}
.rr-specs dt,.rr-specs dd{padding:9px 0;border-bottom:1px solid var(--line)}
.rr-specs dd{font-size:14px;line-height:1.4;color:var(--fg-1)}
.rr-specs dt{padding-top:11px}
.rr-gl{margin-top:clamp(40px,4vw,64px);margin-bottom:var(--s-4)}
@media (max-width:1023px){
  .rr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"main main" "price meta" "cta cta" "more more";row-gap:var(--s-4)}
  .rr-cta{justify-self:start}.rr-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  .rr{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "price" "meta" "cta" "more"}
  .rr-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.rr-meta:empty{display:none}
  .rr-inc{columns:1}.rr-cta{width:100%}.rr-cta .btn{width:100%}
}

/* ------------------------------------------------------------------ plans: term toggle + cards */
.terms-row{margin-bottom:var(--s-7)}
.terms{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--radius-ui);max-width:100%}
.terms button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--radius-ui);font:500 15px/1 var(--font-text);color:var(--fg-2);transition:background-color var(--t-micro),color var(--t-micro)}
.terms button[aria-checked="true"]{background:var(--fg-1);color:var(--ink)}
.terms em{font:500 10.5px/1 var(--font-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
@media (hover:hover){.terms button[aria-checked="false"]:hover{color:var(--fg-1)}}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-8)}
@media (max-width:899px){.plans-grid{grid-template-columns:minmax(0,1fr)}}
.plan{display:flex;flex-direction:column;gap:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line-strong);min-width:0}
.plan.is-pick{border-top-color:var(--fg-1)}
.plan-k{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px}
.plan-h{margin-top:var(--s-3)}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:500 clamp(40px,3.6vw,56px)/1 var(--font-display);letter-spacing:-.03em}
.plan-per{font:400 16px/1 var(--font-text);letter-spacing:0;color:var(--fg-2)}
.plan-note{font-size:14px;line-height:1.45;color:var(--fg-3);min-height:2.9em}
.plan-out{font-size:16px;line-height:1.5}
.plan-pitch{color:var(--fg-2);font-size:16px;line-height:1.5}
.plan-cta{margin-top:auto;padding-top:var(--s-3)}
.plan-cta .btn{width:100%}
.plans-more{margin-top:var(--s-7)}
.plans-rules{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--fg-3)}

/* ------------------------------------------------------------------ studio partner */
.partner{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--fg-1)}
.partner-p{grid-column:1/span 4;display:flex;flex-direction:column;gap:8px}
.partner-i{grid-column:5/span 5;display:flex;flex-direction:column;gap:var(--s-3)}
.partner-c{grid-column:10/-1;justify-self:end}
@media (max-width:1023px){.partner-p,.partner-i{grid-column:1/-1}.partner-c{grid-column:1/-1;justify-self:start}}

/* ------------------------------------------------------------------ how payment works (the paper band) */
.pay-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-7)}
.pay-col{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--paper-line)}
.pay-col h3{font:500 clamp(22px,1.8vw,28px)/1.15 var(--font-display);letter-spacing:-.015em}
.pay-col p{color:var(--paper-2);font-size:16px;line-height:1.55;max-width:44ch}
.sec--paper .dash li{color:var(--paper-2)}
.sec--paper .dash li::before{background:var(--paper-3)}
.phases{margin-top:var(--s-2);border-top:1px solid var(--paper-line)}
.phases li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding:11px 0;border-bottom:1px solid var(--paper-line);font-size:15px;line-height:1.4}
.phases li span{font:500 11px/1.7 var(--font-mono);letter-spacing:.08em;color:var(--paper-3)}
.pay-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:clamp(40px,5vw,72px);padding-top:var(--s-4);border-top:1px solid var(--paper-line);font-size:15px;color:var(--paper-2)}
.sec--paper .tl{text-decoration-color:var(--paper-line)}
@media (max-width:1023px){.pay-cols{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ always included */
.incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-7)}
.incl-col{display:flex;flex-direction:column;gap:var(--s-4)}
.incl-list{border-top:1px solid var(--line)}
.incl-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.45}
.incl-list li span{font:500 11px/1.9 var(--font-mono);letter-spacing:.08em;color:var(--fg-3)}
.incl-list--paper{columns:2;column-gap:var(--gutter);border-top:0}
.incl-list--paper li{break-inside:avoid;border-bottom-color:var(--paper-line);border-top:1px solid var(--paper-line);margin-top:-1px}
.incl-list--paper li span{color:var(--paper-3)}
@media (max-width:767px){.incl{grid-template-columns:minmax(0,1fr)}.incl-list--paper{columns:1}}

/* ------------------------------------------------------------------ DN Assist band */
.assist{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);align-items:end;padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.assist-l{grid-column:1/span 6;display:flex;flex-direction:column;gap:var(--s-5)}
.assist-r{grid-column:8/-1;display:flex;flex-direction:column;gap:var(--s-4)}
.assist-r p{color:var(--fg-2);font-size:16px;line-height:1.5;max-width:46ch}
.assist-q{display:flex;flex-wrap:wrap;gap:8px}
.assist-q .btn{white-space:normal;text-align:left;line-height:1.25;padding-block:8px}
@media (max-width:1023px){.assist-l,.assist-r{grid-column:1/-1}}

/* ------------------------------------------------------------------ contact */
.ct-sec{padding-top:clamp(40px,6vw,96px)}
.ct{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-9)}
.ct-main{grid-column:1/span 7;min-width:0}
.ct-side{grid-column:9/-1;display:flex;flex-direction:column;gap:var(--s-7);min-width:0;padding-top:calc(var(--s-4) + 1.2em)}
@media (max-width:1023px){.ct-main,.ct-side{grid-column:1/-1}.ct-side{padding-top:0}}
.ct-h{margin-top:var(--s-6)}
.ct-lede{margin-top:var(--s-5);font-size:var(--fs-lede);line-height:1.3;letter-spacing:-.01em;color:var(--fg-2);max-width:36ch}
.pb-about{margin-top:var(--s-6);padding:12px 16px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--radius-ui);font-size:15px;color:var(--fg-2);width:fit-content;max-width:100%}
.pb-about b{color:var(--fg-1);font-weight:500}
.pb{margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:var(--s-6)}
.pb-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--gutter)}
@media (max-width:599px){.pb-row{grid-template-columns:minmax(0,1fr)}}
.pb-files{display:flex;flex-direction:column;gap:10px}
.pb-hint{font-size:14px;line-height:1.45;color:var(--fg-3)}
.pb-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-top:var(--s-2)}
.pb .msg:empty{display:none}
.pb .msg{color:var(--red-text);font-size:15px;line-height:1.45}
.pb .msg a{text-decoration:underline;text-underline-offset:.2em}
.pb .if-other{display:none}
.pb:has(input[name="intent"]:not([value="project"]):checked) .pb-proj{display:none}
.pb:has(input[name="intent"]:not([value="project"]):checked) .if-proj{display:none}
.pb:has(input[name="intent"]:not([value="project"]):checked) .if-other{display:inline}
.pb .done{display:flex;flex-direction:column;gap:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--fg-1)}
.pb .done[hidden]{display:none}
.ct-blk{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.ct-blk h2{font:500 clamp(22px,1.8vw,28px)/1.15 var(--font-display);letter-spacing:-.015em}
.ct-blk p:not(.label){color:var(--fg-2);font-size:16px;line-height:1.5}
.ct-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.ct-mail{font:500 clamp(20px,1.6vw,26px)/1.2 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere;max-width:100%}
.ct-steps{width:100%;border-top:1px solid var(--line)}
.ct-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--fg-2)}
.ct-steps li span{font:500 11px/1.8 var(--font-mono);letter-spacing:.08em;color:var(--fg-3)}

/* ------------------------------------------------------------------ thank you */
.ty-sec{padding-top:clamp(40px,6vw,96px)}
.ty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-6)}
.ty .ph-label{width:100%}
.ty-lede{font-size:var(--fs-lede);line-height:1.3;color:var(--fg-2);max-width:36ch}
.ty-steps{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);margin-top:var(--s-6)}
.ty-step{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line-strong)}
.ty-step p{font:500 clamp(20px,1.6vw,24px)/1.25 var(--font-display);letter-spacing:-.01em;max-width:28ch}
@media (max-width:899px){.ty-steps{grid-template-columns:minmax(0,1fr)}}
.ty-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:var(--s-4)}
.ty-more{font-size:15px;line-height:1.6;color:var(--fg-3);max-width:64ch}
.ty-more .btn{margin-left:8px;vertical-align:middle;min-height:40px}
.pay-note{padding:16px 18px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--radius-ui);max-width:64ch;color:var(--fg-2);font-size:16px;line-height:1.5}
.pay-note b{color:var(--fg-1);font-weight:500}