/* ═══════════════════════════════════════════════════════════
   COVERAGE FAN  —  "One link in. Six assets out."
   Home page section, sits between #problem and #core-features.

   Everything is namespaced cf- and scoped under .cf-section,
   matching the site's per-section convention (wf-, cfv-, bfy-,
   ml-, uc-). Two names collided before namespacing: .hero (4
   rules in styles.css) and @keyframes blink.

   Palette follows the site rather than fighting it. Every large
   surface here is a 145deg three-stop pastel, the same family as
   the seven .*-visual feature cards. Dark appears only where the
   site already uses it: small objects (the hub tile, a tooltip)
   and screens that are genuinely screens.
   ═══════════════════════════════════════════════════════════ */

/* full-bleed band: the section spans the viewport, the content
   inside it holds the site's usual measure */
.cf-section{
  width:100%;
  display:flex;
  justify-content:center;
}

.cf-card{
  --cf-ink:     rgb(28,28,28);
  --cf-ink-2:   rgb(84,84,84);
  --cf-ink-3:   rgba(28,28,28,.42);
  --cf-hair:    rgba(28,28,28,.08);
  --cf-accent:  #5B5EF0;
  --cf-accent-d:#3C3FD4;
  --cf-mono:    'JetBrains Mono', monospace;

  position:relative;
  width:100%;
  max-width:none;
  border-radius:0;
  background:linear-gradient(145deg,#EFEAFB 0%,#E5ECF7 52%,#F4ECE0 100%);
  color:var(--cf-ink);
  padding:104px 28px 112px;
  overflow:hidden;
}

/* Edge fades, a soft bloom where the row of tiles sits, and a
   whisper of grain so the large flat gradient does not band.

   The fades dissolve the band into the page instead of meeting it
   on a hard seam. They live on .cf-room (z-index 0) rather than on
   .cf-card's own pseudo elements, because a ::after on the card
   paints above .cf-inner and would wash over the closing line.

   The transparent end is written as rgba(246,246,246,0) rather
   than `transparent`: the keyword interpolates through
   rgba(0,0,0,0) and leaves a grey bloom across the ramp.
   246,246,246 is the real body colour (note --bg-primary is
   #f5f5f5, which the body does not actually use). */
.cf-room{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cf-room::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgb(246,246,246) 0%, rgba(246,246,246,0) 140px),
    linear-gradient(to top,    rgb(246,246,246) 0%, rgba(246,246,246,0) 140px),
    radial-gradient(52% 26% at 50% 4%,   rgba(255,255,255,.55), transparent 68%),
    radial-gradient(66% 40% at 50% 104%, rgba(255,255,255,.34), transparent 72%);
}
.cf-room::after{
  content:'';position:absolute;inset:0;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cf-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto}

/* ── header ────────────────────────────────────────────────── */
.cf-head{text-align:center;max-width:760px;margin:0 auto}

/* mirrors the site's .section-badge: pale pill, white rim, soft lift */
.cf-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px 7px 12px;border-radius:100px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0px 2.29px 2.29px 0px rgba(28,28,28,.02),
    0px 10px 10px 0px rgba(28,28,28,.06);
  font-family:var(--cf-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cf-ink-2);
}
.cf-badge i{
  width:6px;height:6px;border-radius:50%;background:var(--cf-accent);flex:none;
  animation:cf-ping 2.8s ease-out infinite;
}
@keyframes cf-ping{
  0%  {box-shadow:0 0 0 0 rgba(91,94,240,.42)}
  70% {box-shadow:0 0 0 10px rgba(91,94,240,0)}
  100%{box-shadow:0 0 0 0 rgba(91,94,240,0)}
}

