.intake-receipt{min-height:70svh;padding-top:clamp(120px,15vw,220px);padding-bottom:80px}
.intake-receipt h1{max-width:14ch;margin-top:24px;margin-bottom:32px}
.intake-receipt h1 i{color:var(--red);font-style:normal}
.intake-receipt p{max-width:64ch;line-height:1.6;margin-top:24px}
.intake-receipt-reference{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline}
.intake-receipt-reference code{font-size:clamp(12px,2vw,16px);overflow-wrap:anywhere}
/* /contact/, the Planner as a conversation (the user, 30 September 2026). The template's own stylesheet, moved
   from its mockup (design/contact/), linked after src/styles/index.css on /contact/ only. Locomotive's arrangement (L.I.S.A.,
   locomotive.ca/en/contact), the line being asked on the left, the host on the right, the progress along the bottom,
   back at the bottom left, drawn with the homepage's parts. The line is the Statement level, the answers are the
   outline tags grown to touch size, the current choice marked with the 6px red dot (docs/14, Tags and pills). Every
   value is the homepage's unless a comment gives the reason. */

/* ---------- the page ---------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* without JavaScript the page reads whole, as on the other mockups (docs/14, The dot on every page, point 7) */
html:not(.js) .dot-anchor::before{transform:scale(1)}
.rm .dot-anchor::before{transform:scale(1)}
html:not(.js) .loader,.loader-seen .loader{display:none}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}

/* ---------- the stage ---------- */
/* one screen, as Locomotive's. The conversation in columns 1 to 6, the host in the right 56% from the bottom up */
.ct{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-inline:var(--pad)}
.ct-form{position:relative;grid-column:1/span 6;align-self:start;min-width:0;padding-block:calc(env(safe-area-inset-top,0px) + clamp(128px,20svh,210px)) 150px}
/* Questions keep the same desktop stage. The full-width intro flows with the page so a saved draft cannot
   create a second scrollbar beside the host. Long answers, expanded help and validation scroll inside the form. */
