/* ==========================================================================
   Career Readiness Report landing
   Tokens first, then primitives, then components. One file, no build step.
   ========================================================================== */

:root {
  /* Palette sampled directly from the CRR logo.
     navy #143761 · blue #4778A1 · slate #7E94A9 · sky #79B8D9 · mint #85C3B8
     Accent values are darkened where they carry small text, to clear WCAG AA. */
  --ink-900:#0B2440;      /* deepest navy, dark bands              */
  --ink-800:#143761;      /* logo navy, headings                   */
  --ink-700:#1F4770;      /* */
  --ink-500:#46586F;      /* body copy, 7.28:1 on white            */
  --ink-400:#556A82;      /* muted, 5.57:1 on white and 5.00:1 on paper-100 */
  --ink-300:#9CACBC;      /* logo slate                            */

  --paper:#FFFFFF;
  --paper-50:#F7F9FB;
  --paper-100:#EFF3F7;
  --line:#DEE6EE;

  --accent-600:#2E5F8A;   /* accent text on white, 6.73:1          */
  --accent-500:#3A6F9C;
  --accent-400:#79B8D9;   /* logo sky, for dark surfaces           */
  --accent-100:#E7F0F7;

  --mint-400:#85C3B8;     /* logo mint, the "free" signal on dark  */
  --mint-700:#2E8577;

  --gold-500:#C8963E;     /* highlight, used sparingly */
  --gold-100:#FBF1DF;

  --on-dark:#EAF1F7;
  --on-dark-dim:#A9BDD1;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;

  --shadow-sm:0 1px 2px rgba(11,36,64,.06), 0 2px 6px rgba(11,36,64,.05);
  --shadow-md:0 6px 16px rgba(11,36,64,.08), 0 2px 6px rgba(11,36,64,.05);
  --shadow-lg:0 24px 60px rgba(11,36,64,.16), 0 8px 20px rgba(11,36,64,.09);

  --wrap:1180px;
  --step:clamp(4rem, 8vw, 7.5rem);

  --sans:'Inter var','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;font-family:var(--sans);color:var(--ink-800);background:var(--paper);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-600);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{line-height:1.12;letter-spacing:-.022em;margin:0;color:var(--ink-900);font-weight:640}
p{margin:0}
ul{margin:0;padding:0}

::selection{background:var(--accent-100);color:var(--ink-900)}
:focus-visible{outline:3px solid var(--accent-500);outline-offset:3px;border-radius:4px}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink-900);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- layout primitives ---------- */
.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem, 780px)}
.band{padding-block:var(--step);position:relative}
.band--tint{background:var(--paper-50);border-block:1px solid var(--line)}
.band--dark{background:var(--ink-900);color:var(--on-dark)}
.band--dark h2,.band--dark h3{color:#fff}

/* ---------- type helpers ---------- */
.eyebrow{
  font-size:.75rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-600);margin:0 0 1rem;display:inline-flex;align-items:center;gap:.55rem;
}
.eyebrow--onDark{color:var(--mint-400)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .dot{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 26%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,currentColor 0%,transparent)}}
}

.sectionHead{max-width:44rem;margin:0 0 3.25rem}
.sectionHead__title{font-size:clamp(1.9rem,3.6vw,2.85rem)}
.sectionHead__lede{margin-top:1.1rem;font-size:1.09rem;color:var(--ink-500);line-height:1.7}
.sectionHead--onDark .sectionHead__lede{color:var(--on-dark-dim)}
.fineprint{margin-top:2.5rem;font-size:.83rem;color:var(--ink-400);max-width:56rem;line-height:1.6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:999px;font-weight:620;font-size:1rem;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--ink-800);color:#fff;box-shadow:0 6px 18px rgba(20,55,97,.28)}
.btn--primary:hover{background:var(--accent-600);transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,55,97,.34)}
/* On the dark navy bands a navy button vanishes and a blue one barely separates,
   so invert to the logo mint. It also doubles as the "free" signal colour. */
