/* ===============================================================
   public.css · the public, crawlable surface.

   Two consumers:
     1. the marketing sections that sit BELOW the sign-in panel on /
        (login.html loads this after its own inline <style>)
     2. the standalone case-study pages, which have no inline styles
        of their own and rely on this file entirely

   The palette below is deliberately identical to login.html's inline
   tokens. On / that makes it a harmless duplicate (same values, and
   login's :root[data-theme=…] rules still win on specificity); on a
   case-study page it's the only source. Keep the two in sync, or
   extract them to a shared partial the day a third page needs them.

   Class prefix: .pub-  ·  nothing here may collide with the sign-in
   markup already on the page.
   =============================================================== */

:root{
  color-scheme: light dark;
  --brand:#2f6bff; --brand-2:#6a3cff; --amber:#f5a623;
  --page:#eef2f7; --card:#ffffff; --line:#dde3ea; --ink:#16202c; --mut:#67727f;
  --field:#fbfcfe; --field-line:#cdd6e0;
  --pub-wash:rgba(47,107,255,.07);
  --pub-shadow:0 1px 2px rgba(16,32,44,.05), 0 8px 24px rgba(16,32,44,.06);
  --pub-max:1120px;
}
@media (prefers-color-scheme: dark){
  :root{ --page:#0c1118; --card:#141b24; --line:#243040; --ink:#e8eef5; --mut:#93a1b0;
         --field:#0e141c; --field-line:#2a3644;
         --pub-wash:rgba(47,107,255,.13);
         --pub-shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35); }
}
:root[data-theme="light"]{ --page:#eef2f7; --card:#ffffff; --line:#dde3ea; --ink:#16202c; --mut:#67727f; --pub-wash:rgba(47,107,255,.07); }
:root[data-theme="dark"]{ --page:#0c1118; --card:#141b24; --line:#243040; --ink:#e8eef5; --mut:#93a1b0; --pub-wash:rgba(47,107,255,.13); }

/* ---------------- shared shell ---------------- */

.pub-wrap{ max-width:var(--pub-max); margin:0 auto; padding:0 24px; }

/* text-align is reset explicitly: these sections are injected into login.html,
   which styles a global `.alt` (its "have an access code?" block) with
   text-align:center. A modifier named .alt here inherited that and centred every
   case-study card. The modifier is now .pub-alt, and this reset stops the next
   such collision from silently reformatting the page. */
.pub-section{ padding:clamp(56px,7vw,92px) 0; border-top:1px solid var(--line);
  background:var(--page); text-align:left; }
.pub-section.pub-alt{ background:var(--card); }

.pub-eyebrow{
  margin:0 0 12px; font-size:12.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--brand);
}
.pub-h2{
  margin:0 0 14px; font-size:clamp(25px,3.4vw,36px); line-height:1.18;
  letter-spacing:-.02em; font-weight:750; color:var(--ink);
}
.pub-lede{ margin:0; font-size:clamp(15.5px,1.6vw,17.5px); line-height:1.62; color:var(--mut); max-width:64ch; }
.pub-head{ margin-bottom:clamp(32px,4vw,48px); }

.pub-btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:11px;
  font-size:14.5px; font-weight:650; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.pub-btn-primary{
  color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 18px rgba(47,107,255,.28);
}
.pub-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(47,107,255,.36); }
.pub-btn-ghost{ color:var(--ink); background:var(--card); border-color:var(--line); }
.pub-btn-ghost:hover{ transform:translateY(-1px); border-color:var(--brand); color:var(--brand); }
.pub-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* ---------------- scroll cue (sits under the sign-in split) ---------------- */

.pub-cue{
  display:flex; justify-content:center; padding:0 0 26px; background:var(--page);
  margin-top:-1px;
}
.pub-cue a{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--mut);
  font-size:13.5px; font-weight:600; text-decoration:none; box-shadow:var(--pub-shadow);
  transition:color .16s ease, border-color .16s ease, transform .16s ease;
}
.pub-cue a:hover{ color:var(--brand); border-color:var(--brand); transform:translateY(-1px); }
.pub-cue svg{ width:15px; height:15px; animation:pubNudge 2.1s ease-in-out infinite; }
@keyframes pubNudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }

