/* ══════════════════════════════════════════════════════
   ZEXCA — the Contact page's own layer
   ══════════════════════════════════════════════════════
   It sits on `about.css`, which sits on `landing.css`, which sits on
   `dashboard.css`. The editorial scale — the kicker, the display sizes, the
   section rhythm — is the About page's and is not restated here.

   ── WHY THIS PAGE IS QUIET ──
   The About page opens with a rendered room because its reader is curious. The
   reader here came to type four fields and leave. So: no canvas, no third
   scene, no hero the height of a screen, and the form begins inside the first
   screenful. The restraint is the design, not an omission.

   ── THE PREFIX IS `cu-`, NOT `ct-` ──
   `ct-` is the contracts module's, taken in `dashboard.css` — `.ct-row`,
   `.ct-state`, `.ct-no`, `.ct-val`, `.ct-mid`, `.ct-end`, `.ct-sub` — and
   `zexca-depth.css` lifts `body.depth .ct-row` on top of it. This page loads
   both stylesheets, so `.ct-row` here arrived with a border, a background and
   12px of padding it never asked for. Do not rename it back.

   ── THE FIELDS ARE THE PRODUCT'S FIELDS ──
   The inputs deliberately match `dashboard.css`'s form controls — same height,
   same radius, same focus ring, same error red. A public form that looks
   nothing like the one inside the account reads as a third-party bolt-on, and
   on a financial site that is the exact impression a phishing page gives.
   ══════════════════════════════════════════════════════ */

body.cu{
  /* One accent that is not gold, for the things that inform rather than
     invite: the rail's rules, the note beside the form. Gold stays on what a
     reader should actually press. */
  --cu-live:var(--info);
  --cu-live-pale:var(--info-pale);
  --cu-live-line:var(--info-line);
}

/* ══ 01 · HERO ════════════════════════════════════════
   Sized by what it holds. A contact page that costs a full screen of scrolling
   before the first field is a contact page that failed its reader. */
.cu-hero{
  position:relative;
  padding-block:calc(var(--ld-nav-h) + var(--ab-s4)) var(--ab-s2);
  overflow:hidden;
}
/* Two washes and a hairline grid. Flat colour under a headline this size reads
   as unfinished; a rendered scene reads as a different page's job. */
.cu-hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 120% at 8% 0%,rgba(232,182,71,.10),transparent 60%),
    radial-gradient(70% 100% at 100% 100%,rgba(127,180,212,.06),transparent 62%);
}
.cu-hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 80%);
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.cu-hero-in{position:relative;z-index:1;max-width:900px;}
.cu-hero .ab-lead{max-width:56ch;}

/* ══ SECTION RHYTHM ═══════════════════════════════════
   Closer together than the About page's. That page is telling a story and the
   air between sections is part of it; this one is answering a request, and a
   reader in a hurry should not scroll through air between two things they
   need. */
.cu-sec{padding-block:var(--ab-s4);}
/* The form section is the exception. Everywhere else the section gap is air
   that helps; between the lead and the field a reader came to fill it is a
   hundred and sixty pixels of nothing to scroll past, so this one gap is the
   About page's scale minus a step. */
#write.cu-sec{padding-block:var(--ab-s3) var(--ab-s4);}
.cu-sec.cu-members{padding-block:var(--ab-s3);}
.cu-sec .ab-head{margin-bottom:var(--ab-s3);}

/* ══ 02 · THE FORM ════════════════════════════════════ */
.cu-write{display:grid;gap:var(--ab-s3);align-items:start;}
@media(min-width:960px){
  /* The form takes the wider track. The rail is a margin note, not a column
     with equal claim to the page. */
  .cu-write{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);}
}

.cu-form-wrap{
  border:1px solid var(--line);border-radius:var(--r3);
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(232,182,71,.045),transparent 58%),
    var(--bg-1);
  padding:clamp(22px,3vw,38px);
}
.cu-form{display:grid;gap:var(--ab-s2);}
.cu-form-t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(19px,2.2vw,24px);letter-spacing:-.018em;color:var(--fg);
}

.cu-row{display:grid;gap:var(--ab-s2);}
@media(min-width:600px){ .cu-row{grid-template-columns:repeat(2,minmax(0,1fr));} }

.cu-f{display:grid;gap:7px;min-width:0;}
.cu-f label{
  font-size:12.5px;font-weight:500;color:var(--fg-2);letter-spacing:.005em;
}
.cu-f input,.cu-f textarea,.cu-f select{
  width:100%;font-family:var(--f-body);font-size:14.5px;color:var(--fg);
  background:var(--bg-0);
  border:1px solid var(--line);border-radius:var(--r2);
  padding:12px 14px;
  /* 46px, so a field is a comfortable target on a phone and does not trigger
     iOS's zoom-on-focus — which needs the 14.5px above as much as the height. */
  min-height:46px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.cu-f textarea{min-height:150px;resize:vertical;line-height:1.66;}
.cu-f input:hover,.cu-f textarea:hover{border-color:var(--line-2);}
.cu-f input:focus,.cu-f textarea:focus,.cu-f select:focus{
  outline:none;border-color:var(--gold-line);
  box-shadow:0 0 0 3px var(--gold-pale);
}
/* Focus has to be visible for a keyboard as well as a mouse, and the ring
   above is the visible state — so the global outline is replaced, not removed. */
.cu-f input:focus-visible,.cu-f textarea:focus-visible,.cu-f select:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px;
}
.cu-f input::placeholder,.cu-f textarea::placeholder{color:var(--fg-3);}

