/* ===========================================================================
   TIYOL — the landing page at /.
   Loaded ONLY by home.html, which deliberately does not load style.css. The
   shared stylesheet dresses eleven other pages, including the signed-in app;
   giving the shop window its own sheet means the look here can move without
   any chance of disturbing /es, /en, /give, /tarjeta, /app or /console.

   Palette is the existing body.sf ink-indigo: #141B34 surface, #4FD8C4 aqua,
   #FFC24D gold. The indigo is a single fade running the whole document,
   lightest at the masthead, deepest at the footer.

   One opaque light object on the entire page: the record card. The written
   record is the defensible half of the product, so it is the only thing
   rendered as paper.
   =========================================================================== */

/* fonts.css is linked from the document head, not @imported: an @import is
   fetched only after this sheet parses, serialising two round trips before
   any text can render. */

:root{
  color-scheme: dark;

  --ind-000:#212B57; --ind-100:#1A2245; --ind-200:#141B34;
  --ind-300:#0E1428; --ind-400:#0A0E20;

  --ink:#F3F0EA; --ink-muted:#A6AFCB;
  /* 4.7:1 on the lightest indigo. The previous #7C87A8 measured 3.8:1 at the
     top of the fade, under AA for the 13px eyebrow and status chip that live
     exactly there. Still a clear step below --ink-muted (6.2:1). */
  --ink-faint:#8E98B4;
  --aqua:#4FD8C4; --aqua-hi:#7FE8D8;
  --gold:#FFC24D; --gold-hi:#FFD489;

  --hair:rgba(243,240,234,.13);
  --hair-strong:rgba(243,240,234,.26);
  --glass:rgba(243,240,234,.045);
  --glass-hi:rgba(243,240,234,.10);

  /* paper — used once, for the record */
  --paper-raised:#FFFDFA;
  --paper-ink:#1C2A2B; --paper-muted:#4A5756; --paper-faint:#7F7160;
  --paper-hair:#E2D6C6; --paper-hair-strong:#CFC3B2;
  --paper-gold:#A8721F; --paper-gold-ink:#6B4A0F;
  --paper-teal:#0D5B62;

  --sans:'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --serif:'Source Serif 4', ui-serif, Georgia, serif;

  --measure:34rem; --container:1180px;
  --r1:10px; --r2:18px; --r3:28px; --r-full:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.3,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ind-200)}
body{
  margin:0; color:var(--ink);
  font:400 19px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100%;
  /* Attachment stays at `scroll`: `fixed` would tie the gradient to the
     viewport and repeat the same light-to-dark inside every screenful instead
     of descending once across the document. */
  background:
    radial-gradient(120% 700px at 78% 0, rgba(79,216,196,.11) 0%, transparent 70%),
    radial-gradient(90% 560px at 6% 160px, rgba(255,194,77,.06) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--ind-000) 0%, var(--ind-100) 22%, var(--ind-200) 48%,
      var(--ind-300) 76%, var(--ind-400) 100%);
  background-repeat:no-repeat;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0; color:var(--ink)}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px}
.measure{max-width:var(--measure)}
/* clip, not hidden: decorative bleed (the glow behind the record card reaches
   outside its column on purpose) must not widen the document, but `hidden`
   here would create a scroll container and silently kill the sticky panel. */
.band{position:relative; padding:clamp(76px,9vw,132px) 0; overflow-x:clip}

.eyebrow{
  font:700 13px/1.4 var(--sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; align-items:center; gap:10px; margin:0 0 20px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); flex:none}
h2.sec{font-size:clamp(31px,4vw,50px); letter-spacing:-.026em; line-height:1.12}

/* ---------------------------------------------------------------------------
   SECTION LAYOUT — the desktop fix.
   Every band below the hero used to be one 34rem column of text sitting inside
   an 1180px container, which on a phone is a well-set page and on a desktop is
   six hundred pixels of dead space down the entire right-hand side. That is why
   this read worse on a large screen than a small one. From 1000px up the head
   and the prose become two columns; anything marked .full still spans both.
   --------------------------------------------------------------------------- */
