/* ══════════════════════════════════════════════════════════════════════
   THE DECK, AND THE KO SUITE — sections 2 and 3 of thatwednesday-website,
   in the order they run there: the dealt hand of three cards and the name
   story, then the Ko Suite hero.

   The rules below are that site's own, copied from its <style> block
   rather than retyped. They are written against its token names, so the
   bridge underneath maps each one onto this page's palette; nothing here
   renames a rule. --clay is the only name the two sheets share, and it
   holds the same value in both, so it is left alone.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --forest: var(--ink);          /* #10403B */
  --sand:   #F7F5ED;
  --amber:  var(--midday);       /* #E8B93C */
  --leaf:   var(--signal);       /* #C8F08F */
  --sage:   var(--air);          /* #8FBCC6 */
  --slate:  #6B6F6B;
  --stone:  #D9D7CE;

  --t-72: rgba(16,64,59,.72);
  --t-55: rgba(16,64,59,.55);
  --t-52: rgba(16,64,59,.52);
  --t-14: rgba(16,64,59,.14);

  --e-emph:   cubic-bezier(.2,0,0,1);
  --e-decel:  cubic-bezier(.05,.7,.1,1);
  --e-spring: cubic-bezier(.34,1.4,.64,1);
  --d-1: 180ms;
  --d-2: 340ms;
  --d-3: 520ms;
  --r-pill: 999px;
}

  }


  /* ── About: a dealt hand of calling cards ─────────────────────────
     The three cards fly in one at a time, alternating from the left
     and the right, and land slightly off-square on top of each other
     the way real cards fall. Click the pile to bring the next one up. */
  #story { padding: 84px 0 96px; }

  /* The section holds still while the hand is dealt: the pin sits for
     --pin-run of scrolling, and each card is given roughly half a
     screen of that to be read before the next one lands on top of it. */
  .deck-track {
    position: relative;
    /* The undealt cards wait off to the left and right at ±116%, and with
       nothing clipping them they stretched the document's scroll width —
       a horizontal scrollbar on the whole page until the last one landed.
       (The source has the same hole; it just never had a page this wide
       around it.) overflow-x: clip rather than hidden, because hidden on
       one axis forces the other to scroll, and the pin needs its vertical
       overflow left alone. */
    overflow-x: clip;
  }
  .js .deck-track { height: var(--pin-run, 250vh); }
  .deck-pin {
    position: sticky; top: 0; height: 100dvh;
    box-sizing: border-box;
    padding: calc(var(--navh, 79px) + 10px) 0 86px;
    display: flex; flex-direction: column;
    align-items: stretch; justify-content: center; gap: 20px;
  }

  .deck-stage {
    --cw: clamp(300px, 88vw, 620px);
    --ch: calc(var(--cw) / 1.75);
    --spread: 1;                          /* how far the pile fans out */
    position: relative;
    height: calc(var(--ch) + 132px);
    margin: 0; flex: 0 0 auto;
    perspective: 1400px;
  }
  .deck {
    position: absolute; inset: 0;
    display: grid; place-items: start center;
    transform-style: preserve-3d;
  }

  .card {
    --lx: 0px; --ly: 0px; --lr: 0deg;     /* where this card landed */
    --dx: 0px; --dy: 0px; --sc: 1;        /* hover / press offsets */
    position: absolute; top: 40px;
    width: var(--cw); height: var(--ch);
    overflow: hidden;
    display: flex; flex-direction: column;
    padding: clamp(22px, 3.4vw, 34px) clamp(24px, 3.6vw, 36px);
    border-radius: 14px;
    background: #FFFFFF; border: 1px solid var(--t-14);
    box-shadow: 0 1px 2px rgba(15,61,50,0.05), 0 10px 30px rgba(15,61,50,0.07);
    user-select: none; cursor: pointer;
    /* Sideways is ours, up and down stays the page's. Without this the
       browser claims the whole gesture and a swipe just scrolls. */
    touch-action: pan-y;
    transform: translate3d(calc(var(--lx) + var(--dx)), calc(var(--ly) + var(--dy)), 0)
               rotate(var(--lr)) scale(var(--sc));
  }
  .card:nth-child(1) { --lx: -48px; --ly: -14px; --lr: -6.6deg; z-index: 1; }
  .card:nth-child(2) { --lx:  26px; --ly:  20px; --lr:  4.3deg; z-index: 2; }
  .card:nth-child(3) { --lx: -10px; --ly:  52px; --lr: -1.5deg; z-index: 3; }
  .card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
  .card img { pointer-events: none; }
  .card h2 {
    font-weight: 500; font-size: clamp(23px, 3.1vw, 33px); line-height: 1.14;
    letter-spacing: -0.035em; color: var(--forest); margin: 0 0 14px;
    text-wrap: balance;
  }
  .card p {
    font-size: clamp(14.5px, 1.55vw, 17px); font-weight: 400; line-height: 1.58;
    color: var(--t-72); margin: 0; text-wrap: pretty;
  }

  /* 1 · the statement, reversed — mark top-left, headline big,
     the three steps numbered along the foot like a rule */
  .card-dark { background: var(--forest); border-color: transparent; }
  .card-mark { align-self: flex-start; height: 30px; width: auto; margin: 0 0 auto; }
  .card-dark h2 { color: var(--sand); max-width: 12ch; margin: 18px 0 18px; }
  .steps {
    list-style: none; margin: 0; padding: 14px 0 0; display: flex; gap: 0;
    border-top: 1px solid rgba(244,166,42,0.55);
  }
  .steps li {
    flex: 1 1 0; min-width: 0;
    font-size: clamp(12px, 1.25vw, 14px); font-weight: 400; line-height: 1.3;
    color: rgba(247,245,237,0.74); padding-right: 12px;
  }
  .steps li span {
    display: block; font-size: 11px; letter-spacing: 0.14em;
    color: var(--leaf); margin-bottom: 5px;
  }

  /* 2 · letterhead */
  .card-paper { background: var(--sand); }
  .card-lockup { align-self: flex-start; height: clamp(22px, 2.6vw, 28px); width: auto; }
  .card-paper p {
    margin-top: 20px; padding-top: 20px; max-width: 44ch;
    border-top: 1px solid rgba(244,166,42,0.55);
  }

  /* 3 · Koko stamped in the corner, twi signed at the foot */
  .card-koko { position: absolute; top: clamp(18px, 2.6vw, 26px); right: clamp(20px, 2.8vw, 28px);
    width: clamp(44px, 5.6vw, 62px); height: clamp(44px, 5.6vw, 62px); }
  .card-plain h2 { margin-top: auto; padding-right: 20%; }
  .card-foot { position: absolute; right: clamp(22px, 3vw, 30px); bottom: clamp(18px, 2.4vw, 24px);
    height: 17px; width: auto; opacity: 0.32; }
  .card-plain p { padding-right: 22%; }

  .deck-hint {
    font-size: 13px; letter-spacing: 0.01em; color: var(--t-52);
    margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    flex: 0 0 auto;
  }
  .js .deck-say { opacity: 0; transition: opacity 420ms var(--e-decel); }
  .js .deck-pin.dealt .deck-say { opacity: 1; }
  .deck-hint b { font-weight: 400; color: var(--t-72); }
  /* The line names the gesture the device actually has. A phone is told to
     swipe, a laptop to drag — telling someone to "click or swipe" makes them
     work out which half is theirs. */
  .on-touch { display: none; }
  @media (hover: none) {
    .on-pointer { display: none; }
    .on-touch { display: inline; }
  }

  /* the flight in: off-stage, tipped over, landing with a small overshoot */
  .js .card {
    opacity: 0;
    transform: translate3d(var(--fx), var(--fy, -46px), 0) rotate(var(--fr)) scale(0.94);
    transition: opacity 420ms var(--e-decel),
                transform 820ms cubic-bezier(.17,.84,.24,1.04),
                box-shadow 320ms var(--e-decel);
  }
  .js .card.landed { opacity: 1; }
  .js .card.landed {
    transform: translate3d(calc(var(--lx) + var(--dx)), calc(var(--ly) + var(--dy)), 0)
               rotate(var(--lr)) scale(var(--sc));
  }
  /* the top card leans out a little when you point at it */
  .js .card.landed:hover {
    --dy: -12px; --sc: 1.012;
    box-shadow: 0 2px 4px rgba(15,61,50,0.06), 0 22px 48px rgba(15,61,50,0.13);
  }
  .js .card.landed:active { --dy: -5px; --sc: 0.996; transition-duration: 160ms; }

  @media (prefers-reduced-motion: reduce) {
    .js .deck-track { height: auto; }
    .deck-pin { position: static; height: auto; padding: 26px 0 10px; }
    .js .deck-say { opacity: 1; }
    .js .card { opacity: 1; transition: opacity 200ms linear;
      transform: translate3d(var(--lx), var(--ly), 0) rotate(var(--lr)); }
    .js .card.landed:hover { --dy: 0px; --sc: 1; }
  }

  /* a short window can't hold a full-size card and the hint at once */
  @media (max-height: 720px) {
    .deck-stage { --cw: clamp(280px, 70vw, 470px); }
  }

  @media (max-width: 700px) {
    .deck-track { --pin-run: 230vh; }
    .deck-stage { --ch: calc(var(--cw) / 1.3); --spread: 0.22; height: calc(var(--ch) + 88px); }
    .card { top: 26px; }
    .card-dark h2 { max-width: none; }
    .steps { flex-direction: column; gap: 8px; }
    .steps li { padding-right: 0; }
    .steps li span { display: inline; margin: 0 8px 0 0; }
    .card-plain h2, .card-plain p { padding-right: 0; }
    .card-plain h2 { padding-right: 30%; }
  }

  /* the five products, lifted out of the prototype injection */
  .ko-note {
    font-size: 14.5px; font-weight: 400; line-height: 1.5;
    color: var(--t-72); margin: 0 0 14px; max-width: 470px;
  }
  .ko-note em { font-style: italic; color: var(--forest); }
  .ko-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
  /* Material state layer: the pill floods with its own product colour
     from the dot outwards, the dot swells and rounds, and the whole
     chip lifts one step of elevation. --pk is set per pill in the
     markup; --e-emph is Material's emphasised curve. */
  .ko-pill {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 500; color: var(--forest);
    background: #FFFFFF; border: 1px solid var(--t-14);
    border-radius: var(--r-pill); padding: 5px 11px 5px 9px;
    box-shadow: 0 0 0 rgba(15,61,50,0);
    transition: border-color var(--d-2, 340ms) var(--e-emph, cubic-bezier(.2,0,0,1)),
                box-shadow  var(--d-2, 340ms) var(--e-emph, cubic-bezier(.2,0,0,1)),
                transform   var(--d-1, 180ms) var(--e-emph, cubic-bezier(.2,0,0,1));
  }
  .ko-pill::before {
    content: ""; position: absolute; z-index: -1;
    left: 14px; top: 50%; width: 200%; aspect-ratio: 1;
    translate: -50% -50%; border-radius: 50%;
    background: var(--pk, var(--leaf)); opacity: 0;
    scale: 0;
    transition: scale var(--d-3, 560ms) var(--e-emph, cubic-bezier(.2,0,0,1)),
                opacity var(--d-2, 340ms) var(--e-emph, cubic-bezier(.2,0,0,1));
  }
  .ko-pill:hover::before, .ko-pill:focus-visible::before { scale: 1; opacity: 0.16; }
  .ko-pill:hover, .ko-pill:focus-visible {
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(15,61,50,0.10), 0 3px 8px rgba(15,61,50,0.10);
  }
  .ko-pill:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  .ko-pill:active { transform: scale(0.97); }
  .ko-pill i {
    width: 10px; height: 10px; border-radius: 3px; flex: none;
    background: var(--pk, var(--leaf));
    transition: border-radius var(--d-3, 560ms) var(--e-spring, cubic-bezier(.34,1.56,.64,1)),
                transform var(--d-3, 560ms) var(--e-spring, cubic-bezier(.34,1.56,.64,1));
  }
  .ko-pill:hover i, .ko-pill:focus-visible i {
    border-radius: 50% 3px 50% 3px; transform: rotate(-12deg) scale(1.18);
  }
  .ko-pill em {
    font-style: normal; font-weight: 400; color: var(--t-55);
    transition: color var(--d-2, 340ms) var(--e-emph, cubic-bezier(.2,0,0,1));
  }
  .ko-pill:hover em, .ko-pill:focus-visible em { color: var(--t-72); }

  @media (prefers-reduced-motion: reduce) {
    .ko-pill, .ko-pill::before, .ko-pill i, .ko-pill em { transition-duration: 1ms; }
    .ko-pill:hover i, .ko-pill:focus-visible i { transform: none; border-radius: 3px; }
  }

  /* the copy column is fuller than the original hero's, so the flexible
     spacer gives up its floor rather than the content giving up room */
  #ko-suite .hero-copy .spacer { min-height: 0; }

  /* 3 · the Ko Suite reuses the hero card wholesale; the headline is an
         h2 now that the brand owns the h1, so restate its display size */
  #ko-suite .hero-card h2 {
    font-weight: 500; font-size: 50px; line-height: 1.06; letter-spacing: -0.045em;
    margin: 0 0 20px; color: var(--forest); text-wrap: balance;
  }
  #ko-suite .hero-card h2 .hl {
    background: var(--forest); color: var(--leaf); border-radius: 10px;
    padding: 0 12px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }

  @media (max-width: 900px) {
    #ko-suite .hero-card h2 { font-size: 34px; }