/* ─── GRANTED · LAYOUT AND MOTION LAYER OF THE MARKETING SITE ───
   Loaded after style.css and granted-pages.css (and after the inline <style> of Candy and Richy).
   Every rule is scoped to main.rd, so nav, footer and cookie banner are untouched.
   main.rd-persuade: landing pages. main.rd-read: security and guides, calmer, built for reading.
   Palette: style.css variables only (navy, blue, cyan, grays, amber, red), no green.
   Thesis: the product's own world, a file of documents checked against the grant rules.
   One continuous night-blue ground: sections separate by space and soft light, never by hard edges.
   Hairline ledgers, a checklist that ticks, a semaphore that stamps.
   One authored motion moment per page at most: on Home and Rendy the outcome panel "compiles",
   on Candy and Richy the scheme assembles, on the guides a reading bar follows you. */

:root{
  --rd-ease:cubic-bezier(.16,1,.3,1);
  --rd-ease-io:cubic-bezier(.65,0,.35,1);
  --rd-spring:cubic-bezier(.34,1.56,.64,1);
  --rd-hair:rgba(184,204,222,.08);
  --rd-panel:rgba(13,31,60,.42);
  --rd-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%2300D4FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rd-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%238DA4C4' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Browser surfaces in the brand */
.landing-scope ::selection{background:rgba(0,212,255,.30);color:var(--white)}
html{scrollbar-color:rgba(0,212,255,.28) var(--navy)}
.rd :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ─── RHYTHM: one continuous ground, no rule between sections ─── */
.rd .section + .section{border-top:0}
.rd .rd-sec{--rd-bg:var(--navy);background:transparent}
.rd-persuade .rd-sec{padding-block:clamp(48px,5vw,72px)}
.rd .rd-sec .container > :last-child,.rd .rd-sec .rd-body > :last-child,.rd .rd-sec .rd-main > :last-child{margin-bottom:0}
.rd .candy-section,.rd .richy-section,.rd .candy-waitlist-section,.rd .richy-waitlist-section{border-top:0}

/* ─── TYPE ─── */
.rd .section-eyebrow,.rd .candy-eyebrow,.rd .richy-eyebrow{
  display:block;margin-bottom:14px;text-transform:none;font-size:15px;font-weight:600;letter-spacing:0;color:var(--cyan)}
.rd .section-eyebrow::before,.rd .candy-eyebrow::before,.rd .richy-eyebrow::before{content:none}
.rd .section-h2{font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.035em;margin-bottom:22px}
.rd .section-intro{font-size:17px;line-height:1.75}
.rd .section-intro + .section-intro{margin-top:18px}
/* the brand gradient moves from the letters to an underline: same colours, readable text */
.rd .grad-text{
  -webkit-text-fill-color:currentColor;color:var(--white);
  background:var(--grad) no-repeat 0 96%/100% .085em;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.04em}

/* ─── BUTTONS AND LINKS: press feedback, arrow that follows the pointer ─── */
.rd .btn-primary,.rd button.btn-primary,.rd .btn-secondary,.rd .btn-waitlist,.rd .candy-cta-primary,.rd .candy-cta-secondary,.rd .richy-cta-primary,.rd .richy-cta-secondary{
  transition:transform .16s ease-out,box-shadow .25s ease-out,border-color .2s ease-out,color .2s ease-out}
.rd .btn-primary:active,.rd .btn-secondary:active,.rd .btn-waitlist:active,.rd .candy-cta-primary:active,.rd .candy-cta-secondary:active,.rd .richy-cta-primary:active,.rd .richy-cta-secondary:active{transform:scale(.97)}
.rd .btn-primary svg{transition:transform .2s var(--rd-ease)}
.rd .btn-primary:hover svg{transform:translateX(3px)}
.rd .btn-secondary{background:rgba(255,255,255,.025)}
.rd .gp-link span[aria-hidden]{display:inline-block;transition:transform .2s var(--rd-ease)}
.rd .gp-link:hover span[aria-hidden]{transform:translateX(4px)}

/* ─── HERO: no backdrop pattern; the glows are free to fade into the next section ─── */
.rd .rd-hero{position:relative;overflow:visible}
@supports (overflow:clip){.rd .rd-hero{overflow-x:clip}}
.rd .rd-hero > *{position:relative;z-index:1}
.rd .rd-hero > .home-glow-1,.rd .rd-hero > .home-glow-2{position:absolute;z-index:0}
.rd .home-glow-2{bottom:-260px}

/* home hero */
.rd .gp-hero{padding:clamp(40px,4.5vw,64px) 0 clamp(56px,6vw,88px)}
.rd .gp-hero .home-hero{max-width:920px;margin-bottom:clamp(44px,5vw,64px)}
.rd .gp-hero .gp-eyebrow{display:block;margin-bottom:20px;font-size:16px}

.rd .gp-hero .home-tagline{font-size:clamp(34px,5.4vw,72px);line-height:1.02;letter-spacing:-.045em;margin-bottom:26px}
.rd .gp-hero .home-sub{font-size:clamp(16.5px,1.55vw,19px);max-width:690px;margin-bottom:38px}
.rd .home-ctas .btn-primary{padding:17px 30px}
.rd .home-trust{color:var(--gray-2)}

/* rendy hero */
.rd-rendy .rd-hero{padding:clamp(36px,4.5vw,64px) 0 clamp(56px,6vw,88px)}
/* the product page leads with the product: text on two columns, the app window full width below */
.rd-rendy .rendy-solution-grid.rd-hero-stack{grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,64px)}
.rd-rendy .rd-hero-text{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:0 clamp(40px,5vw,80px);align-items:start}
.rd-rendy .rd-hero-kick{grid-column:1 / -1;margin-bottom:6px}
.rd-rendy .rd-hero-b{padding-top:6px}
.rd-rendy .rd-hero-text .section-h1{font-size:clamp(34px,3.7vw,52px);line-height:1.04;letter-spacing:-.04em;margin-bottom:0;max-width:16ch}
.rd-rendy .rd-hero-b .section-intro{font-size:17px;line-height:1.7;max-width:56ch}
.rd-rendy .rd-hero-b .rp-ctas-left{margin:26px 0 12px}
.rd-rendy .rd-hero .rd-stage{max-width:none;width:100%}
/* The simulation follows the opening straight away: short gap, compact heading, the window in sight */
.rd-rendy .rd-sec.rd-hero{padding-bottom:clamp(12px,1.6vw,24px)}
.rd-rendy .rd-sec.rd-simulation{padding-top:0}
.rd-rendy .rd-simulation .section-h2{font-size:clamp(22px,2.1vw,30px);line-height:1.2;margin:16px 0 8px;max-width:none}
.rd-rendy .rd-simulation .section-intro{margin-bottom:0;max-width:72ch}
.rd-rendy .rd-simulation .sim{margin-top:20px}
@media (max-width:960px){
  .rd-rendy .rd-hero-text{grid-template-columns:minmax(0,1fr);gap:20px}
  .rd-rendy .rd-hero-text .section-h1{max-width:none}}

/* ─── THE OUTCOME PANEL (focal element) ─── */
.rd .rd-stage{position:relative;perspective:1600px}
.rd-home .rd-stage{max-width:none}
.rd .rd-stage::after{ /* light under the panel */
  content:"";position:absolute;left:8%;right:8%;bottom:-40px;height:120px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(26,107,255,.38),transparent 70%);filter:blur(20px)}
