/* ============================================================
   MOODBASE — shared stylesheet for every page on moodbase.site
   Figma: 5Dxt5700XgD6cYpef7ausY
   No build step. Loaded by index.html and every sub-page.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --dark:#141414;
  --black:#000;
  --white:#fff;
  --accent:#C5D611;
  --accent-deep:#A3B40E;
  --accent-ink:#1A1F00;
  --bg:#F3F4F1;
  --bg1:#E8E8E3;
  --line:#E7E7E4;
  --line-dark:#353630;
  --grey:#78786D;
  --grey-2:#818181;
  --highlight:hsl(65 100% 25%);   /* inline links in body copy */

  --wrap:1224px;
  --wrap-wide:1632px;
  --stage:85%;              /* hero frame + CTA + floating nav share this */

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --r-2xl:40px;

  --nav-h:56px;

  --h1: clamp(38px, 5.2vw, 72px);
  --h2: clamp(30px, 3.1vw, 44px);
  --h3: clamp(26px, 2.5vw, 36px);
  --h4: clamp(17px, 1.5vw, 20px);
  --p1: clamp(15px, 1.05vw, 16px);

  --sect-pad: clamp(64px, 6.5vw, 100px);
  --gutter: clamp(20px, 4vw, 48px);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-nav: cubic-bezier(.22,1,.36,1); /* softer, for the navbar morph */
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--white);
  color:var(--dark);
  font-family:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--p1);
  line-height:24px;
  letter-spacing:-0.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-weight:400;line-height:1;letter-spacing:-0.01em;margin:0;
}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.stage{width:var(--stage);max-width:var(--wrap-wide);margin-inline:auto}
.section{padding-block:var(--sect-pad)}
.center{text-align:center}
.muted{color:var(--grey)}
.lead{font-size:var(--p1);line-height:24px;letter-spacing:-0.02em}
.note{font-size:12px;line-height:18px;color:var(--dark);letter-spacing:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:12px;top:12px}

.eyebrow{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--dark);
  font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;
  text-transform:uppercase;padding:4px 8px;border-radius:6px;
}
/* Same badge on a dark ground — the changelog's date stamps. The brand accent
   stays reserved for section eyebrows; a date is information, not a heading. */