.secgrid{display:grid; gap:22px}
.secgrid > .full{grid-column:1 / -1}
@media (min-width:1000px){
  .secgrid{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    column-gap:clamp(44px,4.8vw,84px); row-gap:44px; align-items:start;
  }
  .secgrid > .sechead{padding-top:4px}
  .secgrid > .secbody > p + p{margin-top:18px}
  /* the prose column carries the reading measure, not the whole band */
  .secgrid > .secbody{max-width:38rem}
}

/* ================= NAV ================= */
.nav-wrap{position:fixed; inset:14px 0 auto; z-index:60; pointer-events:none}
.nav{
  pointer-events:auto; max-width:var(--container); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 12px 11px 22px; border-radius:var(--r-full);
  background:rgba(14,20,40,.72);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--hair); box-shadow:0 12px 38px -16px rgba(4,7,20,.9);
  transition:transform .6s var(--ease);
}
.nav a{text-decoration:none}
.navlinks{display:flex; align-items:center; gap:6px}
.navlink{
  font:400 15px/1 var(--sans); color:var(--ink-muted);
  padding:10px 13px; border-radius:var(--r-full); transition:color .25s, background .25s;
}
.navlink:hover{color:var(--ink); background:var(--glass-hi)}
.navcta{
  font:700 15px/1 var(--sans); color:#0B1020; background:var(--aqua);
  padding:12px 20px; border-radius:var(--r-full);
  transition:transform .3s var(--spring), background .25s, box-shadow .25s;
  box-shadow:0 6px 20px -8px rgba(79,216,196,.7);
}
.navcta:hover{background:var(--aqua-hi); transform:translateY(-1px)}
/* Sign in is a returning customer's only way back in. It is never a casualty of
   a narrow viewport — the section anchors collapse first, and the two labels
   that can shorten do. */
.navlink.signin{color:var(--ink); font-weight:700}
.short{display:none}
@media (max-width:960px){ .navlink.hideable{display:none} }
@media (max-width:560px){
  .nav{padding:9px 9px 9px 16px; gap:8px}
  .navlinks{gap:2px}
  .navlink{padding:9px 8px; font-size:14px}
  .navcta{padding:11px 14px; font-size:14px}
  .full-label{display:none} .short{display:inline}
}
@media (max-width:360px){ .navlink.signin{padding-inline:6px} }

/* ================= WORDMARK ================= */
.wm{font:700 clamp(23px,2.4vw,27px)/1 var(--sans); letter-spacing:-.012em;
  display:inline-flex; align-items:baseline; white-space:nowrap}
.wm svg{height:1em; width:auto; display:inline-block; vertical-align:baseline}
.wmi{margin-right:.012em}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
/* cool dot = the person, warm dot = the institution. The two-dot logic is the
   part of the brand that survives every palette, so it is never restyled. */
.wm .d1{fill:var(--aqua-hi)} .wm .d2{fill:var(--gold)}
.brand{display:inline-flex; align-items:baseline; gap:12px}
.say{font:700 10px/1 var(--sans); letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase}
@media (max-width:600px){ .say{display:none} }

/* ================= HERO ================= */
.hero{position:relative; padding:clamp(118px,13vh,158px) 0 clamp(56px,6vw,86px); overflow:hidden}
#field{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  /* The hero clips its overflow, so the arcs used to terminate on a hard
     horizontal line at the section boundary — 252 lit pixels were sitting in
     the last four device rows. Fading the canvas to FULLY transparent exactly
     at that edge lets the rings dissolve into the page instead of being cut by
     it. Mobile keeps a later, gentler falloff: its hero is tall, the cut was
     never visible, and an aggressive fade there would just dim the field. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.45) 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.45) 84%,transparent 100%);
}
@media (min-width:761px){
  /* The desktop hero is shorter and wider, so the clip line sat closer to the
     brightest part of the field. Longer runway, more stops — a two-stop ramp
     showed a faint band of its own. */
  #field{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.74) 64%,rgba(0,0,0,.34) 82%,rgba(0,0,0,.12) 92%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.74) 64%,rgba(0,0,0,.34) 82%,rgba(0,0,0,.12) 92%,transparent 100%);
  }
}
.hero .container{position:relative; z-index:1}

.hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:38px; align-items:center}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:clamp(38px,4.4vw,64px)}
}
@media (min-width:1240px){
  /* More room for the panel and a larger headline once the width is genuinely
     there — the desktop view should not just be the phone view stretched. */
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr); gap:76px}
}
.hero-copy{max-width:36rem}

/* One chip replaces a separate eyebrow AND the trailing "live today" note:
   the same two facts in a quarter of the vertical space they were taking
   between the headline and the proof. */
.statuschip{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 13px;
  border:1px solid var(--hair); border-radius:var(--r-full); background:var(--glass);
  font:700 12.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 24px;
}
.statuschip i{width:8px; height:8px; border-radius:50%; background:var(--aqua); flex:none; animation:pulse 5s infinite}
.statuschip b{color:var(--ink); letter-spacing:.1em}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(79,216,196,.55)}
  70%{box-shadow:0 0 0 9px rgba(79,216,196,0)}
  100%{box-shadow:0 0 0 0 rgba(79,216,196,0)}}

/* No ch cap and no balancing: the break is authored with a <br>, and letting
   text-wrap:balance re-flow it produced a stray third line. */
h1.display{font-size:clamp(35px,4.3vw,56px); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 20px; max-width:none; text-wrap:normal}
@media (min-width:1240px){ h1.display{font-size:62px} }
/* The gold rule now means one thing only — a human needs to check this — and
   spending it on decoration here was blunting the place it carries meaning. */
h1.display em{font-style:normal; color:var(--aqua)}
.lead{font-size:clamp(18px,1.2vw,20px); color:var(--ink-muted); max-width:33rem; line-height:1.6}
.kicker{margin-top:15px; font-size:16.5px; line-height:1.55; color:var(--ink-faint); max-width:31rem}
.kicker b{color:var(--ink)}

.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:10px; min-height:56px; padding:0 26px;
  border-radius:var(--r-full); text-decoration:none;
  font:700 18px/1 var(--sans); border:2px solid transparent;
  transition:transform .3s var(--spring), background .25s, box-shadow .3s var(--ease)}
.btn.primary{background:var(--aqua); color:#0B1020; box-shadow:0 10px 30px -12px rgba(79,216,196,.8)}
.btn.primary:hover{background:var(--aqua-hi); transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(79,216,196,.85)}
.btn.primary .arw{transition:transform .35s var(--spring)}
.btn.primary:hover .arw{transform:translateX(4px)}
.btn.quiet{border-color:var(--hair-strong); color:var(--ink)}
.btn.quiet:hover{background:var(--glass-hi); transform:translateY(-2px)}

/* ================= THE CALL ================= */
.call{
  border:1px solid var(--hair-strong); border-radius:var(--r3);
  background:rgba(22,29,60,.72);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 54px 110px -56px rgba(3,6,18,.98), inset 0 1px 0 rgba(243,240,234,.08);
  overflow:hidden;
}
.call-head{display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--hair); flex-wrap:wrap}
.call-who{font:700 14.5px/1.3 var(--sans); color:var(--ink);
  display:flex; align-items:center; gap:9px; min-width:0}