/* ---------------- feature + step grids ---------------- */

.pub-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }

.pub-card{
  padding:26px 24px; border-radius:15px; background:var(--card);
  border:1px solid var(--line); box-shadow:var(--pub-shadow);
}
.pub-section.pub-alt .pub-card{ background:var(--page); }
.pub-card h3{ margin:0 0 9px; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.pub-card p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--mut); }

.pub-ico{
  width:40px; height:40px; margin-bottom:15px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--pub-wash); color:var(--brand);
}
.pub-ico svg{ width:21px; height:21px; }

.pub-steps{ counter-reset:step; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.pub-step{ position:relative; padding:26px 24px 24px; border-radius:15px; background:var(--card);
  border:1px solid var(--line); box-shadow:var(--pub-shadow); }
.pub-section.pub-alt .pub-step{ background:var(--page); }
.pub-step::before{
  counter-increment:step; content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:31px; height:31px; margin-bottom:14px; border-radius:9px;
  font-size:14px; font-weight:750; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.pub-step h3{ margin:0 0 8px; font-size:16.5px; font-weight:700; color:var(--ink); }
.pub-step p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--mut); }

/* ---------------- case-study cards ---------------- */

/* Capped at 420px and packed from the left: with auto-fit and a 1fr max, a
   single published case study stretched to the full 1072px content width and
   read as a broken layout. Three cards still share the row evenly. */
.pub-posts{ display:grid; gap:20px; justify-content:start;
  grid-template-columns:repeat(auto-fit,minmax(300px,420px)); }

.pub-post{
  display:flex; flex-direction:column; padding:26px 24px; border-radius:15px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--pub-shadow);
  text-decoration:none; color:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pub-section.pub-alt .pub-post{ background:var(--page); }
.pub-post:hover{ transform:translateY(-3px); border-color:var(--brand);
  box-shadow:0 1px 2px rgba(16,32,44,.05), 0 14px 34px rgba(16,32,44,.12); }
.pub-post-client{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand); margin:0 0 10px; }
.pub-post h3{ margin:0 0 10px; font-size:18.5px; line-height:1.32; font-weight:720;
  letter-spacing:-.015em; color:var(--ink); }
.pub-post p{ margin:0 0 18px; font-size:14.5px; line-height:1.62; color:var(--mut); }
.pub-post-meta{ margin-top:auto; display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--mut); }
.pub-post-meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }
.pub-post-more{ margin-left:auto; font-weight:650; color:var(--brand); }

.pub-empty{
  padding:44px 28px; border-radius:15px; text-align:center;
  border:1px dashed var(--line); background:var(--card); color:var(--mut); font-size:14.5px;
}

.pub-tags{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px; padding:0; list-style:none; }
.pub-tags li{
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--pub-wash); color:var(--brand);
}

/* ---------------- FAQ ---------------- */

