/* The application form. One question a screen, because four short screens are
   answered and one long form is abandoned. Everything below reuses the site's
   tokens — no new colour, no new type ramp.

   No style="" anywhere: the origin sends style-src 'self' with no
   'unsafe-inline', so an inline attribute would be dropped before it applied. */

.ap{padding:var(--space-13) 0 var(--space-15)}
.ap-wrap{max-width:720px}
.ap-head{text-align:center;margin-bottom:var(--space-11)}
.ap-head .ep-eyebrow{display:block;max-width:none;margin:0 auto var(--space-6)}
.ap-head h1{margin-inline:auto;max-width:16ch}
.ap-lede{margin:var(--space-6) auto 0;max-width:46ch;color:var(--text-secondary)}

/* Progress. Four segments, filled as they are answered. */
.ap-prog{list-style:none;display:flex;gap:var(--space-4);margin:0 0 var(--space-5);padding:0}
.ap-prog li{flex:1;height:2px;border-radius:2px;background:var(--border-default);transition:background var(--dur-base) var(--ease-standard)}
.ap-prog li.on{background:var(--action)}
.ap-count{font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-secondary);margin-bottom:var(--space-8)}

/* One fieldset visible at a time. Hidden ones leave the flow entirely so the
   card cannot inherit the height of the longest question. */
.ap-form{border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card);padding:var(--space-11) var(--space-10);box-shadow:var(--shadow-md)}
.ap-s{display:none;border:0;margin:0;padding:0;min-inline-size:0}
.ap-s.is-on{display:block}
.ap-q{font-family:var(--font-heading);font-size:var(--size-h2);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);padding:0;margin-bottom:var(--space-9);max-width:24ch}

.ap-fields{display:flex;flex-direction:column;gap:var(--space-7)}
.ap-f{display:block}
.ap-f span{display:block;font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-secondary);margin-bottom:var(--space-4)}
.ap-f input{width:100%;height:var(--control-h-lg);padding:0 var(--space-6);font-family:var(--font-sans);font-size:var(--size-body);color:var(--text-primary);background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:var(--transition-color)}
.ap-f input:hover{border-color:var(--border-strong)}
.ap-f input:focus{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:2px;border-color:transparent}

/* Options are the whole row, so the tap target is the answer rather than a
   12px circle beside it. */
.ap-opts{display:flex;flex-direction:column;gap:var(--space-5)}
.opt{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-7);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card);cursor:pointer;font-size:var(--size-body);transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.opt:hover{border-color:var(--border-strong);background:var(--surface-sunken)}
.opt input{appearance:none;width:20px;height:20px;flex:none;margin:0;border:1px solid var(--border-strong);background:var(--surface-card);transition:var(--transition-color)}
.opt input[type="radio"]{border-radius:50%}
.opt input[type="checkbox"]{border-radius:var(--radius-sm)}
.opt input:checked{border-color:var(--action);border-width:6px}
.opt input[type="checkbox"]:checked{background:var(--action);border-width:1px}
.opt input:focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:3px}
.opt:has(input:checked){border-color:var(--action);background:color-mix(in oklab, var(--action) 6%, var(--paper))}

.ap-err{margin-top:var(--space-6);font-size:var(--size-small);color:var(--status-losing);min-height:1.4em}
.ap-nav{display:flex;gap:var(--space-5);margin-top:var(--space-9)}
.ap-nav [data-next]{margin-left:auto}

/* The hand-off. */
.ap-done{margin-top:var(--space-11);text-align:center}
.ap-done h2{margin:var(--space-5) auto var(--space-9);max-width:18ch}
.ap-done .ep-eyebrow{display:block;max-width:none}
.ap-done .tls-btn-row{justify-content:center;margin-top:var(--space-9)}
.ap-sum{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5) var(--space-8);text-align:left;max-width:520px;margin:0 auto;padding:var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-sunken)}
.ap-sum dt{font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-secondary);padding-top:.25em}
.ap-sum dd{margin:0;font-size:var(--size-small);color:var(--text-primary)}
.ap-fine{margin:var(--space-8) auto 0;max-width:44ch;font-size:var(--size-caption);color:var(--text-secondary)}

@media (max-width:640px){
  .ap{padding:var(--space-11) 0 var(--space-13)}
  .ap-form{padding:var(--space-8) var(--space-7)}
  .ap-q{font-size:var(--size-h3)}
  .ap-nav{flex-direction:column-reverse}
  .ap-nav .tls-btn{width:100%}
  .ap-nav [data-next]{margin-left:0}
  .ap-sum{grid-template-columns:1fr;gap:var(--space-2) 0}
  .ap-sum dd{margin-bottom:var(--space-5)}
}

/* The bait field. Off-screen rather than display:none, because some bots skip
   anything that is not rendered — and hidden from assistive tech, which must
   never be asked to fill it. */
.ap-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ap-said{margin:0 auto var(--space-9);max-width:50ch;color:var(--text-secondary)}

/* Wide screens: the ask stays in view on the left while the questions run down
   the right. A single centred card leaves the visitor wondering how much is
   left and what they are filling this in for; the context and the progress
   should both be permanent. */
@media (min-width:900px){
  .ap-wrap{max-width:1060px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.1fr);gap:var(--space-7) var(--space-13);align-items:start}
  .ap-head{grid-column:1;grid-row:1 / span 4;position:sticky;top:116px;text-align:left;margin:0}
  .ap-head .ep-eyebrow,.ap-head h1,.ap-lede{margin-inline:0}
  .ap-head h1{max-width:11ch}
  .ap-prog{grid-column:2;grid-row:1;margin-bottom:0}
  .ap-count{grid-column:2;grid-row:2;margin-bottom:var(--space-6)}
  .ap-form{grid-column:2;grid-row:3}
  .ap-done{grid-column:2;grid-row:4;margin-top:0;text-align:left}
  .ap-done h2,.ap-said,.ap-sum,.ap-fine{margin-inline:0}
  .ap-done .tls-btn-row{justify-content:flex-start}
}

/* The eyebrow above "4 questions." went with the rest of them; the rule that
   replaced them site-wide comes with it, so the form opens the same way every
   section of the marketing page does. */
.ap-head::before{content:"";display:block;width:38px;height:3px;border-radius:2px;
  background:linear-gradient(90deg, var(--pine-500) 0 26px, transparent 26px 30px, var(--action) 30px 38px);
  margin-bottom:var(--space-7)}