/* ===========================================================================
   Lens Style homepage.

   Same architecture as the Polson page — pinned hero driven by scroll, a
   scrubbed count, story, decisions, proof, horizontal run, what it sees, the
   offer, pricing — in Lens Style's own palette: a darkroom black, lit by an
   ochre safelight, with the lens icon's warm-to-violet sweep for the numbers.
   The shared parts (burger, motion primitives) come from site-nav.css and
   motion.css.

   The hero's device is the app arriving, not an imitation of it: three of
   its real screens start scattered in the dark, among the drifting names of
   styles, and your scroll brings them together into one row. Everywhere the
   app appears on this page it is a real screenshot in a phone frame; the
   catalogue uses the real sample pictures that ship inside the app.
   =========================================================================== */

:root{
  --measure: 680px;   /* shared text column, so headline and body are one block */
  --ink:     #f4f0e8;
  --dim:     #aaa498;
  --faint:   #7c776d;
  --murk:    #0a0a0b;
  --clear:   #111013;
  --line:    rgba(255,255,255,.11);
  --ochre:   #d99549;
  --ochre-d: #b4712a;
  --paper:   #f3efe6;
  --lens:    linear-gradient(180deg,#f2b25e 0%,#e2704a 48%,#8a62d6 100%);
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rail:    linear-gradient(90deg,#d99549,#8a62d6);
}

.lens{background:var(--murk);color:var(--ink);font-family:var(--sans);overflow-x:clip}
.lens .wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.dsp{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.98}
.eyebrow-x{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ochre);font-weight:600}

/* --- kinetic type (shared behaviour with the Polson page) ------------------ */
[data-split] .w{display:inline-block;white-space:nowrap}
[data-split] .c{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.26em;margin-bottom:-.26em}
[data-split] .c > i{display:inline-block;font-style:inherit;
  transform:translateY(calc(100% + .3em));
  transition:transform .85s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--ci,0) * 26ms)}
[data-split].is-in .c > i{transform:none}
@media (prefers-reduced-motion: reduce){ [data-split] .c > i{transform:none !important;transition:none !important} }

/* ===== ACT 1 — one photograph, remade under the scroll ===================== */
.hero-scene{position:relative}
.hero-pin{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;padding:62px 0 30px}
/* The scene only becomes tall and pinned once the script that drives it is
   running, and not at all when motion is reduced — otherwise it would be two
   screens of scrolling past a picture that never changes. */
.js-motion .hero-scene{height:320vh}
.js-motion .hero-pin{position:sticky;top:0;height:100svh;min-height:0;padding-bottom:0}
@media(max-width:860px){
  .js-motion .hero-scene{height:280vh}
  .hero-pin{padding-top:96px;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){
  .js-motion .hero-scene{height:auto}
  .js-motion .hero-pin{position:relative;height:auto;min-height:100svh;padding-bottom:30px}
}

/* The noise: the names of styles, drifting past in the dark. */
.namefield{position:absolute;inset:-8%;z-index:0;pointer-events:none;transition:opacity 1.2s ease}
.namefield[data-fade="1"]{opacity:.15}
.nm{position:absolute;font-family:var(--display);font-size:clamp(14px,1.7vw,20px);color:var(--dim);
  opacity:.26;white-space:nowrap;filter:blur(1px);font-style:italic;animation:nmdrift linear infinite}
@keyframes nmdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-150vh,0)}}
@media (prefers-reduced-motion: reduce){ .nm{animation:none} }

/* An ochre safelight, as in a darkroom. */
.safelight{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(40% 36% at var(--mx,62%) var(--my,40%),rgba(217,149,73,.17),transparent 70%),
             radial-gradient(60% 50% at 50% 110%,rgba(138,98,214,.12),transparent 70%)}