.rd .dashboard-mock{
  position:relative;z-index:2;border-radius:20px;border:1px solid rgba(0,212,255,.24);
  background:linear-gradient(180deg,var(--navy-2) 0%,var(--navy-1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 50px 100px -30px rgba(0,0,0,.7),0 30px 120px -40px rgba(26,107,255,.5);
  transform-origin:50% 0;transition:transform 1.1s var(--rd-ease)}
.rd-js .rd .rd-stage:not(.visible) .dashboard-mock{transform:rotateX(14deg) scale(.97)}
.rd .dashboard-mock-dot{background:rgba(184,204,222,.2)!important}
.rd .dashboard-mock-bar{background:rgba(8,15,30,.55);padding:13px 18px;border-bottom:0}
.rd .dashboard-mock-title{color:var(--gray-2);font-size:12.5px;font-variant-numeric:tabular-nums}
.rd .rd-progress{height:2px;background:rgba(0,212,255,.10);overflow:hidden}
.rd .rd-progress i{display:block;height:100%;background:var(--grad);transform-origin:0 50%}
.rd .dashboard-mock-body{padding:clamp(18px,2.4vw,28px)}
.rd .dash-stats{gap:clamp(8px,1.2vw,14px);margin-bottom:16px}
.rd .dash-stat{position:relative;overflow:hidden;text-align:left;padding:18px 18px 15px;border-radius:14px;background:rgba(8,15,30,.6);border:1px solid var(--rd-hair)}
.rd .dash-stat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cyan)}
.rd .dash-stat:nth-child(2)::before{background:var(--amber)}
.rd .dash-stat:nth-child(3)::before{background:var(--red)}
.rd .dash-stat-val{font-size:clamp(30px,3.3vw,44px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:2ch;margin-bottom:4px}
.rd .dash-stat:nth-child(2) .dash-stat-val{color:var(--amber)}
.rd .dash-stat:nth-child(3) .dash-stat-val{color:var(--red)}
.rd .dash-stat-lbl{font-size:11px;letter-spacing:.09em;color:var(--gray-2)}
.rd .dash-list{position:relative;gap:8px}
.rd .dash-row{position:relative;overflow:hidden;padding:14px 16px;transition:background-color .3s ease-out,border-color .3s ease-out;border-radius:12px;background:rgba(8,15,30,.6);border:1px solid var(--rd-hair);font-size:14px}
.rd .dash-row-name{color:var(--white);font-weight:500}
.rd .rp-row .dash-row-name small{color:var(--gray-2);font-weight:400;font-size:12.5px;margin-top:4px;text-wrap:balance}
.rd .dash-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 5px;border:1px solid transparent;font-size:12px}
.rd .dash-badge::before{content:"";flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--rd-bi) center / 10px no-repeat,var(--rd-bb)}
.rd .dash-badge.ok{--rd-bb:rgba(0,212,255,.20);--rd-bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%2300D4FF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.rd .dash-badge.warn{--rd-bb:rgba(255,176,32,.22);--rd-bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v7M12 17.5v.5' fill='none' stroke='%23FFB020' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")}
.rd .dash-badge.err{--rd-bb:rgba(255,90,90,.22);--rd-bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23FF7A7A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")}
.rd .dash-badge.ok{color:var(--cyan);background:rgba(0,212,255,.10);border-color:rgba(0,212,255,.28)}
.rd .dash-badge.warn{color:var(--amber);background:rgba(255,176,32,.10);border-color:rgba(255,176,32,.30)}
.rd .dash-badge.err{color:#FF7A7A;background:rgba(255,90,90,.10);border-color:rgba(255,90,90,.32)}

.rd .rd-stage + .gp-note,.rd .rd-stage > .gp-note{position:relative;z-index:2;margin-top:18px;color:var(--gray-2)}



/* compile: states set only by redesign.js, never without it */
.rd .rd-pre .dash-row{opacity:0;transform:translateY(10px)}
/* before the visitor reaches it the window reads as an app still loading: tiles in place, values not yet in */
.rd .rd-pre .dash-stat-val,.rd .rd-pre .dash-stat-lbl{opacity:0}
.rd .rd-run .dash-stat-val,.rd .rd-run .dash-stat-lbl{opacity:1;transition:opacity .4s var(--rd-ease);transition-delay:var(--rd-k,0ms)}
.rd .rd-pre .dash-badge{opacity:0;transform:scale(.88)}
.rd .rd-pre .rd-progress i{transform:scaleX(0)}
.rd .rd-run .dash-row{opacity:1;transform:none;
  transition:opacity .5s var(--rd-ease),transform .6s var(--rd-ease);transition-delay:var(--rd-k,0ms)}
.rd .rd-run .dash-badge{opacity:1;transform:none;
  transition:opacity .16s ease-out,transform .26s var(--rd-spring);transition-delay:var(--rd-b,0ms)}
.rd .rd-run .rd-progress i{transform:scaleX(1);transition:transform 1.9s var(--rd-ease-io) .1s}

.rd .rd-run .dash-stat-val{transition:color .3s}

/* ─── THE APP WINDOW: icon rail, list, document being read ───
   Built in HTML/CSS (a few KB, no images). Container queries decide how much of the window fits. */
.rd .dashboard-mock{container-type:inline-size}
.rd .rd-app{display:grid;grid-template-columns:minmax(0,1fr)}
.rd .rd-side,.rd .rd-doc{display:none}
.rd .rd-side{flex-direction:column;align-items:center;gap:6px;padding:18px 0;background:rgba(8,15,30,.45);box-shadow:inset -1px 0 0 var(--rd-hair)}
.rd .rd-side-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:var(--gray)}
.rd .rd-side-btn svg{width:18px;height:18px}
.rd .rd-side-btn.is-on{color:var(--cyan);background:rgba(0,212,255,.10);box-shadow:inset 0 0 0 1px rgba(0,212,255,.25)}
.rd .rd-side-btn:last-child{margin-top:auto}
.rd .rd-file{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;
  background:rgba(184,204,222,.06);box-shadow:inset 0 0 0 1px var(--rd-hair);color:var(--gray-2)}
.rd .rd-file svg{width:17px;height:17px}
.rd .dash-row{gap:14px}
.rd .dash-row .dash-row-name{flex:1;min-width:0}
.rd .rd-doc{align-items:center;justify-content:center;padding:22px 20px;background:rgba(8,15,30,.45);box-shadow:inset 1px 0 0 var(--rd-hair)}
.rd .rd-paper{position:relative;overflow:hidden;width:100%;max-width:184px;aspect-ratio:1 / 1.38;padding:16px 14px;border-radius:10px;
  display:flex;flex-direction:column;gap:11px;background:#0F1C36;box-shadow:inset 0 0 0 1px rgba(184,204,222,.12),0 22px 44px -22px rgba(0,0,0,.75)}
.rd .rd-paper i{display:block;height:5px;border-radius:3px;background:rgba(184,204,222,.14)}
.rd .rd-p-top{display:flex;align-items:center;gap:9px;padding-bottom:10px;box-shadow:inset 0 -1px 0 rgba(184,204,222,.08)}
.rd .rd-p-logo{flex-shrink:0;width:20px!important;height:20px!important;border-radius:6px!important;background:rgba(184,204,222,.18)!important}
.rd .rd-p-lines{flex:1;display:grid;gap:5px}
.rd .rd-p-lines i:first-child{width:78%;background:rgba(184,204,222,.24)}
.rd .rd-p-lines i:last-child{width:52%}
.rd .rd-p-rows{display:grid;gap:7px}
.rd .rd-p-rows i:nth-child(odd){width:94%}
.rd .rd-p-rows i:nth-child(even){width:76%}
.rd .rd-p-rows i:nth-child(3){width:64%}
.rd .rd-p-foot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rd .rd-f{display:grid;gap:5px;padding:7px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--fc,transparent);background:var(--fb,transparent);
  transition:box-shadow .3s ease-out,background-color .3s ease-out;transition-delay:var(--rd-f,0ms)}
.rd .rd-f i{height:5px;background:rgba(184,204,222,.30)}
.rd .rd-f i + i{width:70%}
.rd .rd-f-ok{--fc:rgba(0,212,255,.55);--fb:rgba(0,212,255,.10)}
.rd .rd-f-warn{--fc:rgba(255,176,32,.75);--fb:rgba(255,176,32,.12)}
.rd .rd-f-err{--fc:rgba(255,90,90,.65);--fb:rgba(255,90,90,.10)}
.rd .rd-clause{margin:2px -4px;--fc:rgba(184,204,222,.16);--fb:rgba(184,204,222,.04)}
.rd .rd-clause.rd-sel{--fc:var(--amber);--fb:rgba(255,176,32,.18)}
@container (min-width:600px){
  .rd .rd-app{grid-template-columns:60px minmax(0,1fr)}
  .rd .rd-side{display:flex}}
@container (min-width:840px){
  .rd .rd-app{grid-template-columns:60px minmax(0,1fr) minmax(200px,236px)}
  .rd .rd-doc{display:flex}}
@container (max-width:480px){.rd .rd-file{display:none}}
.rd .rd-pre .rd-f{--fc:transparent;--fb:transparent}
.rd .rd-run .rd-f-ok{--fc:rgba(0,212,255,.55);--fb:rgba(0,212,255,.10)}
.rd .rd-run .rd-f-warn{--fc:rgba(255,176,32,.75);--fb:rgba(255,176,32,.12)}
.rd .rd-run .rd-f-err{--fc:rgba(255,90,90,.65);--fb:rgba(255,90,90,.10)}
.rd .rd-run .rd-clause{--fc:rgba(184,204,222,.16);--fb:rgba(184,204,222,.04)}
.rd .rd-run .rd-clause.rd-sel,.rd .rd-clause.rd-sel{--fc:var(--amber);--fb:rgba(255,176,32,.18);transition-delay:0ms}
.rd .rd-pre .rd-paper{opacity:0;transform:translateY(12px)}
.rd .rd-run .rd-paper{opacity:1;transform:none;transition:opacity .5s var(--rd-ease) .2s,transform .7s var(--rd-ease) .2s}

/* review: after the check the row to look at is opened and its clause lights up on the page */
.rd .rd-f.rd-pulse{animation:rd-pulse 1.2s var(--rd-ease) 1}
@keyframes rd-pulse{0%{box-shadow:inset 0 0 0 1px var(--fc),0 0 0 0 rgba(255,176,32,.5)}100%{box-shadow:inset 0 0 0 1px var(--fc),0 0 0 8px rgba(255,176,32,0)}}
.rd .rd-app{position:relative}
.rd .dash-row.rd-hl{background:rgba(26,107,255,.12);border-color:rgba(0,212,255,.32)}


/* ─── STACKED SECTION OPENING: heading, then the text at a reading measure ─── */
.rd .rd-stack.gp-narrow > *{max-width:none}
.rd .rd-stack .section-h2{max-width:19ch;margin-bottom:28px}
.rd .rd-stack .section-intro{max-width:62ch}
.rd .rd-stack .section-intro:first-of-type{font-size:clamp(18px,1.45vw,20px);line-height:1.65;color:var(--white)}
.rd .rd-stack .gp-mt{margin-top:28px}

/* ─── SPLIT LAYOUT: heading that stays while the text runs ─── */
.rd .rd-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start}
.rd .rd-split.gp-narrow > *{max-width:none}
.rd .rd-split .rd-head{position:sticky;top:112px}
.rd .rd-split .rd-head .section-h2{margin-bottom:0}
.rd .rd-split .section-intro{max-width:38em}
.rd .rd-problem .rd-body > p:first-child{font-size:clamp(18px,1.5vw,20px);line-height:1.65;color:var(--white);letter-spacing:-.01em}
.rd .rd-problem .rd-body .gp-mt{margin-top:28px}
@media (max-width:900px){
  .rd .rd-split{grid-template-columns:minmax(0,1fr);gap:12px}
  .rd .rd-split .rd-head{position:static}
  .rd .rd-split .rd-head .section-h2{margin-bottom:12px}}

/* ─── HOME: THREE CHECKS ON ONE RAIL ─── */
.rd .rd-rail{--g:clamp(28px,4vw,64px);position:relative;margin-top:68px;gap:var(--g)}
.rd .rd-rail::before{
  content:"";position:absolute;left:44px;right:calc((100% - 2 * var(--g)) / 3 - 44px);top:44px;height:1px;z-index:0;
  background:linear-gradient(90deg,var(--cyan),var(--blue) 60%,rgba(26,107,255,.2));
  transform-origin:0 50%;transition:transform 1.4s var(--rd-ease-io)}
.rd-js .rd .rd-rail:not(.is-in)::before{transform:scaleX(0)}
.rd .rd-rail .feature-card{position:relative;z-index:1;background:none;border:0;border-radius:0;padding:0;gap:26px}
.rd .rd-rail .feature-icon{
  width:88px;height:88px;border-radius:50%;border:1px solid var(--border-2);
  background:radial-gradient(circle at 50% 30%,var(--navy-2),var(--navy) 72%);
  box-shadow:0 0 0 10px var(--rd-bg,var(--navy)),0 14px 30px -12px rgba(0,0,0,.6)}
.rd .rd-rail .feature-icon img{width:66px;height:66px}
.rd .rd-rail .feature-h4{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.rd .rd-rail .feature-body{font-size:15.5px;line-height:1.72;color:var(--gray-3)}
@media (max-width:1024px){
  .rd .rd-rail{--g:44px}
  .rd .rd-rail::before{display:none}
  .rd .rd-rail .feature-card:not(:last-child)::after{content:"";position:absolute;left:44px;top:44px;bottom:-88px;width:1px;z-index:-1;
    background:linear-gradient(180deg,var(--cyan),var(--blue));transform-origin:50% 0;transition:transform .8s var(--rd-ease-io) .2s}
  .rd-js .rd .rd-rail .feature-card:not(.visible)::after{transform:scaleY(0)}
  .rd .rd-rail .feature-card{flex-direction:row;align-items:flex-start;gap:24px}
  .rd .rd-rail .feature-icon{flex-shrink:0}}
@media (max-width:520px){
  .rd .rd-rail .feature-card:not(:last-child)::after{left:32px;top:32px;bottom:-76px}
  .rd .rd-rail .feature-icon{width:64px;height:64px;box-shadow:0 0 0 8px var(--rd-bg,var(--navy))}
  .rd .rd-rail .feature-icon img{width:48px;height:48px}}

/* ─── CELLS: one panel divided by hairlines instead of separate equal cards ─── */
.rd .rd-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:48px;
  border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--border)}
.rd .rd-cells > *{position:relative;margin:0;background:#0A162B;border:0;border-radius:0;box-shadow:none;padding:clamp(28px,3.2vw,48px)}
.rd .rd-cells h3{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;margin-bottom:12px}
.rd .rd-cells p{font-size:15.5px;line-height:1.72;max-width:52ch}
.rd .candy-pain-grid.rd-cells,.rd .richy-pain-grid.rd-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
.rd .candy-faq-list.rd-cells,.rd .richy-faq-list.rd-cells{grid-template-columns:1fr;margin-top:0}
.rd .candy-faq-list.rd-cells > *,.rd .richy-faq-list.rd-cells > *{padding:24px 28px}
.rd .candy-faq-list.rd-cells h3,.rd .richy-faq-list.rd-cells h3{font-size:17px}
@media (max-width:900px){.rd .candy-pain-grid.rd-cells,.rd .richy-pain-grid.rd-cells{grid-template-columns:1fr}}
@media (max-width:640px){.rd .rd-cells{grid-template-columns:1fr}}

/* pointer light, desktop pointers only */
@media (hover:hover){
  .rd .rd-cells > *::after,.rd .gd-card::after,.rd .rd-lit::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease-out;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,212,255,.07),transparent 60%)}
  .rd .rd-cells > :hover::after,.rd .gd-card:hover::after,.rd .rd-lit:hover::after{opacity:1}}