@media (min-width:761px){
  .ct-live .ct:not(.at-intro){height:100svh}
  .ct-live .ct:not(.at-intro) .ct-form{display:flex;flex-direction:column;margin-top:calc(env(safe-area-inset-top,0px) + clamp(128px,20svh,210px));padding-block:0;height:calc(100svh - env(safe-area-inset-top,0px) - clamp(128px,20svh,210px) - 104px);min-height:0}
  .ct-live .ct:not(.at-intro) .ct-prev{flex-shrink:0}
  .ct-live .ct:not(.at-intro) .ct-step.is-on{flex:1;min-height:0}
  .ct-live .ct:not(.at-intro) .ct-question{display:flex;flex-direction:column;height:100%;min-height:0}
  .ct-live .ct:not(.at-intro) .ct-question>.ct-say,.ct-live .ct:not(.at-intro) .ct-question>.ct-note{flex-shrink:0}
  .ct-live .ct:not(.at-intro) .ct-response{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:32px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  /* A result or status message can also be long, so the whole form scrolls in those exceptional states. */
  .ct-live .ct:not(.at-intro):has(.ct-result:not([hidden]),.ct-aside:not([hidden])) .ct-form{display:block;overflow-y:auto}
  .ct-live .ct:not(.at-intro):has(.ct-result:not([hidden]),.ct-aside:not([hidden])) .ct-question{display:block;height:auto}
  /* The portrait ends at the forearms. Keep its crop at the viewport bottom while the intro scrolls,
     then let it leave at the section boundary instead of exposing a floating cut edge. */
  .ct-live .ct.at-intro .ct-host-frame{display:block;position:absolute;inset:0;pointer-events:none}
  .ct-live .ct.at-intro .ct-host{position:sticky;right:auto;bottom:auto;top:calc(100svh - min(84svh,940px));margin-left:44%}
}
/* At short desktop heights the entire question scrolls, so its heading cannot crowd out the fields. */
@media (min-width:761px) and (max-height:640px){
  .ct-live .ct:not(.at-intro) .ct-form{display:block;overflow-y:auto}
  .ct-live .ct:not(.at-intro) .ct-question{display:block;height:auto}
}
/* the host's box. The live host is drawn by WebGL over it (host.js), the still inside it shows without WebGL, without
   JavaScript and with reduced motion */
/* its top at 16% of the screen, so the head stays clear of the nav and the menu (the user, 30 September 2026) */
.ct-host-frame{display:contents}
.ct-host{position:absolute;right:0;bottom:0;z-index:4;width:56%;height:min(84svh,940px);pointer-events:none}
.ct-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.host-on .ct-still{opacity:0}

/* ---------- the first screen ---------- */
/* the first line at the homepage Contact's size and rows (the Closing level, docs/14, .cta-title), across the whole
   width, the host smaller at the lower right while it stands. A click on a route turns the stage into the
   conversation, the host growing into its place (the width and height move, host.js reads the box every frame) */
/* the homepage hero title's size, "Ideas that land." (src/sections/hero/hero.css .hero-title, the user, 30 September
   2026), with its phone and short screen sizes at the end of this file */
.ct-say.ct-closing{font-weight:800;font-size:clamp(52px,8.4vw,156px);line-height:.86;letter-spacing:-.052em;text-wrap:initial}
.ct-say.ct-closing .row{display:block}
.ct-k-intro .ct-note,.ct-k-intro .ct-response{max-width:620px}
/* the first screen's choices sit clearly below the line and its description, so they read as the actions they are
   (the user, 30 September 2026), the direct channels a step under the routes */
.ct-k-intro .ct-note{margin-top:24px}
.ct-k-intro .ct-routes{margin-top:clamp(56px,9vh,96px)}
.ct-k-intro .ct-direct{margin-top:16px}
.ct-host{transition:transform 1s var(--e-out)}
/* on the first screen the host keeps its size and stands further right, so the first line's rows clear its screen, and
   glides back into place when the conversation starts */
.ct.at-intro .ct-host{transform:translateX(10%)}
.ct.at-intro .ct-form{grid-column:1/-1}
.ct.at-intro .ct-prev{display:none}
/* the host keeps its full size (the user, 30 September 2026), so the first line crosses it. Where it does, the letters
   invert what is under them, as the nav's wordmark does (DixonBaxi, docs/17 To approve 4), white with difference,
   near paper over the ink and dark over the cream blazer and the white screen. For that the line sits in the page's
   own stacking context, the form and its steps make none, each part lifts itself above the WebGL canvas (z-index 5) */
.ct.at-intro .ct-say.ct-closing{color:var(--white);mix-blend-mode:difference}
@media (forced-colors:active){.ct.at-intro .ct-say.ct-closing{mix-blend-mode:normal}}
/* the blended line would blend its printed full stop with the WebGL dot sitting on it, red on red giving black, so
   with WebGL only the dot itself shows there. Without WebGL the printed full stop stays */
html.gl-host .ct.at-intro .ct-closing .dot-anchor::before{background:transparent}
/* the dot leaves the logo's full stop for the first line's (contact.js), the logo's comes back once it has landed */
html.dot-away .mark-stop{--dotc:transparent!important}
/* The conversation sits on plain ink, with no glow or film grain behind it. */
body:has(.ct) .grain{display:none}

/* ---------- a step ---------- */
/* The headline stays in the page's stacking context for its blend; the response lifts the controls above WebGL. */
.ct-say,.ct-note,.ct-response,.ct-k-quit>:not(.ct-say),.ct-prev,.ct-hp,.ct-nojs{position:relative;z-index:6}
.ct-step{margin:0;padding:0;border:0;min-width:0}
.js .ct-step{display:none}
.js .ct-step.is-on{display:block}
/* the line asked, the Statement level (docs/14, Type), a statement that ends in the red full stop */
.ct-say{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(30px,4.35vw,74px);line-height:1.06;letter-spacing:-.038em;text-wrap:balance}
.ct-say:focus{outline:none}
.ct-note{margin:20px 0 0;max-width:40ch;font-size:17px;color:var(--fg-2)}
.ct-note-s{margin-top:12px}
/* the line before, faded and soft above the new one, as Locomotive's. A click goes back to it, the Back button does
   the same for the keyboard. Its full stop stays printed */
.ct-prev{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(2 * 1.3em);margin:0 0 24px;max-width:34ch;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.35vw,21px);line-height:1.3;letter-spacing:-.012em;color:var(--fg-3);filter:blur(1.4px);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),filter .3s,color .3s,visibility 0s .5s}
.ct-prev.on{opacity:1;visibility:visible;transition:opacity .5s var(--e-out),filter .3s,color .3s}
.ct-prev:hover{filter:none;color:var(--fg-2)}
.ct-prev-t::after{content:"";display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:var(--red)}

/* the answers, the outline tag at touch size (44px and more) */
.ct-choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.ct-chip{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:16px;font-weight:500;line-height:1.2;color:var(--fg);text-decoration:none;cursor:pointer;transition:box-shadow .3s,background-color .35s var(--e-out),color .35s var(--e-out)}
.ct-chip:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.ct-chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.ct-chip:has(input:focus-visible),.ct-route:focus-visible,.ct-file-l:has(+ input:focus-visible){outline:2px solid var(--red);outline-offset:4px}
/* the current choice, the 6px red dot before its name (the language picker's), and the ring in --fg */
.ct-chip>span::before{content:"";display:inline-block;width:0;height:6px;margin-right:0;border-radius:50%;background:var(--red);vertical-align:middle;transform:scale(0);transition:width .3s var(--e-out),margin .3s var(--e-out),transform .3s var(--e-out)}
.ct-chip:has(input:checked){box-shadow:inset 0 0 0 1px var(--fg);background:var(--line)}
.ct-chip:has(input:checked)>span::before{width:6px;margin-right:10px;transform:scale(1)}
/* the routes, the first one the main action's fill */
.ct-route{padding:15px 24px;font-size:17px;font-weight:600}
.ct-routes .ct-route:first-child{background:var(--fg);color:var(--bg);box-shadow:none}
.ct-routes .ct-route:first-child:hover{background:var(--red);color:var(--white)}
.ct-direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ct-direct .copy-pill{padding:12px 14px 12px 20px;font-size:15.5px}
.ct-act{margin-top:36px}
.ct-next,.ct-send{border:0}