.call-who i{width:8px; height:8px; border-radius:50%; background:var(--aqua); flex:none; animation:pulse 5s infinite}
.call-meta{margin-left:auto; display:flex; align-items:center; gap:14px;
  font:700 12px/1 var(--sans); letter-spacing:.06em; color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.call-meta b{color:var(--aqua)}

.call-body{padding:18px; display:flex; flex-direction:column; gap:15px; min-height:340px}
@media (min-width:1240px){ .call-body{padding:22px; gap:18px; min-height:404px} }

.turn{opacity:0; transform:translateY(9px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.turn.in{opacity:1; transform:none}
.turn .lbl{font:700 10.5px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:7px}
.turn .said{font-size:16.5px; line-height:1.45; color:var(--ink)}
/* The interpreted line is marked by an AQUA rule: aqua is the machine doing its
   job. Gold is reserved, on this whole page, for the one thing a person has to
   resolve themselves. */
.turn .heard{
  margin-top:8px; padding-left:15px; border-left:2px solid var(--aqua);
  font-size:16.5px; line-height:1.45; color:var(--aqua-hi);
  opacity:0; transform:translateX(-5px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.turn .heard.in{opacity:1; transform:none}
.turn .heard .tag{display:block; font:700 10px/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px}
@media (min-width:1240px){ .turn .said,.turn .heard{font-size:17.5px} }

/* the moment the record earns its keep */
.flagcard{border:1px solid var(--gold); border-left-width:3px; border-radius:var(--r1);
  background:rgba(255,194,77,.10); padding:13px 15px}
.flagcard .k{font:700 10.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:9px}
.flagcard .pair{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:9px}
.flagcard .v{font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:.05em;
  color:var(--ink); font-variant-numeric:tabular-nums}
.flagcard .v small{display:block; font:700 9.5px/1 var(--sans); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px}
.flagcard .v b{color:var(--gold-hi)}
.flagcard .ne{color:var(--gold); font-weight:700; font-size:15px}
.flagcard p{font-size:14.5px; line-height:1.45; color:var(--gold-hi)}

.call-foot{border-top:1px solid var(--hair); padding:12px 18px; display:flex;
  align-items:center; gap:9px; font:700 11.5px/1.3 var(--sans);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); flex-wrap:wrap}
.call-foot .ok{color:var(--aqua)}

/* ================= THE LIVE DEMO =================
   The panel above is a scripted call. This turns it into a real one: hold the
   button, speak, and the same Deepgram -> interpreter -> Cartesia chain a real
   call uses runs on your own voice. Hidden until JS confirms the browser can
   actually record, so it never advertises something the device cannot do. */
.call-demo{border-top:1px solid var(--hair); padding:16px 18px; display:flex;
  flex-direction:column; gap:11px; align-items:flex-start}
.mic{
  display:inline-flex; align-items:center; gap:11px; min-height:54px; padding:0 24px;
  border-radius:var(--r-full); border:2px solid var(--aqua); background:transparent;
  color:var(--ink); font:700 17px/1 var(--sans); cursor:pointer;
  transition:background .25s, transform .3s var(--spring), border-color .25s;
  -webkit-user-select:none; user-select:none; touch-action:none;
}
.mic:hover{background:rgba(79,216,196,.12)}
.mic .dot{width:11px; height:11px; border-radius:50%; background:var(--aqua); flex:none}
.mic[data-state="rec"]{background:rgba(255,194,77,.16); border-color:var(--gold)}
.mic[data-state="rec"] .dot{background:var(--gold);
  /* scaled by the live mic level, set from JS */
  transform:scale(var(--level,1)); transition:transform .08s linear}
.mic[data-state="busy"]{border-color:var(--hair-strong); cursor:progress; opacity:.75}
.mic[disabled]{opacity:.5; cursor:not-allowed}
.demo-hint{font-size:14.5px; line-height:1.45; color:var(--ink-faint); margin:0; max-width:36rem}
.demo-status{font-size:14.5px; line-height:1.45; color:var(--aqua-hi); margin:0; min-height:1.2em}
.demo-status[data-kind="err"]{color:var(--gold-hi)}

/* a turn the visitor actually spoke, marked so it is never mistaken for the
   scripted example above it */
.turn.live{border-left:2px solid var(--gold); padding-left:13px; margin-left:-15px}
.turn.live .lbl{color:var(--gold)}
@media (max-width:760px){ .call-demo{padding:14px 16px} .mic{width:100%; justify-content:center} }

@media (max-width:760px){
  /* A blurred backdrop on a tall panel is one of the most expensive things a
     mobile browser can be asked to composite. The nav pill keeps its blur —
     it is small and fixed; this one trades it for a solid fill. */
  .call{backdrop-filter:none; -webkit-backdrop-filter:none; background:#161D3C}
  .call-body{padding:16px; gap:13px; min-height:320px}
  .turn .said,.turn .heard{font-size:16px}
}

/* ================= FIGURES ================= */
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px;
  background:var(--hair); border:1px solid var(--hair); border-radius:var(--r2);
  overflow:hidden; margin-top:8px}
.fig{background:var(--glass); padding:28px 24px; display:flex; flex-direction:column; gap:10px}
.fig .n{font-family:var(--serif); font-weight:600; font-size:clamp(35px,3.6vw,48px);
  line-height:1; letter-spacing:-.03em; color:var(--aqua); font-variant-numeric:tabular-nums}
.fig .w{font-size:16px; line-height:1.5; color:var(--ink-muted)}
.fig .src{font-size:12.5px; color:var(--ink-faint); margin-top:auto; padding-top:6px}

/* ================= STICKY STEPS ================= */
.sticky-wrap{display:grid; grid-template-columns:1fr; gap:44px}
@media (min-width:900px){
  .sticky-wrap{grid-template-columns:1fr 1fr; gap:clamp(46px,5vw,70px); align-items:start}
  .sticky-side{position:sticky; top:118px}
}
.steps{display:flex; flex-direction:column; gap:14px}
.step{border:1px solid var(--hair); border-radius:var(--r2); padding:24px 24px 24px 22px;
  background:var(--glass); display:grid; grid-template-columns:auto 1fr; gap:20px; opacity:1;
  transition:border-color .9s var(--ease), background .9s var(--ease), opacity 1.1s var(--ease)}
@media (min-width:900px){ .step{opacity:.44} }
.step.on{opacity:1; border-color:var(--hair-strong); background:var(--glass-hi)}
.step .num{width:38px; height:38px; border-radius:var(--r-full); flex:none; display:grid; place-items:center;
  font:700 15px/1 var(--sans); color:var(--gold); border:1px solid rgba(255,194,77,.45);
  font-variant-numeric:tabular-nums; transition:background .9s var(--ease), color .9s var(--ease)}
.step.on .num{background:var(--gold); color:#0B1020; border-color:var(--gold)}
.step h3{font-size:21px; letter-spacing:-.015em; margin:0 0 8px}
.step p{font-size:16.5px; line-height:1.55; color:var(--ink-muted)}

.phone{width:100%; max-width:320px; aspect-ratio:9/17.5; margin-inline:auto;
  border-radius:34px; border:1px solid var(--hair-strong);
  background:linear-gradient(178deg,#161E3C 0%,#0A0E20 100%);
  padding:20px 18px; display:flex; flex-direction:column; gap:14px; position:relative;
  box-shadow:0 46px 100px -52px rgba(0,0,0,.95), inset 0 1px 0 rgba(243,240,234,.12)}
.phone::before{content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:74px; height:5px; border-radius:9px; background:var(--hair-strong)}
.phone-screen{flex:1; display:flex; flex-direction:column; gap:12px; padding-top:16px; justify-content:center}
.pstate{display:none; flex-direction:column; gap:12px; animation:rise 1s var(--ease)}
.pstate.on{display:flex}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.plabel{font-size:13px; color:var(--ink-muted); text-align:center; line-height:1.45}
.pcap{font:700 11px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center}
.pnum{font:700 25px/1.2 var(--sans); color:var(--aqua-hi); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; text-align:center}
.pbubble{border-radius:14px; padding:11px 14px; font-size:14px; line-height:1.45;
  background:var(--glass-hi); color:var(--ink); border:1px solid var(--hair)}
.pbubble.mine{background:rgba(79,216,196,.16); border-color:rgba(79,216,196,.4)}
.pbubble.flag{background:rgba(255,194,77,.14); border-color:rgba(255,194,77,.5)}
.pbubble small{display:block; font-size:11px; color:var(--ink-faint); margin-bottom:4px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.pring{width:76px; height:76px; border-radius:50%; margin:0 auto; display:grid; place-items:center;
  border:2px solid var(--aqua); color:var(--aqua-hi); font-size:29px; animation:ring 4s infinite var(--ease)}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(79,216,196,.4)}50%{box-shadow:0 0 0 16px rgba(79,216,196,0)}}

/* ================= THE RECORD ================= */
.split{display:grid; grid-template-columns:1fr; gap:40px; align-items:start}
@media (min-width:940px){ .split{grid-template-columns:1fr 1.05fr; gap:clamp(44px,4.6vw,64px)} }
.prose p{margin:0 0 18px; color:var(--ink-muted); line-height:1.62}
.prose p strong{color:var(--ink)}
.prose p:last-child{margin-bottom:0}

.record-holder{position:relative}
.record-holder::before{
  content:""; position:absolute; inset:-14% -8%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 40%, rgba(243,240,234,.14) 0%, transparent 70%);
}
.record{
  position:relative; z-index:1;
  color:var(--paper-ink); background:var(--paper-raised);
  border:1px solid var(--paper-hair); border-radius:var(--r2); overflow:hidden;
  box-shadow:0 44px 90px -46px rgba(0,0,0,.85);
}
.record .stripe{background:var(--paper-teal); color:#FAF6F1; padding:9px 20px;
  font:700 11.5px/1.4 var(--sans); letter-spacing:.15em; text-transform:uppercase}
.record .body{padding:24px 22px 26px}
.record .when{font-size:13.5px; color:var(--paper-faint); font-variant-numeric:tabular-nums}
.record h3{font-size:23px; letter-spacing:-.018em; margin:8px 0 4px; color:var(--paper-ink)}
.record .who{font-size:15.5px; color:var(--paper-muted); margin-bottom:20px}
.record .sec{font:700 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-faint); padding-top:16px; border-top:1px solid var(--paper-hair); margin-bottom:12px}
.record ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.record li{font-size:16px; line-height:1.5; color:var(--paper-muted)}
.record li b{color:var(--paper-ink); font-weight:700}

.attention{border:1px solid var(--paper-gold); border-left-width:4px; border-radius:var(--r1);
  background:#FFF6E5; padding:16px 18px}
.attention .k{font:700 11.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper-gold-ink); margin-bottom:12px; display:block}
.vs{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin-bottom:12px}
.vs .card{border:1px solid var(--paper-hair-strong); border-radius:var(--r1); padding:10px 12px;
  background:var(--paper-raised); text-align:center}
.vs .card small{display:block; font:700 10px/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-faint); margin-bottom:7px}
.vs .val{font-family:var(--serif); font-weight:600; font-size:25px; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--paper-ink)}
.vs .val .bad{color:var(--paper-gold-ink); position:relative}
.vs .val .bad::after{content:""; position:absolute; left:-2px; right:-2px; bottom:-3px; height:2px;
  background:var(--paper-gold); transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease) .7s}
