/* =========================================================================
   SARIVA HEALTHCARE — SITE IN PROGRESS
   Aubergine / plum palette · Newsreader headline · Archivo UI · green accent on the notify label.
   Animated anatomical brain-CT background.
   ========================================================================= */
:root{
  --bg:#F6F2EF;
  --bg-soft:#FBF8F5;
  --ink:#2A1E2E;
  --ink-soft:#6E6270;
  --muted:#9A8F9C;

  --plum:#6B4A6E;
  --plum-deep:#4A2E4D;
  --plum-deeper:#3B2440;

  --flame:#C0683F;
  --flame-soft:#CE7C52;

  /* green accent (clinical green, sampled from the campaign photo) */
  --green:#6B9220;
  --green-deep:#567715;
  --green-soft:#83A44E;

  --line:#E6DDE2;
  --line-2:#D8CCD3;

  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  height:100vh;
  height:100dvh;
  overflow:hidden;          /* no page scroll at all — one screen only */
  position:relative;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
svg{display:block}

/* -------------------------------------------------------------------------
   BRAIN-CT BACKGROUND — offset right, faint plum, animated scan
   ---------------------------------------------------------------------- */
.ct-bg{
  position:fixed;
  top:50%;left:62%;
  width:min(94vh,760px);
  height:min(94vh,760px);
  transform:translate(-50%,-50%);
  color:var(--plum);
  opacity:.13;
  z-index:0;
  pointer-events:none;
}
.ct-bg .rings circle,
.ct-bg .rings line,
.ct-bg .spokes line{vector-effect:non-scaling-stroke}

/* subtle "live" motion on the scan (respects reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  .ct-bg .rotor{animation:ctspin 120s linear infinite;transform-origin:300px 300px}
  @keyframes ctspin{to{transform:rotate(360deg)}}

  .ct-sweep{transform-origin:300px 300px;animation:sweep 6s linear infinite}
  @keyframes sweep{to{transform:rotate(360deg)}}

  .ct-brain{animation:pulse 5s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.9}50%{opacity:.45}}
}

/* -------------------------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------------------- */
.wrap{
  position:relative;z-index:1;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2svh,24px);
  padding:clamp(20px,4svh,52px) clamp(18px,4vw,56px);
  text-align:center;
}
/* footer sits under the card with breathing room */
.foot{margin-top:clamp(16px,3svh,34px)}
.card{width:min(880px,100%);display:flex;flex-direction:column;align-items:center}

/* -------------------------------------------------------------------------
   BADGE — "SITE IN PROGRESS" with flanking rules
   ---------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:1em;
  font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--plum);
  margin-bottom:clamp(16px,2.6svh,34px);
}
.badge::before,.badge::after{
  content:"";width:clamp(28px,5vw,54px);height:1px;background:var(--line-2);
}

/* -------------------------------------------------------------------------
   LOGO
   ---------------------------------------------------------------------- */
.logo{
  height:clamp(34px,5vh,50px);width:auto;
  margin-bottom:clamp(16px,3svh,38px);
}
.logo-text{
  font-family:var(--font);font-weight:700;font-size:2rem;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:clamp(30px,5vw,46px);
}

/* -------------------------------------------------------------------------
   HEADLINE — large Newsreader, "sustainment" italic flame + underline
   ---------------------------------------------------------------------- */
h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.4rem,5.2vw,5.2rem);
  line-height:1.04;
  letter-spacing:-.022em;
  color:var(--ink);
  max-width:min(1180px,94vw);   /* wide: spread across, not down */
  margin:0 auto clamp(12px,2svh,24px);
  text-wrap:balance;
}
h1 .accent{
  font-style:italic;
  color:var(--flame);
  border-bottom:2px solid var(--flame-soft);
  padding-bottom:.02em;
}
.sub{
  font-size:clamp(1.02rem,1.8vw,1.2rem);
  color:var(--ink-soft);
  max-width:48ch;
  margin:0 auto clamp(16px,3svh,38px);
}

/* -------------------------------------------------------------------------
   NOTIFY — label + pill field with plum button
   ---------------------------------------------------------------------- */
