/* intake.css — the intake form, shared. Extracted 2026-09-22 when a third page
   (ai-employees.html) needed it: assessment.html and contact.html each carried
   this block inline and byte-identical, so it had already been copied once.
   Tokens come from the page. The comment inside still says assessment.html
   because that is where it was written. */
  /* ---- assessment.html page styles (same tokens, same roles) ---- */
  .formcard{margin-top:var(--s-3);border:1px solid var(--line);border-radius:var(--r-card);
       background:var(--card);padding:32px 34px;max-width:660px}
  .field{margin-bottom:var(--s-3)}
  .field label{display:block;font-family:var(--f-mono);font-size:var(--t-xs);
       letter-spacing:0.22em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
  .field input,.field textarea{width:100%;background:var(--paper);color:var(--ink);
       font-family:var(--f-body);font-size:var(--t-m);line-height:1.55;
       border:1px solid var(--line);border-radius:8px;padding:13px 15px}
  .field input::placeholder,.field textarea::placeholder{color:var(--dim);opacity:1}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--signal)}
  .field textarea{min-height:150px;resize:vertical}
  .field .hint{font-size:var(--t-s);color:var(--dim);margin-top:6px;font-weight:400}
  .formcard .btn{margin-top:var(--s-1)}
  .formcard .formmeta{font-size:var(--t-s);color:var(--dim);margin-top:var(--s-2)}
  .faq{margin-top:var(--s-2);border:1px solid var(--line);border-radius:var(--r-card);
       background:var(--card);overflow:hidden;max-width:820px}
  .faq .qa{padding:22px 26px;border-top:1px solid var(--hairline)}
  .faq .qa:first-child{border-top:none}
  .faq .q{font-family:var(--f-display);font-weight:700;font-size:var(--t-m);
       color:var(--ink);margin-bottom:8px}
  .faq .a{font-size:var(--t-m);font-weight:400;color:var(--body-c);max-width:var(--measure)}

  /* ---- intake surface: form + talk are one cell, two doors ---- */
  .intakegrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-3);
       align-items:start;max-width:990px;margin-top:var(--s-3)}
  .intakegrid .formcard{margin-top:0;max-width:none}
  .talkcard{border:1px solid var(--line);border-radius:var(--r-card);
       background:var(--card);padding:26px}
  .talkcard .t{font-family:var(--f-display);font-weight:700;font-size:var(--t-m);
       color:var(--ink);margin-bottom:8px}
  .talkcard p{font-size:var(--t-s);font-weight:400;color:var(--body-c);margin:0 0 var(--s-2)}
  .talkcard .btn{margin-top:0;display:block;text-align:center;padding:13px 18px;font-size:var(--t-m)}
  .talkcard .alt{font-size:var(--t-s);color:var(--dim);margin:var(--s-2) 0 0}
  /* small screens: the 70%-sold visitor came to act — the form leads,
     the talk card follows it */
  @media(max-width:860px){.intakegrid{grid-template-columns:1fr}}

  /* ---- validation: errors speak in ink, not alarm paint ---- */
  .field .errmsg{display:none;font-size:var(--t-s);font-weight:600;color:var(--ink);margin-top:6px}
  .field.err .errmsg{display:block}
  .field.err input,.field.err textarea{border-color:var(--ink)}
  .sendfail{font-size:var(--t-m);font-weight:600;color:var(--ink);
       margin-top:var(--s-2);max-width:var(--measure)}
  /* in flight: the button stops being a button until we know */
  .formcard .btn[aria-busy="true"]{opacity:.62;cursor:progress}
  .draftnote{font-size:12px;font-weight:400;color:var(--dim);margin-top:8px}

  /* ---- the sent state: the clock starts on screen ---- */
  #sentcard .sent-t,#csentcard .sent-t{font-family:var(--f-display);font-weight:800;font-size:var(--t-xl);
       letter-spacing:-0.01em;line-height:1.22;color:var(--ink);margin-bottom:var(--s-2)}
  #sentcard p,#csentcard p{font-size:var(--t-m);font-weight:400;color:var(--body-c);
       max-width:var(--measure);margin-bottom:var(--s-2)}
  #sentcard p:last-child,#csentcard p:last-child{margin-bottom:0}
  #sentcard .next{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:0.26em;
       text-transform:uppercase;color:var(--dim);margin:var(--s-3) 0 var(--s-1)}

  /* the form in the hero: top-aligned, and the card sheds the margin it had
     under a section heading */
  .formhero{align-items:start}
  .formhero .formcard{margin-top:0;max-width:none}
  /* 150 → 120: the one change that puts the submit above a 1440×900 fold
     (it sat at 916). The box still grows; resize is vertical. */
  .formhero .field textarea{min-height:120px}
  /* the hero form sits over the ground, not inside a lifted band, and --card
     is translucent in dark (9% purple), so the waterworks showed through the
     fields. Same tint laid over the page colour: identical where the ground
     is empty, opaque where it isn't. */
  .formhero .formcard{background:linear-gradient(var(--card),var(--card)),var(--paper)}
  .formhero .field{margin-bottom:20px}
  /* the side door only where the nav buttons are hidden. Phil 2026-09-22: "Do
     we need a button under the left? We got the buttons right at the top." On
     a laptop the nav carries Contact us, so this line repeats it; at 900 and
     under the three buttons fold into the burger and this is the only visible
     way to the other door. 900 is navmenu.css's burger breakpoint. */
  @media(min-width:901px){.formhero .side{display:none}}
  /* phone padding for the card, which assessment and contact carry in their
     own 720px block; ai-employees has no such block, so it lives here too */
  @media(max-width:720px){.formhero .formcard{padding:24px 18px}}
  /* the honeypot: off-screen, not display:none, which some bots skip */
  .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  /* the links box: two rows to start, not the story box's height. Needs the
     .formhero prefix to outrank the hero's own textarea min-height. */
  .field textarea.links,.formhero .field textarea.links,#contactform .field textarea.links{min-height:0;height:auto}
  /* SUBMIT IS FULL WIDTH on every form, Phil 2026-09-22: "all forms should
     have the full width button." Matches Book a Call under it. */
  .formcard button[type="submit"]{display:block;width:100%;text-align:center}
  /* the NDA request: a quiet row above submit, not a gate in front of the form */
  .ndacheck{margin:-4px 0 var(--s-2)}
  .ndacheck label{display:flex;gap:10px;align-items:center;cursor:pointer;
       font-size:var(--t-s);color:var(--body-c)}
  .ndacheck input{width:18px;height:18px;accent-color:var(--signal);flex:none;margin:0}
  .ndacheck .hint{margin:4px 0 0 28px;font-size:var(--t-s);color:var(--dim);font-weight:400}
  /* THE LIFTED BAND, for a form page's FAQ. Phil 2026-09-23: "it's like a FAQ
     for each form. Full width style this, with that full width background
     style." Same band as contact.html's (style guide 08, the ground law):
     full-bleed tint with hairlines, content stays in the column. */
  .band{position:relative}
  .band::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;
       left:calc(50% - 50vw);right:calc(50% - 50vw);
       background:linear-gradient(var(--card),var(--card)),var(--paper);
       border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
       pointer-events:none}
  .band .faq{max-width:none}