.attention.fired .vs .val .bad::after{transform:scaleX(1)}
.vs .mark{width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--paper-gold); color:var(--paper-gold-ink); font-size:14px; font-weight:700;
  opacity:0; transform:scale(.6);
  transition:opacity .9s var(--spring) 1.3s, transform .9s var(--spring) 1.3s}
.attention.fired .vs .mark{opacity:1; transform:none}
.attention .exp{font-size:15px; line-height:1.5; color:var(--paper-gold-ink)}

/* ================= LANGUAGES ================= */
.mosaic{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; margin:8px 0 0}
.mosaic button{
  font-family:'Atkinson Hyperlegible','Noto Sans','Noto Sans SC','Noto Sans Devanagari','Noto Sans Arabic','Noto Sans Bengali',system-ui,sans-serif;
  font-weight:700; line-height:1.06; letter-spacing:-.015em;
  background:none; border:0; padding:2px 0; cursor:pointer; color:var(--ink-faint);
  transition:color .3s var(--ease), transform .4s var(--spring)}
.mosaic button:hover{color:var(--ink); transform:translateY(-2px)}
.mosaic .t1{font-size:clamp(30px,5.4vw,54px)}
.mosaic .t2{font-size:clamp(22px,3.8vw,37px)}
.mosaic .t3{font-size:clamp(17px,2.9vw,26px)}
.mosaic .live{color:var(--aqua)}
.mosaic .live.warm{color:var(--gold)}
.mosaic button[aria-pressed="true"]{color:var(--ink); text-decoration:underline;
  text-underline-offset:.17em; text-decoration-thickness:.055em; text-decoration-color:var(--gold)}