/* fields, a line to write on, as Locomotive's, with its label above in the label's grey */
.ct-fields{display:grid;gap:26px;margin-top:34px;max-width:520px}
.ct-field{display:grid;gap:6px}
.ct-field input,.ct-field textarea,.ct-field select{width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--fg);font:500 clamp(20px,1.6vw,24px)/1.3 var(--text);outline:none;transition:border-color .3s,box-shadow .3s}
.ct-field textarea{min-height:128px;resize:vertical;font-size:19px;line-height:1.45}
.ct-field select{min-height:52px;padding-right:28px;cursor:pointer}
.ct-field select option{background:var(--bg);color:var(--fg)}
.ct-field input:focus,.ct-field textarea:focus,.ct-field select:focus{border-bottom-color:var(--fg);box-shadow:0 1px 0 var(--fg)}
.ct-field [aria-invalid="true"]{border-bottom-color:var(--red);box-shadow:0 1px 0 var(--red)}
.ct-err{margin:6px 0 0;font-size:15px;color:var(--fg)}
.ct-err::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--red);vertical-align:middle}
/* The ordinary report form uses the same field rhythm as the planner and career applications. */
.report-form{display:grid;gap:26px;max-width:800px;margin-top:var(--gap-h);color-scheme:light}
.report-form .ct-field{min-width:0}
.report-form .ct-err,.report-form>.ct-privacy{margin:0}
.report-form>.btn{justify-self:start}
.report-form :is(a,button):focus-visible{outline:2px solid var(--red);outline-offset:5px}
.ct-file{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ct-file-l{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px 8px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:15.5px;font-weight:500;cursor:pointer;transition:box-shadow .3s}
.ct-file-l:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.ct-file-plus{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--line);font-size:18px;line-height:1}
.ct-file input{position:absolute;width:1px;height:1px;opacity:0}
.ct-langs{display:grid;gap:10px;margin:0;padding:0;border:0}
.ct-choices-s{margin-top:0;gap:8px}
.ct-chip-s{min-height:44px;padding:9px 16px;font-size:15px}
/* the helper on a good brief, a native disclosure, so it opens without JavaScript too */
.ct-help{margin-top:24px;max-width:520px}
.ct-help summary{display:inline-block;padding-bottom:2px;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600;cursor:pointer;list-style:none;transition:border-color .3s}
.ct-help summary::-webkit-details-marker{display:none}
.ct-help summary:hover{border-bottom-color:var(--red)}
.ct-help dl{display:grid;gap:12px;margin:18px 0 0}
.ct-help dt{font-weight:600}
.ct-help dd{margin:2px 0 0;color:var(--fg-2);font-size:15.5px}
/* the recap, label rows between 1px rules (docs/14, Section heads and labels) */
.ct-recap{display:grid;max-width:560px;margin:30px 0 0}
.ct-recap>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.ct-recap>div:last-child{border-bottom:1px solid var(--line)}
.ct-recap dd{margin:0;overflow-wrap:anywhere}
.ct-change{margin-left:6px;padding-bottom:1px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;transition:border-color .3s}
.ct-change:hover{border-bottom-color:var(--red)}
.ct-privacy{margin:22px 0 0;max-width:46ch;font-size:15px;color:var(--fg-2)}
.ct-privacy a{font-weight:600;color:var(--fg)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- the bottom row ---------- */
.ct-foot{position:absolute;left:var(--pad);bottom:30px;z-index:7;display:flex;align-items:center;gap:20px}
.ct-back{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font-size:18px;transition:box-shadow .3s}
.ct-back:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.ct-skip{padding-bottom:2px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;transition:border-color .3s}
.ct-skip:hover{border-bottom-color:var(--red)}
.ct-foot [hidden]{display:none}
.ct-bar{position:absolute;left:0;right:0;bottom:0;z-index:7;height:2px;background:var(--line)}
.ct-bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--fg);transition:width .9s var(--e-out)}

/* ---------- start states ---------- */
/* the first line and the host come in with the loader's end (contact.js intro), as the hero's do (docs/14, Motion,
   Rules, Start states). Only with the libraries and full motion, so the page reads without them */
.js:not(.no-libs):not(.rm) .ct-k-intro .ct-say .line-in{transform:translateY(112%)}
.js:not(.no-libs):not(.rm) .ct-k-intro .ct-note,.js:not(.no-libs):not(.rm) .ct-k-intro .ct-response{opacity:0}
.js:not(.no-libs):not(.rm) .ct-host{opacity:0}

