:root{
  --bg:#F4F2FB; --panel:#FBFAFE; --line:rgba(80,60,160,.13);
  --ink:#191428; --muted:#5A5472; --faint:#5A5472;
  --accent:#7557E5; --accent-2:#7557E5; --danger:#C74848;
  --radius:16px;
}
*{box-sizing:border-box}
/* The violet glow sits on its own layer, not on body's background.
   Two reasons. It faded to `transparent`, which is rgba(0,0,0,0), so the ramp
   drifted toward grey; it now ends on the same violet at zero alpha. And a .17
   alpha spread over ~200px gives fewer than 45 possible 8-bit steps, which reads
   as horizontal stripes on displays that don't dither - most noticeable on a
   blank screen during load, when there is nothing else to look at. The eased
   stops stretch the ramp and the noise layer breaks up whatever banding is left. */
.glow,.glow::after{position:fixed;inset:0 0 auto 0;height:520px;pointer-events:none;z-index:-1}
.glow{background:
  radial-gradient(1300px 560px at 50% -140px,
    rgba(139,107,255,.16) 0%,
    rgba(139,107,255,.13) 18%,
    rgba(139,107,255,.09) 36%,
    rgba(139,107,255,.05) 54%,
    rgba(139,107,255,.02) 72%,
    rgba(139,107,255,0) 88%)}
.glow::after{content:"";opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:800px;margin:0 auto;padding:64px 24px 80px;transition:max-width .2s ease}
.step>.eyebrow,.step>h1,.wrap>.eyebrow,.wrap>h1{text-align:center}
.step>.lede,.wrap>.lede{text-align:center;margin:0 auto 36px;max-width:62ch;text-wrap:pretty}
#step-form .card{max-width:592px;margin:0 auto}
.wrap.wide{max-width:1060px}
/* The wrap stays wide for the calendar step, which needs the room. Legal text
   does not: ~1010px runs well over 100 characters a line, which is unreadable
   and looks like a wall. The agreement step gets its own measure. */