.sayline{margin:30px 0 0; min-height:1.5em;
  font:700 14px/1.5 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}
.sayline b{color:var(--aqua-hi); letter-spacing:.16em}

.ledger{margin-top:8px; border:1px solid var(--hair); border-radius:var(--r2); overflow:hidden}
.ledger div{display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:19px 24px; border-bottom:1px solid var(--hair); flex-wrap:wrap; background:var(--glass)}
.ledger div:last-child{border-bottom:0}
.ledger b{font-size:18px; font-weight:700}
.pill{font:700 11.5px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  padding:8px 14px; border-radius:var(--r-full); border:1px solid}
.pill.yes{color:var(--aqua-hi); border-color:rgba(79,216,196,.55); background:rgba(79,216,196,.14)}
.pill.no{color:var(--ink-faint); border-color:var(--hair-strong)}

/* ================= STATUS ================= */
.spec{margin-top:8px; border:1px solid var(--hair); border-radius:var(--r2); overflow:hidden}
.spec div{display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:17px 22px; border-bottom:1px solid var(--hair); flex-wrap:wrap; background:var(--glass)}
.spec div:last-child{border-bottom:0}
.spec b{font-size:17px}
.spec .v{font-size:16px; color:var(--ink-muted); text-align:right}
.spec .v.yes{color:var(--aqua); font-weight:700}
.pagelinks{margin:0; padding:0; list-style:none; display:grid; gap:12px}
@media (min-width:760px){ .pagelinks{grid-template-columns:1fr 1fr; gap:12px 34px} }
.pagelinks li{font-size:16.5px; line-height:1.5; color:var(--ink-muted)}
.pagelinks a{color:var(--aqua); text-decoration-color:rgba(79,216,196,.45); text-underline-offset:.2em}
.pagelinks a:hover{color:var(--aqua-hi)}