/* ---------- without JavaScript, one long form ---------- */
/* every question shows, in order, and the form posts to the server (docs/16, Forms). The routes, the recap, the
   thanks, Next, Back, Skip and the progress need the script, so they stay out */
html:not(.js) .ct-step{margin-bottom:72px}
html:not(.js) .ct-k-intro .ct-routes,html:not(.js) .ct-act,html:not(.js) .ct-foot,html:not(.js) .ct-bar,html:not(.js) .ct-prev{display:none}
html:not(.js) [data-kind="recap"],html:not(.js) [data-kind="done"]{display:none}
html:not(.js) .ct-form{grid-column:1/span 7;align-self:start}
.js .ct-nojs{display:none}
.ct-nojs{margin-top:8px}

/* ---------- the nav over the stage ---------- */


/* ---------- the page's note, built, how it says the send is not wired yet (contact.js, toast) ---------- */
/* the samples' marks and the preview tools are in preview.css, which only the dev server loads */
.pv-toast{position:fixed;left:50%;bottom:24px;z-index:91;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:#000;color:#fff;font:500 14px/1.3 var(--text);opacity:0;pointer-events:none;transition:opacity .3s}
.pv-toast.on{opacity:1}

/* ---------- the states ---------- */
/* the planner's states (docs/23-planner-states.md). A server's result tops the form, the error summary in the planner's
   voice, its sentence at the Title level with its drawn red stop (never a station), on the steps' own left edge. The
   live line (offline, back online) and the kept draft's line hang a quiet dot, never red, so the dot on the line asked
   stays the only red event. Each part lifts itself above the WebGL canvas, as a step's do */
.ct-result,.ct-aside,.ct-draft{position:relative;z-index:6;max-width:560px;margin:0 0 clamp(28px,4vh,40px);padding-left:18px}
.ct-result{padding-left:0}
.ct-result[hidden],.ct-aside[hidden]{display:none}
.ct-result:focus{outline:none}
.ct-result:focus-visible{outline:none}
.ct-result-h{display:inline-block;margin:0;max-width:22ch;vertical-align:baseline;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;color:var(--fg);text-wrap:balance}
.ct-result-h i{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:var(--red)}
.ct-result .pv-tag{margin-left:10px}
.ct-result-l{margin:12px 0 0;max-width:44ch;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.ct-result-list{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none;font-size:16px;line-height:1.45}
.ct-result-list span{color:var(--fg-2)}
/* each answer's link beside its message, two columns, stacked on a phone */
.ct-result-list li{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);column-gap:14px;align-items:baseline}
.ct-result-list a{justify-self:start}
.ct-result a{font-weight:600;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.ct-result a:hover{border-bottom-color:var(--red)}
.ct-result a:focus-visible,.ct-change:focus-visible,.ct-stay:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.ct-result-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.ct-result-act .copy-pill{padding:12px 14px 12px 20px;font-size:15.5px}
/* Copy my answers, the most useful thing when the form cannot send, on its own row under the pills, at the pills' size */
.ct-result-act::after{content:"";flex-basis:100%;order:1}
.ct-copy-answers{order:2;margin:4px 0 0;font-size:15.5px}
/* the answers, when the browser refuses the clipboard, in a box to copy by hand, selected (states.ts bindAnswers()) */
.ct-answers{display:block;width:100%;margin:16px 0 0;padding:14px 16px;border:0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);background:transparent;color:var(--fg);font:15px/1.5 var(--text);resize:vertical}
.ct-answers:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* the live line and the kept draft, Small, a 6px dot in the secondary grey hanging at the left */
.ct-aside-t{margin:0;max-width:46ch;font-size:16px;line-height:1.5;color:var(--fg)}
.ct-aside::before,.ct-draft::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--fg-2)}
.ct-draft{margin-bottom:clamp(40px,7vh,72px)}
.ct-draft .ct-choices{align-items:center;margin-top:14px}
.ct-draft .ct-fresh{margin-left:10px}
.ct-kept-line [role="status"]:focus{outline:none}
.ct-draft .pv-tag{align-self:center}
.ct-kept-line{margin-top:10px}
/* quit, a step that asks nothing, its two ways as the first screen's routes, Stay the filled one */
.ct-k-quit .ct-routes{margin-top:clamp(40px,7vh,72px)}
/* Send while the native POST goes on, its arrow held where the hover turns it */
.ct-send.is-sending{cursor:progress}
.ct-send.is-sending .arr{transform:rotate(-45deg)}
.ct-send[aria-disabled="true"]:not(.is-sending){opacity:.5;cursor:not-allowed}
/* the picker's hint and the files of a 422, the kept ones as chips to remove, the refused ones named */
.ct-file-h{flex-basis:100%;margin:0;font-size:14px}
.ct-file>.ct-err,.ct-file-msg{flex-basis:100%}
.ct-file-msg:empty{display:none}
.ct-file-msg .ct-err:first-child{margin-top:0}
.ct-kept{flex-basis:100%}
.ct-kept-h{margin:4px 0 0;font-size:15px;color:var(--fg-2)}
.ct-kept-l{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
/* a kept file reads as the file, still attached, its Remove quiet beside the name, struck through once ticked */
.ct-kept-x{margin-left:10px;font-size:13.5px;color:var(--fg-2)}
.ct-kept-c:has(input:checked) .ct-kept-n{text-decoration:line-through}
.ct-recap dd .ct-err{margin-top:4px}
/* a row's error sits under its value and before its Change, which then starts its own line */
.ct-recap dd .ct-err+.ct-change,.ct-recap dd>.ct-change:first-child{margin-left:0}
.ct-recap dd .ct-err+.ct-change{margin-top:6px}
/* a server's result makes the stage taller than the screen, so the host keeps its first screen place, never sinking
   with the stage's bottom (host.js follows its box every frame) */
@media (min-width:761px){
  .ct:has(.ct-result:not([hidden])) .ct-host{bottom:auto;top:calc(100svh - min(84svh,940px))}
}
/* without JavaScript the long form has no quit, no live line and nothing to copy, and its one free text field is the
   brief's, so the message's step (a quick word) is left out (docs/23, the audit's gap e) */
html:not(.js) .ct-k-quit,html:not(.js) .ct-aside,html:not(.js) .ct-copy-answers,html:not(.js) [data-step="message"]{display:none}
.ct-nojs .ct-privacy{margin:0 0 24px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ct-form{grid-column:1/span 7}
  .ct-host{width:52%}
}
/* a server's result holds the host to the first screen, beside the recap's longest lines, so between the phone and
   1100px it stands a little further right, clear of them (the intro's own shift still wins on the first line) */
@media (min-width:761px) and (max-width:1100px){
  .ct-live .ct.at-intro .ct-host{margin-left:48%}
  .ct:not(.at-intro):has(.ct-result:not([hidden])) .ct-host{transform:translateX(8%)}
}
/* on phones the host stands above the line asked, smaller, clear of the nav, and the page grows with the step */
@media (max-width:760px){
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
  .ct{display:block;min-height:100svh;padding-bottom:96px}
  .ct-host{position:relative;right:auto;bottom:auto;width:auto;height:34svh;margin:calc(env(safe-area-inset-top,0px) + 96px) calc(var(--pad) * -1) 0}
  .ct-form{padding-block:18px 40px}
  .ct-note{font-size:16px;margin-top:14px}
  .ct-choices{margin-top:24px;gap:8px}
  .ct-chip{padding:11px 16px;font-size:15.5px}
  .ct-route{padding:13px 20px;font-size:16px}
  .ct-fields{margin-top:26px;gap:22px}
  .ct-act{margin-top:28px}
  .ct-foot{bottom:24px}
  .ct-recap>div{grid-template-columns:96px minmax(0,1fr)}
  html:not(.js) .ct-host{height:30svh}
  .ct.at-intro .ct-host{transform:none}
  .ct-say.ct-closing{font-size:clamp(52px,17vw,88px)}
  .ct-k-intro .ct-note{margin-top:18px}
  .ct-k-intro .ct-routes{margin-top:40px}
  .ct-result,.ct-aside,.ct-draft{max-width:none;padding-left:16px}
  .ct-result{padding-left:0}
  .ct-result-h{font-size:clamp(24px,7vw,30px)}
  .ct-result-list li{grid-template-columns:minmax(0,1fr);row-gap:2px}
}
/* short screens, the hero title's own rule */
@media (max-height:560px){
  .ct-say.ct-closing{font-size:clamp(38px,12vh,64px)}
}

/* A short pause between project questions, in the existing label style. */
.ct-thinking{position:absolute;left:var(--pad);top:calc(env(safe-area-inset-top,0px) + clamp(128px,20svh,210px) - 28px);z-index:6;display:flex;align-items:center;gap:10px;margin:0;color:var(--fg-2)}
.ct-thinking[hidden]{display:none}
.ct-thinking-dots{display:inline-flex;gap:4px}
.ct-thinking-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:ct-thinking 1s ease-in-out infinite}
.ct-thinking-dots i:nth-child(2){animation-delay:.15s}
.ct-thinking-dots i:nth-child(3){animation-delay:.3s}
@keyframes ct-thinking{0%,70%,100%{opacity:.3}35%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ct-thinking-dots i{animation:none}}
@media (max-width:760px){.ct-thinking{top:calc(34svh - 10px)}}
/* The data request, /legal/privacy/request/ (docs/23-planner-states.md), the Planner template on paper. The template's
   own stylesheet, linked after reading.css (its head and meta row) and contact.css (the planner's chips, fields, error
   lines and result block). One paper section: the reading pages' head, the form as numbered rows on rules, the label at
   the Title level beside its field, then how long it takes, a promise at the Statement level over the law's label rows.
   Every value is the site's unless a comment gives the reason. */

