/* ============================================================================
   syn.css — Synalogic shared design system
   Direction: "Instrument" — light ground, brand palette, ruled structure,
   mono labels, zero radius. Hierarchy comes from size and family, never weight.

   CASCADE RULE, load-bearing — do not break:
     Everything in this file sits inside @layer. Per-page inline <style> blocks
     are NEVER layered. Unlayered declarations beat all layered ones regardless
     of specificity, so a page's own CSS always wins and pages can migrate onto
     this file one at a time without a flag day.
     Corollary: this file must contain zero !important (it would invert the
     layer order and break that guarantee).
   ========================================================================= */

@layer tokens, base, chrome, components, utilities;

/* ---------------------------------------------------------------- tokens - */
@layer tokens {
  :root{
    /* brand — unchanged from the live site */
    --syn-navy:#0D1B2A;
    --syn-teal:#1B9AAA;
    --syn-teal-deep:#127D8B;
    --syn-teal-pale:#E8F7F9;

    /* neutrals — biased very slightly toward the navy, not pure grey */
    --syn-ink:#3D4852;          /* body copy */
    --syn-ink-2:#6B7B8D;        /* secondary, mono labels */
    --syn-bg:#FFFFFF;
    --syn-bg-alt:#F7F8FA;
    --syn-rule:#D1D9E0;         /* structural hairline */
    --syn-rule-soft:#E7ECF0;    /* rule inside a list */

    /* type scale, ratio ~1.41, seven steps. Held to strictly. */
    --syn-t1:0.8125rem;   /* 13 — mono labels, captions */
    --syn-t2:1rem;        /* 16 — body */
    --syn-t3:1.3125rem;   /* 21 — lead, h3 */
    --syn-t4:1.8125rem;   /* 29 — h2 small */
    --syn-t5:2.5625rem;   /* 41 — h2 */
    --syn-t6:3.625rem;    /* 58 — h1 small / close */
    --syn-t7:5.125rem;    /* 82 — h1 */

    /* spacing ladder, base 6 */
    --syn-s1:0.375rem; --syn-s2:0.5625rem; --syn-s3:0.75rem;
    --syn-s4:1.125rem; --syn-s5:1.5rem;    --syn-s6:2.25rem;
    --syn-s7:3rem;     --syn-s8:4.5rem;    --syn-s9:6.25rem;

    /* families */
    --syn-display:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    --syn-text:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --syn-mono:"IBMPlexMono",ui-monospace,SFMono-Regular,Menlo,monospace;

    --syn-maxw:1200px;
    --syn-dur:.12s;

    /* Instrument is a zero-radius system. The token exists so a future
       exception is deliberate and greppable, not accidental. */
    --syn-radius:0;

    /* Breakpoints cannot be custom properties inside @media. These are the
       only four values this system uses; keep any new rule on one of them:
       1080px / 900px / 720px / 560px */
  }
  html{color-scheme:light;}
}

/* ------------------------------------------------------------------ fonts - */
/* Self-hosted: removes two render-blocking cross-origin chains (Google Fonts
   CSS, then gstatic) and the six different Raleway request strings the site
   had accumulated. latin-ext is fetched only if the page needs those glyphs. */