/* The native arrow differs on every platform and none of them match this
   palette, so the control keeps the native menu and draws its own mark. */
.cu-select{position:relative;display:grid;}
.cu-select select{
  appearance:none;-webkit-appearance:none;padding-inline-end:42px;cursor:pointer;
}
.cu-select .ic{
  position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--fg-3);pointer-events:none;
}

.cu-hint{font-size:12px;line-height:1.5;color:var(--fg-3);}
.cu-under{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.cu-count{
  font-family:var(--f-mono);font-size:11px;color:var(--fg-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cu-count.near{color:var(--warn);}

/* ── Errors ──
   Beside the field that caused them. An error summary at the top of a form is
   a reader scrolling back and forth guessing which box is wrong. */
.cu-err{
  display:flex;align-items:flex-start;gap:7px;
  font-size:12.5px;line-height:1.5;color:var(--down);
}
.cu-err::before{content:'!';flex:none;
  font-family:var(--f-mono);font-weight:600;font-size:11px;
  width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  background:var(--down-pale);border:1px solid var(--down-line);
  margin-top:1px;}
.cu-f.bad input,.cu-f.bad textarea,.cu-f.bad select{
  border-color:var(--down-line);
}
.cu-f.bad input:focus,.cu-f.bad textarea:focus{
  box-shadow:0 0 0 3px var(--down-pale);
}

/* ── The one refusal the form makes on its own ── */
.cu-guard{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:var(--r2);
  border:1px solid var(--warn-line);background:var(--warn-pale);
  font-size:12.5px;line-height:1.6;color:var(--fg-2);
}
.cu-guard .ic{width:16px;height:16px;flex:none;color:var(--warn);margin-top:1px;}

.cu-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding-top:6px;
}
.cu-status{font-size:12.5px;line-height:1.5;color:var(--fg-3);}
.cu-status.bad{color:var(--down);}
.cu-status.busy{color:var(--gold-lt);}

.cu-noscript{
  margin-top:4px;padding:12px 14px;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--bg-0);
  font-size:12.5px;line-height:1.6;color:var(--fg-3);
}

/* ── The confirmation ── */
.cu-sent{display:grid;gap:12px;justify-items:start;}
.cu-sent-ic{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--up-line);border-radius:var(--r3);
  background:var(--up-pale);color:var(--up);
}
.cu-sent-ic .ic{width:22px;height:22px;}
.cu-sent h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;color:var(--fg);
}
.cu-sent > p{font-size:14.5px;line-height:1.72;color:var(--fg-2);max-width:56ch;}
.cu-sent-n{font-size:13px !important;color:var(--fg-3) !important;}
/* The reference, set as a figure: it is the one thing on this panel somebody
   may need to copy. */
.cu-ref{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border:1px solid var(--gold-line);border-radius:var(--r2);
  background:var(--gold-pale);
}
.cu-ref span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);
}
.cu-ref b{
  font-family:var(--f-mono);font-size:17px;font-weight:600;color:var(--gold-lt);
  letter-spacing:.02em;user-select:all;
}

/* ── The rail ── */
.cu-rail{
  display:grid;gap:var(--ab-s2);
  padding-inline-start:clamp(0px,2vw,22px);
}
@media(min-width:960px){
  /* A rule rather than a box: the rail annotates the form, and a second card
     beside the first would read as a second thing to do. */
  .cu-rail{border-inline-start:1px solid var(--line-2);}
}
.cu-rail-t{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cu-live);font-weight:500;
}
html[lang="fa"] .cu-rail-t,html[lang="ar"] .cu-rail-t{
  letter-spacing:0;text-transform:none;font-family:var(--f-body);
}
.cu-rail-l{list-style:none;display:grid;gap:18px;}
.cu-rail-l li{font-size:13.5px;line-height:1.66;color:var(--fg-3);}
.cu-rail-l b{display:block;color:var(--fg);font-weight:600;font-size:14px;
  margin-bottom:3px;letter-spacing:-.008em;}
.cu-rail-n{
  font-size:12.5px;line-height:1.66;color:var(--fg-3);
  padding-top:var(--ab-s2);border-top:1px solid var(--line-2);
}