.eyebrow-dark{background:var(--dark);color:#fff}
.sec-head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.sec-head .lead{max-width:64ch}

/* ============================================================
   3. Buttons — the Cluely treatment
   .btn-lime  : primary, 40px
   .btn-ink   : secondary (nav), 36px, same layering in dark
   .btn-ghost : tertiary, 36px, borderless with a sliding arrow
   Markup: <a class="btn btn-lime"><span class="btn-bg"></span>
           <span class="btn-hover"></span><span class="btn-glow">
           <span></span><span></span><span></span></span>
           <span class="btn-noise"></span><span class="btn-rim"></span>
           <span class="btn-label">…</span></a>
   ============================================================ */
.btn{
  appearance:none;position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 18px;border-radius:8px;border:none;background:transparent;
  font-size:14px;font-weight:500;letter-spacing:-0.01em;line-height:1;
  text-decoration:none;cursor:pointer;user-select:none;white-space:nowrap;
  transition:transform 120ms var(--ease), box-shadow 200ms ease;
}
.btn *,.btn *::before,.btn *::after{box-sizing:border-box}
.btn-bg,.btn-hover,.btn-glow,.btn-noise,.btn-rim{position:absolute;border-radius:7px;pointer-events:none}
.btn-bg{inset:0;z-index:0;background-blend-mode:overlay;overflow:hidden;transition:opacity 300ms ease-in-out}
.btn-hover{inset:0;z-index:1;background-blend-mode:overlay;opacity:0;overflow:hidden;transition:opacity 300ms var(--ease)}
.btn-glow{inset:-1px;z-index:2;overflow:hidden;opacity:.85}
.btn-glow span{position:absolute;border-radius:100%;opacity:.38;mix-blend-mode:lighten;filter:blur(14px)}
.btn-glow span:nth-child(1){top:-30px;right:4px;width:55px;height:55px}
.btn-glow span:nth-child(2){top:2px;right:6px;width:50px;height:22px}
.btn-glow span:nth-child(3){bottom:-25px;left:-12px;width:55px;height:55px}
.btn-noise{
  inset:0;z-index:3;opacity:.24;mix-blend-mode:overlay;background-size:80px 80px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.btn-rim{
  inset:0;z-index:4;padding:1px;opacity:.5;
  background:linear-gradient(177deg, rgba(255,255,255,.75) 8%, rgba(255,255,255,0) 85%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.btn-label{position:relative;z-index:10;display:inline-flex;align-items:center;gap:8px}
.btn-label img,.btn-label svg{width:20px;height:20px;flex-shrink:0}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:9px;filter:blur(.4px);pointer-events:none}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Primary — lime */
.btn-lime{color:var(--accent-ink);text-transform:uppercase;border-radius:12px;
  box-shadow:
    rgba(74,84,0,.65) -1px -1px 4px inset,
    rgba(150,164,90,.32) 0 8px 16px -4px,
    rgba(0,0,0,.25) 0 2px 4px,
    rgba(255,255,255,.35) -.5px -.5px 1px inset;
}
.btn-lime::before{border-radius:13px;background:radial-gradient(115% 115% at 10% 15%, rgba(232,247,130,.85) 15%, var(--accent-deep) 100%)}
.btn-lime .btn-bg{background:
  radial-gradient(98% 98% at 65% 82%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 100%),
  radial-gradient(86% 86% at 10% 17%, rgb(197,214,17) 0%, rgb(176,194,20) 100%);}
.btn-lime .btn-hover{background:
  radial-gradient(98% 98% at 65% 82%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%),
  radial-gradient(86% 86% at 10% 17%, rgb(155,171,10) 0%, rgb(197,214,17) 100%);}
.btn-lime .btn-bg,.btn-lime .btn-hover,.btn-lime .btn-noise,.btn-lime .btn-rim,.btn-lime .btn-glow{border-radius:11px}
.btn-lime .btn-glow span{background:#F4FF9C}
.btn-lime .btn-label{text-shadow:0 1px 1px rgba(255,255,255,.28)}

/* Secondary — ink, 36px, used in the navbar */
.btn-ink{
  height:36px;padding:0 12px;border-radius:10px;color:#fff;
  box-shadow:
    rgba(0,0,0,.55) -1px -1px 4px inset,
    rgba(20,20,20,.3) 0 6px 14px -4px,
    rgba(0,0,0,.22) 0 2px 4px,
    rgba(255,255,255,.16) -.5px -.5px 1px inset;
}
.btn-ink::before{border-radius:11px;background:radial-gradient(115% 115% at 10% 15%, rgba(92,92,92,.9) 15%, rgb(10,10,10) 100%)}
.btn-ink .btn-bg,.btn-ink .btn-hover,.btn-ink .btn-noise,.btn-ink .btn-rim,.btn-ink .btn-glow{border-radius:9px}
.btn-ink .btn-bg{background:
  radial-gradient(98% 98% at 65% 82%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%),
  radial-gradient(86% 86% at 10% 17%, rgb(38,38,38) 0%, rgb(17,17,17) 100%);}
.btn-ink .btn-hover{background:
  radial-gradient(98% 98% at 65% 82%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%),
  radial-gradient(86% 86% at 10% 17%, rgb(56,56,56) 0%, rgb(26,26,26) 100%);}
.btn-ink .btn-glow span{background:#8C8C8C;opacity:.2}
.btn-ink .btn-rim{opacity:.28}

/* Tertiary — ghost, 36px, arrow slides on hover */
.btn-ghost{
  height:36px;padding:0 12px;border-radius:10px;background:#fff;
  color:var(--dark);font-weight:400;box-shadow:none;
  transition:background-color .2s ease, transform 120ms var(--ease);
}
.btn-ghost .btn-label span{text-decoration:underline;text-underline-offset:3px}
.btn-ghost svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.btn-ghost:hover{background:var(--bg1)}
.btn-ghost:hover svg{transform:translateX(4px)}

@media (hover:hover){
  .btn:hover:not(:disabled){transform:translateY(-1px)}
  .btn:hover:not(:disabled) .btn-hover{opacity:1}
  .btn-lime:hover:not(:disabled){box-shadow:
    rgba(74,84,0,.75) -1px -1px 5px inset,
    rgba(150,164,90,.45) 0 12px 24px -6px,
    rgba(0,0,0,.3) 0 3px 6px,
    rgba(255,255,255,.45) -.5px -.5px 1px inset;}
}

/* ============================================================
   4. Navbar — a full-width rail whose INNER pill morphs on scroll
   Two elements, not one: transitioning `width` between 100% and a px value
   snaps, and `max-width:none -> 1632px` does not interpolate at all. The rail
   stays put; the pill animates max-width / background / padding / radius,
   which are all cheap, continuous properties.
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:center;
  padding:0 24px;
  pointer-events:none;                 /* the rail itself is not clickable */
  transition:padding-top .5s var(--ease-nav);
}
.nav.floating{padding-top:10px}

.nav-inner{
  pointer-events:auto;
  position:relative;
  width:100%;
  max-width:4000px;                    /* a length, so it can interpolate */
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:10px 10px;
  border:1px solid transparent;
  border-radius:var(--r-lg);
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  box-shadow:0 0 0 0 rgba(0,0,0,0);
  will-change:max-width,background-color,padding,border-radius;
  transition:
    max-width       .5s var(--ease-nav),
    padding         .5s var(--ease-nav),
    border-radius   .5s var(--ease-nav),
    background-color .38s ease,
    border-color    .38s ease,
    box-shadow      .38s ease,
    backdrop-filter .38s ease;
}
.nav.floating .nav-inner{
  max-width:var(--wrap);               /* 1224px — the site content width */
  padding:10px 10px 10px 16px;
  background:rgba(0,0,0,.7);
  border-color:var(--dark);
  border-radius:var(--r-lg);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}

.nav-logo{display:flex;align-items:center;width:200px;flex-shrink:0}
.nav-logo img{height:18px;width:auto;transition:filter .38s ease}
.nav.floating .nav-logo img{filter:brightness(0) invert(1)}

/* Figma 342:1164 — a nav link hovers like a BUTTON, not like a link.
   The underline it replaces drew a 1px line under a word floating in space;
   the pill gives the pointer something the size of a control to land on, and
   it is the same shape in both nav states, which the underline was not.
   ⚠ The gap drops to 24px because each link now carries 10px of its own side
   padding — 40px plus padding reads as four separate islands. */
.nav-links{display:flex;align-items:center;gap:24px;font-size:14px;line-height:18px;letter-spacing:0}
.nav-links a{
  position:relative;
  padding:6px 10px;border-radius:8px;
  color:var(--dark);
  background:transparent;
  transition:color .38s ease, background-color .18s ease, transform .12s var(--ease);
}
.nav.floating .nav-links a{color:#fff}
/* the lime "current" marker only reads against the dark floating pill */
.nav.floating .nav-links a.current{color:var(--accent)}
.nav-links a:hover{background:rgba(20,20,20,.07)}
/* ⚠ On the floating pill the ground is already dark, so the hover has to go
   LIGHTER. Darkening it there is invisible — the same rule cannot serve both
   states, which is why there are two. */
.nav.floating .nav-links a:hover{background:rgba(255,255,255,.14)}
/* The click: a press, not a flash. 1px down and a slightly firmer ground is
   what a physical button does, and it lands inside the 120ms the pointer is
   actually held. `transform` rather than a colour change alone so it is still
   legible to somebody who cannot see the 7% difference. */
.nav-links a:active{transform:translateY(1px);background:rgba(20,20,20,.12)}
.nav.floating .nav-links a:active{background:rgba(255,255,255,.22)}
@media (prefers-reduced-motion:reduce){
  .nav-links a{transition:color .38s ease, background-color .18s ease}
  .nav-links a:active{transform:none}
}
.nav-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.nav-end{width:200px;display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-shrink:0}
.nav-toggle{
  display:none;width:36px;height:36px;border-radius:10px;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);border:1px solid rgba(20,20,20,.08);
  transition:background-color .38s ease, border-color .38s ease;
}
.nav-toggle svg{width:22px;height:22px;stroke:var(--dark);transition:stroke .38s ease}
.nav.floating .nav-toggle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
.nav.floating .nav-toggle svg{stroke:#fff}

.nav-panel{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 18px 42px rgba(20,20,20,.16);padding:8px;
}
.nav-panel a{display:block;padding:12px 14px;border-radius:8px;font-size:16px}
.nav-panel a:hover{background:var(--bg)}
.nav.open .nav-panel{display:block}

/* ============================================================
   5. Image placeholder — the real file takes over by filename
   ============================================================ */
.ph{position:relative;overflow:hidden;background:var(--bg1)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ph .ph-label{display:none}
.ph.missing{background:repeating-linear-gradient(135deg,#ECECE6 0 14px,#E4E4DC 14px 28px);display:grid;place-items:center}
.ph.missing img{display:none}
.ph.missing .ph-label{
  display:block;font-size:12px;line-height:16px;font-weight:500;letter-spacing:0;
  text-transform:uppercase;color:var(--grey);
  background:rgba(255,255,255,.82);border:1px solid var(--line);
  padding:6px 10px;border-radius:8px;text-align:center;max-width:80%;
}

/* ============================================================
   6. Hero — z-stack is: bg (1) · frame (2) · blur band (3)
   ============================================================ */
.hero{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(40px,4.7vw,72px);
  padding-top:var(--nav-h);
  padding-bottom:0;
}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-bg::after{content:"";position:absolute;inset:0;background:rgba(162,242,193,.1);mix-blend-mode:overlay}
.hero-tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,129,255,.1), rgba(0,112,240,0) 60%);
  mix-blend-mode:multiply;
}
.hero.no-bg{background:linear-gradient(180deg,#BFE3F7 0%,#DCEEF4 42%,#EAF0E2 72%,#F6F6F0 100%)}

.hero-promo{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;text-align:center;max-width:800px;width:100%;
  padding-inline:var(--gutter);
  margin-top:clamp(32px,4.7vw,72px);
}
.hero-title-group{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.hero-cta-group{display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-logotype{height:14px;width:auto}

.hero-stage{position:relative;z-index:2;width:100%;display:flex;justify-content:center}
.hero-frame{
  width:var(--stage);max-width:var(--wrap-wide);
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-lg);padding:12px;
}
.hero-frame .ph{border-radius:var(--r-sm);aspect-ratio:1608/802}

/* Progressive blur band. Each layer blurs a little harder and is masked to
   a lower slice, so the blur ramps up instead of switching on. */
.hero-blur{
  position:absolute;left:0;right:0;bottom:0;height:200px;z-index:3;pointer-events:none;
}
.hero-blur .layer{position:absolute;inset:0}
.hero-blur .layer:nth-child(1){backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  -webkit-mask:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%);mask:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%)}
.hero-blur .layer:nth-child(2){backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  -webkit-mask:linear-gradient(to bottom,transparent 20%,#000 40%,#000 100%);mask:linear-gradient(to bottom,transparent 20%,#000 40%,#000 100%)}
.hero-blur .layer:nth-child(3){backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  -webkit-mask:linear-gradient(to bottom,transparent 42%,#000 62%,#000 100%);mask:linear-gradient(to bottom,transparent 42%,#000 62%,#000 100%)}
.hero-blur .layer:nth-child(4){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  -webkit-mask:linear-gradient(to bottom,transparent 64%,#000 84%,#000 100%);mask:linear-gradient(to bottom,transparent 64%,#000 84%,#000 100%)}
.hero-blur .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 69.6%, rgba(255,255,255,.95) 85.5%, #fff 100%);
}

/* ============================================================
   7. Collect from anywhere
   ============================================================ */
.collect{background:var(--white);padding-top:clamp(72px,8vw,140px)}
/* generic stacked-section layout — used by every centred section on every
   page. It was previously scoped to four homepage classes, which silently
   broke the credits FAQ. Keep it generic. */
.inner{display:flex;flex-direction:column;gap:clamp(40px,4.5vw,60px);align-items:center}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4.2vw,80px);width:100%}
.fcard{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.fcard .ph{width:100%;aspect-ratio:354/200;border:1px solid var(--line);border-radius:var(--r-md)}
.fcard.dark-shot .ph{background:#080808}
.fcard-text{display:flex;flex-direction:column;gap:12px}

/* Indicators — on card hover the source icons shuffle left-to-right, as if
   handing the image along the arrow into Moodbase. Sequential delay, then a
   pause before the loop repeats. Works for one source icon or four. */
.indicators{display:flex;align-items:center;gap:8px;margin-top:auto}
.ind{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:var(--bg1);overflow:hidden}
.ind img{width:100%;height:100%;object-fit:cover}
.ind.plain{background:none;border-radius:0}
.ind.plain svg{width:24px;height:24px}
.ind-group{display:flex;align-items:center;gap:4px}
.ind-arrow{width:12px;height:12px;flex-shrink:0;opacity:.5;transition:opacity .3s ease}
.fcard:hover .ind-arrow{opacity:1}

/* every pushable icon; --i is its index, set inline in the markup */
.ind-push{transition:transform .3s var(--ease)}
.fcard:hover .ind-push{animation:ind-nudge 2.4s var(--ease) infinite;animation-delay:calc(var(--i,0) * .12s)}
.fcard:hover .ind-dest{animation:ind-land 2.4s var(--ease) infinite;animation-delay:.5s}

/* 0–25% of the cycle is the movement; the rest is the pause before looping */
@keyframes ind-nudge{
  0%   {transform:translateX(0)}
  10%  {transform:translateX(7px)}
  25%  {transform:translateX(0)}
  100% {transform:translateX(0)}
}
@keyframes ind-land{
  0%   {transform:scale(1)}
  8%   {transform:scale(1.18)}
  22%  {transform:scale(1)}
  100% {transform:scale(1)}
}

/* ============================================================
   8. Analyze automatically
   ============================================================ */
.analyze{background:linear-gradient(to bottom,#fff 0%,var(--bg) 30%,var(--bg) 100%)}
.promo-row{display:grid;grid-template-columns:1fr 32px 1fr;align-items:stretch;gap:16px;width:100%}
.promo-card{background:#fff;border-radius:var(--r-xl);padding:16px;display:flex;flex-direction:column;gap:16px}
/* The card artwork is ONE merged export (1096x352) — background and product
   shot are baked in. Do not re-add the old gradient wrapper or inner border. */
.promo-card .promo-img{border-radius:var(--r-md);overflow:hidden}
.promo-card .promo-img .ph{width:100%;aspect-ratio:1096/352;border-radius:var(--r-md)}
.promo-card .promo-img .ph img{object-fit:cover;object-position:center}
.promo-body{display:flex;flex-direction:column;gap:24px;padding:12px 16px 16px;flex:1}
.promo-text{display:flex;flex-direction:column;gap:10px}
.promo-action{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;margin-top:auto}
.action-left{display:flex;align-items:center;gap:8px;min-width:0}
.action-left .coin{width:40px;height:40px;flex-shrink:0;border-radius:50%}
.action-copy{min-width:0}
.action-copy b{display:block;font-size:16px;font-weight:500;line-height:20px;letter-spacing:0}
.action-copy span{display:block;font-size:13px;line-height:18px;color:var(--grey-2);letter-spacing:0}
.pill-soft{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;padding:0 12px;height:36px;font-size:14px;font-weight:500;color:var(--grey);letter-spacing:0;white-space:nowrap}
.provider-row{display:flex;align-items:center;gap:8px}
.provider{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;display:grid;place-items:center;background:var(--bg1);
  transition:transform .3s var(--ease)}
.provider img{width:100%;height:100%;object-fit:cover}
.provider:hover{transform:translateY(-3px)}

.or-divider{position:relative;display:flex;justify-content:center}
.or-divider::before{content:"";position:absolute;top:49px;bottom:49px;width:1px;background:var(--line)}
.or-badge{
  position:absolute;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;font-size:9px;font-weight:500;letter-spacing:0;color:var(--grey);line-height:1;
}

/* ============================================================
   9. Finding is easy
   ============================================================ */
.finding{background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 85%,#fff 100%)}
.finding .inner{flex-direction:row;gap:clamp(32px,4.5vw,60px);align-items:flex-start}
.finding-aside{width:356px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:sticky;top:calc(var(--nav-h) + 40px)}
.finding-aside .lead{max-width:40ch}
.finding-grid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.gcard{background:#fff;border-radius:var(--r-xl);padding:12px;display:flex;flex-direction:column;gap:16px;
  transition:transform .25s var(--ease), box-shadow .25s ease}
.gcard:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(20,20,20,.07)}
.gcard .ph{width:100%;aspect-ratio:368/210;border:1px solid var(--line);border-radius:var(--r-md)}
.gcard-body{padding:4px 8px 12px;display:flex;flex-direction:column;gap:10px}

/* ============================================================
   10. Everything else it does
   ============================================================ */
.tools{background:#fff}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;width:100%}
.tcard{border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;gap:16px;
  transition:border-color .2s ease, transform .25s var(--ease), box-shadow .25s ease}
.tcard:hover{border-color:#DADBD7;transform:translateY(-2px);box-shadow:0 2px 0 var(--line)}
.tcard .icon{width:40px;height:40px;flex-shrink:0;transition:transform .35s var(--ease)}
.tcard:hover .icon{transform:scale(1.08) rotate(-3deg)}
.tcard-body{display:flex;flex-direction:column;gap:8px}

/* ============================================================
   11. FAQ
   ============================================================ */
.faq-sect{background:#fff}
.faq{width:100%;max-width:808px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 0 12px;font-size:var(--h4);font-weight:500;line-height:32px;letter-spacing:-0.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:24px;height:24px;flex-shrink:0;margin-top:4px;transition:transform .22s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .answer{padding:0 0 24px;color:var(--grey);line-height:24px;max-width:70ch}
.faq-foot{display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap;padding-top:24px;font-size:14px;line-height:20px;letter-spacing:0}
.faq-foot a{display:inline-flex;align-items:center;gap:6px;color:var(--grey)}
.faq-foot a:hover{color:var(--dark)}
.faq-foot svg{width:14px;height:14px}

/* ============================================================
   12. CTA + footer
   ============================================================ */
.tail{background:var(--dark);color:var(--bg);position:relative;overflow:hidden;isolation:isolate}
.tail-top{padding-top:clamp(64px,6.3vw,120px);padding-bottom:40px;display:flex;flex-direction:column;align-items:center;gap:clamp(72px,8.3vw,160px)}

.cta-shell{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;
  width:var(--stage);max-width:var(--wrap-wide);
  padding-block:clamp(56px,6.3vw,120px);
  display:flex;flex-direction:column;align-items:center;
}
.cta-shell .ph{position:absolute;inset:0;border-radius:var(--r-2xl)}
.cta-shell .ph img{object-position:center bottom}
.cta-shell::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--r-2xl);
  background:rgba(162,242,193,.2);mix-blend-mode:overlay;
}
.cta-text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;color:var(--dark);padding-inline:var(--gutter)}
.cta-head{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-head .lead{max-width:538px}
.cta-group{display:flex;flex-direction:column;align-items:center;gap:10px}
.cta-text .note{color:var(--dark)}

.footer-content{width:var(--stage);max-width:var(--wrap-wide);display:flex;flex-direction:column;gap:clamp(48px,5vw,80px)}
.footer-menu{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;flex-wrap:wrap}
.footer-logo img{height:24px;width:auto}
.footer-cols{display:flex;gap:clamp(40px,5vw,80px);flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:12px;min-width:140px}
.footer-col h4{font-family:'Lexend',sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;text-transform:uppercase;color:var(--grey);margin:0}
.footer-col a{color:var(--bg);line-height:24px;transition:color .2s ease}
.footer-col a:hover{color:var(--accent)}
.footer-note{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-dark);padding-top:12px;font-size:12px;line-height:18px;color:var(--grey)}

/* The piano wordmark.
   The SVG is 1634x260 natively. The bottom 100 design-px are clipped away, so
   at rest the letters are cut off. Hovering lifts a letter by 40 design-px,
   revealing 40 of those 100 — the rest stays hidden. site.js measures the
   rendered scale and writes --wm-clip / --wm-lift in real pixels, so the
   proportion holds at every width. */
.wordmark{
  display:flex;justify-content:center;
  padding-top:clamp(48px,4.2vw,72px); /* must stay > --wm-lift (max 40px) */
  overflow:hidden;
}
.wordmark-window{
  width:var(--stage);max-width:var(--wrap-wide);
  overflow:hidden;
  /* --wm-h already includes the lift. The padding-top reserves headroom so a
     lifted letter has somewhere to go, and the equal negative margin puts the
     glyphs back on their resting baseline. Without this the clip box cuts the
     TOP off tall letters (M, d, b) the moment they rise. */
  box-sizing:border-box;
  height:var(--wm-h,auto);
  padding-top:var(--wm-lift,40px);
  margin-top:calc(var(--wm-lift,40px) * -1);
}
/* overflow:visible so the SVG root does not clip a lifted glyph; the window
   above is what does the clipping. */
.wordmark svg{width:100%;height:auto;display:block;overflow:visible}
.wordmark .key{transition:transform .38s var(--ease);cursor:pointer}
/* ⚠ A px length in a transform on an SVG element is USER UNITS, not CSS px.
   So this is 40 design units — exactly LIFT_DESIGN — and it scales with the
   drawing automatically. Feeding it --wm-lift (already converted to CSS px)
   applied the scale a second time and lifted the glyph too far, past the
   headroom, which clipped the tops of M, d and b. Keep this a constant. */
.wordmark .key:hover{transform:translateY(-40px)}

/* ============================================================
   13. Motion
   ============================================================ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}

/* ============================================================
   14. Responsive
   ============================================================ */
@media (max-width:1100px){
  .finding .inner{flex-direction:column}
  .finding-aside{width:100%;position:static}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--stage:calc(100% - 24px)}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-logo,.nav-end{width:auto}
  .cards-3{grid-template-columns:1fr;gap:44px}
  .promo-row{grid-template-columns:1fr;gap:16px}
  .or-divider{height:44px}
  .or-divider::before{top:0;bottom:0}
  .footer-menu{flex-direction:column;gap:40px}
}
@media (max-width:720px){
  .finding-grid{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr}
  .faq summary{font-size:17px;line-height:26px;gap:16px}
  .hero-frame{padding:8px;border-radius:12px}
  .cta-shell{border-radius:var(--r-xl)}
  .cta-shell .ph,.cta-shell::after{border-radius:var(--r-xl)}
  .hero-blur{height:140px}
}
@media (max-width:480px){
  .nav{padding-inline:16px}
  .promo-action{flex-wrap:wrap}
  .faq-foot{justify-content:flex-start}
  .btn{padding:0 14px}
}

/* ============================================================
   15. Sub-pages — privacy, terms, contact, credits
   Figma nodes 312:367 (legal), 312:483 (contact), 312:627 (credits)
   ============================================================ */
.subpage{background:var(--bg)}
.subpage .page{padding-top:clamp(80px,7vw,120px);padding-bottom:clamp(96px,9vw,160px)}
.col-808{width:100%;max-width:808px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---- Legal pages ---- */
.legal-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.stamp{
  background:#FAFAF9;border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 2px 0 var(--line);
  padding:6px 12px;text-align:right;
  font-size:14px;line-height:20px;letter-spacing:0;white-space:nowrap;
}
.stamp b{display:block;font-weight:400}
.legal-rule{height:1px;background:var(--line);border-bottom:1px solid #FAFAF9;margin-block:24px}
.legal-body{text-align:justify;hyphens:auto}
.legal-body h2{
  font-family:'Lexend',sans-serif;font-size:20px;font-weight:500;line-height:32px;
  letter-spacing:-0.02em;margin:36px 0 8px;text-align:left;
}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{
  font-family:'Lexend',sans-serif;font-size:16px;font-weight:500;line-height:24px;
  letter-spacing:-0.02em;margin:24px 0 4px;text-align:left;
}
.legal-body p{margin-bottom:16px;line-height:24px}
.legal-body ul{margin:0 0 16px;padding-left:24px}
.legal-body li{margin-bottom:6px;line-height:24px}
.legal-body a{text-decoration:underline;text-underline-offset:3px}
.legal-body strong{font-weight:500}
.contact-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--bg1);border-radius:var(--r-sm);padding:6px 12px;margin-top:40px;
  font-size:13px;line-height:18px;color:var(--grey);letter-spacing:0;
}
.contact-bar a{display:inline-flex;align-items:center;gap:4px;color:var(--grey)}
.contact-bar a:hover{color:var(--dark)}
.contact-bar img,.contact-bar svg{width:18px;height:18px}

/* Inline links inside body copy — legal prose, FAQ answers, card text.
   Deliberately NOT applied to nav, footer or button links, which carry their
   own treatment; this is for a link sitting inside a sentence. */
.legal-body a,
.faq .answer a,
.contact-card-copy a,
a.hl{
  color:var(--highlight);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--highlight) 40%, transparent);
  transition:text-decoration-color .18s ease, color .18s ease;
}
.legal-body a:hover,
.faq .answer a:hover,
.contact-card-copy a:hover,
a.hl:hover{ text-decoration-color:var(--highlight); }
.legal-body a:focus-visible,
.faq .answer a:focus-visible,
a.hl:focus-visible{ outline:2px solid var(--highlight); outline-offset:2px; border-radius:2px; }

/* ---- Contact page ---- */
.page-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:60px}
.contact-cards{display:flex;flex-direction:column;gap:24px}
.contact-card{
  background:var(--bg);border:1px solid #DADBD7;border-radius:var(--r-xl);
  display:flex;flex-direction:column;
  transition:border-color .2s ease, box-shadow .25s ease;
}
.contact-card:hover{border-color:#C9CAC4;box-shadow:0 2px 0 #DADBD7}
.contact-card-top{display:flex;align-items:flex-start;gap:24px;padding:24px 24px 20px}
.contact-card-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.contact-card-copy p{font-size:14px;line-height:20px;letter-spacing:-0.01em}
.contact-card-art{width:80px;height:80px;flex-shrink:0;transition:transform .35s var(--ease)}
.contact-card:hover .contact-card-art{transform:translateY(-3px) scale(1.04)}
/* The whole bottom bar is the link.
   Three states from the design: rest = card ground, hover = BG-1, active =
   BG+1. Radius only on the bottom corners so it seats inside the card.
   No arrow — the bar itself is the affordance. */
.contact-card-foot{
  display:flex;align-items:center;justify-content:center;gap:16px;
  border-top:1px solid #DADBD7;
  padding:14px 24px 16px;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  background:transparent;
  line-height:24px;color:var(--dark);
  transition:background-color .2s ease;
}
.contact-card-foot .handle{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:transparent;
  transition:text-decoration-color .2s ease;
}
.contact-card-foot:hover{background:#FAFAF9}
.contact-card-foot:hover .handle{text-decoration-color:currentColor}
/* ⚠ must out-specify `.contact-card:hover .contact-card-foot` below, which is
   also (0,2,0) and comes later — otherwise the pressed state never shows,
   because the card is always hovered while the bar is being pressed. */
.contact-card .contact-card-foot:active{background:var(--bg1)}
.contact-card-foot:focus-visible{
  outline:2px solid var(--highlight);outline-offset:-2px;
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
/* hovering anywhere on the card lifts the art and warms the bar slightly */
.contact-card:hover .contact-card-foot{background:#FAFAF9}

/* ---- Credits page ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;align-items:start}
.tier{
  background:#fff;border:1px solid #DADBD7;border-radius:var(--r-xl);
  display:flex;flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s ease;
}
.tier:hover{transform:translateY(-3px);box-shadow:0 2px 0 #DADBD7}
.tier-head{padding:20px;display:flex;flex-direction:column;gap:8px}
.tier-head .name{line-height:24px}
.tier-head .price{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(40px,3.6vw,52px);line-height:1;letter-spacing:-0.01em}
.tier-rule{height:1px;background:#DADBD7}
.tier-list{padding:20px;display:flex;flex-direction:column;gap:8px;margin:0;list-style:none}
.tier-list li{display:flex;align-items:center;gap:10px;line-height:24px}
.tier-list li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--dark);flex-shrink:0}
.tier-foot{padding:0 20px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto}
.tier-foot .note{text-align:center}

/* flat button — credits tiles only, no Cluely layering */
.btn-flat{
  display:flex;align-items:center;justify-content:center;width:100%;
  height:36px;border-radius:10px;background:var(--dark);color:#fff;
  font-size:14px;font-weight:500;line-height:16px;letter-spacing:-0.01em;
  transition:background-color .2s ease, transform 120ms var(--ease);
}
.btn-flat:hover{background:#000;transform:translateY(-1px)}
.btn-flat:active{transform:translateY(0)}
.btn-flat.accent{background:var(--accent);color:var(--dark)}
.btn-flat.accent:hover{background:#B4C40F}

/* featured (dark) tier */
.tier.featured{background:var(--dark);border-color:var(--grey);color:#fff}
.tier.featured .tier-rule{background:rgba(120,120,109,.2)}
.tier.featured .tier-list li::before{background:#fff}
.tier.featured .note{color:#A0A096} /* #78786D on #141414 fails AA at 12px */
.tier.featured:hover{box-shadow:0 2px 0 var(--grey)}

.credits-faq{background:linear-gradient(to bottom,#F3F3F1 0%,#fff 10%,#fff 100%)}

@media (max-width:900px){
  .tiers{grid-template-columns:1fr}
  .legal-head{gap:16px}
  .contact-card-top{flex-direction:column-reverse;align-items:flex-start;gap:16px}
}


/* ============================================================
   16. Added 2026-09-20 — a first screen that fills the viewport,
   the payment assurance block, and the thank-you page.
   ============================================================ */

/* A section that owns the first screen. The footer exists, and it waits below
   the fold rather than crowding a page with one card on it.
   ⚠ `svh`, not `vh`: on a phone `100vh` is the viewport with the browser
   chrome RETRACTED, so the footer peeks in at rest and the section is exactly
   as tall as the thing it was supposed to keep out of view. The `vh` line
   stays as the fallback for anything without svh. */
.page.fill{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}

/* ---- payment assurance, under the credit tiers ---- */
.pay-assure{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pay-marks{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:2px}
/* ⚠ The marks keep their own colours — no currentColor, no filter. A
   recoloured Google Pay mark is a trademark problem and a greyed one reads as
   unavailable. */
.pay-marks img{width:16px;height:16px;display:block}
.pay-line{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin:0;font-size:12px;line-height:18px;color:var(--grey);letter-spacing:0;
}
.pay-line svg{width:12px;height:12px;flex-shrink:0}
.pay-links{display:flex;align-items:center;justify-content:center;gap:16px;margin:2px 0 0;font-size:12px;line-height:18px}
.pay-links a{color:var(--highlight);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--highlight) 40%, transparent);transition:text-decoration-color .18s ease}
.pay-links a:hover{text-decoration-color:var(--highlight)}
/* The separator is drawn BETWEEN links rather than typed between them, so
   there are three link targets on this row and nothing else to click. */
.pay-links a + a::before{content:"·";color:var(--grey);margin-right:16px;text-decoration:none;display:inline-block}

/* ---- thank-you page ---- */
.thanks .page.fill,
.notfound .page.fill{position:relative;overflow:hidden;align-items:center} /* the 404 reuses the thank-you stage */
/* Keeps the card off the screen edges on a phone (it was flush at 390px). */
.thanks-stage{padding-inline:var(--gutter)}
.thanks-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.thanks-card{
  position:relative;z-index:1;
  width:min(100%,520px);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:32px 32px 28px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 24px 60px rgba(20,20,20,.18);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.thanks-seal{width:56px;height:56px;margin-bottom:4px}
.thanks-eyebrow{margin:0;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--dark)}
.thanks-title{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-0.01em;margin:16px 0 0;font-weight:400}
.thanks-sub{margin:0;font-size:14px;line-height:20px;color:var(--dark)}
.thanks-facts{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--dark)}
.thanks-body{margin:16px 0 0;font-size:14px;line-height:22px;color:var(--dark)}
.thanks-note{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(20,20,20,.12);font-size:12px;line-height:18px;color:var(--grey);width:100%}
.thanks-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:20px 0 0;width:100%}
.thanks-actions .btn-flat{width:auto;padding-inline:18px}
.btn-flat.ghost{background:transparent;color:var(--dark);border:1px solid rgba(20,20,20,.2)}
.btn-flat.ghost:hover{background:rgba(20,20,20,.06)}
.thanks-links{margin-top:18px;padding-top:14px;border-top:1px solid rgba(20,20,20,.12);width:100%}

/* One card, five states, switched by an attribute on <body> so there is no
   flash of the wrong one while JavaScript starts — and so a state can never be
   half-shown. The seal belongs to the three that succeeded. */
.thanks[data-state="extension"] .thanks-links{border-top:0;padding-top:0;margin-top:12px}
.thanks-state{display:none;width:100%}
.thanks[data-state="waiting"] .thanks-state[data-for="waiting"],
.thanks[data-state="extension"] .thanks-state[data-for="extension"],
.thanks[data-state="website"] .thanks-state[data-for="website"],
.thanks[data-state="unknown"] .thanks-state[data-for="unknown"],
.thanks[data-state="failed"] .thanks-state[data-for="failed"]{display:block}
.thanks[data-state="waiting"] .thanks-seal,
.thanks[data-state="unknown"] .thanks-seal,
.thanks[data-state="failed"] .thanks-seal{display:none}

@media (max-width:640px){
  .thanks-card{padding:24px 20px 22px}
  .pay-links{gap:10px}
  .pay-links a + a::before{margin-right:10px}
}


/* ============================================================
   17. Changelog — added 2026-09-24
   Layout after renance.framer.website/changelog: the title sits in a sticky
   left column, releases run down a timeline on the right. Measured there at
   1440px: 560px timeline column, 24px dot, entries 500px wide.
   ============================================================ */
.cl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:48px;align-items:start}
.cl-head{position:sticky;top:calc(var(--nav-h) + 40px);display:flex;flex-direction:column;gap:16px}
.cl-head .lead{color:var(--grey);max-width:32ch}
.cl-list{display:flex;flex-direction:column}

/* Each entry draws its own piece of the line, from its dot to the next one, so
   the timeline is exactly as long as the list. The last piece fades out. */
.cl-entry{position:relative;padding:0 0 80px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cl-entry::before{content:"";position:absolute;left:11.5px;top:12px;bottom:-12px;width:1px;background:#DADBD7}
.cl-entry:last-child{padding-bottom:0}
.cl-entry:last-child::before{bottom:-48px;background:linear-gradient(#DADBD7,transparent)}
.cl-entry::after{
  content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle,var(--grey) 0 5px,var(--bg1) 5.5px);
}
.cl-entry .eyebrow{height:24px}
.cl-entry h2{font-size:var(--h2);line-height:1.1}
.cl-body{display:flex;flex-direction:column;gap:16px;line-height:24px}
.cl-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.cl-body li::marker{color:var(--grey)}

@media (max-width:900px){
  .cl{grid-template-columns:1fr;gap:40px}
  .cl-head{position:static}
  .cl-entry{padding-left:40px}
}