.notify-label{
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:clamp(.7rem,1.6svh,1rem);
}
.notify-form{width:min(560px,100%);margin:0 auto}
.field{
  display:flex;align-items:center;gap:8px;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:8px 8px 8px 12px;
  box-shadow:0 18px 40px -26px rgba(60,36,64,.4);
  transition:border-color .18s,box-shadow .18s;
}
.field:focus-within{border-color:var(--plum);box-shadow:0 0 0 3px rgba(107,74,110,.16),0 18px 40px -26px rgba(60,36,64,.4)}
.field input{
  flex:1;min-width:0;
  font-family:var(--font);font-size:1.02rem;
  padding:.85em 1em;border:0;background:transparent;color:var(--ink);
}
.field input:focus{outline:none}
.field input::placeholder{color:#A79DA9}
.field button{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font);font-weight:600;font-size:1rem;
  padding:.9em 1.7em;border:0;border-radius:11px;cursor:pointer;
  background:var(--plum-deep);color:#fff;
  transition:background .2s,transform .2s;
  white-space:nowrap;flex-shrink:0;
}
.field button:hover{background:var(--plum-deeper);transform:translateY(-1px)}
.field button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.field button svg{width:16px;height:16px}
.field button.loading{opacity:.7;pointer-events:none}
.field button.loading .btxt::after{content:'…'}

.msg{min-height:1.4em;margin-top:14px;font-size:.92rem;font-weight:500}
.msg.ok{color:var(--plum)}
.msg.err{color:#B5462F}

/* -------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------- */
.foot{font-size:.82rem;color:var(--muted)}

/* -------------------------------------------------------------------------
   RESPONSIVE — laptop · tablet · mobile
   Headline grows HORIZONTALLY (wide container, width-based size); the whole
   splash always fits ONE screen — no vertical scroll anywhere.
   ---------------------------------------------------------------------- */

/* Laptop (≤1366w) */
@media (max-width:1366px){
  h1{font-size:clamp(2.4rem,5.4vw,4.6rem);max-width:min(1080px,94vw)}
}

/* Small laptop / large tablet landscape (≤1100w) */
@media (max-width:1100px){
  .card{width:min(900px,100%)}
  h1{font-size:clamp(2.3rem,5.6vw,4rem);max-width:min(880px,94vw)}
  .sub{font-size:clamp(1rem,1.7vw,1.15rem)}
}

/* Tablet (≤820w) */
@media (max-width:820px){
  .ct-bg{left:58%;width:min(96vh,680px);height:min(96vh,680px);opacity:.12}
  h1{font-size:clamp(2.1rem,6vw,3.4rem);max-width:min(700px,92vw)}
  .sub{max-width:44ch}
}

/* Large phone (≤600w) */
@media (max-width:600px){
  .ct-bg{left:50%;width:150vw;height:150vw;opacity:.10}
  h1{font-size:clamp(1.9rem,7.4vw,2.9rem);max-width:94vw;line-height:1.06}
  .sub{font-size:.98rem;max-width:38ch}
  .badge{letter-spacing:.16em}
  .logo{height:clamp(32px,9vw,44px)}
}

/* Small phone (≤400w) */
@media (max-width:400px){
  h1{font-size:clamp(1.7rem,7.6vw,2.3rem)}
  .wrap{padding:18px 16px;gap:clamp(10px,1.8svh,18px)}
}

/* Stacked field on narrow screens */
@media (max-width:520px){
  .field{flex-direction:column;gap:8px;padding:8px}
  .field input{width:100%;text-align:center;padding:.9em}
  .field button{width:100%;justify-content:center;padding:.95em}
}

/* -------------------------------------------------------------------------
   HEIGHT-AWARE — on short viewports, trim gaps & headline so it still fits
   one screen WITHOUT scrolling (never clips the form).
   ---------------------------------------------------------------------- */
@media (max-height:820px){
  .wrap{gap:clamp(8px,1.4svh,18px)}
  h1{font-size:clamp(2rem,calc(3vw + 2svh),3.8rem)}
  .badge{margin-bottom:clamp(10px,1.8svh,22px)}
  .logo{margin-bottom:clamp(10px,1.8svh,24px)}
  .sub{margin-bottom:clamp(10px,1.6svh,20px)}
}
@media (max-height:680px){
  h1{font-size:clamp(1.7rem,calc(2.6vw + 1.8svh),2.9rem);line-height:1.05}
  .notify-label{margin-bottom:.55rem}
  .foot{margin-top:clamp(8px,1.4svh,14px)}
}
@media (max-height:560px){
  .badge{margin-bottom:8px}.logo{margin-bottom:8px;height:34px}
  h1{font-size:clamp(1.5rem,calc(2.2vw + 1.6svh),2.3rem)}
  .sub{margin-bottom:8px}
}