.hero-grid{position:relative;z-index:2;width:100%;max-width:1120px;padding:0 26px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-copy{text-align:left}
.hero-copy h1,.hero-copy .h1b{font-size:clamp(40px,6.2vw,84px);margin:0}
.hero-copy .h1b{color:var(--ochre)}
.hero-copy .h1b .c > i{color:inherit}
.hero-copy .eyebrow-x{margin-bottom:18px}

/* The three screens. Each phone carries a scattered start (--x, --y, --rot)
   and is pulled into the row as --p climbs; the default of 1 is the settled
   row, which is what you get with JS off or motion reduced. */
.phones{position:relative;justify-self:center;width:100%;height:min(72svh,640px);
  --pw:calc(min(72svh,640px) * .78 * 9 / 19.5)}
.phones .ph{position:absolute;left:50%;top:50%;width:var(--pw);margin:0;
  margin-left:calc(var(--pw) / -2);margin-top:calc(var(--pw) * 19.5 / 9 / -2);
  transform:translate3d(calc(var(--ex) + var(--x) * (1 - var(--p,1))),calc(var(--y) * (1 - var(--p,1))),0)
            rotate(calc(var(--er) + var(--rot) * (1 - var(--p,1))))
            scale(calc(var(--es) - (1 - var(--p,1)) * .12));
  opacity:calc(.35 + var(--p,1) * .65);will-change:transform}
.phones .ph.c{--ex:0px;--er:0deg;--es:1;--x:0px;--y:60px;--rot:-4deg;z-index:3}
.phones .ph.l{--ex:calc(var(--pw) * -.62);--er:-7deg;--es:.86;--x:calc(var(--pw) * -.9);--y:-80px;--rot:-16deg;z-index:2}
.phones .ph.r{--ex:calc(var(--pw) * .62);--er:7deg;--es:.86;--x:calc(var(--pw) * .9);--y:90px;--rot:15deg;z-index:1}
.phones .ph.l .screen img,.phones .ph.r .screen img{filter:brightness(calc(.45 + var(--p,1) * .3))}

/* Three propositions, landing one at a time once the picture has settled. */
.props{display:grid;gap:10px;margin:30px 0 0;max-width:520px}
.prop{display:flex;align-items:baseline;gap:12px;border:1px solid var(--line);border-radius:14px;
  padding:13px 18px;background:rgba(255,255,255,.035);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.js-motion .prop{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js-motion .prop.in{opacity:1;transform:none}
.prop b{font-weight:700;letter-spacing:-.02em;color:var(--ink);font-size:clamp(17px,1.9vw,21px);line-height:1.2}
.prop span{color:var(--faint);font-size:14px}
.prop span:before{content:"— "}
@media (prefers-reduced-motion: reduce){
  .prop{opacity:1 !important;transform:none !important;transition:none !important}
}

.cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}
.cta .status{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-size:14.5px;font-weight:600}
.cta .status .dot,.pill-x .dot{width:7px;height:7px;border-radius:50%;background:var(--ochre);box-shadow:0 0 11px var(--ochre)}

.hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;color:var(--faint);
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;display:flex;flex-direction:column;
  align-items:center;gap:8px;transition:opacity .5s ease}
.hint[data-done="1"]{opacity:0}
.hint i{width:1px;height:36px;background:linear-gradient(var(--ochre),transparent);
  animation:hpulse 2s ease-in-out infinite}
@keyframes hpulse{0%,100%{opacity:.2;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){ .hint i{animation:none} }

/* Phones: one column, the picture on top. Everything is sized against the
   screen height as well as its width, so a short phone still fits the lot. */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:16px;justify-items:center;text-align:center}
  .hero-copy{text-align:center;display:contents}
  .hero-copy .eyebrow-x{display:none}
  .hero-copy .heads{order:1}
  .phones{order:2;height:min(40svh,92vw);--pw:calc(min(40svh,92vw) * .86 * 9 / 19.5)}
  .hero-copy .props{order:3}
  .hero-copy .cta{order:4}
  .hero-copy h1,.hero-copy .h1b{font-size:clamp(26px,7.6vw,46px)}
  .props{margin:4px auto 0;gap:7px;width:100%;max-width:420px}
  .prop{padding:9px 14px;text-align:left}
  .prop b{font-size:15.5px}
  .prop span{font-size:12.5px}
  .cta{justify-content:center;margin-top:4px}
  .cta .status{padding:9px 16px;font-size:13.5px}
  .hint{display:none}
}
@media(max-width:860px) and (max-height:700px){
  .phones{height:36svh;--pw:calc(36svh * .86 * 9 / 19.5)}
  .prop span{display:none}
}

