/* /become-a-dealer, "split screen" (the prototype's look E, docs/prototype-2026-10-22-become-a-dealer.md): the pitch on the planet behind a liquid glass panel (left,
   sticky from 1024px) with the timeline whose first node fills as the form does, the form on white (right) on bare rules. The body
   class page-apply, the form's apply- classes and the sent pane are /build-a-website's too (want-a-website.css places them).
   Never restyles a shell class; every class is apply-. */

@layer site {
  .page-apply { --apply-orange: #ec6c00; --apply-side: max(16px, calc((100vw - var(--max)) / 2 + 16px)); }

  /* ---------- the two panes ---------- */
  .apply { display: grid; grid-template-columns: 45fr 55fr; align-items: start; margin-top: -12px;
    background: linear-gradient(90deg, #000 45%, var(--white) 45%); }

  .apply-pitch { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; background: var(--ink); color: var(--white); isolation: isolate; }
  .apply-pic { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000; }
  /* the photo laid much larger than the pane, the planet low and to the right, half off the edge; the words sit on its dark side */
  .apply-pic img { position: absolute; width: 1700px; max-width: none; height: auto; left: calc(92% - 870px); top: calc(74% - 430px); }
  .apply-pic::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .7) 40%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .1) 100%); }

  .apply-pitch__in { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 48px 48px 40px var(--apply-side); }
  /* the liquid glass: a frosted panel behind the heading and the timeline, the planet's rings refracted
     through it; the glass is the blur, a thin bright rim lit from the top left, a specular wash and a deep soft shadow */
  .apply-glass { display: flex; flex-direction: column; gap: 14px; }
  .apply-glass { position: relative; margin: -8px 0 0 -24px; padding: 26px 28px 26px 24px; border-radius: 24px; isolation: isolate;
    background: linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .09) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(1.06); backdrop-filter: blur(18px) saturate(1.8) brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 1px 0 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .05),
      0 30px 70px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35); }
  .apply-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: radial-gradient(120% 70% at 8% 0%, rgba(255, 255, 255, .2), transparent 55%), radial-gradient(70% 50% at 100% 100%, rgba(236, 108, 0, .12), transparent 60%); }
  .apply-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
    background: conic-gradient(from 210deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 28%, rgba(255, 255, 255, .38) 52%, rgba(255, 255, 255, .06) 76%, rgba(255, 255, 255, .55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  .apply-glass .apply-tl__node { background: rgba(0, 0, 0, .25); }
  /* with the glass, the planet rides up so its rings pass behind the panel, and the dark wash eases so there is light to refract */
  .page-apply .apply-pic img { left: calc(100% - 1060px); top: calc(100% - 680px); }
  .page-apply .apply-pic::after {
    background: linear-gradient(160deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .1) 100%); }
  .apply-pitch h1 { font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -.03em; color: var(--white); }
  .apply-pitch__sub { font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .78); max-width: 34ch; }

  .apply-who { margin-top: auto; display: grid; gap: 4px; font-size: 12.5px; line-height: 18px; color: rgba(255, 255, 255, .6); max-width: 46ch; }
  .apply-who h2 { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .78); letter-spacing: 0; }
  .apply-who a { color: rgba(255, 255, 255, .85); text-underline-offset: 3px; }
  .apply-who a:hover { color: var(--white); }
  .apply-who a:focus-visible, .apply-sub:focus-visible { outline-color: var(--white); }

  /* ---------- the timeline ---------- */
  .apply-tl { display: grid; gap: 0; margin-top: 22px; }
  .apply-tl__step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
  .apply-tl__step:last-child { padding-bottom: 0; }
  /* the thin rule from one node to the next */
  .apply-tl__step:not(:last-child)::before { content: ""; position: absolute; left: 17.5px; top: 45px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, .25); }
  .apply-tl__node { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); }
  .apply-tl__num { font: 500 12px/1 var(--mono); color: rgba(255, 255, 255, .7); }
  .apply-tl__text { display: grid; gap: 2px; padding-top: 2px; }
  .apply-tl__when { font: 600 12.5px/16px var(--mono); color: var(--apply-orange); }
  .apply-tl__what { font-size: 14.5px; line-height: 21px; color: var(--white); }

  /* the first node: the fill meter */
  .apply-tl__step--now .apply-tl__node { border-color: transparent; transition: background .2s; }
  .apply-ring { position: absolute; inset: -1px; width: 38px; height: 38px; transform: rotate(-90deg); overflow: visible; }
  .apply-ring circle { fill: none; stroke-width: 2; }
  .apply-ring__track { stroke: rgba(255, 255, 255, .25); }
  .apply-ring__fill { stroke: var(--apply-orange); stroke-dasharray: 100 100; stroke-linecap: butt; transition: stroke-dashoffset .35s ease, stroke .2s; }
  .apply-tl__step--now .apply-tl__num { color: var(--white); }
  .apply-tl__check { display: none; }
  .apply-tl__step--now.is-ready .apply-tl__node { background: var(--accent); }
  .apply-tl__step--now.is-ready .apply-ring__fill { stroke: #6fd39b; }
  .apply-tl__step--now.is-ready .apply-tl__num { display: none; }
  .apply-tl__step--now.is-ready .apply-tl__check { display: block; color: var(--white); }
  .apply-tl__step--now.is-full .apply-ring__fill { stroke: var(--white); }

  /* one orange comet round the ring when the last field fills, once; nothing shows under reduced motion */
  .apply-comet { position: absolute; left: 0; top: 0; width: 12px; height: 4px; border-radius: 2px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(236, 108, 0, 0), var(--apply-orange) 70%, #ffd1a6);
    offset-path: path('M 17 -1 A 18 18 0 1 1 16.99 -1'); offset-distance: 0%; offset-rotate: auto; }
  .apply-comet.is-lap { animation: apply-lap 1.1s cubic-bezier(.45, .05, .35, 1) 1; }
  @keyframes apply-lap {
    0% { offset-distance: 0%; opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }

  .apply-tl__live { margin-top: 6px; font: 500 12px/16px var(--mono); color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
  .is-ready .apply-tl__live { color: #8fe0b2; }
  .apply-subs { display: grid; gap: 2px; margin-top: 8px; }
  .apply-sub { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; max-width: 260px; padding: 4px 8px 4px 6px; margin-left: -6px;
    border-radius: var(--r); color: rgba(255, 255, 255, .55); text-decoration: none; font-size: 13px; line-height: 18px; transition: background .15s, color .15s; }
  .apply-sub i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); }
  .apply-sub small { font-size: 11.5px; color: rgba(255, 255, 255, .45); }
  .apply-sub:hover { color: var(--white); }
  .apply-sub.is-done i { background: var(--accent); border-color: var(--accent); }
  .apply-sub.is-current { background: rgba(255, 255, 255, .1); color: var(--white); }
  .apply-sub.is-current i { border-color: var(--apply-orange); box-shadow: 0 0 0 3px rgba(236, 108, 0, .25); }
  .apply-sub.is-current.is-done i { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 158, 90, .3); }
  .apply-sub.is-current small { color: rgba(255, 255, 255, .8); }

  /* ---------- the form pane ---------- */
  .apply-pane { background: var(--white); min-width: 0; }
  .apply-pane__in { max-width: 640px; padding: 40px; }
  .apply-fine { display: grid; gap: 8px; font-size: 13.5px; line-height: 20px; color: var(--steel); padding-bottom: 24px; border-bottom: 1px solid var(--dove); }

  .apply-form { display: grid; gap: 0; }
  .apply-sec { border: 0; margin: 0; padding: 28px 0 4px; min-width: 0; display: grid; gap: 18px; }
  .apply-sec__head { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 2px; float: left; width: 100%;
    font: 600 13px/16px var(--sans); color: var(--ink); transition: color .15s; }
  .apply-sec__head::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--apply-orange); }
  .apply-sec.is-current .apply-sec__head { color: var(--ink); }
  .apply-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }

  .apply-field { display: grid; gap: 2px; min-width: 0; }
  .apply-field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--steel); }
  .apply-field:focus-within .apply-field__label { color: var(--ink); }
  .apply-req { font: 500 10.5px/16px var(--mono); font-style: normal; color: var(--fog); }
  .apply-input { display: block; width: 100%; min-width: 0; height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--dove); border-radius: 0;
    background: transparent; font-size: 16px; line-height: 24px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
  .apply-input::placeholder { color: #b5b5b5; }
  :root[data-parts-theme="dark"] .apply-input::placeholder { color: #8f877e; }
  .apply-input:hover { border-bottom-color: var(--fog); }
  .apply-input:focus, .apply-input:focus-visible { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
  .apply-input[aria-invalid="true"] { border-bottom-color: var(--red); box-shadow: 0 1px 0 var(--red); }
  .apply-input--area { height: auto; min-height: 76px; padding: 10px 0; resize: vertical; field-sizing: content; max-height: 260px; }
  .apply-input--select { appearance: none; padding-right: 24px; cursor: pointer;
    background: var(--chevron) no-repeat right 4px center; }
  .apply-hint { font-size: 12px; line-height: 16px; color: var(--fog); margin-top: 4px; }
  .apply-country { display: flex; align-items: center; height: 44px; font-size: 16px; color: var(--steel); border-bottom: 1px dashed var(--dove); }

  /* business type: a row of pill radios */
  .apply-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
  .apply-pill { position: relative; }
  .apply-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .apply-pill span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--sand); font-size: 13px; cursor: pointer; transition: background .12s, color .12s; }
  .apply-pill:hover span { background: var(--sand-2); }
  .apply-pill input:checked + span { background: var(--ink); color: var(--white); }
  .apply-pill input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* Turnstile's check above Submit: the widget's own height held before it loads, so nothing under it moves (no line height, or
     the widget's frame would sit on a text line 6px taller than itself) */
  .apply-check { display: grid; min-height: 65px; margin-top: 28px; line-height: 0; }
  .apply-check__off { align-self: center; font-size: 13.5px; line-height: 20px; color: var(--ink); }
  .apply-check + .apply-submit { margin-top: 16px; }
  .apply-note { margin-top: 24px; padding: 10px 12px; border-left: 3px solid var(--red); background: var(--red-bg); color: var(--red); font-size: 13.5px; line-height: 20px; }
  .apply-note:focus { outline: none; }  /* the refused page opens on its note (autofocus), which is no control */
  .apply-submit { margin-top: 28px; }
  /* Submit pressed (js/apply-send.js): a ring turns beside Sending, the fields fade back and take no more clicks */
  .apply-form.is-sending { pointer-events: none; }
  .apply-form.is-sending :is(fieldset, .apply-check) { opacity: .45; transition: opacity .25s ease; }
  .apply-form.is-sending .apply-submit::before { content: ""; width: 16px; height: 16px; margin-right: 4px; border: 2px solid currentColor;
    border-right-color: transparent; border-radius: 50%; animation: apply-spin .7s linear infinite; }
  @keyframes apply-spin { to { transform: rotate(360deg); } }
  .apply-privacy { margin-top: 10px; font-size: 12.5px; color: var(--fog); }
  .apply-already { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dove); font-size: 13.5px; color: var(--steel); }

  /* the honeypot: off-screen, never display:none */
  .apply-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

  /* ---------- sent: the dark pane alone ---------- */
  .apply-sent { position: relative; margin-top: -12px; min-height: 560px; overflow: hidden; background: var(--ink); color: var(--white); isolation: isolate; display: grid; align-items: center; }
  .apply-sent .apply-pic img { left: calc(78% - 870px); top: calc(50% - 470px); }
  .apply-sent .apply-pic::after { background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .25) 100%); }
  .apply-sent__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px var(--apply-side); }
  .apply-sent__text { display: grid; gap: 14px; justify-items: start; max-width: 540px; }
  .apply-sent h1 { font-size: 44px; line-height: 48px; font-weight: 500; letter-spacing: -.03em; color: var(--white); }
  .apply-sent__body { font-size: 17px; line-height: 26px; color: var(--white); }
  .apply-sent__next { font-size: 14.5px; line-height: 22px; color: rgba(255, 255, 255, .7); }
  /* the thank-you pane arrives: its words rise in one after the other, then the timeline, after the page's cross-fade (below) */
  .apply-sent__text > *, .apply-sent .apply-tl { animation: apply-arrive .55s cubic-bezier(.2, .7, .3, 1) both; }
  .apply-sent__text > :nth-child(1) { animation-delay: .2s; }
  .apply-sent__text > :nth-child(2) { animation-delay: .3s; }
  .apply-sent__text > :nth-child(3) { animation-delay: .4s; }
  .apply-sent__text > :nth-child(4) { animation-delay: .5s; }
  .apply-sent .apply-tl { animation-delay: .45s; }
  @keyframes apply-arrive { from { opacity: 0; transform: translateY(14px); } }
  .apply-sent__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
  .apply-ghost { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--r);
    color: var(--white); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
  .apply-ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); }
  .apply-ghost:focus-visible { outline-color: var(--white); }
  .apply-sent .apply-tl { margin-top: 0; padding: 24px; border-radius: 8px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(2px); }

  /* ---------- under 1024px the panes stack ---------- */
  @media (max-width: 1023.98px) {
    .apply { grid-template-columns: minmax(0, 1fr); background: var(--white); }
    .apply-pitch { position: relative; height: auto; min-height: 0; }
    .apply-pic img { left: calc(85% - 870px); top: calc(40% - 430px); }
    .apply-pitch__in { padding: 36px var(--apply-side) 32px; gap: 10px; }
    .apply-pitch__sub { max-width: none; }
    .apply-who, .apply-subs, .apply-tl__live { display: none; }
    /* the timeline as one row */
    .apply-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
    .apply-tl__step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding-bottom: 0; }
    .apply-tl__step:not(:last-child)::before { left: 46px; right: -12px; top: 17.5px; bottom: auto; width: auto; height: 1px; }
    .apply-tl__text { padding-top: 0; }
    .apply-pane__in { max-width: 680px; margin: 0 auto; padding: 32px var(--gut) 8px; }
    .apply-sent__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  }

  @media (max-width: 720px) {
    .apply-pitch { height: 320px; }
    .apply-pic img { width: 1100px; left: calc(80% - 560px); top: calc(55% - 280px); }
    .apply-pitch__in { padding-top: 28px; padding-bottom: 24px; }
    .apply-pitch h1 { font-size: 30px; line-height: 34px; }
    .apply-pitch__sub { font-size: 14.5px; line-height: 21px; }
    .apply-tl { margin-top: auto; gap: 8px; }
    .apply-tl__step:not(:last-child)::before { right: -8px; }
    .apply-tl__what { display: none; }
    .apply-tl__when { font-size: 10.5px; line-height: 14px; }
    .apply-pane__in { padding-top: 24px; }
    .apply-two { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .apply-sent { min-height: 0; }
    .apply-sent__in { padding-top: 36px; padding-bottom: 36px; }
    .apply-sent h1 { font-size: 34px; line-height: 38px; }
    .apply-sent .apply-pic img { width: 1100px; left: calc(70% - 560px); top: -60px; }
    .apply-sent .apply-tl { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .apply-sent .apply-tl__step { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
    .apply-sent .apply-tl__step:last-child { padding-bottom: 0; }
    .apply-sent .apply-tl__step:not(:last-child)::before { left: 17.5px; right: auto; top: 45px; bottom: 4px; width: 1px; height: auto; }
    .apply-sent .apply-tl__what { display: block; }
  }
}

/* The form's page and the page that answers it (the thank-you, or the form again with its note) cross-fade where the browser can;
   the rule is read outside any layer, and both pages carry this stylesheet. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }
}