/* ============================================================
   DESIGN TOKENS
   No brand green anywhere in this system. Grayscale only.
   ============================================================ */
:root{
  --ink:#222222;
  --graphite:#6A6A6A;
  --hairline:#EBEBEB;
  --paper:#FFFFFF;
  --mist:#F7F7F7;
  --stone:#F2F2F2;

  --knowledge-copy:680px;
  --knowledge-lede:760px;

  --header-h:72px;

  --gutter:14px;
  --ease:cubic-bezier(.4,0,.2,1);
}

@media (min-width:768px){ :root{ --gutter:28px; } }
@media (min-width:1024px){ :root{ --gutter:44px; } }

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body.kc-body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.kc-body img{max-width:100%;display:block;}
.kc-body button{font-family:inherit;}

.kc-body a:focus-visible,
.kc-body button:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  .kc-body *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

.kc-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;
}

/* ============================================================
   RESPONSIVE RAIL
   Below 1800px: responsive gutters.
   At/above 1800px: centered ~1780px composition, full-span backgrounds.
   ============================================================ */
.kc-rail{
  width:100%;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
@media (min-width:1800px){
  .kc-rail{
    padding-left:calc(28px + (100vw - 1780px) / 2);
    padding-right:calc(28px + (100vw - 1780px) / 2);
  }
}

.kc-bleed{ width:100%; position:relative; }

/* ============================================================
   FIXED HEADER
   Left: back chevron. Center: title. Right: empty balancing slot.
   No hamburger. No overlay. No menu machinery of any kind.
   ============================================================ */
.kc-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--header-h);
  padding-top:env(safe-area-inset-top, 0);
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.kc-header--scrolled{ border-bottom-color:var(--hairline); }
.kc-header-inner{
  height:var(--header-h);
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
}
.kc-back{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  color:var(--ink);
  text-decoration:none;
}
.kc-back svg{ width:22px; height:22px; }
.kc-header-title{
  text-align:center;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 8px;
}
.kc-header-slot{ width:44px; height:44px; }

.kc-main{ padding-top:var(--header-h); }

/* ============================================================
   SHAPE SYSTEM
   Grayscale only. pointer-events:none. Max two per page.
   Adapts substantially between phone and desktop.
   ============================================================ */
.kc-shape{ position:absolute; pointer-events:none; z-index:0; }

.shape-wave-dark{
  position:absolute;
  top:-12%;
  right:-10%;
  width:min(54vw, 820px);
  height:124%;
  background:var(--ink);
  border-radius:48% 0 0 52% / 38% 0 0 62%;
  transform:rotate(-4deg);
  pointer-events:none;
  z-index:0;
}
@media (max-width:767px){
  .shape-wave-dark{
    top:auto;
    right:-28%;
    bottom:-35%;
    width:110%;
    height:62%;
    border-radius:55% 45% 0 0 / 65% 55% 0 0;
  }
}

.shape-soft-landscape{
  position:absolute;
  inset:10% -8% 8% 30%;
  background:var(--stone);
  border-radius:46% 54% 38% 62% / 58% 42% 58% 42%;
  transform:rotate(2deg);
  pointer-events:none;
  z-index:0;
}

.shape-arc{
  position:absolute;
  width:clamp(320px, 46vw, 760px);
  aspect-ratio:1;
  border-radius:50%;
  border:clamp(42px, 6vw, 96px) solid var(--stone);
  right:-18%;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:0;
}

.kc-route-line{ position:relative; pointer-events:none; z-index:0; }
.kc-route-line svg{ width:100%; height:auto; display:block; }
.kc-route-line path{ fill:none; stroke:var(--hairline); stroke-width:1.5; }
.kc-route-line--on-dark path{ stroke:rgba(255,255,255,0.28); }
.kc-route-line circle{ fill:var(--paper); stroke:var(--ink); stroke-width:1.5; }
.kc-route-line--on-dark circle{ fill:var(--ink); stroke:var(--paper); }

/* ============================================================
   TYPE UTILITIES
   ============================================================ */
.kc-eyebrow{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--graphite);
}
.kc-source{
  font-size:12px;
  color:var(--graphite);
  letter-spacing:0.02em;
}
.kc-copy{
  max-width:var(--knowledge-copy);
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
}
.kc-copy p{ margin:0 0 20px; }
.kc-copy p:last-child{ margin-bottom:0; }
.kc-lede{
  max-width:var(--knowledge-lede);
  font-size:clamp(19px, 2.1vw, 24px);
  line-height:1.5;
  color:var(--ink);
}