.hero .btn--primary,.band--cta .btn--primary{background:var(--mint-400);color:#0A2038;box-shadow:0 6px 22px rgba(133,195,184,.34)}
.hero .btn--primary:hover,.band--cta .btn--primary:hover{background:#9AD2C8;box-shadow:0 12px 30px rgba(133,195,184,.44)}
.btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
.btn--sm{padding:.62rem 1.15rem;font-size:.92rem}

/* ---------- header ---------- */
.siteHeader{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s, box-shadow .2s;
}
.siteHeader.is-stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.siteHeader__inner{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.25rem);padding-block:.7rem}

/* The lockup never shrinks and never wraps.
   Measured before this rule: .logo sat in the flex row with no basis control,
   so at 1440 the name was already on two lines and by 1024 it was on four and
   the header stood 145px tall. flex:none plus nowrap is the whole fix; the
   nav is what yields now, and below --bp-nav it is a panel instead. */
.logo{display:flex;align-items:center;gap:.72rem;text-decoration:none;color:var(--ink-800);margin-right:auto;flex:none}
.logo__mark{width:auto;height:36px;flex:none}
.logo__text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.logo__name{display:block;font-weight:680;font-size:1rem;letter-spacing:-.015em;line-height:1.15;white-space:nowrap}
.logo__sub{display:block;font-size:.7rem;color:var(--ink-400);font-weight:500;line-height:1.2;white-space:nowrap}

.nav{display:flex;gap:clamp(1.1rem,2vw,1.75rem);align-items:center}
.nav a{
  position:relative;color:var(--ink-500);text-decoration:none;font-size:.93rem;font-weight:530;
  white-space:nowrap;padding-block:.35rem;transition:color .15s ease;
}
/* Underline as a pseudo-element so hover and the current-page mark cost no
   layout: an inline border would nudge every sibling by a pixel on hover. */
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--accent-600);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover,.nav a:focus-visible{color:var(--ink-900)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink-900);font-weight:600}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- nav toggle + mobile panel ---------- */
/* No margin-left:auto here. The logo already carries margin-right:auto, and two
   competing auto margins split the free space BETWEEN the button and the
   toggle, which left the CTA stranded mid-row on tablet instead of grouped with
   the toggle at the right edge. One auto margin, one gap. */
.navToggle{
  display:none;align-items:center;gap:.5rem;
  min-height:44px;                       /* primary control: a full tap target */
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.45rem .95rem .45rem .8rem;cursor:pointer;color:var(--ink-800);
  font:inherit;font-size:.85rem;font-weight:560;
  transition:border-color .15s ease,background .15s ease;
}
.navToggle:hover{border-color:var(--ink-300);background:var(--paper-50)}
.navToggle__box{display:block;position:relative;width:16px;height:11px;flex:none}
.navToggle__bar{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .22s ease,opacity .18s ease;
}
.navToggle__bar:nth-child(1){top:0}
.navToggle__bar:nth-child(2){bottom:0}
.navToggle[aria-expanded="true"] .navToggle__bar:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.navToggle[aria-expanded="true"] .navToggle__bar:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

.navPanel{border-top:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-md)}
.navPanel__inner{display:flex;flex-direction:column;padding-block:.5rem 1.1rem}
.navPanel a:not(.btn){
  color:var(--ink-700);text-decoration:none;font-size:1rem;font-weight:540;
  padding:.85rem .25rem;border-bottom:1px solid var(--paper-100);
}
.navPanel a:not(.btn):hover{color:var(--ink-900)}
.navPanel a[aria-current="page"]{color:var(--accent-600);font-weight:640}
.navPanel__cta{margin-top:1.1rem;width:100%}

/* One custom property drives the breakpoint so the bar, the toggle and the
   panel can never disagree about where the switch happens. 1080 not 940: the
   measured crush zone was 960-1150, so the old value left three widths where
   the bar was visible and broken. */
/* The nav ends and the primary action begins, so the gap between them is wider
   than the gap between two nav items. Without it "Trust" sits against the pill
   and the right-hand cluster reads as one crowded group. */
.siteHeader__cta{margin-left:clamp(.35rem,1.3vw,1.15rem)}

@media (max-width:1080px){
  .nav{display:none}
  .navToggle{display:inline-flex}
}
@media (min-width:1081px){
  .navPanel{display:none}
}
/* The CTA survives tablet. It used to vanish with the nav at 940, which gave a
   1024px iPad a header carrying no action at all; there is room for the logo,
   the button and the toggle three times over at that width. */
@media (max-width:560px){
  .siteHeader__cta{display:none}
}
@media (max-width:420px){
  .logo__mark{height:32px}
  .logo__name{font-size:.92rem}
  .logo__sub{display:none}
  .navToggle__label{display:none}
  .navToggle{padding:.5rem;min-width:44px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .nav a::after,.navToggle__bar{transition:none}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;color:#fff;padding-top:clamp(4.5rem,10vw,8rem)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(11,36,64,.80) 0%, rgba(11,36,64,.88) 46%, rgba(11,36,64,.96) 100%),
    radial-gradient(120% 80% at 15% 10%, rgba(121,184,217,.26) 0%, transparent 58%);
}
.hero__inner{position:relative;padding-bottom:clamp(3.5rem,7vw,5.5rem);max-width:60rem}
.hero__title{
  font-size:clamp(2.5rem,6.2vw,4.6rem);color:#fff;letter-spacing:-.032em;
  font-weight:660;text-wrap:balance;
}
.hero__title em{
  font-style:normal;display:block;
  background:linear-gradient(96deg,var(--accent-400) 0%, var(--mint-400) 55%, #A8DCE9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{
  margin-top:1.6rem;font-size:clamp(1.06rem,1.7vw,1.24rem);
  color:var(--on-dark-dim);max-width:44rem;line-height:1.72;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.hero__note{margin-top:1.5rem;font-size:.9rem;color:var(--on-dark-dim);letter-spacing:.01em}

.hero__stats{border-top:1px solid rgba(255,255,255,.16);background:rgba(6,10,26,.42);position:relative}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0;padding-block:2.1rem}
.stats__item{text-align:center}
.stats__value{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:680;color:#fff;letter-spacing:-.02em}
.stats__label{margin:.35rem 0 0;font-size:.82rem;color:var(--on-dark-dim);line-height:1.45}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}}

/* ---------- answer block (AI-citation target) ---------- */
.band--answer{padding-block:clamp(3.5rem,6vw,5.5rem);background:var(--paper);border-bottom:1px solid var(--line)}
.answer{max-width:56rem}
.answer__q{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:1rem}
.answer__a{font-size:clamp(1.06rem,1.5vw,1.2rem);line-height:1.72;color:var(--ink-700);max-width:52rem}
.answer__facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem 2rem;margin:2.4rem 0 0;
  padding-top:1.9rem;border-top:1px solid var(--line);
}
.answer__facts dt{font-size:.72rem;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-600)}
.answer__facts dd{margin:.32rem 0 0;font-size:.96rem;color:var(--ink-700);line-height:1.5}
@media (max-width:860px){.answer__facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.answer__facts{grid-template-columns:1fr}}