/* ---------- the page ---------- */
.rq{padding-top:calc(env(safe-area-inset-top,0px) + 108px);padding-bottom:calc(var(--gap-s) - clamp(70px,11vh,130px))}
.rq .rd-head{padding-bottom:clamp(40px,7vh,72px)}

/* ---------- the form ---------- */
/* a 12 column grid, so the result, the rows' fields and Send share columns 5 to 11 */
.rq-form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(70px,11vh,130px)}
.rq-form>.ct-result{grid-column:5/span 7;max-width:none}
.rq-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;padding:22px 0 40px;border-top:1px solid var(--line)}
.rq-n{grid-column:1;font-variant-numeric:tabular-nums}
/* the label at the Title level, no drawn stop, it names a field */
.rq-l{grid-column:2/span 3;margin:0;padding-right:12px;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;text-wrap:balance;color:var(--fg)}
.rq-f{grid-column:5/span 7;min-width:0;margin:0;padding:0;border:0}
.rq-f.ct-field{gap:0}
.rq-f.ct-field input{padding-top:0}
.rq-note{margin:10px 0 0;max-width:52ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
/* the three things to ask for, each a chip used as a radio, its line beside it */
.rq-choice{display:grid;grid-template-columns:minmax(0,18.5em) minmax(0,1fr);column-gap:20px;align-items:center}
.rq-choice+.rq-choice{margin-top:12px}
.rq-choice .rq-note{margin:0}
.rq-choice .ct-chip{justify-content:flex-start}
.rq-more{margin-top:20px}
.rq-f>.ct-err{margin-top:14px}
.rq-send{grid-column:5/span 7;margin-top:32px}
.rq-send .ct-privacy{margin:0}
.rq-send .ct-aside{margin:20px 0 0}
.rq-go{margin-top:28px;border:0}
.rq-go.is-sending{cursor:progress}
.rq-go.is-sending .arr{transform:rotate(-45deg)}
.rq-go[aria-disabled="true"]:not(.is-sending){opacity:.5;cursor:not-allowed}
.rq .ct-privacy a:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- how long it takes ---------- */
.rq-time{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:var(--gap-s)}
.rq-time .sec-h{grid-column:1/-1;margin-bottom:clamp(28px,5vh,56px)}
/* the promise at the Statement level (docs/14, Type), its red full stop a station */
.rq-time-h{grid-column:5/span 7;margin:0;font:700 clamp(30px,4.35vw,74px)/1.06 var(--display);letter-spacing:-.038em}
.rq-rows{grid-column:5/span 7;margin:48px 0 0}
.rq-rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:24px;padding:14px 0;border-top:1px solid var(--line)}
.rq-rows>div:last-child{border-bottom:1px solid var(--line)}
.rq-rows dd{margin:0;font-size:16px;line-height:1.5;color:var(--fg)}
.rq .pv-tag{margin-left:10px}
.rq-time .sec-h .pv-tag{margin-left:auto}
.rq-pill{display:flex;width:max-content;margin-top:14px;padding:12px 14px 12px 20px;font-size:15.5px}