/* The stats sit just under the pinned screen, where there is room to set them
   at the size a price deserves. */
.hero-foot{position:relative;background:var(--murk);padding:clamp(40px,8vh,80px) 0 clamp(30px,6vh,60px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto;max-width:860px;align-items:end}
.stats .stat{text-align:center;padding:0 8px;position:relative}
.stats .stat + .stat:before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line)}
.stats b{display:block;font-size:clamp(40px,8vw,84px);font-weight:800;letter-spacing:-.045em;line-height:.92;
  background:var(--lens);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;margin-top:12px;color:var(--ink);font-size:clamp(12.5px,1.6vw,15px);font-weight:500;line-height:1.3}
@media(max-width:560px){ .stats{gap:4px} .stats .stat{padding:0 4px} .stats span{font-size:11.5px} }

/* ===== ACT 2 — the whole wall, counted ===================================== */
.act-count{position:relative;height:250vh;background:var(--murk)}
.act-count .pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 26px;overflow:hidden}
.cost-line{color:var(--dim);font-size:clamp(15px,2vw,18px);margin-top:6px}
.cost-line b{color:var(--ink);font-weight:500}
.bignum{font-family:var(--display);font-size:clamp(96px,26vw,320px);line-height:.86;margin-top:10px;
  color:transparent;background:var(--lens);-webkit-background-clip:text;background-clip:text;
  font-variant-numeric:tabular-nums;transform:scale(calc(.88 + var(--s,1) * .12))}
.bignum-l{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.namestrip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px;max-width:720px}
.namestrip span{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--dim)}
.js-motion .namestrip span{opacity:.18;transition:opacity .4s ease,border-color .4s ease,color .4s ease}
.js-motion .namestrip span.in{opacity:1;border-color:rgba(217,149,73,.45);color:var(--ink)}
.costbar{width:min(560px,84vw);height:2px;background:var(--line);margin-top:26px;overflow:hidden}
.costbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ochre),#8a62d6);
  transform:scaleX(var(--s,1));transform-origin:0 50%}
.cost-copy{margin-top:22px;max-width:580px;color:var(--dim);font-size:clamp(15px,2.1vw,18px)}
.cost-copy b{color:var(--ink);font-weight:500}
@media (prefers-reduced-motion: reduce){ .js-motion .namestrip span{opacity:1} }

/* ===== ACT 3 / 3b — story and decisions =================================== */
.act-turn{background:linear-gradient(180deg,var(--murk),var(--clear));
  padding:clamp(80px,14vh,150px) 0;text-align:center}
.act-turn h2{font-size:clamp(30px,5.2vw,60px);max-width:var(--measure);margin:16px auto 0}
.rule{width:1px;height:clamp(56px,9vh,100px);margin:0 auto;
  background:linear-gradient(transparent,var(--ochre),transparent)}
.story{max-width:var(--measure);margin:28px auto 0;text-align:center}
.story p{margin-top:18px;color:var(--dim);font-size:clamp(15.5px,2vw,17.5px);line-height:1.68}
.story p b{color:var(--ink);font-weight:500}
.sig{color:var(--faint);font-size:14px;font-style:italic;margin-top:22px}

