/* ==========================================================================
   Expert Level Content — Home
   Design tokens, layout and components.
   Converted from the Claude Design canvas source; `style-hover` attributes
   from the canvas are implemented here as real :hover states.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #faf7f2;  /* paper */
  --forest:        #152a1e;  /* dark sections + nav */

  /* Ink */
  --ink:           #141613;
  --body:          #4a4e47;
  --muted:         #5b5f58;
  --faint:         #8a8e83;  /* 3.13:1 on paper — decorative only, never text */

  /* Rules */
  --rule:          #e7e5df;
  --rule-strong:   #dcd6c9;
  --rule-soft:     #d9d2c6;

  /* Brand */
  --green:         #2f6b4f;
  --green-dark:    #234f3a;  /* hover on light */
  --green-bright:  #3d8562;  /* hover on dark */
  --rust:          #a94b32;
  --tan:           #d18f6f;

  /* On dark */
  --cream:         #f7f3ec;
  --cream-warm:    #f2ede4;
  --sage:          #a9b8ac;
  --sage-dim:      #8fa094;
  --sage-nav:      #aab7ad;
  --mint:          #8fbfa2;

  /* Type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-text:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Metrics */
  --wrap:   1180px;
  --gutter: clamp(20px, 4vw, 40px);
  /* Measured height of the sticky nav at this breakpoint. Anchor targets add
     clearance from it, so it must be kept in step with the nav media queries. */
  --nav-h:  71px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

::selection { background: rgba(47, 107, 79, .16); }

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

/* Green rings only work on paper (5.89:1). On forest grounds green falls to
   2.41:1 — below the 3:1 SC 1.4.11 needs — and on .btn--final the ring is the
   very colour of the button fill. Cream clears both (13.7:1 on forest).
   .skip-link is a SIBLING of <nav>, not a descendant, so it must be named;
   .closing already carries .section--dark. */
.nav :focus-visible,
.section--dark :focus-visible,
.skip-link:focus-visible { outline-color: var(--cream); }

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

/* Skip link — visible only on keyboard focus.
   Parked with transform rather than left:-9999px so it never contributes
   an off-canvas box to document width. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-130%);
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
  transition: transform .18s ease;
}
.skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

.wrap { max-width: var(--wrap); margin: 0 auto; }

/* The nav is pinned, so an unadjusted anchor jump parks the target underneath
   it. Applied to every id so footnotes, sources and section links all clear. */
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

/* --------------------------------------------------------------------------
   Reveal-on-scroll (progressive enhancement — `r` is added by JS)
   -------------------------------------------------------------------------- */

html.r [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1s cubic-bezier(.2, .7, .2, 1),
    transform 1s cubic-bezier(.2, .7, .2, 1);
}
html.r [data-reveal].in { opacity: 1; transform: none; }

html.r [data-rail] {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s cubic-bezier(.25, .8, .3, 1) .15s;
}
html.r [data-rail].in { transform: scaleY(1); }

