/* Liquid glass layer for the new system. Ported from the old homepage's
   material (tinted blur, bright top specular, darkened hairline edge, soft
   drop) and its ambient color fields, re-expressed on the tokens so it works
   in both themes. Everything degrades to the flat card when backdrop-filter
   is unavailable or the visitor asks for reduced transparency. */
:root{
  --lg-tint:rgba(255,255,255,.62); --lg-tint-strong:rgba(255,255,255,.78);
  --lg-blur:16px; --lg-spec:rgba(255,255,255,.95); --lg-edge:rgba(16,16,20,.14);
  --lg-shadow:0 22px 48px -26px rgba(16,16,20,.38);
  --lg-rim-a:rgba(242,90,28,.10); --lg-rim-b:rgba(123,97,255,.12);
  --brand:linear-gradient(135deg,#FF6B2B 0%,#7B61FF 100%);
  --mx:50%; --my:50%;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--lg-tint:rgba(22,22,27,.58);--lg-tint-strong:rgba(22,22,27,.78);--lg-spec:rgba(255,255,255,.14);--lg-edge:rgba(255,255,255,.10);--lg-shadow:0 26px 56px -28px rgba(0,0,0,.7);--lg-rim-a:rgba(255,122,69,.16);--lg-rim-b:rgba(140,118,255,.18)}}
:root[data-theme="dark"]{--lg-tint:rgba(22,22,27,.58);--lg-tint-strong:rgba(22,22,27,.78);--lg-spec:rgba(255,255,255,.14);--lg-edge:rgba(255,255,255,.10);--lg-shadow:0 26px 56px -28px rgba(0,0,0,.7);--lg-rim-a:rgba(255,122,69,.16);--lg-rim-b:rgba(140,118,255,.18)}

@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  /* The material */
  .glass,.nav .bar,.theme,.burger,.tabs,.plan:not(.lead),.vert,.shotcard,.step,.ask,.stat,.feature-card,.process-step,.for-item,.service-row,.local-card,.area-chip,.loss-card,.ethics-item,.form-card,.host,.strip-nav button,.svc:not(.ink):not(.grain),.next .ev,.qa details{
    background:
      linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,0) 34%),
      linear-gradient(180deg,var(--lg-spec) 0,transparent 1.5px),
      var(--lg-tint);
    -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(170%);backdrop-filter:blur(var(--lg-blur)) saturate(170%);
    border-color:transparent;
    box-shadow:inset 0 1px 0 var(--lg-spec),inset 0 -1px 2px var(--lg-rim-b),inset 1.5px 0 1.5px rgba(255,255,255,.25),inset -1px 0 1.5px var(--lg-rim-a),0 0 0 .5px var(--lg-edge),var(--lg-shadow);
  }
  .qa details{box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge);border-radius:14px;margin-bottom:8px;padding-inline:16px;border-bottom:0}
  .qa{border-top:0}
  .theme,.burger,.strip-nav button{border-radius:50%}
  /* Pointer light: a soft specular that follows the cursor over any glass card */
  .lit{position:relative;isolation:isolate}
  .lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s ease;
    background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.34),rgba(255,255,255,0) 42%),radial-gradient(640px circle at var(--mx) var(--my),rgba(242,90,28,.10),rgba(123,97,255,.08) 40%,transparent 70%);mix-blend-mode:screen}
  .lit:hover::after{opacity:1}
  :root[data-theme="dark"] .lit::after{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.16),rgba(255,255,255,0) 42%),radial-gradient(640px circle at var(--mx) var(--my),rgba(255,122,69,.16),rgba(140,118,255,.14) 40%,transparent 70%)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lit::after{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.16),rgba(255,255,255,0) 42%),radial-gradient(640px circle at var(--mx) var(--my),rgba(255,122,69,.16),rgba(140,118,255,.14) 40%,transparent 70%)}}
  @media (max-width:768px){:root{--lg-blur:12px}}
}

