.demo{display:grid;grid-template-columns:5fr 6fr;gap:96px;align-items:start}
  @media(max-width:980px){.demo{grid-template-columns:1fr;gap:56px}}
  .see{list-style:none;margin:56px 0 0;padding:0;counter-reset:s}
  .see li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;padding:22px 0;border-top:1px solid var(--line);font:600 var(--fs-d-xs)/1.25 var(--display);letter-spacing:-.01em}
  .see li::before{content:"0" counter(s);font:500 13px/2 var(--sans);color:var(--sky);letter-spacing:.1em}
  .formcard{background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:clamp(24px,min(4vw,4.5vh),48px);position:relative;overflow:hidden}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vh,20px)}
  /* tighter fields on short screens so the submit button stays above the fold */
  .formcard .input{height:clamp(44px,6vh,52px)}
  .formcard textarea.input{height:clamp(72px,11vh,120px)}
  .fgrid .full{grid-column:1/-1}
  .msg-count{margin:6px 0 0;text-align:right}
  @media(max-width:600px){.fgrid{grid-template-columns:1fr}}
  .consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted)}
  .consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--royal)}
  .submit{width:100%;justify-content:center;height:56px;font-size:16px;position:relative}
  .submit .ck{display:none}
  .submit.done{background:var(--success);color:var(--ink)}
  .submit.done .lbl{display:none}.submit.done .ck{display:block}
  .confirm{position:absolute;inset:0;background:var(--ink-2);padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(30px);pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .confirm.in{opacity:1;transform:none;pointer-events:auto}
  .confirm ol{color:var(--muted);padding-left:20px;margin:24px 0 32px;display:grid;gap:10px}
  /* confirmation: the TPP template as its own offer, with a header, the preview and the button together */
  .confirm ol{margin-bottom:28px}
  .confirm > *{flex-shrink:0}
  .tpl-offer{border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.025);padding:20px 22px 22px}
  .tpl-offer-h .eyebrow{margin:0 0 10px;color:var(--pink)}
  .tpl-offer-h h3{margin:0;font:600 var(--fs-d-xs)/1.25 var(--display);letter-spacing:-.01em;color:var(--text)}
  .tpl-offer-h p:last-child{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
  .tpl-offer .tpp-stack.sm{height:150px;margin:16px 0;border:0}
  .tpl-offer .btn-row{margin-top:0}
  .confirm .approved{align-self:flex-start}