@keyframes elc-draw    { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes elc-draw-s  { from { stroke-dashoffset: 180; } to { stroke-dashoffset: 0; } }
@keyframes elc-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes elc-pulse   {
  0%   { transform: translateX(0);     opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(148px); opacity: 0; }
}
@keyframes elc-drop {
  0%   { transform: translateY(-6px); opacity: .2; }
  50%  { transform: translateY(6px);  opacity: 1; }
  100% { transform: translateY(-6px); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.r [data-reveal],
  html.r [data-rail] { opacity: 1; transform: none; transition: none; }
  [data-anim] { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--forest);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.nav__logo { display: block; flex: 0 0 auto; color: var(--cream); }
.nav__logo:hover { color: var(--cream); }

.nav__logo-name {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.nav__logo-name em { font-style: italic; color: var(--tan); }

.nav__logo-tag {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sage-dim);
  margin-top: 5px;
}

.nav__spacer { flex: 1 1 auto; }

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  font-family: var(--font-sans);
  font-size: 13.5px;
}
.nav__links a { color: var(--sage-nav); transition: color .25s ease; }
.nav__links a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: 6px;
  transition: background .25s ease;
}
.btn:hover { background: var(--green-dark); color: #fff; }

.btn--nav   { flex: 0 0 auto; font-size: 14px; padding: 11px 20px; }
.btn--hero  { font-size: 16px; padding: 16px 30px; }
.btn--final { font-size: 16px; padding: 16px 32px; }
/* On the dark closing panel the hover lifts *brighter*, not darker. */
.btn--final:hover { background: var(--green-bright); color: #fff; }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}

.eyebrow--dark {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: radial-gradient(130% 90% at 50% -10%, #f9f0e5 0%, var(--bg) 62%);
  padding: clamp(64px, 9vw, 132px) var(--gutter) clamp(40px, 6vw, 80px);
}

.hero__inner { max-width: 1000px; margin: 0 auto; text-align: center; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 84px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: clamp(22px, 3vw, 38px) 0 0;
}
.hero__title em { font-style: italic; color: var(--rust); }

.hero__lede {
  max-width: 640px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.75;
  color: var(--body);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.hero__cta-note { font-size: 13px; color: var(--muted); }

.hero__diagram { max-width: 1060px; margin: clamp(48px, 7vw, 96px) auto 0; }
.hero__diagram svg { width: 100%; height: auto; display: block; overflow: visible; }

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(40px, 5vw, 72px);
}
.scroll-cue__label {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue__line {
  width: 1px;
  height: 44px;
  background: linear-gradient(#c9c2b4, rgba(201, 194, 180, 0));
  animation: elc-drop 2.6s ease-in-out infinite;
}

/* SVG diagram animation (staggered via --d) */
/* fill lives here, not as a presentation attribute on the <g>: the labels are
   the diagram's payload, so they need --muted (6.10:1), not --faint (3.13:1).
   Automated contrast tools skip SVG <text>, so this one has to be held by hand. */
.dg-label { fill: var(--muted); animation: elc-fade .8s ease var(--d) both; }
.dg-path  { animation: elc-draw   1.8s cubic-bezier(.4, .1, .2, 1) var(--d) both; }
.dg-spine { animation: elc-draw-s 1.1s cubic-bezier(.4, .1, .2, 1) var(--d) both; }
.dg-fade  { animation: elc-fade   .6s  ease var(--d) both; }
.dg-fade--slow { animation: elc-fade .8s ease var(--d) both; }
.dg-pulse { animation: elc-pulse  3.4s ease-in-out var(--d) infinite; }

/* --------------------------------------------------------------------------
   Section: How the system connects
   -------------------------------------------------------------------------- */

.section {
  padding: clamp(72px, 9vw, 132px) var(--gutter);
}
.section--ruled { border-top: 1px solid var(--rule); }
.section--dark  { background: var(--forest); }

.section__head { max-width: 820px; }

.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 22px 0 0;
}
.section__title em { font-style: italic; color: var(--rust); }

.section__lede {
  max-width: 660px;
  margin: 26px 0 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.75;
  color: var(--body);
}

.stack {
  position: relative;
  margin-top: clamp(48px, 6vw, 84px);
}
.stack__rail {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--rule-strong);
}

.claim {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(24px, 4vw, 64px);
  padding: clamp(26px, 3.5vw, 40px) 0 clamp(26px, 3.5vw, 40px) clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}
.claim:last-child { border-bottom: 1px solid var(--rule); }

.claim__head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 230px;
}
.claim__num {
  font-family: var(--font-text);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.claim__label {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.25;
  color: var(--ink);
}
.claim__body {
  flex: 1 1 340px;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
}

.pull {
  margin: clamp(32px, 4vw, 48px) 0 0;
  font-family: var(--font-text);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
}

/* Footnote references.
   --muted (not --faint) so 11px refs clear WCAG AA 4.5:1 on paper. */
.fn {
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  padding: 0 1px;
}
.fn:hover, .fn:focus-visible { color: var(--green); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Section: Recommended tools for… (dark)
   -------------------------------------------------------------------------- */

.usecase {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 72px);
  padding: clamp(44px, 5vw, 72px) 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.usecase:first-child { padding-top: 0; border-top: 0; }
.usecase:last-child  { padding-bottom: 0; }

.usecase__head { flex: 1 1 260px; max-width: 340px; }

.usecase__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 16px 0 0;
}

.usecase__body { flex: 1 1 400px; }

.usecase__lead {
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.55;
  color: var(--cream-warm);
}

.usecase__note {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sage);
}

.toollinks {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 14px;
}
.toollinks a {
  color: var(--mint);
  border-bottom: 1px solid rgba(143, 191, 162, .3);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.toollinks a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   Section: Part of the core system (tool rows)
   -------------------------------------------------------------------------- */

.tools__eyebrow { margin-bottom: clamp(36px, 4.5vw, 60px); }

.tool {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(24px, 4vw, 64px);
  padding: clamp(28px, 3.5vw, 44px) clamp(8px, 1.5vw, 20px);
  border-top: 1px solid var(--rule);
  color: var(--ink);
  transition: background .35s ease;
}
.tool:last-of-type { border-bottom: 1px solid var(--rule); }
.tool:hover { background: rgba(47, 107, 79, .045); color: var(--ink); }

.tool__head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 250px;
}
.tool__num {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.tool__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--ink);
}
.tool__name span { font-size: .72em; color: var(--muted); }
.tool__tagline {
  font-family: var(--font-text);
  font-style: italic;
  font-size: 17px;
  color: var(--rust);
  margin-top: 8px;
}

.tool__body { flex: 1 1 380px; }
.tool__desc {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body);
}

.tool__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 24px;
  margin-top: 20px;
}
.tool__best {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool__more { font-size: 14px; font-weight: 500; color: var(--green); }

/* --------------------------------------------------------------------------
   Closing panel
   -------------------------------------------------------------------------- */

.closing { padding: clamp(80px, 10vw, 148px) var(--gutter); }
.closing__inner { max-width: 860px; margin: 0 auto; text-align: center; }

.closing__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 66px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--cream);
  margin: 0;
}
.closing__title em { font-style: italic; color: var(--tan); }