/* ─── GUIDES AS DOCUMENTS ─── */
.rd .gd-cards{gap:20px;margin-top:40px}
.rd .gd-card{
  position:relative;overflow:hidden;gap:12px;padding:30px 28px 26px;border-radius:18px;
  background:linear-gradient(180deg,rgba(17,35,64,.75),rgba(13,31,60,.35));
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);
  transition:transform .28s var(--rd-ease),border-color .28s ease-out}
.rd .gd-card::before{content:"";position:absolute;top:0;right:0;width:30px;height:30px;
  background:linear-gradient(225deg,transparent 50%,rgba(184,204,222,.18) 50%);border-bottom-left-radius:6px}
.rd .gd-card:hover{transform:translateY(-4px)}
.rd .gd-tag{align-self:flex-start;padding:4px 11px;border-radius:100px;border:1px solid var(--border-2);color:var(--cyan);font-size:11px;font-weight:600;letter-spacing:.12em}
.rd .gd-card h3{font-size:20px;letter-spacing:-.02em;line-height:1.28}
.rd .gd-card p{font-size:15px}
.rd .gd-read-more{margin-top:8px}
.rd .gd-read-more span{display:inline-block;transition:transform .2s var(--rd-ease)}
.rd .gd-card:hover .gd-read-more span{transform:translateX(4px)}

/* ─── LEAD BOX: the checklist on paper next to the form ─── */
.rd .gp-lead{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px;column-gap:48px;
  padding:clamp(28px,3.6vw,48px);border-radius:18px;border:1px solid rgba(0,212,255,.26);overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,rgba(26,107,255,.24),transparent 55%),linear-gradient(180deg,rgba(13,31,60,.95),rgba(10,22,40,.95))}
