/* ==========================================================================
   EditGuys — v5
   The home page's styles. The brand's tokens and components come from
   assets/brand/bundle.css (loaded first); this file lays the sections out.
   v4's rules for sections v5 replaced were pruned on 2026-10-19; what is left
   of v4 serves the ticker and order.html.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --paper:      #F6F0E2;
  --paper-2:    #EFE5CF;
  --paper-3:    #E6D9BE;
  --ink:        #14110D;
  --ink-soft:   #4A4238;
  --red:        #D6402F;
  --gold:       #F2B33D;
  --green:      #1E4034;
  --green-mid:  #2C5C4A;
  --green-light:#D3E5C8;
  --white:      #FFFBF2;
  /* the brand bundle has a colour for six formats; these two are new
     (Pedro, 26 Oct: vlogs and aftermovies). They show while a still loads,
     or alone where there's none yet. */
  --format-vlog:       #3F8F86;
  --format-aftermovie: #B8557A;

  --border-w:     4px;
  --radius:     18px;
  --shadow:     6px 6px 0 var(--ink);
  --shadow-sm:  4px 4px 0 var(--ink);
  --shadow-lg:  10px 10px 0 var(--ink);

  --font-poster: "Archivo Black", "Archivo", Helvetica, Arial, sans-serif;
  --font-body:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* the retro script of the wordmark. Lobster Two is a stand-in: when the
     licensed face arrives, change this line and the <link> in the pages. */
  --font-script: "Lobster Two", "Brush Script MT", cursive;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1312px;  /* v5: the width the section drafts were drawn at */
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(var(--paper-3) 1.6px, transparent 1.7px);  /* the brand halftone, same as .eg-band */
  background-size: 22px 22px;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.02; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* --- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(84px, 12vw, 156px); position: relative; }
/* a band of colour, to break the run of cream between sections */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(246, 240, 226, .55);
}
.mono-label--ink { color: var(--ink-soft); }

h2.head, .head {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.05;
  max-width: 20ch;
}

/* the half of a headline that carries the punch */
.head .pop { color: var(--red); }

/* poster-scale: for a section title that has to carry the screen on its own */

.lede { font-size: clamp(17px, 1.5vw, 19px); max-width: 58ch; color: var(--ink-soft); line-height: 1.65; }
/* copy waiting on Tim: loud enough that it can't ship by accident */

.dark .lede { color: rgba(246, 240, 226, .78); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--red);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--border-w) solid var(--ink);
  border-radius: 999px;
  font-weight: 800; font-size: 16px; letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn--gold  { --btn-bg: var(--gold); --btn-fg: var(--ink); }
.btn--sm { padding: 10px 20px; font-size: 15px; }
.btn .arrow { font-size: 18px; line-height: 1; transform: translateY(-1px); }

/* --- 0 · The loading screen (Pedro, 22 Oct) -------------------------------
   The nav's lockup at twice the size, on the paper, for about a second as
   the page opens. On its own it fades at 0.9s; on a wide screen main.js
   holds it until the hero's pictures are in and fades it into the hero.
   Not with reduced motion. */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background-color: var(--paper);
  background-image: radial-gradient(var(--paper-3) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  animation: splash-out .3s .9s forwards;
}
.splash__lockup { transform: scale(2); }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none; } }

/* --- Nav ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 240, 226, .92);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--ink);
}
.nav__inner { display: flex; align-items: center; gap: 24px; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__faces { display: flex; }
.brand__faces img {
  flex: none;
  width: 40px; height: 40px;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--gold); overflow: hidden;
}
.brand__faces img + img { margin-left: -14px; background: var(--red); }
/* the script wordmark: media/logo-editguys-{tinta,papel}.png, tilted 7° */
.brand__mark { display: block; height: 38px; width: auto; }
.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a { text-decoration: none; font-weight: 600; font-size: 15px; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav__links a:hover { border-bottom-color: var(--red); }
@media (max-width: 900px) { .nav__links { display: none; } }
/* v5: the lockup (.eg-lockup) and the button (.eg-btn) come from assets/brand */
.nav__brand { margin-right: auto; }
.nav__cta { padding: 10px 20px; font-size: 15px; }
@media (max-width: 560px) { .nav__cta { padding: 9px 16px; font-size: 14px; } }

/* --- Hero (v5, option 2A) ---------------------------------------------
   Tim's headline and body on the left. On the right, a do/don't: the queue
   you have today against the same twelve videos, published. The tab icons
   say which side is which at a glance. Not printed: no .eg-card, so the
   stills inside stay clean. */
.hero { padding-top: clamp(56px, 7vw, 92px); padding-bottom: clamp(56px, 7vw, 88px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 48px);
  align-items: center;
}
.hero h1 {
  font-family: var(--font-poster); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: .98; letter-spacing: -.02em;
  text-wrap: balance;
}
/* the turn: the same poster face, the colour carries it (the script is kept
   for "One shop." and "More Guys.") */
.hero__turn { display: block; margin-top: .14em; }
.hero__body {
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55;
  color: var(--ink-soft); max-width: 34em; margin-top: 28px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* The picture (option 2C): a pile of raw files, an arrow, the same files cut
   and stacked. Drawn at a fixed 612×560 on wide screens; on a phone it turns
   into a column (pile, arrow down, tower). */
.hero__stage { position: relative; height: 560px; margin-right: -40px; }

.hero-pile { position: absolute; left: -8px; bottom: 70px; width: 260px; height: 330px; }
.hero-raw {
  position: absolute; transform: rotate(var(--r, 0deg)); width: 150px; padding: 9px;
  background: var(--paper-2);
  border: var(--border-w) solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow);
}
.hero-raw__thumb {
  position: relative; height: 63px; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 7px; background: var(--ink);
}
.hero-raw__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.85); opacity: .7; }
.hero-raw__thumb span {
  position: absolute; right: 5px; bottom: 5px; padding: 2px 6px; border-radius: 4px;
  background: var(--ink); color: var(--paper); font: 600 10px var(--font-mono);
}
.hero-raw__name { margin: 7px 2px 3px; font: 600 10.5px var(--font-mono); letter-spacing: .06em; }
.hero-raw__wait { margin: 0 2px; font: 600 10px var(--font-mono); letter-spacing: .06em; color: var(--red); }   /* mono in the drawn file, but no caps (brand, 26 Oct) */

.hero-arrow { position: absolute; left: 268px; top: 232px; width: 70px; height: 56px; }

.hero-tower { position: absolute; right: 0; bottom: 70px; width: 236px; display: flex; flex-direction: column; gap: 10px; }
.hero-done {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px;
  background: var(--white);
  border: var(--border-w) solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow);
}
.hero-done__shot { flex: none; width: 78px; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--ink); border-radius: 7px; background: var(--ink); }
.hero-done__shot img { width: 100%; height: 100%; object-fit: cover; }
.hero-done__meta {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap;
  font: 600 10px var(--font-mono); letter-spacing: .05em;   /* mono in the drawn file, no caps (brand, 26 Oct); tight so "June conference" keeps its check in line */
}
.hero-done__meta i,
.hero-ready i {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--green-mid); border: 2px solid var(--ink); color: var(--paper); font-style: normal;
}
.hero-done__meta i { width: 18px; height: 18px; font-size: 10px; }

.hero-ready {
  position: absolute; right: -18px; top: 40px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 10px;
  background: var(--gold); border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: var(--shadow-sm); transform: rotate(-4deg);
  font-weight: 800; font-size: 16px;
}
[data-texture="print"] .hero-ready { filter: url(#eg-print); }
.hero-ready i { width: 26px; height: 26px; font-size: 13px; }

.hero-under { position: absolute; bottom: 22px; font: 800 13px/1.2 var(--font-body); font-stretch: 112%; letter-spacing: .02em; }
/* each label sits centred under its own stack */
.hero-under--l { left: -8px; width: 260px; text-align: center; }
.hero-under--r {
  right: 0; width: 236px; bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
/* the nav lockup's two faces, so "With us" has the Guys on it */
.hero-under--r .eg-say__face { width: 44px; height: 44px; border-width: 3px; --k: .5; }

/* On load (Pedro, 2026-10-20; nine files since Tim, 20 Oct): the raw files drop one by one and land in the
   pile, then the arrow, then the same files line up cut and checked, and the
   "Ready to publish" tag stamps on last. About 2.6s, once; reduced motion
   shows the finished picture. */
@media (prefers-reduced-motion: no-preference) {
  .hero-raw { animation: hero-drop .6s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--i, 0) * .11s); }
  .hero-arrow { animation: hero-pop .4s 1.55s cubic-bezier(.34, 1.56, .64, 1) both; }
  .hero-done { animation: hero-line .45s cubic-bezier(.34, 1.3, .64, 1) both; }
  .hero-done:nth-child(1) { animation-delay: 1.8s; }
  .hero-done:nth-child(2) { animation-delay: 1.92s; }
  .hero-done:nth-child(3) { animation-delay: 2.04s; }
  .hero-done:nth-child(4) { animation-delay: 2.16s; }
  .hero-done:nth-child(5) { animation-delay: 2.28s; }
  .hero-ready { animation: hero-stamp .45s 2.55s cubic-bezier(.34, 1.56, .64, 1) both; }
  .hero-under { animation: hero-fade .4s both; }
  .hero-under--l { animation-delay: 1.2s; }
  .hero-under--r { animation-delay: 2.4s; }
}
@keyframes hero-drop {
  from { opacity: 0; transform: translateY(-460px) rotate(calc(var(--r, 0deg) - 25deg)); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}
@keyframes hero-pop   { from { opacity: 0; transform: scale(.3); } }
@keyframes hero-line  { from { opacity: 0; transform: translateX(-36px); } }
@keyframes hero-stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.8); } to { transform: rotate(-4deg); } }
@keyframes hero-fade  { from { opacity: 0; } }
@keyframes hero-out   { to { opacity: 0; } }
@keyframes hero-pile-out { to { opacity: 0; transform: scale(.82) translateY(24px); } }