.act-rules{background:var(--clear);padding:clamp(70px,12vh,130px) 0;text-align:center}
.act-rules h2{font-size:clamp(32px,5.5vw,64px);max-width:var(--measure);margin:14px auto 0}
.act-rules .story{margin:22px auto 0}
.act-rules .story.closing{margin-top:44px}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:860px){.rules{grid-template-columns:1fr;gap:18px}}
.rule-c{border-top:1px solid var(--line);padding-top:22px;text-align:left}
.rule-c .rn{font-family:var(--display);font-size:52px;line-height:1;color:var(--ochre)}
.rule-c h3{font-size:17px;font-weight:600;margin-top:12px}
.rule-c p{color:var(--dim);font-size:14.5px;margin-top:10px}

/* ===== ACT 4 — proof: the app itself, in three real screens ============== */
.act-proof{background:var(--clear);padding:clamp(70px,12vh,130px) 0}
.act-proof .head{text-align:center;max-width:var(--measure);margin:0 auto}
.act-proof h2{font-size:clamp(30px,5.2vw,60px);margin-top:14px}
.act-proof .head p{color:var(--dim);margin-top:16px;font-size:16.5px}
.act-proof .head p b{color:var(--ink);font-weight:500}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:48px auto 0;max-width:900px}
@media(max-width:760px){ .steps{gap:10px} }
.steps figure{margin:0}
.steps figcaption{margin-top:14px;color:var(--dim);font-size:13.5px;text-align:center;line-height:1.4}
.steps figcaption b{display:block;font-family:var(--display);color:var(--ochre);font-size:22px;line-height:1;margin-bottom:6px}
@media(max-width:560px){ .steps figcaption{font-size:11.5px} .steps figcaption b{font-size:18px} }

/* ===== ACT 5 — the families, travelling sideways ========================== */
.act-run{position:relative;background:var(--clear)}
.act-run .pin{display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:40px}
.run-head{padding:0 26px;max-width:1180px;margin:0 auto 26px;width:100%;text-align:center}
.run-head h2{font-size:clamp(30px,5vw,58px);margin-top:12px}
.run-sub{color:var(--dim);font-size:15.5px;margin:12px auto 0;max-width:var(--measure)}
.run{display:flex;gap:20px;padding:0 26px}
.js-motion .run{will-change:transform;
  transform:translate3d(calc(var(--s,0) * -1 * (var(--run-w,2200px) - 88vw)),0,0)}
.fcard{flex:0 0 clamp(236px,26vw,300px);border:1px solid var(--line);border-radius:20px;padding:14px 14px 20px;
  text-align:left;background:linear-gradient(165deg,rgba(217,149,73,.07),rgba(255,255,255,.025));
  display:flex;flex-direction:column}