.rd .gp-lead > *{grid-column:1}
.rd .gp-lead::after{
  content:"";grid-column:2;grid-row:1 / span 4;align-self:center;width:100%;aspect-ratio:3 / 4;transform:rotate(5deg);
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.45));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 200'%3E%3Crect x='.75' y='.75' width='148.5' height='198.5' rx='11' fill='%23112340' stroke='%2300D4FF' stroke-opacity='.25' stroke-width='1.5'/%3E%3Crect x='16' y='18' width='64' height='8' rx='4' fill='%23B8CCDE' fill-opacity='.35'/%3E%3Cg fill='none' stroke-width='1.6'%3E%3Crect x='16' y='44' width='14' height='14' rx='3.5' stroke='%2300D4FF'/%3E%3Crect x='16' y='70' width='14' height='14' rx='3.5' stroke='%2300D4FF'/%3E%3Crect x='16' y='96' width='14' height='14' rx='3.5' stroke='%2300D4FF'/%3E%3Crect x='16' y='122' width='14' height='14' rx='3.5' stroke='%236B83A8'/%3E%3Crect x='16' y='148' width='14' height='14' rx='3.5' stroke='%236B83A8'/%3E%3Crect x='16' y='174' width='14' height='14' rx='3.5' stroke='%236B83A8'/%3E%3Cpath d='M19.5 51l3 3 5-5.5M19.5 77l3 3 5-5.5M19.5 103l3 3 5-5.5' stroke='%2300D4FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg fill='%23B8CCDE' fill-opacity='.16'%3E%3Crect x='40' y='48' width='94' height='6' rx='3'/%3E%3Crect x='40' y='74' width='78' height='6' rx='3'/%3E%3Crect x='40' y='100' width='88' height='6' rx='3'/%3E%3Crect x='40' y='126' width='70' height='6' rx='3'/%3E%3Crect x='40' y='152' width='92' height='6' rx='3'/%3E%3Crect x='40' y='178' width='60' height='6' rx='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat}
.rd .gp-lead h3{font-size:clamp(22px,2vw,27px);letter-spacing:-.025em;margin-bottom:10px}
.rd .gp-lead input[type="email"]{background:rgba(8,15,30,.85);border-radius:12px;padding:15px 16px;transition:border-color .2s ease-out,box-shadow .2s ease-out}
.rd .gp-lead input[type="email"]:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,212,255,.14)}
/* Checklist download, shown after the form is sent: it continues the same box, with the form button's shape.
   The class pair beats ".gp-lead p", which used to cancel the gap; the focus ring sits on the
   button's edge so it reads as one frame. */
.gp-lead .gp-download{margin:16px 0 0;max-width:520px}
.gp-lead .gp-download .btn-waitlist{display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none}
.gp-lead .gp-download a:focus-visible{outline-offset:0}
.rd .rd-with-lead .gp-lead,.rd .gp-lead:only-child{grid-template-columns:1fr}
.rd .rd-with-lead .gp-lead::after{display:none}
@media (max-width:760px){.rd .gp-lead{grid-template-columns:1fr}.rd .gp-lead::after{display:none}}

/* ─── SECURITY FACTS AS ONE LEDGER ─── */
.rd .gp-facts{gap:0;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--rd-panel)}
.rd .gp-facts li{background:none;border:0;border-radius:0;border-bottom:1px solid var(--border);padding:24px 26px 24px 66px;font-size:15.5px}
.rd .gp-facts li:last-child{border-bottom:0}
.rd .gp-facts li::before{left:26px;top:25px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,212,255,.14) var(--rd-check) center / 11px no-repeat;border:0}
.rd .rd-security .section-h2{max-width:16ch}

/* ─── TEAM ─── */
.rd .rd-team .gp-faces{gap:22px 36px;margin-top:32px}
.rd .rd-team .gp-face img{width:68px;height:68px;border:0;box-shadow:0 0 0 3px var(--navy),0 0 0 4px rgba(0,212,255,.45)}

/* ─── CLOSING ─── */
.rd .rd-closing{position:relative;
  background:radial-gradient(46% 56% at 50% 48%,rgba(26,107,255,.22),transparent 72%),var(--navy)}
.rd .rd-closing > .container{position:relative;z-index:1}
.rd .gp-closing .section-h2{font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.04em;max-width:980px}
.rd .gp-closing .section-intro{margin-bottom:36px}

/* ─── RENDY: FOUR STEPS ON A TIMELINE ─── */
.rd .rd-timeline{display:flex;flex-direction:column;gap:0;margin-top:0;position:relative}
.rd .rd-timeline .feature-card{position:relative}
.rd .rd-timeline .feature-card:not(:last-child)::before{content:"";position:absolute;left:23.5px;top:24px;bottom:-24px;width:1px;
  background:linear-gradient(180deg,var(--cyan),rgba(26,107,255,.5) 70%,rgba(26,107,255,.12))}
.rd .rd-timeline .feature-card{flex-direction:row;gap:28px;padding:0 0 52px;background:none;border:0;border-radius:0}
.rd .rd-timeline .feature-card:last-child{padding-bottom:0}
.rd .rd-timeline .rp-step-n{
  position:relative;isolation:isolate;width:48px;height:48px;font-size:18px;
  background:var(--navy);border:1px solid var(--border-2);color:var(--navy);box-shadow:0 0 0 10px var(--rd-bg,var(--navy));
  transition:color .35s ease-out .25s}
.rd .rd-timeline .rp-step-n::after{content:"";position:absolute;inset:-1px;border-radius:50%;z-index:-1;background:var(--grad);
  transition:opacity .5s var(--rd-ease) .25s}
.rd-js .rd .rd-timeline .feature-card:not(.visible) .rp-step-n{color:var(--cyan)}
.rd-js .rd .rd-timeline .feature-card:not(.visible) .rp-step-n::after{opacity:0}
.rd .rd-timeline .feature-h4{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;margin:8px 0 10px}
.rd .rd-timeline .feature-body{font-size:16px;line-height:1.75;max-width:60ch}

/* ─── RENDY: WHAT IT CHECKS, AS A CHECKLIST THAT TICKS ─── */
.rd .rd-with-lead{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,80px);align-items:start}
.rd .rd-with-lead.gp-narrow > *{max-width:none}
.rd .rd-with-lead .gp-lead{margin-top:6px;position:sticky;top:112px}
.rd .rd-checklist{margin-top:28px;border-top:1px solid var(--border)}
.rd .rd-checklist li{padding:19px 0 19px 46px;font-size:17px;border-bottom-color:var(--border)}
.rd .rd-checklist li:last-child{border-bottom:1px solid var(--border)}
.rd .rd-checklist li::before{left:0;top:21px;width:24px;height:24px;border-radius:7px;background:rgba(0,212,255,.10);border:1.5px solid rgba(0,212,255,.5);
  transition:background-color .3s ease-out}
.rd .rd-checklist li::after{content:"";position:absolute;left:6px;top:27px;width:12px;height:12px;background:var(--rd-check) center / contain no-repeat;
  transition:opacity .2s ease-out,transform .4s var(--rd-spring)}
.rd-js .rd .rd-checklist:not(.is-in) li::before{background-color:transparent}
.rd-js .rd .rd-checklist:not(.is-in) li::after{opacity:0;transform:scale(.3)}
.rd .rd-checklist li:nth-child(1)::after{transition-delay:.35s}
.rd .rd-checklist li:nth-child(2)::after{transition-delay:.47s}
.rd .rd-checklist li:nth-child(3)::after{transition-delay:.59s}
.rd .rd-checklist li:nth-child(4)::after{transition-delay:.71s}
.rd .rd-checklist li:nth-child(5)::after{transition-delay:.83s}
@media (max-width:900px){.rd .rd-with-lead{grid-template-columns:1fr}.rd .rd-with-lead .gp-lead{position:static}}

/* ─── RENDY: FITS / DOES NOT FIT YET ─── */
.rd .rd-fit .rp-cols{gap:20px;margin-top:44px;align-items:start}
.rd .rd-fit-yes,.rd .rd-fit-no{padding:clamp(28px,3.2vw,44px);border-radius:18px}
.rd .rd-fit-yes{background:var(--navy-2);border:1px solid var(--border);box-shadow:inset 0 2px 0 var(--cyan)}
.rd .rd-fit-no{background:var(--navy-2);border:1px solid var(--border);box-shadow:inset 0 2px 0 var(--gray)}
.rd .rd-fit .problem-h3{font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.rd .rd-fit .rp-list li{padding:15px 0 15px 36px;font-size:16px;border-bottom-color:var(--rd-hair)}
.rd .rp-list:not(.rd-checklist) li{padding-left:36px}
.rd .rp-list:not(.rd-checklist) li::before{left:0;top:16px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,212,255,.14) var(--rd-check) center / 11px no-repeat}
.rd .rp-list-no li::before{background:rgba(184,204,222,.08) var(--rd-minus) center / 11px no-repeat!important}