/* ---------- start states ---------- */
.js:not(.no-libs):not(.rm) .rq-x{opacity:0}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .rq-l{grid-column:2/span 4}
  .rq-f,.rq-form>.ct-result,.rq-send{grid-column:6/span 7}
  .rq-time-h,.rq-rows{grid-column:1/span 10}
  .rq-choice{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .rq-choice .ct-chip{justify-self:start}
}
@media (max-width:760px){
  .rq{padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
  .rq-row{grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:18px 0 32px}
  .rq-n{grid-column:1}
  .rq-l{grid-column:2;padding:0}
  .rq-f{grid-column:1/-1;margin-top:14px}
  .rq-form>.ct-result,.rq-send{grid-column:1/-1}
  .rq-time-h,.rq-rows{grid-column:1/-1}
  .rq-rows>div{grid-template-columns:minmax(0,1fr);row-gap:4px}
}
@media (max-height:560px){
  .rq{padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
}
/* The thank you pages (docs/23-planner-states.md), /contact/thanks/ and /legal/privacy/request/thanks/, one pattern.
   The template's own stylesheet, linked after src/styles/index.css on those pages only, after contact.css on the
   planner's (its stage, its host, its chips). The red dot falls from above the screen onto the headline's full stop,
   the word dips under its weight, and three plain stops say what happens next, label rows on rules with a neutral
   marker that fills at touchdown, never red, so the dot is the only red event of the first screen. Then two of our
   projects on paper in /work/'s shapes, then on ink what was sent, our questions beside the visitor's choices. None
   of the homepage's parts. Every value is the site's unless a comment gives the reason. */

/* ---------- the page ---------- */
/* the request's thanks has no contact.css, so the rules every inner page keeps are here too, as reading.css has them */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
html:not(.js) .dot-anchor::before{transform:scale(1)}
.rm .dot-anchor::before{transform:scale(1)}
html:not(.js) .loader,.loader-seen .loader{display:none}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
/* a text link, docs/14's, weight 600 over a rule that turns red, its hit area 10px past its words */
.ty-link{position:relative;font-weight:600;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.ty-link::after{content:"";position:absolute;inset:-10px -6px}
.ty-link:hover{border-bottom-color:var(--red)}
.ty-link:focus-visible{outline:2px solid var(--red);outline-offset:6px}

/* ---------- the landing, /contact/thanks/ ---------- */
/* the planner's stage (contact.css .ct), the words in 7 columns from the planner's own top, the host standing to the
   right, a little further out than in the conversation so the title's rows clear it, as on /contact/'s first screen */
.ty-in{grid-column:1/span 7;align-self:start;min-width:0;padding-block:calc(env(safe-area-inset-top,0px) + clamp(128px,20svh,210px)) clamp(96px,14svh,150px)}
.ty-in>*{position:relative;z-index:6}
.ty .ct-host{width:50%;transform:translateX(10%)}
.ty h1 .nw{display:inline-block}
.ty-in .ct-say:focus,.ty-title:focus{outline:none}
.ty-intro{margin:24px 0 0;max-width:36ch;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.ty-next{margin-top:clamp(40px,6vh,64px)}
.ty-next-h{margin:0}
/* the stops, label rows on rules (docs/14, Section heads and labels), a neutral marker, the moment at Lead, the line
   at Body. No numbers, no counter, no motion along them, so they read as a sequence, not the homepage's process */
.ty-stops{margin:15px 0 0;padding:0;list-style:none}
.ty-stop{position:relative;display:grid;grid-template-columns:16px minmax(0,2fr) minmax(0,3fr);column-gap:16px;align-items:baseline;padding:14px 0}
.ty-stop:last-child{border-bottom:1px solid var(--line)}
.ty-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.ty-mark{position:relative;grid-column:1;grid-row:1;align-self:start;width:8px;height:8px;margin-top:calc(clamp(20px,1.75vw,27px) * .625 - 4px);border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg-2)}
.ty-mark::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fg);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.ty-landed .ty-stop[data-ty-reached] .ty-mark::after,html:not(.js) .ty-stop[data-ty-reached] .ty-mark::after{transform:scale(1)}
.rm .ty-mark::after,.no-gl .ty-mark::after{transition:none}
.ty-when{grid-column:2;grid-row:1;margin:0;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg)}
.ty-line{grid-column:3;grid-row:1;margin:0;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.ty-sample{grid-column:3;margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--fg-2)}
/* the progress is full, its last 5% filling at touchdown with the bar's own transition */
.js:not(.no-libs):not(.rm) .ty:not(.ty-landed) .ct-bar i{--p:.95}
/* the bar on the grid's margins, so when the palette turns paper for the pair it never runs as a rule across the page */
.ty .ct-bar{left:var(--pad);right:var(--pad)}
/* the word dips under the dot's weight at touchdown, and the dot, which reads its full stop every frame, dips with it.
   Not with reduced motion or without WebGL, where no dot falls */
html:not(.rm):not(.no-gl) .ty-landed h1 .nw{animation:ty-dip .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes ty-dip{40%{transform:translateY(.04em)}to{transform:none}}

/* ---------- the landing, the data request's, on paper ---------- */
.ty-r{padding-top:calc(env(safe-area-inset-top,0px) + 108px);padding-bottom:calc(var(--gap-s) - clamp(70px,11vh,130px))}
.ty-head .h2{grid-column:1/span 8}
.ty-head .sec-h>.lbl:first-child{flex:none}
.ty-head .sec-c{text-align:right}
.ty-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(70px,11vh,130px)}
.ty-body>*{grid-column:1/span 8}
.ty-note{margin:32px 0 0;max-width:56ch;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.ty-note+.ty-note{margin-top:10px}
.ty-links{display:flex;flex-wrap:wrap;gap:16px 28px;margin:40px 0 0}

/* ---------- two to read, paper ---------- */
.ty-pair{padding-block:var(--gap-h)}
.ty-pair.ty-last{padding-bottom:calc(var(--gap-s) - clamp(70px,11vh,130px))}
.ty-pair .sec-h{margin-bottom:clamp(28px,5vh,56px)}
.ty-pair-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.ty-pair-head .h2{grid-column:1/span 8}
.ty-pair-note{grid-column:9/span 4;margin:0;padding-bottom:.5em;max-width:32ch;font-size:17px;line-height:1.55;color:var(--fg-2)}
/* /work/'s featured shapes, its wl and nr slots, a wide 16:9 card and a narrow 16:10 one */
.ty-cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin:clamp(70px,11vh,130px) 0 0;padding:0;list-style:none}
.ty-card{min-width:0}
.ty-card-w{grid-column:1/span 8}
.ty-card-n{grid-column:9/span 4}
.ty-card-a{display:block;color:inherit;text-decoration:none;border-radius:10px}
.ty-card-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.ty-card-m{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--mist)}
.ty-card-n .ty-card-m{aspect-ratio:16/10}
.ty-card-m picture{display:contents}
.ty-card-m img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.1s cubic-bezier(0,.202,.204,1)}
.ty-card-m::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.ty-card-a:hover img,.ty-card-a:focus-visible img{transform:none}
.ty-card-t{margin:20px 0 0;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;text-wrap:balance}
.ty-card-t i{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:var(--red)}
.ty-card-o{margin:12px 0 0;max-width:34ch;font-size:clamp(20px,1.6vw,24px);line-height:1.22;font-weight:500;letter-spacing:-.005em;text-wrap:pretty}
.ty-card-g{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.ty-card-g li{padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:500;line-height:1.3}
.ty-card-g li.is-chosen::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--red);vertical-align:middle}
.ty-all{margin:56px 0 0}

