/* ==========================================================================
   Blackmarker — the system
   --------------------------------------------------------------------------
   Loaded last. This file is the single place that says how the page is
   built: every text role points at one type step, every section uses the
   same rhythm, and colour, shadow, radius and motion each have a short list
   of named values. Make new sections from these and nothing else.

   Three breakpoints, used for every rule on the page:
     phone    up to 600px
     tablet   601px to 1024px
     desktop  1025px and up
   Values below read desktop / tablet / phone. The live reference is
   system.html.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------
     Four serif display steps (Newsreader), two sans steps (Hanken Grotesk),
     one label step (Geist Mono capitals). Each step is roughly 1.4 to 1.6
     times the one below it, so every level reads as clearly different.  */
  --type-display-1: 96px;  /* 96 / 64 / 44   Hero title                              */
  --type-display-2: 64px;  /* 64 / 48 / 34   Section titles                          */
  --type-display-3: 40px;  /* 40 / 32 / 26   Feature-row titles, stat figures        */
  --type-display-4: 28px;  /* 28 / 24 / 21   Card and item titles, statements        */
  --type-subhead:   20px;  /* 20 / 18 / 18   Sans light: hero intro, FAQ questions, the demo document */
  --type-body:      16px;  /* 16 everywhere  Paragraphs, captions, labels, buttons, quotes */
  --type-label:     12px;  /* 12 everywhere  Mono badges                             */
  --type-eyebrow:   14px;  /* 14 / 14 / 12   Mono eyebrows above a title             */
  --type-button:    13px;  /* 13 everywhere  Sans capitals inside every button      */
  --track-button:   .08em;
  --weight-subhead: 300;

  --leading-body: 1.55;
  --leading-subhead: 1.45;

  /* ---- Colour -----------------------------------------------------------
     Ink on paper, one brand accent, and a fixed set of text colours for
     dark panels instead of one-off white opacities.                      */
  --on-dark:        var(--paper);   /* Titles and primary text on ink        */
  --on-dark-muted:  #C5CFCB;        /* Body text, captions, links on ink      */
  --on-dark-faint:  #8E9A96;        /* Legal line and address on ink          */
  --cta-hover:      #435A53;        /* Ink lifted on hover. Paper text: 6.9:1 */
  --eyebrow-ink:    color-mix(in srgb, var(--ink-3) 90%, #000);     /* Eyebrows: muted ink, 10% darker */
  --eyebrow-mint:   color-mix(in srgb, var(--mint-deep) 90%, #000); /* Mint eyebrows, 10% darker       */

  /* ---- Transparency -----------------------------------------------------
     Only these. Hairlines divide, the wash recesses a panel.             */
  /* --hairline   rgba(0,0,0,.06)   quiet divider, card edge
     --hairline-2 rgba(0,0,0,.12)   strong divider, button outline
     --wash       rgba(0,0,0,.03)   recessed panel behind a graphic        */

  /* The busywork statements open straight onto the first redaction, with no
   rule above it; beside the title on desktop they start level with it. */
.transform-statement:first-child { border-top: 0; padding-top: 0; }
.kase-transform .transform-statements { margin-top: var(--s-8); }
@media (min-width: 1025px) { .kase-transform .transform-statements { margin-top: var(--s-10); } }

/* ---- Section rhythm --------------------------------------------------- */
  --space-section:    96px;  /* 96 / 72 / 40  Above and below every section */
  --space-section-sm: 64px;  /* 64 / 48 / 32  Short bands (the stat row)    */
  --space-stack:      24px;  /* Gap between a block of copy and its graphic  */
}

@media (max-width: 1024px) {
  :root {
    --type-display-1: 64px;
    --type-display-2: 48px;
    --type-display-3: 32px;
    --type-display-4: 24px;
    --type-subhead:   18px;
    --space-section:    72px;
    --space-section-sm: 48px;
  }
}
@media (max-width: 600px) {
  :root {
    --type-display-1: 44px;
    --type-display-2: 34px;
    --type-display-3: 26px;
    --type-display-4: 21px;
    --type-subhead:   18px;
    --type-eyebrow:   12px;
    --space-section:    40px;
    --space-section-sm: 32px;
  }
}

/* The older token names now point at the system, so every component that
   already uses them follows it. */
:root {
  --display-xl: var(--type-display-1);
  --display-l:  var(--type-display-2);
  --display-m:  var(--type-display-3);
  --display-s:  var(--type-display-4);
  --display-xs: var(--type-display-4);
  --text-lead:  var(--type-subhead);
  --text-base:  var(--type-body);
  --text-sm:    var(--type-body);
  --text-xs:    var(--type-label);
}

/* ---- Type roles ---------------------------------------------------------- */

/* Eyebrow: mono capitals above a title, a tenth darker than muted ink. */
.caps { font-size: var(--type-eyebrow); color: var(--eyebrow-ink); }
.kase-intro > .caps { color: var(--eyebrow-mint); }

/* Display 2 for the busywork title at every width, like every section title.
   Display 3 is Smart, Safe, Strong and the stats. */
.kase-intro h2 { font-size: var(--type-display-2); }
h3.display-m { font-size: var(--type-display-3); line-height: 1.12; }

/* Display 4: statements and the hero proof points read as item titles. */
.transform-statement { font-size: var(--type-display-4); }
.proof-3 .display-s { font-size: var(--type-display-4); }

/* Subhead: the one larger sans size, in the light weight. */
.hero-lead,
.faq-item > summary,
.doc-panel {
  font-family: var(--font-sans);
  font-size: var(--type-subhead);
  font-weight: var(--weight-subhead);
  line-height: var(--leading-subhead);
  letter-spacing: 0;
}
.doc-panel { letter-spacing: -.01em; }

/* Body: every paragraph, caption, label and button. Quotes stay in the serif
   italic, at body size. */
.lead:not(.hero-lead),
.body,
.small,
.faq-answer,
.lead:not(.hero-lead), .body, .small, .faq-answer { line-height: var(--leading-body); }
.testimonial-paper blockquote { font-size: var(--type-body); line-height: 1.5; }

/* ---- Buttons --------------------------------------------------------------
   One button voice: ink fill (or an ink outline), and a short label in sans
   capitals at the Button step. Applies to every button on the page. */
.btn, .btn-lg, .testimonial-pause {
  font-family: var(--font-sans);
  font-size: var(--type-button);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  line-height: 1.25;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--cta-hover); color: var(--paper); }