/* ================= FOOTER ================= */
.foot{padding:64px 0 52px; border-top:1px solid var(--hair)}
.foot .rule{height:1px; background:var(--hair); margin:26px 0 22px}
.foot .fnav{display:flex; flex-wrap:wrap; gap:8px 26px; margin-bottom:22px}
.foot a{color:var(--ink-muted); text-decoration:none; font-size:16px; transition:color .25s}
.foot a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:.2em}
.foot p{font-size:14.5px; color:var(--ink-faint); max-width:44rem; line-height:1.6}
.foot .wm{font-size:26px}

/* ================= REVEAL =================
   Visible by DEFAULT. The hidden state exists only once JS has proved it runs
   (html.js-rv, set before first paint). A landing page that needs
   IntersectionObserver in order to become visible is one blocked script, one
   background tab or one extension away from rendering as a blank sheet. */
.js-rv .rv{opacity:0; transform:translateY(22px); transition:opacity 1.3s var(--ease), transform 1.3s var(--ease)}
.js-rv .rv.in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1 !important; transform:none !important}
  .step{opacity:1 !important}
}


/* ================= ON SCROLL-DRIVEN REVEALS =================
   Tried and deliberately NOT shipped. `animation-timeline: view()` is the right
   modern answer for the reveals below the fold — no JS, runs on the compositor,
   immune to the background-tab starvation that has broken this page's reveals
   before — and the browser reports support for it here.

   It is not in because its failure mode is an invisible hero, which this page
   has shipped twice, and it could not be verified: every preview surface
   available to me reports document.visibilityState 'hidden', which freezes
   document.timeline at 0 and leaves a time-driven animation pinned to its first
   keyframe. That is indistinguishable from the real bug, so there was no way to
   tell a working implementation from a broken one.

   Two things a future attempt needs to get right, both real:
     - Above the fold nothing scrolls, so an element on screen at scroll 0 sits
       at the START of its view() range and never advances. The first screen
       needs a load animation; only content below it should ride the scroller.
     - A frozen or absent timeline pins the element at 0% no matter what
       fill-mode is set, so the reveal needs a JS backstop regardless — which is
       most of what the observer path already does.
   Verify on a real browser before enabling. */

/* ================= CROSS-DOCUMENT VIEW TRANSITIONS =================
   /, /es, /en, /organizations and /privacidad are one site, and hard-cutting
   between them made them feel like five. The masthead is named so it is treated
   as the same object across the navigation rather than cross-faded with the
   page under it. Ignored entirely where unsupported. */
@view-transition{ navigation:auto; }
.brand .wm{ view-transition-name:wordmark; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.32s; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
}