/* =============================================================================
   deck-partner.css — layout shared by the partner-pitch decks

   Loaded on top of deck-tokens.css by decks/d2c/, decks/b2b2c/ and decks/xdock/.
   Those three are one family: the same room (a product manufacturer or supplier
   that wants to sell internationally), the same twelve-act shape, and five
   co-operation models between them of which each deck argues one.

   Extracted from decks/d2c/index.html on 2026-09-10, when the second and third
   deck were commissioned. Nothing here is new -- it is the D2C block, already
   probe-clean, moved wholesale so that a layout fix lands on all three instead
   of on whichever one someone happened to open. deck-tokens.css was NOT touched
   for the same reason in reverse: the OaaS, Fly Low and AI Playbook decks share
   that file and did not ask for any of this.

   PALETTE. The :root block re-points deck-tokens.css's editorial default (warm
   cream, bright red -- its own header says it is deliberately not corporate) at
   the live site values from www-tpl site/assets/css/tpl.css (~51-71, light).
   These decks are shown to brands who have just been on tpl.gr.

   "MERCHANT OF RECORD" IS REQUIRED IN THREE DECKS AND FORBIDDEN IN A FOURTH,
   AND THE BAN IS THE PART THAT NEEDS DEFENDING.

   Required in d2c and b2b2c: TPL buys the stock outright and is the merchant.
   Required but narrow in xdock: TPL is the merchant and never holds title
   beyond the dock crossing, so "we are the merchant" is true while anything
   implying we bought inventory is false.

   FORBIDDEN in decks/oaas/. Not house style -- under OaaS the partner keeps
   seller-of-record status, so the phrase is not a different flavour of true,
   it is false. Stated as a neutral three-way table this reads as four decks
   with differing preferences, and a presenter reads preference as negotiable.
   It is a contradiction and it should read like one.

   THE BAN GOT HARDER TO OBEY ON 2026-09-09, NOT EASIER. OaaS's Act I was
   reframed that night to open "TPL is an online retailer" (decision 0050),
   which makes the phrase feel more available to whoever presents OaaS -- at the
   same moment three sibling decks on this very stylesheet legitimise it. The
   guardrail has to get louder as the shared files make the phrase more normal.
   If you are editing across decks in one sitting, this is the sentence that
   will slip. (Point raised by a peer session, 2026-09-10.)
   ========================================================================== */

  :root {
    --ink:      #181818;
    --ink-soft: #4A4A4A;
    --paper:    #FBFAF7;
    --paper-2:  #F2F1ED;
    --red:      #AB0000;
    --red-deep: #7A0000;
    --steel:    #114B98;
    --hairline: #DEDCD5;
  }

  .acc { color: var(--red); }
  .slide.dark .acc, .slide.red .acc { color: #fff; }
  .mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

  .lead { max-width: 1400px; }
  .slide.dark .lead, .slide.dark .lead-xl { color: var(--paper); opacity: .92; }
  .slide.red  .lead, .slide.red  .lead-xl { color: #fff; opacity: .95; }
  .frame > .eyebrow { margin-bottom: 18px; }
  .frame > .headline-d3, .frame > .headline-d2 { margin-bottom: 28px; }

  /* ---------- Cover -------------------------------------------------------
     --frame-pad-cover, not --frame-pad: the cover has a channel strip pinned
     to its bottom edge and needs the extra room. .content is a flex column so
     the strip sits on the floor whatever the headline block does above it. */
  .cover .content {
    position: absolute; inset: 0; z-index: 2;
    padding: var(--frame-pad-cover);
    box-sizing: border-box;
    display: flex; flex-direction: column;
  }
  .cover .topbar { display: flex; align-items: center; gap: 22px; }
  .cover .topbar img { height: 44px; width: auto; display: block; }
  .cover .topbar-tag {
    font-weight: 900; font-size: 13px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--red);
    border-left: 2px solid var(--red); padding-left: 22px;
  }
  .cover-main { margin-top: auto; margin-bottom: 64px; }
  .cover .eyebrow { margin-bottom: 20px; }
  .cover-h1 {
    font-weight: 900; font-size: var(--t-d1); line-height: .84;
    letter-spacing: -.045em; margin: 0 0 34px;
  }
  .cover-sub {
    font-weight: 500; font-size: 34px; line-height: 1.32;
    max-width: 1360px; color: var(--ink-soft);
  }
  .cover-sub em { font-style: normal; font-weight: 800; color: var(--ink); }

  /* ---------- Channel strip ------------------------------------------------
     Deliberately the SAME OBJECT as the OaaS cover's strip, marks and order
     included, so a room that has seen both decks reads it as one thing rather
     than two similar things. It is texture, not a list -- nothing in the script
     points at it or counts it.
     Two identical .chset children scroll as one track; the duplicate is
     aria-hidden so a screen reader hears the marks once. */
  .chstrip { margin-top: auto; border-top: 1.5px solid var(--hairline); padding-top: 26px; }
  .chkick {
    margin: 0 0 18px; font-weight: 900; font-size: 12px; letter-spacing: .24em;
    text-transform: uppercase; color: var(--ink-soft); opacity: .72;
  }
  .chmarquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
               mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .chtrack { display: flex; width: max-content; animation: chscroll 42s linear infinite; }
  .chset { display: flex; align-items: center; gap: 76px; padding-right: 76px; }
  .chset img { height: 34px; width: auto; display: block; opacity: .58;
               filter: grayscale(1) contrast(1.1); }
  @keyframes chscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .chtrack { animation: none; } }

  /* ---------- Two-column body --------------------------------------------- */
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
  .cols-64 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 90px; align-items: start; }

  /* ---------- Generic card grid ------------------------------------------- */
  .cardgrid { display: grid; gap: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
  .cardgrid.c3 { grid-template-columns: repeat(3, 1fr); }
  .cardgrid.c4 { grid-template-columns: repeat(4, 1fr); }
  .cardgrid.c5 { grid-template-columns: repeat(5, 1fr); }
  .cardgrid .cd { padding: 34px 30px 30px; border-right: 1px solid rgba(24,24,24,.18);
                  display: flex; flex-direction: column; gap: 14px; }
  .cardgrid .cd:last-child { border-right: 0; }
  .cardgrid .cd .n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 800; font-size: 13px; letter-spacing: .16em; color: var(--red);
  }
  .cardgrid .cd .t { font-weight: 900; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; }
  .cardgrid .cd .b { font-weight: 500; font-size: 19px; line-height: 1.45; color: var(--ink-soft); }
  .slide.dark .cardgrid { border-color: var(--paper); }
  .slide.dark .cardgrid .cd { border-right-color: rgba(251,250,247,.22); }
  .slide.dark .cardgrid .cd .b { color: rgba(251,250,247,.72); }

  /* ---------- Hairline definition list ------------------------------------ */
  .deflist { border-top: 1.5px solid var(--hairline); }
  .deflist .row { display: grid; grid-template-columns: 300px 1fr; gap: 40px;
                  padding: 22px 0; border-bottom: 1.5px solid var(--hairline); }
  .deflist .row .k { font-weight: 900; font-size: 14px; letter-spacing: .16em;
                     text-transform: uppercase; color: var(--red); padding-top: 5px; }
  .deflist .row .v { font-weight: 500; font-size: 23px; line-height: 1.4; }
  .slide.dark .deflist, .slide.dark .deflist .row { border-color: rgba(251,250,247,.2); }

  /* ---------- Slide 04 / 07 host ------------------------------------------
     Both authored modules draw into an <svg> sized to the full 1920x1080 stage
     and carry their own headline, counter and legend -- so their sections have
     no .frame and no eyebrow, the same arrangement OaaS slides 03/04 use. The
     section keeps .chrome and .wordmark; neither module draws those. */
  svg[data-capitalflow], svg[data-modelmatrix] {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  }

  /* ---------- Slide 08 · proof cards -------------------------------------- */
  .proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 10px; }
  .pcard { background: var(--paper-2); padding: 44px 40px 38px;
           display: flex; flex-direction: column; gap: 18px; min-height: 470px;
           border-top: 3px solid var(--red); }
  .pcard .badge {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 800; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--red);
  }
  .pcard h3 { margin: 0; font-weight: 900; font-size: 40px; line-height: .98; letter-spacing: -.028em; }
  .pcard .who { font-weight: 700; font-size: 17px; letter-spacing: .04em; color: var(--ink-soft); }
  .pcard .body { font-weight: 500; font-size: 20px; line-height: 1.45; color: var(--ink-soft); }
  .pcard .facts { margin-top: auto; border-top: 1.5px solid var(--hairline); padding-top: 18px;
                  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .pcard .facts div { font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--ink-soft); }
  .pcard .facts b { display: block; font-weight: 900; font-size: 22px; color: var(--ink); letter-spacing: -.01em; }

  /* ---------- Slide 09 · the bar ------------------------------------------ */
  .bar-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
             border-top: 2px solid var(--paper); border-bottom: 2px solid var(--paper); }
  .bar-two > div { padding: 40px 44px; }
  .bar-two > div:first-child { border-right: 1.5px solid rgba(251,250,247,.24); }
  .bar-two h3 { margin: 0 0 22px; font-weight: 900; font-size: 34px; letter-spacing: -.02em; }
  .bar-two ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
  .bar-two li { font-weight: 500; font-size: 22px; line-height: 1.35; padding-left: 34px; position: relative;
                color: rgba(251,250,247,.82); }
  .bar-two li::before { content: ""; position: absolute; left: 0; top: 12px;
                        width: 18px; height: 2px; background: var(--red); }
  .bar-two .no li::before { background: rgba(251,250,247,.35); }

  /* ---------- Slide 12 · close -------------------------------------------- */
  .thank .frame { justify-content: space-between; }
  .thank .lead-xl { max-width: 1320px; }
  .meta { display: flex; gap: 70px; align-items: flex-end;
          border-top: 1.5px solid rgba(251,250,247,.3); padding-top: 26px; }
  .meta div { font-weight: 500; font-size: 19px; line-height: 1.4; color: rgba(251,250,247,.78); }
  .meta div b { display: block; font-weight: 900; font-size: 15px; letter-spacing: .18em;
                text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
  .slide.dark .meta div b { color: #fff; opacity: .6; }

  /* ---------- Density overrides -------------------------------------------
     Found by deck-probe, not by eye. A 1920x1080 frame minus --frame-pad
     (140 top / 100 sides / 120 bottom) leaves 820px of content height, and
     --t-d3 at 120px over two lines spends 216 of it before a word of body copy.
     Five of the twelve slides overflowed on the first probe run: 343px, 276px,
     178px, 169px and 166px. These rules are the fix, and they are expressed as
     a `.dense` class rather than by editing the tokens, because the other decks
     in this repo share deck-tokens.css and none of them asked for this.
     THE NUMBERS BELOW WERE MEASURED BY THE PROBE. Do not tune them by looking
     at a screenshot -- getComputedStyle is authored px and getBoundingClientRect
     is scaled px, and a deck-stage that transform:scale()s the stage makes the
     second one a lie about the first (CLAUDE.md rule 1). Re-run the probe. */
  .dense .headline-d3 { font-size: 88px; }
  .dense > .headline-d3 { margin-bottom: 20px; }
  .dense .lead { font-size: 23px; max-width: 1560px; }
  .dense .deflist .row { padding: 15px 0; }
  .dense .deflist .row .v { font-size: 21px; }
  .dense .headline-d5 { font-size: 46px; }
  .dense .cardgrid .cd { padding: 26px 24px 24px; gap: 11px; }
  .dense .cardgrid .cd .t { font-size: 26px; }
  .dense .cardgrid .cd .b { font-size: 17.5px; line-height: 1.4; }
  .dense .fnote { margin-top: 12px; font-size: 14px; }
  .dense .stat-grid .cell { min-height: 118px; padding: 20px 24px 18px; }
  .dense .stat-grid .v { font-size: 44px; }
  .dense .pillar { min-height: 340px; padding: 38px 36px; }
  .dense .pillar .big { font-size: 60px; }
  .dense .pillar .num-xl { font-size: 260px; bottom: -50px; }
  .dense .proof { gap: 26px; }
  .dense .pcard { min-height: 0; padding: 32px 30px 28px; gap: 13px; }
  .dense .pcard h3 { font-size: 36px; }
  .dense .pcard .body { font-size: 18px; line-height: 1.4; }
  .dense .cols, .dense .cols-64 { gap: 70px; }

  /* Second tightening pass, 2026-09-10, after the B2B2C and cross-docking decks
     overflowed by 30-89px on slides the D2C deck passes. The copy is longer in
     those two -- cross-docking's pillar runs four lines and its Why Us cards
     carry an ERP argument D2C does not make -- so the fix is here rather than
     per-deck, because a shared class that only fits one of its three decks is
     not shared, it is D2C's class with two guests. Reductions only: D2C was
     re-probed after and still passes. Numbers came from deck-probe, not from
     looking at a screenshot (CLAUDE.md rule 1). */
  .dense .headline-d3 { font-size: 82px; }
  .dense .lead { font-size: 22px; }
  .dense .headline-d5 { font-size: 42px; margin-bottom: 18px !important; }
  .dense .cardgrid .cd { padding: 22px 20px 20px; gap: 9px; }
  .dense .cardgrid .cd .t { font-size: 24px; }
  .dense .cardgrid .cd .b { font-size: 16.5px; line-height: 1.38; }
  .dense .deflist .row { padding: 12px 0; }
  .dense .deflist .row .v { font-size: 19.5px; }
  .dense .deflist .row .k { font-size: 13px; }
  .dense .stat-grid .cell { min-height: 104px; padding: 16px 22px 14px; }
  .dense .stat-grid .v { font-size: 40px; }
  .dense .pillar { min-height: 300px; padding: 32px 30px; }
  .dense .pillar .big { font-size: 52px; }
  .dense .fnote { margin-top: 10px; }

  /* ---------- Footnote ----------------------------------------------------
     Small print under a claim. Never decorative: every use of it on this deck
     is a disclosure the room is entitled to (illustrative figures, what a
     source actually says). */
  .fnote { font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--ink-soft);
           opacity: .72; margin: 14px 0 0; max-width: 1200px; }
  .slide.dark .fnote { color: rgba(251,250,247,.6); }