/* ---- Colour on dark panels ---------------------------------------------- */
.footer-reveal a { color: var(--on-dark-muted); }
.footer-reveal a:hover { color: var(--on-dark); }
.hero-proof-wrap .doc-tab-sub,
.hero-proof-wrap .proof-note,
.testimonials .caps { color: var(--on-dark-muted); }

/* ---- Section rhythm ------------------------------------------------------ */
.section, .kase-story { padding-block: var(--space-section); }
.section-sm { padding-block: var(--space-section-sm); }
.hero-proof-wrap { padding-bottom: var(--space-section); }
@media (max-width: 1024px) {
  .features { padding-block: var(--space-section); }
  .pillar-row { padding-block: var(--space-section-sm); }
  .pillar-row:first-of-type { padding-top: 0; }
  .pillar-row:last-of-type { padding-bottom: 0; }
}
@media (max-width: 600px) {
  .proof-3 { padding-top: var(--space-section); }
  .hero { padding-bottom: var(--space-section); }
  .transform-statement { padding-block: var(--s-6); }
  .features .grid { margin-top: var(--s-10) !important; row-gap: var(--s-10) !important; }
  .grid-trio { margin-top: var(--s-10) !important; }
  .faq { margin-top: var(--s-8) !important; }
  .testimonial-window { margin-top: var(--s-8); }
}

/* ---- Shape, shadow, motion ---------------------------------------------- */
.testimonial-pause { border-radius: var(--radius-pill); }
.doc-tab-fill { border-radius: var(--radius-pill); }

/* ---- Components that change shape below desktop --------------------------- */

/* Document tabs on a phone: one horizontal row of four, labels only, each
   with its own progress bar. The document above already names its type. */
@media (max-width: 600px) {
  .doc-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); padding-inline: 0; }
  .doc-tab-sub { display: none; }
}

/* The closing panel reads left to right like the copy under it. */
@media (max-width: 1024px) {
  #demo .cta-panel > h2 { text-align: left; }
}

/* Testimonials: each card ends where its words end, so a short quote never
   leaves a hole above the name. Rows of uneven cards read as staggered. */
.testimonial-group { align-items: flex-start; }
.testimonial-paper footer { margin-top: 0; padding-top: var(--s-5); }

/* Testimonials on tablet and phone: two independent rows, built by
   refinement.js, drifting in opposite directions and out of step. The
   single desktop track stays in the page for screen readers. */
.testimonial-rows { display: none; }
@media (max-width: 1024px) {
  .testimonial-window > .testimonial-track {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; animation: none;
  }
  .testimonial-window { position: relative; }
  .testimonial-rows { display: grid; gap: var(--s-4); }
  .testimonial-row { display: flex; width: max-content; animation: testimonial-drift 140s linear infinite; }
  .testimonial-row:nth-child(2) { animation-direction: reverse; animation-delay: -47s; }
  .testimonial-row .testimonial-group { display: flex; gap: var(--s-4); padding-right: var(--s-4); align-items: flex-start; }
  .testimonial-row:nth-child(2) { margin-left: -170px; }
  .testimonial-row .testimonial-paper { width: 340px; padding: var(--s-8); }
  .testimonial-row .testimonial-paper footer { padding-top: var(--s-5); }
  .testimonial-window:hover .testimonial-row,
  .testimonial-window:focus-within .testimonial-row,
  .testimonials.is-paused .testimonial-row { animation-play-state: paused; }
}
@media (max-width: 600px) {
  .testimonial-row .testimonial-paper { width: 280px; }
  .testimonial-row:nth-child(2) { margin-left: -140px; }
}
html[data-static] .testimonial-row { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .testimonial-row { animation: none; }
  .testimonial-rows { overflow-x: auto; }
}