/* 1b · hero with the camera (Pedro, 22 Oct): main.js lowers the Guys'
   hands from under the nav with a camera, shakes the nine files out of it
   into the pile and takes it back up. The hands are clipped at the hero's
   top edge, so they come out of the nav's line. Then the Guys themselves
   come in from both sides (proposal 1b): the pile shakes behind them and
   shrinks out of sight, and as they part the finished stack grows out of
   the same spot. One picture that changes in place, so the pile and the
   stack share the middle of the stage and the arrow goes. main.js drives
   all of it, at every width (a phone too since 26 Oct); reduced motion and
   no JS keep the drop above. */
.hero { position: relative; overflow-x: clip; }   /* the Guys slide past the edges without a sideways scroll */
.hero-hands { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.hero-shake:not(.hero-shake--go) .hero-hands { visibility: hidden; }   /* until main.js has placed the drawing (a phone waits for the scroll) */
.hero-hands__art { position: absolute; max-width: none; height: auto; transform-origin: 50% 92.88%; will-change: transform, filter; }
.hero-hands__fx { position: absolute; width: 0; height: 0; }
.hero-shake .hero-raw { animation: none; }
.hero-shake .hero-raw:not(.is-out) { visibility: hidden; }
.hero-shake .hero-pile { left: 50%; margin-left: -130px; transform-origin: 130px 260px; transform: scale(1.25); will-change: transform; }   /* main.js: PILE */
.hero-shake .hero-tower { right: auto; left: 50%; margin-left: -118px; opacity: 0; will-change: transform; }
.hero-shake .hero-ready { right: auto; left: calc(50% - 6px); top: 104px; opacity: 0; }
.hero-shake .hero-under--l { left: 50%; margin-left: -130px; opacity: 0; }
.hero-shake .hero-under--r { right: auto; left: 50%; margin-left: -118px; opacity: 0; }
.hero-shake .hero-arrow { display: none; }
.hero-shake .hero-done,
.hero-shake .hero-ready,
.hero-shake .hero-under { animation: none; }
/* the Guys: they slide in from the sides fading up and leave fading out,
   so the stage's edges never cut them; off to the sides until main.js
   moves them */
.hero-guys { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-guys__guy { position: absolute; display: block; max-width: none; opacity: 0; will-change: transform, filter, opacity; }
.hero-guys__guy--tim { height: 490px; z-index: 2; transform: translateX(-260px); }
.hero-guys__guy--pedro { height: 526px; z-index: 1; transform: translateX(260px); }
.hero-guys__bit, .hero-guys__spark { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform, opacity; }
.hero-guys__bit--cut, .hero-guys__bit--ok {
  display: grid; place-items: center; border-radius: 50%;
  border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-weight: 800;
}
.hero-guys__bit--cut { width: 38px; height: 38px; background: var(--white); font-size: 21px; }
.hero-guys__bit--ok { width: 34px; height: 34px; background: var(--green-mid); color: var(--paper); font-size: 18px; }
.hero-guys__bit--film { display: flex; gap: 3px; padding: 5px; background: var(--ink); border-radius: 4px; }
.hero-guys__bit--film i { width: 12px; height: 15px; background: #C0C6C9; border-radius: 2px; }
.hero-guys__spark { z-index: 3; }
.hero-guys__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the copy plays along (Pedro, 22 Oct), on main.js's clock: the first line
   alone after the loading screen, the turn once the last file is down, the
   body copy and the buttons once the stack is ready */
.hero__lead { display: block; }
.hero-shake .hero__lead,
.hero-shake .hero__turn,
.hero-shake .hero__body,
.hero-shake .hero__cta { opacity: 0; }

/* below 1100px the picture goes under the copy, at its own width */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { width: 612px; max-width: 100%; margin: 0 auto; }
}
/* …except between 861 and 1100px, where the two columns stay so the camera
   still comes down right under the nav (Pedro, 26 Oct). The picture keeps
   its 612×560 drawing and scales to fit its column: main.js sets --z to the
   exact fit; these steps are for when it can't. */
@media (min-width: 861px) and (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__stage {
    --z: .64; width: 612px; max-width: none; margin: 0 0 calc(560px * (var(--z) - 1)) 0;
    transform: scale(var(--z)); transform-origin: 0 0;
  }
}
@media (min-width: 961px) and (max-width: 1100px) { .hero__stage { --z: .72; } }
@media (min-width: 1041px) and (max-width: 1100px) { .hero__stage { --z: .79; } }
/* …and the same two columns in short windows of 641–860px (a phone on its
   side, a small window), where one column left the pile below the screen's
   edge (Pedro, 26 Oct: proposal 1 in sugerencias/1i-hero-ventana-baja). Below
   1000px tall the one-column picture doesn't fit. Here the picture scales to
   the height as well (main.js), and the copy starts at the top. */
@media (min-width: 641px) and (max-width: 860px) and (max-height: 999px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .hero h1 { font-size: 34px; }
  .hero__stage {
    --z: .5; width: 612px; max-width: none; margin: 0 0 calc(560px * (var(--z) - 1)) 0;
    transform: scale(var(--z)); transform-origin: 0 0;
  }
}
/* phone: one column, the arrow points down */
@media (max-width: 640px) {
  .hero__stage { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
  .hero-pile, .hero-arrow, .hero-tower, .hero-under, .hero-ready { position: relative; inset: auto; }
  .hero-pile { left: 4px; }
  .hero-under { text-align: center; width: auto; }
  .hero-arrow { transform: rotate(90deg); margin: 6px 0; }
  .hero-ready { margin-bottom: 4px; }
  .hero-tower { width: min(300px, 100%); }
}
/* phone, with motion: one picture that changes instead of two side by side
   (Tim, 20 Oct). The pile drops and holds, then it clears away and the same
   spot fills with the finished stack; slower than on desktop. Reduced motion
   keeps the column above. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .hero__stage { display: block; position: relative; width: 100%; height: 470px; padding: 0; }  /* everything inside is absolute: without a width the box collapses to 0 */
  .hero-pile { position: absolute; left: 50%; top: 18px; margin-left: -134px;
    animation: hero-pile-out .6s 2.8s cubic-bezier(.5, 0, .75, 0) forwards; }
  .hero-arrow { display: none; }
  .hero-tower { position: absolute; left: 50%; top: 40px; width: 260px; margin-left: -130px; }
  .hero-done:nth-child(1) { animation-delay: 3.2s; }
  .hero-done:nth-child(2) { animation-delay: 3.32s; }
  .hero-done:nth-child(3) { animation-delay: 3.44s; }
  .hero-done:nth-child(4) { animation-delay: 3.56s; }
  .hero-done:nth-child(5) { animation-delay: 3.68s; }
  .hero-ready { position: absolute; top: -6px; right: 50%; margin-right: -150px; animation-delay: 4s; }
  .hero-under { position: absolute; bottom: 4px; left: 0; right: 0; width: auto; margin: 0; justify-content: center; }
  .hero-under--l { animation: hero-fade .4s 1.2s both, hero-out .4s 2.8s forwards; }
  .hero-under--r { animation-delay: 3.6s; }
}
/* phone, with main.js running the camera (1b; Pedro, 26 Oct): the wide
   screen's 612×560 picture, scaled to the screen's width (main.js sets --z)
   and centred under the buttons, everything inside back in its wide-screen
   place. The drop above is what's left without JS. The copy is there from
   the start. */
@media (max-width: 640px) {
  .hero-shake .hero__lead, .hero-shake .hero__turn, .hero-shake .hero__body, .hero-shake .hero__cta { opacity: 1; }
  .hero-shake .hero__stage {
    --z: .65; display: block; position: relative; width: 612px; height: 560px; max-width: none; padding: 0;
    margin: 0 0 calc(560px * (var(--z) - 1)) calc((100% - 612px * var(--z)) / 2);
    transform: scale(var(--z)); transform-origin: 0 0;
  }
  .hero-shake .hero-pile { position: absolute; top: auto; bottom: 70px; width: 260px; height: 330px; animation: none; }
  .hero-shake .hero-tower { position: absolute; top: auto; bottom: 70px; width: 236px; }
  .hero-shake .hero-ready { position: absolute; margin: 0; }
  .hero-shake .hero-under { position: absolute; bottom: 22px; }
  .hero-shake .hero-under--l { right: auto; width: 260px; }
}

/* --- 3 · The usual fixes (v5) -----------------------------------------
   Three fixes, each crossed out with the brand's .eg-nope, then the gold
   card with the pair. Anchored to the scroll (main.js, trackFixes): each
   card lands, gets crossed out, and only then does the next one come; the
   gold card lands last. The initial states set --cross, never the
   transform it feeds (CLAUDE.md §8). */
.fixes__head {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(32px, 3.5vw, 50px); line-height: 1.05; letter-spacing: -.03em;
  text-align: center; text-wrap: balance;
}
.fixes__turn { display: block; }
.fixes__row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch;
}
.fix-card { display: flex; flex-direction: column; padding: 28px 28px 30px; }
.fix-card .eg-eyebrow { font-size: 15px; color: var(--red); margin-bottom: 14px; }
.fix-card .eg-nope__x, .fix-card .eg-nope__text { font-size: 24px; }
.fix-card .eg-nope__text { letter-spacing: -.02em; }
.fix-card .eg-card__text { margin-top: 16px; font-size: 16px; line-height: 1.6; }

.fixes__answer { position: relative; margin-top: 40px; }
.fixes__card {
  min-height: 290px; padding: 44px 400px 44px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.fixes__card p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; font-weight: 600; color: var(--ink); max-width: 30em; }
.fixes__card strong {
  display: block; margin-top: 14px;
  font-family: var(--font-poster); font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.02em;
  text-wrap: balance;
}
/* the pair stands in the card's right end, clipped to its inner box */
.fixes__guys {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 400px;
  overflow: hidden; border-radius: 0 14px 14px 0; pointer-events: none;
}
.fixes__guys img { position: absolute; right: 24px; top: 22px; width: 350px; max-width: none; }

.has-scroll-fx .fix-card { opacity: 0; }
.has-scroll-fx .fix-card .eg-nope__text { --cross: 0; }
.has-scroll-fx .fix-card .eg-nope__x { opacity: 0; }
.has-scroll-fx .fixes__answer { opacity: 0; }

@media (max-width: 960px) {
  .fixes__row { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; gap: 18px; }
  .fixes__answer { max-width: 560px; margin-inline: auto; }
  /* the pair moves under the copy */
  .fixes__card { padding: 34px 30px 270px; min-height: 0; }
  .fixes__guys { left: 4px; right: 4px; top: auto; height: 250px; width: auto; border-radius: 0 0 14px 14px; }
  .fixes__guys img { left: 50%; right: auto; top: 10px; width: 300px; transform: translateX(-50%); }
}

/* --- 4 · How it works (v5) -------------------------------------------
   A green band. Three numbered tabs; each opens its copy on the left and a
   window on the right. The windows are an invented portal for now: they get
   redrawn as Trello and Frame.io (see index.html). The three panels of each
   side share one grid cell, so the section keeps the tallest one's height
   and nothing jumps when a tab changes. */
.how.eg-band { padding-inline: 0; }

/* the hero pair: two illustrated cards, one tilted each way */

.guy-card {
  width: clamp(150px, 21vw, 246px);
  height: auto;
  filter: drop-shadow(5px 6px 0 rgba(20, 17, 13, .22));
}
.guy-card--tiltL { transform: rotate(-4deg); }
.guy-card--tiltR { transform: rotate(4deg); margin-left: -6%; }

/* --- Ticker ------------------------------------------------------------- */
.ticker {
  background: var(--ink); color: var(--paper);
  overflow: hidden; padding-block: 14px;
  transform: rotate(-1deg) scale(1.03);
  margin-block: 26px;
}
.ticker__track { display: flex; width: max-content; animation: slide 50s linear infinite; }   /* 11 items now (26 Oct): 38s × the longer strip, same speed */
.ticker__group { display: flex; gap: 34px; padding-right: 34px; align-items: center; }
.ticker span { font-family: var(--font-poster); font-size: 19px; white-space: nowrap; }
.ticker .dot { position: relative; top: -.55em; color: var(--gold); font-size: 15px; }   /* the ★ sits low in its box: lifted to the caps' middle */
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   VOLUME AND SCHEDULE — the month as an edit timeline
   One lane per format; each deliverable is a clip whose width hints at its
   length. All the clips are paper: the only colour is the dot beside each
   lane name, which matches that format's tile in "what we edit".
   --lane-name is shared by the lanes and the week ruler, so Week 1 starts
   exactly where the clips do.
   ========================================================================== */

.dark .eyebrow { color: var(--gold); }

.dot { width: 9px; height: 9px; flex: none; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%; }
.clips { display: flex; gap: 4px; min-width: 0; }

/* the ruler sits in the clip column, never under the names */

@media (max-width: 560px) {
  
  .clips { gap: 3px; }
  
}

/* ==========================================================================
   WHO THIS IS FOR — service cards
   Green says yes, red says no.
   ========================================================================== */

aa
a

/* no */

@media (max-width: 520px) {
        }

/* --- Dark block --------------------------------------------------------- */
.dark {
  background: var(--green);
  color: var(--paper);
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* --- Pricing ------------------------------------------------------------ */

/* the table's cells have a min-content width of their own — let it scroll
   inside the card instead of widening the whole document on narrow screens */

table { width: 100%; border-collapse: collapse; }
caption { text-align: left; padding: 22px 22px 6px; font-weight: 800; font-size: 17px; }
th, td { text-align: left; padding: 14px 22px; font-size: 16px; }
thead th {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
  border-bottom: 3px solid var(--ink);
}
tbody tr + tr td { border-top: 1px solid var(--paper-3); }
tbody tr:hover td { background: var(--paper); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details {
  background: var(--white);
  border: var(--border-w) solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 22px;
  font-weight: 700; font-size: 17px;
  display: flex; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto;
  font-weight: 500; font-size: 30px; line-height: 1;
  color: var(--red);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { background: var(--gold); }

/* --- Close / footer ----------------------------------------------------- */

.footer { background: var(--ink); color: var(--paper); padding-block: 52px 34px; }

.footer a { color: rgba(246, 240, 226, .78); text-decoration: none; font-size: 15px; }
.footer a:hover { color: var(--gold); }

.footer__legal { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(246, 240, 226, .18); font-size: 13px; color: rgba(246, 240, 226, .55); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* --- Narrow screens ----------------------------------------------------- */
@media (max-width: 560px) {
  th, td { padding: 12px 16px; font-size: 15px; }
  caption { padding: 18px 16px 4px; }
  
  .btn { padding: 13px 22px; font-size: 15px; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .nav__inner { height: 66px; gap: 12px; }
  .brand__mark { height: 30px; }
  .brand__faces img { width: 34px; height: 34px; }
  
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }

  /* the diagram carries no information the labels don't, so it just goes */

}

/* ==========================================================================
   MORE VIDEOS? MORE GUYS
   The crew line-up: the two Guys we have as cards, the ones we'd add as dashed
   outlines. Then two illustrated cards for what that growth buys you.
   ========================================================================== */

.plus {
  position: absolute; top: -16px; right: -16px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red); color: var(--white);
  border: 3px solid var(--ink); box-shadow: var(--shadow-sm);
  font-family: var(--font-poster); font-size: 26px; line-height: 1;
}

/* ==========================================================================
   v5 · SECTIONS 6–13 AND THE FOOTER
   Ported 2026-10-19 from the approved drafts in
   ../_propuestas/2026-10-16-copy-v5/ (formats, more, checked, built, proof,
   steps, faq, close). Each draft's classes carry its section's prefix
   (fmt-, more-, chk-, fit-, prf-, stp-, faq-, cls-) and every rule is scoped
   to the section's own class, so nothing here touches the rest of the page.
   The brand's eg-* classes keep their names. The responsive rules for these
   sections come after this block.
   ========================================================================== */
/* ---- 6 · EVERY FORMAT. ONE SHOP. (v5, from _propuestas/2026-10-16-copy-v5/formats.html) ---- */
.fmt-sec.eg-band{padding:112px 0}
.fmt-sec .fmt-head{font-family:var(--font-body);font-weight:800;letter-spacing:-.03em;font-size:56px;line-height:1.02;margin:0;text-align:center;color:var(--text)}
/* eight formats, four by two (Pedro, 26 Oct); two by four below 1180px, one column on a phone */
.fmt-sec .eg-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px}
@media (max-width: 1180px) { .fmt-sec .eg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fmt-sec .eg-tile__head{padding:22px 22px 20px}
.fmt-sec .eg-tile__title{font-size:22px}
.fmt-sec .eg-tile__shot{height:178px}
[data-texture="print"] .fmt-sec .eg-tile{filter:none}
.fmt-sec .eg-tile{position:relative;border:0;box-shadow:none;background:transparent;overflow:visible}
.fmt-sec .eg-tile::before{content:"";position:absolute;inset:0;z-index:0;background:var(--white);border:4px solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
[data-texture="print"] .fmt-sec .eg-tile::before,[data-texture="print"] .fmt-sec .eg-tile__head{filter:url(#eg-print)}
.fmt-sec .eg-tile__head{position:relative;z-index:1}
.fmt-sec .eg-tile .eg-tile__shot{z-index:1;margin:auto 4px 4px;border-radius:0 0 14px 14px}
/* the whole frame, the format colour above and below: the webinar's speakers
   sit at its right edge, where a crop would lose them (Pedro, 26 Oct) */
.fmt-sec .eg-tile__shot--whole img { inset: 50% 0 auto; height: auto; translate: 0 -50%; border-block: 3px solid var(--ink); }
.fmt-sec .fmt-signoff{display:flex;justify-content:center;margin-top:72px}
.fmt-sec .fmt-signoff .eg-say__bubble{font:400 26px/1.1 var(--font-poster);letter-spacing:-.01em;padding:18px 26px}

/* ---- 7 · MORE VIDEOS? MORE GUYS. (v5, from _propuestas/2026-10-16-copy-v5/more.html) ---- */
.more-sec.eg-band{padding:112px 0}
.more-sec .more-poster{font-family:var(--font-poster);font-weight:400;font-size:92px;line-height:.95;letter-spacing:-.02em;margin:0;text-align:center;color:var(--text)}
.more-sec .more-lede{font-size:19px;line-height:1.65;color:var(--text-muted);max-width:38em;margin:28px auto 0;text-align:center}
.more-sec .more-crew{position:relative;height:300px;max-width:980px;margin:56px auto 0}
.more-sec .more-crew > *{position:absolute;bottom:0;left:50%}
.more-sec .more-guy{width:190px;height:258px;border:4px solid var(--ink);border-radius:var(--radius-lg);overflow:hidden}
.more-sec .more-guy img{position:absolute;left:50%;top:14px;transform:translateX(-50%)}
.more-sec .more-guy--tim{background:var(--gold);margin-left:-196px;transform:rotate(-4deg);z-index:6}
.more-sec .more-guy--tim img{width:206px}
.more-sec .more-guy--pedro{background:var(--red);margin-left:6px;transform:rotate(4deg);z-index:6}
.more-sec .more-guy--pedro img{width:190px}
.more-sec .more-ghost{width:150px;height:204px;border:4px solid var(--ink);border-radius:var(--radius-lg);background:var(--green-mid);display:grid;place-items:end center;overflow:hidden;color:var(--green)}
.more-sec .more-ghost svg{width:82%;margin-bottom:-6px}
.more-sec .more-ghost--light{background:var(--green-light);color:#B7D0A9}
.more-sec .more-ghost .more-plus{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);display:grid;place-items:center;font:800 20px/1 var(--font-body);color:var(--ink)}
.more-sec .more-ghost--1{margin-left:-470px;transform:rotate(-9deg);bottom:-14px;z-index:2}
.more-sec .more-ghost--2{margin-left:-330px;transform:rotate(-6deg);z-index:4}
.more-sec .more-ghost--3{margin-left:178px;transform:rotate(6deg);z-index:4}
.more-sec .more-ghost--4{margin-left:318px;transform:rotate(9deg);bottom:-14px;z-index:2}
.more-sec .more-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:80px;align-items:stretch}
.more-sec .more-feat{position:relative;padding:26px 26px 28px;display:flex;flex-direction:column}
.more-sec .more-feat::before{content:"";position:absolute;inset:0;z-index:0;background:var(--green-mid);border:4px solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
[data-texture="print"] .more-sec .more-feat::before,[data-texture="print"] .more-sec .more-feat__copy{filter:url(#eg-print)}
.more-sec .more-feat > *{position:relative;z-index:1}
.more-sec .more-feat__art{height:178px;border:3px solid var(--ink);border-radius:var(--radius-md);background:var(--green);display:flex;align-items:center;justify-content:center;gap:16px;padding:14px}
.more-sec .more-feat__copy{margin-top:22px}
.more-sec .more-feat__copy h3{margin:0;font:800 21px/1.2 var(--font-body);letter-spacing:-.02em;color:var(--paper)}
.more-sec .more-feat__copy p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--text-muted)}
.more-sec .more-tag{font:800 13px/1.2 var(--font-body);font-stretch:112%;letter-spacing:.02em;color:var(--text-muted)}
.more-sec .more-tag--gold{color:var(--gold)}
.more-sec .more-face{position:relative;display:inline-block;width:48px;height:48px;border-width:3px}
.more-sec .more-col{display:grid;gap:10px;justify-items:center}
.more-sec .more-tiles{display:grid;gap:4px}
.more-sec .more-tiles i{width:16px;height:16px;border-radius:4px;border:2px solid var(--ink);background:var(--hue)}
.more-sec .more-arrow{font:800 30px var(--font-body);color:var(--paper)}
.more-sec .more-rules{width:100%;background:var(--white);border:3px solid var(--ink);border-radius:10px;padding:12px 14px;align-self:stretch;display:grid;align-content:center;gap:10px}
.more-sec .more-rules p{margin:0;font:800 14px/1.3 var(--font-body);color:var(--ink)}
.more-sec .more-rules small{display:block;font:600 10px var(--font-mono);letter-spacing:.06em;color:var(--ink-soft);margin-top:2px}
.more-sec .more-rules small b{color:var(--red);font-weight:600}

/* ---- 9 · BUILT AROUND HOW YOU WORK (v5, from _propuestas/2026-10-16-copy-v5/built.html) ---- */
.fit-sec.eg-band{padding:112px 0}
.fit-sec .fit-head{font-family:var(--font-body);font-weight:800;letter-spacing:-.03em;font-size:56px;line-height:1.02;margin:0;text-align:center;color:var(--text)}
.fit-sec .fit-fit{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:72px;align-items:stretch}
.fit-sec .fit-slot{position:relative;display:flex}
.fit-sec .fit-slot .eg-card{flex:1;display:flex;flex-direction:column;padding:40px 40px 36px}
.fit-sec .fit-slot .eg-card--cream{background:var(--white)}

.fit-sec .fit-turn{margin:8px 0 0;font:400 38px/1.05 var(--font-poster);letter-spacing:-.02em;color:var(--ink);max-width:11em;text-wrap:balance}
.fit-sec .fit-body{margin:18px 0 0;font-size:17px;line-height:1.6;color:var(--ink)}
.fit-sec .eg-card--cream .fit-body{color:var(--ink-soft)}
.fit-sec .fit-ticks{list-style:none;margin:22px 0 30px;padding:0;display:grid;gap:12px}
.fit-sec .fit-ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:16px;line-height:1.4;color:var(--ink)}
.fit-sec .fit-ticks li::before{content:"✓";flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:13px;margin-top:-1px}
.fit-sec .fit-slot .eg-btn{align-self:flex-start;margin-top:auto}

/* ---- 12 · QUESTIONS (v5, from _propuestas/2026-10-16-copy-v5/faq.html) ---- */
.faq-sec.eg-band{padding:112px 0}
.faq-sec .faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;align-items:start}
.faq-sec .faq-head{font-family:var(--font-body);font-weight:800;letter-spacing:-.03em;font-size:50px;line-height:1.05;margin:0;color:var(--text);text-wrap:balance}
.faq-sec .faq-faq{display:grid;gap:12px}
.faq-sec .faq-faq details{background:var(--white);border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm)}
[data-texture="print"] .faq-sec .faq-faq details{filter:url(#eg-print)}
.faq-sec .faq-faq summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;font:800 18px/1.3 var(--font-body);letter-spacing:-.01em;color:var(--ink)}
.faq-sec .faq-faq summary::-webkit-details-marker{display:none}
.faq-sec .faq-faq summary .faq-q{flex:1}
.faq-sec .faq-faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);background:var(--paper);display:grid;place-items:center;font:800 20px/1 var(--font-body)}
.faq-sec .faq-faq details[open] summary::after{content:"–";background:var(--gold)}
.faq-sec .faq-faq details[open]{box-shadow:var(--shadow)}
.faq-sec .faq-faq .faq-a{padding:0 74px 20px 20px;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.faq-sec .faq-todo{background:rgba(242,179,61,.18);border-radius:6px;padding:0 6px;color:var(--ink)}

/* ---- 13 · CLOSE (v5, from _propuestas/2026-10-16-copy-v5/close.html) ---- */

.cls-sec.cls-footer{background:var(--ink);color:var(--paper);padding:48px 0 32px;border-top:4px solid var(--ink)}
.cls-sec .cls-footer__grid{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cls-sec.cls-footer .eg-lockup__mark{height:42px}
.cls-sec .cls-footer__links{display:flex;gap:26px;font-weight:600;font-size:15px}
.cls-sec .cls-footer__line{margin:36px 0 0;font:400 30px/1 var(--font-poster);letter-spacing:-.02em}
.cls-sec .cls-footer__line .eg-hot{color:var(--gold)}
.cls-sec .cls-footer__legal{display:flex;justify-content:space-between;margin-top:26px;padding-top:18px;border-top:2px dashed var(--ink-soft);font:600 13px var(--font-body);font-stretch:112%;letter-spacing:.02em;color:rgba(246,240,226,.6)}

/* ==========================================================================
   v5 · 6–13: fixes and responsive
   The drafts were drawn at 1440px only. What follows keeps them on screen
   below that, and undoes the few v4 globals that still reach them.
   ========================================================================== */

/* headlines follow the screen instead of their 1440px sizes */
.fmt-sec .fmt-head,
.fit-sec .fit-head { font-size: clamp(32px, 3.9vw, 56px); }
.faq-sec .faq-head { font-size: clamp(32px, 3.5vw, 50px); }
.more-sec .more-poster { font-size: clamp(46px, 6.4vw, 92px); }

/* fixed-size pieces (drawn at one size) scale down as a whole */
@media (max-width: 1100px) {
  .faq-sec .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  
}
@media (max-width: 960px) {
  .more-sec .more-feats, .fit-sec .fit-fit { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin-inline: auto; }
  .fit-sec .fit-fit { gap: 52px; }               /* room for the Guys on the card corners */
  .more-sec .more-crew { zoom: .75; }

  /* section 11: the zig-zag board becomes a column of cards; the moving line goes */

}
@media (max-width: 760px) {
  .fmt-sec.eg-band,
.more-sec.eg-band,
.fit-sec.eg-band,
.faq-sec.eg-band { padding: 72px 0; }
  .more-sec .more-crew { zoom: .5; }

  /* 8 · the log: time and status on a line, the entry under them */

  .faq-sec .faq-faq .faq-a { padding: 0 20px 18px; }
  .faq-sec .faq-faq summary { font-size: 16px; padding: 16px; }

  .cls-sec .cls-footer__grid { flex-direction: column; align-items: flex-start; }
  .cls-sec .cls-footer__links { flex-wrap: wrap; gap: 10px 20px; }
  .cls-sec .cls-footer__line { font-size: 22px; }
}
@media (max-width: 560px) {
  .fmt-sec .eg-tiles { grid-template-columns: minmax(0, 1fr); }
  .fmt-sec .fmt-signoff .eg-say__bubble { font-size: 20px; }
  .more-sec .more-crew { zoom: .36; }

  
}

/* the footer's links are real links now (text in the draft) */
.cls-sec .cls-footer__links a { color: inherit; text-decoration: none; }
.cls-sec .cls-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   v5 · Tim's pass (2026-10-21)
   ========================================================================== */

/* --- Start with one video: v3/v4's layout, the headline outside the box --- */
.one.eg-band { padding-inline: 0; }
.one__head {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(32px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.03em;
  color: var(--text);
}
.one__slot { position: relative; margin-top: clamp(28px, 4vw, 44px); }
.one__card { padding: clamp(32px, 5vw, 60px); padding-right: clamp(32px, 34vw, 480px); }
.one__title {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.03em; color: var(--ink);
}
.one__card p { max-width: 56ch; margin-top: 12px; font-size: 18px; line-height: 1.6; color: var(--ink); }
.one__card .eg-btn { margin-top: 26px; align-self: flex-start; }
/* Tim and Pedro lean on the card's right end, outside it so the print skips
   them; Tim in front, as in tim-and-pedro.png (Pedro, 23 Oct) */
.one__guys {
  --guy-w: clamp(130px, 15vw, 220px);
  position: absolute; right: clamp(16px, 4vw, 56px); bottom: 0;
  display: flex; flex-direction: row-reverse; align-items: flex-end;
}
.one__guy { display: block; width: var(--guy-w); height: auto; max-width: none; transform-origin: bottom center; }
.one__guy--pedro { transform: rotate(4deg); }
.one__guy--tim { position: relative; width: calc(var(--guy-w) * 1.06); margin-right: calc(var(--guy-w) * -.5); transform: rotate(-3deg); }
@media (max-width: 640px) {
  .one__card { padding: 30px 26px 250px; }
  .one__guys { --guy-w: 130px; right: 50%; transform: translateX(50%); }
}

/* --- Questions: shorter. The headline goes on top and the nine questions
   run in two columns, so the section is about half as tall. --- */
.faq-sec.eg-band { padding: clamp(64px, 8vw, 96px) 0; }
.faq-sec .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.faq-sec .faq-head { font-size: clamp(30px, 3vw, 42px); max-width: 20em; }
.faq-sec .faq-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 18px; }
/* two independent columns, so opening one question never leaves a hole beside it */
.faq-sec .faq-col { display: grid; gap: 10px; }
.faq-sec .faq-faq summary { padding: 14px 16px; font-size: 16px; }
.faq-sec .faq-faq summary::after { width: 30px; height: 30px; font-size: 18px; }
.faq-sec .faq-faq .faq-a { padding: 0 16px 16px; font-size: 15px; }
@media (max-width: 860px) { .faq-sec .faq-faq { grid-template-columns: minmax(0, 1fr); } }

/* --- Tim's pass, part 2 (2026-10-21) ------------------------------------- */

/* 5 · formats: "See examples" under each description */
.fmt-sec .fmt-ex {
  display: inline-flex; gap: 6px; margin-top: 14px;
  font: 800 15px var(--font-body); color: var(--red); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 1px;
}
.fmt-sec .fmt-ex:hover { color: var(--ink); }

/* the dialog a local clip plays in (main.js, 6; v4's lightbox without the
   arrows). Dark backdrop, a big ×, Esc or a click outside to leave. */
.lightbox { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: var(--border-w) solid var(--ink); border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); }
.lightbox::backdrop { background: rgba(20, 17, 13, .82); }
.lightbox__inner { padding: 18px 22px 22px; display: grid; gap: 14px; }
.lightbox__head { display: flex; align-items: center; gap: 14px; }
.lightbox__name { font: 800 20px var(--font-body); letter-spacing: -.02em; }
.lightbox__close {
  margin-left: auto; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--paper); font: 400 24px/1 var(--font-body); color: var(--ink); cursor: pointer;
}
.lightbox__close:hover, .lightbox__close:focus-visible { background: var(--gold); }
.lightbox video {
  display: block; width: 100%; max-height: min(72vh, 640px);
  border: 3px solid var(--ink); border-radius: 12px; background: #000;
}
.lightbox video.is-vertical { width: auto; margin-inline: auto; aspect-ratio: 9 / 16; }


/* --- Tim's call, 20 Oct: the corrections (2026-10-21) ------------------- */

/* 2 · credibility: a slim band under the hero, three numbers (Pedro, 22 Oct:
   no client logos) */
.cred.eg-band { padding: clamp(48px, 6vw, 72px) 0; }
.cred__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; text-align: center; }
/* Labels and counts are Archivo set wide, in sentence case: no uppercase mono,
   which read as machine-made (Pedro, 26 Oct, option B of four; now a brand rule).
   The mono stays only inside the drawings of software (file names, timecodes). */
.cred__nums dt { display: inline-block; font: 900 clamp(44px, 5vw, 72px)/1 var(--font-body); font-stretch: 125%; letter-spacing: -.01em; color: var(--red); }
.cred__nums dd { margin: 10px 0 0; font: 600 17px/1.3 var(--font-body); color: var(--ink-soft); }
@media (max-width: 760px) {
  .cred__nums { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* 3 · the problem: the backlog's headline over Built around's cards */
.fit-sec .fit-head__turn { display: block; }
.fit-sec .fit-lede {
  max-width: 40em; margin: 24px auto 0; text-align: center;
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--text-muted);
}
.fit-sec .fit-ticks { margin-bottom: 0; }

/* 7 · the producer, under the three cards: a short statement, no process */
.more-sec .more-producer {
  max-width: 46em; margin: clamp(64px, 7vw, 96px) auto 0; padding-top: clamp(48px, 5vw, 72px);
  border-top: 3px dashed rgba(246, 240, 226, .25); text-align: center;
}
.more-sec .more-producer__head {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.03em; color: var(--text);
  text-wrap: balance;
}
.more-sec .more-producer p { margin-top: 18px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--text-muted); }

/* 10 · put us to work: two ways in, then the one-video box */
.one__paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(28px, 4vw, 40px); }
.one__path {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 28px;
  background: var(--white); border: var(--border-w) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
[data-texture="print"] .one__path { filter: url(#eg-print); }
.one__path:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-sm); }
.one__who { font: 800 22px/1.2 var(--font-body); letter-spacing: -.02em; }
.one__path b { font: 800 16px var(--font-body); color: var(--red); }
.one__head--try { margin-top: clamp(64px, 8vw, 104px); }
@media (max-width: 640px) { .one__paths { grid-template-columns: minmax(0, 1fr); } }

/* on a phone the picture sits below the copy: wait until it's on screen
   (Tim, 40:47: "otherwise you miss the animation"). main.js adds .hero-wait
   to <html> and .is-in to the stage when it comes into view. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .hero-wait .hero__stage:not(.is-in),
  .hero-wait .hero__stage:not(.is-in) * { animation-play-state: paused; }
}

/* 3 · the problem (Pedro, 21 Oct): each Guy asks his reader the question.
   Tim on the agency card's top-left, Pedro on the founder card's top-right,
   each with a bubble. The face sits outside the card, so it's never printed. */
.fit-sec .fit-slot .eg-card { padding-top: 76px; }
.fit-sec .fit-turn { margin-top: 0; }
.fit-sec .fit-say { position: absolute; top: -40px; z-index: 3; display: flex; align-items: center; gap: 12px; }
.fit-sec .fit-say--left { left: 28px; }
.fit-sec .fit-say--right { right: 28px; flex-direction: row-reverse; }
.fit-sec .fit-say .eg-say__bubble { font-size: 18px; font-weight: 800; white-space: nowrap; transform: rotate(-2deg); }
.fit-sec .fit-say--right .eg-say__bubble { transform: rotate(2deg); background: var(--white); }

/* the biggest reason to work with us, marked in green */
.fit-sec .fit-ticks li.fit-key {
  align-items: center; padding: 8px 16px 8px 8px; margin-top: 4px;
  background: var(--green-mid); color: var(--paper);
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm);
  font-size: 17px; justify-self: start;
}
.fit-sec .fit-ticks li.fit-key::before { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
@media (max-width: 560px) {
  .fit-sec .fit-say .eg-say__bubble { font-size: 15px; white-space: normal; }
  .fit-sec .fit-say--left { left: 16px; right: 16px; }
  .fit-sec .fit-say--right { right: 16px; left: 16px; }
}

/* (Pedro, 21 Oct) each bubble stands off its own card: Tim's white on the
   gold card, Pedro's gold on the white one */
.fit-sec .fit-say--left .eg-say__bubble { background: var(--white); }
.fit-sec .fit-say--right .eg-say__bubble { background: var(--gold); }
/* the two green benefits sit on the same line: the list fills the card and
   the key point drops to its bottom */
.fit-sec .fit-ticks { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.fit-sec .fit-ticks li.fit-key { margin-top: auto; align-self: flex-start; }
.fit-sec .fit-ticks li:nth-last-child(2) { margin-bottom: 14px; }

/* --- 5 · How it works, option C (Pedro, 21 Oct) --------------------------
   Three promises, each a card with its proof, and the process as one strip. */
.how.eg-band { padding-inline: 0; }
.rec-top { text-align: center; }
.rec-head {
  margin: 0 auto; max-width: 18em;
  font: 800 clamp(32px, 3.9vw, 56px)/1.02 var(--font-body); letter-spacing: -.03em;
  color: var(--text); text-wrap: balance;
}
.rec-head__turn { display: block; }
.rec-lede { max-width: 38em; margin: 24px auto 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--text-muted); }

.rec-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.rec-pill {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: var(--border-w) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
/* all three pictures on paper: the colour comes from the drawings (Pedro,
   24 Oct; the calendar's gold box outweighed the other two) */
.rec-pill__art { position: relative; height: 220px; overflow: hidden; background: var(--paper-2); border-bottom: var(--border-w) solid var(--ink); color: var(--ink); }
.rec-pill__copy { padding: 24px 26px 28px; }
.rec-pill h3 { font: 400 clamp(28px, 2.4vw, 34px)/1 var(--font-poster); letter-spacing: -.02em; color: var(--ink); }
.rec-pill p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* on schedule: the month, drawn (Pedro, 22 Oct): an inline SVG so its day
   numbers use the site's fonts; centred in its box */
.rec-cal { position: absolute; left: 50%; top: 50%; width: auto; height: calc(100% - 20px); transform: translate(-50%, -50%); overflow: visible; }
/* at volume: a wall of finished cuts, every one ticked (Pedro, 24 Oct), wider
   and taller than the box at any width so it's cut on all four sides. main.js
   adds .has-anim, a --d per tick (its diagonal) and, once the card is well on
   screen, .is-on: the ticks pop in a wave from the top left. Without JS or
   with reduced motion they're all there. */
.rec-wall {
  position: absolute; left: 50%; top: 50%; width: max(448px, calc(100% + 80px)); transform: translate(-50%, -50%);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
.rec-wall b { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border: 3px solid var(--ink); border-radius: 7px; }   /* no shadow: 25 of them made the wall heavy (Pedro, 26 Oct) */
.rec-wall img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.rec-wall i {
  position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--green-mid); border: 2px solid var(--ink); color: var(--paper); font: 800 9px/1 var(--font-body); font-style: normal;
}
.rec-wall.has-anim i { animation: rec-tick .4s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0) * 70ms) both paused; }
.rec-wall.has-anim.is-on i { animation-play-state: running; }
@keyframes rec-tick { from { transform: scale(0); } }
/* in every format: the places each cut goes (Pedro, 24 Oct), drawn like the
   calendar: a laptop playing the episode, a square post, a phone playing the
   reel, on a 320px stage centred in the box */
.rec-screens { position: absolute; left: 50%; top: 0; bottom: 0; width: 320px; margin-left: -160px; }
.rec-screens img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rec-screens__laptop { position: absolute; left: 54px; top: 26px; width: 216px; }
.rec-screens__screen { position: relative; aspect-ratio: 16 / 9; padding: 7px; background: var(--ink); border-radius: 10px 10px 4px 4px; }
.rec-screens__screen img { border-radius: 3px; }
.rec-screens__bar { position: absolute; left: 14px; right: 14px; bottom: 13px; height: 4px; border-radius: 2px; background: rgba(255, 251, 242, .55); }
.rec-screens__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 2px; background: var(--red); }
.rec-screens__bar i::after { content: ""; position: absolute; right: -5px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.rec-screens__base { display: block; height: 16px; margin: 0 -22px; background: var(--paper-3); border: 3px solid var(--ink); border-radius: 2px 2px 9px 9px; }
.rec-screens__post {
  position: absolute; left: 18px; top: 104px; width: 92px; padding: 5px 5px 0;
  background: var(--white); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-6deg);
}
.rec-screens__post img { height: auto; aspect-ratio: 1; border-radius: 3px; }
.rec-screens__likes { display: flex; align-items: center; gap: 5px; height: 18px; }
.rec-screens__likes i { color: var(--red); font-style: normal; font-size: 11px; }
.rec-screens__likes b { flex: 1; height: 4px; border-radius: 2px; background: var(--paper-3); }
.rec-screens__phone {
  position: absolute; left: 232px; top: 56px; width: 78px; aspect-ratio: 9 / 17; padding: 5px;
  background: var(--ink); border-radius: 15px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(5deg);
}
.rec-screens__phone img { border-radius: 10px; }
.rec-screens__side { position: absolute; right: 9px; bottom: 30px; display: grid; gap: 5px; }
.rec-screens__side i { color: var(--white); font-style: normal; font-size: 9px; line-height: 1; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.rec-screens__cap { position: absolute; left: 11px; right: 24px; bottom: 14px; height: 4px; border-radius: 2px; background: var(--white); box-shadow: 0 7px 0 rgba(255, 251, 242, .7); }

@media (max-width: 960px) {
  .rec-pillars { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
}
/* where the box is narrower than the stage: three columns on a small laptop,
   or a small phone */
@media (min-width: 961px) and (max-width: 1150px), (max-width: 380px) {
  .rec-screens { transform: scale(.85); }
}

/* the process as a timeline: three dots on a thick line that fills on scroll
   (--fill, set by main.js), ending on the "Ready to publish" stamp, level
   with the dots. Horizontal; it stands up on a phone. */
.rec-tl {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center;
  margin-top: 48px; padding: 30px 40px;
  background: var(--green-mid); border: var(--border-w) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.rec-tl__title { font: 400 30px/1 var(--font-poster); letter-spacing: -.02em; color: var(--paper); }
.rec-tl__track { margin: 0; padding: 0; list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: start; }
.rec-tl__track::before, .rec-tl__track::after { content: ""; position: absolute; left: 22px; right: 40px; border-radius: 4px; }
.rec-tl__track::before { top: 20px; height: 6px; background: rgba(246, 240, 226, .22); }
.rec-tl__track::after {
  top: 18px; height: 10px; background: var(--gold); border: 2px solid var(--ink);
  transform-origin: left center; transform: scaleX(var(--fill, 1));
}
.rec-tl__step { position: relative; z-index: 1; display: grid; gap: 12px; padding-right: 18px; }
.rec-tl__dot {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); border: 4px solid var(--ink); color: var(--ink);
  transition: background .25s, border-color .25s, color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.rec-tl__dot span { display: none; }
.rec-tl__dot::before { content: "✓"; font: 800 20px var(--font-body); }
.rec-tl__step h4 { font: 800 19px/1.25 var(--font-body); letter-spacing: -.01em; color: var(--paper); }
.rec-tl__step p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.rec-tl__step h4, .rec-tl__step p { transition: opacity .25s; }
/* the end: the hero's stamp, straight, centred on the line */
.rec-tl__end { position: relative; z-index: 1; height: 46px; display: flex; align-items: center; }
.rec-tl__stamp {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 9px; white-space: nowrap;
  background: var(--gold); border: 3px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm);
  font: 800 16px var(--font-body); color: var(--ink);
  transition: opacity .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.rec-tl__stamp i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-mid); border: 2px solid var(--ink); color: var(--paper); font-style: normal; font-size: 13px;
}
/* before the line reaches them (only with scroll effects on) */
.has-scroll-fx .rec-tl__step:not(.is-done) .rec-tl__dot { background: var(--green); border-color: var(--paper); color: var(--paper); }
.has-scroll-fx .rec-tl__step:not(.is-done) .rec-tl__dot::before { content: none; }
.has-scroll-fx .rec-tl__step:not(.is-done) .rec-tl__dot span { display: block; font: 400 18px var(--font-poster); }
.has-scroll-fx .rec-tl__step:not(.is-done) h4, .has-scroll-fx .rec-tl__step:not(.is-done) p { opacity: .5; }
.has-scroll-fx .rec-tl__step.is-done .rec-tl__dot { transform: scale(1.06); }
.has-scroll-fx .rec-tl__stamp { opacity: 0; transform: scale(.6); }
.has-scroll-fx .rec-tl.is-done .rec-tl__stamp { opacity: 1; transform: none; }
.has-scroll-fx .rec-tl__track::after { transform: scaleX(var(--fill, 0)); }

@media (max-width: 960px) {
  .rec-tl { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 520px; margin-inline: auto; padding: 24px 22px; }
  .rec-tl__track { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rec-tl__track::before, .rec-tl__track::after { left: 20px; right: auto; top: 22px; bottom: 24px; width: 6px; height: auto; }
  .rec-tl__track::after, .has-scroll-fx .rec-tl__track::after { left: 18px; width: 10px; transform-origin: center top; transform: scaleY(var(--fill, 1)); }
  .has-scroll-fx .rec-tl__track::after { transform: scaleY(var(--fill, 0)); }
  .rec-tl__step { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; padding: 0; }
}

/* 7 · the producer, option B: chaos in, calm out (Pedro, 21 Oct) */
.more-sec .more-producer { max-width: none; }
.more-sec .more-producer > p { max-width: 40em; margin-inline: auto; }
.more-producer__ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 24px; }
.more-producer__ticks li { display: flex; align-items: center; gap: 12px; font: 800 16px var(--font-body); color: var(--paper); }
.more-producer__ticks li::before {
  content: "✓"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ink); color: var(--ink); font-size: 12px;
}
/* the flow (option B, Pedro 22 Oct): the column of what happens, a line from
   each into the producer, one gold arrow out to the message. main.js draws
   the lines (.more-flow__lines) from where the pieces sit, and floats the
   chips a little. The producer's label hangs under the ring, so the ring's
   centre is what lines up with the column and the card. */
