/* subcontext.com/newdistribution: our series on AI distribution in
   insurance, on its own (layouts/newdistribution). Ported from the design
   (one screen: title and film on the left, the reading list and the
   question box on the right, the mailing list's form across the bottom),
   dark only, like the rest of the marketing site. The form is our own lead form embed, restyled at the end
   of this file through its --sclf-* properties. */
/* Layout: one screen. Left: title, welcome film, signup bar. Right: the agent. Reading list sits just below the fold. */
:root{
  --paper:#0E1C34; --bone:#132644; --card:#182E52; --ink:#F1EDE3; --mute:#A9B1C0;
  --signal:#EC5A62; --signal-tint:#3A2236; --sky:#16345C; --sky-ink:#8CC3FF;
  --hair:rgba(241,237,227,.13); --hair-strong:rgba(241,237,227,.3); --navy:#0A162B; --on-navy:#F1EDE3;
  --display:"Archivo",-apple-system,"Helvetica Neue",sans-serif;
  --body:"Plus Jakarta Sans",-apple-system,"Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--sky-ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1680px;margin:0 auto;padding-inline:clamp(16px,3.2vw,56px)}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

.nav{border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.lock{display:flex;align-items:center;gap:12px;text-decoration:none}
.wm{font-family:var(--display);font-weight:800;letter-spacing:-.035em;font-size:19px;position:relative;padding-right:.32em}
.wm::after{content:"";position:absolute;top:.04em;right:0;width:.24em;height:.24em;border-radius:50%;background:var(--signal)}
.lock .div{width:1px;height:16px;background:var(--hair-strong)}
.lock .sec{font-size:13px;font-weight:500;color:var(--mute)}
.nav a.close{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);color:var(--mute);text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.nav a.close:hover{color:var(--ink);border-color:currentColor;background:var(--bone)}
.nav a.close:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* one measurement system: 16px base gap, 18px radius, 48px control height */
.stage{position:relative;padding-block:clamp(14px,2vh,32px);overflow:hidden}

.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 90% 0%,var(--sky),transparent 70%),radial-gradient(35% 45% at 0% 100%,var(--signal-tint),transparent 70%)}
.grid{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(16px,2vh,24px) clamp(24px,2.5vw,40px)}
@media (min-width:1000px){.grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);align-items:stretch}}
.left,.right{display:flex;flex-direction:column;gap:clamp(16px,2vh,24px);min-width:0;min-height:0}
.right{gap:clamp(28px,3.6vh,44px)}

.head{display:flex;flex-direction:column;gap:12px}
.left{container-type:inline-size}
h1{font-family:var(--display);font-weight:900;font-size:clamp(36px,10.6cqi,72px);line-height:.85;letter-spacing:-.05em;margin:-.04em 0 0}
h1 span{color:var(--signal)}
.thesis{font-size:clamp(15px,1.15vw,20px);line-height:1.5;color:var(--mute);max-width:46ch;margin:0}
.thesis b{color:var(--ink);font-weight:700}
.byline{font-size:14px;line-height:1.4}
.byline a{color:inherit;text-decoration:none;transition:opacity .15s}
.byline a:hover{opacity:.7}
.byline a:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.byline .by-sub{display:block;margin-top:2px}
.from{color:var(--mute)}
.by-sub{grid-column:1/-1;color:var(--mute);font-size:13px}

.player{position:relative;flex:1 1 0;min-height:240px;align-self:flex-start;aspect-ratio:1/1;width:auto;max-width:100%;border-radius:18px;overflow:hidden;background:var(--navy);color:var(--on-navy);cursor:pointer;border:0;padding:0;font:inherit;text-align:left;display:block}
@media (max-width:999px){.player{flex:none;width:100%;min-height:0}
  .grid{grid-template-columns:minmax(0,1fr)}
  h1{font-size:min(11.6vw,64px)}
  .left,.right{display:contents}
  .head{order:1}.ask{order:2;margin-top:0}.signup{order:3}.player{order:4}.feat{order:5}}
.player canvas{position:absolute;inset:0;width:100%;height:100%}
.player .play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--signal);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(212,61,68,.2);transition:transform .2s}
.player:hover .play{transform:translate(-50%,-50%) scale(1.06)}
.player .over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:20px}
.player .who{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.2}
.player .who small{display:block;font-family:var(--body);font-weight:500;font-size:12.5px;opacity:.75;letter-spacing:0;margin-top:2px}
.player .soon{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy);background:rgba(241,237,227,.12);border:1px solid rgba(241,237,227,.22);border-radius:999px;padding:5px 10px;margin-top:4px}
.player{cursor:default}
.player .tag{color:rgba(241,237,227,.7)}

