/* ==========================================================================
   Base elements + layout primitives
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-weight:var(--fw-regular);text-wrap:balance}
h1{font-size:var(--fs-display-1);line-height:var(--lh-display-1);letter-spacing:var(--ls-display-1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:var(--fw-medium)}
h5{font-size:var(--fs-h5);line-height:var(--lh-h5);letter-spacing:var(--ls-h5);font-weight:var(--fw-medium)}
h6{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-semibold)}

p{margin:0;text-wrap:pretty}

a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:var(--transition-hover)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}

strong{font-weight:var(--fw-semibold);color:var(--text-heading)}
small{font-size:var(--fs-caption);line-height:var(--lh-caption)}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--border-default);margin:0}

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

::selection{background:var(--teal-100);color:var(--teal-950)}

/* --- Skip link ---------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--teal-900);color:var(--neutral-0);
  border-radius:0 0 var(--radius-sm) 0;text-decoration:none;font-size:var(--fs-ui);
}
.skip-link:focus{left:0;color:var(--neutral-0)}

/* --- Container and section ---------------------------------------------- */
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad)}
.container--narrow{max-width:880px}
.container--prose{max-width:840px}

.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section--tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
.section--loose{padding-top:var(--section-y-loose);padding-bottom:var(--section-y-loose)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}

.section--page{background:var(--surface-page);color:var(--text-body)}
.section--muted{background:var(--surface-muted);color:var(--text-body)}
.section--tint{background:var(--surface-tint);color:var(--text-body)}
.section--accent-tint{background:var(--surface-accent-tint);color:var(--text-body)}
.section--inverse{background:var(--surface-inverse);color:var(--text-on-inverse)}
.section--inverse h1,.section--inverse h2,.section--inverse h3,
.section--inverse h4,.section--inverse h5{color:var(--neutral-0)}

/* --- Stacks and grids ---------------------------------------------------- */
.stack{display:flex;flex-direction:column}
.stack-1{gap:var(--space-1)}.stack-2{gap:var(--space-2)}.stack-3{gap:var(--space-3)}
.stack-4{gap:var(--space-4)}.stack-5{gap:var(--space-5)}.stack-6{gap:var(--space-6)}
.stack-7{gap:var(--space-7)}.stack-8{gap:var(--space-8)}.stack-9{gap:var(--space-9)}
.stack-10{gap:var(--space-10)}

.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.row--between{justify-content:space-between}
.row--center{justify-content:center}
.row--top{align-items:flex-start}
.row--tight{gap:var(--space-2)}
.row--wide{gap:var(--space-5)}

.grid{display:grid;gap:var(--space-5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10)}
.grid--sidebar{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-10);align-items:start}

/* --- Type utilities ------------------------------------------------------ */
.eyebrow{
  font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--text-accent);
}
.eyebrow--inverse{color:var(--orange-300)}

.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:var(--fw-light);color:var(--text-body)}
.body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);font-weight:var(--fw-light)}
.body{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:var(--fw-light);color:var(--text-body)}
.ui{font-size:var(--fs-ui);line-height:var(--lh-ui)}
.caption{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
.micro{font-size:var(--fs-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro);color:var(--text-muted)}
.on-inverse{color:var(--text-on-inverse-muted)}
.text-center{text-align:center}
.measure{max-width:820px}
.measure--wide{max-width:880px}
.mx-auto{margin-left:auto;margin-right:auto}
.numeric{font-variant-numeric:tabular-nums}

/* --- Prose: long-form copy inside legal, glossary and blog pages --------- */
.prose{max-width:840px;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:var(--fw-light);color:var(--text-body)}
.prose > * + *{margin-top:var(--space-5)}
.prose h2{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);margin-top:var(--space-10)}
.prose h3{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:var(--fw-medium);margin-top:var(--space-8)}
.prose h4{font-size:var(--fs-h5);line-height:var(--lh-h5);margin-top:var(--space-7)}
.prose ul,.prose ol{margin:0;padding-left:var(--space-5)}
.prose li + li{margin-top:var(--space-2)}
.prose li::marker{color:var(--teal-600)}

/* --- Bullet list with teal check marks ----------------------------------- */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.checklist li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:var(--fw-light);color:var(--text-body)}
.checklist li strong{font-weight:var(--fw-medium)}
.checklist .icon{color:var(--teal-600);margin-top:4px;flex-shrink:0}
.checklist--inverse li{color:var(--text-on-inverse-muted)}
.checklist--inverse .icon{color:var(--orange-300)}

.divided-list{list-style:none;margin:0;padding:0}
.divided-list li{padding:var(--space-4) 0;border-top:1px solid var(--border-subtle)}
.divided-list li:first-child{border-top:0}

/* --- Icons: Lucide outline rendered as a mask over currentColor ---------- */
.icon{
  display:inline-block;width:20px;height:20px;flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  vertical-align:middle;
}
.icon--14{width:14px;height:14px}
.icon--16{width:16px;height:16px}
.icon--18{width:18px;height:18px}
.icon--20{width:20px;height:20px}
.icon--22{width:22px;height:22px}
.icon--24{width:24px;height:24px}
.icon--32{width:32px;height:32px}

.icon-tile{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--radius-md);
  background:var(--surface-tint);color:var(--teal-700);flex-shrink:0;
}
/* Same treatment, scaled down for dense rows. */
.icon-tile--sm{width:40px;height:40px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (max-width:1100px){
  :root{--container-pad:40px;--section-y:72px;--section-y-loose:88px}
  .grid--split,.grid--sidebar{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px){
  :root{
    --container-pad:24px;--section-y:56px;--section-y-tight:40px;--section-y-loose:64px;
    --fs-display-1:40px;--lh-display-1:47px;--ls-display-1:-1.2px;
    --fs-display-2:34px;--lh-display-2:41px;--ls-display-2:-1px;
    --fs-h2:32px;--lh-h2:39px;--ls-h2:-1px;
    --fs-h3:26px;--lh-h3:33px;--ls-h3:-.5px;
    --fs-h4:21px;--lh-h4:29px;
    --fs-h5:19px;--lh-h5:26px;
    --fs-lead:19px;--lh-lead:29px;
    --fs-body-lg:18px;--lh-body-lg:28px;
  }
  .grid--2,.grid--3,.grid--4,.grid--tiles{grid-template-columns:minmax(0,1fr)}
}