/* ---------- what you sent, ink ---------- */
.ty-sent{padding-top:var(--gap-h);padding-bottom:calc(var(--gap-s) - clamp(70px,11vh,130px))}
.ty-sent .sec-h h2{margin:0}
.ty-sent-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:clamp(40px,6vh,64px)}
.ty-sent-l{grid-column:1/span 4}
.ty-forgot{margin:0;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg)}
.ty-write{margin:12px 0 0;max-width:34ch;font-size:17px;line-height:1.55;color:var(--fg-2)}
.ty-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ty-pills .copy-pill{padding:12px 14px 12px 20px;font-size:15.5px}
.ty-privacy{margin:28px 0 0;max-width:36ch;font-size:15px;line-height:1.5;color:var(--fg-2)}
/* the transcript, our question as the host asked it, unblurred, the answers as the planner's chips, no hover */
.ty-said{grid-column:6/span 7;margin:0;padding:0;list-style:none}
.ty-said li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.ty-said li:last-child{border-bottom:1px solid var(--line)}
.ty-q{margin:0;padding-top:9px;font:500 clamp(17px,1.35vw,21px)/1.3 var(--display);letter-spacing:-.012em;color:var(--fg-2)}
.ty-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.ty-chip{min-height:40px;padding:9px 16px;font-size:15px;box-shadow:inset 0 0 0 1px var(--fg);background:var(--line);cursor:default}
.ty-chip:hover{box-shadow:inset 0 0 0 1px var(--fg)}