/* ─── RENDY: FAQ ─── */
.rd .rd-faq .rp-faq,.rd-read .rp-faq{margin-top:0;display:grid;gap:0;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#0A162B}
.rd .rp-faq details{border:0;border-radius:0;border-top:1px solid var(--border);background:transparent;transition:background-color .25s ease-out}
.rd .rp-faq details:first-of-type{border-top:0}
.rd .rp-faq details:hover{background:rgba(0,212,255,.025)}
.rd .rp-faq details[open]{background:rgba(13,31,60,.7)}
.rd .rp-faq summary{padding:20px 68px 20px 24px;font-size:17px;line-height:1.45}
.rd .rp-faq summary::after{
  top:16px;right:18px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:transform .3s var(--rd-ease),background-color .2s}
.rd .rp-faq details[open] summary::after{background:rgba(0,212,255,.10)}
.rd .rp-faq details > p{padding:0 24px}
.rd .rp-faq details p{font-size:15.5px}
@supports (interpolate-size:allow-keywords){
  .rd .rp-faq details{interpolate-size:allow-keywords}
  .rd .rp-faq details::details-content{block-size:0;overflow:clip;transition:block-size .26s var(--rd-ease),content-visibility .26s allow-discrete}
  .rd .rp-faq details[open]::details-content{block-size:auto}}

/* ═══════════════ OTHER PAGES ═══════════════ */

/* Candy and Richy: same eyebrow, heading and spacing language as the rest */
.rd h2.candy-h2,.rd h2.richy-h2{margin-top:0;font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.035em}
.rd .candy-intro,.rd .richy-intro{font-size:17px;line-height:1.72}
.rd .candy-section.rd-sec,.rd .richy-section.rd-sec{padding-block:clamp(48px,5vw,72px)}
.rd .candy-hero.rd-hero,.rd .richy-hero.rd-hero{padding-bottom:clamp(56px,6vw,88px)}
.rd .candy-pain-grid.rd-cells,.rd .richy-pain-grid.rd-cells,.rd .candy-feat-grid.rd-cells,.rd .richy-feat-grid.rd-cells{margin-top:48px}
.rd .rd-cells.candy-feat-grid > *,.rd .rd-cells.richy-feat-grid > *{padding:clamp(28px,3vw,40px)}

/* the scheme in the hero: one shared look for both products */
.rd .candy-mock,.rd .richy-mock,.rd .candy-docs-card,.rd .richy-alert-card{
  border-radius:20px;border-color:rgba(0,212,255,.24);
  background:linear-gradient(180deg,var(--navy-2),var(--navy-1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 50px 100px -30px rgba(0,0,0,.7),0 30px 120px -40px rgba(26,107,255,.5)}
.rd .richy-match{transition:border-color .2s ease-out}
.rd .richy-match-bars span{transform-origin:0 50%}

/* assemble: states set only by redesign.js */
.rd .rd-assemble.rd-pre [data-rd-i]{opacity:0;transform:translateY(8px)}
.rd .rd-assemble.rd-pre .richy-match-bars span{transform:scaleX(0)}
.rd .rd-assemble.rd-pre .candy-mock-mid .arrow,.rd .rd-assemble.rd-pre .richy-mock-arrow span{transform:scale(.6);opacity:0}
.rd .rd-assemble.rd-run [data-rd-i]{opacity:1;transform:none;transition:opacity .45s var(--rd-ease),transform .55s var(--rd-ease);transition-delay:var(--rd-k,0ms)}
.rd .rd-assemble.rd-run .richy-match-bars span{transform:none;transition:transform .9s var(--rd-ease-io);transition-delay:calc(var(--rd-k,0ms) + 120ms)}
.rd .rd-assemble.rd-run .candy-mock-mid .arrow,.rd .rd-assemble.rd-run .richy-mock-arrow span{transform:none;opacity:1;transition:transform .45s var(--rd-spring) .5s,opacity .2s ease-out .5s}

/* steps of Candy and Richy on one rail */
.rd .rd-steprail{--g:clamp(24px,3vw,44px);position:relative;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:56px}
.rd .rd-steprail::before{content:"";position:absolute;left:22px;right:calc((100% - 3 * var(--g)) / 4 - 22px);top:22px;height:1px;z-index:0;
  background:linear-gradient(90deg,var(--cyan),var(--blue) 60%,rgba(26,107,255,.2));transform-origin:0 50%;transition:transform 1.4s var(--rd-ease-io)}
.rd-js .rd .rd-steprail:not(.is-in)::before{transform:scaleX(0)}
.rd .rd-steprail > *{position:relative;z-index:1;padding:0;background:none;border:0;border-radius:0}
.rd .rd-steprail > *:hover{transform:none}
.rd .rd-steprail .candy-step-num,.rd .rd-steprail .richy-step-num{position:relative;isolation:isolate;width:44px;height:44px;border-radius:50%;
  font-size:16px;background:var(--rd-bg,var(--navy));border:1px solid var(--border-2);color:var(--navy);box-shadow:0 0 0 10px var(--rd-bg,var(--navy));transition:color .35s ease-out .25s}
.rd .rd-steprail .candy-step-num::after,.rd .rd-steprail .richy-step-num::after{content:"";position:absolute;inset:-1px;border-radius:50%;z-index:-1;background:var(--grad);transition:opacity .5s var(--rd-ease) .25s}
.rd-js .rd .rd-steprail > :not(.visible) .candy-step-num,.rd-js .rd .rd-steprail > :not(.visible) .richy-step-num{color:var(--cyan)}
.rd-js .rd .rd-steprail > :not(.visible) .candy-step-num::after,.rd-js .rd .rd-steprail > :not(.visible) .richy-step-num::after{opacity:0}
.rd .rd-steprail .candy-step-title,.rd .rd-steprail .richy-step-title{font-size:20px;margin:26px 0 10px}
.rd .rd-steprail .candy-step-desc,.rd .rd-steprail .richy-step-desc{font-size:15px;line-height:1.7}
@media (max-width:1024px){
  .rd .rd-steprail{grid-template-columns:1fr;--g:36px}
  .rd .rd-steprail::before{display:none}
  .rd .rd-steprail > :not(:last-child)::before{content:"";position:absolute;left:22px;top:22px;bottom:-58px;width:1px;z-index:-1;background:linear-gradient(180deg,var(--cyan),var(--blue))}
  .rd .rd-steprail > *{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:22px}
  .rd .rd-steprail .candy-step-num,.rd .rd-steprail .richy-step-num{grid-row:1 / span 2}
  .rd .rd-steprail .candy-step-title,.rd .rd-steprail .richy-step-title{margin-top:8px}}

/* waitlists */
.rd .candy-waitlist-box,.rd .richy-waitlist-box{border-radius:18px;border-color:rgba(0,212,255,.28);
  background:radial-gradient(120% 140% at 100% 0%,rgba(26,107,255,.24),transparent 55%),linear-gradient(180deg,rgba(13,31,60,.95),rgba(10,22,40,.95))}
.rd .candy-waitlist-form input[type=email],.rd .richy-waitlist-form input[type=email]{transition:border-color .2s ease-out,box-shadow .2s ease-out}
.rd .candy-waitlist-form input[type=email]:focus,.rd .richy-waitlist-form input[type=email]:focus{box-shadow:0 0 0 4px rgba(0,212,255,.14)}

/* cards that react to the pointer */
.rd .rd-lit{position:relative;overflow:hidden}
.rd .suite-card,.rd .team-card,.rd .candy-suite-card,.rd .richy-suite-card{transition:transform .28s var(--rd-ease),border-color .28s ease-out}
.rd .team-card:hover,.rd .candy-suite-card:hover,.rd .richy-suite-card:hover{transform:translateY(-4px);border-color:var(--border-2)}
.rd .suite-card{border-radius:18px}
.rd .suite-card-link{display:inline-flex;gap:6px}

/* About: the quote, the team */
.rd .gp-quote{position:relative;margin:40px 0;padding:6px 0 6px 30px;border-left:0;font-size:clamp(22px,2.4vw,30px);line-height:1.35;letter-spacing:-.02em}
.rd .gp-quote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--grad)}
.rd .gp-quote cite{font-size:14px;margin-top:14px;letter-spacing:0}
.rd .team-card{background:#0A162B;border-radius:18px}
.rd .team-photo{border:0;box-shadow:0 0 0 3px #0B1931,0 0 0 4px rgba(0,212,255,.5)}

/* Contact and demo: boxes, numbered steps, focus that shows */
.rd .gp-demo-box{border-radius:18px;border-color:rgba(0,212,255,.26);
  background:radial-gradient(120% 140% at 100% 0%,rgba(26,107,255,.2),transparent 55%),linear-gradient(180deg,rgba(13,31,60,.95),rgba(10,22,40,.95))}
.rd .gp-steps li::before{background:var(--grad);color:var(--navy);border:0;}
.rd .form-group input,.rd .form-group textarea,.rd .form-group select{transition:border-color .2s ease-out,box-shadow .2s ease-out}
.rd .form-group input:focus,.rd .form-group textarea:focus,.rd .form-group select:focus{box-shadow:0 0 0 4px rgba(0,212,255,.14)}
.rd .contact-channel{transition:border-color .2s ease-out,transform .28s var(--rd-ease)}
.rd a.contact-channel:hover{transform:translateY(-2px)}

/* ─── READING PAGES: security and guides ─── */
.rd-read .rd-sec{padding-block:clamp(32px,3.6vw,52px)}
.rd-read .rd-sec.gd-section{padding-top:112px}
.rd-read .section-h2{font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.rd .gp-tab,.rd .gd-tab{border-radius:16px;background:var(--rd-panel)}
.rd .gp-tab tr:hover td,.rd .gd-tab tr:hover td{background:rgba(0,212,255,.03)}
.rd .gd-toc a{transition:color .2s ease-out,border-color .2s ease-out}
.rd .gd-toc a.is-active{color:var(--white);border-left-color:var(--cyan)}
.rd .gd-check li{transition:background-color .2s ease-out}
.rd .gd-check li:hover{background:rgba(0,212,255,.03)}
.rd .gd-cta{border-radius:18px;border-color:rgba(0,212,255,.26);
  background:radial-gradient(120% 140% at 100% 0%,rgba(26,107,255,.22),transparent 55%),linear-gradient(180deg,rgba(13,31,60,.95),rgba(10,22,40,.95))}
.rd .gd-text h2{letter-spacing:-.02em}
.rd-readbar{position:fixed;left:0;right:0;top:68px;height:2px;z-index:199;pointer-events:none;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:768px){.rd-readbar{top:60px}}
@media print{.rd-readbar{display:none}}

/* ─── SCROLL REVEAL: softer curve, short stagger, visible without JavaScript ─── */
.rd .reveal{opacity:1;transform:none}
.rd-js .rd .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--rd-ease),transform .6s var(--rd-ease);transition-delay:var(--rd-d,0ms)}
.rd-js .rd .reveal.visible{opacity:1;transform:none}
.rd-js .rd-home .gp-hero .home-hero > *{animation:rd-up .8s var(--rd-ease) both}
.rd-js .rd-home .gp-hero .home-hero > :nth-child(2){animation-delay:.07s}
.rd-js .rd-home .gp-hero .home-hero > :nth-child(3){animation-delay:.14s}
.rd-js .rd-home .gp-hero .home-hero > :nth-child(4){animation-delay:.21s}
.rd-js .rd-home .gp-hero .home-hero > :nth-child(5){animation-delay:.28s}
.rd-js .rd .rd-hero .grad-text{animation:rd-underline 1s var(--rd-ease-io) .5s both}
@keyframes rd-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rd-underline{from{background-size:0% .085em}to{background-size:100% .085em}}

/* ─── SMALL SCREENS ─── */
@media (max-width:640px){
  .rd-persuade .rd-sec{padding-block:48px}
  .rd .gp-hero{padding:36px 0 72px}
  .rd .dash-stat{padding:14px 12px 12px}
  .rd .dash-stat-lbl{font-size:10px;letter-spacing:.06em}
  .rd .dash-row{font-size:13px;padding:13px 12px 13px 16px;flex-wrap:wrap}
  .rd .rd-timeline .feature-card{gap:20px;padding-bottom:40px}
  .rd .rd-timeline .rp-step-n{width:40px;height:40px;font-size:16px}
  .rd .rd-timeline .feature-card:not(:last-child)::before{left:19.5px;top:20px;bottom:-20px}
  .rd .gd-card{padding:26px 22px 22px}
  .rd .rp-faq summary{font-size:16px;padding:18px 60px 18px 18px}
  .rd .rp-faq details > p{padding:0 18px}
  .rd .gp-facts li{padding:20px 20px 20px 58px}
  .rd .gp-facts li::before{left:20px;top:21px}}


/* ═══════════════ PAGE EDGES AND BUTTON CONTRAST ═══════════════ */
/* one content edge for the whole page: same as the footer (1240px or the 5% gutter) */
.rd .container{max-width:calc(1240px + 10vw)}
.rd .candy-section,.rd .richy-section,.rd .candy-hero,.rd .richy-hero,.rd .candy-waitlist-section,.rd .richy-waitlist-section{padding-inline:5vw}
.rd .candy-container,.rd .richy-container{max-width:1240px}

/* gradient buttons: dark text, as style.css intended (a generic "a{color:inherit}" made it white, 1.8:1 on cyan) */
.landing-scope a.btn-primary,.landing-scope a.btn-cta,.landing-scope .drawer-cta,.landing-scope a.btn-waitlist{color:var(--navy)}
.landing-scope a.btn-primary:hover,.landing-scope a.btn-cta:hover{color:var(--navy)}

/* links: inline = cyan underlined; standalone = cyan, semibold, arrow */
.rd a.gp-link,.rd .gd-read-more,.rd a.suite-card-link{color:var(--cyan);font-weight:600}
.rd .home-trust a.gp-link{color:var(--gray-3)}

/* the right column starts on the heading's line, not on the label's */
@media (min-width:901px){.rd .rd-split .rd-body{padding-top:36px}}

/* reading measure */
.rd .gp-narrow .section-intro,.rd-read .gp-narrow > p,.rd-read .gp-narrow .rp-list,.rd-read .gp-narrow > ul{max-width:38em}
.rd .rd-guides .gp-lead,.rd .rd-guides .gp-mt + .gp-lead{margin-top:72px}
.rd .gd-text h3{font-size:20px;margin-top:32px;letter-spacing:-.01em}

/* forms on dark: dark native controls, brand accent */
.rd form,.rd .waitlist-form{color-scheme:dark}
.rd input[type=checkbox],.rd input[type=radio]{accent-color:var(--cyan)}
.rd .candy-waitlist-submit-row,.rd .richy-waitlist-submit-row{display:block}
.rd .candy-waitlist-submit-row > *,.rd .richy-waitlist-submit-row > *{width:100%;justify-content:center}

/* phones: hero text reads from the left edge, like the rest of the page */
@media (max-width:640px){
  .rd .gp-hero .home-hero{text-align:left}
  .rd .gp-hero .home-sub{margin-left:0}
  .rd .gp-hero .home-ctas{justify-content:flex-start}}

/* small screens: the outcome panel keeps its labels on one line */
@container (max-width:520px){
  .rd .dash-row{flex-wrap:wrap;row-gap:10px}
  .rd .dash-row .dash-row-name{flex:1 1 100%}
  .rd .rp-row .dash-row-name small{text-wrap:pretty}
  .rd .dash-stat-lbl{font-size:10px;letter-spacing:.03em;line-height:1.2;min-height:2.4em}
  .rd .dash-stat{padding:13px 11px 11px}
  .rd .dash-row{padding:13px 12px 13px 15px}}


/* Candy and Richy: same button radius, same label, tidy tiles */
.rd a.candy-cta-primary,.rd button.candy-cta-primary,.rd .candy-cta-secondary,.rd a.richy-cta-primary,.rd button.richy-cta-primary,.rd .richy-cta-secondary{border-radius:12px}
.rd .candy-status,.rd .richy-status{padding:0;border:0;background:none;border-radius:0;gap:10px;color:var(--gray-3);font-weight:600;letter-spacing:.12em}
.rd .candy-status-dot,.rd .richy-status-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.rd .candy-docs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the "problem" opening of every product page: same split, same lead */
.rd .rd-intro-stack h2{max-width:19ch!important}
.rd .rd-intro-stack .candy-intro,.rd .rd-intro-stack .richy-intro{margin-top:24px;font-size:clamp(18px,1.45vw,20px);line-height:1.65;color:var(--white);max-width:62ch!important}
.rd .gp-narrow > p{max-width:38em}

/* ═══════════════ LINE LENGTH AND LEAD PARAGRAPHS ═══════════════ */
.rd .section-h2,.rd h2.candy-h2,.rd h2.richy-h2{max-width:21ch;text-wrap:balance}
.rd .rd-split .section-h2{max-width:none}
.rd .gp-closing .section-h2{max-width:980px}
.rd .section-h2 + .section-intro,.rd .rd-split .rd-body > .section-intro:first-child,.rd .rd-problem .rd-body > p:first-child{font-size:18px;line-height:1.7;color:var(--gray-3);letter-spacing:0}
.rd:not(.rd-home) h1 .grad-text{background:none;padding-bottom:0;color:var(--cyan);-webkit-text-fill-color:var(--cyan);animation:none}
.rd .rd-fit .rp-cols{align-items:stretch}
.rd .gd-card{clip-path:none}
.rd .gd-card::before{content:none}
.rd .gd-tag{padding:0;border:0;border-radius:0;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--gray-2)}
.rd .btn-primary,.rd button.btn-primary,.rd a.candy-cta-primary,.rd button.candy-cta-primary,.rd a.richy-cta-primary,.rd button.richy-cta-primary{box-shadow:0 10px 24px -12px rgba(26,107,255,.8)}
.rd .btn-primary:hover,.rd a.candy-cta-primary:hover,.rd a.richy-cta-primary:hover{box-shadow:0 16px 30px -14px rgba(0,212,255,.7)}
.rd .candy-doc .candy-doc-bar{transform-origin:0 50%}
.rd .candy-doc:nth-child(2) .candy-doc-bar{width:85%}
.rd .candy-doc:nth-child(3) .candy-doc-bar{width:70%}
.rd .candy-doc:nth-child(4) .candy-doc-bar{width:25%;background:var(--gray)}
.rd .rd-team.rd-split .gp-faces{flex-wrap:wrap;gap:18px 32px;margin-top:32px}
.rd .rd-closing{background:radial-gradient(46% 56% at 50% 48%,rgba(26,107,255,.15),transparent 72%),transparent}
@container (max-width:520px){.rd .dash-stat-lbl{font-size:10.5px}.rd .rp-row .dash-row-name small{font-size:12px}}

/* ═══════════════ SECTION HEADERS; TRAFFIC-LIGHT COLOURS FOR STATUS ONLY ═══════════════ */
/* section header beside its heading when full-width content follows */
.rd .rd-headsplit.rd-split{align-items:end;margin-bottom:0}
.rd .rd-headsplit .rd-head{position:static}
.rd .rd-headsplit .rd-body{padding-top:0}
.rd .rd-headsplit .rd-body > *{margin:0;max-width:56ch}
.rd .rd-headsplit .section-h2,.rd .rd-headsplit h2{margin-bottom:0}
.rd .rd-headsplit + .rd-rail{margin-top:72px}
.rd .rd-headsplit + .rd-cells{margin-top:56px}
/* reading pages: heading in the left column, text at a reading measure on the right */
.rd-read .rd-split .rd-head{top:100px}
.rd-read .rd-split .section-h2{font-size:clamp(24px,2.3vw,30px);line-height:1.18}
.rd-read .rd-split .rd-body{padding-top:0}
.rd-read .rd-split .rd-body > :first-child{margin-top:0}
.rd .rd-split .rd-body .gp-tab + .section-intro,.rd .gp-tab + .section-intro{margin-top:24px}
.rd .rd-split .rd-body .rp-list{margin-top:0}
.rd-about .rd-split .rd-body .gp-quote{margin:32px 0}
/* Rendy hero: the buttons stay under the headline, the description sits beside it */
@media (min-width:961px){
  .rd-rendy .rd-hero-text{grid-template-rows:auto auto auto 1fr}
  .rd-rendy .rd-hero-a{grid-column:1;grid-row:2}
  .rd-rendy .rd-hero-b{display:contents}
  .rd-rendy .rd-hero-b > .section-intro{grid-column:2;grid-row:2 / span 3;align-self:start;padding-top:8px;margin:0}
  .rd-rendy .rd-hero-b > .rp-ctas-left{grid-column:1;grid-row:3;margin:32px 0 12px}
  .rd-rendy .rd-hero-b > .gp-note{grid-column:1;grid-row:4;max-width:44ch}}
/* founders: three even columns, nobody left alone on a row */
.rd .rd-team.rd-split .gp-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;flex-wrap:nowrap}
.rd .rd-team .gp-face{flex-direction:column;align-items:flex-start;gap:12px}
.rd .rd-team .gp-face img{width:56px;height:56px}
.rd .rd-team .gp-face strong{font-size:15px}
.rd .rd-team .gp-face span{font-size:13.5px}
@media (max-width:520px){.rd .rd-team.rd-split .gp-faces{grid-template-columns:1fr}.rd .rd-team .gp-face{flex-direction:row;align-items:center}}
/* fits / does not fit: one panel split down the middle */
.rd .rd-fit .rp-cols{gap:0;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--rd-panel)}
.rd .rd-fit-yes,.rd .rd-fit-no{border:0;border-radius:0;background:transparent}
.rd .rd-fit-yes{box-shadow:inset 0 2px 0 var(--cyan);border-right:1px solid var(--border)}
.rd .rd-fit-no{box-shadow:none}
@media (max-width:860px){.rd .rd-fit-yes{border-right:0;border-bottom:1px solid var(--border)}}
/* labels and statuses: quiet, sentence case; amber and red only mean the product's outcomes */
.rd .candy-status,.rd .richy-status{text-transform:none;letter-spacing:0;font-size:15px;color:var(--cyan)}
.rd .candy-status-dot,.rd .richy-status-dot{display:none}
.rd .team-role{text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--gray-2)}
.rd .status-soon,.rd .candy-suite-card-badge:not(.live):not(.current),.rd .richy-suite-card-badge:not(.live):not(.current){background:rgba(184,204,222,.08);color:var(--gray-3);border-color:rgba(184,204,222,.16)}
.rd .suite-chip-status{text-transform:none;letter-spacing:0}
/* problems read as "da guardare": the problem panels carry the amber edge, the rest stays neutral */
.rd .candy-pain-grid.rd-cells,.rd .richy-pain-grid.rd-cells{box-shadow:inset 0 2px 0 var(--amber)}