.more-flow {
  position: relative; display: grid; align-items: center; justify-content: center;
  grid-template-columns: 240px 260px 104px 120px 300px;
  grid-template-areas: "in . prod . calm";
  margin-top: 56px; padding-bottom: 36px; text-align: left;
}
.more-flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.more-flow__lines path { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.more-flow__lines path.more-flow__go { stroke: var(--gold); stroke-width: 5; stroke-linejoin: round; opacity: 1; }
.more-flow__in { grid-area: in; position: relative; }
.more-flow__lab {
  position: absolute; left: 0; bottom: calc(100% + 14px); white-space: nowrap;
  font: 800 13px/1.2 var(--font-body); font-stretch: 112%; letter-spacing: .02em; color: var(--paper); opacity: .75;
}
.more-chaos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.more-chip {
  display: flex; padding: 9px 16px; white-space: nowrap; will-change: transform;
  background: var(--white); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  font: 800 14px var(--font-body); color: var(--ink);
}
.more-chip--red { background: #f0b7ab; }
.more-chip--gold { background: var(--gold); }
.more-prod { grid-area: prod; position: relative; }
.more-prod__ring {
  width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow);
}
.more-prod__ring svg { display: block; width: 56px; height: 56px; }
.more-prod b {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap;
  padding: 5px 14px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 800 13px/1.2 var(--font-body); font-stretch: 112%; letter-spacing: .02em;
}
.more-calm {
  grid-area: calm; position: relative; width: 300px; padding: 20px 22px; color: var(--ink);
  background: var(--white); border: var(--border-w) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.more-calm__lab { font: 800 13px/1.2 var(--font-body); font-stretch: 112%; letter-spacing: .02em; color: var(--ink-soft); }
.more-calm__msg { margin-top: 10px; font: 800 20px/1.3 var(--font-body); letter-spacing: -.01em; }
.more-calm__ok {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 14px 6px 6px;
  background: var(--green-light); border: 2px solid var(--ink); border-radius: 999px;
  font: 800 13px/1.2 var(--font-body); font-stretch: 112%; letter-spacing: .02em;
}
.more-calm__ok i {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-mid); border: 2px solid var(--ink); color: var(--paper); font-style: normal; font-size: 10px;
}
/* narrower: it stands up. The chips in two columns, their lines down into
   the producer, then the arrow down to the message */
@media (max-width: 1100px) {
  .more-flow {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 110px auto 96px auto;
    grid-template-areas: "in" "." "prod" "." "calm"; justify-items: center; margin-top: 72px;
  }
  .more-chaos { grid-template-columns: repeat(2, max-content); gap: 14px 16px; justify-content: center; }
  .more-chaos li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }   /* an odd one out sits in the middle */
  .more-flow__lab { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 480px) {
  .more-chip { padding: 8px 12px; font-size: 13px; }
  .more-calm { width: min(300px, 100%); }
  .more-producer__ticks { flex-direction: column; align-items: flex-start; max-width: 320px; margin-inline: auto; }
}
/* the lede rule (.more-sec .more-producer p) also reaches the calm card's text */
.more-sec .more-producer .more-calm p { margin: 0; line-height: 1.3; font-size: inherit; color: var(--ink); }
.more-sec .more-producer .more-calm .more-calm__lab { font: 800 13px/1.2 var(--font-body); font-stretch: 112%; letter-spacing: .02em; color: var(--ink-soft); }
.more-sec .more-producer .more-calm .more-calm__msg { margin-top: 10px; font: 800 20px/1.3 var(--font-body); }

/* --- 7 · More Guys: the three cards, light on the band (Pedro, 22 Oct) ----
   Green-on-green before. Now a light card with the volume knob, the gold card
   with the backup diagram in ink, a light card with the brand book
   (_propuestas/…/sugerencias/1e-more-guys, options B · A · B). Copy unchanged. */
.more-sec .more-feat--light::before { background: var(--white); }
.more-sec .more-feat--gold::before { background: var(--gold); }
.more-sec .more-feat--light .more-feat__copy h3,
.more-sec .more-feat--gold .more-feat__copy h3 { color: var(--ink); }
.more-sec .more-feat--light .more-feat__copy p,
.more-sec .more-feat--gold .more-feat__copy p { color: var(--ink-soft); }
/* the drawings: the knob always on a light ground (its gold scale vanishes on gold) */
.more-sec .more-feat--knob .more-feat__art { background: var(--paper-2); }
.more-sec .more-feat--book .more-feat__art { background: var(--green-light); }
.more-sec .more-feat--knob .more-feat__art,
.more-sec .more-feat--book .more-feat__art { height: 210px; padding: 10px; overflow: hidden; }
.more-sec .more-ilus { display: block; height: 170px; width: auto; max-width: none; }
/* the lead editor and the backup crew, in ink on a white window */
.more-sec .more-feat--gold .more-feat__art { background: var(--white); height: 210px; }  /* same window height as the drawings, so the titles line up */
.more-sec .more-feat--gold .more-tag { color: var(--ink-soft); }
.more-sec .more-feat--gold .more-tag--gold { color: var(--red); }

/* --- 7b · More Guys: the three drawings move (Pedro, 23 Oct) ----------------
   CSS only, no GIFs (draft: _propuestas/…/sugerencias/1f-more-guys-anim). The
   markup is the end state, so without JS or with reduced motion the cards sit
   still, finished. main.js adds .has-anim to .more-feats and .is-on to each
   card while it is on screen; off screen they pause. */
.more-feats.has-anim .kn-needle, .more-feats.has-anim .kn-grip, .more-feats.has-anim svg.kn,
.more-feats.has-anim .ld-lead, .more-feats.has-anim .ld-line, .more-feats.has-anim .ld-b, .more-feats.has-anim .ld-tag,
.more-feats.has-anim svg.bk, .more-feats.has-anim .bk-float { animation-fill-mode: both; animation-play-state: paused; }
.more-feats.has-anim .is-on .kn-needle, .more-feats.has-anim .is-on .kn-grip, .more-feats.has-anim .is-on svg.kn,
.more-feats.has-anim .is-on .ld-lead, .more-feats.has-anim .is-on .ld-line, .more-feats.has-anim .is-on .ld-b, .more-feats.has-anim .is-on .ld-tag,
.more-feats.has-anim .is-on svg.bk, .more-feats.has-anim .is-on .bk-float { animation-play-state: running; }

/* the knob: 0 → 100 with a small tremble, a hold, back down (5.6s loop).
   The needle is drawn at 21.8°; at rest it's turned to 100. */
.more-sec .kn-needle, .more-sec .kn-grip { transform-origin: 450px 500px; transform: rotate(18.2deg); }
.more-feats.has-anim .kn-needle, .more-feats.has-anim .kn-grip { animation-name: kn-turn; animation-duration: 5.6s; animation-timing-function: linear; animation-iteration-count: infinite; }
.more-feats.has-anim svg.kn { animation-name: kn-shake; animation-duration: 5.6s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
@keyframes kn-turn { 0%{transform:rotate(-241.8deg)} 1%{transform:rotate(-241.8deg)} 2%{transform:rotate(-241.8deg)} 3%{transform:rotate(-241.8deg)} 4%{transform:rotate(-241.8deg)} 5%{transform:rotate(-241.8deg)} 6%{transform:rotate(-241.8deg)} 7%{transform:rotate(-242.2deg)} 8%{transform:rotate(-241.0deg)} 9%{transform:rotate(-236.4deg)} 10%{transform:rotate(-235.4deg)} 11%{transform:rotate(-231.6deg)} 12%{transform:rotate(-224.8deg)} 13%{transform:rotate(-219.8deg)} 14%{transform:rotate(-214.4deg)} 15%{transform:rotate(-207.2deg)} 16%{transform:rotate(-200.7deg)} 17%{transform:rotate(-193.7deg)} 18%{transform:rotate(-184.7deg)} 19%{transform:rotate(-176.2deg)} 20%{transform:rotate(-167.7deg)} 21%{transform:rotate(-159.3deg)} 22%{transform:rotate(-150.8deg)} 23%{transform:rotate(-141.9deg)} 24%{transform:rotate(-131.2deg)} 25%{transform:rotate(-120.4deg)} 26%{transform:rotate(-112.5deg)} 27%{transform:rotate(-102.4deg)} 28%{transform:rotate(-92.2deg)} 29%{transform:rotate(-83.7deg)} 30%{transform:rotate(-73.1deg)} 31%{transform:rotate(-64.7deg)} 32%{transform:rotate(-54.7deg)} 33%{transform:rotate(-45.9deg)} 34%{transform:rotate(-38.4deg)} 35%{transform:rotate(-30.1deg)} 36%{transform:rotate(-21.9deg)} 37%{transform:rotate(-15.5deg)} 38%{transform:rotate(-8.1deg)} 39%{transform:rotate(-3.6deg)} 40%{transform:rotate(2.2deg)} 41%{transform:rotate(7.8deg)} 42%{transform:rotate(10.3deg)} 43%{transform:rotate(14.3deg)} 44%{transform:rotate(16.3deg)} 45%{transform:rotate(17.2deg)} 46%{transform:rotate(18.2deg)} 47%{transform:rotate(18.2deg)} 48%{transform:rotate(18.2deg)} 49%{transform:rotate(18.2deg)} 50%{transform:rotate(18.2deg)} 51%{transform:rotate(18.2deg)} 52%{transform:rotate(18.2deg)} 53%{transform:rotate(18.2deg)} 54%{transform:rotate(18.2deg)} 55%{transform:rotate(18.2deg)} 56%{transform:rotate(18.2deg)} 57%{transform:rotate(18.2deg)} 58%{transform:rotate(18.2deg)} 59%{transform:rotate(18.2deg)} 60%{transform:rotate(18.2deg)} 61%{transform:rotate(18.2deg)} 62%{transform:rotate(18.2deg)} 63%{transform:rotate(18.2deg)} 64%{transform:rotate(18.2deg)} 65%{transform:rotate(18.2deg)} 66%{transform:rotate(18.2deg)} 67%{transform:rotate(18.2deg)} 68%{transform:rotate(18.2deg)} 69%{transform:rotate(18.2deg)} 70%{transform:rotate(18.2deg)} 71%{transform:rotate(18.2deg)} 72%{transform:rotate(18.2deg)} 73%{transform:rotate(15.9deg)} 74%{transform:rotate(9.3deg)} 75%{transform:rotate(-1.1deg)} 76%{transform:rotate(-14.6deg)} 77%{transform:rotate(-30.8deg)} 78%{transform:rotate(-49.2deg)} 79%{transform:rotate(-69.2deg)} 80%{transform:rotate(-90.2deg)} 81%{transform:rotate(-111.8deg)} 82%{transform:rotate(-133.4deg)} 83%{transform:rotate(-154.4deg)} 84%{transform:rotate(-174.4deg)} 85%{transform:rotate(-192.8deg)} 86%{transform:rotate(-209.0deg)} 87%{transform:rotate(-222.5deg)} 88%{transform:rotate(-232.9deg)} 89%{transform:rotate(-239.5deg)} 90%{transform:rotate(-241.8deg)} 91%{transform:rotate(-241.8deg)} 92%{transform:rotate(-241.8deg)} 93%{transform:rotate(-241.8deg)} 94%{transform:rotate(-241.8deg)} 95%{transform:rotate(-241.8deg)} 96%{transform:rotate(-241.8deg)} 97%{transform:rotate(-241.8deg)} 98%{transform:rotate(-241.8deg)} 99%{transform:rotate(-241.8deg)} 100%{transform:rotate(-241.8deg)} }
@keyframes kn-shake { 0%,6%,46%,100%{transform:none} 7%{transform:translate(-0.95px,-0.25px)} 8%{transform:translate(-1.04px,-0.24px)} 9%{transform:translate(0.72px,0.64px)} 10%{transform:translate(0.09px,-0.54px)} 11%{transform:translate(-0.95px,-0.69px)} 12%{transform:translate(0.79px,0.74px)} 13%{transform:translate(-0.74px,-0.46px)} 14%{transform:translate(0.56px,0.85px)} 15%{transform:translate(-0.99px,0.25px)} 16%{transform:translate(0.01px,-0.77px)} 17%{transform:translate(-0.99px,1.04px)} 18%{transform:translate(0.11px,-0.48px)} 19%{transform:translate(0.17px,0.92px)} 20%{transform:translate(0.02px,-0.21px)} 21%{transform:translate(-0.17px,-0.81px)} 22%{transform:translate(0.75px,-1.10px)} 23%{transform:translate(0.30px,-0.53px)} 24%{transform:translate(-0.07px,-0.38px)} 25%{transform:translate(-0.73px,-0.21px)} 26%{transform:translate(0.32px,-0.54px)} 27%{transform:translate(0.59px,-0.43px)} 28%{transform:translate(0.97px,-0.96px)} 29%{transform:translate(-0.65px,0.64px)} 30%{transform:translate(-0.63px,-0.41px)} 31%{transform:translate(-0.10px,-1.10px)} 32%{transform:translate(0.95px,1.09px)} 33%{transform:translate(1.10px,-1.16px)} 34%{transform:translate(1.12px,0.66px)} 35%{transform:translate(1.06px,0.29px)} 36%{transform:translate(-0.50px,-0.74px)} 37%{transform:translate(-0.87px,-0.28px)} 38%{transform:translate(-0.40px,-1.18px)} 39%{transform:translate(-0.79px,0.68px)} 40%{transform:translate(-0.50px,-0.97px)} 41%{transform:translate(-0.18px,-0.70px)} 42%{transform:translate(-1.07px,-0.80px)} 43%{transform:translate(-0.84px,-1.10px)} 44%{transform:translate(-0.60px,1.19px)} 45%{transform:translate(0.07px,0.66px)} }

/* the lead editor (Pedro) slides left, a line runs out, four backups pop in
   one by one, then "Backup" (5s loop). The crew is anchored to the window's
   right edge so it never runs out of it. */
.more-sec .more-feat--gold .more-feat__art { position: relative; overflow: hidden; container-type: inline-size; }
.more-sec .ld { position: absolute; inset: 0; }
.more-sec .ld-lead { position: absolute; top: 50%; left: 18%; transform: translate(-50%, -62%); display: grid; justify-items: center; gap: 8px; }
.more-sec .ld-crew { position: absolute; top: calc(50% - 38px); right: 7%; display: flex; }
.more-sec .ld-line { position: absolute; top: calc(50% - 20px); left: calc(18% + 34px); right: calc(7% + 128px); border-top: 4px dashed var(--ink); transform-origin: left center; }
.more-sec .ld-b { position: relative; display: grid; place-items: end center; width: 38px; height: 38px; margin-left: -8px; border-radius: 50%; border: 3px solid var(--ink); background: var(--bg); overflow: hidden; }
.more-sec .ld-b:first-child { margin-left: 0; }
.more-sec .ld-b svg { width: 82%; margin-bottom: -4px; fill: rgba(20, 17, 13, .45); }
.more-sec .ld-tag { position: absolute; top: calc(50% + 12px); right: 7%; width: 128px; text-align: center; }
/* narrower windows (a phone, three cards at ~1024px): the label wraps to two
   lines so it keeps off the window's edge; at the narrowest the bubbles shrink */
@container (max-width: 275px) {
  .more-sec .ld-lead .more-tag { width: min-content; text-align: center; line-height: 1.35; }
}
@container (max-width: 250px) {
  .more-sec .ld-crew { top: calc(50% - 34px); right: 6%; }
  .more-sec .ld-b { width: 30px; height: 30px; margin-left: -7px; border-width: 2.5px; }
  .more-sec .ld-b:first-child { margin-left: 0; }
  .more-sec .ld-line { right: calc(6% + 99px); }
  .more-sec .ld-tag { top: calc(50% + 6px); right: 6%; width: 99px; }
}
.more-feats.has-anim .ld-lead { animation-name: ld-lead; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.more-feats.has-anim .ld-line { animation-name: ld-line; animation-duration: 5s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
.more-feats.has-anim .ld-b { animation-duration: 5s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
.more-feats.has-anim .ld-b--1 { animation-name: ld-b1; }
.more-feats.has-anim .ld-b--2 { animation-name: ld-b2; }
.more-feats.has-anim .ld-b--3 { animation-name: ld-b3; }
.more-feats.has-anim .ld-b--4 { animation-name: ld-b4; }
.more-feats.has-anim .ld-tag { animation-name: ld-tag; animation-duration: 5s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes ld-lead { 0% { left: 50%; opacity: 0; } 3%,8% { left: 50%; opacity: 1; } 17%,90% { left: 18%; opacity: 1; } 96%,100% { left: 18%; opacity: 0; } }
@keyframes ld-line { 0%,17% { transform: scaleX(0); opacity: 1; } 23%,90% { transform: scaleX(1); opacity: 1; } 96%,100% { transform: scaleX(1); opacity: 0; } }
@keyframes ld-b1 { 0%,24% { opacity: 0; transform: scale(0); } 27% { opacity: 1; transform: scale(1.18); } 29%,90% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; transform: scale(1); } }
@keyframes ld-b2 { 0%,31% { opacity: 0; transform: scale(0); } 34% { opacity: 1; transform: scale(1.18); } 36%,90% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; transform: scale(1); } }
@keyframes ld-b3 { 0%,38% { opacity: 0; transform: scale(0); } 41% { opacity: 1; transform: scale(1.18); } 43%,90% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; transform: scale(1); } }
@keyframes ld-b4 { 0%,45% { opacity: 0; transform: scale(0); } 48% { opacity: 1; transform: scale(1.18); } 50%,90% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; transform: scale(1); } }
@keyframes ld-tag { 0%,52% { opacity: 0; transform: translateY(6px); } 57%,90% { opacity: 1; transform: none; } 96%,100% { opacity: 0; } }

/* the brand book: pops in once when it comes on screen, then floats a few px
   up and down. (The float is in the drawing's units: 24 ≈ 4px.) */
.more-feats.has-anim svg.bk { transform-origin: 50% 62%; animation-name: bk-pop; animation-duration: .7s; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.more-feats.has-anim .bk-float { animation-name: bk-float; animation-duration: 3.6s; animation-timing-function: ease-in-out; animation-delay: .7s; animation-iteration-count: infinite; }
@keyframes bk-pop { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes bk-float { 0%,100% { transform: none; } 50% { transform: translateY(-24px); } }

/* 2 · credibility: the real numbers count up one after the other (Pedro, 23 Oct).
   Each lands with a small pop; the width is held so nothing around it shifts. */
.cred__nums dt { font-variant-numeric: tabular-nums; }
.cred__nums dt.is-landed { animation: cred-pop .42s cubic-bezier(.34, 1.56, .64, 1); }
.cred__nums dd { transition: opacity .3s ease; }
.cred.is-counting .cred__nums div:not(.is-on) dd { opacity: .35; }
@keyframes cred-pop { 40% { transform: scale(1.14) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .cred__nums dt.is-landed { animation: none; } }