/* Section five: what's inside. The features are shown, not explored: the section holds still while the visitor scrolls,
   and each scroll step brings in the next feature. Left: its number, name and one sentence. Right: a stage (the founder's
   spotlight image) where the feature's short animation, built from pieces of the app, plays by itself. */
.s-feat { position: relative; display: block; min-height: 0; padding: 140px 0 0; background: #000; }
.s5wrap { width: min(1080px, calc(100vw - 48px)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.f-scroll { position: relative; height: 460vh; }            /* six steps; one scroll glides to the next (s5.js) */
.f-pin { position: sticky; top: 0; height: 100vh; width: min(1240px, calc(100vw - 48px)); margin: 0 auto; box-sizing: border-box; padding-top: 72px;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

/* left: the words */
.f-side { display: flex; flex-direction: column; gap: 28px; }
.f-count { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); letter-spacing: .08em; color: rgba(237,237,232,.4); font-size: 13px; }
.f-count b { font-weight: 400; font-size: 13px; color: #e8283f; }
.f-copy { display: flex; flex-direction: column; }
.f-copy h3 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-family: var(--display); font-weight: 300; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.08; letter-spacing: -.005em; color: #edede8; }
.f-tag { font-style: normal; font-family: var(--text); font-size: 12px; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(237,237,232,.3); color: rgba(237,237,232,.8); }
.f-tag.soon { background: #edede8; color: #070708; border-color: #edede8; }
.f-tag[hidden] { display: none; }
.f-copy p { margin: 18px 0 0; max-width: 26em; font-size: 17px; line-height: 1.6; color: rgba(237,237,232,.62); }
.f-copy.swap h3, .f-copy.swap p { animation: f-in .6s cubic-bezier(.16,1,.3,1) both; } .f-copy.swap p { animation-delay: .06s; }
/* six short marks: done, current (bone), still to come */
.f-steps { display: flex; gap: 6px; }
.f-steps i { width: 28px; height: 2px; border-radius: 2px; background: rgba(237,237,232,.14); transition: background .4s; }
.f-steps i.done { background: rgba(237,237,232,.45); } .f-steps i.cur { background: #edede8; }

/* right: the stage, lit by the spotlight image */
.f-stage { position: relative; width: 100%; height: min(70vh, 620px); border-radius: clamp(22px, 2.6vw, 40px); overflow: hidden;
  background: #050505 url("s5-stage.webp") center 60% / cover no-repeat; border: 1px solid rgba(237,237,232,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.f-scene { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 6%; opacity: 0; visibility: hidden;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), visibility 0s linear .6s; }
.f-scene.on { opacity: 1; visibility: visible; transition: opacity .6s cubic-bezier(.16,1,.3,1) .15s, visibility 0s; }
@media (max-width: 900px) {
  .f-pin { grid-template-columns: 1fr; align-content: center; gap: 24px; padding-top: 64px; }
  .f-stage { height: 46vh; }
  .f-copy h3 { font-size: 30px; } .f-copy p { font-size: 15px; }
}

/* the app pieces */
.f-win { width: min(520px, 86%); border-radius: 12px; background: #0B0B0C; border: 1px solid #252422; overflow: hidden;
  box-shadow: 0 40px 90px -24px rgba(0,0,0,.9), 0 12px 30px -10px rgba(0,0,0,.6);
  font-family: "Segoe UI Variable Text", "Segoe UI", "Geist", system-ui, sans-serif; color: #EDEDE8; }
.f-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-size: 14.5px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.06); }
.f-head i { font-style: normal; font-weight: 400; color: #9A9A92; }
.f-live { width: 7px; height: 7px; border-radius: 50%; background: #9A9A92; animation: f-pulse 1.6s ease-in-out infinite; }
.f-row { display: flex; align-items: center; gap: 12px; padding: 15px 20px; font-size: 14.5px; border-top: 1px solid rgba(255,255,255,.04); }
.f-row span { flex: 1; } .f-row b, .f-row em { font-style: normal; font-weight: 400; font-family: "Cascadia Mono", "Geist Mono", monospace; font-size: 12.5px; color: #9A9A92; }
.f-row b { color: #e8283f; }

/* every scene starts hidden and plays in when its stage turns on (.play restarts it) */
.f-scene .f-row, .f-scene .f-log, .f-scene .f-note, .f-scene .f-q, .f-scene .f-a, .f-scene .f-dots, .f-scene .f-page { opacity: 0; }
@keyframes f-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes f-fade { to { opacity: 1; } }
@keyframes f-pulse { 50% { opacity: .35; } }

/* 3 startup cleanup: the usual list; a stranger slips onto the end, is flagged, then taken out */
.play[data-f="2"] .plain { animation: f-fade .5s ease .2s forwards; }
.f-intruder { max-height: 60px; overflow: hidden; }
.play[data-f="2"] .f-intruder { animation: f-in .6s cubic-bezier(.16,1,.3,1) 1s forwards, f-flag .5s ease 1.9s forwards, f-leave .6s cubic-bezier(.7,0,.84,0) 3.2s forwards; }
@keyframes f-flag { to { background: rgba(232,40,63,.08); box-shadow: inset 2px 0 0 #e8283f; } }
@keyframes f-leave { to { opacity: 0; transform: translateX(40px); max-height: 0; padding-top: 0; padding-bottom: 0; } }
[data-f="2"] .f-intruder b { color: #e8283f; }
.f-note { padding: 14px 20px; font-size: 13.5px; color: #9A9A92; border-top: 1px solid rgba(255,255,255,.04); }
.play[data-f="2"] .f-note { animation: f-in .6s cubic-bezier(.16,1,.3,1) 3.8s forwards; }

/* 5 the record: plain sentences write themselves, one line at a time */
.f-log { display: flex; gap: 16px; padding: 14px 20px; font-size: 14.5px; line-height: 1.5; border-top: 1px solid rgba(255,255,255,.04); }
.f-log span { width: 44px; flex: none; font-family: "Cascadia Mono", "Geist Mono", monospace; font-size: 12.5px; color: #9A9A92; padding-top: 2px; }
.play[data-f="4"] .f-log { animation: f-in .6s cubic-bezier(.16,1,.3,1) forwards; }
.play[data-f="4"] .l1 { animation-delay: .4s; } .play[data-f="4"] .l2 { animation-delay: 1.5s; } .play[data-f="4"] .l3 { animation-delay: 2.6s; }
.f-log.l2 { box-shadow: inset 2px 0 0 #e8283f; }

/* 6 ask malphas: the question types, a pause, a plain answer */
.f-chat { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.f-q { align-self: flex-end; padding: 11px 15px; border-radius: 14px 14px 4px 14px; background: #1F1E1D; font-size: 14.5px; }
.f-type2 { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; }
.play[data-f="5"] .f-q { animation: f-fade .3s ease .2s forwards; } .play[data-f="5"] .f-type2 { animation: f-typing2 1.3s steps(31) .4s forwards; }
@keyframes f-typing2 { to { width: 31ch; } }
.f-dots { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); }
.f-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9A9A92; animation: f-pulse 1s ease-in-out infinite; } .f-dots i:nth-child(2) { animation-delay: .15s; } .f-dots i:nth-child(3) { animation-delay: .3s; }
.play[data-f="5"] .f-dots { animation: f-fade .3s ease 1.9s forwards, f-out .2s ease 2.9s forwards; }
.f-a { align-self: flex-start; max-width: 88%; padding: 11px 15px; border-radius: 14px 14px 14px 4px; border: 1px solid rgba(255,255,255,.1); font-size: 14.5px; line-height: 1.5; color: #dcdbd5; }
.play[data-f="5"] .f-a { animation: f-in .6s cubic-bezier(.16,1,.3,1) 3s forwards; }

@media (prefers-reduced-motion: reduce) { .f-scene * { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* 1 sandbox: a dark program window inside a thin barrier of light. The barrier draws itself around the program; the program
   keeps installing; three times it reaches out, the line stops at the barrier, that spot flares red, and the target is
   not reached */
.f-sbx { width: min(660px, 94%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.f-field { position: relative; padding: 34px 34px; }
/* the barrier: one closed outline of light with rounded corners; it forms around the program (fades in and settles
   inward), then breathes softly */
.f-barrier { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; border: 1px solid rgba(237,237,232,.55);
  background: rgba(237,237,232,.025); box-shadow: 0 0 14px rgba(237,237,232,.16), inset 0 0 20px rgba(237,237,232,.05); opacity: 0; transform: scale(1.08); }
.play[data-f="0"] .f-barrier { animation: f-form .9s cubic-bezier(.16,1,.3,1) .5s forwards, f-breathe 3s ease-in-out 1.6s infinite; }
@keyframes f-form { to { opacity: 1; transform: none; } }
@keyframes f-breathe { 0%, 100% { opacity: 1; transform: none; border-color: rgba(237,237,232,.55); } 50% { opacity: 1; transform: none; border-color: rgba(237,237,232,.36); } }

.f-app { position: relative; z-index: 1; border-radius: 10px; overflow: hidden; background: #0B0B0C; border: 1px solid #252422; color: #EDEDE8;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Geist", system-ui, sans-serif; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9); opacity: 0; }
.play[data-f="0"] .f-app { animation: f-in .6s cubic-bezier(.16,1,.3,1) .1s forwards; }
.f-app-bar { padding: 10px 14px; font-family: "Cascadia Mono", "Geist Mono", monospace; font-size: 12px; color: #9A9A92; border-bottom: 1px solid rgba(255,255,255,.06); }
.f-app-body { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.f-app-title { font-size: 14px; font-weight: 500; }
.f-prog { height: 4px; border-radius: 2px; background: #1F1E1D; overflow: hidden; } .f-prog i { display: block; height: 100%; width: 5%; background: #EDEDE8; border-radius: 2px; }
.play[data-f="0"] .f-prog i { animation: f-install 5s linear .3s forwards; } @keyframes f-install { to { width: 86%; } }
.f-fieldtag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  border-radius: 999px; background: #0B0B0C; border: 1px solid #252422; color: #EDEDE8; font-family: "Segoe UI Variable Text", "Segoe UI", "Geist", system-ui, sans-serif; font-size: 11.5px; opacity: 0; }
.f-fieldtag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #9A9A92; animation: f-pulse 1.6s ease-in-out infinite; }
.play[data-f="0"] .f-fieldtag { animation: f-fade .6s ease 1.4s forwards; }

/* a reach: a thin line from the program's edge to the barrier; it stops there and the barrier flares red at that spot */
.f-poke { position: absolute; z-index: 2; right: 0; width: 34px; height: 1px; background: #EDEDE8; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.f-poke.p1, .f-hit.h1 { top: 30%; } .f-poke.p2, .f-hit.h2 { top: 50%; } .f-poke.p3, .f-hit.h3 { top: 70%; }
.play[data-f="0"] .p1 { animation: f-poke .8s ease 1.9s forwards; } .play[data-f="0"] .p2 { animation: f-poke .8s ease 2.9s forwards; } .play[data-f="0"] .p3 { animation: f-poke .8s ease 3.9s forwards; }
@keyframes f-poke { 0% { opacity: 1; transform: scaleX(0); } 45% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); background: #e8283f; } }
.f-hit { position: absolute; z-index: 3; right: -40px; width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,40,63,.85), rgba(232,40,63,.25) 35%, rgba(232,40,63,0) 70%); opacity: 0; transform: scale(.4); }
.play[data-f="0"] .h1 { animation: f-flare 1.1s ease-out 2.25s forwards; } .play[data-f="0"] .h2 { animation: f-flare 1.1s ease-out 3.25s forwards; } .play[data-f="0"] .h3 { animation: f-flare 1.1s ease-out 4.25s forwards; }
@keyframes f-flare { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

/* the targets outside the barrier; each answers "Not allowed" as its reach is stopped */
.f-reach { display: flex; flex-direction: column; gap: 14px; }
.f-target { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(11,11,12,.85); border: 1px solid #252422;
  color: #EDEDE8; font-family: "Segoe UI Variable Text", "Segoe UI", "Geist", system-ui, sans-serif; font-size: 13.5px; }
.f-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; background: #161616; color: #9A9A92; } .f-ico svg { width: 16px; height: 16px; }
.f-tl { flex: 1; }
.f-target b { font-weight: 400; font-family: "Cascadia Mono", "Geist Mono", monospace; font-size: 11.5px; color: #e8283f; opacity: 0; }
.play[data-f="0"] .t1 b { animation: f-fade .4s ease 2.3s forwards; } .play[data-f="0"] .t2 b { animation: f-fade .4s ease 3.3s forwards; } .play[data-f="0"] .t3 b { animation: f-fade .4s ease 4.3s forwards; }

/* 2 link protection: a real browser (dark, Chrome-like). The address types in, the page starts loading, then Malphas's own
   page replaces it */
.f-browser { width: min(620px, 92%); border-radius: 12px; overflow: hidden; background: #202124; box-shadow: 0 40px 90px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  font-family: "Segoe UI Variable Text", "Segoe UI", "Geist", system-ui, sans-serif; color: #e8eaed; }
.f-tabsbar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 0; }
.f-btab { display: flex; align-items: center; gap: 8px; padding: 8px 14px; min-width: 170px; border-radius: 9px 9px 0 0; background: #35363a; font-size: 12px; }
.f-btab i { width: 12px; height: 12px; border-radius: 3px; background: #5f6368; }
.f-bplus { padding: 6px 8px; font-size: 14px; color: #9aa0a6; }
.f-tool { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #35363a; }
.f-nav { font-size: 13px; color: #9aa0a6; width: 14px; text-align: center; }
.f-addr { flex: 1; display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: #202124; font-size: 13.5px; }
.f-lock { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #9aa0a6; flex: none; }
.f-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 1px solid #e8eaed; font-family: "Cascadia Mono", "Geist Mono", monospace; font-size: 13px; }
.play[data-f="1"] .f-type { animation: f-typing 1.1s steps(15) .3s forwards, f-caret .5s step-end 1.4s 2 forwards; }
@keyframes f-typing { to { width: 15ch; } }
@keyframes f-caret { 50% { border-color: transparent; } to { border-color: transparent; } }
.f-view { position: relative; height: 250px; background: #ffffff; overflow: hidden; }
.f-load { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: #8ab4f8; z-index: 2; }
.play[data-f="1"] .f-load { animation: f-loading .8s ease-out 1.5s forwards; } @keyframes f-loading { 0% { width: 0; opacity: 1; } 90% { width: 55%; opacity: 1; } 100% { width: 55%; opacity: 0; } }
.f-skel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; }
.f-skel b { width: 90px; height: 20px; border-radius: 4px; background: #e3e3e3; margin-bottom: 6px; }
.f-skel i { width: 220px; height: 30px; border-radius: 6px; border: 1px solid #ddd; background: #fafafa; } .f-skel i:nth-of-type(3) { width: 140px; height: 8px; border: 0; background: #eee; }
.f-skel u { width: 220px; height: 30px; border-radius: 999px; background: #d9d9d9; }
.play[data-f="1"] .f-skel { animation: f-fade .5s ease 1.6s forwards; }
.f-block { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 36px; text-align: center;
  background: #0B0B0C; border-top: 2px solid #e8283f; opacity: 0; transform: scale(1.02); }
.f-block img { width: 30px; height: 23px; margin-bottom: 4px; }
.f-bt { font-size: 17px; font-weight: 600; color: #EDEDE8; }
.f-bs { max-width: 26em; font-size: 13px; line-height: 1.55; color: #9A9A92; }
.f-bbtn { margin-top: 6px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(237,237,232,.25); font-size: 12.5px; color: #EDEDE8; }
.play[data-f="1"] .f-block { animation: f-block .6s cubic-bezier(.16,1,.3,1) 2.4s forwards; } @keyframes f-block { to { opacity: 1; transform: none; } }

/* 4 broker: two apps ask for something; each answer arrives with its reason */
.f-ask { padding: 15px 20px; border-top: 1px solid rgba(255,255,255,.04); opacity: 0; font-size: 14.5px; }
.f-ask-q span { font-weight: 600; }
.f-ask-a { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; opacity: 0; }
.f-ask-a b { font-weight: 400; font-family: "Cascadia Mono", "Geist Mono", monospace; font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.f-ask-a b.yes { color: #EDEDE8; border: 1px solid rgba(237,237,232,.3); } .f-ask-a b.no { color: #e8283f; border: 1px solid rgba(232,40,63,.45); }
.f-ask-a span { font-size: 13px; color: #9A9A92; }
.play[data-f="3"] .k1 { animation: f-in .6s cubic-bezier(.16,1,.3,1) .4s forwards; } .play[data-f="3"] .k1 .f-ask-a { animation: f-in .5s cubic-bezier(.16,1,.3,1) 1.2s forwards; }
.play[data-f="3"] .k2 { animation: f-in .6s cubic-bezier(.16,1,.3,1) 2s forwards; } .play[data-f="3"] .k2 .f-ask-a { animation: f-in .5s cubic-bezier(.16,1,.3,1) 2.8s forwards; }
.play[data-f="3"] .f-note { animation: f-in .6s cubic-bezier(.16,1,.3,1) 3.5s forwards; }

/* 6 conductor */
.f-chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px; font-weight: 500; }
.f-chat-head img { width: 20px; height: 15px; }

@media (max-width: 900px) { .f-sbx { grid-template-columns: 1fr; gap: 18px; } .f-poke, .f-hit { display: none; } .f-view { height: 200px; } }

/* 6 conductor: an email is on screen; the shortcut is pressed; a small box drops in over the screen, reads the email and the
   link inside it, and answers. Everything happens over what the person is already looking at. */
.f-cd { position: relative; width: min(610px, 94%); font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
/* the screen: a real browser window (Windows style) with a webmail app open in it */
.cd-screen { position: relative; border-radius: 10px; overflow: hidden; background: #fff; color: #1f1f1f; font-size: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -24px rgba(0,0,0,.9), 0 12px 30px -10px rgba(0,0,0,.6); opacity: 0; }
.cd-screen svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cd-tabs { display: flex; align-items: flex-end; gap: 2px; height: 31px; padding: 0 0 0 8px; background: #dfe3e8; }
.cd-tab { display: flex; align-items: center; gap: 7px; width: 168px; height: 26px; padding: 0 9px 0 11px; border-radius: 8px 8px 0 0; font-size: 11.5px; color: #4a4d52; }
.cd-tab.on { background: #fff; color: #1f1f1f; }
.cd-tab span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cd-tab b { font-weight: 400; font-size: 13px; color: #6b6f75; }
.cd-tab:not(.on) { width: 120px; }
.cd-fav { flex: none; width: 13px; height: 13px; border-radius: 3.5px; background: linear-gradient(135deg, #2f7cf6, #1a5ad8); position: relative; }
.cd-fav::after { content: ''; position: absolute; left: 3px; right: 3px; top: 4px; height: 5px; border: 1.3px solid #fff; border-top: 0; border-radius: 0 0 2px 2px; transform: none; }
.cd-fav.cal { background: #e8eaed; box-shadow: inset 0 3px 0 #e1483a; } .cd-fav.cal::after { display: none; }
.cd-plus { align-self: center; margin: 2px 0 0 6px; font-size: 16px; color: #555a60; }
.cd-win { margin-left: auto; align-self: stretch; display: flex; }
.cd-win svg { width: 42px; height: 100%; padding: 10px 16px; color: #3c4043; stroke-width: 1; }
.cd-omni { display: flex; align-items: center; gap: 12px; height: 35px; padding: 0 12px; border-bottom: 1px solid #e3e5e8; color: #5f6368; }
.cd-omni > svg { width: 15px; height: 15px; flex: none; } .cd-omni > svg.off { opacity: .35; }
.cd-url { flex: 1; display: flex; align-items: center; gap: 7px; height: 27px; padding: 0 12px; border-radius: 14px; background: #eff1f3; font-size: 12px; color: #1f1f1f; }
.cd-url svg { width: 12px; height: 12px; color: #5f6368; } .cd-url em { font-style: normal; color: #80868b; }
.cd-me { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #7b5ea7; color: #fff; font-weight: 600; font-size: 11px; line-height: 22px; font-style: normal; text-align: center; }
.cd-app { display: flex; height: 304px; background: #f6f8fb; }
.cd-rail { flex: none; width: 128px; padding: 10px 8px 0 10px; }
.cd-logo { display: flex; align-items: center; gap: 7px; padding: 2px 4px 10px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: #2a2d31; }
.cd-logo .cd-fav { width: 17px; height: 17px; border-radius: 4.5px; } .cd-logo .cd-fav::after { left: 4px; right: 4px; top: 5px; height: 6px; }
.cd-compose { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 12px; background: #c9e1fd; font-weight: 600; font-size: 12px; color: #0b3d7a; }
.cd-compose svg { width: 12px; height: 12px; }
.cd-rail ul { list-style: none; margin: 10px 0 0; padding: 0; }
.cd-rail li { display: flex; align-items: center; height: 25px; padding: 0 10px; border-radius: 0 13px 13px 0; margin-left: -10px; color: #3c4043; }
.cd-rail li.on { background: #d3e3fd; font-weight: 600; color: #041e49; }
.cd-rail li b { margin-left: auto; font-weight: 600; font-size: 11px; } .cd-rail li:not(.on) b { font-weight: 400; color: #5f6368; }
.cd-pane { flex: 1; min-width: 0; margin: 6px 8px 0 0; padding: 0 18px; border-radius: 14px 14px 0 0; background: #fff; }
.cd-tools { display: flex; align-items: center; gap: 16px; height: 32px; color: #5f6368; border-bottom: 1px solid #f0f1f3; }
.cd-tools svg { width: 14px; height: 14px; } .cd-tools span { margin-left: auto; font-size: 11px; }
.cd-subj { margin-top: 10px; font-size: 16.5px; font-weight: 400; color: #1f1f1f; letter-spacing: -.005em; }
.cd-subj em { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: #ebedf0; font-style: normal; font-size: 10.5px; color: #444; vertical-align: 2px; }
.cd-from { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; line-height: 1.35; }
.cd-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #0f6b5c; color: #fff; font-weight: 600; font-size: 13px; line-height: 28px; font-style: normal; text-align: center; }
.cd-from b { font-weight: 600; } .cd-from span { color: #5f6368; font-size: 11px; } .cd-from small { display: block; font-size: 11px; color: #5f6368; }
.cd-from time { margin-left: auto; font-size: 11px; color: #5f6368; white-space: nowrap; }
.cd-mail { margin: 10px 0 0 38px; font-size: 12px; line-height: 1.5; color: #3c4043; }
.cd-mail p { margin: 0 0 6px; max-width: 46ch; }
.cd-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-weight: 700; font-size: 11px; letter-spacing: .14em; color: #0f6b5c; }
.cd-brand i { width: 12px; height: 12px; border-radius: 2px; background: #0f6b5c; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.cd-btnwrap { position: relative; display: inline-block; margin: 3px 0 9px; }
.cd-btn { display: inline-block; padding: 8px 16px; border-radius: 4px; background: #0f6b5c; color: #fff; font-size: 12px; font-weight: 600; }
.cd-foot { font-size: 10.5px; color: #80868b; }
.cd-cursor { position: absolute; left: 62%; top: 55%; width: 13px; height: 18px; fill: #fff !important; stroke: #000 !important; stroke-width: 1.1 !important;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); opacity: 0; transform: translate(70px, 46px); }
.cd-ring { position: absolute; inset: -6px; border-radius: 10px; border: 1.5px solid #e8283f; box-shadow: 0 0 0 4px rgba(232,40,63,.14); opacity: 0; transform: scale(1.08); }
.cd-dim { position: absolute; inset: 0; background: rgba(10,10,12,.34); opacity: 0; pointer-events: none; }
.cd-keys { position: absolute; left: 20%; bottom: 18px; z-index: 3; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(20,20,22,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.6); opacity: 0; }
.cd-keys kbd { min-width: 34px; padding: 7px 10px; border-radius: 7px; background: #1a1a1c; border: 1px solid #2e2e30; border-bottom-width: 3px; color: #EDEDE8;
  font: 500 12px "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; text-align: center; }
.cd-box { position: absolute; right: -3%; top: 88px; width: 60%; transform: translate(0, -10px) scale(.98); opacity: 0; padding: 14px 16px 16px; border-radius: 14px;
  background: rgba(16,16,18,.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); color: #EDEDE8; display: flex; flex-direction: column; gap: 10px; }
.cd-head { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; } .cd-head img { width: 18px; height: 14px; }
.cd-head em { margin-left: auto; display: flex; align-items: center; gap: 7px; font-style: normal; font-weight: 400; font-size: 11.5px; color: #9A9A92; opacity: 0; }
.cd-head em i { width: 6px; height: 6px; border-radius: 50%; background: #e8283f; animation: f-pulse 1s ease-in-out infinite; }
.cd-q { align-self: flex-end; padding: 9px 13px; border-radius: 12px 12px 4px 12px; background: #242325; font-size: 13.5px; opacity: 0; }
.cd-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; }
.cd-read { display: flex; gap: 6px; opacity: 0; } .cd-read span { font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: #b9b8b1; }
.cd-read span::before { content: '✓'; margin-right: 6px; color: #9fe3bd; }
.cd-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: "Cascadia Mono", "Geist Mono", monospace; font-size: 11.5px; color: #9A9A92; opacity: 0; }
.cd-link b { font-weight: 400; color: #ff6b7d; padding: 2px 6px; border-radius: 5px; background: rgba(232,40,63,.12); } .cd-link i { font-style: normal; }
.cd-a { padding: 10px 13px; border-radius: 12px 12px 12px 4px; border: 1px solid rgba(232,40,63,.35); background: rgba(232,40,63,.07); font-size: 13.5px; line-height: 1.5; opacity: 0; }
/* the timeline */
.play[data-f="5"] .cd-screen { animation: f-fade .6s ease .15s forwards; }
.play[data-f="5"] .cd-cursor { animation: cd-point .8s cubic-bezier(.3,.7,.2,1) .55s forwards; }
.play[data-f="5"] .cd-keys { animation: cd-keys 1.3s ease .9s forwards; }
.play[data-f="5"] .cd-keys kbd { animation: cd-press .25s ease 1.25s 1 both; }
.play[data-f="5"] .cd-dim { animation: f-fade .5s ease 1.5s forwards; }
.play[data-f="5"] .cd-box { animation: cd-drop .6s cubic-bezier(.16,1,.3,1) 1.6s forwards; }
.play[data-f="5"] .cd-q { animation: f-fade .3s ease 2.1s forwards; }
.play[data-f="5"] .cd-type { animation: cd-typing 1s steps(19) 2.2s forwards; }
.play[data-f="5"] .cd-head em { animation: f-fade .3s ease 3.3s forwards, cd-hide .3s ease 5.1s forwards; }
.play[data-f="5"] .cd-ring { animation: cd-ring .6s cubic-bezier(.16,1,.3,1) 3.5s forwards; }
.play[data-f="5"] .cd-dim { animation: f-fade .5s ease 1.5s forwards, cd-undim .4s ease 3.4s forwards; }
.play[data-f="5"] .cd-read { animation: f-in .5s cubic-bezier(.16,1,.3,1) 3.9s forwards; }
.play[data-f="5"] .cd-link { animation: f-in .5s cubic-bezier(.16,1,.3,1) 4.5s forwards; }
.play[data-f="5"] .cd-a { animation: f-in .6s cubic-bezier(.16,1,.3,1) 5.2s forwards; }
@keyframes cd-keys { 0% { opacity: 0; transform: translate(-50%, 6px); } 20%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes cd-press { 50% { transform: translateY(2px); border-bottom-width: 1px; background: #26262a; } }
@keyframes cd-drop { to { opacity: 1; transform: none; } }
@keyframes cd-typing { to { width: 19ch; } }
@keyframes cd-ring { to { opacity: 1; transform: scale(1); } }
@keyframes cd-undim { from { opacity: 1; } to { opacity: .45; } }
@keyframes cd-hide { to { opacity: 0; } }
@keyframes cd-point { from { opacity: 1; transform: translate(70px, 46px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .cd-brand, .cd-mail p:first-of-type, .cd-rail, .cd-tab:not(.on), .cd-plus, .cd-win, .cd-omni > svg, .cd-me, .cd-tools span, .cd-foot { display: none; } .cd-mail { margin-left: 0; } .cd-app { height: 270px; } .cd-pane { margin-left: 8px; padding: 0 14px; } .cd-box { right: 0; width: 84%; top: 84px; } .cd-keys { bottom: 14px; } }

/* 2026-10-15: option C (concepts/feat-lab): the words scroll normally on the left, the stage stays in place on the right.
   Replaces .f-scroll / .f-pin (the pinned, one-scroll-per-feature version). */
.fc-wrap { width: min(1240px, calc(100vw - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 72px); }
.fc-blocks { padding: 16vh 0 26vh; }
.fc-block { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .45s cubic-bezier(.16,1,.3,1); }
.fc-block.on { opacity: 1; }
.fc-block .n { font-family: var(--display); font-weight: 300; font-size: clamp(36px, 3.4vw, 56px); line-height: 1; color: rgba(237,237,232,.3); }
.fc-block h3 { margin: 12px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--display); font-weight: 300;
  font-size: clamp(30px, 2.8vw, 44px); line-height: 1.1; color: #edede8; }
.fc-block p { margin: 14px 0 0; max-width: 26em; font-size: 17.5px; line-height: 1.6; color: rgba(237,237,232,.66); }
.fc-pin { position: sticky; top: 16vh; height: 68vh; }
.fc-pin .f-stage { height: 100%; }
@media (max-width: 900px) {
  .fc-wrap { grid-template-columns: 1fr; }
  .fc-side { order: -1; position: sticky; top: 60px; z-index: 2; }
  .fc-pin { position: relative; top: 0; height: 40vh; }
  .fc-blocks { padding: 6vh 0 20vh; }
  .fc-block { min-height: 38vh; }
  .fc-block h3 { font-size: 28px; } .fc-block p { font-size: 16px; }
}
/* 2026-10-15 (owner): the section heading stays on screen while the six features scroll by, until the section ends.
   The heading block sticks under the nav on a black ground; the stage sits just below it (s5.js measures the heading
   into --fh). Phones keep the heading in the flow: the stage already sticks there. */
@media (min-width: 901px) {
  .s-feat .s5wrap { position: sticky; top: 0; z-index: 3; width: 100%; padding: 84px 0 22px; margin-top: -84px;
    background: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), rgba(0,0,0,0) 100%); }
  .fc-pin { top: calc(var(--fh, 220px) + 2vh); height: calc(100vh - var(--fh, 220px) - 6vh); }
  .fc-blocks { padding-top: 6vh; }
}
/* 2026-10-15 (owner: "not very clear"): the sandbox scene says what is happening. A line on top names it, each target says
   what the program tried ("Open your Documents") and "Blocked", and a result line closes it once all three are stopped. */
.f-sbx { row-gap: 26px; }
.f-sbx-cap { grid-column: 1 / -1; text-align: center; font-family: "Segoe UI Variable Text", "Segoe UI", "Geist", system-ui, sans-serif; font-size: 15px; color: rgba(237,237,232,.78); opacity: 0; }
.play[data-f="0"] .f-sbx-cap, .f-scene.on[data-f="0"]:not(.play) .f-sbx-cap { animation: f-fade .5s ease .15s forwards; }
.f-sbx-res { grid-column: 1 / -1; justify-self: center; padding: 10px 18px; border-radius: 10px; background: rgba(11,11,12,.85); border: 1px solid #252422;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Geist", system-ui, sans-serif; font-size: 14.5px; color: #EDEDE8; text-align: center; opacity: 0; }
.play[data-f="0"] .f-sbx-res { animation: f-in .6s cubic-bezier(.16,1,.3,1) 5s forwards; }
/* 2026-10-15 (owner): the animations never stop while they are on screen. The sandbox's program keeps reaching for your
   documents, passwords and startup, one after another, and keeps being stopped at the barrier (every 3 s per target);
   the install bar keeps creeping on. The other scenes replay from the start on a loop (s5.js / product.js). */
.play[data-f="0"] .p1 { animation: f-poke-loop 3s ease 1.9s infinite; }
.play[data-f="0"] .p2 { animation: f-poke-loop 3s ease 2.9s infinite; }
.play[data-f="0"] .p3 { animation: f-poke-loop 3s ease 3.9s infinite; }
@keyframes f-poke-loop { 0% { opacity: 1; transform: scaleX(0); background: #EDEDE8; } 12% { opacity: 1; transform: scaleX(1); } 27% { opacity: 0; transform: scaleX(1); background: #e8283f; } 100% { opacity: 0; transform: scaleX(1); } }
.play[data-f="0"] .h1 { animation: f-flare-loop 3s ease-out 2.25s infinite; }
.play[data-f="0"] .h2 { animation: f-flare-loop 3s ease-out 3.25s infinite; }
.play[data-f="0"] .h3 { animation: f-flare-loop 3s ease-out 4.25s infinite; }
@keyframes f-flare-loop { 0% { opacity: 0; transform: scale(.4); } 7% { opacity: 1; transform: scale(1); } 37% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.25); } }
/* each "Not allowed" flashes again as its reach is stopped */
.play[data-f="0"] .t1 b { animation: f-fade .4s ease 2.3s forwards, f-deny 3s ease 5.3s infinite; }
.play[data-f="0"] .t2 b { animation: f-fade .4s ease 3.3s forwards, f-deny 3s ease 6.3s infinite; }
.play[data-f="0"] .t3 b { animation: f-fade .4s ease 4.3s forwards, f-deny 3s ease 7.3s infinite; }
@keyframes f-deny { 0% { opacity: 1; text-shadow: 0 0 10px rgba(232,40,63,.9); } 20% { opacity: 1; text-shadow: none; } 100% { opacity: 1; text-shadow: none; } }
.play[data-f="0"] .f-prog i { animation: f-install-loop 9s linear .3s infinite; }
@keyframes f-install-loop { 0% { width: 5%; } 90% { width: 92%; } 100% { width: 92%; } }