/* ═══════════════ SPLIT ALIGNMENT AND STATUS LABELS ═══════════════ */
/* every split: the text starts on the heading's first line */
@media (min-width:901px){
  .rd .rd-headsplit.rd-split{align-items:start}
  .rd .rd-headsplit .rd-body{padding-top:36px}
  .rd-rendy .rd-steps .rd-split .rd-body,.rd-rendy .rd-faq .rd-split .rd-body,.rd .rd-steps-split .rd-body{padding-top:53px}}
.rd .rd-split .rd-body > p,.rd .rd-headsplit .rd-body > *{max-width:62ch}
/* Candy and Richy steps: the same vertical timeline as Rendy */
.rd .rd-steps-split{display:grid}
.rd .rd-steps-split .rd-steprail{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:0}
.rd .rd-steps-split .rd-steprail::before{display:none}
.rd .rd-steps-split .rd-steprail > *{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:24px}
.rd .rd-steps-split .rd-steprail > :not(:last-child)::before{content:"";position:absolute;left:22px;top:22px;bottom:-62px;width:1px;z-index:-1;background:linear-gradient(180deg,var(--cyan),var(--blue))}
.rd .rd-steps-split .rd-steprail .candy-step-num,.rd .rd-steps-split .rd-steprail .richy-step-num{grid-row:1 / span 2}
.rd .rd-steps-split .rd-steprail .candy-step-title,.rd .rd-steps-split .rd-steprail .richy-step-title{margin:8px 0 8px}
.rd .rd-steps-split .rd-steprail .candy-step-desc,.rd .rd-steps-split .rd-steprail .richy-step-desc{font-size:16px;max-width:60ch}
/* one status vocabulary: the badge of the app (circle + mark) for every check list on the site */
.rd .rp-list:not(.rd-checklist) li::before,.rd .gp-facts li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%2300D4FF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat,rgba(0,212,255,.20);border:0}
.rd .rp-list-no li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%238DA4C4' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat,rgba(184,204,222,.12)!important}
/* panels that state what you get carry the cyan edge, the problem panels the amber one */
.rd .gp-facts{box-shadow:inset 0 2px 0 var(--cyan)}
.rd .candy-pain-grid.rd-cells,.rd .richy-pain-grid.rd-cells{box-shadow:inset 0 2px 0 var(--amber)}
/* phones: the supplier table becomes one card per supplier, nothing hidden off-screen */
@media (max-width:640px){
  .rd .gp-tab{overflow:visible}
  .rd .gp-tab table{min-width:0}
  .rd .gp-tab thead{display:none}
  .rd .gp-tab tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 16px;border-bottom:1px solid var(--border)}
  .rd .gp-tab tr:last-child{border-bottom:0}
  .rd .gp-tab td{padding:0;border:0}
  .rd .gp-tab td:nth-child(1){grid-column:1 / -1;color:var(--white)}
  .rd .gp-tab td:nth-child(2),.rd .gp-tab td:nth-child(3){font-size:13.5px;color:var(--gray-2)}
  .rd .gp-tab td:nth-child(3){text-align:right}}
