/* ============================================================
   ALEOOP — Signal Report (homepage #signal-report)
   The lead-capture section: a sample Signal Report whose figures read
   clearly, with values, contacts and quotes behind frosted glass. A paper
   card on the frost holds the two-field form; submitting lifts the frost.
   Promoted from /lab/lead-capture/c/ (approved version C, 24 Sep 2026).
   site.css is untouched and every rule here is scoped under .sr.

   Pre-spine by design — the section sits before .spine-start, so the
   chapter numerals 01-08 keep their numbers.
   ============================================================ */

/* The campaign anchor is the whole point of this section: every LinkedIn post
   and both Google campaigns land on /#signal-report. The homepage sets no
   scroll-padding, so without this the nav covers the eyebrow and the first
   line of the heading on arrival. */
#signal-report{scroll-margin-top:6rem}

.sr{
  --sr-lost:#E78FA5;          /* --magenta lifted toward --ink so a 12px chip clears 4.5:1 */
  --sr-lost-bg:rgba(216,30,91,.14);
  --sr-glass:rgba(14,16,32,.42);
  position:relative;
  isolation:isolate;
}

/* indigo atmosphere — how the system lights a section that carries no number */
.sr::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 30%,rgba(45,51,244,.16),transparent 70%);
}

/* ---------- the pitch ---------- */

.sr h2{
  max-width:none;                      /* reset site.css h2{max-width:20ch}, shaped for the homepage */
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.75rem);
  line-height:1.16;letter-spacing:-.01em;text-wrap:balance;
  margin:.9rem 0 .8rem;
}
.sr-lede{color:var(--muted);font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.6;margin:0;max-width:46ch}

/* ---------- the form ---------- */

.sr-form{display:grid;gap:.9rem;margin:0}
.sr-field{display:grid;gap:.4rem}
.sr-form label{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.sr-form input[type=text],.sr-form input[type=email]{
  font:inherit;color:var(--ink);background:var(--bg);
  border:1px solid var(--border);border-radius:10px;
  padding:.78rem .9rem;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.sr-form input::placeholder{color:#5D668F}
.sr-form input:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(45,51,244,.35)}
.sr-form input[aria-invalid=true]{border-color:var(--sr-lost)}
.sr-error{margin:-.2rem 0 0;font-size:.85rem;color:var(--sr-lost)}
.sr-error[hidden]{display:none}

button.sr-submit{font:inherit;font-weight:600;cursor:pointer;justify-content:center;margin-top:.25rem}
button.sr-submit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr-submit[aria-busy=true]{pointer-events:none;opacity:.72}
.sr-submit[aria-busy=true] .arw{animation:sr-pulse 1s var(--ease) infinite}
@keyframes sr-pulse{50%{transform:translateX(4px);opacity:.4}}

.sr-fine{margin:.35rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.55}

/* ---------- the report ---------- */

.sr-report{display:grid;gap:1.25rem}

.sr-rep-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.9rem}
.sr-signal{margin:0;font-size:clamp(1.25rem,1rem + 1vw,1.6rem);font-weight:600;letter-spacing:-.01em;line-height:1.2;max-width:42ch}
.sr-shipped{margin:.35rem 0 0;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sr-shipped b{color:var(--ink);font-weight:600}

.sr-flag{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.3rem .8rem;
}
.sr-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);flex:none}

.sr-figures{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;
}
.sr-figure{background:var(--card);padding:1.05rem 1.15rem}
.sr-fig-val{
  display:block;font-family:var(--f-mono);font-weight:600;
  font-size:clamp(1.2rem,1rem + .9vw,1.7rem);font-variant-numeric:tabular-nums;line-height:1.1;
}
.sr-fig-lab{display:block;margin-top:.4rem;font-size:.78rem;color:var(--muted);line-height:1.4}
.sr-figure.is-money .sr-fig-val{color:var(--lime);text-shadow:0 0 24px rgba(176,222,94,.35)}
.sr-figure.is-lost .sr-fig-val{color:var(--sr-lost)}

.sr-panels{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.25rem;align-items:start}

