/* One continuous scroll stage. Device views are live HTML, never app screenshots. */
.features-page { --feature-ink:#eef9fa; --feature-muted:#aac1cb; --feature-accent:#77e7db; background:#030b0f; }
.features-page main { isolation:isolate; }
.features-page .desktop-nav a[aria-current=page] { color:#b8fff4; text-decoration:underline; text-underline-offset:12px; text-decoration-color:#71e8dd; }
.feature-story { position:relative; }
.feature-stage { position:sticky; top:0; height:100svh; min-height:650px; margin-bottom:-100svh; perspective:1500px; isolation:isolate; overflow:clip; }
.feature-environment,.feature-stage-shade { position:absolute; inset:0; pointer-events:none; }
.feature-environment { background:url('/naventor-substation-v2.webp') 65% center/cover; opacity:.58; transform:scale(1.02); filter:saturate(.65); }
.feature-stage-shade { background:linear-gradient(90deg,#030b0ff5,#030b0faa 30%,#030b0f24 60%,#030b0f99),linear-gradient(180deg,#030b0f77,transparent 35%,#030b0f 99%); }
.feature-threads { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.6; }
.feature-threads path { fill:none; stroke:#71e9db; stroke-width:.8; stroke-dasharray:3 10; filter:drop-shadow(0 0 4px #71e9db); }
.feature-threads path:nth-child(2) { stroke-dasharray:190 300; stroke-width:1.3; }
.device-anchor { position:absolute; left:66%; top:52%; width:320px; height:710px; transform:translate(-50%,-50%) scale(var(--phone-scale,1)); z-index:5; perspective:1400px; }
.phone-aura { position:absolute; inset:15% -35%; border-radius:50%; background:radial-gradient(ellipse,#46e8d41a,transparent 65%); filter:blur(20px); pointer-events:none; }
.feature-phone { position:relative; width:100%; height:100%; transform:rotateY(-12deg) rotateZ(4deg); transform-style:preserve-3d; border:2px solid #95c5d0; border-radius:47px; padding:9px; background:linear-gradient(110deg,#b3e1e5 0%,#173d4d 2%,#02090e 4%,#07151c 94%,#8ad1d8 98%,#17313c); box-shadow:0 0 0 3px #09242b,0 0 0 5px #46687280,0 25px 60px #000c,-9px 2px 10px #92ffff23,2px 0 22px #6cf1e739; }
.device-side { position:absolute; right:-8px; top:24%; width:6px; height:60px; border:1px solid #7196a4; border-radius:4px; background:linear-gradient(90deg,#122e3a,#53828c,#08151b); transform:translateZ(-6px); }
.device-screen { position:relative; height:100%; border-radius:37px; background:radial-gradient(ellipse at 80% 0,#102c37,#040e14 45%); overflow:hidden; border:1px solid #314e58; display:flex; flex-direction:column; color:#dcedf2; }
.phone-reflection { position:absolute; inset:1px; border-radius:46px; pointer-events:none; background:linear-gradient(118deg,transparent 7%,#e1ffff0c 8%,transparent 27%,transparent 75%,#6feee505 91%); box-shadow:inset 1px 1px 2px #dbffff88; transform:translateZ(3px); }
.phone-top { height:36px; padding:10px 20px 0; display:flex; justify-content:space-between; align-items:center; font-size:11px; flex:none; position:relative; }.phone-top b { font-weight:600; }.phone-top > span { letter-spacing:3px; font-size:12px; }
.phone-island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:86px; height:23px; border-radius:22px; background:#000; box-shadow:inset 0 -1px 1px #263f4855; }.phone-island::after { content:""; position:absolute; right:12px; top:9px; width:5px; height:5px; background:#0d2f41; border-radius:50%; box-shadow:0 0 2px #2d7694; }
.phone-brandline { display:flex; align-items:center; justify-content:space-between; margin:15px 18px 8px; height:25px; flex:none; }.phone-brandline > span { font-size:10px; letter-spacing:.24em; color:#a2cad4; }.phone-brandline i { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:linear-gradient(130deg,#345c69,#123440); color:#dbf0f5; font-size:10px; font-style:normal; }
.phone-screens { position:relative; flex:1; margin:0 17px; min-height:0; }
.phone-view { position:absolute; inset:0; opacity:0; transform:translateY(12px); transition:opacity .35s,transform .5s; pointer-events:none; visibility:hidden; font-size:12px; line-height:1.45; overflow:auto; scrollbar-width:none; }
.phone-view.is-current { opacity:1; transform:none; pointer-events:auto; visibility:visible; }
.phone-view h2 { font-size:22px; font-weight:500; line-height:1.15; margin:5px 0 7px; letter-spacing:-.025em; }.phone-view h3 { font-size:14px; font-weight:500; letter-spacing:-.015em; line-height:1.3; margin:8px 0; }.phone-view p { font-size:12px; color:#a7c1cc; margin:6px 0 12px; line-height:1.55; }.phone-view small { font-size:10px; color:#8fb0bf; }.phone-view b { font-weight:500; }.phone-greeting { margin:7px 0 18px; }.phone-greeting > small { font-size:9px; letter-spacing:.13em; }.phone-greeting > span { color:#a9c6d1; font-size:12px; }.phone-greeting h2 { font-size:24px; }
.phone-card { border:1px solid #638fa03e; border-radius:11px; padding:13px; background:linear-gradient(135deg,#1c374366,#081a23cc); box-shadow:inset 0 1px 1px #b6ffff12; margin-bottom:12px; }
.project-cover { padding:12px; }.project-cover > small { font-size:9px; letter-spacing:.1em; }.project-cover img { display:block; width:100%; height:86px; object-fit:cover; border-radius:6px; margin-top:10px; }.phone-progress { height:4px; border-radius:8px; background:#24434f; margin:13px 0 7px; }.phone-progress i { display:block; width:76%; height:100%; background:linear-gradient(90deg,#56d4d8,#84f7e2); box-shadow:0 0 9px #67d5ca44; border-radius:8px; }
.phone-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }.phone-row > span { font-size:10px; color:#a6c7d3; }.phone-row > svg { width:20px; height:20px; color:#75e0d1; }.phone-label { margin:15px 0 9px; font-size:12px; }.phone-label > small { color:#79ddcf; }
.phone-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.phone-quick button { color:#ceeff0; background:linear-gradient(135deg,#1f3e4b66,#0a1b2466); border:1px solid #51839030; border-radius:8px; padding:10px 3px; display:grid; justify-items:center; gap:6px; font-size:10px; cursor:pointer; }.phone-quick svg { width:22px; height:22px; color:#9cddd9; }
.phone-task { width:100%; display:flex; align-items:center; gap:8px; padding:14px 0; background:none; border:0; border-bottom:1px solid #5274853d; color:#c9e2e9; text-align:left; cursor:pointer; }.phone-task > i { width:15px; height:15px; flex:none; border:1px solid #7ba3b4; border-radius:3px; color:#05232b; font-style:normal; display:grid; place-items:center; font-size:11px; }.phone-task[aria-pressed=true] > i { background:#72e6d7; border-color:#72e6d7; }.phone-task > span { flex:1; }.phone-task b { display:block; font-size:11px; }.phone-task small { display:block; margin-top:3px; font-size:9px; }.phone-task em { font-size:8px; font-style:normal; padding:3px 5px; border:1px solid currentColor; border-radius:15px; white-space:nowrap; }.phone-view .mint { color:#7ce6ce; }.warm { color:#efa99d; }.amber { color:#e2bf79; }
.phone-bottom { display:flex; align-items:center; justify-content:space-around; margin:8px 12px 0; border-top:1px solid #42616c44; padding-top:8px; height:52px; flex:none; }.phone-bottom button { display:grid; justify-items:center; gap:2px; color:#86acb8; background:none; border:0; padding:3px; cursor:pointer; }.phone-bottom svg { width:19px; height:19px; }.phone-bottom span { font-size:8px; }.phone-bottom .phone-add { width:37px; height:37px; border:1px solid #81f3e5; border-radius:50%; background:radial-gradient(circle,#1f5e64,#09242e); color:#b9fff2; font-size:26px; line-height:1; box-shadow:0 0 14px #4becd94d; }.phone-homebar { height:3px; width:90px; background:#b3d4dc44; border-radius:5px; margin:8px auto 7px; flex:none; }
.device-caption { display:block; text-align:center; margin-top:22px; color:#94b9c6; font-size:10px; letter-spacing:.14em; white-space:nowrap; }
.day-assignment { padding:16px; }.day-assignment > b { display:block; margin:12px 0 6px; font-size:12px; }.day-assignment > small { display:block; }.phone-divider { height:1px; background:#6c96a035; margin:14px 0; }
.phone-timeline { margin:17px 0; }.phone-timeline > div { position:relative; display:flex; align-items:start; gap:14px; padding:0 0 19px; }.phone-timeline time { font-size:11px; color:#73e2d4; padding-top:1px; }.phone-timeline b { font-size:12px; display:block; }.phone-timeline small { display:block; font-size:10px; margin-top:4px; }.phone-timeline i { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#6ee2d0; color:#06252c; flex:none; font-size:11px; font-style:normal; }.phone-timeline i::after { content:""; position:absolute; left:9px; top:24px; bottom:4px; width:1px; background:#71e7d280; }.phone-timeline > div:last-child i::after { display:none; }
.phone-assistant,.phone-notice { display:flex; align-items:center; gap:11px; padding:12px; border-radius:10px; background:#17615b2e; border:1px solid #69cdbc50; }.phone-assistant svg,.phone-notice svg { width:24px; height:24px; flex:none; color:#86e4d3; }.phone-assistant b,.phone-notice b { display:block; font-size:11px; }.phone-assistant small,.phone-notice small { display:block; margin-top:5px; font-size:10px; line-height:1.5; }
.recording { text-align:center; padding:18px 12px 7px; }.record-mic { display:grid; place-items:center; width:50px; height:50px; margin:0 auto 8px; border-radius:50%; color:#a9fff0; border:1px solid #6bc9c5; background:radial-gradient(circle,#22575f,#0c2732); box-shadow:0 0 25px #4be1d622; }.record-mic svg { width:25px; height:25px; }.recording > span { color:#83aebb; font-size:10px; }.recording p { text-align:left; margin:15px 0 8px; }.phone-wave { display:flex; align-items:center; justify-content:center; gap:3px; height:38px; }.phone-wave i { width:2px; height:6px; border-radius:2px; background:#72eadc; }.phone-wave .wave-1,.phone-wave .wave-5 { height:16px; }.phone-wave .wave-2,.phone-wave .wave-4 { height:27px; }.phone-wave .wave-3 { height:35px; }
.extracted dl { margin:13px 0 0; }.extracted dl > div { display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid #49748033; font-size:11px; }.extracted dt { color:#90acb9; }.extracted dd { margin:0; }
.phone-tabs { display:flex; justify-content:space-between; padding:6px 0 12px; border-bottom:1px solid #47738044; color:#a5c2cd; font-size:10px; }.phone-tabs .selected { color:#88f2e3; position:relative; }.phone-tabs .selected::after { content:""; position:absolute; inset:auto 0 -13px; height:2px; background:#6be3d6; }.approval-card { margin-top:20px; }.approval-card p { margin-top:12px; }.phone-chip { color:#d4bb80; border:1px solid #d6ab5644; background:#9c783322; border-radius:20px; padding:4px 7px; font-size:9px; }.phone-view .phone-hint { font-size:9px; text-align:center; color:#759ca9; }
.proof-summary { display:flex; align-items:center; gap:12px; }.phone-ring { width:95px; height:95px; flex:none; position:relative; }.phone-ring svg { width:100%; height:100%; transform:rotate(-90deg); }.phone-ring circle { fill:none; stroke:#26434e; stroke-width:6; }.phone-ring circle:last-child { stroke:#73e5dc; stroke-dasharray:78 100; filter:drop-shadow(0 0 5px #79e4d442); }.phone-ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:23px; }.proof-summary p { font-size:11px; margin:8px 0 0; line-height:1.8; }
.phone-export { display:flex; gap:10px; align-items:center; padding:13px 11px; color:#94f4e5; background:linear-gradient(130deg,#1b645b5c,#11363d); border:1px solid #68d8c988; border-radius:7px; font-size:11px; text-decoration:none; }.phone-export svg { width:19px; height:19px; }.phone-export > span { margin-left:auto; }
.handover-summary { text-align:center; padding:16px 12px; }.handover-summary > i { display:block; color:#7ce6d7; margin:auto; width:35px; height:35px; }.handover-summary h3 { font-size:19px; margin:12px 0 8px; }.phone-mini-stats { display:flex; justify-content:space-around; border-top:1px solid #47768344; padding-top:14px; margin-top:15px; }.phone-mini-stats span { color:#9ab7c4; font-size:10px; }.phone-mini-stats b { display:block; color:#e0f2f3; font-size:22px; margin-bottom:4px; }.phone-file { display:flex; gap:10px; align-items:center; padding:13px 0; border-bottom:1px solid #52768333; }.phone-file svg { width:23px; height:23px; color:#9fd2d8; }.phone-file > span { flex:1; }.phone-file b { display:block; font-size:11px; }.phone-file small { display:block; font-size:9px; margin-top:3px; }.phone-file > i { color:#8ce7d1; font-style:normal; }.phone-file + .phone-notice { margin-top:17px; }
.phone-connector { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #60879344; border-radius:9px; margin-bottom:10px; background:#122c3755; }.phone-connector > i { display:grid; place-items:center; width:31px; height:31px; border-radius:5px; background:#193a45; color:#89e5d6; font-style:normal; }.phone-connector b { display:block; font-size:13px; }.phone-connector small { display:block; margin-top:4px; }.phone-connector .ms-symbol { font-size:0; border-radius:0; background:conic-gradient(#7fba00 0 25%,#ffb900 0 50%,#00a4ef 0 75%,#f25022 0); box-shadow:inset 0 0 0 4px #12252e; }.phone-connector .excel-symbol { background:#15523e; color:#c4f0dd; }.import-preview { margin-top:16px; }.phone-table { display:grid; grid-template-columns:1fr 1fr; margin-top:12px; gap:0; }.phone-table > * { padding:9px 0; font-size:10px; border-bottom:1px solid #4a7b8930; }.phone-table > span { font-size:9px; color:#88abb8; }
.feature-floats { position:absolute; inset:0; pointer-events:none; z-index:6; }
.float-feature { position:absolute; display:flex; align-items:center; gap:14px; width:210px; padding:18px; border:1px solid #86d6d266; border-radius:13px; background:linear-gradient(130deg,#1c3e4bc9,#071a25cf); backdrop-filter:blur(12px); box-shadow:inset 1px 1px 2px #b9ffff40,0 10px 25px #0005; color:#e1f1f4; font-size:13px; line-height:1.4; }
.float-feature > svg { width:27px; height:27px; color:#a0ebe4; flex:none; }.float-feature small { display:block; margin-top:6px; color:#9bbac7; font-size:11px; line-height:1.45; }.float-a { left:43%; top:38%; transform:rotate(-3deg); }.float-b { left:79%; top:29%; transform:rotate(2deg); }.float-c { left:78%; top:70%; transform:rotate(-2deg); }
.feature-dots { position:absolute; right:22px; top:50%; transform:translateY(-50%); display:grid; gap:12px; z-index:10; }.feature-dots a { padding:4px 3px; text-decoration:none; font-size:10px; color:#77949f; border-right:1px solid #789eaa44; padding-right:10px; transition:color .3s,border-color .3s; }.feature-dots a[aria-current=step] { color:#a2fff0; border-color:#a2fff0; }
.feature-scroll-cue { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#90b7c4; font-size:10px; letter-spacing:.18em; display:flex; gap:18px; align-items:center; white-space:nowrap; }.feature-scroll-cue i { width:60px; height:1px; background:linear-gradient(90deg,#6ee9d8,transparent); }
.feature-step { position:relative; min-height:110svh; display:flex; align-items:center; padding:125px 5vw 90px; pointer-events:none; z-index:7; }
.feature-step:first-of-type { min-height:100svh; }
.feature-story-copy { width:37%; max-width:580px; pointer-events:auto; text-shadow:0 3px 28px #02080c; }
.feature-step.copy-right { justify-content:flex-end; }.feature-step.copy-right .feature-story-copy { width:39%; margin-right:3%; }
.features-page .feature-story-copy .eyebrow { font-size:11px; letter-spacing:.22em; color:#7ae4dd; line-height:1.8; margin-bottom:22px; }
.feature-story-copy h1,.feature-story-copy h2 { font-size:clamp(37px,3.4vw,62px); font-weight:400; letter-spacing:-.03em; line-height:1.1; margin:0 0 24px; color:#edf8fa; }
.feature-story-copy em,.catalogue-heading em,.feature-final em { font-style:normal; color:#72dfd6; }
.story-lead { color:#aec6d0; font-size:16px; line-height:1.7; max-width:485px; margin-bottom:30px; }
.story-points { display:grid; gap:24px; margin:30px 0; }.story-point { display:flex; gap:16px; align-items:start; }.story-point > i { display:grid; place-items:center; width:47px; height:47px; flex:none; border-radius:11px; border:1px solid #80d4d568; color:#b3efe9; background:linear-gradient(135deg,#214c5866,#07141f70); box-shadow:inset 0 1px 2px #c8ffff38; }.story-point svg { width:25px; height:25px; }.story-point h3 { font-size:16px; font-weight:500; letter-spacing:0; margin:1px 0 7px; }.story-point p { font-size:14px; color:#91afbd; line-height:1.55; margin:0; max-width:345px; }
.story-actions { display:flex; gap:12px; flex-wrap:wrap; }.features-page .story-actions .button { font-size:13px; padding:14px 18px; }.story-detail-link { display:inline-flex; align-items:center; gap:15px; color:#c7f4ef; text-decoration:none; font-size:14px; padding:10px 0; border-bottom:1px solid #6acdc451; }.story-detail-link svg { width:21px; height:21px; }
.features-page .feature-catalogue { position:relative; z-index:10; background:#030b0f; padding:110px max(5vw,24px); }
.catalogue-heading { max-width:850px; margin-bottom:45px; }.catalogue-heading h2,.feature-final h2 { font-size:clamp(30px,3.4vw,52px); font-weight:400; line-height:1.15; margin:18px 0 25px; }.catalogue-heading > p:last-child { color:#9db9c5; font-size:16px; line-height:1.65; max-width:700px; }
.features-page .status-legend { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; background:#0a1b2380; border:1px solid #6d9fab40; padding:26px; border-radius:13px; margin:0 0 45px; }.features-page .status-legend h2 { grid-column:1/-1; font-size:18px; color:#d7edf1; font-weight:500; margin:0; }.features-page .status-legend > div { padding:0; margin:0; border:0; }.features-page .status-legend p { color:#91adbb; font-size:14px; line-height:1.55; margin:12px 0 0; }
.features-page .status { font-size:12px; font-weight:400; border:1px solid; }.features-page .status-ready { color:#97dfc8; border-color:#469e8166; background:#1f6b5033; }.features-page .status-config { color:#ddc48e; border-color:#ad8a4655; background:#68552c30; }.features-page .status-vision { color:#a6baca; border-color:#677f9644; background:#2b405433; }
.features-page .feature-section { display:block; padding:0; min-height:0; margin:0; background:transparent; border:0; border-bottom:1px solid #739ead3d; scroll-margin-top:100px; }
.features-page .feature-section details { width:100%; }.feature-section summary { list-style:none; display:flex; justify-content:space-between; gap:25px; align-items:center; padding:28px 0; font-size:22px; line-height:1.35; cursor:pointer; color:#d3e7ed; }.feature-section summary::-webkit-details-marker { display:none; }.feature-section summary > span { font-size:24px; color:#7dddd4; transition:transform .25s; }.feature-section details[open] summary > span { transform:rotate(45deg); }
.features-page .feature-copy { padding:0 0 32px; max-width:100%; }.features-page .feature-copy > p { max-width:850px; color:#9ebbc6; font-size:16px; line-height:1.7; }.features-page .feature-copy .eyebrow { color:#72d6d1; font-size:12px; }
.features-page .feature-list { display:grid; grid-template-columns:1fr 1fr; column-gap:40px; }.features-page .feature-list article { border-color:#537b8a38; gap:20px; }.features-page .feature-list h3 { color:#dceef2; font-size:16px; font-weight:500; letter-spacing:0; }.features-page .feature-list p { color:#8faebb; font-size:14px; line-height:1.65; }.features-page .feature-list .status { max-width:155px; line-height:1.4; }
.feature-final { padding:90px 0 0; text-align:center; }.feature-final .button { margin:5px; }.features-page .site-footer { position:relative; z-index:11; }
.features-page a:focus-visible,.features-page button:focus-visible,.features-page summary:focus-visible { outline:2px solid #a4ffee; outline-offset:4px; }.phone-view button:focus-visible,.phone-bottom button:focus-visible { outline-offset:1px; }
/* Without scripting the full catalogue still works and the overview stays visible. */
@media(min-width:1800px) { .device-anchor { --phone-scale:1.2; }.feature-story-copy h1,.feature-story-copy h2 { font-size:64px; }.story-lead { font-size:18px; }.float-feature { width:245px; padding:22px; font-size:15px; }.float-feature small { font-size:12px; }.float-a { left:44%; }.float-b,.float-c { left:78%; } }
@media(max-height:800px) and (min-width:1001px) { .device-anchor { --phone-scale:.84; top:54%; }.feature-story-copy h1,.feature-story-copy h2 { font-size:40px; }.story-points { gap:15px; margin:20px 0; }.story-lead { font-size:15px; margin-bottom:20px; }.story-point p { font-size:13px; }.feature-step { padding-top:105px; padding-bottom:60px; }.float-feature { padding:13px; width:180px; }.float-a { left:43%; }.float-b,.float-c { left:78%; } }
@media(max-width:1200px) and (min-width:901px) { .device-anchor { --phone-scale:.87; left:70%; }.feature-story-copy { width:42%; }.feature-story-copy h1,.feature-story-copy h2 { font-size:39px; }.float-feature { width:160px; padding:13px; gap:8px; font-size:11px; }.float-feature small { font-size:10px; }.float-feature > svg { width:21px; }.float-a { left:45%; top:28%; }.float-b { left:82%; top:60%; }.float-c { display:none; }.feature-dots { right:12px; }.feature-step.copy-right .feature-story-copy { width:43%; margin-right:0; } }
@media(max-width:900px) {
 .feature-stage { min-height:0; height:100svh; margin-bottom:-100svh; }.feature-environment { background-position:67%; opacity:.38; }.feature-stage-shade { background:linear-gradient(180deg,#030b0f88,transparent 35%,#030b0fe8 66%,#030b0f); }
 .device-anchor { left:50%; top:32%; --phone-scale:.62; }.feature-floats { display:none; }.feature-threads { opacity:.3; }.feature-dots { right:10px; top:32%; gap:5px; }.feature-dots a { font-size:10px; }.device-caption { font-size:11px; }.feature-scroll-cue { display:none; }
 .feature-step { min-height:115svh; padding:57svh 26px 60px; align-items:flex-start; }.feature-step:first-of-type { min-height:115svh; }.feature-story-copy,.feature-step.copy-right .feature-story-copy { width:100%; max-width:600px; margin:0 auto; }.feature-step.copy-right { justify-content:initial; }
 .feature-story-copy h1,.feature-story-copy h2 { font-size:34px; margin-bottom:18px; }.features-page .feature-story-copy .eyebrow { font-size:10px; margin-bottom:14px; }.story-lead { font-size:15px; line-height:1.6; margin-bottom:18px; }.story-points { gap:16px; margin:20px 0; grid-template-columns:1fr 1fr; }.story-point { gap:10px; }.story-point > i { width:34px; height:34px; border-radius:8px; }.story-point svg { width:19px; height:19px; }.story-point h3 { font-size:14px; }.story-point p { font-size:12px; }.story-actions { margin-top:20px; }.features-page .feature-catalogue { padding:65px 24px; }.features-page .feature-list { grid-template-columns:1fr; }.features-page .status-legend { gap:20px; padding:22px; }.features-page .status-legend > div { display:block; }.features-page .status-legend .status { font-size:11px; }.feature-section summary { font-size:20px; }.features-page .feature-copy > p { font-size:15px; }
}
@media(max-width:540px) { .device-anchor { --phone-scale:.49; top:30%; }.feature-step { padding:53svh 20px 65px; min-height:125svh; }.feature-step:first-of-type { min-height:125svh; }.feature-story-copy h1,.feature-story-copy h2 { font-size:31px; }.story-points { grid-template-columns:1fr; gap:15px; }.story-point p { font-size:13px; }.story-point h3 { font-size:15px; }.story-point > i { width:38px; height:38px; }.story-lead { font-size:15px; }.feature-dots { top:30%; }.features-page .story-actions .button { font-size:12px; padding:13px 15px; }.features-page .status-legend { grid-template-columns:1fr; }.features-page .feature-list article { grid-template-columns:1fr; gap:10px; padding:22px 0; }.features-page .feature-list .status { max-width:none; justify-self:start; }.catalogue-heading h2,.feature-final h2 { font-size:30px; }.feature-section summary { font-size:18px; }.feature-final { padding-top:50px; } }
.phone-greeting { margin-bottom:12px; }
.phone-greeting h2 { font-size:23px; }
.phone-card { margin-bottom:10px; }
.phone-timeline > div { padding-bottom:16px; }
.phone-notice { padding:10px; }
.phone-connector { padding:12px; }
.phone-table > * { padding:7px 0; }
.features-page h1,.features-page h2,.features-page h3 { hyphens:none; }
.phone-reflection { background-position:calc(var(--sheen,0) * 130px) 0; }
@media(min-width:1201px) { .float-feature { width:12%; max-width:220px; padding:15px; gap:10px; }.float-feature > svg { width:23px; height:23px; }.float-feature small { font-size:10px; }.float-a { width:13%; } }
@media(max-width:1200px) and (min-width:901px) { .feature-floats { display:none; } }
@media(max-width:900px) { .device-anchor { top:32%; }.device-caption { display:none; } }
@media(max-width:540px) { .device-anchor { top:30%; } }
@media(prefers-reduced-motion:reduce) { .phone-view,.phone-reflection,.feature-dots a { transition:none; }.feature-phone { transform:none; }.feature-threads { display:none; } }