/* Floating glass nav capsule with a brand hairline underneath */
.nav{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:10px;padding-bottom:10px}
.nav .wrap{height:auto}
.nav .bar{display:flex;align-items:center;gap:28px;height:58px;padding:0 10px 0 20px;border-radius:999px;border:1px solid var(--line);width:100%;position:relative}
.nav .bar::after{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(242,90,28,.55),rgba(123,97,255,.55),transparent);opacity:.9;pointer-events:none}
.brand i{background:url(/assets/img/nf-mark-sm.svg) center/contain no-repeat;box-shadow:none}
/* the logo sits above the capsule's moving sheen so it is never washed out */
.nav .bar .brand{position:relative;z-index:1}
:root:not([data-theme="light"]) .nav .brand i{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55)) saturate(1.2) brightness(1.1)}
.chips i:not(.ok){background:var(--brand)}
.eyebrow::before{content:"";display:inline-block;width:18px;height:2px;border-radius:2px;background:var(--brand);margin-right:10px;vertical-align:middle}
.lp-eyebrow::before{content:"";display:inline-block;width:18px;height:2px;border-radius:2px;background:var(--brand);margin-right:10px;vertical-align:middle}

/* Ambient color fields behind sections, like the old site's glass fields */
.field{position:relative;isolation:isolate}
.glass-field{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.glass-field i{position:absolute;width:640px;height:540px;border-radius:50%;filter:blur(64px);opacity:.9;will-change:transform}
.glass-field i:first-child{left:-8%;top:0;background:radial-gradient(circle at 40% 40%,rgba(242,90,28,.20),transparent 65%);animation:driftA 26s ease-in-out infinite alternate}
.glass-field i:last-child{right:-10%;bottom:-6%;background:radial-gradient(circle at 60% 60%,rgba(123,97,255,.18),transparent 65%);animation:driftB 32s ease-in-out infinite alternate}
.glass-field::after{content:"";position:absolute;width:760px;height:620px;left:50%;top:42%;transform:translate(-50%,-50%);border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(255,107,43,.08) 0%,rgba(123,97,255,.07) 55%,transparent 75%)}
@keyframes driftA{from{transform:translate(0,0)}to{transform:translate(70px,40px)}}
@keyframes driftB{from{transform:translate(0,0)}to{transform:translate(-60px,-50px)}}
@media (max-width:768px){.glass-field i{width:420px;height:380px;filter:blur(48px)}}
:root[data-theme="dark"] .glass-field i{opacity:.75}