.sr-panel{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.sr-panel-head{padding:.95rem 1.25rem;border-bottom:1px solid var(--border);background:var(--card-2)}
.sr-panel-title{margin:0;font-size:.95rem;font-weight:600}
.sr-panel-sub{margin:.1rem 0 0;font-size:.82rem;color:var(--muted)}

.sr-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--border);
}
.sr-row.is-lost{background:linear-gradient(90deg,var(--sr-lost-bg) 0 3px,transparent 3px)}
.sr-acct{display:grid;gap:.15rem;min-width:0}
.sr-acct-name{font-weight:600;font-size:.95rem}
.sr-acct-meta{font-size:.82rem;color:var(--muted)}
.sr-row-right{display:flex;align-items:center;gap:.75rem;flex:none}
.sr-amount{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--lime)}
.sr-chip{
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--border);border-radius:999px;padding:.15rem .6rem;color:var(--muted);white-space:nowrap;
}
.sr-chip.is-lost{color:var(--sr-lost);border-color:rgba(231,143,165,.45);background:var(--sr-lost-bg)}

.sr-subtotal{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem 1.25rem;border-top:1px solid var(--border);background:var(--card-2);font-size:.88rem;
}
.sr-subtotal .sr-amount{color:var(--lime)}

.sr-locknote{
  display:flex;align-items:center;gap:.55rem;margin:0;
  padding:.8rem 1.25rem;border-top:1px solid var(--border);background:var(--card-2);
  font-size:.82rem;color:var(--muted);
}
.sr-locknote svg{flex:none}
.is-unlocked .sr-locknote{display:none}

.sr-mail{padding:1.05rem 1.25rem;display:grid;gap:.85rem}
.sr-mail-key{margin:0 0 .25rem;font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sr-mail-subject{margin:0;font-weight:600;font-size:.95rem}
.sr-mail-body{font-size:.88rem;color:var(--muted)}
.sr-mail-body p{margin:0 0 .6rem}
.sr-mail-body p:last-child{margin-bottom:0}
.sr-token{color:var(--ink);background:var(--card-2);border-radius:6px;padding:0 .25rem}

/* the blur IS the offer */
.sr-veil{filter:blur(6px);user-select:none;transition:filter .55s var(--ease)}
.is-unlocked .sr-veil{filter:none}

/* ---------- the closing row, revealed with the report ---------- */

.sr-closing{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.25rem;padding:1.3rem 1.5rem;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
}
.sr-closing p{margin:0;color:var(--muted);max-width:52ch}
.sr-closing b{color:var(--ink);font-weight:600}
.sr-closing[hidden]{display:none}


/* ============================================================
   C - FROST: the report IS the section, the gate is glass over it
   ============================================================ */

.sr-c .sr-stage{position:relative;overflow:hidden}
.sr-c.is-unlocked .sr-stage{overflow:visible;height:auto}
.sr-c .sr-locknote{display:none}

.sr-c .sr-frost{
  position:absolute;inset:var(--sr-frost-top,34%) 0 0 0;z-index:2;
  display:grid;place-items:start center;
  padding:clamp(1.5rem,3.5vh,2.5rem) 0 clamp(1.5rem,3.5vh,2.5rem);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}

/* Everything the frost does happens here, on a layer of its own. Put the
   mask on .sr-frost and it fades the card too — which is the card looking
   translucent when its background is flat. */
.sr-c .sr-frost-veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,16,32,0),var(--sr-glass) 20%,rgba(14,16,32,.62));
  backdrop-filter:blur(16px) saturate(.8);
  -webkit-backdrop-filter:blur(16px) saturate(.8);
  /* no-repeat is load bearing: a repeating mask draws a second transparent
     band wherever the layer is overrun, and reads as a cut edge */
  mask-image:linear-gradient(180deg,transparent,#000 14%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%);
  mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
  mask-size:100% 100%;-webkit-mask-size:100% 100%;
}
.sr-c.is-unlocked .sr-frost{opacity:0;transform:translateY(-1.5rem);pointer-events:none;visibility:hidden}

/* The card is the one light object on a dark, frosted report: the same shift
   to --paper the homepage makes at its proof chapter. On --card it matched the
   panels behind it and read as more report, not as the thing to answer. */