@font-face{font-family:"Archivo";src:url("/fonts/Archivo-latin-normal.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo";src:url("/fonts/Archivo-latin-ext-normal.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Archivo";src:url("/fonts/Archivo-latin-italic.woff2") format("woff2");font-weight:400 800;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo";src:url("/fonts/Archivo-latin-ext-italic.woff2") format("woff2");font-weight:400 800;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Raleway";src:url("/fonts/Raleway-latin-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Raleway";src:url("/fonts/Raleway-latin-ext-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Raleway";src:url("/fonts/Raleway-latin-italic.woff2") format("woff2");font-weight:400 600;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Raleway";src:url("/fonts/Raleway-latin-ext-italic.woff2") format("woff2");font-weight:400 600;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBMPlexMono";src:url("/fonts/IBMPlexMono-latin-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ------------------------------------------------------------------ base - */
@layer base {
  *,*::before,*::after{box-sizing:border-box;}

  body{
    margin:0;
    background:var(--syn-bg);
    color:var(--syn-ink);
    font-family:var(--syn-text);
    font-weight:400;
    font-size:var(--syn-t2);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* Display face, one weight. Hierarchy is carried by size, not weight. */
  h1,h2,h3,h4{
    margin:0;
    font-family:var(--syn-display);
    font-weight:700;
    color:var(--syn-navy);
    letter-spacing:-.028em;
    line-height:1.08;
    text-wrap:balance;
  }
  /* Synalogic headlines are full sentences carrying an accent clause, not
     two-word slogans — t7 overpowers them. t6 is the working display size;
     t7 is reserved for a short standalone statement. */
  h1{font-size:clamp(2rem,4.8vw,var(--syn-t6));}
  h2{font-size:clamp(1.65rem,3.4vw,var(--syn-t5));}
  h3{font-size:var(--syn-t4);}
  h4{font-size:var(--syn-t3);}
  p{margin:0;}
  ul,ol{margin:0;padding:0;list-style:none;}

  a{color:var(--syn-navy);text-decoration:none;}
  a:hover{color:var(--syn-teal-deep);}

  /* The site's one accent device: a single italic-teal phrase per heading,
     never more. Clears 3:1 contrast at heading sizes; never used on body
     copy, where it would not. */
  .accent{font-style:italic;color:var(--syn-teal);}

  /* Mono carries every label, reference, timing and figure caption. This is
     most of what makes the system read as engineered rather than assembled. */
  .mono{
    font-family:var(--syn-mono);
    font-size:var(--syn-t1);
    letter-spacing:.03em;
    color:var(--syn-ink-2);
    font-variant-numeric:tabular-nums;
  }

  .wrap{max-width:var(--syn-maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem);}

  :focus-visible{outline:2px solid var(--syn-teal-deep);outline-offset:2px;}

  img,svg,video{max-width:100%;height:auto;}

  .skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--syn-navy);color:#fff;padding:var(--syn-s3) var(--syn-s5);
  }
  .skip:focus{left:0;color:#fff;}

  h1[id],h2[id],h3[id]{scroll-margin-top:5rem;}
}

/* ---------------------------------------------------------------- chrome - */
@layer chrome {
  .nav{
    position:sticky;top:0;z-index:30;
    background:var(--syn-bg);
    border-bottom:1px solid var(--syn-navy);
  }
  .nav__in{display:flex;align-items:center;gap:var(--syn-s5);min-height:72px;}

  /* The wordmark is two-tone and has no space in it. */
  .brand{
    font-family:var(--syn-display);font-weight:700;
    font-size:var(--syn-t3);letter-spacing:-.03em;
    color:var(--syn-navy);margin-right:auto;
  }
  .brand b{font-weight:inherit;color:var(--syn-teal);}

  .nav__links{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.75rem);}
  .nav__links>a,.nav__dd>a{
    font-size:.9375rem;font-weight:600;color:var(--syn-ink);
    transition:color var(--syn-dur) ease;
  }
  .nav__links>a:hover,.nav__dd>a:hover{color:var(--syn-navy);}

  .nav__dd{position:relative;display:inline-flex;align-items:center;}
  .nav__dd>a{display:inline-flex;align-items:center;gap:.3rem;}
  .nav__caret{font-size:.6em;color:var(--syn-ink-2);transition:transform var(--syn-dur) ease;}
  .nav__menu{
    position:absolute;top:100%;left:0;margin-top:.25rem;min-width:230px;
    background:var(--syn-bg);border:1px solid var(--syn-navy);
    padding:var(--syn-s2);display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transform:translateY(4px);
    transition:opacity var(--syn-dur) ease,transform var(--syn-dur) ease,visibility var(--syn-dur) ease;
    z-index:40;
  }
  .nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu{opacity:1;visibility:visible;transform:none;}
  .nav__dd:hover .nav__caret,.nav__dd:focus-within .nav__caret{transform:rotate(180deg);}
  .nav__menu a{
    display:block;padding:var(--syn-s3) var(--syn-s3);
    font-size:.9375rem;font-weight:500;color:var(--syn-ink);white-space:nowrap;
    transition:background var(--syn-dur) ease,color var(--syn-dur) ease;
  }
  .nav__menu a:hover{background:var(--syn-bg-alt);color:var(--syn-navy);}
  .nav__menu-sep{border-top:1px solid var(--syn-rule);margin:var(--syn-s2) var(--syn-s3);}

  /* "Work with us" carries two groups — the free self-serve tools and the
     paid engagement models — so the menu is labelled and slightly wider. */
  .nav__menu--wide{min-width:320px;}
  .nav__menu-label{
    padding:var(--syn-s3) var(--syn-s3) var(--syn-s1);
    font-family:var(--syn-mono);font-size:var(--syn-t1);
    letter-spacing:.03em;color:var(--syn-ink-2);
  }
  .nav__menu a .mono{margin-left:var(--syn-s3);}
  .nav__menu--wide a{display:flex;justify-content:space-between;gap:var(--syn-s5);align-items:baseline;}

  .nav__toggle{
    display:none;background:none;border:0;cursor:pointer;
    padding:.5rem;flex-direction:column;gap:5px;touch-action:manipulation;
  }
  .nav__toggle span{display:block;width:24px;height:2px;background:var(--syn-navy);}

  /* Current-page marking lives here, keyed off <body data-page>, so the nav
     markup is byte-identical on every page and drift becomes greppable. */
  .nav__links a.is-active,
  body[data-page="platform"]  .nav__links a[href="/platform.html"],
  body[data-page="solutions"] .nav__dd>a[href="/solutions.html"],
  body[data-page="assure"]    .nav__dd>a[href="/solutions.html"],
  body[data-page="commercial-recovery"]    .nav__dd>a[href="/solutions.html"],
  body[data-page="customer-due-diligence"] .nav__dd>a[href="/solutions.html"],
  /* Services and the self-serve tools now share one nav item, because they
     answer the same question: how do I engage with Synalogic? */
  body[data-page="services"]      .nav__dd>a[href="/services.html"],
  body[data-page="evaluate"]      .nav__dd>a[href="/services.html"],
  body[data-page="health-check"]  .nav__dd>a[href="/services.html"],
  body[data-page="roi"]           .nav__dd>a[href="/services.html"],
  body[data-page="demo"]          .nav__dd>a[href="/services.html"],
  body[data-page="workshop"]      .nav__dd>a[href="/services.html"],
  body[data-page="security"]  .nav__dd>a[href="/about.html"],
  body[data-page="about"]     .nav__dd>a[href="/about.html"],
  body[data-page="careers"]   .nav__dd>a[href="/about.html"],
  body[data-page="contact"]   .nav__dd>a[href="/about.html"]
  {color:var(--syn-navy);box-shadow:inset 0 -2px 0 var(--syn-teal);}

  /* Footer: light, ruled. Matches the approved direction. */
  .ft{border-top:1px solid var(--syn-navy);padding:var(--syn-s7) 0 var(--syn-s5);}
  .ft__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--syn-s5);}
  .ft__cols ul{display:grid;gap:.25rem;}
  .ft__cols a{font-size:.9375rem;color:var(--syn-ink);}
  .ft__cols a:hover{color:var(--syn-navy);}
  .ft__legal{
    margin-top:var(--syn-s6);padding-top:var(--syn-s4);
    border-top:1px solid var(--syn-rule-soft);
  }
}

/* ------------------------------------------------------------ components - */
@layer components {

  /* -- buttons: zero radius, navy fill or navy outline ------------------- */
  .btn{
    display:inline-block;font-family:var(--syn-text);font-weight:600;
    font-size:.9375rem;padding:.7rem var(--syn-s5);
    border:1px solid var(--syn-navy);background:var(--syn-navy);color:#fff;
    cursor:pointer;white-space:nowrap;touch-action:manipulation;
    transition:background var(--syn-dur) ease,color var(--syn-dur) ease,border-color var(--syn-dur) ease;
  }
  .btn:hover{background:#16293A;color:#fff;}
  .btn--ghost{background:transparent;color:var(--syn-navy);}
  .btn--ghost:hover{background:var(--syn-bg-alt);color:var(--syn-navy);}

  /* -- section rhythm ---------------------------------------------------- */
  .sec{padding:var(--syn-s8) 0;}
  .sec--rule{border-bottom:1px solid var(--syn-rule);}
  .sec--alt{background:var(--syn-bg-alt);}
  .sec--tight{padding:var(--syn-s7) 0;}

  /* Section heads are left-aligned. Nothing in this system is centred. */
  .shead{max-width:22ch;}
  .shead--wide{max-width:34ch;}
  .lead{margin-top:var(--syn-s5);font-size:var(--syn-t3);line-height:1.5;max-width:56ch;}
  .body{margin-top:var(--syn-s4);max-width:66ch;}

  /* -- hero -------------------------------------------------------------- */
  .hero{padding:var(--syn-s8) 0;border-bottom:1px solid var(--syn-navy);}
  .hero h1{max-width:20ch;}
  .hero .lead{max-width:56ch;}
  .acts{display:flex;flex-wrap:wrap;gap:var(--syn-s3);margin-top:var(--syn-s6);}

  /* -- ruled data strip: the Instrument signature ------------------------ */
  .strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--syn-navy);}
  .strip__cell{padding:var(--syn-s5) var(--syn-s4) var(--syn-s6);border-left:1px solid var(--syn-rule);}
  .strip__cell:first-child{border-left:0;padding-left:0;}
  .strip__n{
    display:block;margin-top:var(--syn-s2);
    font-family:var(--syn-mono);font-size:var(--syn-t4);
    color:var(--syn-navy);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  }
  .strip__cell p{margin-top:var(--syn-s2);font-size:.9375rem;line-height:1.5;}
  .strip h3{font-size:var(--syn-t3);margin-top:var(--syn-s2);}

  .strip--3{grid-template-columns:repeat(3,1fr);}

  /* -- trust marks: a ruled mono row, not a row of pills ----------------- */
  .marks{
    display:flex;flex-wrap:wrap;gap:var(--syn-s3) var(--syn-s6);
    margin-top:var(--syn-s6);padding-top:var(--syn-s4);
    border-top:1px solid var(--syn-rule);
  }

  /* -- hero films (platform / assure / commercial-recovery) -------------- */
  /* position:relative lives here so the unmute button's containing block is
     never dependent on JS having run. */
  .film{position:relative;line-height:0;}
  .film video{display:block;width:100%;}
  .film__cap{line-height:1.5;margin-top:var(--syn-s3);}
  .vo-unmute{
    position:absolute;right:var(--syn-s3);bottom:var(--syn-s3);
    font-family:var(--syn-text);font-size:var(--syn-t1);font-weight:600;
    padding:.4rem .7rem;border:1px solid rgba(255,255,255,.55);
    background:rgba(13,27,42,.72);color:#fff;cursor:pointer;
    touch-action:manipulation;transition:background var(--syn-dur) ease;
  }
  .vo-unmute:hover{background:rgba(13,27,42,.9);}

  /* -- indexed list: rows with a mono reference and a cross-reference ---- */
  .lst{margin-top:var(--syn-s5);border-top:1px solid var(--syn-rule);}
  .lst li{
    display:grid;grid-template-columns:1fr auto;gap:var(--syn-s4);
    align-items:baseline;padding:var(--syn-s3) 0;border-bottom:1px solid var(--syn-rule-soft);
  }
  .lst .xref{font-family:var(--syn-mono);font-size:var(--syn-t1);color:var(--syn-ink-2);}

  /* -- solution row: mono key | name + kicker | body + points ------------ */
  .srow{
    display:grid;grid-template-columns:118px .85fr 1.15fr;gap:var(--syn-s6);
    padding:var(--syn-s7) 0;border-bottom:1px solid var(--syn-rule);
  }
  .srow h3{font-size:var(--syn-t4);}
  .srow .kick{
    margin-top:var(--syn-s2);font-style:italic;font-weight:500;
    font-size:var(--syn-t3);color:var(--syn-navy);line-height:1.35;
  }
  .srow p{margin-top:var(--syn-s3);}
  .srow ul{margin-top:var(--syn-s4);}
  .srow li{
    display:grid;grid-template-columns:auto 1fr;gap:var(--syn-s3);
    padding:var(--syn-s2) 0;border-top:1px solid var(--syn-rule-soft);
    font-size:.9375rem;line-height:1.5;
  }

  /* -- inline link that reads as a destination, without an arrow glyph --- */
  .more{
    display:inline-block;font-weight:600;color:var(--syn-navy);
    box-shadow:inset 0 -1px 0 var(--syn-teal);padding-bottom:2px;
    transition:box-shadow var(--syn-dur) ease;
  }
  .more:hover{box-shadow:inset 0 -2px 0 var(--syn-teal);color:var(--syn-navy);}

  /* -- figures ----------------------------------------------------------- */
  .fig{display:block;width:100%;height:auto;}
  .figcap{margin-top:var(--syn-s3);padding-top:var(--syn-s2);border-top:1px solid var(--syn-rule-soft);}

  /* -- closing band ------------------------------------------------------ */
  .close{padding:var(--syn-s8) 0;border-bottom:1px solid var(--syn-navy);}
  .close h2{max-width:18ch;}
  .close .lead{max-width:50ch;}

  /* -- long-form prose: legal pages, and the guide pages when they migrate -
     Sets its own vertical rhythm because the content is authored as a flat
     run of headings, paragraphs and lists rather than as components. */
  .prose{max-width:72ch;}
  .prose h2{font-size:var(--syn-t4);margin:var(--syn-s7) 0 var(--syn-s3);}
  .prose h3{font-size:var(--syn-t3);margin:var(--syn-s6) 0 var(--syn-s3);}
  .prose h2:first-child,.prose h3:first-child{margin-top:0;}
  .prose p{margin-bottom:var(--syn-s4);}
  .prose ul,.prose ol{margin:0 0 var(--syn-s4);padding-left:var(--syn-s5);}
  .prose ul{list-style:disc;}
  .prose ol{list-style:decimal;}
  .prose li{margin-bottom:var(--syn-s2);padding-left:var(--syn-s1);}
  .prose li::marker{color:var(--syn-teal);}
  .prose a{box-shadow:inset 0 -1px 0 var(--syn-teal);}
  .prose a:hover{box-shadow:inset 0 -2px 0 var(--syn-teal);}
  .prose table{width:100%;border-collapse:collapse;margin-bottom:var(--syn-s5);font-size:.9375rem;}
  .prose th,.prose td{text-align:left;padding:var(--syn-s3);border-bottom:1px solid var(--syn-rule-soft);vertical-align:top;}
  .prose th{font-weight:600;color:var(--syn-navy);border-bottom-color:var(--syn-rule);}

  /* -- pull-aside inside long-form prose --------------------------------- */
  /* The guide pages use this recurringly; it was improvised per-page during
     the insights migration, so it lives here now. */
  .note{
    margin:var(--syn-s5) 0;padding:var(--syn-s4) var(--syn-s5);
    background:var(--syn-bg-alt);border-left:2px solid var(--syn-teal);
  }
  .note--navy{background:var(--syn-navy);color:#fff;border-left-color:var(--syn-teal);}
  .note--navy a{color:#fff;box-shadow:inset 0 -1px 0 var(--syn-teal);}
  .note p:last-child{margin-bottom:0;}

  /* -- wide tables scroll inside themselves, never the page -------------- */
  .tbl{overflow-x:auto;margin-bottom:var(--syn-s5);}
  .tbl table{min-width:34rem;}
  .tbl .yes{color:var(--syn-teal-deep);font-weight:600;}
  .tbl .no{color:#B3261E;}

  /* Section-level anchors need the same offset headings get. */
  section[id]{scroll-margin-top:5rem;}

  /* -- small print ------------------------------------------------------- */
  .legal-note{font-size:var(--syn-t1);color:var(--syn-ink-2);max-width:72ch;}

  /* -- 404 ---------------------------------------------------------------- */
  .nf{padding:var(--syn-s9) 0;border-bottom:1px solid var(--syn-navy);}
  .nf__code{font-family:var(--syn-mono);font-size:var(--syn-t5);color:var(--syn-teal);
    letter-spacing:-.02em;font-variant-numeric:tabular-nums;}

  /* -- FAQ: native details/summary, no JS -------------------------------- */
  .faq{margin-top:var(--syn-s5);border-top:1px solid var(--syn-rule);}
  .faq details{border-bottom:1px solid var(--syn-rule-soft);}
  .faq summary{
    display:flex;justify-content:space-between;gap:var(--syn-s4);
    padding:var(--syn-s4) 0;cursor:pointer;list-style:none;
    font-family:var(--syn-display);font-weight:700;font-size:var(--syn-t3);
    color:var(--syn-navy);letter-spacing:-.02em;line-height:1.25;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+";font-family:var(--syn-mono);color:var(--syn-teal);flex:none;}
  .faq details[open] summary::after{content:"\2013";}
  .faq details>*:not(summary){padding-bottom:var(--syn-s4);max-width:66ch;}

  /* -- fields ------------------------------------------------------------- */
  /* One definition for every form on the site. The evaluate pages had their own
     copies stripped during the design-system migration and syn.css never owned a
     replacement, which left 32 .field elements rendering as raw browser defaults.
     contact.html and careers.html still carry local copies; those are unlayered,
     so they keep winning until they are removed. */
  .field{display:block;margin-bottom:var(--syn-s5);}
  .field label,
  .field > span:not(.err){
    display:block;font-family:var(--syn-mono);font-size:var(--syn-t1);
    letter-spacing:.03em;color:var(--syn-ink-2);margin-bottom:var(--syn-s2);
  }
  .field .opt{text-transform:none;}
  .field input,
  .field select,
  .field textarea{
    width:100%;font-family:var(--syn-text);font-size:1rem;color:var(--syn-navy);
    padding:.65rem .8rem;border:1px solid var(--syn-rule);
    background:var(--syn-bg);border-radius:var(--syn-radius);
  }
  .field textarea{min-height:8rem;resize:vertical;}
  .field input:focus-visible,
  .field select:focus-visible,
  .field textarea:focus-visible{
    outline:2px solid var(--syn-teal-deep);outline-offset:1px;
  }
  .field input[type=range]{
    padding:0;border:0;background:transparent;accent-color:var(--syn-teal);
  }
  .field input[type=checkbox],.field input[type=radio]{width:auto;}
  .hint{
    display:block;font-size:var(--syn-t1);color:var(--syn-ink-2);
    margin-top:var(--syn-s1);
  }

  /* -- form state contracts, unchanged from the live JS ------------------ */
  .invalid{border-color:#B3261E;}
  .err{display:none;color:#B3261E;font-size:var(--syn-t1);margin-top:var(--syn-s1);}
  .err.show{display:block;}
  .formmsg{display:none;margin-top:var(--syn-s4);padding:var(--syn-s3) var(--syn-s4);border:1px solid var(--syn-rule);}
  .formmsg.show{display:block;}
  .formmsg.ok{border-color:var(--syn-teal);background:var(--syn-teal-pale);color:var(--syn-navy);}
  .formmsg.bad{border-color:#B3261E;color:#B3261E;}
}

/* ------------------------------------------------------------- utilities - */
@layer utilities {
  .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;
  }
  .nowrap{white-space:nowrap;}
  .tnum{font-variant-numeric:tabular-nums;}
}

/* ----------------------------------------------------------- responsive - */
/* Four breakpoints only: 1080 / 900 / 720 / 560. */
@layer components {
  @media (max-width:1080px){
    .strip{grid-template-columns:repeat(2,1fr);}
    .strip__cell:nth-child(3){border-left:0;padding-left:0;}
    .strip--3{grid-template-columns:1fr;}
    .strip--3 .strip__cell{border-left:0;padding-left:0;}
  }
  @media (max-width:900px){
    .srow{grid-template-columns:1fr;gap:var(--syn-s4);}
    .lst li{grid-template-columns:1fr;gap:var(--syn-s1);}
  }
  @media (max-width:720px){
    .sec{padding:var(--syn-s7) 0;}
    .hero{padding:var(--syn-s7) 0;}
    .close{padding:var(--syn-s7) 0;}
    .acts .btn{width:100%;text-align:center;}
  }
  @media (max-width:560px){
    .strip{grid-template-columns:1fr;}
    .strip__cell{border-left:0;padding-left:0;}
  }
}
@layer chrome {
  @media (max-width:900px){
    .ft__cols{grid-template-columns:1fr 1fr;gap:var(--syn-s5);}
  }
  @media (max-width:720px){
    .nav__toggle{display:flex;}
    .nav__links{
      position:absolute;top:100%;left:0;right:0;
      display:none;flex-direction:column;align-items:stretch;gap:0;
      background:var(--syn-bg);border-bottom:1px solid var(--syn-navy);
      padding:0 clamp(1.25rem,4vw,3.5rem) var(--syn-s4);
    }
    .nav.is-open .nav__links{display:flex;}
    .nav__links>a{padding:var(--syn-s4) 0;border-bottom:1px solid var(--syn-rule);font-size:1rem;}
    .nav__links>.btn{width:100%;text-align:center;margin-top:var(--syn-s4);border-bottom:1px solid var(--syn-navy);}
    .nav__dd{display:block;width:100%;}
    .nav__dd>a{padding:var(--syn-s4) 0;border-bottom:1px solid var(--syn-rule);}
    .nav__caret{display:none;}
    .nav__menu{
      position:static;opacity:1;visibility:visible;transform:none;
      border:0;margin:0;padding:0 0 var(--syn-s2) var(--syn-s5);min-width:0;
    }
    .nav__menu a{padding:var(--syn-s3) 0;border-bottom:1px solid var(--syn-rule-soft);}
    .nav__menu-sep{display:none;}
  }
}

/* Motion is only ever used to answer a user action (opening a menu). There is
   no ambient animation in this system, but honour the preference regardless. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms;animation-iteration-count:1;transition-duration:.001ms;}
}