/* Brand gradient where the old site used it: lead plan edge, active tab, user bubbles */
.plan.lead{position:relative;overflow:hidden}
.plan.lead::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;pointer-events:none}
.tabs button[aria-selected="true"]{box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge),0 6px 16px -10px rgba(242,90,28,.45)}
.msg.u{background:var(--brand);color:#fff}
.btn:not(.o):hover{box-shadow:0 12px 30px -14px rgba(242,90,28,.55)}
.svc.grain,.cta.grain{box-shadow:0 30px 60px -34px rgba(242,90,28,.45)}

/* Tilt cards (the old 3D tilt, gentler) */
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tilt.on{transition:transform .08s linear}

@media (prefers-reduced-transparency:reduce){
  .glass,.nav .bar,.theme,.burger,.tabs,.plan:not(.lead),.vert,.shotcard,.step,.ask,.stat,.feature-card,.process-step,.for-item,.service-row,.local-card,.area-chip,.loss-card,.ethics-item,.form-card,.host,.strip-nav button,.svc:not(.ink):not(.grain),.next .ev,.qa details{background:var(--card)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border-color:var(--line)!important}
  .lit::after{display:none}
}
@media (prefers-reduced-motion:reduce){.glass-field i{animation:none}.tilt{transition:none}}
.nav .bar.scrolled{--lg-tint:var(--lg-tint-strong)}

/* ─── Pass 3: visible nav glass, aurora, lift hover, grain panels, footer ── */
.aurora{position:fixed;left:0;right:0;top:-140px;height:380px;z-index:1;pointer-events:none;filter:blur(70px);opacity:.95;
  background:radial-gradient(42% 70% at 18% 40%,rgba(242,90,28,.32),transparent 70%),radial-gradient(38% 65% at 78% 30%,rgba(123,97,255,.30),transparent 70%),radial-gradient(30% 50% at 50% 80%,rgba(255,107,43,.14),transparent 70%)}
:root[data-theme="dark"] .aurora{opacity:.55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aurora{opacity:.55}}
.nav{z-index:50;position:sticky}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav .bar{--lg-tint:rgba(255,255,255,.42);--lg-blur:22px;background:linear-gradient(120deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08)),var(--lg-tint);-webkit-backdrop-filter:blur(var(--lg-blur)) saturate(200%);backdrop-filter:blur(var(--lg-blur)) saturate(200%);
    box-shadow:inset 0 1.5px 1px rgba(255,255,255,.98),inset 0 -1px 2px rgba(123,97,255,.14),inset 1.5px 0 1.5px rgba(255,255,255,.5),inset -1.5px 0 1.5px rgba(242,90,28,.10),0 0 0 .5px rgba(16,16,20,.14),0 18px 50px -22px rgba(16,16,20,.34);overflow:hidden}
  .nav .bar::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 9s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen}
  @keyframes sheen{0%,60%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
  .nav .bar.scrolled{--lg-tint:rgba(255,255,255,.62)}
  :root[data-theme="dark"] .nav .bar{--lg-tint:rgba(22,22,27,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 2px rgba(140,118,255,.18),0 0 0 .5px rgba(255,255,255,.10),0 26px 56px -28px rgba(0,0,0,.7)}
  :root[data-theme="dark"] .nav .bar.scrolled{--lg-tint:rgba(22,22,27,.66)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav .bar{--lg-tint:rgba(22,22,27,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 2px rgba(140,118,255,.18),0 0 0 .5px rgba(255,255,255,.10),0 26px 56px -28px rgba(0,0,0,.7)}:root:not([data-theme="light"]) .nav .bar.scrolled{--lg-tint:rgba(22,22,27,.66)}}
}
/* hover: lift + brand rim, no 3D */
.lit{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.lit:hover{transform:translateY(-4px)}
.plan:not(.lead).lit:hover,.vert.lit:hover,.shotcard.lit:hover,.step.lit:hover,.stat.lit:hover,.feature-card.lit:hover,.entry.lit:hover{box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 0 .5px var(--lg-edge),0 30px 60px -30px rgba(242,90,28,.35),var(--lg-shadow)}
/* light theme gets more color in the fields */
.glass-field i:first-child{background:radial-gradient(circle at 40% 40%,rgba(242,90,28,.26),transparent 65%)}
.glass-field i:last-child{background:radial-gradient(circle at 60% 60%,rgba(123,97,255,.24),transparent 65%)}
/* the problem checklist on the grain surface */
.checks{color:#fff;background:radial-gradient(120% 90% at 85% 10%,rgba(242,90,28,.62),transparent 55%),radial-gradient(90% 80% at 10% 100%,rgba(123,97,255,.38),transparent 60%),#101014;position:relative;overflow:hidden;box-shadow:0 30px 60px -34px rgba(242,90,28,.45)}
.checks::after{content:"";position:absolute;inset:0;opacity:.28;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.checks div{position:relative;z-index:1;border:0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 .5px rgba(255,255,255,.10);font-size:17px;line-height:1.4;margin-bottom:0}
/* problem markers: an orange dash, not a success tick (these are the leaks, not features) */
.checks i{background:rgba(255,122,69,.16);box-shadow:inset 0 0 0 1px rgba(255,122,69,.45)}.checks i::after{width:10px;height:2px;border-radius:2px;background:#FF7A45;-webkit-mask:none;mask:none}
.checks b{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
/* founder online ping */
.ping{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2E9E5B;position:relative;flex:none}
.ping::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #2E9E5B;opacity:0;animation:ping 2s cubic-bezier(.2,.7,.2,1) infinite}
.who-av{position:relative;display:inline-block;flex:none}.who-av .ping{position:absolute;right:0;bottom:0;width:12px;height:12px;border:2px solid var(--paper)}
.online{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#2E9E5B;margin-left:8px;vertical-align:middle}
.online::before{content:"";width:7px;height:7px;border-radius:50%;background:#2E9E5B;box-shadow:0 0 0 3px rgba(46,158,91,.18);animation:pingdot 2s ease-in-out infinite}
@keyframes pingdot{50%{box-shadow:0 0 0 6px rgba(46,158,91,.08)}}
/* founder bio on glass, portrait with brand frame */
.bio{padding:clamp(22px,3vw,34px);border-radius:var(--r-l)}
.portrait{position:relative}.portrait::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;pointer-events:none;z-index:1}
/* how it works: auto progress + glass frame */
.step summary{position:relative}
.step .prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;overflow:hidden}
.step.auto .prog::after{content:"";position:absolute;inset:0;background:var(--brand);transform-origin:left;animation:prog var(--dur,4.2s) linear forwards}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.how-shot{position:sticky;top:96px;border-radius:var(--r-l);padding:10px;background:var(--lg-tint);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);box-shadow:inset 0 1px 0 var(--lg-spec),inset 0 -1px 2px var(--lg-rim-b),0 0 0 .5px var(--lg-edge),var(--lg-shadow);aspect-ratio:auto}
.how-shot img{border-radius:18px;aspect-ratio:4/3;object-fit:contain;background:#eceae4}
/* journey */
.journey{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(22px,3.5vw,48px);border-radius:var(--r-l);color:#fff;position:relative;overflow:hidden}
.journey::after{z-index:0}.journey>*{position:relative;z-index:1}
@media (max-width:960px){.journey{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.j-feed{grid-column:1/-1}}
@media (max-width:640px){.journey{grid-template-columns:minmax(0,1fr)}.j-phone{order:-1}}
.j-steps{display:grid;gap:10px}
.j-step{position:relative;text-align:left;display:grid;grid-template-columns:36px 1fr;gap:4px 12px;align-items:center;padding:14px 16px 18px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 .5px rgba(255,255,255,.10);color:#fff;transition:background .3s,transform .3s var(--ease);overflow:hidden;cursor:pointer}
.j-step:hover{background:rgba(255,255,255,.12)}
.j-step.on{background:rgba(255,255,255,.16);transform:translateX(4px)}
.j-step.done{opacity:.72}
.j-step .n{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.7);grid-row:1/3}
.j-step b{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.01em}
.j-step .d{font-size:13.5px;color:rgba(255,255,255,.72)}
.j-step .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.j-step.on .bar::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:prog var(--dur,3s) linear forwards}
.j-step.done .bar::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6)}
.j-phone .dev-phone{width:280px;margin:0 auto;box-shadow:0 44px 84px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.14)}
.j-phone .ph-screen{height:560px}
.j-feed{display:grid;gap:10px;align-content:center}
.j-feed .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px}
.j-feed .ev{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 .5px rgba(255,255,255,.10);opacity:.28;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.j-feed .ev.on{opacity:1;transform:none}
.j-feed .ev i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);position:relative;margin-top:1px}
.j-feed .ev.on i{background:#2E9E5B}.j-feed .ev.on i::after{content:"";position:absolute;inset:6px;background:#fff;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.j-feed .ev b{display:block;font-weight:500;font-size:15px}.j-feed .ev span{font-size:13px;color:rgba(255,255,255,.72)}
.j-feed .btn{margin-top:8px;justify-self:start;background:#fff;color:#101014;border-color:#fff}
.journey .ph-m{animation:pop .35s var(--ease) both}
/* built-for photos and faces row */
.vert .vphoto{height:auto;aspect-ratio:4/3;object-position:center 35%}
.who-foot .row{display:flex;gap:8px;flex:none}.who-foot .row img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--paper);box-shadow:0 6px 16px -8px rgba(16,16,20,.4);margin:0}
/* mega footer */
footer.mega{position:relative;overflow:hidden;background:#0F0F12;color:rgba(255,255,255,.72);border-top:0;padding:clamp(56px,7vw,96px) 0 28px;margin-top:0}
footer.mega::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,#FF6B2B,#7B61FF,transparent)}
footer.mega .wm{position:absolute;left:50%;bottom:-.12em;transform:translateX(-50%);font-family:var(--display);font-weight:600;font-size:clamp(90px,19vw,300px);letter-spacing:-.04em;line-height:1;color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text;white-space:nowrap;pointer-events:none;user-select:none}
footer.mega .wrap{position:relative;z-index:1}
.mega-cta{display:inline-flex;align-items:center;gap:.3em;font-family:var(--display);font-weight:300;font-size:clamp(36px,6vw,84px);letter-spacing:-.03em;line-height:1.05;color:#fff}
.mega-cta em{font-style:normal;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.mega-cta .arrow{display:inline-block;transition:transform .35s var(--ease)}.mega-cta:hover .arrow{transform:translateX(.25em)}
.mega-sub{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:14px 0 clamp(40px,5vw,64px)}
footer.mega .foot b{color:#fff}footer.mega .foot a{color:rgba(255,255,255,.7)}footer.mega .foot a:hover{color:#fff}footer.mega .brand{color:#fff}
footer.mega .foot>div:first-child a{color:#fff}
.foot-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:48px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.foot-meta span{display:inline-flex;align-items:center;gap:8px}.foot-meta .sep{opacity:.4}
footer.mega .foot-bottom{border-top:0;margin-top:18px;padding-top:0;color:rgba(255,255,255,.45);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.nav .bar::before,.step.auto .prog::after,.j-step.on .bar::after,.online::before,.ping::after{animation:none}}

@media (max-width:760px){
  .journey{padding:16px;gap:14px;grid-template-columns:minmax(0,1fr)}
  .j-feed{display:none}
  .j-steps{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:2px 4px}
  .j-step{flex:0 0 auto;display:block;padding:9px 14px 13px;border-radius:999px;transform:none!important}
  .j-step .n,.j-step .d{display:none}.j-step b{font-size:13px;white-space:nowrap}
  .j-step .bar{height:2px;left:12px;right:12px;bottom:6px;border-radius:2px}
  .j-phone{order:-1}
}
@media (max-width:760px){
  .j-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;margin-inline:0;padding:0}
  .j-step{display:grid;grid-template-columns:28px 1fr;gap:2px 8px;padding:10px 12px 14px;border-radius:14px;align-items:center}
  .j-step .n{display:block;font-size:11px}.j-step b{font-size:12.5px;white-space:normal;line-height:1.2}.j-step .d{display:none}
  .j-step .bar{left:0;right:0;bottom:0;height:3px;border-radius:0}
}

/* smoothness pass: progress bar follows the scene length (--dur set by the page) */
.step .prog::after{will-change:transform}

/* ─── Performance pass: the same glass with far fewer blurred layers ───────
   Measured while scrolling the homepage with the CPU throttled: the blur
   filters on the color fields and the aurora, and the backdrop blur on every
   card on phones, were most of the frame cost. The fields and the aurora are
   already soft radial gradients, so they drop the filter and widen their
   falloff instead; on phones the grid cards keep the tint, rims and specular
   but let the nav capsule, the hero demo and ARIA keep the real backdrop blur. */
.glass-field i,.hero .glass-field i{filter:none;transform:translateZ(0)}
.glass-field i:first-child{background:radial-gradient(circle at 42% 42%,rgba(242,90,28,.22) 0%,rgba(242,90,28,.09) 34%,rgba(242,90,28,.02) 56%,transparent 70%)}
.glass-field i:last-child{background:radial-gradient(circle at 58% 58%,rgba(123,97,255,.20) 0%,rgba(123,97,255,.08) 34%,rgba(123,97,255,.02) 56%,transparent 70%)}
.glass-field::after{filter:none;background:radial-gradient(closest-side,rgba(255,107,43,.085) 0%,rgba(123,97,255,.06) 48%,rgba(123,97,255,.015) 80%,transparent 100%)}
.aurora{filter:none;top:-160px;height:560px;will-change:transform;transform:translateZ(0);
  background:radial-gradient(40% 44% at 18% 40%,rgba(242,90,28,.30) 0%,rgba(242,90,28,.12) 42%,rgba(242,90,28,.03) 72%,transparent 100%),radial-gradient(36% 42% at 78% 32%,rgba(123,97,255,.28) 0%,rgba(123,97,255,.11) 42%,rgba(123,97,255,.03) 72%,transparent 100%),radial-gradient(30% 34% at 50% 62%,rgba(255,107,43,.12) 0%,rgba(255,107,43,.03) 60%,transparent 100%)}
.lp-demo-wrap .laptop{will-change:transform}
.lp-demo-wrap .laptop::before{filter:none;background:radial-gradient(closest-side,rgba(242,90,28,.40) 0%,rgba(123,97,255,.22) 55%,rgba(123,97,255,.04) 85%,transparent 100%)}
@media (max-width:760px){
  .plan:not(.lead),.vert,.shotcard,.step,.ask,.stat,.feature-card,.process-step,.for-item,.service-row,.local-card,.area-chip,.loss-card,.ethics-item,.form-card,.host,.strip-nav button,.svc:not(.ink):not(.grain),.next .ev,.qa details,.entry,.agent,.how-shot,.j-step{-webkit-backdrop-filter:none;backdrop-filter:none;--lg-tint:var(--lg-tint-strong)}
  @keyframes blurin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (max-width:760px){
  /* the journey phone was 280x560 on phones: half of it empty. Smaller frame, same story. */
  .j-phone .dev-phone{width:236px;padding:9px;border-radius:36px}.j-phone .ph-screen{height:440px;border-radius:28px}
}
@media (max-width:760px){.mega-cta{display:block}.mega-cta .arrow{display:inline-block;vertical-align:baseline}}

/* ─── Journey iPhone: a real-looking device ──────────────────────────────── */
.j-phone{display:flex;justify-content:center;align-items:flex-start}
.j-phone .dev-phone{width:300px;background:linear-gradient(160deg,#3b3b44 0%,#1c1c22 38%,#2b2b33 100%);border-radius:52px;padding:11px;position:relative;box-shadow:0 70px 110px -50px rgba(0,0,0,.9),0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 2px rgba(0,0,0,.55),inset 0 0 0 4px #0b0b0e}
.j-phone .dev-phone::before{display:none}
.ph-btn{position:absolute;background:linear-gradient(90deg,#34343c,#1a1a1f);border-radius:2px;z-index:0}
.ph-btn.mute{left:-3px;top:98px;width:3px;height:22px}.ph-btn.vol{left:-3px;top:136px;width:3px;height:38px;box-shadow:0 50px 0 0 #262630}.ph-btn.pwr{right:-3px;top:168px;width:3px;height:64px;background:linear-gradient(270deg,#34343c,#1a1a1f)}
.j-phone .ph-screen{background:#FBFAF7;border-radius:42px;height:600px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.ph-island{position:absolute;top:12px;left:50%;width:104px;height:31px;margin-left:-52px;border-radius:999px;background:#07070a;z-index:7;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.ph-island i{position:absolute;right:13px;top:9px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#2d3d6b,#0a0e1c 62%);box-shadow:inset 0 0 2px rgba(255,255,255,.4)}
.ph-status{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:15px 30px 0 32px;font-size:14.5px;font-weight:600;color:#101014;z-index:6;letter-spacing:-.01em;font-feature-settings:"tnum"}
.ph-status .ic{display:flex;gap:6px;align-items:center}.ph-status svg{width:17px;height:11px;fill:#101014;color:#101014;display:block}
/* no signal bars: beside the Dynamic Island there is room for wifi and battery only (they ran under the island) */
.ph-status svg.sig{display:none}.ph-status{padding-right:16px}
.ph-status .bat{width:25px;height:12px;border:1.5px solid rgba(16,16,20,.38);border-radius:4px;position:relative;padding:1.5px;box-sizing:border-box}.ph-status .bat::after{content:"";position:absolute;right:-4.5px;top:2.5px;width:2px;height:4.5px;background:rgba(16,16,20,.38);border-radius:0 2px 2px 0}.ph-status .bat i{display:block;height:100%;width:82%;background:#101014;border-radius:1.5px}
.ph-home{position:absolute;left:50%;bottom:8px;width:118px;height:5px;margin-left:-59px;border-radius:999px;background:rgba(16,16,20,.82);z-index:7}
.ph-glare{position:absolute;inset:0;pointer-events:none;z-index:8;border-radius:42px;background:linear-gradient(112deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 24%,rgba(255,255,255,0) 42%)}
.ph-view{position:absolute;inset:56px 0 24px;opacity:0;transform:translateX(28px);transition:opacity .45s var(--ease-out),transform .6s var(--ease-out);display:flex;flex-direction:column;padding:0 12px;pointer-events:none}
.ph-view.prev{transform:translateX(-28px)}
[data-step="0"] .v0,[data-step="1"] .v1,[data-step="2"] .v2,[data-step="3"] .v3{opacity:1;transform:none}
/* screen 1: the firm's site */
.ph-site{display:grid;gap:12px;padding:6px 4px 0;color:#1c2a3a}
.ps-nav{display:flex;justify-content:space-between;align-items:center;padding:6px 2px 10px;border-bottom:1px solid #e6e9ee}.ps-nav b{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:16px;color:#1F3A5F}.ps-nav i{width:18px;height:2px;background:#1F3A5F;border-radius:2px;box-shadow:0 -5px 0 #1F3A5F,0 5px 0 #1F3A5F}
.ps-hero h4{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:1.15;margin:0 0 8px;color:#1F3A5F}.ps-hero p{margin:0 0 12px;font-size:12.5px;line-height:1.45;color:#425466}
.ps-cta{display:inline-block;background:#1F3A5F;color:#fff;font-size:12.5px;font-weight:500;padding:9px 13px;border-radius:8px}
.ps-photo{height:84px;border-radius:12px;background:linear-gradient(135deg,#dfe6ef,#c5d2e2);position:relative;overflow:hidden}.ps-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 70% 30%,rgba(255,255,255,.55),transparent 70%)}
.ps-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ps-cards div{border:1px solid #e6e9ee;border-radius:10px;padding:10px;font-size:11px;color:#425466;line-height:1.35}.ps-cards b{display:block;font-family:Georgia,"Times New Roman",serif;color:#1F3A5F;font-size:12.5px;margin-bottom:3px}
.ph-bubble{margin-top:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:8px;background:#1F3A5F;color:#fff;font-size:13px;font-weight:600;padding:12px 16px 12px 13px;border-radius:999px;box-shadow:0 14px 30px -12px rgba(31,58,95,.7);animation:bob 2.4s ease-in-out infinite;margin-right:4px;margin-bottom:8px}
.ph-bubble i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.35)}
/* screen 2: the chat */
.ph-chat,.ph-cal{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:18px;box-shadow:0 0 0 1px rgba(16,16,20,.08);overflow:hidden}
.pc-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #eee;flex:none}.pc-head i{width:34px;height:34px;border-radius:50%;background:#1F3A5F;color:#fff;font:600 11px var(--mono);display:inline-flex;align-items:center;justify-content:center;flex:none}
.pc-head b{display:block;font-weight:600;font-size:13.5px;line-height:1.2;color:#101014}.pc-head span{font-size:11.5px;color:#777;display:flex;align-items:center;gap:5px}.pc-head span::before{content:"";width:6px;height:6px;border-radius:50%;background:#2E9E5B}.pc-head em{margin-left:auto;font-style:normal;color:#999;font-size:18px;line-height:1}
.pc-log{flex:1;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.ph-m{max-width:86%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.4;animation:pop .4s cubic-bezier(.2,.8,.2,1) both;color:#101014}
.ph-m.a{align-self:flex-start;background:#F2F0EA;border-bottom-left-radius:4px}.ph-m.u{align-self:flex-end;background:#1F3A5F;color:#fff;border-bottom-right-radius:4px}
.ph-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;background:#F2F0EA;border-radius:14px;border-bottom-left-radius:4px;animation:pop .3s cubic-bezier(.2,.8,.2,1) both}.ph-typing i{width:6px;height:6px;border-radius:50%;background:#9a9aa6;animation:blink 1s infinite}.ph-typing i:nth-child(2){animation-delay:.15s}.ph-typing i:nth-child(3){animation-delay:.3s}
.pc-in{flex:none;margin:8px 10px 10px;height:38px;border:1px solid #d9d5cc;border-radius:999px;padding:0 6px 0 14px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#999}.pc-in i{width:28px;height:28px;border-radius:50%;background:#1F3A5F;position:relative}.pc-in i::after{content:"";position:absolute;left:10px;top:8px;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
/* screen 3: the calendar */
.ph-cal{padding-bottom:12px}
.ph-week{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:12px 12px 4px}.ph-week span{text-align:center;font-size:10.5px;color:#888;display:grid;gap:4px;padding:6px 0;border-radius:10px}.ph-week span b{font-size:15px;font-weight:600;color:#101014}.ph-week span.on{background:#1F3A5F;color:rgba(255,255,255,.75)}.ph-week span.on b{color:#fff}
.ph-slot{margin:6px 12px 0;border:1px solid #e3e0d8;border-radius:12px;padding:11px 14px;font-size:14px;font-weight:600;background:#fff;color:#101014;display:flex;justify-content:space-between;align-items:center;transition:background .3s,transform .3s}
.ph-slot em{font-style:normal;font-weight:400;font-size:11.5px;color:#777}
.ph-slot.sel{background:#1F3A5F;color:#fff;border-color:#1F3A5F;box-shadow:0 10px 24px -14px rgba(31,58,95,.8)}.ph-slot.sel em{color:rgba(255,255,255,.75)}
.ph-note{font-size:11px;color:#888;margin:10px 14px 0;line-height:1.4}
/* screen 4: booked */
.ph-done{padding:26px 12px 0;display:grid;gap:8px;justify-items:start}
.ph-check{width:56px;height:56px;border-radius:50%;background:#2E9E5B;position:relative;margin-bottom:6px;box-shadow:0 0 0 8px rgba(46,158,91,.14)}
.ph-done b{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.02em;color:#101014}.ph-done>span{font-size:13.5px;color:#55555f;margin-bottom:8px;line-height:1.4}
.ph-card{display:flex;gap:10px;align-items:center;width:100%;font-size:12.5px;padding:11px 12px;border-radius:12px;background:#fff;border:1px solid #e3e0d8;color:#101014}
.ph-addcal{margin-top:8px;width:100%;text-align:center;background:#1F3A5F;color:#fff;font-size:13px;font-weight:600;padding:12px;border-radius:12px}
@media (max-width:760px){
  .j-phone{height:480px;overflow:visible}
  .j-phone .dev-phone{width:300px;padding:11px;border-radius:52px;transform:scale(.76);transform-origin:top center}
  .j-phone .ph-screen{height:600px;border-radius:42px}
  .ph-view{inset:56px 0 24px;padding:0 12px}
}
.ph-site .ps-cta{height:auto;display:inline-block;background:#1F3A5F}
.ph-done>span.ph-addcal{color:#fff;font-size:13px;margin-bottom:0}