/* same ink ramp the site uses on .section-title */
.cf-title{
  margin-top:30px;font-family:'Instrument Sans',sans-serif;
  font-size:clamp(38px,5.4vw,70px);
  font-weight:500;letter-spacing:-.042em;line-height:1.0;
  background-image:linear-gradient(0deg,rgb(18,18,18) 0%,rgba(18,18,18,.72) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* the accent lands once, here, and ties to the curves below */
.cf-title .cf-em{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.004em;
  background-image:linear-gradient(0deg,var(--cf-accent-d) 0%,#8F91F0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.cf-sub{margin:26px auto 0;max-width:584px;font-size:18px;line-height:1.62;color:var(--cf-ink-2)}
.cf-sub strong{color:var(--cf-ink);font-weight:600}

.cf-meta{
  margin:26px auto 0;font-family:var(--cf-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cf-ink-3);
}
.cf-meta span{color:rgba(28,28,28,.62)}

/* ═══════════ THE FAN ══════════════════════════════════════ */
/* Placed as percentages of a 1080x620 box that the SVG shares, so
   the whole drawing rescales as one piece at any width. */
.cf-fan{position:relative;width:100%;max-width:1080px;margin:46px auto 0;aspect-ratio:1080/620}

/* light pooling under the row so the tiles have something to sit
   on and their shadows have somewhere to fall */
.cf-fan::before{
  content:'';position:absolute;left:50%;top:71%;transform:translate(-50%,-50%);
  width:104%;height:56%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 46%, transparent 74%);
  filter:blur(34px);
}

.cf-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cf-curve{
  fill:none;stroke-width:1.25;stroke-linecap:round;stroke:url(#cf-ln);
  stroke-dasharray:760;stroke-dashoffset:760;
  animation:cf-draw 1.6s cubic-bezier(.55,0,.3,1) forwards;
}
.cf-stem{
  stroke:rgba(28,28,28,.22);stroke-width:1.25;
  stroke-dasharray:30;stroke-dashoffset:30;animation:cf-draw .5s ease-out .15s forwards;
}
@keyframes cf-draw{to{stroke-dashoffset:0}}

.cf-motes{
  position:absolute;left:0;top:0;width:1080px;height:620px;
  transform-origin:0 0;pointer-events:none;z-index:3;
}
.cf-mote{
  position:absolute;left:0;top:0;width:4.5px;height:4.5px;margin:-2.25px 0 0 -2.25px;
  border-radius:50%;background:var(--cf-accent);
  box-shadow:0 0 9px 2px rgba(91,94,240,.5);
  offset-rotate:0deg;offset-distance:0%;opacity:0;
  animation:cf-flow 4.8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cf-flow{
  0%  {offset-distance:0%;  opacity:0;   transform:scale(.4)}
  12% {opacity:1;           transform:scale(1)}
  86% {opacity:1;           transform:scale(1)}
  100%{offset-distance:100%;opacity:0;   transform:scale(.4)}
}

/* ── input + run ───────────────────────────────────────────── */
/* The two inputs are one thing, so they share one surface with the
   plus at the junction. Two separate pills with a gap read as two
   unrelated chips rather than "a URL and a prompt go in together". */
.cf-source{
  position:absolute;left:50%;top:6.45%;transform:translate(-50%,-50%);
  z-index:5;opacity:0;
  display:inline-flex;align-items:center;
  background:#fff;border:1px solid rgba(28,28,28,.07);border-radius:100px;
  box-shadow:
    0px 2.29px 2.29px 0px rgba(28,28,28,.02),
    0px 12px 22px -8px rgba(40,36,80,.18);
  animation:cf-pop .8s cubic-bezier(.2,.9,.25,1) .1s forwards;
}
/* 18px on the outer edges, 14px either side of the plus, so the plus
   sits in even air between two text runs and reads as "A + B" */
.cf-pill{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:11px 14px 11px 18px;
  color:var(--cf-ink);font-family:var(--cf-mono);font-size:12.5px;letter-spacing:.01em;
}
/* the prompt reads as something a person typed, not as a field value */
.cf-pill--prompt{
  font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--cf-ink-2);
  padding:11px 18px 11px 14px;
}

.cf-plus{
  flex:none;padding:0;
  font-family:var(--cf-mono);font-size:14px;line-height:1;
  color:rgba(28,28,28,.38);
}

.cf-hub{
  position:absolute;left:50%;top:19.03%;transform:translate(-50%,-50%);
  z-index:5;opacity:0;animation:cf-pop .85s cubic-bezier(.2,.9,.25,1) .3s forwards;
}
@keyframes cf-pop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.74)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}
/* a dark object on a pastel ground, exactly how the site already
   treats .cfv-app-sidebar inside .script-visual */
/* kept centred explicitly: .cf-hub sizes to its content, so anything
   added beside or under the tile would otherwise push it off the point
   where the six curves converge. */
.cf-hub-tile{
  position:relative;width:88px;height:88px;border-radius:24px;overflow:hidden;
  margin:0 auto;
  background:linear-gradient(168deg,#2A2A33 0%,#141418 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 6px rgba(28,28,28,.1),
    0 22px 40px -16px rgba(40,36,80,.5);
}
.cf-hub-tile::after{
  content:'';position:absolute;inset:-34px;border-radius:54px;z-index:-1;
  background:radial-gradient(circle,rgba(91,94,240,.2),transparent 68%);
}
/* white-icon.png is mostly transparent padding: the mark is only 38%
   of the file width, so the box must be ~2.6x the glyph. That makes
   the image bigger than its tile, and an oversized grid item is NOT
   centred by place-items:center — the browser clamps overflow
   alignment to start and pins it top-left. Centre it explicitly. */
.cf-hub-tile img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:116px;height:116px;object-fit:contain;
}

/* ── the six assets ────────────────────────────────────────── */
.cf-node{
  position:absolute;transform:translate(-50%,-50%);
  width:158px;text-align:center;z-index:4;opacity:0;
  animation:cf-pop .85s cubic-bezier(.2,.9,.25,1) forwards;
}
.cf-node:hover,.cf-node:focus-within{z-index:40}

/* ── the panel ─────────────────────────────────────────────── */
/* Material still does the work, inverted for a light ground: the
   top edge catches light, the lower edge defines itself with ink. */
.cf-tile{
  position:relative;width:128px;height:128px;margin:0 auto;border-radius:30px;
  display:grid;place-items:center;cursor:default;isolation:isolate;
  background:linear-gradient(178deg,#FFFFFF 0%,#FCFBFD 46%,#F4F3F8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(28,28,28,.04),
    0 10px 20px -8px rgba(48,44,92,.14),
    0 30px 52px -26px rgba(48,44,92,.3);
  transition:transform .4s cubic-bezier(.2,.9,.28,1),box-shadow .4s ease;
}
/* gradient hairline: white where the key light hits, ink below */
.cf-tile::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;z-index:3;
  background:linear-gradient(162deg,
    rgba(255,255,255,1) 0%, rgba(28,28,28,.05) 38%,
    rgba(28,28,28,.09) 70%, rgba(28,28,28,.12) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:background .4s ease;
}
/* the specular: a soft sheen off the top-left corner */
.cf-tile::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(76% 58% at 20% 0%,rgba(255,255,255,.9),transparent 60%);
}

.cf-node:hover .cf-tile,.cf-node:focus-within .cf-tile{
  transform:translateY(-10px) scale(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(28,28,28,.04),
    0 18px 30px -10px rgba(48,44,92,.2),
    0 44px 70px -28px rgba(48,44,92,.4),
    0 0 0 1px rgba(91,94,240,.22);
}
.cf-node:hover .cf-tile::before,.cf-node:focus-within .cf-tile::before{
  background:linear-gradient(162deg,
    rgba(255,255,255,1) 0%, rgba(91,94,240,.22) 40%,
    rgba(91,94,240,.3) 72%, rgba(91,94,240,.4) 100%);
}
.cf-tile:focus-visible{outline:2px solid var(--cf-accent);outline-offset:5px}

/* the beat when a mote lands */
.cf-tile.cf-hit{animation:cf-hit .75s ease-out}
@keyframes cf-hit{
  0%  {box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(28,28,28,.04),0 10px 20px -8px rgba(48,44,92,.14),0 30px 52px -26px rgba(48,44,92,.3),0 0 0 0 rgba(91,94,240,0)}
  20% {box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(28,28,28,.04),0 10px 20px -8px rgba(48,44,92,.14),0 30px 52px -26px rgba(48,44,92,.3),0 0 0 4px rgba(91,94,240,.22)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(28,28,28,.04),0 10px 20px -8px rgba(48,44,92,.14),0 30px 52px -26px rgba(48,44,92,.3),0 0 0 0 rgba(91,94,240,0)}
}

.cf-thumb{position:relative;z-index:1;transform:scale(var(--cf-ts,1));pointer-events:none}
.cf-thumb i{display:block;border-radius:2px}

.cf-label{
  display:block;margin-top:18px;font-size:15px;font-weight:500;
  letter-spacing:-.016em;color:var(--cf-ink-2);transition:color .3s ease;
}
.cf-node:hover .cf-label,.cf-node:focus-within .cf-label{color:var(--cf-ink)}

.cf-soon{
  position:absolute;top:-8px;right:4px;z-index:6;
  font-family:var(--cf-mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;
  padding:3.5px 8px;border-radius:7px;color:#fff;background:var(--cf-ink);
  box-shadow:0 6px 14px -4px rgba(28,28,28,.4);
}

/* ── hover detail ──────────────────────────────────────────── */
/* dark, like the site's own .idp-f-tip */
.cf-tip{
  position:absolute;left:50%;top:calc(100% + 14px);width:236px;
  transform:translateX(-50%) translateY(7px);
  opacity:0;pointer-events:none;
  padding:13px 15px;border-radius:14px;text-align:left;
  background:#1c1c1c;
  box-shadow:0 20px 40px -14px rgba(28,28,28,.45);
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.9,.3,1);
}
.cf-tip::after{
  content:'';position:absolute;left:50%;top:-4px;width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);background:#1c1c1c;border-radius:1px;
}
.cf-tip b{
  display:block;font-family:var(--cf-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#A9ABFF;margin-bottom:7px;font-weight:500;
}
.cf-tip p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.82)}

/* the outermost two open inward so they stay on the fan */
.cf-node--l .cf-tip{left:0;transform:translateX(0) translateY(7px)}
.cf-node--l .cf-tip::after{left:60px}
.cf-node--r .cf-tip{left:auto;right:0;transform:translateX(0) translateY(7px)}
.cf-node--r .cf-tip::after{left:auto;right:56px}

.cf-node:hover .cf-tip,.cf-node:focus-within .cf-tip{opacity:1;transform:translateX(-50%) translateY(0)}
.cf-node--l:hover .cf-tip,.cf-node--l:focus-within .cf-tip,
.cf-node--r:hover .cf-tip,.cf-node--r:focus-within .cf-tip{transform:translateX(0) translateY(0)}

/* ═══════════ THE SIX MINIATURES ═══════════════════════════ */
/* Paper is paper, screens are screens. The only saturated pixels
   are the few each artefact actually owns. The set is paused by
   .cf-rest whenever the fan scrolls out of view. */
.cf-fan.cf-rest .cf-thumb *{animation-play-state:paused}

.cf-paper{
  background:#FFFFFF;border-radius:8px;position:relative;
  box-shadow:0 1px 2px rgba(28,28,28,.05),0 8px 16px -6px rgba(48,44,92,.22);
}
.cf-screen{
  background:#0B0C11;border-radius:8px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(28,28,28,.08),0 10px 20px -6px rgba(48,44,92,.34);
}

/* 1 · blog post — cover block, then the copy writes itself in */
.cf-tb-post .cf-paper{width:88px;height:70px;padding:9px;overflow:hidden}
.cf-tb-post .cf-cover{height:20px;border-radius:4px;margin-bottom:8px;
  background:linear-gradient(120deg,#8E92D8,#B3B7EA 58%,#D6D2F0)}
.cf-tb-post i{transform-origin:left center;animation:cf-write 6.2s ease-in-out infinite}
.cf-tb-post .cf-h{height:5px;width:56%;background:#23212C;margin-bottom:6px}
.cf-tb-post .cf-l{height:3px;background:#DFDDE7;margin-bottom:4.5px}
.cf-tb-post .cf-w1{width:100%;animation-delay:.3s}
.cf-tb-post .cf-w2{width:86%; animation-delay:.6s}
.cf-tb-post .cf-w3{width:46%; animation-delay:.9s}
@keyframes cf-write{
  0%{transform:scaleX(0)}10%{transform:scaleX(1)}
  86%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}
}
.cf-tb-post .cf-caret{
  position:absolute;left:49px;bottom:11px;width:3.5px;height:8px;border-radius:1px;
  background:var(--cf-accent);animation:cf-blink 1.05s steps(2) infinite;
}
@keyframes cf-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* 2 · help center doc — the section picker steps down ------- */
.cf-tb-doc .cf-paper{width:88px;height:70px;display:flex;overflow:hidden}
.cf-tb-doc .cf-side{position:relative;width:27px;padding:11px 0 0 9px;background:#F1F0F5;
  border-right:1px solid #E5E4EB;border-radius:8px 0 0 8px}
.cf-tb-doc .cf-side i{height:3px;width:13px;background:#CBC9D4;margin-bottom:9px}
.cf-tb-doc .cf-pick{position:absolute;left:4px;top:10px;width:2.5px;height:6px;border-radius:2px;
  background:var(--cf-accent);animation:cf-pick 5.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cf-pick{
  0%,26%  {transform:translateY(0)}
  33%,59% {transform:translateY(12px)}
  66%,92% {transform:translateY(24px)}
  100%    {transform:translateY(0)}
}
.cf-tb-doc .cf-main{flex:1;padding:11px 9px 0;animation:cf-swap 5.6s ease-in-out infinite}
.cf-tb-doc .cf-main .cf-h{height:5px;width:68%;background:#23212C;margin-bottom:7px}
.cf-tb-doc .cf-main i.cf-l{height:3px;background:#E3E1E9;margin-bottom:5px}
@keyframes cf-swap{0%,22%{opacity:1}29%{opacity:.3}36%,58%{opacity:1}65%{opacity:.3}72%,100%{opacity:1}}

/* 3 · demo video — graded footage, the one rich frame ------- */
.cf-tb-video .cf-screen{width:88px;height:54px}
.cf-tb-video .cf-grade{position:absolute;inset:0;
  background:linear-gradient(145deg,#12303A 0%,#1B2036 48%,#3A2A24 100%)}
.cf-tb-video .cf-blob{position:absolute;border-radius:50%;filter:blur(10px)}
.cf-tb-video .cf-b1{width:44px;height:34px;background:rgba(255,178,120,.55);left:4px;top:2px;
  animation:cf-drift 10s ease-in-out infinite}
.cf-tb-video .cf-b2{width:38px;height:30px;background:rgba(96,196,214,.5);right:2px;bottom:0;
  animation:cf-drift 10s ease-in-out infinite reverse}
@keyframes cf-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(13px,6px)}}
.cf-tb-video .cf-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:0;height:0;border-left:13px solid rgba(255,255,255,.96);
  border-top:8.5px solid transparent;border-bottom:8.5px solid transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));animation:cf-beat 2.8s ease-in-out infinite}
@keyframes cf-beat{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%    {transform:translate(-50%,-50%) scale(1.1)}
}
.cf-tb-video .cf-bar{position:absolute;left:8px;right:8px;bottom:7px;height:2.5px;border-radius:2px;background:rgba(255,255,255,.22)}
.cf-tb-video .cf-bar i{position:absolute;inset:0 auto 0 0;border-radius:2px;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.75);animation:cf-scrub 5.2s linear infinite}
@keyframes cf-scrub{0%{width:6%}100%{width:100%}}

/* 4 · interactive demo — one brand button, one cursor ------ */
.cf-tb-int .cf-paper{width:88px;height:64px;overflow:hidden}
.cf-tb-int .cf-bar{height:13px;background:#F1F0F5;border-bottom:1px solid #E5E4EB;border-radius:8px 8px 0 0}
.cf-tb-int .cf-l{height:3.5px;background:#E5E3EB;margin:8px 10px 0}
.cf-tb-int .cf-l.cf-s{width:50%}
.cf-tb-int .cf-btn{position:absolute;right:11px;bottom:10px;width:30px;height:13px;border-radius:4px;
  background:var(--cf-accent);box-shadow:0 2px 8px rgba(91,94,240,.45);
  animation:cf-press 4.6s ease-in-out infinite;transform-origin:center}
@keyframes cf-press{0%,58%{transform:scale(1)}64%{transform:scale(.89)}72%,100%{transform:scale(1)}}
.cf-tb-int .cf-ring{position:absolute;right:11px;bottom:10px;width:30px;height:13px;border-radius:4px;
  border:1.5px solid var(--cf-accent);opacity:0;animation:cf-ripple 4.6s ease-out infinite}
@keyframes cf-ripple{0%,60%{transform:scale(1);opacity:0}66%{opacity:.8}88%,100%{transform:scale(2.1);opacity:0}}
.cf-tb-int .cf-cur{position:absolute;width:13px;height:13px;animation:cf-reach 4.6s cubic-bezier(.5,.05,.3,1) infinite}
@keyframes cf-reach{
  0%,6%   {transform:translate(70px,17px)}
  46%,68% {transform:translate(64px,46px)}
  92%,100%{transform:translate(70px,17px)}
}

/* 5 · pdf guide — paper, and one crimson chip -------------- */
.cf-tb-pdf{width:66px;height:76px}
.cf-tb-pdf .cf-paper{position:absolute;width:54px;height:72px;padding:15px 9px 0}
.cf-tb-pdf .cf-back{left:10px;top:2px;background:#F3F2F6;animation:cf-shuffle 5.4s ease-in-out infinite}
@keyframes cf-shuffle{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(9px,-4px) rotate(5deg)}}
.cf-tb-pdf .cf-front{left:2px;top:4px;animation:cf-bob 5.4s ease-in-out infinite}
@keyframes cf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cf-tb-pdf .cf-front .cf-h{height:4.5px;width:54%;background:#23212C;margin-bottom:6px}
.cf-tb-pdf .cf-front i.cf-l{height:3px;background:#E5E3EB;margin-bottom:4.5px}
.cf-tb-pdf .cf-fold{position:absolute;right:0;top:0;border-width:0 13px 13px 0;border-style:solid;
  border-color:transparent #E2E0E8 transparent transparent;border-radius:0 8px 0 0}
.cf-tb-pdf .cf-chip{position:absolute;left:9px;bottom:8px;font-family:var(--cf-mono);font-size:6px;
  font-weight:500;letter-spacing:.1em;color:#fff;background:#B3322B;padding:2px 4px;border-radius:3px}

/* 6 · vertical cut — a graded feed scrolling by ------------ */
.cf-tb-vert .cf-screen{width:48px;height:78px;border-radius:10px}
.cf-tb-vert .cf-feed{position:absolute;inset:0;animation:cf-feed 7.5s linear infinite}
.cf-tb-vert .cf-feed i{height:39px;margin-bottom:4px;border-radius:0}
.cf-tb-vert .cf-feed i:nth-child(odd) {background:linear-gradient(160deg,#1D3A46,#0D1B24)}
.cf-tb-vert .cf-feed i:nth-child(even){background:linear-gradient(160deg,#39303E,#161018)}
@keyframes cf-feed{0%{transform:translateY(0)}100%{transform:translateY(-86px)}}
.cf-tb-vert .cf-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:0;height:0;border-left:10px solid rgba(255,255,255,.95);
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.cf-tb-vert .cf-cap{position:absolute;left:6px;right:6px;bottom:8px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.72);animation:cf-cap 3.6s ease-in-out infinite}
@keyframes cf-cap{0%,100%{width:calc(100% - 12px)}50%{width:56%}}

/* ── closing ───────────────────────────────────────────────── */
/* the six panels open downward out of the fan box, so the closing
   line has to clear them */
.cf-close{
  margin:128px auto 0;text-align:center;max-width:680px;
  opacity:0;animation:cf-rise .9s ease-out 1.9s forwards;
}
.cf-close p{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:30px;
  line-height:1.3;letter-spacing:-.014em;color:rgb(28,28,28);
}

.cf-rise{opacity:0;animation:cf-rise .85s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes cf-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ═══════════ RESPONSIVE ═══════════════════════════════════ */
@media (max-width:1040px){
  .cf-card{padding:88px 22px 96px}
  .cf-node{width:132px}
  .cf-tile{width:108px;height:108px;border-radius:26px;--cf-ts:.82}
  .cf-label{font-size:13.5px;margin-top:15px}
  .cf-tip{width:210px}
  .cf-hub-tile{width:76px;height:76px;border-radius:21px}
  .cf-hub-tile img{width:100px;height:100px}
}

/* A fan this wide stops working on a phone, so stack it.
   `(hover: none)` matters as much as the width here: the detail panels are
   revealed on hover, so on a touch device above 880px they were copy the
   user could never reach. Any device whose primary input cannot hover gets
   the stacked rows, where the same text is plain body copy. A touch laptop
   or an iPad with a trackpad reports hover:hover and keeps the fan. */
@media (max-width:880px), (hover: none){
  .cf-card{padding:72px 18px 80px}
  .cf-fan{
    aspect-ratio:auto;max-width:470px;margin-top:40px;
    display:flex;flex-direction:column;gap:14px;
  }
  .cf-fan::before{display:none}
  /* .cf-motes is a 1080px-wide absolute layer; hide the wrapper too,
     not just the dots, so it cannot push the page sideways */
  .cf-lines,.cf-motes,.cf-mote{display:none}

  .cf-source,.cf-hub{position:static;transform:none;opacity:1;animation:none;text-align:center}
  /* the pair is ~457px wide, so it has to stack here. Kept as one
     surface with the plus between the rows, and align-self stops the
     fan's column stretching it to full width. */
  .cf-source{
    flex-direction:column;align-self:center;
    margin:0 auto 6px;border-radius:22px;max-width:100%;
  }
  .cf-pill,.cf-pill--prompt{padding:10px 16px}
  .cf-plus{padding:2px 0 6px}
  .cf-hub{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:16px}
  /* margin:0 resets the desktop auto-centring: on a flex row an auto
     margin absorbs free space and would push the tile off its caption */
  .cf-hub-tile{width:56px;height:56px;border-radius:17px;margin:0}
  .cf-hub-tile img{width:74px;height:74px}
  
  /* tile left spanning both rows, label above its own description.
     As flex siblings the label and copy fought over the same row. */
  .cf-node{
    position:static;transform:none;width:auto;text-align:left;
    display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;
    align-items:start;padding:15px;border-radius:19px;
    background:rgba(255,255,255,.62);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0px 10px 18px -12px rgba(48,44,92,.3);
    animation:cf-rise .7s cubic-bezier(.2,.8,.25,1) forwards;
  }
  .cf-tile{grid-row:1/3;width:84px;height:84px;border-radius:24px;margin:0;--cf-ts:.63}
  .cf-soon{top:-8px;left:50%;right:auto;transform:translateX(-50%)}
  .cf-label{grid-column:2;margin-top:0;font-size:15.5px;align-self:end;color:var(--cf-ink)}

  /* no hover on touch, so the detail is just body copy.
     .cf-node--l/--r must be reset by name: they are more specific
     than a bare .cf-tip and keep their translateX otherwise. */
  .cf-tip,
  .cf-node--l .cf-tip,
  .cf-node--r .cf-tip{
    grid-column:2;align-self:start;
    position:static;width:auto;opacity:1;transform:none;pointer-events:auto;
    margin:0;padding:0;background:transparent;border:0;box-shadow:none;
    top:auto;right:auto;left:auto;
  }
  .cf-tip::after{display:none}
  .cf-tip b{display:none}
  .cf-tip p{font-size:13px;color:var(--cf-ink-2)}

  .cf-close{margin-top:64px}
  .cf-close p{font-size:25px}
}

/* ── reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cf-section *,.cf-section *::before,.cf-section *::after{
    animation:none!important;transition-duration:.01ms!important;
  }
  .cf-source,.cf-hub,.cf-node,.cf-close,.cf-rise{opacity:1!important}
  .cf-source,.cf-hub{transform:translate(-50%,-50%)!important}
  .cf-curve,.cf-stem{stroke-dashoffset:0!important}
  .cf-motes{display:none}
}
/* must track the stacked-layout condition above: in that layout .cf-source
   and .cf-hub are position:static, so the centring transform the main
   reduced-motion block re-applies would shove them off to the left */
@media (prefers-reduced-motion:reduce) and (max-width:880px),
       (prefers-reduced-motion:reduce) and (hover: none){
  .cf-source,.cf-hub{transform:none!important}
}