/* ---------- launch vs roadmap ---------- */
.phaseHead{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  font-size:1.02rem;font-weight:600;color:var(--ink-500);
  margin:0 0 1.4rem;letter-spacing:-.01em;
}
.phaseHead--later{margin-top:3.2rem}
.phaseHead__tag{
  display:inline-flex;align-items:center;padding:.3rem .8rem;border-radius:999px;
  font-size:.72rem;font-weight:680;letter-spacing:.08em;text-transform:uppercase;
  background:var(--paper-100);color:var(--ink-500);border:1px solid var(--line);
}
.phaseHead__tag--now{background:var(--accent-100);color:var(--accent-600);border-color:transparent}
.feat--later{background:var(--paper-50)}
.feat--later .feat__icon{background:var(--ink-500)}

/* ---------- competencies ---------- */
.compGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none}
.comp{
  display:flex;align-items:center;gap:.85rem;padding:1.15rem 1.25rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.comp:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-400)}
.comp__icon{
  flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-100);color:var(--accent-600);
}
.comp__name{font-weight:600;font-size:.96rem;line-height:1.35;letter-spacing:-.01em}
@media (max-width:900px){.compGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.compGrid{grid-template-columns:1fr}}

.icon{width:21px;height:21px}

/* ---------- features ---------- */
.featGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;list-style:none}
.feat{
  padding:1.9rem 1.75rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
  position:relative;overflow:hidden;
}
.feat::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent-600),var(--accent-400));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.feat:hover::after{transform:scaleX(1)}
.feat--wide{grid-column:span 2;background:linear-gradient(150deg,var(--paper) 0%,var(--accent-100) 190%)}
.feat__icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--ink-900);color:var(--accent-400);margin-bottom:1.15rem;
}
.feat__icon .icon{width:23px;height:23px}
.feat__title{font-size:1.13rem;letter-spacing:-.015em;margin-bottom:.6rem}
.feat__body{color:var(--ink-500);font-size:.96rem;line-height:1.66}
@media (max-width:980px){.featGrid{grid-template-columns:repeat(2,1fr)}.feat--wide{grid-column:span 2}}
@media (max-width:640px){.featGrid{grid-template-columns:1fr}.feat--wide{grid-column:span 1}}

/* ---------- split / audiences ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-bottom:clamp(3rem,6vw,5.5rem)}
.split:last-child{margin-bottom:0}
.split--flip .split__media{order:2}
.split__media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.split__media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(14,20,48,.22))}
.split__img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__title{font-size:clamp(1.55rem,2.7vw,2.1rem);margin-bottom:.9rem}
.split__text{color:var(--ink-500);font-size:1.03rem;line-height:1.72}
.ticks{list-style:none;margin-top:1.6rem;display:grid;gap:.8rem}
.ticks li{display:flex;gap:.75rem;align-items:flex-start;font-size:.97rem;color:var(--ink-700)}
.ticks__mark{
  flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-100);color:var(--accent-600);margin-top:.13rem;
}
.ticks__mark .icon{width:14px;height:14px;stroke-width:2.4}
@media (max-width:840px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split--flip .split__media{order:0}
}

/* ---------- promise (dark) ---------- */
.promiseGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem;list-style:none}
.promise{
  padding:1.9rem 1.8rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  transition:background .2s, border-color .2s, transform .2s;
}
.promise:hover{background:rgba(255,255,255,.085);border-color:var(--mint-400);transform:translateY(-3px)}
.promise__title{font-size:1.15rem;margin-bottom:.6rem;color:#fff}
.promise__body{color:var(--on-dark-dim);font-size:.97rem;line-height:1.68}
@media (max-width:760px){.promiseGrid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;cursor:pointer;font-weight:600;font-size:1.05rem;
  color:var(--ink-900);list-style:none;letter-spacing:-.012em;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--accent-600)}
.faq__chev{
  flex:none;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease;opacity:.55;
}
.faq__item[open] .faq__chev{transform:rotate(-135deg) translate(-3px,-3px)}
.faq__a{padding:0 0 1.5rem;color:var(--ink-500);max-width:62ch;line-height:1.72;font-size:1rem}