.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vh,40px) clamp(20px,1.8vw,32px)}
@media (max-width:720px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.feat{grid-template-columns:1fr}}
.pic{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);border-radius:18px;overflow:hidden;text-decoration:none;min-width:0;transition:border-color .15s,transform .15s}
.pic:hover{border-color:var(--hair-strong);transform:translateY(-2px)}
.pic img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;background:var(--bone)}
.pic .meta{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px;flex:1;min-width:0}
.pic .ty{font-family:var(--mono);font-size:9.5px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pic .tt{font-weight:700;font-size:clamp(13px,.88vw,15px);line-height:1.3;min-height:calc(3 * 1.3em);overflow-wrap:break-word}
.pic .wh{font-size:11.5px;line-height:1.3;color:var(--mute);margin-top:auto}

.ask-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ask-h h2{font-family:var(--display);font-weight:800;font-size:15.5px;line-height:1.2;letter-spacing:-.015em;margin:0}
.ask-h p{margin:2px 0 0;font-size:13px;color:rgba(241,237,227,.68)}
.ask{margin-top:auto;background:var(--navy);color:var(--on-navy);border:1px solid var(--navy);border-radius:18px;padding:14px}
.ask-in{display:flex;align-items:center;gap:12px}
.av{width:32px;height:32px;border-radius:50%;background:#D43D44;color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.ask-in input{flex:1;min-width:0;height:42px;font:inherit;font-size:14px;padding:0 18px;border-radius:999px;border:1px solid rgba(241,237,227,.22);background:rgba(241,237,227,.07);color:var(--on-navy)}
.ask-in input::placeholder{color:rgba(241,237,227,.5)}
.ask-in button{height:42px;font:inherit;font-weight:700;font-size:13.5px;padding:0 20px;border-radius:999px;border:0;background:#D43D44;color:#fff;cursor:pointer;flex:none}
.starters{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.starter{font:inherit;font-size:12px;font-weight:600;color:var(--on-navy);background:transparent;border:1px solid rgba(241,237,227,.22);border-radius:999px;padding:5px 11px;cursor:pointer}
.starter:hover{background:rgba(241,237,227,.1)}
.log{display:flex;flex-direction:column;gap:10px;max-height:220px;overflow-y:auto;margin-top:12px}
.log[hidden]{display:none!important}
.msg{max-width:100%;padding:10px 14px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.u{align-self:flex-end;background:#2F7FD6;color:#fff;border-radius:14px 14px 4px 14px;max-width:85%}
.msg.a{align-self:flex-start;background:rgba(241,237,227,.08);border:1px solid rgba(241,237,227,.12);border-radius:14px 14px 14px 4px}
.msg .src{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#FF8A8F;text-decoration:none}
.msg.think{opacity:.6;font-style:italic}

.signup{grid-column:1/-1;background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:16px}
/* The strap line, then the form; side by side on wide screens, in the stage's two columns. */
.signup{display:grid;grid-template-columns:1fr;gap:12px 32px;align-items:center}
@media (min-width:1000px){.signup{grid-template-columns:subgrid;align-items:center}.signup .su{align-self:center}.signup .row1{padding-left:8px}}
.signup h2{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.45vw,20px);line-height:1.2;letter-spacing:-.025em;margin:0}
.signup .fine{display:block;font-size:11.5px;color:var(--mute);margin-top:4px}
.signup .fine a{color:inherit}
.signup .note{display:block;color:var(--mute);font-size:13px;margin-top:4px}
.su{display:flex;gap:12px;flex-wrap:wrap}
.su input[type=email]{flex:1 1 240px;min-width:0;height:48px;font:inherit;font-size:16px;padding:0 18px;border-radius:999px;border:1px solid var(--hair-strong);background:var(--paper);color:var(--ink)}
.su button{height:48px;font:inherit;font-weight:700;font-size:15px;padding:0 28px;border-radius:999px;border:0;background:var(--signal);color:#fff;cursor:pointer;flex:0 0 auto}
.su button:hover{filter:brightness(1.05)}
.err{grid-column:1/-1;color:var(--signal);font-size:13px;margin:0}
.err:empty{display:none}
.done{display:flex;align-items:center;gap:14px}
.done .tick{width:40px;height:40px;border-radius:50%;background:var(--sky);color:var(--sky-ink);display:grid;place-items:center;font-weight:800;flex:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:1000px) and (min-height:640px){
  body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
  main{flex:1;display:flex;flex-direction:column;min-height:0}
  .stage{flex:1;display:flex;flex-direction:column;min-height:0}
  .stage > .grid{flex:1;width:100%;grid-template-rows:minmax(0,1fr) auto}
  .feat{flex:1;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}
  .pic img{flex:1 1 0;min-height:72px;height:0;aspect-ratio:auto}
  .pic .meta{flex:none}
}

/* ─── The mailing list's form: the leadform embed (a subscription form,
   inline layout) drawn as the design's pill input and red button. ─── */
.signup .sclf{--sclf-accent:var(--signal);--sclf-accent-text:#fff;--sclf-radius:999px;--sclf-border:var(--hair-strong);
  --sclf-input-bg:var(--paper);--sclf-text:var(--ink);--sclf-muted:var(--mute);--sclf-gap:12px;max-width:none;font-family:var(--body)}
.signup .sclf-field .sclf-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.signup .sclf-input{height:48px;min-height:48px;font-size:16px;padding:0 18px}
.signup .sclf-button{height:48px;min-height:48px;padding:0 28px;font-weight:700;font-size:15px}
.signup .sclf-note{display:none} /* one field: no "fields marked * are required" */
.signup .sclf-form{align-items:center}
.signup .sclf-actions{align-self:center}
/* The wording sits under the input and button, not between them. */
.signup .sclf-consent-notice{order:9;margin:0;font-size:11.5px;color:var(--mute)}
.signup .sclf-consent-notice a{color:inherit}
.signup .sclf-success{border:0;padding:0;display:flex;flex-direction:column;gap:2px}
.signup .sclf-success :is(h2,h3,h4){font-family:var(--display);font-weight:800;font-size:20px;margin:0}
.signup .sclf-success p{color:var(--mute);font-size:14px}
.signup .unavailable{margin:0;color:var(--mute);font-size:14px}

/* A card whose article has no picture: the paper tile the image sits on. */
.pic .noimg{display:block;width:100%;aspect-ratio:5/2;background:var(--bone)}
@media (min-width:1000px) and (min-height:640px){.pic .noimg{flex:1 1 0;min-height:72px;height:0;aspect-ratio:auto}}