/* front-notes.css — Russ's front-page walk-through notes (7 Oct 2026, section B), on the front page ("/", front.html) only.
   Ali, 7 Oct 2026: "yes to all of Russ's notes from his walk-through, top to bottom. Go ahead and make them." Her look kept: her
   colours (#5AF5A0 / #34D378 green, #0A0A0A frames, #262626 hairlines, #A1A4A5 / #737373 greys, the f6 urgency lights), her type
   (Geist, Geist Mono, Instrument Serif, Inter on the f6 screen) and her spacing. Every rule is scoped to front.html's own markup
   (.v10, #top.f6, #fx-after, #fxrv), so no other page changes. Note numbers (B1..B19) are the section B rows of
   RUSS-WALKTHROUGH-NOTES-2026-10-07. No blur (Hard rule 1). Motion only under prefers-reduced-motion: no-preference.
   13 Oct 2026 (review of #734): her 11 Oct front final carries these same 222 rules, fenced and scoped to .live, with her own later
   values (her greens #34D378 / rgba(52,211,120), JetBrains Mono, Inter); every value here is now hers, rule for rule. This file
   stays because on the live page the first screen (#top), the reveal layer (#fxrv), the profile (#fx-after) and the two footers
   sit outside .live, where her scoped copy cannot reach them. */

/* ---------- B1 · the result's photo: larger and clearer than a thumbnail ---------- */
#top.f6 .f6-mthumb{width:84px;height:64px;border-radius:10px;border-color:rgba(52,211,120,.45);box-shadow:0 6px 18px -8px rgba(52,211,120,.5)}
#fxrv .fxrv-mthumb{width:84px;height:64px;border-radius:10px;border-color:rgba(52,211,120,.45);box-shadow:0 6px 18px -8px rgba(52,211,120,.5)}
@media (min-width:900px){
  #top.f6 .f6-mthumb,#fxrv .fxrv-mthumb{width:112px;height:84px;border-radius:12px}
}

/* ---------- B1 · the Triage Profile: on a wide screen the photo sits up top on the left, the words beside it ---------- */
@media (min-width:900px){
  html.tr-v3 #fx-after #triage-share{max-width:1180px!important;padding:0 40px 8px!important}
  html.tr-v3 #fx-after #triageCard.tc-v3{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:48px;align-items:start}
  /* the photo holds the left column for the whole card (sticky inside its own grid area, so it never rides over what follows the
     card); everything else reads down the right column, the first results right under the headline */
  html.tr-v3 #fx-after #triageCard.tc-v3>*{grid-column:2;min-width:0}
  html.tr-v3 #fx-after #triageCard.tc-v3>.v3-hero{display:contents}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-hero>*{grid-column:2;margin:0 0 16px;min-width:0}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-hero>.v3-pill{margin-top:28px;justify-self:start}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-hero>.v3-h1{font-size:46px}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-hero>.fxa-photo{grid-column:1;grid-row:1/span 60;align-self:start;position:sticky;top:84px;margin:28px 0 0}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-hero>.fxa-photo img{width:100%;max-height:min(620px,calc(100vh - 130px));object-fit:cover}
  html.tr-v3 #fx-after #triageCard.tc-v3>.v3-answers{margin-top:0}
  /* the first results (how urgent, who to call) come right under the headline; the longer words follow */
  html.tr-v3 #fx-after #triageCard.tc-v3>.tc-failed{order:0}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-pill{order:1}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-h1{order:2}
  html.tr-v3 #fx-after #triageCard.tc-v3 .fxa-photo{order:3}
  html.tr-v3 #fx-after #triageCard.tc-v3>.v3-answers{order:4}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-caption{order:5}
  html.tr-v3 #fx-after #triageCard.tc-v3 .v3-lede{order:6}
  html.tr-v3 #fx-after #triageCard.tc-v3>section.v3-sec,html.tr-v3 #fx-after #triageCard.tc-v3>#signature-slot{order:7}
}
@media (max-width:899.98px){
  html.tr-v3 #fx-after .tc-v3 .v3-hero{padding-top:20px}
  html.tr-v3 #fx-after .fxa-photo img{max-height:40vh;max-height:40svh}
}