/* ---------- final CTA ---------- */
.band--cta{position:relative;isolation:isolate;color:#fff;padding-block:clamp(5rem,9vw,7.5rem);overflow:hidden}
.cta__media{position:absolute;inset:0;z-index:-2}
.cta__img{width:100%;height:100%;object-fit:cover}
.cta__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,36,64,.93),rgba(11,36,64,.97)),
    radial-gradient(90% 70% at 78% 20%, rgba(121,184,217,.30) 0%, transparent 60%);
}
.cta__inner{position:relative;text-align:center}
.cta__logo{width:auto;height:56px;margin:0 auto 1.6rem;opacity:.95}
.cta__title{font-size:clamp(2.1rem,4.4vw,3.2rem);color:#fff;letter-spacing:-.028em}
.cta__lede{margin-top:1.1rem;color:var(--on-dark-dim);font-size:1.07rem;line-height:1.72}

.signup{
  margin-top:2.4rem;display:grid;grid-template-columns:1fr 1fr auto;gap:.7rem;
  align-items:center;text-align:left;
}
.signup__input{
  width:100%;padding:1rem 1.2rem;border-radius:999px;font:inherit;font-size:1rem;
  background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.24);color:#fff;
  transition:border-color .18s, background .18s;
}
.signup__input::placeholder{color:rgba(255,255,255,.5)}
.signup__input:focus{outline:none;border-color:var(--accent-400);background:rgba(255,255,255,.16)}
/* Full width, and light because it sits on the dark CTA band. It inherited
   .btn--ghost's ink-800 text there, which measured below AA against the scrim:
   the one contrast failure on the site. */
.signup__btn{width:100%;color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.signup__btn:hover{color:var(--ink-900);background:#fff;border-color:#fff}
.signup__hint{
  grid-column:1/-1;text-align:center;margin-top:.9rem;
  font-size:.86rem;color:var(--on-dark-dim);transition:color .2s;
}
.signup__hint.is-ok{color:var(--mint-400);font-weight:600}
.signup__hint.is-err{color:#FFB4A8;font-weight:600}
.signup__btn:disabled{opacity:.72;cursor:default;transform:none!important}
.signup.is-done .signup__input{opacity:.5}
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.signup__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:700px){.signup{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.siteFooter{background:var(--paper-100);border-top:1px solid var(--line);padding-block:3.2rem}
.siteFooter__inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.siteFooter__logo{width:200px;height:auto;margin-bottom:1.1rem}
.siteFooter__tag{color:var(--ink-500);font-size:.93rem;max-width:32ch}
.siteFooter__meta{max-width:46rem;font-size:.87rem;color:var(--ink-500)}
.siteFooter__legal{margin-top:.7rem;font-size:.79rem;color:var(--ink-400);line-height:1.6}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0) * 55ms)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.feat:hover,.comp:hover,.promise:hover{transform:none}
}

/* ---------- articles, content pages and blog ---------- */
.band--article{padding-block:clamp(3rem,6vw,5rem)}
.articleHead{margin-bottom:2.2rem}
.articleHead__title{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.028em;text-wrap:balance}
.articleHead__meta{margin-top:.85rem;font-size:.9rem;color:var(--ink-400)}
.articleLede{
  font-size:1.16rem;line-height:1.7;color:var(--ink-700);
  padding:1.4rem 1.6rem;background:var(--accent-100);border-radius:var(--r-md);
  border-left:3px solid var(--accent-600);margin-bottom:2.6rem;
}

.prose{font-size:1.05rem;line-height:1.78;color:var(--ink-700);overflow-wrap:break-word}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin:2.6rem 0 .9rem;letter-spacing:-.018em}
.prose h3{font-size:1.14rem;margin:1.9rem 0 .6rem;color:var(--ink-800)}
.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.35rem}
.prose li{margin-bottom:.5rem;padding-left:.15rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose strong{color:var(--ink-800);font-weight:640}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--paper-100);padding:.15em .4em;border-radius:5px;color:var(--ink-800);
}
.prose blockquote{
  margin:1.6rem 0;padding:.2rem 0 .2rem 1.3rem;
  border-left:3px solid var(--line);color:var(--ink-500);font-style:italic;
}
.prose a{color:var(--accent-600);text-decoration:underline;text-underline-offset:3px}

/* ---------- tables (compliance documents are mostly tables) ---------- */
/* The wrapper scrolls, never the page. tabindex+role make an overflowing
   table keyboard-scrollable, which WCAG 2.2 needs. */