#optin,#agreement,#step-agreement{max-width:740px;margin-left:auto;margin-right:auto}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:600;margin:0 0 12px}
h1{font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;font-weight:650}
.lede{color:var(--muted);font-size:17px;margin:0 0 36px;max-width:52ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.row{grid-template-columns:1fr}}
input,textarea,select{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);padding:12px 14px;font:inherit;font-size:15px;margin:0 0 18px;transition:border-color .15s
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
textarea{min-height:110px;resize:vertical;line-height:1.5}
.hint{font-size:13px;color:var(--faint);margin:-12px 0 18px}
button,.btn{
  display:block;width:100%;background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:15px 20px;font:inherit;font-weight:650;font-size:16px;cursor:pointer;
  transition:filter .15s;text-align:center;text-decoration:none
}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.12)}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost,.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
button.ghost:hover,.btn.ghost:hover{border-color:var(--accent);color:var(--ink);filter:none}
.err{color:var(--danger);font-size:14px;margin:14px 0 0;min-height:20px}
.step{display:none}.step.on{display:block}
.check{display:flex;gap:11px;align-items:flex-start;margin:0 0 20px;cursor:pointer;font-weight:400}
.check input{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--accent);cursor:pointer}
.check span{font-size:14px;color:var(--muted);line-height:1.5}
.tips{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--line);padding-top:22px}
.tips li{color:var(--faint);font-size:14px;padding:0 0 8px 22px;position:relative}
.tips li::before{content:"";position:absolute;left:6px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent-2)}
.foot{text-align:center;color:var(--faint);font-size:13px;margin:34px 0 0}
/* orb */
.stage{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 0 4px}
.orb{
  position:relative;width:190px;height:190px;border-radius:50%;margin:8px 0 26px;
  background:radial-gradient(circle at 32% 28%,#a78bff 0%,var(--accent) 42%,#2a1d6b 100%);
  box-shadow:0 0 70px -8px rgba(124,92,255,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.orb::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(124,92,255,.35);opacity:0;transition:opacity .2s}
.orb.live{animation:breathe 3.4s ease-in-out infinite}
.orb.talking{transform:scale(1.07);box-shadow:0 0 110px -4px rgba(124,92,255,.8)}
.orb.talking::after{opacity:1;animation:ring 1.4s ease-out infinite}
.orb.listening{background:radial-gradient(circle at 32% 28%,#7ff3de 0%,var(--accent-2) 45%,#0f4d43 100%);box-shadow:0 0 70px -8px rgba(56,225,196,.5)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.22);opacity:0}}
.status{font-size:14px;color:var(--muted);min-height:22px;margin:0 0 8px}
.status b{color:var(--ink);font-weight:600}
.caption{background:#0d0d14;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:15px;color:var(--muted);text-align:left;max-height:190px;overflow-y:auto;margin:22px 0 24px;line-height:1.55}
.caption p{margin:0 0 10px}
.caption p:last-child{margin:0}
.caption .who{color:var(--faint);font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:2px}
/* uploads */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed var(--line);border-radius:10px;background:#0d0d14;padding:22px 16px;margin:0 0 14px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.drop:hover,.drop:focus,.drop.over{border-color:var(--accent);background:#101018;outline:none}
.drop-main{font-size:15px;color:var(--ink)}
.drop-main u{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}
.drop-sub{font-size:12px;color:var(--faint)}
.filelist{list-style:none;padding:0;margin:0 0 18px}
.filelist li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);background:#0d0d14;border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin:0 0 8px}
.filelist .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.filelist .st{font-size:12px;color:var(--faint);flex:none}
.filelist .st.ok{color:var(--accent-2)}
.filelist .st.bad{color:var(--danger)}
/* calendar */
.cal{margin:26px auto 0;max-width:1000px}
.cal iframe{display:block;width:100%;height:760px;border:0;background:transparent}
@media(max-width:720px){.cal iframe{height:1120px}}

.legal{max-height:55vh;overflow-y:auto;background:transparent;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:15px;line-height:1.75;color:var(--ink);margin:0 0 24px;text-align:left;scrollbar-color:var(--accent) transparent}
.legal:focus{outline:none;border-color:var(--accent)}
.legal h2{font-size:15px;color:var(--ink);margin:22px 0 8px;font-weight:650;letter-spacing:0}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 11px}
.legal ul{margin:0 0 11px;padding-left:20px}
.legal li{margin:0 0 5px}
.legal strong{color:var(--ink);font-weight:600}
.legal hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.sign-status{color:#0F8A5F;font-size:14px;font-weight:600;text-align:center;margin:14px 0 0}
.check a{color:var(--accent);text-decoration:underline}
.caption,.drop,.filelist li{background:var(--panel)}
.caption{width:100%;min-height:190px;overflow-wrap:anywhere}
.drop:hover,.drop:focus,.drop.over{background:#EBE8F6}
@media print{
  .legal{max-height:none;overflow:visible;border:0;padding:0}
  body{background:white;color:black}
  .wrap{max-width:none;padding:0}
  #signature-form,.step:not(#step-agreement){display:none!important}
  #step-agreement{display:block!important}
  .card{border:0;padding:0}
}

.publish{border:1px solid var(--line);border-radius:12px;padding:14px 18px 16px;margin:0 0 20px}
.publish legend{padding:0 8px;font-weight:500;color:var(--muted);font-size:12px}
.publish label{display:flex;gap:11px;align-items:flex-start;width:100%;margin:12px 0 0;cursor:pointer}
/* the global `input{width:100%}` turns a radio into a full-width row and
   squeezes its label into a sliver. Radios opt out of it.
   Size and offset are optical, not arithmetic: a 13px UA control against a 15px
   bold label reads as floating even when its box is mathematically centred on
   the line, because the em box centre sits above the glyph centre. Matching the
   control to the label size and dropping it ~1px lands it on the letterforms. */
.publish input[type=radio]{width:15px;height:15px;min-width:0;flex:0 0 auto;
  margin:5px 0 0;padding:0;accent-color:var(--accent);cursor:pointer}
.publish > label > span{flex:1 1 auto;font-size:14px;font-weight:400;color:var(--muted);line-height:1.5}
.publish b{display:block;font-weight:600;color:var(--ink);font-size:15px;margin:0 0 2px}

.formstep{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 22px;text-align:center}

.pillrow{margin:0 0 20px}
.pill{display:inline-block;padding:7px 16px;border-radius:999px;
  background:rgba(117,87,229,.10);border:1px solid rgba(117,87,229,.24);
  color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1}

/* The signature is the signing ACT, so it looks like one: cursive, and it must
   match the legal name typed directly above it. System cursive faces only, no
   webfont, so it renders instantly and never blocks the form. */
.sigfield{font-family:'Snell Roundhand','Apple Chancery','Segoe Script','Brush Script MT',cursive;
  font-size:26px;line-height:1.5;padding:10px 14px}
.sigmatch{font-weight:500;text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted)}
.sigmatch.ok{color:#0F8A5F}
.sigdate{font-size:14px;color:var(--muted);margin:-8px 0 20px}

#interview,#additional,#outcome{max-width:740px;margin-left:auto;margin-right:auto}
.client-field .hint{display:block;font-size:13px;color:var(--faint);margin:6px 0 0}

/* Geist for everything, including the label layer. One family on the page:
   labels are separated from content by size, tracking and case, not by a
   second typeface. Display runs LIGHT (200/300) because Geist is drawn for it.
   label" from "this is content", which is the job bold used to do badly.
   Poppins was tried and rejected 2026-09-18; Inter before that. */
body,input,textarea,select,button,.btn{
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;letter-spacing:-0.02em}
h1{font-weight:200;letter-spacing:-0.03em}
h2{font-weight:300}

/* the mono label layer: eyebrows, chips, step markers and every form label */
.eyebrow,.formstep,.pill,label,legend,.client-field{
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.check span,.client-field input,.client-field textarea,.client-field > span,
.publish > label > span,.publish b{
  font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  text-transform:none;letter-spacing:normal}
.client-field > span{font-size:15px}
.legal,.legal p,.legal li,.legal strong{font-family:'Geist',-apple-system,sans-serif;text-transform:none;letter-spacing:normal}
.legal h2{font-size:12px;font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.sigfield{font-family:'Snell Roundhand','Apple Chancery','Segoe Script','Brush Script MT',cursive!important;text-transform:none;letter-spacing:normal}
.sigmatch{font-family:'Geist',sans-serif;text-transform:none;letter-spacing:normal}
.client-field input,.client-field textarea,.client-field span{font-weight:400}
.client-field > span{font-size:15px;color:var(--muted)}
.publish b{font-weight:500;font-size:15px}
.publish > label > span{font-weight:400;font-size:15px}
.check span,.client-note,.hint,.sign-status,.legal,.legal p,.legal li{font-weight:400}
.check span{font-size:15px}
.sign-status{font-weight:500}
.legal strong,.legal h2{font-weight:600}
/* the native file input renders its own chrome; keep it from shouting */
input[type=file]{font-weight:400;font-size:15px;font-family:inherit}

/* ── Blueprint ground ──────────────────────────────────────────────────────
   Two grids at different scales, the way a real drawing sheet works: a fine
   28px lattice and a heavier 140px major grid over it. Both drift slowly and
   at slightly different rates, so the plane reads as depth rather than as
   wallpaper. Masked to fade out behind the card and at the edges, so the
   content never sits on top of lines. z-index -2, under the violet bloom. */
.blueprint{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(72,54,150,.055) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(72,54,150,.055) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(52,38,120,.085) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, rgba(52,38,120,.085) 0 1px, transparent 1px 140px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 8%, #000 18%, rgba(0,0,0,.55) 52%, transparent 88%);
          mask-image:radial-gradient(120% 90% at 50% 8%, #000 18%, rgba(0,0,0,.55) 52%, transparent 88%);
  animation:sheet 90s linear infinite}
/* a deeper ground so the card lifts off the plane instead of lying flat on it */
.blueprint::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 60% at 50% 120%, rgba(30,20,70,.16), transparent 70%),
    radial-gradient(70% 45% at 50% -10%, rgba(30,20,70,.10), transparent 70%)}
@keyframes sheet{
  from{background-position:0 0, 0 0, 0 0, 0 0}
  to  {background-position:0 -280px, 280px 0, 0 -140px, 140px 0}}
@media (prefers-reduced-motion:reduce){.blueprint{animation:none}}

/* the card is the drawing on the sheet: lift it, and let the ground show */
.card{box-shadow:0 1px 2px rgba(30,20,70,.04),0 12px 40px -12px rgba(30,20,70,.16),0 40px 80px -40px rgba(30,20,70,.22)}
/* header moves inside the card, so it needs the card's padding rhythm */
.card > .client-brand{margin:0 0 26px}
.card > .client-head{margin-bottom:30px}
.card > .client-head h1{margin-top:0}

/* ── The drafting table ────────────────────────────────────────────────────
   Brand v3's base is #0F0C1A with violet #8B6BFF; this page was the only
   surface rendering it light. The GROUND goes dark and the card stays a bright
   sheet on top of it. Contrast is what reads as expensive: a lit object on a
   dark table, not a light box on a light box.
   Nothing inside the card changes, so every contrast ratio already checked
   still holds. */
body{background:#0B0813;color:var(--ink)}
.blueprint{
  background-image:
    repeating-linear-gradient(0deg,  rgba(139,107,255,.10) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(139,107,255,.10) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(139,107,255,.17) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, rgba(139,107,255,.17) 0 1px, transparent 1px 140px);
  -webkit-mask-image:radial-gradient(130% 95% at 50% 6%, #000 12%, rgba(0,0,0,.6) 48%, transparent 92%);
          mask-image:radial-gradient(130% 95% at 50% 6%, #000 12%, rgba(0,0,0,.6) 48%, transparent 92%)}
.blueprint::after{background:
  radial-gradient(75% 48% at 50% -12%, rgba(139,107,255,.26), transparent 72%),
  radial-gradient(60% 40% at 50% 118%, rgba(34,211,238,.09), transparent 72%)}
/* the violet bloom becomes the light falling on the table */
.glow{height:760px;background:
  radial-gradient(1200px 620px at 50% -180px,
    rgba(139,107,255,.32) 0%, rgba(139,107,255,.16) 34%,
    rgba(139,107,255,.06) 62%, rgba(139,107,255,0) 86%)}

/* the sheet: warm white, hairline top highlight, and a real shadow under it */
.card{background:#FCFBFE;border:0;border-radius:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(139,107,255,.14),
    0 2px 6px rgba(6,4,16,.30),
    0 26px 60px -18px rgba(6,4,16,.55),
    0 70px 120px -60px rgba(6,4,16,.75)}

/* The interview and calendar steps used to sit bare on the dark ground and had
   light text for it. They live on the sheet now, so those overrides are gone:
   white-on-white made the heading invisible. */
.caption{background:rgba(255,255,255,.55);border-color:var(--line);color:var(--muted)}
.client-cal{background:#FCFBFE}

/* ── Fit and rhythm ───────────────────────────────────────────────────────── */
.client-brand img{width:118px}

/* the step marker is a chip like the brand pill, not a floating line of caps */
.formstep{display:block;width:fit-content;padding:6px 14px;border-radius:999px;
  background:rgba(117,87,229,.09);border:1px solid rgba(117,87,229,.20);
  color:var(--accent);margin:0 auto 26px;text-align:center}

/* the options were jumpy: one size, one rhythm, a smaller weight step between
   title and body, and more air between rows */
.publish{padding:18px 20px 20px}
.publish label{margin:18px 0 0;gap:12px}
.publish label:first-of-type{margin-top:6px}
.publish b{font-weight:500;font-size:15px;line-height:1.55;margin:0 0 3px;color:var(--ink)}
.publish > label > span{font-size:15px;line-height:1.55;color:var(--muted)}
.publish input[type=radio]{margin-top:6px}

/* ── Crisp grid, calmer sheet ──────────────────────────────────────────────
   Two fixes to the blueprint.

   1. DOUBLE LINES: the major grid was 140px and the fine one 28px, so every
      major line landed exactly on a fine line and drew two hairlines on the
      same pixel. The major grid is now offset by half a cell, so it falls
      BETWEEN fine lines the way a real drawing sheet reads.

   2. BLUR: a 1px hairline animating continuously is never on a whole pixel, so
      it renders half-lit across two rows forever. steps() advances it exactly
      one pixel at a time, so every frame lands on the pixel grid. Same speed,
      no smear. */
.blueprint{
  background-position:0 0, 0 0, 14px 14px, 14px 14px;
  animation:sheet 90s steps(280,end) infinite}
@keyframes sheet{
  from{background-position:0 0, 0 0, 14px 14px, 14px 14px}
  to  {background-position:0 -280px, 280px 0, 14px -266px, 294px 14px}}

/* the sheet was near-white and glaring against the ink. Pull it down toward the
   brand's paper tone, and sink the inputs BELOW it so they read as wells rather
   than as brighter panels sitting on top. */
.card{background:#F4F2FA}
.card input,.card textarea,.card select{background:#ECE9F5;border-color:rgba(80,60,160,.16)}
.card input:focus,.card textarea:focus,.card select:focus{background:#F2F0FA;border-color:var(--accent)}
.publish{background:rgba(255,255,255,.42);border-color:rgba(80,60,160,.14)}
.publish input[type=radio]{background:#ECE9F5}

/* Motion removed: a drifting grid behind a form someone is filling in is a
   distraction, not depth. The grid stays, it just holds still.
   The card stays LIGHT on the ink ground: a dark glass card was tried here on
   2026-09-18 and rejected - it swallowed the lockup, flattened the contrast the
   dark ground was bought for, and read as murky rather than expensive. */
.blueprint{animation:none}
@media print{.blueprint,.glow{display:none}}

/* ── Depth without glare ───────────────────────────────────────────────────
   Eye strain here was never the card's brightness, it was the CONTRAST EDGE:
   #F4F2FA against #0B0813 is a ~19:1 jump with nothing in between, so the eye
   has no step to land on. Three changes, none of which dim the content:

   1. The ground stops being flat black. It is a deep violet-to-ink gradient
      that lifts toward the middle, so the area immediately around the card is
      closer in value to it.
   2. An ambient halo sits behind the card and bleeds outward, so the edge
      arrives gradually instead of as a cliff.
   3. The sheet warms very slightly. Cool white on cold ink reads harsher than
      warm paper at the same lightness.
   Depth comes from those layers stacking, which is also what makes it read as
   an object on a surface rather than a rectangle on a colour. */
body{background:
  radial-gradient(120% 80% at 50% 38%, #221A3E 0%, #150F2B 42%, #0C0817 78%, #080511 100%)
  no-repeat fixed;
  background-color:#080511}

/* the halo: large, soft, centred on the card, sitting under it */
.wrap{position:relative}
.wrap::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 620px at 50% 34%, rgba(167,139,255,.17), transparent 68%),
    radial-gradient(1100px 520px at 50% 4%,  rgba(139,107,255,.13), transparent 72%),
    radial-gradient(820px 460px at 50% 104%, rgba(34,211,238,.055), transparent 72%)}

/* grid: brighter near the card, fading out toward the frame, so the plane has
   a horizon instead of an even wash */
.blueprint{
  -webkit-mask-image:radial-gradient(115% 80% at 50% 34%, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.28) 66%, transparent 86%);
          mask-image:radial-gradient(115% 80% at 50% 34%, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.28) 66%, transparent 86%)}
.blueprint::after{background:none}
.glow{display:none}

/* warm paper, and a soft bleed at the card edge so it glows into the ground
   rather than cutting against it */
.card{background:#F2F0F7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 0 0 1px rgba(167,139,255,.20),
    0 0 60px rgba(167,139,255,.14),
    0 0 120px rgba(139,107,255,.10),
    0 34px 70px -24px rgba(0,0,0,.62),
    0 90px 150px -80px rgba(0,0,0,.85)}
.card input,.card textarea,.card select{background:#E9E6F2;border-color:rgba(80,60,160,.15)}
.card input:focus,.card textarea:focus,.card select:focus{background:#EFEDF7}
.publish{background:rgba(255,255,255,.40);border-color:rgba(80,60,160,.13)}

/* ── Wealth, not warfare ───────────────────────────────────────────────────
   Three things separate "expensive and technical" from "army": grain, optics,
   and printing marks. No reticles, no camo, no targeting.

   1. GRAIN. The single biggest upgrade available to a flat gradient. Real
      surfaces are never perfectly smooth, and a dark page without grain reads
      as a colour swatch. This is also what kills the last of the banding.
   2. AN ANAMORPHIC STREAK. A wide, very faint horizontal bloom behind the
      card, the way a cinema lens flares. Cinematic, not tactical.
   3. REGISTRATION MARKS. Thin corner brackets, as on a drawing sheet, a film
      frame or a classified cover page. Precision instead of aggression. */

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the lens streak: very wide, very flat, sitting just behind the card */
.wrap::after{content:"";position:fixed;left:-10%;right:-10%;top:30%;height:230px;
  z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%, rgba(178,152,255,.16), rgba(139,107,255,.05) 45%, transparent 72%);
  filter:blur(26px)}

/* Registration marks removed 2026-09-18. */

/* a whisper of chrome on the sheet's top edge, like light on a milled surface */
.card{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.8),
  inset 0 -1px 0 rgba(120,95,200,.10),
  0 0 0 1px rgba(167,139,255,.22),
  0 0 60px rgba(167,139,255,.14),
  0 0 130px rgba(139,107,255,.10),
  0 34px 70px -24px rgba(0,0,0,.66),
  0 100px 160px -80px rgba(0,0,0,.88)}

/* The lockup and the pill were reading as two competing logos. One word turns
   them into a sentence, and a badge that is the object of a sentence stops
   looking like a second mark. */
.presents{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin:14px 0 12px;text-align:center;font-weight:400}
.client-brand{margin-bottom:0}
.pillrow{margin:0 0 22px}

/* ── Optical depth ─────────────────────────────────────────────────────────
   The grid was sharp everywhere, which is what a texture does, not a surface.
   A second copy of it sits underneath, blurred, and is revealed only toward
   the frame, so the plane falls out of focus as it recedes. Real depth of
   field, the way a wide lens sees a table.

   Plus a light that tracks the cursor: not ambient drift (which was rejected),
   but a response. Nothing moves unless you move. */
.blueprint::before{content:"";position:absolute;inset:-40px;
  background-image:inherit;filter:blur(3px);opacity:.85;
  -webkit-mask-image:radial-gradient(100% 72% at 50% 34%, transparent 30%, rgba(0,0,0,.6) 62%, #000 88%);
          mask-image:radial-gradient(100% 72% at 50% 34%, transparent 30%, rgba(0,0,0,.6) 62%, #000 88%)}

.torch{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%),
    rgba(186,162,255,.13), rgba(139,107,255,.05) 42%, transparent 70%)}
@media (hover:hover) and (pointer:fine){.torch{opacity:1}}
@media (prefers-reduced-motion:reduce){.torch{display:none}}

/* Tried on the background and removed, 2026-09-18. Don't re-add without a
   reason that isn't "it sounds cool":
   - HORIZON: the haze above the rule read as a dirty dark band across the
     lower page, not a lit table edge.
   - PARALLAX: step 1 only scrolls ~294px on a tall window, so there is almost
     no travel for it to happen in. Tuned up until it was visible, then cut.
   - CHROMATIC EDGE: at a tasteful opacity it was invisible; at a visible one
     it looked like a filter.
   What survives is what works without motion: the grid with depth-of-field,
   grain, the ground gradient, the halo, and the cursor light. */

/* ── One grid, uniform squares ─────────────────────────────────────────────
   There were two grids stacked: a 28px lattice and a 140px major grid offset
   by half a cell. Together they read as uneven spacing, because a faint minor
   line next to a strong major one does not look like a smaller square, it
   looks like a mistake. One grid, one size, one weight. Every cell identical. */
.blueprint{
  background-image:
    repeating-linear-gradient(0deg,  rgba(139,107,255,.13) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(139,107,255,.13) 0 1px, transparent 1px 64px);
  background-position:0 0, 0 0}

/* One pill on the page, not three. "IzzyOS presents" is type, not a mark: the
   lockup plus a badge plus a second badge was three logos arguing. */
.presents{margin:0 0 14px;color:var(--faint);letter-spacing:.24em;font-size:11px}
.formstep{display:block;width:auto;padding:0;border:0;background:none;border-radius:0;
  color:var(--faint);font-size:11px;letter-spacing:.2em;margin:0 auto 26px}

/* Drawings on the background (floor plans, funnels, playbook plays) were all
   tried and all removed 2026-09-18. The grid alone is the background. */



/* The Remove control was wrapping under a long filename. The name takes the
   free space and truncates; the button is pinned right and never wraps. */
.client-files li{display:flex;align-items:center;gap:12px;justify-content:space-between}
.client-files li > span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-files button{flex:0 0 auto;width:auto;margin:0 0 0 auto;padding:5px 12px;
  font-size:13px;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px}
.client-files button:hover{border-color:var(--accent);color:var(--accent)}

/* The interview and calendar steps had no .card, so they sat bare on the ground
   while every other step had the sheet. The calendar iframe gets a tighter
   padding since it brings its own frame. */
#booking .card{padding:14px}
#interview .card{padding-bottom:28px}
.client-cal{border-radius:12px}

/* The native control prints "No file chosen" next to its own button and there
   is no way to target that text, so the input's colour goes transparent and the
   file-selector-button is styled back in. The list below is the real feedback. */
input[type=file]{color:transparent;padding:10px 14px}
input[type=file]::file-selector-button{
  font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  color:var(--accent);background:rgba(117,87,229,.10);
  border:1px solid rgba(117,87,229,.24);border-radius:8px;padding:7px 14px;margin-right:0}
input[type=file]::file-selector-button:hover{background:rgba(117,87,229,.16)}

/* a green tick instead of the words "— added", a bin instead of "Remove" */
.fmark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px}
.fmark.ok{color:#0F8A5F}
.fmark.wait{color:var(--faint)}
.fmark.bad{color:var(--danger)}
.fdel{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--faint);cursor:pointer}
.fdel:hover{color:var(--danger);border-color:rgba(199,72,72,.28);background:rgba(199,72,72,.07)}

/* Heading block, inside the card - the arrangement every page in this project
   uses. index.html used to leave its headings outside the card as bare
   children of .step, where the dark retrofit's near-black color:var(--ink)
   made them invisible against the dark ground. They now sit in the card like
   everywhere else, so they are dark-on-light and legible by construction
   rather than by a colour exception. .client-head was previously declared
   inline on each page that had one; it lives here now so every page agrees.

   Kept as a safety net: any heading still left outside a card gets light
   tokens so it can never go invisible on the dark ground again. */
.cal-note{margin:20px 0 0;font-size:14px;color:var(--muted);text-align:center}
.cal-note a{color:var(--accent);text-decoration:underline}
.client-head{text-align:center;margin:0 0 28px}
.client-head .eyebrow{margin:0 auto 10px}
.client-head h1{margin:0 0 12px}
.client-head .lede{margin:0 auto;max-width:62ch;text-align:center}
.step>h1,.wrap>h1{color:#EFECF9}
.step>.lede,.wrap>.lede{color:#A59DC2}
.step>.eyebrow,.wrap>.eyebrow{color:#8B6BFF}

/* Print flips the page to white, so the safety-net light tokens above would go
   white-on-white on paper. The agreement is meant to be printable. */
@media print{
  .step>h1,.wrap>h1,.step>.lede,.wrap>.lede{color:black}
  .step>.eyebrow,.wrap>.eyebrow{color:#555}
}