/* Illustrated feature journey. All rules stay scoped to the four feature panels. */
@font-face{font-family:Sora;src:url('/fonts/sora-semibold.ttf');font-weight:600;font-display:swap}
#features{background:#2563EB;color:#fff}
#features .features-stage{top:var(--site-header-height,58px);height:calc(100svh - var(--site-header-height,58px));min-height:0;background:#2563EB;padding:24px 0 76px;overflow:hidden}
#features .feature-heading{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%)}
/* The clipping edge belongs to the viewport; each slide owns its inner padding. */
#features .rail-clip{width:100%;max-width:none;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;flex-shrink:0}
#features .rail{width:100%;display:flex;will-change:transform}
#features .feature{flex:0 0 100%;width:100%;min-width:0;min-height:0;display:grid;grid-template-columns:.8fr 1.45fr;align-items:center;align-content:center;gap:3vw;padding:12px max(4.8vw,24px);background:transparent;border:0;border-radius:0}
#features .feature-copy{padding-left:0;max-width:470px}
#features .feature-copy h3{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:clamp(34px,3.5vw,54px);line-height:1.1;letter-spacing:-.055em;color:#fff}
#features .feature-copy p{font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:#fff;margin-top:25px;max-width:370px}
#features .product-mock{width:100%;max-width:820px!important;min-width:0;margin:0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;opacity:1;transform:translateY(calc((1 - var(--detail,1))*10px))}
#features .feature-illustration{display:block;width:100%;height:auto;aspect-ratio:10/7;max-height:calc(100svh - 245px);object-fit:contain}
#features .stage-nav{background:#fff;border:1px solid #DEDEDE;padding:5px;gap:4px;border-radius:999px;margin:16px auto 0;box-shadow:none;flex-shrink:0}
#features .stage-nav button{border:0;background:transparent;color:#626262;font-size:13px;min-height:44px;padding:10px 24px;border-radius:999px}
#features .stage-nav button:hover{background:#EFF6FF;color:#1D4ED8}
#features .stage-nav button[aria-current=step]{background:#2563EB;color:white}
#features .stage-nav button:focus-visible{outline:2px solid #2563EB;outline-offset:3px}
#features .journey-track{width:160px;height:2px;background:rgba(255,255,255,.3);margin-top:15px;flex-shrink:0}
#features .journey-track i{background:#fff}
#features .scene-foot{color:#fff;font-size:11px;padding:18px max(4vw,24px)}
#features .scene-foot a{color:#fff}
#features .scene-foot a:hover{text-decoration:underline}
#features .scene-foot a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
body.reading #features .features-stage{height:auto;min-height:0;position:relative;top:auto;overflow:visible;padding:36px 0}
body.reading #features .rail-clip{overflow:visible}
body.reading #features .rail{display:grid;gap:0;transform:none!important}
body.reading #features .feature{padding-block:52px;border-bottom:1px solid rgba(255,255,255,.3)}
body.reading #features .feature-illustration{max-height:none}
@media(max-width:1050px) and (min-width:901px){
 #features .feature{grid-template-columns:.8fr 1.25fr;gap:20px}
 #features .feature-copy h3{font-size:35px}
 #features .feature-copy p{font-size:15px}
}
@media(max-width:900px){
 #features .features-stage{padding:24px 0 72px}
 #features .feature{grid-template-columns:1fr;gap:20px;padding:8px max(5vw,24px);justify-items:center}
 #features .feature-copy{width:100%;max-width:600px}
 #features .feature-copy h3{font-size:39px;letter-spacing:-.055em}
 #features .feature-copy p{font-size:15px;max-width:480px;margin-top:18px}
 #features .product-mock{max-width:610px!important}
 #features .feature-illustration{max-height:calc(100svh - 450px);min-height:200px}
 #features .stage-nav{margin-top:12px}
}
@media(max-width:540px){
 #features .features-stage{padding:20px 0 66px}
 #features .feature{padding:6px 24px;gap:24px}
 #features .feature-copy h3{font-size:34px;line-height:1.12}
 #features .feature-copy p{font-size:14px;line-height:1.6;margin-top:18px;max-width:340px}
 #features .product-mock{width:calc(100% + 22px);max-width:none!important;margin-left:-11px}
 #features .feature-illustration{max-height:none;min-height:0}
 #features .stage-nav{padding:4px;gap:2px;margin-top:18px;max-width:calc(100% - 32px)}
 #features .stage-nav button{font-size:12px;min-height:42px;padding:9px 17px}
 #features .journey-track{width:130px;margin-top:12px}
 #features .scene-foot{font-size:9px;padding:16px 20px}
 body.reading #features .feature{padding:40px 24px}
}
@media(max-height:800px) and (min-width:901px){
 #features .features-stage{padding-top:10px;padding-bottom:68px}
 #features .feature-copy h3{font-size:clamp(32px,3.4vw,46px)}
 #features .feature-copy p{font-size:15px;margin-top:22px}
 #features .feature-illustration{max-height:calc(100svh - 220px)}
 #features .stage-nav{margin-top:6px}
}
@media(max-height:750px) and (max-width:540px){
 #features .features-stage{padding-top:12px;padding-bottom:60px}
 #features .feature{gap:16px}
 #features .feature-copy h3{font-size:29px}
 #features .feature-copy p{font-size:13px;margin-top:12px}
 #features .stage-nav{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){#features .product-mock{transform:none!important;opacity:1!important}}
/* Wide, short phones keep the whole illustration and chapter controls in view. */
@media(max-height:750px) and (max-width:540px){
 #features .feature-illustration{max-height:calc(100svh - 400px)}
 body.reading #features .feature-illustration{max-height:none}
}