/* R4 · Opus · page-specific layer on top of ../shared/kl.css */
svg.i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px;flex:none}
.ico svg.i{width:24px;height:24px}
.btn svg.i{width:18px;height:18px}
.pill svg.i{width:14px;height:14px}
.ic-inline{display:inline-block;vertical-align:-3px;margin-right:6px;width:16px!important;height:16px!important}

.nw{white-space:nowrap}
h1,h2,h3{text-wrap:balance}

/* numbered eyebrows */
.eyebrow .no{font-style:normal;color:var(--blue);margin-right:2px}
.eyebrow::before{display:none}
.eyebrow .no::after{content:"";display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--line-2);vertical-align:middle;margin-left:10px}
.ink .eyebrow{color:#F49AC1}

/* hero */
.r4-hero{padding:64px 0 96px;background:radial-gradient(900px 480px at 85% 30%,var(--blue-50),transparent 70%),linear-gradient(180deg,#fff,#fff)}
.r4-hero h1{max-width:620px}
.r4-kicker{padding:8px 14px;font-size:.82rem}
.r4-hero .trust .num{display:flex;align-items:center;gap:8px}
.r4-hero .stars{font-size:.9rem;letter-spacing:1px;color:#FBBC05}

/* key facts band, overlaps the hero edge */
.keyfacts{position:relative;z-index:2;margin:-48px 0 0;display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.keyfacts div{padding:20px 22px;border-left:1px solid var(--line)}
.keyfacts div:first-child{border-left:0}
.keyfacts dt{font:700 .72rem/1 var(--f-head);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.keyfacts dd{margin:8px 0 0;font:700 1.08rem/1.2 var(--f-head);color:var(--ink)}
.keyfacts .kf-dead{background:var(--pink-50)}
.keyfacts .kf-dead dt{color:var(--pink)}

/* self-test */
.r4-test{padding-top:88px}
.tsteps{list-style:none;margin:28px 0 0;padding:0;counter-reset:t;display:grid;gap:14px}
.tsteps li{counter-increment:t;display:grid;grid-template-columns:36px 1fr;column-gap:14px;align-items:start}
.tsteps li::before{content:counter(t);grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blue-50);color:var(--blue);font:700 .95rem var(--f-head)}
.tsteps li:nth-child(3)::before{background:var(--pink-50);color:var(--pink)}
.tsteps b{font:700 1.06rem/1.35 var(--f-head);color:var(--ink);padding-top:6px}
.tsteps span{color:var(--muted);font-size:.95rem}
.timer-card{display:flex;gap:22px;align-items:center;margin-top:28px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-1)}
.timer{position:relative;width:112px;height:112px;flex:none}
.timer svg{width:112px;height:112px;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:8}
.timer .trk{stroke:var(--pink-50)}
.timer .prg{stroke:var(--pink);stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
.timer .tv{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.timer .tv b{font:700 1.6rem/1 var(--f-head);color:var(--ink)}
.timer .tv span{font:600 .7rem var(--f-head);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:4px}

/* recognition */
.prob .card h3{font-size:1.12rem}
.r4-bridge{display:flex;gap:14px;align-items:flex-start;max-width:860px;margin:40px auto 0;padding:20px 24px;border-radius:var(--r);background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue)}
.r4-bridge svg{color:var(--blue);width:24px;height:24px;margin-top:2px}
.r4-bridge b{color:var(--ink)}

/* why it works */
.r4-why{align-items:start}
.r4-why .ph{margin-top:40px}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pl{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.pl .ico{margin:0;width:42px;height:42px}
.pl h4{margin-bottom:4px}
.pl p{font-size:.92rem;line-height:1.5}
.pl small{display:inline-block;margin-top:8px;font:700 .74rem var(--f-head);color:var(--blue);background:var(--blue-50);padding:4px 8px;border-radius:6px}

/* a day */
.r4-day{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.dflow{list-style:none;margin:0;padding:0;display:grid;gap:0}
.dflow li{position:relative;display:flex;gap:18px;padding:0 0 26px}
.dflow li:last-child{padding-bottom:0}
.dflow li::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--blue-100)}
.dflow li:last-child::before{display:none}
.dflow .n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font:700 1rem var(--f-head);box-shadow:0 0 0 6px #fff}
.dflow li:nth-child(even) .n{background:var(--pink)}
.dflow h4{margin:8px 0 4px}
.dflow p{font-size:.97rem}
.r4-office{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:#fff}
.r4-office img{width:100%;height:auto;aspect-ratio:800/572;object-fit:cover}
.r4-office figcaption{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;font-size:.93rem;border-top:1px solid var(--line)}
.r4-office figcaption svg{color:var(--pink);margin-top:2px}
.r4-office figcaption b{color:var(--ink)}

/* app preview */
.r4-app .app-visual{position:relative;padding:28px 0;display:grid;place-items:center}
.r4-app .app-visual::before{content:"";position:absolute;inset:0 6%;border-radius:32px;background:linear-gradient(160deg,var(--blue-50),var(--pink-50))}
.r4-app .phone{position:relative}
.phone .tline svg.i{width:15px;height:15px}
.phone .up span{font:600 11px var(--f-body);color:var(--muted)}
.phone .up svg.i{width:20px;height:20px;margin:0 auto 4px;display:block}
.app-pts,.get{list-style:none;margin-left:0;margin-right:0;padding:0;display:grid;gap:20px}
.app-pts li,.get li{display:flex;gap:16px;align-items:flex-start}
.app-pts .ico,.get .ico{margin:0}
.app-pts h4,.get h4{margin-bottom:2px}
.app-pts p,.get p{font-size:.95rem}

/* day 1 vs day 10 */
.vs{display:grid;grid-template-columns:1fr 150px 1fr;gap:20px;align-items:center}
.clip{padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-1)}
.clip.on{border-color:var(--blue-100);box-shadow:var(--sh-2)}
.clip .frame{position:relative;aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg,#E9EEF4,#F6F8FB);display:grid;place-items:center;margin-bottom:18px;overflow:hidden}
.clip.on .frame{background:linear-gradient(135deg,var(--blue-100),var(--pink-50))}
.clip .frame .tag{position:absolute;left:12px;top:12px;background:#fff;border-radius:999px;padding:6px 12px;font:700 .78rem var(--f-head);color:var(--ink);box-shadow:var(--sh-1)}
.clip .frame .len{position:absolute;right:12px;bottom:12px;background:rgba(13,6,45,.75);color:#fff;border-radius:6px;padding:3px 8px;font:700 .75rem var(--f-head)}
.clip .play{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-2);color:var(--muted)}
.clip.on .play{color:var(--blue)}
.clip .play svg{width:24px;height:24px}
.clip h3{margin-bottom:6px}
.clip p{font-size:.97rem}
.vs-mid{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font:700 .82rem/1.35 var(--f-head);color:var(--muted)}
.vs-mid svg{width:30px;height:30px;color:var(--pink)}
.vs-foot{max-width:820px;margin:36px auto 0;text-align:center}
.vs-foot b{color:var(--ink)}
.chips,.roles{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips li,.roles li{padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:700 .85rem/1 var(--f-head);color:var(--ink)}
.roles{justify-content:flex-start}
.roles li{background:var(--blue-50);border-color:transparent;color:var(--blue-d)}

/* what you get */
.need{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.need ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.need li{display:flex;align-items:center;gap:8px;font:600 .95rem var(--f-head);color:var(--ink)}
.need svg{color:var(--blue)}

/* fit */
.fit .card{padding:30px}
.fit .checks{margin-top:18px}
.fit h3{display:flex;align-items:center;gap:10px}
.fit .yes{border-top:4px solid var(--blue)}
.fit .yes h3 svg{color:var(--blue)}
.fit .no{border-top:4px solid var(--line-2);background:#FBFCFD}
.fit .no h3 svg{color:var(--muted)}

/* offer */
.r4-offer .offer{max-width:1040px;margin:0 auto}
.r4-offer .offer h3{font-size:1.4rem}
.olabel{display:block;font:700 .74rem var(--f-head);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:10px}
.r4-offer .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.r4-offer .dl{padding-top:20px;border-top:1px solid var(--line)}
.cd-light div{background:#fff;border:1px solid var(--line)}
.cd-light b{color:var(--ink)}
.cd-light span{color:var(--muted)}

/* guarantee spacing (sits between offer and steps) */
.r4-guar{padding:64px 0}
.r4-guar .seal svg.i{width:34px;height:34px;margin:0 auto 4px;display:block}
.r4-guar h3{font-size:1.3rem}

/* sign-up steps use shared .steps */
.r4-join .steps{list-style:none;margin:0;padding:0}

/* final */
.r4-final .countdown{justify-content:center}
.r4-final .lead{color:#C9C7D6}
.r4-final .cta-note{color:#A9A6BC}

/* reviews: heading spacing only, .klr* untouched */
.r4-rev .sec-head{margin-bottom:40px}

@media (max-width:1024px){
  .keyfacts{grid-template-columns:repeat(3,1fr)}
  .keyfacts div:nth-child(4){border-left:0}
  .keyfacts div:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:860px){
  .r4-hero{padding:36px 0 80px}
  .r4-test{padding-top:64px}
  .r4-day{grid-template-columns:1fr;gap:32px}
  .vs{grid-template-columns:1fr;gap:12px}
  .vs-mid{flex-direction:row;justify-content:center;padding:4px 0}
  .vs-mid svg{transform:rotate(90deg);width:24px;height:24px}
  .r4-why .ph{margin-top:0}
  .r4-guar{padding:48px 0}
  .fit .card{padding:24px 20px}
}
@media (max-width:560px){
  .keyfacts{grid-template-columns:repeat(2,1fr)}
  .keyfacts div{padding:14px 16px}
  .keyfacts div:nth-child(4){border-left:1px solid var(--line)}
  .keyfacts div:nth-child(odd){border-left:0}
  .keyfacts div:nth-child(n+3){border-top:1px solid var(--line)}
  .keyfacts dd{font-size:1rem}
  .pillars{grid-template-columns:1fr}
  .timer-card{flex-direction:column;text-align:center}
  .timer-card .btn{width:100%}
  .r4-bridge{padding:18px}
  .r4-hero .trust{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:12px}
  .r4-hero .trust .num{font-size:1rem}
  .r4-hero .trust .g{gap:8px}
  .r4-hero .trust .g img{width:22px;height:22px}
  .r4-hero .stars{display:none}
}