.fcard .pic{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#222}
.fcard .pic > img{width:100%;height:100%;object-fit:cover;display:block}
.fcard .n{font-family:var(--display);font-size:13px;color:var(--ochre);letter-spacing:.1em;margin:16px 6px 0}
.fcard h3{font-family:var(--display);font-size:25px;margin:4px 6px 0;letter-spacing:-.02em}
.fcard p{color:var(--dim);font-size:13.5px;margin:9px 6px 0;line-height:1.5}
.fcard.alt{border-color:rgba(138,98,214,.45);background:linear-gradient(165deg,rgba(138,98,214,.14),rgba(255,255,255,.03))}
.fcard.alt .n{color:#b39cf0}
.fcard .pic.mini{background:radial-gradient(60% 60% at 50% 40%,rgba(138,98,214,.25),transparent 70%),#15131a;display:flex;align-items:center;justify-content:center;padding:8px 0}
.fcard .pic.mini .shot{height:100%;width:auto;aspect-ratio:9/19.5;padding:3px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.fcard .pic.mini .shot .screen{border-radius:11px}
.fcard .pic.mini .shot:before,.fcard .pic.mini .shot:after{display:none}
.runbar{max-width:1180px;margin:24px auto 0;padding:0 26px;width:100%}
.runbar i{display:block;height:2px;background:var(--ochre);transform:scaleX(var(--s,0));transform-origin:0 50%}
@media(max-width:760px){ .fcard p{font-size:13px} .run-sub{font-size:14px} }
@media(max-height:720px){ .fcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} }

/* The run only pins and travels once the script is live and motion is
   allowed. Otherwise — JS off, or reduced motion — it is an ordinary row you
   swipe, so no card is ever out of reach. */
.act-run{padding:clamp(70px,12vh,130px) 0}
.act-run .run{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.act-run .fcard{scroll-snap-align:start}
.act-run .runbar{display:none}
.js-motion .act-run{height:420vh;padding:0}
.js-motion .act-run .pin{position:sticky;top:0;height:100svh}
.js-motion .act-run .run{overflow:visible;scroll-snap-type:none;padding-bottom:0}
.js-motion .act-run .runbar{display:block}
@media(max-width:760px){ .js-motion .act-run{height:380vh} }
@media (prefers-reduced-motion: reduce){
  .js-motion .act-run{height:auto;padding:clamp(70px,12vh,130px) 0}
  .js-motion .act-run .pin{position:static;height:auto}
  .js-motion .act-run .run{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .js-motion .act-run .runbar{display:none}
}

/* ===== What it sees — the privacy position ================================= */
.act-data{background:linear-gradient(180deg,var(--clear),#141217);padding:clamp(80px,14vh,150px) 0}
.act-data .head{text-align:center;max-width:var(--measure);margin:0 auto}
.act-data h2{font-size:clamp(30px,5.2vw,60px);margin-top:14px;letter-spacing:-.04em}
.act-data .lead{color:var(--dim);font-size:17px;margin-top:20px}
.act-data .lead b{color:var(--ink);font-weight:500}
.data-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:52px auto 0;max-width:900px}
@media(max-width:760px){ .data-shots{gap:10px} }
.data-shots figure{margin:0}
.data-shots figcaption{margin-top:12px;color:var(--faint);font-size:12.5px;text-align:center;line-height:1.4}

.callout{max-width:820px;margin:56px auto 0;padding:34px 32px;border-radius:22px;
  border:1px solid rgba(217,149,73,.30);
  background:linear-gradient(160deg,rgba(217,149,73,.10),rgba(255,255,255,.025));text-align:left}
.callout p{font-size:clamp(19px,2.6vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.42;color:var(--ink)}
.callout p b{color:var(--ochre);font-weight:600}
.callout .sub{margin-top:14px;font-size:14.5px;font-weight:400;color:var(--dim);letter-spacing:0;line-height:1.6}
@media(max-width:560px){ .callout{padding:26px 22px} }

.promise{display:grid;grid-template-columns:repeat(2,1fr);margin:60px auto 0;max-width:900px;border-top:1px solid var(--line)}
@media(max-width:760px){ .promise{grid-template-columns:1fr} }
.promise div{padding:22px 0;border-bottom:1px solid var(--line);text-align:left}
.promise div:nth-child(odd){padding-right:30px}
.promise div:nth-child(even){padding-left:30px;border-left:1px solid var(--line)}
@media(max-width:760px){ .promise div{padding:20px 0 !important;border-left:none !important} }
.promise h3{font-size:16.5px;font-weight:600}
.promise p{color:var(--dim);font-size:14.5px;margin-top:8px}
.data-note{max-width:700px;margin:34px auto 0;color:var(--faint);font-size:14px;text-align:center;font-style:italic}
.data-note a{color:var(--ochre);text-decoration:underline;text-underline-offset:2px}

/* ===== The offer ========================================================== */
.act-offer{position:relative;background:linear-gradient(180deg,#141217,var(--clear));
  padding:clamp(80px,14vh,150px) 0;overflow:hidden}
.act-offer:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 40% at 50% 0%,rgba(217,149,73,.10),transparent 70%)}
.act-offer .wrap{position:relative}
.offer-head{text-align:center;max-width:var(--measure);margin:0 auto}
.act-offer h2{font-size:clamp(30px,5.2vw,60px);margin-top:14px;letter-spacing:-.04em}
.offer-head .lead{color:var(--dim);font-size:17.5px;margin-top:20px}
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:56px auto 0;max-width:960px}
@media(max-width:820px){ .figures{grid-template-columns:repeat(2,1fr);gap:26px 10px} }
.fig{text-align:center;position:relative;padding:0 10px}
.fig + .fig:before{content:"";position:absolute;left:0;top:10%;bottom:22%;width:1px;background:var(--line)}
@media(max-width:820px){ .fig:nth-child(odd):before{display:none} }
.fig b{display:block;font-size:clamp(38px,6.5vw,72px);font-weight:800;letter-spacing:-.045em;line-height:.95;
  background:var(--lens);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.fig span{display:block;margin-top:11px;color:var(--ink);font-size:14.5px;font-weight:500}
.fig em{display:block;margin-top:5px;color:var(--faint);font-size:13px;font-style:normal}

/* Phone frames, drawn in CSS, as on the Polson page. */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:60px auto 0;max-width:900px}
@media(max-width:760px){ .shots{gap:10px} }
.shot{aspect-ratio:9/19.5;position:relative;margin:0;border-radius:clamp(20px,3.4vw,42px);
  padding:clamp(4px,.72vw,9px);
  background:linear-gradient(155deg,#4a4f57 0%,#23262c 18%,#101216 52%,#2c3037 88%,#0b0c0f 100%);
  box-shadow:0 34px 70px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.10)}
.shot .screen{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:#000;
  border-radius:clamp(16px,2.7vw,34px);isolation:isolate}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;border-radius:inherit}
.shot .screen:after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none;z-index:3}
.shot .screen .island{position:absolute;left:50%;top:1.3%;transform:translateX(-50%);
  width:31.8%;height:4.3%;border-radius:999px;background:#000;z-index:2}
.shot:before,.shot:after{content:"";position:absolute;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#3a3f47,#1a1d22);z-index:1}
.shot:before{left:-2px;top:22%;height:9%}
.shot:after{right:-2px;top:26%;height:13%}
@media(max-width:760px){ .shot:before,.shot:after{display:none} }
.shots-cap{text-align:center;color:var(--faint);font-size:13px;margin-top:18px}

/* ===== Pricing — and what to check before paying ========================== */
.act-price{background:var(--clear);padding:clamp(80px,14vh,150px) 0;text-align:center}
.act-price h2{font-size:clamp(30px,5.2vw,60px);max-width:var(--measure);margin:14px auto 0}
.act-price .lead{max-width:var(--measure);margin:20px auto 0;color:var(--dim);font-size:17px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:52px auto 0;max-width:1000px;text-align:left}
@media(max-width:860px){ .tiers{grid-template-columns:1fr;max-width:460px} }
.tier{border:1px solid var(--line);border-radius:20px;padding:28px 26px;background:rgba(255,255,255,.028);
  display:flex;flex-direction:column}
.tier.feature{border-color:rgba(217,149,73,.5);background:linear-gradient(165deg,rgba(217,149,73,.12),rgba(255,255,255,.03))}
.tier .amt{font-size:clamp(32px,4.4vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1}
.tier.feature .amt{color:var(--ochre)}
.tier .per{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:9px}
.tier h3{font-size:17px;font-weight:600;margin-top:18px}
.tier p{color:var(--dim);font-size:14.5px;margin-top:9px}
.tier ul{list-style:none;margin-top:14px;padding:0}
.tier li{color:var(--dim);font-size:14px;margin-top:8px;padding-left:18px;position:relative}
.tier li b{color:var(--ink);font-weight:600}
.tier li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--faint)}
.tier.feature li:before{background:var(--ochre)}
.price-foot{margin:34px auto 0;color:var(--faint);font-size:14.5px;max-width:640px}
.price-foot b{color:var(--ink);font-weight:500}
.price-foot a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.price-note{margin:14px auto 0;max-width:560px;color:var(--faint);font-size:13px}
.pill-x{display:inline-flex;align-items:center;gap:9px;margin-top:30px;padding:12px 22px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--dim);font-size:14.5px;font-weight:600}