/* ══ 03 · MEMBERS ═════════════════════════════════════ */
.cu-note{
  display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:1fr;
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--line);border-radius:var(--r3);
  background:
    radial-gradient(110% 130% at 0% 0%,rgba(127,180,212,.06),transparent 60%),
    var(--bg-1);
}
@media(min-width:760px){ .cu-note{grid-template-columns:auto 1fr;align-items:start;} }
.cu-note-ic{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border:1px solid var(--cu-live-line);border-radius:var(--r3);
  background:var(--cu-live-pale);color:var(--cu-live);
}
.cu-note-ic .ic{width:21px;height:21px;}
.cu-note-t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(19px,2.4vw,26px);line-height:1.24;letter-spacing:-.02em;
  color:var(--fg);margin-bottom:12px;text-wrap:balance;
}
.cu-note p{font-size:14.5px;line-height:1.74;color:var(--fg-2);max-width:68ch;}
.cu-note .ld-cta-row{margin-top:var(--ab-s2);}

/* ══ 04 · SAFETY ══════════════════════════════════════
   The loudest thing on the page, and the only place a warning colour is used
   at this size. It earns that: it is the sentence that protects money. */
.cu-warn{
  display:grid;gap:clamp(18px,2.6vw,30px);grid-template-columns:1fr;
  padding:clamp(24px,3.4vw,44px);
  border:1px solid var(--warn-line);border-radius:var(--r3);
  background:
    radial-gradient(110% 130% at 0% 0%,rgba(240,185,11,.07),transparent 60%),
    var(--bg-1);
}
@media(min-width:820px){ .cu-warn{grid-template-columns:auto 1fr;align-items:start;} }
.cu-warn-ic{
  display:grid;place-items:center;width:52px;height:52px;flex:none;
  border:1px solid var(--warn-line);border-radius:var(--r3);
  background:var(--warn-pale);color:var(--warn);
}
.cu-warn-ic .ic{width:25px;height:25px;}
.cu-warn-b .ab-kicker{color:var(--warn);}
.cu-warn-t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(20px,2.8vw,30px);line-height:1.24;letter-spacing:-.022em;
  color:var(--fg);text-wrap:balance;max-width:27ch;
  margin-bottom:var(--ab-s2);
}
.cu-warn-b > p{font-size:14.5px;line-height:1.74;color:var(--fg-2);max-width:62ch;}
.cu-warn-b > p b{color:var(--warn);font-weight:600;}
.cu-warn-l{list-style:none;display:grid;gap:10px;margin-top:var(--ab-s2);}
.cu-warn-l li{
  position:relative;padding-inline-start:22px;
  font-size:13.5px;line-height:1.62;color:var(--fg-3);
}
.cu-warn-l li::before{
  content:'';position:absolute;inset-inline-start:4px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--warn);opacity:.75;
}
/* Wide: the reason on the left, the two tells on the right. The card is nearly
   half empty otherwise, and these two belong beside each other — one says why
   an impersonation works, the other says how to spot it. Column gap only: a
   row gap would stack on the kicker's and the headline's own margins and open
   a hole under the title. */
@media(min-width:1180px){
  .cu-warn-b{display:grid;gap:0 clamp(28px,3.4vw,52px);
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start;}
  .cu-warn-b .ab-kicker,.cu-warn-t{grid-column:1 / -1;}
  .cu-warn-l{margin-top:0;padding-top:5px;}
}

/* ══ 05 · COMPANY DETAILS ═════════════════════════════
   `.cu-blank` deliberately matches `.lg-blank` in `legal.css`. This page does
   not load that stylesheet — it would drag in the whole Legal Center layout —
   but an unfilled field has to look identical in both places, or a reader sees
   two different things and assumes they mean two different things. */
.cu-fields{display:grid;gap:10px;}
@media(min-width:640px){ .cu-fields{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1040px){ .cu-fields{grid-template-columns:repeat(4,1fr);} }
.cu-field{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r2);
  background:var(--bg-1);
}
.cu-field span{font-size:12.5px;color:var(--fg-3);}
.cu-blank{
  font-style:normal;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--fg-3);
  padding:2px 8px;border:1px dashed var(--line);border-radius:3px;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.02) 0 6px,transparent 6px 12px);
  white-space:nowrap;flex:none;
}

/* ══ REDUCED MOTION ═══════════════════════════════════
   The page owns no motion of its own beyond the shared reveals; the transitions
   on the fields are state feedback rather than decoration, and they go too when
   a reader asks for less. */
@media(prefers-reduced-motion:reduce){
  .cu-f input,.cu-f textarea,.cu-f select{transition:none;}
}
body.no-motion .cu-f input,
body.no-motion .cu-f textarea,
body.no-motion .cu-f select{transition:none;}

/* ══ PRINT ════════════════════════════════════════════
   Almost nobody prints this, and the one who does wants the confirmation
   reference — so the controls go and the panels stay. */
@media print{
  .ld-nav,.ld-cursor,.ld-skip,.cu-rail,.ld-cta-row,.cu-actions{display:none !important;}
  .cu-hero::before,.cu-hero::after{display:none !important;}
  .ld-rev{opacity:1 !important;transform:none !important;}
}