.kc-big-number{
  font-size:clamp(56px, 9vw, 128px);
  font-weight:625;
  line-height:0.95;
  letter-spacing:-0.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kc-big-number-label{
  font-size:15px;
  color:var(--graphite);
  margin-top:10px;
  max-width:280px;
}

.kc-pull{
  font-size:clamp(26px, 4vw, 46px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  max-width:920px;
}
.kc-pull em{ font-style:italic; font-weight:500; color:var(--graphite); display:block; }
.kc-pull-attrib{
  margin-top:20px;
  font-size:14px;
  color:var(--graphite);
}
.kc-pull-attrib b{ color:var(--ink); font-weight:600; }

/* ============================================================
   HERO MODULES
   ============================================================ */
.kc-hero{
  position:relative;
  padding:96px 0 80px;
}
.kc-hero-statement{
  min-height:78vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 0;
}
.kc-hero h1{
  font-size:clamp(32px, 4.2vw, 64px);
  line-height:1.06;
  font-weight:625;
  letter-spacing:-0.015em;
  margin:0 0 20px;
  max-width:1100px;
}
.kc-hero-cinematic h1{
  font-size:clamp(38px, 6vw, 84px);
  line-height:1.04;
}

/* ============================================================
   EDITORIAL SECTIONS / RHYTHM
   ============================================================ */
.kc-section{ position:relative; padding:88px 0; }
.kc-section--tight{ padding:56px 0; }
.kc-section--loose{ padding:140px 0; }
.kc-section--mist{ background:var(--mist); }
.kc-section--ink{ background:var(--ink); color:var(--paper); }
.kc-section--ink .kc-eyebrow{ color:rgba(255,255,255,0.55); }
.kc-section--ink .kc-copy,
.kc-section--ink .kc-lede,
.kc-section--ink .kc-pull{ color:var(--paper); }
.kc-section--ink .kc-source,
.kc-section--ink .kc-pull-attrib{ color:rgba(255,255,255,0.6); }

.kc-divider{ height:1px; background:var(--hairline); border:0; margin:0; }

/* ============================================================
   PROCESS / ROUTE SEQUENCE
   ============================================================ */
.kc-sequence{
  display:flex;
  flex-direction:column;
  gap:28px;
}
@media (min-width:900px){
  .kc-sequence{ flex-direction:row; gap:0; }
}
.kc-sequence-stage{
  flex:1;
  padding:0 0 0 20px;
  border-left:1px solid var(--hairline);
}
.kc-section--ink .kc-sequence-stage{ border-left-color:rgba(255,255,255,0.22); }
@media (min-width:900px){
  .kc-sequence-stage{ padding:24px 24px 0; border-left:1px solid var(--hairline); }
  .kc-section--ink .kc-sequence-stage{ border-left-color:rgba(255,255,255,0.22); }
}
.kc-sequence-stage h3{
  font-size:17px;
  font-weight:600;
  margin:0 0 6px;
}
.kc-sequence-stage p{
  font-size:14px;
  color:var(--graphite);
  margin:0;
  max-width:260px;
}
.kc-section--ink .kc-sequence-stage p{ color:rgba(255,255,255,0.65); }

/* ============================================================
   STAT / SPLIT MODULES
   ============================================================ */
.kc-stat-pair{
  display:flex;
  flex-wrap:wrap;
  gap:64px;
}
.kc-stat-item{ flex:0 0 auto; }

.kc-split{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:start;
}
@media (min-width:900px){
  .kc-split{ grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
}

/* ============================================================
   FEATURE GRID / COMPARISON (hub use)
   ============================================================ */
.kc-feature-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
@media (min-width:768px){
  .kc-feature-grid{ grid-template-columns:1fr 1fr; gap:40px; }
}
@media (min-width:1200px){
  .kc-feature-grid{ grid-template-columns:repeat(3, 1fr); }
}
.kc-feature-item h3{ font-size:18px; font-weight:600; margin:0 0 8px; }
.kc-feature-item p{ font-size:15px; color:var(--graphite); margin:0; line-height:1.55; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.kc-faq-item{ border-bottom:1px solid var(--hairline); }
.kc-faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font-size:17px;
  font-weight:600;
  color:var(--ink);
}
.kc-faq-q-icon{
  flex:0 0 auto;
  width:20px; height:20px;
  position:relative;
}
.kc-faq-q-icon::before,
.kc-faq-q-icon::after{
  content:'';
  position:absolute;
  background:var(--ink);
  transition:transform .2s var(--ease);
}
.kc-faq-q-icon::before{ top:9px; left:2px; width:16px; height:1.5px; }
.kc-faq-q-icon::after{ top:2px; left:9px; width:1.5px; height:16px; }
.kc-faq-q[aria-expanded="true"] .kc-faq-q-icon::after{ transform:scaleY(0); }
.kc-faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s var(--ease);
}
.kc-faq-a-inner{ padding:0 0 22px; font-size:15px; line-height:1.6; color:var(--graphite); max-width:640px; }

/* ============================================================
   RELATED RESOURCES
   ============================================================ */
.kc-related{ }
.kc-related-list{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--hairline);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
@media (min-width:768px){
  .kc-related-list{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1200px){
  .kc-related-list{ grid-template-columns:repeat(3, 1fr); }
}
.kc-related-link{
  display:block;
  background:var(--paper);
  padding:32px 28px;
  text-decoration:none;
  color:var(--ink);
  transition:background .15s var(--ease);
}
.kc-related-link:hover{ background:var(--mist); }
.kc-related-eyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--graphite);
  margin-bottom:10px;
}
.kc-related-title{ font-size:19px; font-weight:600; margin:0 0 8px; }
.kc-related-desc{ font-size:14px; color:var(--graphite); line-height:1.5; margin:0; }

/* ============================================================
   HUB RESOURCE INDEX
   ============================================================ */
.kc-resource-index{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--hairline);
}
@media (min-width:900px){
  .kc-resource-index{ grid-template-columns:1.4fr 1fr; }
}
.kc-resource-card{
  background:var(--paper);
  padding:44px 36px;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:280px;
  transition:background .15s var(--ease);
}
.kc-resource-card--featured{ min-height:420px; }
.kc-resource-card:hover{ background:var(--mist); }
.kc-resource-card h3{
  font-size:clamp(22px, 2.4vw, 32px);
  font-weight:625;
  margin:0 0 12px;
  letter-spacing:-0.01em;
}
.kc-resource-card p{ font-size:15px; color:var(--graphite); margin:0; max-width:440px; line-height:1.55; }
.kc-resource-arrow{ margin-top:22px; font-size:14px; font-weight:600; }