@container (max-width:520px){.rd .dash-stat-lbl{white-space:nowrap;letter-spacing:.02em;min-height:0}}

/* the remaining check lists use the same circle badge (decorative lists must not look like checkboxes) */
.rd .rd-checklist li::before{border-radius:50%;border:0;background:rgba(0,212,255,.20);width:24px;height:24px}
.rd .rd-checklist li::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%2300D4FF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;left:6.5px;top:27.5px;width:11px;height:11px}
.rd-js .rd .rd-checklist:not(.is-in) li::before{background-color:rgba(0,212,255,.08)}
.rd .candy-bullet-tick,.rd .richy-bullet-tick{width:18px;height:18px;border-radius:50%;border:0;font-size:0;color:transparent;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%2300D4FF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat,rgba(0,212,255,.20)}

/* ═══════════════ SMALL SCREENS AND TOUCH ═══════════════ */
/* touch targets: standalone links and form controls at least 24 px tall (WCAG 2.2, 2.5.8) */
.rd a.gp-link,.rd .suite-card-link,.rd .gp-team-link,.rd .candy-suite-card a,.rd .candy-suite-card button,.rd .richy-suite-card a,.rd .richy-suite-card button{display:inline-flex;align-items:center;min-height:24px;padding-block:3px}
.rd .contact-channel a{display:inline-block;padding-block:4px}
.rd label:has(> input[type=checkbox]){min-height:24px}
.rd input[type=checkbox]{width:16px;height:16px}
.rd .waitlist-checks input[type=checkbox]{top:2px}
/* illustration labels never below 11 px */
.rd .candy-mock-mid span.label{font-size:11px}
@container (max-width:520px){.rd .dash-stat-lbl{font-size:11px;letter-spacing:0}}
/* phones: the bar under the menu is 60 px, the page starts right under it */
@media (max-width:768px){.landing-scope{padding-top:60px}}
/* small phones: the first buttons fit in the first screen */
@media (max-width:480px){
  .rd .gp-hero{padding-top:24px}
  .rd .gp-hero .gp-eyebrow{margin-bottom:12px;font-size:15px}
  .rd .gp-hero .home-tagline{font-size:clamp(28px,8.6vw,34px);margin-bottom:18px}
  .rd .gp-hero .home-sub{font-size:16px;line-height:1.6;margin-bottom:24px}
  .rd-rendy .rd-hero{padding-top:20px}
  .rd-rendy .rd-hero .gp-breadcrumbs{margin-bottom:10px}
  .rd-rendy .rd-hero-kick .section-eyebrow{margin-bottom:10px}
  .rd-rendy .rd-hero-text{display:flex;flex-direction:column}
  .rd-rendy .rd-hero-text .section-h1{font-size:clamp(27px,8.2vw,32px)}
  .rd-rendy .rd-hero-b{display:flex;flex-direction:column}
  .rd-rendy .rd-hero-b > .rp-ctas-left{order:-2;margin:22px 0 10px}
  .rd-rendy .rd-hero-b > .gp-note{order:-1;margin:0 0 18px}
  .rd-rendy .rd-hero-b > .section-intro{font-size:16px;line-height:1.65}}