.tableWrap{overflow-x:auto;margin:0 0 1.6rem;border:1px solid var(--line);border-radius:10px}
.tableWrap:focus-visible{outline:2px solid var(--accent-600);outline-offset:2px}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem;line-height:1.55}
.prose thead{background:var(--paper-100)}
.prose th{
  text-align:left;font-weight:660;color:var(--ink-900);
  padding:.7rem .85rem;border-bottom:1px solid var(--line);white-space:nowrap;
}
.prose td{padding:.7rem .85rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-700)}
/* Empty cells are signature fields in the DPA: keep them tall enough to write in. */
.prose td:empty{min-width:14rem;height:2.6rem}
.prose tbody tr:last-child td{border-bottom:0}
.prose td:first-child{font-weight:560;color:var(--ink-800);min-width:14ch}
/* Conformance verdicts read as status, not prose. */
.prose td:nth-child(2){white-space:nowrap}

/* ---------- documents: wider measure so 3-column tables breathe ---------- */
.wrap--doc{width:min(100% - 2.5rem, 940px)}

/* ---------- print: these documents get printed and attached to a review ---------- */
@media print{
  .siteHeader,.siteFooter,.articleCta,.skipLink,.reveal{display:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  body{background:#fff;color:#000;font-size:10.5pt}
  .wrap,.wrap--doc,.wrap--narrow{width:100%;max-width:none;padding:0}
  .band{padding-block:0}
  .prose{font-size:10.5pt;line-height:1.5;color:#000}
  .prose h2{font-size:14pt;margin-top:18pt;break-after:avoid}
  .prose h3{font-size:11.5pt;break-after:avoid}
  .prose a{color:#000;text-decoration:underline}
  /* Show link targets, since a printed ACR is read away from the browser. */
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444}
  .tableWrap{overflow:visible;border:1px solid #999;border-radius:0}
  .prose table{font-size:8.5pt}
  .prose th,.prose td{border-bottom:1px solid #bbb;padding:.32rem .45rem}
  .prose thead{background:#eee}
  tr,li,blockquote{break-inside:avoid}
  .articleHead__title{font-size:20pt}
}

.takeaways{
  margin:2.8rem 0 0;padding:1.7rem 1.8rem;background:var(--paper-50);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.takeaways__title{font-size:1.02rem;margin-bottom:1rem;letter-spacing:-.01em}
.takeaways ul{list-style:none;display:grid;gap:.75rem}
.takeaways li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;color:var(--ink-700)}

.articleCta{
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
}
.articleCta__text{color:var(--ink-500);font-size:.98rem;max-width:34rem}

/* ---------- blog index ---------- */
/* Shared bits between the lead item and the cards below it. */
.postLead__date,.postCard__date{
  font-size:.78rem;font-weight:640;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-600);
}
.postLead__excerpt,.postCard__excerpt{color:var(--ink-500);line-height:1.66}

/* The most recent post, given the room it deserves. */
.postLead{
  display:block;margin:2.2rem 0 2.8rem;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.postLead:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent-400)}
.postLead__media{aspect-ratio:16/10;overflow:hidden;background:var(--paper-100)}
.postLead__media img{width:100%;height:100%;object-fit:cover;display:block}
.postLead__body{padding:1.6rem 1.75rem 1.8rem}
.postLead--noimg .postLead__body{padding-top:1.8rem}
.postLead__title{font-size:1.72rem;margin:.5rem 0 .7rem;letter-spacing:-.02em;color:var(--ink-900)}
.postLead:hover .postLead__title{color:var(--accent-600)}
.postLead__excerpt{font-size:1.04rem;max-width:44rem}
.postLead__more{
  display:inline-block;margin-top:1rem;font-weight:640;font-size:.95rem;color:var(--accent-600);
}
.postLead__more::after{content:" \2192"}

/* Everything else. Two up on desktop, one on a phone. */
.postGrid{list-style:none;display:grid;gap:1.6rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.postCard{display:flex}
.postCard__link{
  display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--paper);box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.postCard__link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-400)}
.postCard__media{aspect-ratio:16/10;overflow:hidden;background:var(--paper-100)}
.postCard__media img{width:100%;height:100%;object-fit:cover;display:block}
.postCard__body{padding:1.15rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.15rem}
.postCard__title{font-size:1.18rem;margin:.4rem 0 .5rem;letter-spacing:-.015em;color:var(--ink-900);line-height:1.34}
.postCard__link:hover .postCard__title{color:var(--accent-600)}
.postCard__excerpt{font-size:.94rem}

@media (max-width:48rem){
  .postGrid{grid-template-columns:1fr}
  .postLead__body{padding:1.3rem 1.25rem 1.5rem}
  .postLead__title{font-size:1.42rem}
}

/* ---------- article hero ---------- */
.articleHero{margin:1.6rem 0 2rem;padding:0}
.articleHero img{
  width:100%;height:auto;display:block;border-radius:var(--r-md);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
/* Product screenshots are UI, not photography: a lighter frame and a tinted
   mat keep them from reading as a photograph of a screen. */
.articleHero--product img{background:var(--paper-100);box-shadow:var(--shadow-sm)}
.articleHero__cap{margin-top:.6rem;font-size:.84rem;line-height:1.55;color:var(--ink-400)}
.articleHero__cap a{color:var(--accent-600)}

@media (prefers-reduced-motion:reduce){
  .postLead,.postCard__link{transition:none}
  .postLead:hover,.postCard__link:hover{transform:none}
}

/* ---------- footer (multi-column) ---------- */
.siteFooter{background:var(--paper-100);border-top:1px solid var(--line);padding-block:3.4rem 2rem}
.siteFooter__top{
  display:grid;grid-template-columns:minmax(210px,.9fr) 3fr;
  gap:clamp(1.6rem,4vw,3.2rem);padding-bottom:2.6rem;
}
.siteFooter__logo{width:190px;height:auto;margin-bottom:1rem}
.siteFooter__tag{color:var(--ink-500);font-size:.93rem;max-width:30ch;line-height:1.6}
.siteFooter__free{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.siteFooter__pill{
  font-size:.7rem;font-weight:660;letter-spacing:.07em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:999px;
  background:var(--accent-100);color:var(--accent-600);
}
.siteFooter__nav{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem}
.footCol__title{
  font-size:.73rem;font-weight:670;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-900);margin-bottom:.9rem;
}
.footCol ul{list-style:none;display:grid;gap:.55rem}
.footCol a{color:var(--ink-500);text-decoration:none;font-size:.91rem;transition:color .15s}
.footCol a:hover{color:var(--accent-600);text-decoration:underline;text-underline-offset:3px}
.siteFooter__bottom{border-top:1px solid var(--line);padding-top:1.6rem}
.siteFooter__copy{font-size:.88rem;color:var(--ink-500)}
.siteFooter__legal{margin-top:.6rem;font-size:.78rem;color:var(--ink-400);line-height:1.6;max-width:72ch}
@media (max-width:1100px){
  .siteFooter__top{grid-template-columns:1fr;gap:2.4rem}
  .siteFooter__nav{grid-template-columns:repeat(3,1fr);gap:2rem 1.4rem}
}
@media (max-width:700px){.siteFooter__nav{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.siteFooter__nav{grid-template-columns:1fr}}

/* legal pages: tighter measure, numbered sections read as structure */
.prose h2{scroll-margin-top:5rem}

/* ============================================================================
   ROADMAP
   Progressive enhancement: everything below assumes the markup is already
   readable without JS. Filters are hidden until upgraded; details are native.
   ========================================================================= */

.band--roadmapHead{padding-block:clamp(2.6rem,5vw,4rem) 1.2rem}
.rmHead__title{
  font-size:clamp(1.9rem,4.4vw,2.9rem);letter-spacing:-.022em;line-height:1.12;
  color:var(--ink-900);margin:.5rem 0 .8rem;
}
.rmHead__lede{font-size:clamp(1.02rem,1.7vw,1.15rem);color:var(--ink-500);line-height:1.7;max-width:62ch}

.rmNote{
  margin-top:1.6rem;padding:1rem 1.15rem;border-radius:12px;
  background:var(--accent-100);border:1px solid var(--line);
}
.rmNote p{color:var(--ink-700);font-size:.95rem;line-height:1.65;margin:0}

/* ---------- progress ring + key dates ---------- */
.rmStats{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3rem);
  align-items:center;margin-top:1.8rem;padding:1.3rem 1.4rem;
  border:1px solid var(--line);border-radius:14px;background:var(--paper);
  box-shadow:var(--shadow-sm);
}
.rmProgress{display:flex;align-items:center;gap:1rem}
.rmRing{width:92px;height:92px;transform:rotate(-90deg);flex:0 0 auto}
.rmRing__track{fill:none;stroke:var(--paper-100);stroke-width:10}
.rmRing__fill{
  fill:none;stroke:var(--accent-500);stroke-width:10;stroke-linecap:round;
  /* r=52 -> circumference 326.7 */
  stroke-dasharray:326.7;
  stroke-dashoffset:calc(326.7 - (326.7 * var(--pct) / 100));
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.85,.3,1);
}
.rmProgress__txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem;margin:0}
.rmProgress__num{font-size:2rem;font-weight:700;color:var(--ink-900);line-height:1}
.rmProgress__pc{font-size:1.1rem;font-weight:600;color:var(--ink-400)}
.rmProgress__lbl{flex:0 0 100%;font-size:.86rem;color:var(--ink-400);margin-top:.3rem}

.rmKeyDates{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:0}
.rmKeyDates dt{font-size:.72rem;font-weight:670;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.rmKeyDates dd{margin:.28rem 0 0;font-size:1rem;font-weight:600;color:var(--ink-800)}

/* ---------- filters ---------- */
.band--roadmap{padding-block:1.4rem clamp(3rem,6vw,5rem)}
.rmFilters{
  display:flex;flex-wrap:wrap;gap:1.2rem 1.6rem;align-items:flex-end;
  padding:1.1rem 0 1.3rem;border-bottom:1px solid var(--line);margin-bottom:.4rem;
}
.rmFilters[hidden]{display:none}
.rmFilters__group{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.rmFilters__legend{
  font-size:.72rem;font-weight:670;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);margin-right:.3rem;
}
.rmFilters__actions{margin-left:auto}
.rmPill{
  font:inherit;font-size:.86rem;font-weight:560;cursor:pointer;
  padding:.4rem .82rem;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-500);
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background .15s,border-color .15s,color .15s;
}
.rmPill:hover{border-color:var(--accent-500);color:var(--accent-600)}
.rmPill.is-on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.rmPill.is-on .rmPill__n{background:rgba(255,255,255,.2);color:#fff}
.rmPill__n{
  font-size:.72rem;font-weight:660;padding:.05rem .38rem;border-radius:999px;
  background:var(--paper-100);color:var(--ink-400);
}
.rmToggle,.rmLinkBtn{
  font:inherit;font-size:.86rem;font-weight:560;cursor:pointer;
  background:none;border:0;padding:.4rem .2rem;color:var(--accent-600);
  text-decoration:underline;text-underline-offset:3px;
}
.rmToggle:hover,.rmLinkBtn:hover{color:var(--ink-900)}
.rmCount{font-size:.85rem;color:var(--ink-400);margin:.7rem 0 .2rem;min-height:1.2em}

/* ---------- the timeline ---------- */
.rmList{list-style:none;margin:1.4rem 0 0;padding:0;position:relative}
/* the spine */
.rmList::before{
  content:"";position:absolute;left:11px;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(180deg,var(--accent-400),var(--line));
}
.rmItem{position:relative;padding:0 0 1.15rem 2.6rem;scroll-margin-top:5.5rem}
.rmItem[hidden]{display:none}
.rmItem__marker{position:absolute;left:0;top:.35rem;width:24px;display:flex;justify-content:center}
.rmItem__dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink-300);
  box-shadow:0 0 0 4px var(--paper-50);
}
.rmItem--shipped  .rmItem__dot{background:var(--accent-500);border-color:var(--accent-500)}
.rmItem--building .rmItem__dot{border-color:var(--accent-500);background:var(--paper)}
.rmItem--next     .rmItem__dot{border-color:var(--accent-400)}

.rmItem__body{
  border:1px solid var(--line);border-radius:14px;background:var(--paper);
  padding:1rem 1.15rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .18s,border-color .18s,transform .18s;
}
.rmItem:hover .rmItem__body{box-shadow:var(--shadow-md);border-color:var(--accent-400)}
.rmItem--shipped .rmItem__body{background:linear-gradient(180deg,var(--accent-100),var(--paper) 62%)}

.rmItem__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:.5rem}
.rmBadge{
  font-size:.68rem;font-weight:680;letter-spacing:.075em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:999px;
  background:var(--paper-100);color:var(--ink-400);border:1px solid var(--line);
}
.rmBadge--shipped {background:var(--accent-600);color:#fff;border-color:var(--accent-600)}
.rmBadge--building{background:var(--accent-100);color:var(--accent-600);border-color:var(--accent-400)}
.rmBadge--next    {background:var(--paper);color:var(--accent-600);border-color:var(--accent-400)}
.rmItem__when{font-size:.82rem;font-weight:600;color:var(--ink-400)}

/* native disclosure, restyled */
.rmItem__d summary{list-style:none;cursor:pointer;display:block;position:relative}
.rmItem__d summary::-webkit-details-marker{display:none}
.rmItem__d summary:focus-visible{outline:2px solid var(--accent-600);outline-offset:4px;border-radius:8px}
.rmItem__title{font-size:clamp(1.08rem,2vw,1.26rem);line-height:1.3;color:var(--ink-900);margin:0 0 .32rem;letter-spacing:-.012em}
.rmItem__sum{font-size:.96rem;line-height:1.62;color:var(--ink-500);margin:0}
.rmItem__more{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:.55rem;
  font-size:.82rem;font-weight:600;color:var(--accent-600);
}
.rmItem__chev{transition:transform .2s}
.rmItem__d[open] .rmItem__chev{transform:rotate(180deg)}
.rmItem__d[open] .rmItem__moreTxt::after{content:"";}

.rmItem__detail{padding-top:.9rem;margin-top:.9rem;border-top:1px solid var(--line)}
.rmItem__h3{
  font-size:.73rem;font-weight:680;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);margin:0 0 .55rem;
}
.rmItem__h3--not{margin-top:1.1rem;color:var(--ink-400)}
.rmUnlocks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rmUnlocks li{display:flex;gap:.55rem;font-size:.93rem;line-height:1.6;color:var(--ink-700)}
.rmUnlocks__mark{flex:0 0 auto;color:var(--accent-600);display:inline-flex;margin-top:.22rem}
.rmUnlocks__mark svg{width:15px;height:15px}
.rmExcludes{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rmExcludes li{
  font-size:.9rem;line-height:1.6;color:var(--ink-500);
  padding-left:.8rem;border-left:2px solid var(--line);
}
.rmWhy{
  margin:1.1rem 0 0;padding:.75rem .9rem;border-radius:10px;
  background:var(--paper-50);border:1px solid var(--line);
  font-size:.9rem;line-height:1.62;color:var(--ink-500);
}
.rmWhy__lbl{
  display:block;font-size:.68rem;font-weight:680;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-400);margin-bottom:.28rem;
}
.rmItem__link{margin:.9rem 0 0;font-size:.9rem}