/* ============================================================
   EDITORIAL CHAPTER COMPONENTS
   For long-form knowledge pages that occasionally reference a
   real product. A chapter may use none, some, or all of these —
   they are not a mandatory per-chapter template. Consistent
   language, varied composition.
   ============================================================ */

/* ---- Journey icon: 54x54 circle, our own line-icon language.
   Optional per chapter — not every chapter gets one. ---- */
.kc-journey-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid var(--hairline);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-bottom:20px;
}
.kc-journey-icon svg{ width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Journey spine: thin vertical accent bar, decorative only.
   Scoped to a single chapter's content height — never spans
   the page, never implies progress or navigation. ---- */
.kc-journey-spine{
  position:relative;
  padding-left:24px;
}
.kc-journey-spine::before{
  content:'';
  position:absolute;
  left:0; top:4px; bottom:4px;
  width:5px;
  background:var(--hairline);
  border-radius:3px;
}

/* ---- Screenshot frame: real product imagery treated as editorial
   photography, not pasted UI. Inset/floatable, never full-width. ---- */
.kc-screenshot-frame{
  max-width:300px;
  margin:0 auto;
}
.kc-screenshot-frame img{
  display:block;
  width:100%;
  border-radius:14px;
  border:1px solid var(--hairline);
}
.kc-screenshot-frame-caption{
  margin-top:12px;
  font-size:13px;
  color:var(--graphite);
  text-align:center;
}
/* Pending state: hidden until a real asset is inserted. Remove
   data-pending="true" (or the attribute entirely) once the real
   screenshot <img> replaces the placeholder markup inside. */
.kc-screenshot-frame[data-pending="true"]{ display:none; }
/* Placeholder state before a real screenshot is supplied */
.kc-screenshot-frame-placeholder{
  aspect-ratio:9/16;
  background:var(--mist);
  border-radius:14px;
  border:1px solid var(--hairline);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.kc-screenshot-frame-placeholder span{
  font-size:13px;
  color:var(--graphite);
  font-style:italic;
  text-align:center;
}
@media (min-width:900px){
  .kc-screenshot-frame--float-left{ float:left; margin:4px 32px 20px 0; }
  .kc-screenshot-frame--float-right{ float:right; margin:4px 0 20px 32px; }
}

/* ---- Methodology note: a small, quiet caption clarifying what a
   metric actually measures. Not a callout box — just type. ---- */
.kc-methodology-note{
  font-size:13px;
  line-height:1.6;
  color:var(--graphite);
  max-width:280px;
  margin:14px auto 0;
  text-align:center;
}

/* ============================================================
   ANALYTICS DASHBOARD COMPONENT LIBRARY
   Reusable editorial-illustration modules for knowledge pages
   that teach through a living interface rather than screenshots.
   The page stays grayscale everywhere EXCEPT inside a "contained
   analytics illustration" — either .kc-dash-shell (framed) or
   .kc-dash-inline (bare ring/grape, no frame). Only those two
   containers may use the authentic My Harvest List product
   palette (--dash-discovery / --dash-engagement / --dash-planning
   / --dash-grape). It must never appear anywhere else on the page.
   Built for Measuring Opportunity; intended for reuse by
   Trip Intelligence and any future analytics-teaching page.
   ============================================================ */
:root{
  --dash-discovery:#B57AC7;
  --dash-engagement:#C08A6E;
  --dash-planning:#8CA37E;
  --dash-grape:#8a1f3c;
  --dash-grape-leaf:#6e8a44;
  --dash-ring-track:#EBEBEB;
}

/* ---- Phone shell: a quiet container, not a device ----
   Width is the only sized dimension; height derives from
   aspect-ratio. This guarantees the 393:852 ratio can never
   distort, on any screen height. ---- */
.kc-dash-shell{
  position:relative;
  width:min(300px, calc(58vh * 393 / 852));
  max-width:100%;
  aspect-ratio:393/852;
  height:auto;
  margin:0 auto;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:28px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.kc-dash-shell-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px 16px;
  border-bottom:1px solid var(--hairline);
  position:relative;
}
.kc-dash-shell-back{
  position:absolute;
  left:16px;
  width:16px; height:16px;
  color:var(--graphite);
}
.kc-dash-shell-title{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  transition:opacity .35s var(--ease);
}
.kc-dash-shell-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 20px;
  position:relative;
}

/* ---- Shell state panels: one persistent shell, four evolving states ---- */
.kc-dash-shell-body[data-shell-body]{ display:block; }
[data-kc-shell-panel]{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
[data-kc-shell-panel].is-active{ opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  [data-kc-shell-panel]{ transition:none; }
}

/* ---- Metric ring: capped ratio, never a false full circle ---- */
.kc-dash-ring{
  position:relative;
  width:clamp(120px, 46vw, 168px);
  height:clamp(120px, 46vw, 168px);
}
.kc-dash-ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.kc-dash-ring circle{ fill:none; }
.kc-dash-ring .kc-dash-ring-track{ stroke:var(--dash-ring-track); stroke-width:8; }
.kc-dash-ring .kc-dash-ring-progress{
  stroke-width:8;
  stroke-linecap:round;
  stroke:var(--ring-color, var(--ink));
  transition:stroke-dashoffset 1.1s var(--ease);
}
.kc-dash-ring-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
}
.kc-dash-ring-label{ font-size:12px; color:var(--graphite); margin-bottom:6px; }
.kc-dash-ring-value{ font-size:clamp(26px,7vw,36px); font-weight:600; color:var(--ink); letter-spacing:-0.02em; }

/* ---- Grape Saves: bespoke fill animation, not a ring ---- */
.kc-dash-grape{ width:56px; height:auto; }
.kc-dash-grape .kc-grape-berry,
.kc-dash-grape .kc-grape-leaf,
.kc-dash-grape .kc-grape-stem{
  fill:rgba(34,34,34,.06);
  stroke:#D9D9D9;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:fill .5s var(--ease), stroke .5s var(--ease);
}
.kc-dash-grape.is-saved .kc-grape-berry{ fill:var(--dash-grape); }
.kc-dash-grape.is-saved .kc-grape-leaf{ fill:var(--dash-grape-leaf); stroke:var(--dash-grape-leaf); }
.kc-dash-grape.is-saved .kc-grape-stem{ stroke:var(--dash-grape-leaf); }

.kc-dash-caption{
  font-size:14px;
  color:var(--graphite);
  text-align:center;
  line-height:1.5;
  max-width:260px;
  margin-top:18px;
}

/* ---- Count-up number (usable inside or outside a shell) ---- */
.kc-countup{ font-variant-numeric:tabular-nums; }

/* ---- Vertical progress rail: scoped to one section, not the page ---- */
.kc-progress-rail{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-left:20px;
}
.kc-progress-rail::before{
  content:'';
  position:absolute;
  left:5px; top:6px; bottom:6px;
  width:1px;
  background:var(--hairline);
}
.kc-progress-rail-fill{
  position:absolute;
  left:5px; top:6px;
  width:1px;
  height:0%;
  background:var(--ink);
  transition:height .5s var(--ease);
}
.kc-progress-stage{
  position:relative;
  padding:14px 0;
  font-size:13px;
  color:var(--graphite);
  transition:color .3s var(--ease);
}
.kc-progress-stage::before{
  content:'';
  position:absolute;
  left:-20px; top:19px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--hairline);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.kc-progress-stage.is-active{ color:var(--ink); font-weight:600; }
.kc-progress-stage.is-active::before{ background:var(--ink); border-color:var(--ink); }

/* ---- Statistic callout: a number/ring is allowed to occupy the screen ---- */
.kc-stat-callout{
  text-align:center;
  padding:64px 0;
}

/* ---- Transition pause: deliberate near-empty breathing room ---- */
.kc-pause{ padding:96px 0; }
.kc-pause--loose{ padding:160px 0; }

@media (max-width:767px){
  .kc-dash-shell{ width:min(230px, 64vw, calc(46vh * 393 / 852)); }
  .kc-pause--loose{ padding:110px 0; }
}
@media (min-width:768px) and (max-width:959px){
  .kc-dash-shell{ width:min(260px, 60vw, calc(50vh * 393 / 852)); }
}

/* ---- Bare inline illustration: ring/grape only, no phone chrome.
   Used for secondary teaching moments where a full shell would
   dominate the composition. This and .kc-dash-shell are both
   CONTAINED ANALYTICS ILLUSTRATIONS: authentic product colors
   (--dash-discovery / --dash-engagement / --dash-planning /
   --dash-grape) are permitted inside either. They must not appear
   anywhere else on the page — only inside .kc-dash-shell or
   .kc-dash-inline. ---- */
.kc-dash-inline{
  max-width:220px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.kc-dash-inline .kc-dash-ring{ width:clamp(96px,42vw,140px); height:clamp(96px,42vw,140px); }
.kc-dash-inline .kc-dash-ring-value{ font-size:clamp(21px,6vw,28px); }
.kc-dash-inline .kc-dash-grape{ width:44px; }
.kc-dash-inline .kc-dash-caption{ margin-top:14px; font-size:13px; }

/* ---- Reveal-on-scroll: progressive enhancement.
   Default (no JS, or .js class absent): content is fully visible.
   Only when html.js is present (set synchronously in <head>
   before paint) does content start hidden pending reveal. ---- */
[data-kc-reveal]{
  opacity:1;
  transform:none;
}
.js [data-kc-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-kc-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-kc-reveal]{ opacity:1; transform:none; transition:none; }
  .kc-dash-ring .kc-dash-ring-progress{ transition:none; }
  .kc-dash-grape .kc-grape-berry,
  .kc-dash-grape .kc-grape-leaf,
  .kc-dash-grape .kc-grape-stem{ transition:none; }
  .kc-progress-rail-fill{ transition:none; }
}

/* ============================================================
   STANDARD FOOTER
   Reproduced exactly from the source learn-more.html footer:
   same headings, column order, link labels/URLs, sizes, weights,
   spacing, gutters, divider placement, and copyright wording.
   Only change from source: link hover color. Source used the
   brand green (--hml-green) on hover; these pages exclude green
   entirely per instruction, so hover uses graphite instead.
   ============================================================ */
.kc-footer{
  background:var(--paper);
  border-top:1px solid var(--hairline);
}
.kc-footer-top{
  padding:48px 14px 32px;
  max-width:1000px;
  margin:0 auto;
}
.kc-footer-brand{
  font-size:16px;
  font-weight:700;
  margin:0 0 24px;
}
.kc-footer-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 16px;
}
@media (min-width:600px){
  .kc-footer-cols{ grid-template-columns:repeat(4,1fr); }
}
.kc-footer-col h3{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--graphite);
  margin:0 0 14px;
}
.kc-footer-col ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.kc-footer-col a{
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
}
.kc-footer-col a:hover{ color:var(--graphite); }
.kc-footer-bottom{
  border-top:1px solid var(--hairline);
  padding:20px 14px;
  max-width:1000px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media (min-width:768px){
  .kc-footer-bottom{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}
.kc-footer-copyright{
  font-size:12px;
  color:var(--graphite);
  margin:0;
}