.closing__lead {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  font-family: var(--font-text);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.6;
  color: var(--cream-warm);
}

.closing__note {
  max-width: 640px;
  margin: 26px auto 0;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.8;
  color: var(--sage);
}

.closing__kicker {
  margin: 34px 0 0;
  font-family: var(--font-text);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.6;
  color: var(--tan);
}

.closing__action { margin-top: clamp(32px, 4vw, 48px); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(32px, 4vw, 48px);
}

.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
}

.footer__brand { flex: 1 1 320px; max-width: 420px; }
.footer__name {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.footer__tag {
  font-family: var(--font-text);
  font-style: italic;
  font-size: 16px;
  color: var(--green);
  margin-top: 8px;
}
.footer__blurb {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.footer__col { flex: 0 1 170px; }
.footer__col--wide { flex: 1 1 220px; }

.footer__label {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 16px;
  font-size: 14px;
}
.footer__list a { color: var(--body); transition: color .25s ease; }
.footer__list a:hover { color: var(--green); }

.footer__contact {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
}
.footer__contact a { color: var(--green); word-break: break-word; }

.footer__cta {
  display: inline-block;
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--green);
  border-bottom: 1px solid rgba(47, 107, 79, .35);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.footer__cta:hover { color: var(--green-dark); border-bottom-color: var(--green-dark); }

/* Sources */
.sources {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.sources__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.sources__plus {
  font-size: 16px;
  line-height: 1;
  color: var(--green);
  transition: transform .3s ease;
}
details[open] .sources__plus { transform: rotate(45deg); }

.sources__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}
.sources__list li { display: flex; gap: 12px; }
.sources__list a { color: var(--green); word-break: break-word; }
.sources__num { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Briefly highlight a source when jumped to from a footnote */
.sources__list li:target,
.sources__list li.is-target { background: rgba(47, 107, 79, .08); border-radius: 4px; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 32px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

/* The two-column rows are `flex: 0 0 auto` so they hold their column on
   desktop — but that sizes them to max-content, which pushes the page
   sideways on phones. Below 700px let them take the full row and wrap. */
@media (max-width: 700px) {
  .claim__head,
  .tool__head {
    flex: 1 1 100%;
    min-width: 0;
  }
  .claim__label,
  .tool__name,
  .tool__tagline { overflow-wrap: break-word; }

  .claim { padding-left: clamp(18px, 5vw, 28px); }
  .tool__meta { margin-top: 16px; }
}

/* The bar is pinned, so every pixel of its height is permanently lost from
   the viewport. Once logo + links + CTA stop fitting on one line the default
   flex-wrap gives three rows; below 1060px (the width at which all three
   genuinely fit one line) drop the spacer so the logo and CTA share row 1,
   and put the section links on their own non-wrapping row. */
@media (max-width: 1060px) {
  :root { --nav-h: 91px; }

  .nav__inner { gap: 10px 20px; padding: 11px var(--gutter); }
  .nav__spacer { display: none; }

  .nav__links {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 20px;
    font-size: 13px;
    /* overflow-x makes this a scroll container, which clips the focus ring off
       the links. Pad the clip rect by the ring's 5px reach (3px offset + 2px
       width), then cancel it with a negative margin so nav height is unchanged. */
    padding-block: 6px;
    margin-block: -6px;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; }

  .btn--nav { margin-left: auto; }
}

@media (max-width: 620px) {
  /* Phones: reclaim more height. The tagline is decorative and repeated
     verbatim in the hero, so it is the cheapest thing to drop. */
  :root { --nav-h: 109px; }

  .nav__inner { gap: 8px 14px; padding: 10px var(--gutter); }
  .nav__logo-tag { display: none; }
  .nav__logo-name { font-size: 19px; }
  .btn--nav { font-size: 13px; padding: 10px 15px; }
}

@media print {
  .nav, .scroll-cue, .skip-link { display: none; }
  body { background: #fff; }
  .section--dark, .closing { background: #fff; }
  .closing__title, .usecase__title { color: #000; }
  .usecase__lead, .closing__lead { color: #222; }
}