/* phones held sideways: compact hero so the buttons are not pushed off the screen */
@media (orientation:landscape) and (max-height:500px){
  .rd .gp-hero{padding-top:16px}
  .rd .gp-hero .gp-eyebrow{margin-bottom:8px}
  .rd .gp-hero .home-tagline{font-size:32px;margin-bottom:12px}
  .rd .gp-hero .home-sub{font-size:15.5px;margin-bottom:18px}
  .rd-rendy .rd-hero{padding-top:16px}
  .rd-rendy .rd-hero-text{display:flex;flex-direction:column}
  .rd-rendy .rd-hero-text .section-h1{font-size:30px}
  .rd-rendy .rd-hero-b{display:flex;flex-direction:column}
  .rd-rendy .rd-hero-b > .rp-ctas-left{order:-2;margin:18px 0 8px;flex-direction:row}
  .rd-rendy .rd-hero-b > .gp-note{order:-1;margin:0 0 14px}}

/* Candy and Richy hero: on small phones and on phones held sideways the waitlist button fell below the first screen */
@media (max-width:400px){
  .rd .candy-hero.rd-hero,.rd .richy-hero.rd-hero{padding-top:24px}
  .rd .candy-logo-row,.rd .richy-logo-row{margin-bottom:14px}
  .rd .candy-hero-title,.rd .richy-hero-title{font-size:clamp(27px,8.4vw,31px);margin-top:14px}
  .rd .candy-hero-sub,.rd .richy-hero-sub{margin-top:16px}
  .rd .candy-hero-ctas,.rd .richy-hero-ctas{margin-top:22px}
}
@media (orientation:landscape) and (max-height:500px){
  .rd .candy-hero.rd-hero,.rd .richy-hero.rd-hero{padding-top:14px}
  .rd .candy-logo-row,.rd .richy-logo-row{margin-bottom:6px;transform:scale(.8);transform-origin:left center}
  .rd .candy-hero-title,.rd .richy-hero-title{font-size:30px;line-height:1.15;margin-top:8px}
  .rd .candy-hero-sub,.rd .richy-hero-sub{font-size:15px;line-height:1.55;margin-top:10px;max-width:68ch}
  .rd .candy-hero-ctas,.rd .richy-hero-ctas{margin-top:16px}
  .rd .candy-hero-grid,.rd .richy-hero-grid{grid-template-columns:minmax(0,1fr)}
}

/* ─── REDUCED MOTION: everything in its final state, no movement ─── */
@media (prefers-reduced-motion:reduce){
  .rd *,.rd *::before,.rd *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rd-js .rd .reveal{opacity:1;transform:none}
  .rd-js .rd .rd-stage:not(.visible) .dashboard-mock{transform:none}
  .rd-js .rd .rd-rail:not(.is-in)::before{transform:none}
  .rd-js .rd .rd-rail .feature-card:not(.visible)::after{transform:none}
  .rd-js .rd .rd-checklist:not(.is-in) li::after{opacity:1;transform:none}
  .rd-js .rd .rd-timeline .feature-card:not(.visible) .rp-step-n{color:var(--navy)}
  .rd-js .rd .rd-timeline .feature-card:not(.visible) .rp-step-n::after{opacity:1}
  .rd-js .rd .rd-steprail:not(.is-in)::before{transform:none}
  .rd-js .rd .rd-steprail > :not(.visible) .candy-step-num,.rd-js .rd .rd-steprail > :not(.visible) .richy-step-num{color:var(--navy)}
  .rd-js .rd .rd-steprail > :not(.visible) .candy-step-num::after,.rd-js .rd .rd-steprail > :not(.visible) .richy-step-num::after{opacity:1}}

/* inside section headings the highlighted words stay cyan, the underline is kept for the hero only */
.rd h2 .grad-text{background:none;color:inherit;-webkit-text-fill-color:currentColor;padding-bottom:0}

/* closing heading (Home, Rendy): three lines, always the same; the product name in the brand gradient */
.rd .gp-closing .gp-close-h{max-width:none;margin-left:auto;margin-right:auto;text-align:center;text-wrap:wrap;
  font-size:min(56px,max(18px,calc((100vw - 48px) / 16.4)))} /* the longest line is about 15.7 times the font size */
.rd .gp-close-h > span{display:block;white-space:nowrap}
.rd .gp-close-h .gp-brand{display:inline;color:#1A6BFF;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}