.rmEmpty{padding:2rem 0;color:var(--ink-500);font-size:.98rem}
.rmFoot{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.rmFoot p{color:var(--ink-500);font-size:.95rem;line-height:1.7;max-width:64ch}
.rmFoot__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}

@media (max-width:620px){
  .rmStats{grid-template-columns:1fr;gap:1.2rem}
  .rmFilters__actions{margin-left:0;width:100%}
  .rmItem{padding-left:2.1rem}
  .rmList::before{left:9px}
}

/* Motion is decoration. Users who ask for less get none of it. */
@media (prefers-reduced-motion:reduce){
  .rmRing__fill{transition:none}
  .rmItem__body,.rmItem__chev{transition:none}
  .rmItem.is-filtering{animation:none !important}
}
@media (prefers-reduced-motion:no-preference){
  .rmItem.is-filtering{animation:rmIn .32s cubic-bezier(.22,.85,.3,1) both}
  @keyframes rmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

@media print{
  .rmFilters,.rmFoot__cta,.rmCount{display:none !important}
  .rmItem__body{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
  .rmItem__detail{display:block !important}
  .rmRing__fill{transition:none}
}

/* ---------- roadmap build log ---------- */
.rmLog{
  margin:1.6rem 0 .4rem;padding:1.15rem 1.25rem;border-radius:14px;
  background:var(--paper-50);border:1px solid var(--line);
}
.rmLog__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem}
.rmLog__title{font-size:1.02rem;color:var(--ink-900);margin:0;letter-spacing:-.01em}
.rmLog__rss{font-size:.84rem;font-weight:560;color:var(--accent-600)}
.rmLog__lede{font-size:.88rem;color:var(--ink-400);line-height:1.6;margin:.4rem 0 1rem;max-width:62ch}
.rmLog__list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.rmLog__item{display:grid;grid-template-columns:6.4rem 1fr;gap:.9rem;scroll-margin-top:5.5rem}
.rmLog__date{font-size:.79rem;font-weight:600;color:var(--ink-400);padding-top:.12rem;white-space:nowrap}
.rmLog__h{margin:0 0 .18rem;font-size:.95rem;font-weight:600;color:var(--ink-800);line-height:1.45}
.rmLog__kind{
  display:inline-block;font-size:.63rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.14rem .42rem;border-radius:999px;margin-right:.42rem;
  vertical-align:.09em;background:var(--paper-100);color:var(--ink-400);border:1px solid var(--line);
}
.rmLog__kind--shipped {background:var(--accent-600);color:#fff;border-color:var(--accent-600)}
.rmLog__kind--progress{background:var(--accent-100);color:var(--accent-600);border-color:var(--accent-400)}
/* A slip must not look like good news. */
.rmLog__kind--slip    {background:#FDF1E3;color:#8A5A16;border-color:#E8C79A}
.rmLog__txt{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-500)}
@media (max-width:560px){
  .rmLog__item{grid-template-columns:1fr;gap:.2rem}
  .rmLog__date{padding-top:0}
}
@media print{ .rmLog__rss{display:none} }

/* The go-live date is the headline, so it outranks the other key dates. */
.rmKeyDates--lead dt{color:var(--accent-600)}
.rmKeyDates--lead dd{font-size:1.22rem;font-weight:700;color:var(--ink-900);letter-spacing:-.015em}

/* ---------- Beta ---------- */
.betaTag{
  display:inline-block;margin-left:.2rem;padding:.1rem .4rem;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.6rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;
  color:var(--accent-600);background:var(--accent-100);
  border:1px solid rgba(46,95,138,.25);border-radius:999px;
}
.hero__beta{
  max-width:52ch;margin:1rem 0 0;font-size:.85rem;line-height:1.6;
  color:rgba(255,255,255,.82);border-left:2px solid rgba(255,255,255,.35);padding-left:.8rem;
}
.cta__actions{margin:1.4rem 0 .4rem}
.cta__alt{margin:1.6rem 0 .7rem;font-size:.88rem;color:rgba(255,255,255,.75)}

/* ---------- Guide screenshots ---------- */
.shot{margin:1.6rem 0;padding:0}
.shot__img{
  width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid var(--line);box-shadow:0 2px 14px rgba(23,33,45,.08);
}
.shot figcaption{
  margin-top:.55rem;font-size:.84rem;line-height:1.55;color:var(--ink-400);
}

/* ---------- "Read next" on articles ----------
   Blog posts previously ended in a signup CTA with no path to the pages the
   site is trying to rank. Styled like the takeaways block so it reads as part
   of the article furniture rather than as an ad. */
.readNext{
  margin:2.6rem 0 0;padding:1.4rem 1.5rem;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-50);
}
.readNext__title{
  margin:0 0 .8rem;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-400);
}
.readNext ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.readNext li{display:grid;gap:.15rem}
.readNext a{font-weight:640;color:var(--accent-600);text-decoration:none}
.readNext a:hover{text-decoration:underline}
.readNext span{color:var(--ink-500);font-size:.9rem;line-height:1.55}