/* ---------- B2 · "Get this for your buildings": the one button with the running light ---------- */
html.tr-v3 #fx-after .v3-close .v3-btn2{min-height:56px;padding:14px 30px;font-size:16px;color:#F5F5F5;border:1.5px solid transparent;
  background:linear-gradient(180deg,#141a16,#0b0f0c) padding-box,
    conic-gradient(from var(--v12a,0deg),rgba(255,255,255,.12) 0deg,rgba(255,255,255,.12) 250deg,#5AF5A0 310deg,#E8FFF2 330deg,#5AF5A0 345deg,rgba(255,255,255,.12) 360deg) border-box;
  box-shadow:0 0 34px rgba(52,211,120,.22),0 10px 26px rgba(0,0,0,.55)}
html.tr-v3 #fx-after .v3-close .v3-btn2::after{content:"›";font-size:20px;line-height:1;color:#5AF5A0;margin-left:2px}
html.tr-v3 #fx-after .v3-close .v3-btn2:hover{box-shadow:0 0 48px rgba(52,211,120,.38),0 10px 26px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:no-preference){html.tr-v3 #fx-after .v3-close .v3-btn2{animation:v12spin 4s linear infinite}}

/* ---------- B3 · the spinning QR plays a sample run ---------- */
.v10 .fn-qr{position:relative;display:block;padding:0;margin:0;border:0;background:none;cursor:pointer;border-radius:22px;color:inherit;font:inherit}
.v10 .fn-qr video{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.v10 .fn-qr:hover video{transform:scale(1.04)}
.v10 .fn-qr:focus-visible{outline:2px solid #5AF5A0;outline-offset:4px}
.v10 .fn-qr-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:5px 11px;border-radius:999px;background:rgba(5,5,5,.86);border:1px solid rgba(52,211,120,.4);font:500 11px 'JetBrains Mono',monospace;color:#5AF5A0}
.v10 .fn-qr-hint i{width:7px;height:7px;border-radius:50%;background:#5AF5A0;box-shadow:0 0 8px #5AF5A0}
.v10 .fn-qr-or{display:inline-block;margin-top:6px;color:#A1A4A5}
.v10 .fn-demo-p{display:inline-flex;align-items:center;justify-content:center;gap:9px;align-self:center;min-height:44px;padding:8px 16px;border:0;background:none;
  color:#D4D4D4;font:600 15px 'Inter',system-ui,sans-serif;cursor:pointer;position:relative}
.v10 .fn-demo-p:hover{color:#FFF}
.v10 .fn-demo-p:focus-visible{outline:2px solid #5AF5A0;outline-offset:2px;border-radius:10px}
.v10 .fn-demo-dot{width:8px;height:8px;border-radius:50%;background:#5AF5A0;box-shadow:0 0 10px #5AF5A0}
@media (prefers-reduced-motion:no-preference){.v10 .fn-qr-hint i,.v10 .fn-demo-dot{animation:fnPulse 1.8s ease-in-out infinite}}
@keyframes fnPulse{0%,100%{opacity:.45}50%{opacity:1}}
/* the sample run's last step: "Get started" is the button that pulls */
#fxrv.demo .fxrv-keep{border-color:rgba(90,245,160,.7);background:linear-gradient(180deg,rgba(52,211,120,.22),rgba(52,211,120,.06));box-shadow:0 0 30px rgba(52,211,120,.28)}
#fxrv.demo .fxrv-keep span{color:#5AF5A0;font-size:20px;line-height:1}
#fxrv.demo .fxrv-mine{cursor:default}

/* ---------- B4 · Three ways to start: the whole tile is the link; B5 · "See pricing" as a real link, less empty room ---------- */
.v10 section.v12-screen[data-v12="start"]{min-height:0!important}
.v10 [data-v12="start"] .hs{position:relative;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.v10 [data-v12="start"] .hs>a:last-child::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.v10 [data-v12="start"] .hs:hover,.v10 [data-v12="start"] .hs:focus-within{border-color:rgba(52,211,120,.5)!important;
  box-shadow:0 0 0 1px rgba(52,211,120,.14),0 24px 60px -28px rgba(52,211,120,.45)!important;transform:translateY(-2px)}
.v10 [data-v12="start"] .hs>div:nth-child(3)>div{color:#E5E5E5!important}
.v10 [data-v12="start"] .hs>div:nth-child(3)>div>span:first-child{display:inline-flex;align-items:center;justify-content:center;width:22px!important;height:22px;
  border-radius:50%;background:rgba(52,211,120,.1);border:1px solid rgba(52,211,120,.35);font-size:11px!important;flex:none}
.v10 section p a.fn-pricing.fn-pricing[href]{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:7px 15px!important;
  border:1px solid rgba(52,211,120,.4)!important;border-radius:999px;background:rgba(52,211,120,.07)!important;color:#5AF5A0!important;
  font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;vertical-align:middle;transition:background .2s ease,box-shadow .2s ease}
.v10 section p a.fn-pricing.fn-pricing[href]:hover{background:rgba(52,211,120,.14)!important;box-shadow:0 0 22px rgba(52,211,120,.25)!important;color:#E8FFF2!important}
.v10-desktop [data-v12="start"] .v12cards{margin-top:18px!important}
.v10-phone [data-v12="start"] > p{display:flex;flex-direction:column;align-items:center;gap:10px}
.v10-phone section p a.fn-pricing.fn-pricing[href]{margin-left:0}
.v10-phone [data-v12="start"] .v12cards{margin-top:6px!important}

/* ---------- B6 · the motion icons, larger; B18 · type that does not look zoomed out ---------- */
.v10-desktop section.v12-screen>video[aria-hidden="true"]{width:124px!important;height:124px!important}
.v10-phone section.v12-screen>video[aria-hidden="true"]{width:84px!important;height:84px!important}
.v10-desktop section.v12-screen{padding-top:40px!important;padding-bottom:40px!important}
@media (min-width:1000px){
  .v10-desktop section.v12-screen>h2{font-size:64px!important}
  .v10-desktop section.v12-screen>p{font-size:20px!important}
  .v10-desktop section.v12-screen>div:last-child:not(.v12fit):not(.frame){font-size:14px!important}
}

/* ---------- B8 · The words, already written: what each message is, where it goes, which read it came from ---------- */
.v10 [data-v12="words"] .frame{height:auto!important}
.v10-desktop [data-v12="words"] .frame>div[style*="height: 220px"]{height:240px!important}
.v10-phone [data-v12="words"] .frame>div[style*="height: 216px"]{height:300px!important}
.v10 .fn-src{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid #1F1F1F;font-size:15px;color:#E5E5E5}
.v10 .fn-src-k{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;color:#737373}
.v10 .fn-src-u{font:500 12px 'JetBrains Mono',monospace;color:#FB923C;padding:4px 10px;border-radius:999px;border:1px solid #7C2D12;box-shadow:0 0 14px rgba(251,146,60,.2)}
.v10 .fn-src-t{color:#D4D4D4}
.v10 .fn-av{width:40px;height:40px;border-radius:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#5AF5A0;background:#0F2A1B;border:1px solid rgba(52,211,120,.35)}
.v10-phone .fn-av{width:32px;height:32px}
.v10 .fn-bub{border-color:#2E2E2E!important;background:linear-gradient(180deg,#121212,#0D0D0D)!important;box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
.v10 .fn-mh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #1F1F1F}
.v10 .fn-mh b{display:block;font-size:14px;font-weight:600;color:#F5F5F5;line-height:1.3}
.v10 .fn-mh i{display:block;font-style:normal;font-size:12px;color:#737373;line-height:1.3}
.v10 .fn-copy{flex:none;font:500 11px 'JetBrains Mono',monospace;color:#5AF5A0;padding:4px 10px;border-radius:999px;border:1px solid rgba(52,211,120,.35)}

/* ---------- B9 · Set up in an afternoon: the right-hand phone is always shown; B11 · the pasted line carries through ---------- */
.v10 [data-v12="setup"] .frame{overflow:hidden}
.v10 [data-v12="setup"] .sp{opacity:1;transform:none}
.v10 .fn-hot{position:relative;color:#F2FFF8!important;font-weight:500;background:rgba(90,245,160,.13);box-shadow:inset 3px 0 0 #5AF5A0,0 0 24px -6px rgba(90,245,160,.45)}
.v10 .fn-hot span{color:#F2FFF8!important}
.v10 .fn-slot{display:flex;flex-direction:column;justify-content:center;min-height:0}
.v10 .fn-newrow{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:9px;background:rgba(90,245,160,.13);border:1px solid rgba(90,245,160,.55);
  box-shadow:0 0 20px -4px rgba(90,245,160,.45);text-align:left}
.v10 .fn-newrow .fn-newk{font:600 8px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#5AF5A0}
.v10 .fn-newrow b{font-size:10.5px;font-weight:600;color:#F2FFF8}
.v10 .fn-newrow span:last-child{font-size:9px;color:#A3A3A3}
.v10 .fn-fly{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;white-space:nowrap;padding:6px 11px;border-radius:9px;font-size:12px;color:#F2FFF8;
  background:rgba(14,40,26,.96);border:1px solid #5AF5A0;box-shadow:0 0 26px rgba(90,245,160,.5);transform:translate(var(--fx,0px),var(--fy,0px))}
.v10 .fn-fly b{font-weight:600}
@media (prefers-reduced-motion:no-preference){
  /* the rows paste in once and stay (they no longer vanish at the start of every loop) */
  .v10 [data-v12="setup"] .sr1,.v10 [data-v12="setup"] .sr2,.v10 [data-v12="setup"] .sr3,.v10 [data-v12="setup"] .sr4,.v10 [data-v12="setup"] .sr5{animation-iteration-count:1!important;animation-fill-mode:both!important}
  /* the phone: shown the whole time, quiet in steps 1 and 2, lit in step 3 (it used to be empty until step 3) */
  .v10 [data-v12="setup"] .sp{animation:fnSp 12s cubic-bezier(.2,.7,.2,1) infinite!important}
  .v10 [data-v12="setup"] .fn-newrow{animation:fnNew 12s ease-out infinite}
  .v10-desktop [data-v12="setup"] .fn-fly.ready{animation:fnFly 12s cubic-bezier(.5,0,.3,1) infinite}
}
@keyframes fnSp{0%,61%{opacity:.62;border-color:#333;box-shadow:none}66%,97%{opacity:1;border-color:rgba(90,245,160,.55);box-shadow:0 0 44px -12px rgba(52,211,120,.45)}100%{opacity:.62;border-color:#333;box-shadow:none}}
@keyframes fnNew{0%,62%{opacity:0;transform:translateY(8px) scale(.96)}67%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fnFly{0%,30%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(1)}34%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(1.04)}
  47%{opacity:1;transform:translate(var(--mx),var(--my)) scale(.96)}60%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(.9)}65%,100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.86)}}

/* ---------- B10 · two fridge magnets beside the sticker pack ---------- */
.v10 .fn-mag{position:absolute;bottom:4px;z-index:3;width:70px;padding:0 0 7px;border-radius:14px;overflow:hidden;text-align:center;color:#111;
  background:linear-gradient(180deg,#FBFBF8,#E7E7E0);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -3px 0 rgba(0,0,0,.18) inset,0 16px 26px rgba(0,0,0,.65),0 3px 0 #2A2A2A}
.v10 .fn-mag .qrimg{width:40px!important;height:40px!important;margin:5px auto 3px}
.v10 .fn-mag-top{background:#0E0E0E;color:#F5F5F5;font-size:8.5px;font-weight:600;padding:4px 0}
.v10 .fn-mag-top b{color:#F97316;font-weight:700}
.v10 .fn-mag-ask{font-size:7px;font-weight:700;line-height:1.2;padding:0 4px}
.v10 .fn-mag1{left:2px;transform:rotate(-12deg)}
.v10 .fn-mag2{right:2px;transform:rotate(10deg)}
.v10 .v13pack-note em{font-style:normal;color:#A1A4A5;font-size:11.5px}
.v10-phone .fn-mag{width:62px;bottom:0}
.v10-phone .fn-mag .qrimg{width:34px!important;height:34px!important}

/* ---------- B12 · One photo in. Everyone told: each part says what it means ---------- */
.v10 [data-v12="told"] .frame{overflow:visible}
.v10 .fn-part{cursor:help;transition:border-color .2s ease,box-shadow .2s ease}
.v10 .fn-part:hover,.v10 .fn-part:focus,.v10 .fn-part.fn-open{border-color:rgba(90,245,160,.6)!important;box-shadow:0 0 26px -6px rgba(90,245,160,.45);outline:none;z-index:20}
.v10 .fn-part:focus-visible{outline:2px solid #5AF5A0;outline-offset:2px}
.v10 .fn-part:not([style*="position: absolute"]){position:relative}
.v10 .fn-tip{position:absolute;left:0;top:calc(100% + 10px);z-index:30;width:250px;max-width:calc(100vw - 32px);padding:12px 14px;border-radius:12px;
  background:#0B0F0D;border:1px solid rgba(90,245,160,.45);box-shadow:0 18px 40px rgba(0,0,0,.75),0 0 24px -8px rgba(90,245,160,.4);
  font:400 13px/1.5 'Inter',system-ui,sans-serif;color:#E5E5E5;text-align:left;white-space:normal;letter-spacing:0;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;pointer-events:none}
.v10 .fn-tip b{display:block;margin:0 0 3px;font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;color:#5AF5A0;text-transform:uppercase}
.v10 .fn-part.fn-up .fn-tip{top:auto;bottom:calc(100% + 10px);transform:translateY(4px)}
.v10 .fn-part:hover .fn-tip,.v10 .fn-part:focus .fn-tip,.v10 .fn-part.fn-open .fn-tip{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
.v10 .fn-told-hint{margin:2px 0 0;font:500 12px 'JetBrains Mono',monospace;color:#737373}
.v10 .fn-told-hint i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#5AF5A0;box-shadow:0 0 8px #5AF5A0;vertical-align:1px}
.v10-phone [data-v12="told"] .fn-tip{width:min(300px,calc(100vw - 48px))}

/* ---------- B13 · Plugs into what you already run: larger, and not as thin ---------- */
.v10-desktop [data-v12="plugs"] div:has(>span.it0)>span{font-size:16px!important;padding:11px 20px!important}
.v10-desktop [data-v12="plugs"] .frame [style*="font-size: 14px"]{font-size:16px!important}
.v10-desktop [data-v12="plugs"] .frame [style*="font-size: 13px"]{font-size:14.5px!important}
.v10-desktop [data-v12="plugs"] .frame [style*="font-size: 15px"]{font-size:17px!important}
.v10-desktop [data-v12="plugs"] .frame [style*="font-size: 11px"]{font-size:12.5px!important}
.v10-desktop [data-v12="plugs"] .frame [style*="font-size: 20px"]{font-size:24px!important}
.v10-desktop [data-v12="plugs"] .frame [style*="font-size: 26px"]{font-size:30px!important}
.v10 [data-v12="plugs"] .frame [style*="color: #737373"]{color:#8E9192!important}
.v10 [data-v12="plugs"] .frame [style*="color: #A3A3A3"],.v10 [data-v12="plugs"] .frame [style*="color: #A1A4A5"]{color:#C8CACB!important}
.v10 [data-v12="plugs"] .frame{border-color:#2E2E2E;box-shadow:0 40px 100px -40px rgba(52,211,120,.18)}
.v10-phone [data-v12="plugs"] .frame [style*="font-size: 13px"]{font-size:14px!important}
.v10-phone [data-v12="plugs"] .frame [style*="font-size: 12px"]{font-size:13px!important}

/* ---------- B14 · Watch it read: the ending is the reveal ---------- */
.v10 .fn-wbox{position:relative}
.v10 .fn-wbox video{transition:filter .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.v10 .fn-wbox.fn-ended video{filter:brightness(.28) saturate(.7);transform:scale(1.03)}
.v10 .fn-wend{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;
  text-align:left;font-family:"Inter",ui-sans-serif,system-ui,sans-serif;color:#F2F2F2;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.v10 .fn-wbox.fn-ended .fn-wend{opacity:1;visibility:visible;transition:opacity .45s ease}
.v10 .fn-wend-h{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.v10 .fn-wend-h span{font:12px "JetBrains Mono",ui-monospace,monospace;color:#34D378}
.v10 .fn-wend-h b{font:600 34px/1.1 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.03em}
.v10 .fn-wend-h em{font-style:normal;background:linear-gradient(90deg,#2EBD73,#34D378 45%,#5AF5A0);-webkit-background-clip:text;background-clip:text;color:transparent}
.v10 .fn-wq{width:min(600px,100%);border:1px solid #2E2E34;border-radius:18px;background:linear-gradient(180deg,#0f0f11,#080809);overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(52,211,120,.45)}
.v10 .fn-wqh{display:flex;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid #1F1F23;font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;color:#B9B9BF}
.v10 .fn-wqh span:last-child{color:#5E5E66}
.v10 .fn-wq ul{list-style:none;margin:0;padding:0}
.v10 .fn-wq li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px;border-top:1px solid #1F1F23}
.v10 .fn-wq li:first-child{border-top:0}
.v10 .fn-wq li>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.v10 .fn-wq li b{font:600 15px/1.3 "Inter",ui-sans-serif,system-ui,sans-serif}
.v10 .fn-wq li small{font:400 13px/1.35 "Inter",ui-sans-serif,system-ui,sans-serif;color:#8A8A90}
.v10 .fn-wq li.fn-wmine{border:1.5px solid rgba(52,211,120,.6);background:linear-gradient(180deg,rgba(52,211,120,.12),rgba(52,211,120,.03));box-shadow:0 0 26px 2px rgba(52,211,120,.3)}
.v10 .fn-wq li.fn-wmine+li{border-top:0}
.v10 .fn-wq li.fn-wmine small:first-child{font:700 10.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;color:#34D378}
.v10 .fn-u{--lit:#5AA8FF;--deep:#1A5BB0;flex:none;display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 6px;border-radius:999px;
  font:800 12px "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:.6px;color:#fff;white-space:nowrap;border:2.5px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 55%) padding-box,linear-gradient(#0e0e10,#0e0e10) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--lit) 70%,#fff) 0%,var(--lit) 30%,var(--deep) 100%) border-box;box-shadow:inset 0 2px 3px rgba(0,0,0,.55)}
.v10 .fn-u::before{content:"";width:11px;height:11px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff 0 8%,var(--lit) 30%,var(--deep) 90%);
  box-shadow:0 0 0 1.5px #0a0a0a,0 0 0 2.5px #55575d,0 0 10px 1px var(--lit)}
.v10 .fn-u-e{--lit:#FF5A4E;--deep:#B8241C}.v10 .fn-u-t{--lit:#FFB23A;--deep:#9A5A00}.v10 .fn-u-w{--lit:#5AA8FF;--deep:#1A5BB0}.v10 .fn-u-h{--lit:#3EDB86;--deep:#0F7A42}
.v10 .fn-wend-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px}
.v10 .fn-wend-a a,.v10 .fn-wend-a button{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;font:600 15px "Inter",ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.v10 .fn-wend-a a{border:1px solid rgba(46,189,115,.6)!important;background:linear-gradient(180deg,rgba(52,211,120,.16),rgba(52,211,120,.04))!important;color:#F2F2F2!important;box-shadow:0 0 24px rgba(52,211,120,.2)!important}
.v10 .fn-wend-a button{border:0;background:none;color:#B9B9BF;padding:0 8px}
.v10 .fn-wend-a button:hover{color:#fff}
@media (prefers-reduced-motion:no-preference){
  .v10 .fn-wbox.fn-ended .fn-wq{animation:fnRise .6s cubic-bezier(.2,.8,.2,1) .15s both}
  .v10 .fn-wbox.fn-ended .fn-wmine{animation:fnLand .7s cubic-bezier(.2,.8,.2,1) .55s both}
  .v10 .fn-wbox.fn-ended .fn-wend-h{animation:fnRise .5s ease .9s both}
  .v10 .fn-wbox.fn-ended .fn-wend-a{animation:fnRise .5s ease 1.1s both}
}
@keyframes fnRise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
@keyframes fnLand{0%{opacity:0;transform:scale(1.35) translateY(-30px);box-shadow:0 0 0 0 rgba(52,211,120,0)}60%{opacity:1;box-shadow:0 0 44px 8px rgba(52,211,120,.6)}100%{opacity:1;transform:none;box-shadow:0 0 26px 2px rgba(52,211,120,.3)}}
.v10-phone .fn-wend{gap:10px;padding:12px}
.v10-phone .fn-wend-h b{font-size:22px}
.v10-phone .fn-wq li{padding:8px 12px}
.v10-phone .fn-wq li b{font-size:13px}
.v10-phone .fn-wq li small{font-size:11.5px}
/* the phone's film box is short: when the film ends the box grows to hold the queue (the film stays behind it, dimmed) */
.v10-phone .fn-wbox.fn-ended{height:auto!important;min-height:420px}
.v10-phone .fn-wbox.fn-ended video{position:absolute;inset:0;height:100%!important}
.v10-phone .fn-wbox.fn-ended .fn-wend{position:relative;inset:auto;padding:18px 12px}
.v10-phone .fn-wq{flex:none}
.v10-phone .fn-wqh{padding:9px 12px;font-size:9.5px;letter-spacing:.08em}
.v10-phone .fn-wqh span:last-child{display:none}
.v10-phone .fn-wend-h span{font-size:10.5px}
.v10-phone .fn-u{font-size:10.5px;padding:3px 9px 3px 5px}

/* ---------- B15 · Try it right here: larger, and the three reads say they agree ---------- */
.v10-desktop [data-v12="try"] [data-pick]{font-size:16px!important;padding:10px 22px 10px 10px!important}
.v10-desktop [data-v12="try"] [data-pick] img{width:64px!important;height:64px!important}
.v10-desktop [data-v12="try"] .ty1>div:nth-child(2){font-size:32px!important}
.v10-desktop [data-v12="try"] .ty1>div:nth-child(3){font-size:15px!important}
.v10-desktop [data-v12="try"] .ty3{font-size:16px!important}
.v10-desktop [data-v12="try"] .ty4{font-size:17px!important}
.v10 .ty5{gap:9px!important;align-items:center!important;padding:12px 14px;border-radius:14px;border:1px solid rgba(52,211,120,.28);background:rgba(52,211,120,.05)}
.v10 .ty5>span[style*="border-radius: 5px"]{width:12px!important;height:12px!important;border-radius:6px!important;box-shadow:0 0 10px rgba(52,211,120,.7)}
.v10 .fn-agree{display:flex;flex-direction:column;gap:2px;margin-left:8px!important;font-size:16px!important;line-height:1.3;color:#F2FFF8!important;font-weight:500}
.v10 .fn-agree b{font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#5AF5A0}
.v10-phone .fn-agree{font-size:14px!important}

/* ---------- B16 · Emergencies find you: the manager's next step fills the bottom of the phone ---------- */
.v10 .fn-next{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:12px;text-align:left;
  background:linear-gradient(180deg,rgba(52,211,120,.09),rgba(52,211,120,.03));border:1px solid rgba(52,211,120,.38)}
.v10 .fn-next-k{font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#5AF5A0}
.v10 .fn-next b{font-size:13px;font-weight:600;color:#F5F5F5}
.v10 .fn-next span:last-child{font-size:11px;line-height:1.4;color:#A3A3A3}
.v10 .fn-lockq{position:absolute;left:12px;right:12px;bottom:34px;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:18px;
  background:rgba(24,24,24,.72);border:1px solid #2A2A2A;text-align:left;font-size:12px;color:#D4D4D4}
.v10 .fn-lockq-k{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#8E9192}
.v10 .fn-lockq span:last-child{font-size:11px;color:#8E9192}

/* ---------- B17 · The two quotes: what the section is for ---------- */
.v10 section.v12-screen[data-v12="quotes"]{min-height:0!important}
.v10-desktop section.v12-screen[data-v12="quotes"]{flex-direction:column!important;padding-top:96px!important;padding-bottom:104px!important}
.v10 .fn-qhead{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.v10 .fn-eyebrow{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#5AF5A0}
.v10 .fn-qline{margin:0;font-size:22px;line-height:1.35;color:#D4D4D4}
.v10-phone .fn-qline{font-size:17px}
.v10-phone .fn-qhead{margin:0 0 6px}

/* ---------- B19 · the footer: four named columns, and the glow on hover ---------- */
.v10 footer .fn-fcols{flex:1 1 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 32px;margin-top:6px}
.v10 footer .fn-fcol{display:flex;flex-direction:column;align-items:flex-start}
.v10 footer .fn-fh{margin:0 0 6px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#5AF5A0}
.v10 footer .fn-fcol a{padding:6px 0!important;transition:color .2s ease,text-shadow .2s ease}
.v10 footer .fn-fcols a.v13-sec.v13-sec.v13-sec:hover,.v10 footer .fn-fcols a:hover,.v10 footer .fn-fcols a:focus-visible{color:#5AF5A0!important;
  text-shadow:0 0 14px rgba(90,245,160,.65),0 0 2px rgba(90,245,160,.4)}
.v10 footer svg ellipse,.v10 footer svg text{transition:opacity .5s ease}
.v10 footer svg:hover ellipse{opacity:.95}
.v10 footer:hover svg ellipse{opacity:.8}
.v10-phone footer .fn-fcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}

/* B12 on the phone: the page hides an output row's second span; its pop-up is a span too, so it is named back in */
.v10-phone [data-v12="told"] .outp > span.fn-tip{display:block!important}
.v10 .fn-part.fn-shut .fn-tip{opacity:0!important;visibility:hidden!important}