.pub-faq{ display:grid; gap:12px; max-width:840px; }
.pub-faq details{
  border:1px solid var(--line); border-radius:13px; background:var(--card);
  overflow:hidden; transition:border-color .16s ease;
}
.pub-section.pub-alt .pub-faq details{ background:var(--page); }
.pub-faq details[open]{ border-color:var(--brand); }
.pub-faq summary{
  cursor:pointer; list-style:none; padding:18px 22px; font-size:15.5px; font-weight:650;
  color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.pub-faq summary::-webkit-details-marker{ display:none; }
.pub-faq summary::after{
  content:""; flex:none; width:9px; height:9px; border-right:2px solid var(--mut);
  border-bottom:2px solid var(--mut); transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.pub-faq details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.pub-faq .pub-faq-body{ padding:0 22px 20px; font-size:14.5px; line-height:1.68; color:var(--mut); }
.pub-faq .pub-faq-body p{ margin:0 0 10px; }
.pub-faq .pub-faq-body p:last-child{ margin-bottom:0; }

/* ---------------- closing CTA ---------------- */

.pub-cta{
  padding:clamp(38px,5vw,58px) clamp(26px,4vw,52px); border-radius:19px; text-align:center;
  color:#eaf0ff; position:relative; overflow:hidden;
  background:
    radial-gradient(900px 400px at 15% -20%, rgba(106,60,255,.55), transparent 60%),
    radial-gradient(700px 460px at 108% 118%, rgba(245,166,35,.26), transparent 55%),
    linear-gradient(150deg,#101a3a 0%,#122154 45%,#0c1330 100%);
}
.pub-cta h2{ margin:0 0 12px; font-size:clamp(23px,3vw,32px); line-height:1.2;
  letter-spacing:-.02em; font-weight:750; }
.pub-cta p{ margin:0 auto; max-width:56ch; font-size:15.5px; line-height:1.62; color:#b9c6ea; }
.pub-cta .pub-actions{ justify-content:center; }
.pub-cta .pub-btn-ghost{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.26); color:#eaf0ff; }
.pub-cta .pub-btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; color:#fff; }

/* ===============================================================
   Standalone pages (case-study listing + detail). These have no
   inline styles, so the header/footer chrome lives here.
   =============================================================== */

.pub-page{ margin:0; background:var(--page); color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; }

.pub-nav{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.pub-nav-inner{ max-width:var(--pub-max); margin:0 auto; padding:13px 24px;
  display:flex; align-items:center; gap:18px; }
.pub-nav-brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink); }
.pub-nav-brand b{ font-size:19px; font-weight:750; letter-spacing:-.02em; }
.pub-nav-brand span{ font-size:13.5px; color:var(--mut); }
.pub-nav-links{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.pub-nav-links a{ padding:8px 13px; border-radius:9px; font-size:14px; font-weight:600;
  color:var(--mut); text-decoration:none; transition:color .15s ease, background .15s ease; }
.pub-nav-links a:hover{ color:var(--ink); background:var(--pub-wash); }
.pub-nav-links a.cta{ color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.pub-nav-links a.cta:hover{ color:#fff; }

.pub-crumbs{ padding:22px 0 0; font-size:13px; color:var(--mut); }
.pub-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.pub-crumbs a{ color:var(--mut); text-decoration:none; }
.pub-crumbs a:hover{ color:var(--brand); text-decoration:underline; }
.pub-crumbs li[aria-current]{ color:var(--ink); }

.pub-foot{ border-top:1px solid var(--line); background:var(--card); padding:34px 0; margin-top:12px; }
.pub-foot-inner{ max-width:var(--pub-max); margin:0 auto; padding:0 24px;
  display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; }
.pub-foot-brand b{ font-size:16px; font-weight:750; letter-spacing:-.02em; color:var(--ink); }
.pub-foot-brand p{ margin:5px 0 0; font-size:13px; color:var(--mut); }
.pub-foot nav{ margin-left:auto; display:flex; flex-wrap:wrap; gap:8px 20px; }
.pub-foot nav a{ font-size:13.5px; color:var(--mut); text-decoration:none; }
.pub-foot nav a:hover{ color:var(--brand); text-decoration:underline; }

/* ---------------- article typography ---------------- */

.pub-article{ max-width:760px; margin:0 auto; padding:clamp(30px,4vw,48px) 24px clamp(48px,6vw,72px); }
.pub-article-head{ margin-bottom:clamp(28px,4vw,40px); }
.pub-article h1{ margin:0 0 16px; font-size:clamp(29px,4.4vw,44px); line-height:1.14;
  letter-spacing:-.028em; font-weight:780; color:var(--ink); }
.pub-article-sum{ margin:0; font-size:clamp(16px,1.8vw,18.5px); line-height:1.6; color:var(--mut); }
.pub-article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin:18px 0 0; font-size:13px; color:var(--mut); }
.pub-article-meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }
.pub-hero{ margin:0 0 clamp(26px,3.5vw,38px); border-radius:15px; overflow:hidden;
  border:1px solid var(--line); background:var(--card); }
.pub-hero img{ display:block; width:100%; height:auto; }

.pub-body{ font-size:16.5px; line-height:1.75; color:var(--ink); }
.pub-body > *:first-child{ margin-top:0; }
.pub-body p{ margin:0 0 1.15em; }
.pub-body h2{ margin:2em 0 .6em; font-size:clamp(21px,2.6vw,27px); line-height:1.25;
  letter-spacing:-.02em; font-weight:730; scroll-margin-top:76px; }
.pub-body h3{ margin:1.7em 0 .5em; font-size:clamp(17.5px,2vw,20.5px); line-height:1.3;
  font-weight:700; scroll-margin-top:76px; }
.pub-body ul,.pub-body ol{ margin:0 0 1.15em; padding-left:1.35em; }
.pub-body li{ margin:0 0 .45em; }
.pub-body a{ color:var(--brand); text-underline-offset:2px; }
.pub-body strong{ font-weight:680; }
.pub-body hr{ margin:2.2em 0; border:0; border-top:1px solid var(--line); }

.pub-body blockquote{
  margin:1.6em 0; padding:20px 24px; border-radius:13px;
  background:var(--pub-wash); border-left:3px solid var(--brand);
  font-size:17px; line-height:1.6;
}
.pub-body blockquote p{ margin:0 0 .6em; }
.pub-body blockquote p:last-child{ margin-bottom:0; }

.pub-body code{
  padding:2px 6px; border-radius:5px; font-size:.88em;
  background:var(--pub-wash); border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.pub-body pre{
  margin:0 0 1.3em; padding:18px 20px; border-radius:12px; overflow-x:auto;
  background:var(--card); border:1px solid var(--line);
}
.pub-body pre code{ padding:0; border:0; background:none; font-size:13.5px; line-height:1.6; }

.pub-body .md-figure{ margin:1.6em 0; }
.pub-body .md-figure img{ display:block; width:100%; height:auto; border-radius:13px; border:1px solid var(--line); }

/* Wide tables scroll inside their own box, the page body never scrolls sideways. */
.pub-body .md-table-wrap{ margin:0 0 1.4em; overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.pub-body table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.pub-body th,.pub-body td{ padding:11px 15px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.pub-body thead th{ background:var(--pub-wash); font-weight:700; font-size:13px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.pub-body tbody tr:last-child td{ border-bottom:0; }

.pub-next{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(38px,5vw,56px);
  padding-top:26px; border-top:1px solid var(--line); }
.pub-next a{
  flex:1 1 240px; padding:17px 20px; border-radius:13px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); transition:border-color .16s ease, transform .16s ease;
}
.pub-next a:hover{ border-color:var(--brand); transform:translateY(-2px); }
.pub-next small{ display:block; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mut); margin-bottom:5px; }
.pub-next b{ font-size:15px; font-weight:650; color:var(--ink); line-height:1.35; }

/* ---------------- responsive ---------------- */

@media (max-width:760px){
  .pub-wrap{ padding:0 18px; }
  .pub-nav-inner{ padding:11px 18px; gap:10px; }
  .pub-nav-brand span{ display:none; }
  .pub-nav-links{ gap:4px; }
  .pub-nav-links a{ padding:7px 10px; font-size:13.5px; white-space:nowrap; }
  /* four links wrapped onto three lines at 375px, drop the two homepage
     anchors and keep the two destinations that aren't reachable any other way */
  .pub-nav-optional{ display:none; }
  .pub-article{ padding:24px 18px 46px; }
  .pub-foot-inner{ padding:0 18px; }
  .pub-foot nav{ margin-left:0; }
  .pub-body{ font-size:16px; }
  .pub-body th,.pub-body td{ white-space:normal; }
}

@media (prefers-reduced-motion: reduce){
  .pub-cue svg{ animation:none; }
  .pub-btn, .pub-post, .pub-next a, .pub-cue a{ transition:none; }
  .pub-btn:hover, .pub-post:hover, .pub-next a:hover, .pub-cue a:hover{ transform:none; }
}

@media print{
  .pub-nav, .pub-cue, .pub-next, .pub-cta{ display:none; }
  .pub-article{ max-width:none; }
}

/* ---------------- keyboard accessibility ----------------
   Loaded by every public page (login.html included), so one place covers the
   whole crawlable surface. :focus-visible keeps mouse clicks outline-free. */
.skip-link{
  position:absolute; left:12px; top:-48px; z-index:100;
  padding:9px 14px; border-radius:9px;
  background:var(--brand); color:#fff; font-weight:650; font-size:14px;
  text-decoration:none; transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:4px;
}