.sr-c .sr-frost-card{
  width:min(38rem,calc(100% - 2rem));
  position:relative;z-index:1;
  background:var(--paper);color:var(--paper-ink);border-radius:18px;
  padding:clamp(1.6rem,2.8vw,2rem);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.25);
}
.sr-c .sr-frost-card .eyebrow{color:var(--primary)}
.sr-c .sr-frost-card h2{color:var(--paper-ink)}
.sr-c .sr-frost-card .sr-lede,
.sr-c .sr-frost-card .sr-fine,
.sr-c .sr-frost-card .sr-form label{color:var(--paper-muted)}
.sr-c .sr-frost-card .sr-form input[type=text],
.sr-c .sr-frost-card .sr-form input[type=email]{background:#fff;color:var(--paper-ink);border-color:#CFCDC4}
.sr-c .sr-frost-card .sr-form input::placeholder{color:#8A8C9A}
.sr-c .sr-frost-card .sr-form input:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px rgba(45,51,244,.22)}
.sr-c .sr-frost-card .sr-error{color:#B3123F}          /* --magenta darkened to clear 4.5:1 on paper */
.sr-c .sr-frost-card .sr-form input[aria-invalid=true]{border-color:#B3123F}
/* lime on paper is a soft edge; the ink keeps the button a shape */
.sr-c .sr-frost-card .sr-submit{box-shadow:inset 0 0 0 1px rgba(20,22,43,.14)}
.sr-c .sr-frost-card .sr-submit:focus-visible{outline-color:var(--paper-ink)}
.sr-c .sr-frost-card ::selection{background:rgba(45,51,244,.2);color:var(--paper-ink)}

/* ---------- C · the full report (the client's version, 23 Sep) ---------- */

.sr-when-unlocked{display:none}
.is-unlocked .sr-when-locked{display:none}
.is-unlocked .sr-when-unlocked{display:block}
.sr-mail-actions.sr-when-unlocked{display:none}
.is-unlocked .sr-mail-actions.sr-when-unlocked{display:flex}
.sr-figure .sr-when-unlocked.is-clear .sr-fig-val{color:var(--mint)}

.sr-c .sr-panels{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr)}
.sr-c .sr-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem}
.sr-panel-note{margin:0;font-size:.8rem;color:var(--muted)}

/* account · in their words · deal */
.sr-c .sr-accounts{--sr-q:15.5rem;--sr-d:9.5rem}
.sr-cols,.sr-c .sr-row{display:grid;grid-template-columns:minmax(0,1fr) var(--sr-q) var(--sr-d);column-gap:1.1rem}
.sr-cols{
  padding:.55rem 1.25rem;border-bottom:1px solid var(--border);background:var(--card-2);
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.sr-cols span:nth-child(2){padding-left:1.1rem}
.sr-cols span:last-child{text-align:right}
.sr-group{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 1.25rem;background:var(--bg);border-bottom:1px solid var(--border);
  font-size:.78rem;color:var(--muted);
}
.sr-group span:first-child{font-weight:600;color:var(--ink)}

.sr-c .sr-row{align-items:stretch}
.sr-c .sr-row.is-drafting{background:linear-gradient(90deg,var(--primary) 0 3px,rgba(45,51,244,.08) 3px)}
.sr-c .sr-acct p{margin:0}
.sr-acct-name{line-height:1.35}
.sr-type{
  display:inline-block;vertical-align:.12em;margin-left:.35rem;
  font-size:.66rem;font-weight:600;border-radius:4px;padding:.05rem .4rem;
  background:var(--card-2);color:var(--muted);border:1px solid var(--border);
}
.sr-type.is-new{color:#B7BAFF;border-color:rgba(45,51,244,.55)}
.sr-owner{margin-left:.35rem;font-size:.78rem;font-weight:400;color:var(--muted)}
.sr-ready{margin-top:.25rem!important;font-size:.78rem;font-weight:600}
.sr-ready.is-only{color:var(--mint)}
.sr-ready.is-only::before{
  content:"";display:inline-block;width:.55em;height:.3em;margin:0 .45em .2em .05em;
  border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg);
}
.sr-ready.is-more{color:var(--ink)}
.sr-ready.is-more span{font-weight:400;color:var(--muted)}

.sr-quote{
  margin:0;padding-left:1.1rem;border-left:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;
}
.sr-quote blockquote{margin:0;font-family:var(--f-serif);font-size:.92rem;line-height:1.3;color:var(--ink)}
.sr-quote figcaption{font-size:.72rem;color:var(--muted);white-space:nowrap}
.sr-src{
  display:inline-block;margin-right:.45rem;font-size:.66rem;font-weight:600;
  border-radius:4px;padding:0 .4rem;background:var(--card-2);border:1px solid var(--border);color:var(--ink);
}

.sr-deal{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.3rem}
.sr-deal-top{display:flex;align-items:center;gap:.6rem}
.sr-closedate{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sr-row.is-lost .sr-closedate{color:var(--sr-lost)}

/* outreach: what Aleoop pulled from the account is marked, the rest is template */
.sr-ctx-legend{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.78rem;color:var(--muted)}
.sr-ctx-swatch{width:14px;height:9px;border-radius:2px;background:rgba(45,51,244,.28);box-shadow:inset 0 -1px 0 #7C81FF}
.sr-ctx{
  color:var(--ink);background:rgba(45,51,244,.28);box-shadow:inset 0 -1px 0 #7C81FF;
  border-radius:3px;padding:0 .2rem;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.sr-mail-actions{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.8rem 1.25rem;border-top:1px solid var(--border);background:var(--card-2);
}
.sr-mail-hint{font-size:.78rem;color:var(--muted)}
.sr-copy{font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sr-send{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:.82rem;font-weight:600;color:var(--ink);
  border:1px solid var(--lime);border-radius:8px;padding:.45rem .85rem;
}
.sr-send.is-locked{border-color:var(--border);color:var(--muted)}
.sr-c .sr-frost-card h2{margin:.6rem 0 .65rem;font-size:clamp(1.4rem,1.1rem + 1.1vw,1.85rem)}
.sr-c .sr-frost-card .sr-fine{font-size:.8rem;margin-bottom:.35rem}
.sr-c .sr-frost-card .sr-lede{max-width:none;margin-bottom:1.4rem}
.sr-c .sr-frost-card .sr-form{grid-template-columns:1fr 1fr;column-gap:1rem}
.sr-c .sr-frost-card .sr-error,
.sr-c .sr-frost-card .sr-submit,
.sr-c .sr-frost-card .sr-fine{grid-column:1 / -1}


/* no backdrop-filter (older Firefox): fall back to blurring the data itself */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sr-c .sr-frost-veil{background:linear-gradient(180deg,rgba(14,16,32,0),rgba(14,16,32,.9) 20%,rgba(14,16,32,.98))}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* three columns need the room; below it the draft moves under the list */
@media (max-width:1100px){
  .sr-c .sr-panels{grid-template-columns:1fr}
}
/* the quote drops under the account and runs the full row */
@media (max-width:760px){
  .sr-cols{display:none}
  .sr-c .sr-row{grid-template-columns:minmax(0,1fr) auto;row-gap:.75rem}
  .sr-c .sr-quote{grid-column:1 / -1;grid-row:2;border-left:0;padding-left:0;border-top:1px dashed var(--border);padding-top:.7rem}
  .sr-quote figcaption{white-space:normal}
  .sr-group{flex-direction:column;gap:.1rem}
}
@media (max-width:900px){
  .sr-panels{grid-template-columns:1fr}
  .sr-c .sr-frost{inset:var(--sr-frost-top,28%) 0 0 0}
}
@media (max-width:640px){
  .sr-figures{grid-template-columns:repeat(2,1fr)}
  .sr-rep-head{align-items:flex-start}
  .sr-closing{padding:1.1rem 1.15rem}
  .sr-c .sr-stage{display:flex;flex-direction:column}
  .sr-c .sr-frost{order:-1;position:static;inset:auto;padding:0;margin-bottom:1.5rem;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:none;-webkit-mask-image:none}
  .sr-c .sr-frost-veil{display:none}
  .sr-c .sr-frost-card{width:100%}
  .sr-c .sr-stage{overflow:visible;height:auto}
  .sr-c .sr-frost-card .sr-form{grid-template-columns:1fr}
  .sr-c.is-unlocked .sr-frost{display:none}
}
@media (max-width:460px){
  .sr-row{flex-wrap:wrap}
  .sr-row-right{width:100%;justify-content:space-between}
  .sr-c .sr-row{grid-template-columns:1fr}
  .sr-c .sr-deal{grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .sr-c .sr-quote{grid-row:3}
}

@media (prefers-reduced-motion:reduce){
  .sr *{animation:none!important;transition-duration:.01ms!important}
}