/* ---------- start states ---------- */
/* everything comes in with the loader's end or at 88% (thanks.ts), only with the libraries and full motion, so the
   page reads without them */
.js:not(.no-libs):not(.rm) .ty .line-in{transform:translateY(112%)}
.js:not(.no-libs):not(.rm) :is(.ty-intro,.ty-next-h,.ty-stop,.ty-note,.ty-links,.ty-head .sec-c,.ty-pair-note,.ty-card,.ty-all,.ty-sent-l,.ty-said li){opacity:0}
.js:not(.no-libs):not(.rm) .ty-rule{transform:scaleX(0)}

/* ---------- the samples' marks ---------- */
/* the dev server's samples keep their mark beside their words with JavaScript off too, black and white as reading.css
   has it (docs/14, Samples). A build renders no sample, so it has no mark to style */
.pv-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:#000;color:#fff;font:600 12px/1.3 var(--text);letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.ty .pv-tag,.ty-sent .pv-tag{margin-left:10px}
.ty-stop .pv-tag{display:table;margin:6px 0 0;white-space:normal}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ty .ct-host{width:52%}
  .ty-head .work-intro{margin-top:14px}
  .ty-body>*{grid-column:1/span 10}
  .ty-pair-head .h2{grid-column:1/-1}
  .ty-pair-note{grid-column:1/span 9;padding:24px 0 0}
  .ty-card-n .ty-card-m{aspect-ratio:16/9}
  .ty-sent-l{grid-column:1/span 5}
  .ty-said{grid-column:7/span 6}
  .ty-said li{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .ty-q{padding-top:0}
}
/* the host on the first screen, its top below the nav, whatever the stage's height, so on a short screen it never
   slides below the fold with the stage's bottom (host.js follows its box every frame) */
@media (min-width:761px){
  .ty .ct-host{bottom:auto;top:max(calc(env(safe-area-inset-top,0px) + 90px),calc(100svh - min(84svh,940px)));height:min(84svh,940px,calc(100svh - 90px))}
}
@media (max-width:760px){
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
  .ty .ct-host{width:auto;height:26svh;transform:none}
  .ty-in{padding:18px 0 96px}
  .ty-stop{grid-template-columns:16px minmax(0,1fr);row-gap:4px}
  .ty-line,.ty-sample{grid-column:2;grid-row:auto}
  .ty-r{padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
  .ty-head .h2,.ty-head .work-intro{grid-column:1/-1}
  .ty-body>*{grid-column:1/-1}
  .ty-pair-note{grid-column:1/-1}
  .ty-card-w,.ty-card-n{grid-column:1/-1}
  .ty-card-n{margin-top:32px}
  .ty-sent-l,.ty-said{grid-column:1/-1}
  .ty-said{margin-top:40px}
}
@media (max-height:560px){
  .ty-r{padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
}