/* Calmora — ported verbatim from design/Main.dc.html (helmet <style>).
   Exact values from the design. Do not snap to a grid. */

:root{
  --ink:#0B1220; --ink-2:#141E33; --paper:#F7F7F4; --paper-2:#EEEEE9;
  --muted:#5B6478; --muted-dark:rgba(247,247,244,0.66);
  --rule:rgba(11,18,32,0.14); --rule-dark:rgba(247,247,244,0.16);
  --blue:#1D4ED8; --blue-bright:#3B7BFF; --amber:#E0A21B;
  --display:'Sora',ui-sans-serif,system-ui,'Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans',ui-sans-serif,system-ui,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none} a:hover{color:var(--blue-bright)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-0.015em;margin:0}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;display:inline-block}
.dark .eyebrow{color:var(--amber)}
.btn{font-family:var(--display);font-weight:600;font-size:15px;padding:14px 22px;border-radius:6px;display:inline-flex;align-items:center;gap:8px;min-height:48px;border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--blue-bright);color:#fff}
.btn-ghost{border-color:var(--rule);color:var(--ink);background:transparent} .btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-ghost-light{border-color:var(--rule-dark);color:var(--paper)} .btn-ghost-light:hover{background:var(--paper);color:var(--ink)}
.pill{font-family:var(--body);font-weight:500;font-size:14px;padding:10px 14px;border-radius:999px;border:1.5px solid rgba(247,247,244,0.28);background:transparent;color:rgba(247,247,244,0.85);cursor:pointer;min-height:40px;line-height:1}
.field{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(247,247,244,0.32);color:var(--paper);font-family:var(--display);font-weight:600;font-size:22px;padding:6px 0 10px;outline:none}
.field::placeholder{color:rgba(247,247,244,0.34);font-weight:500}
.field:focus{border-bottom-color:var(--blue-bright)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,247,244,0.6)}
section{padding:104px 0}
.dark{background:var(--ink);color:var(--paper)}
.dim{background:var(--paper-2)}
.h2{font-size:clamp(30px,3.3vw,42px);line-height:1.12;margin:18px 0 16px;max-width:19ch}
.sub{max-width:60ch;font-size:18px;color:var(--muted)}
.dark .sub{color:var(--muted-dark)}
.card-dark{background:var(--ink-2);padding:32px 28px 36px;display:flex;flex-direction:column;gap:10px}
.card-dark h3{font-size:19px;line-height:1.3}
.card-dark p{font-size:15.5px;color:var(--muted-dark)}
.card{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:34px 30px 32px;display:flex;flex-direction:column;gap:12px}
.card h3{font-size:22px;line-height:1.25}
.card p{font-size:16px;color:var(--muted)}
.num{font-family:var(--mono);font-size:12px;color:var(--blue-bright);letter-spacing:.1em}
.phase{display:grid;grid-template-columns:120px minmax(0,1fr);gap:32px;padding:36px 0;border-top:1px solid var(--rule-dark)}
.phase:last-child{border-bottom:1px solid var(--rule-dark)}
.phase h3{font-size:23px;margin:0 0 10px}
.phase p{color:var(--muted-dark);max-width:64ch;font-size:16.5px}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:8px}
.list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
.list li{font-size:15px;padding:10px 0;border-top:1px solid var(--rule);color:var(--muted)}
.list li:first-child{border-top:0}
.fine{font-family:var(--mono);font-size:12px;color:rgba(247,247,244,0.5);letter-spacing:.04em}
@media (max-width:900px){
  .wrap{padding:0 22px}
  section{padding:72px 0}
  .hero-grid{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .grid-4{grid-template-columns:minmax(0,1fr) !important}
  .grid-3{grid-template-columns:minmax(0,1fr) !important}
  .grid-2{grid-template-columns:minmax(0,1fr) !important}
  .phase{grid-template-columns:minmax(0,1fr);gap:8px}
  .navlinks{display:none !important}
  .h1{font-size:38px !important}
  .email-row{flex-direction:column}
  .email-row .btn{justify-content:center}
  .names-grid{grid-template-columns:minmax(0,1fr) !important}
}

/* Static-build additions only. No design values changed above this line. */

/* Focus visibility for keyboard users. The design has no focus style for
   pills and buttons; without one they are unusable by keyboard. */
.pill:focus-visible,.btn:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
.field:focus-visible{outline:none}

/* The design renders pills through sc-for. In plain JS they are real
   buttons in a container, so reset the UA button box. */
.pill{-webkit-appearance:none;appearance:none;font-family:var(--body)}

/* Respect reduced-motion for the one transition we add. */
.btn,.pill{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
@media (prefers-reduced-motion:reduce){
  .btn,.pill{transition:none}
}