/* ==========================================================
   The offering pages' layer (VLP-2403): /airview-studio, /traceframe,
   /dashboards, /ai-enablement, /editing-assistance.

   WHAT THIS FILE OWNS
   The devices the five offering pages share and the pillar pages do not:
   - the glass sub-nav that moves between offerings;
   - the hero frame that opens as the hero pins;
   - the pinned tour (steps on one side, screens crossfading in a device on the other);
   - the depth stack of three real captures;
   - the capability ticker;
   - the sparkline that draws with the act;
   - press feedback on every card and button.
   Page-only rules are scoped by body class (.of-airview, .of-tf, .of-dash, .of-aie, .of-edit).

   WHAT IT DEPENDS ON
   /folio.css and /pillar.css, loaded first. This file adds to them and restates
   nothing they own.

   LOAD ORDER
   critical fallback <style> -> /folio.css -> /pillar.css -> /offering.css -> /scrollcraft.css.

   MOTION RULES (apple-design-motion)
   - Feedback is on press, not release: 100ms scale to .97.
   - Every scroll-driven value reads --sc-p, so it is continuous and reversible
     with the scroll. No keyframe runs on scroll.
   - Reduced motion and demoted acts get the finished state, never a hidden one.
   ========================================================== */

/* ---------------- press feedback ---------------- */
.btn,.of-card,.mcard,.prod{transition:transform 160ms var(--ease-out),border-color .3s,background-color .3s}
.btn:active,.of-card:active,.mcard:active{transform:scale(.97);transition-duration:100ms}

/* ---------------- the glass sub-nav ----------------
   A floating material under the pill nav: where am I, where else can I go. It sits
   in flow under the hero copy and becomes a fixed chip row once the reader is past
   the first screen. Translucent, so content scrolls underneath it. */
.of-sub{position:fixed;left:50%;bottom:22px;z-index:40;transform:translate3d(-50%,140%,0);opacity:0;
  display:flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(17,22,29,.62);border:1px solid rgba(244,241,234,.10);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(244,241,234,.06);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  transition:transform 520ms var(--ease-out),opacity 320ms var(--ease-out)}
.of-sub.is-scrolled{transform:translate3d(-50%,0,0);opacity:1}
.of-sub a{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:9px 14px;border-radius:999px;white-space:nowrap;
  transition:color .2s,background-color .2s,transform 100ms}
.of-sub a:hover{color:var(--text);background:rgba(244,241,234,.06)}
.of-sub a:active{transform:scale(.96)}
.of-sub a[aria-current="page"]{color:var(--ink);background:var(--text)}
@media(prefers-reduced-transparency:reduce){.of-sub{background:#11161D;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(max-width:900px){.of-sub{display:none}}

/* ---------------- the hero frame that opens ----------------
   The frame starts inset and rounded and opens toward full width as the hero pins:
   one value, --sc-p, drives scale and radius together so it reads as one object. */
.of-open{position:relative;z-index:1;margin:56px auto 0;width:100%;max-width:1240px;padding:0 var(--pad)}
.of-open .frame{border-radius:calc(22px - var(--sc-p,0) * 10px);overflow:hidden;
  box-shadow:0 50px 140px -50px rgba(0,0,0,.9),0 0 0 1px rgba(76,141,255,.08)}
.hero.sc-act--pinned .of-open{transform:translate3d(0,calc(var(--sc-p,0) * -36svh),0) scale(calc(.9 + var(--sc-p,0) * .1))}
.of-open .frame img{display:block;width:100%;height:auto}
.of-glow{position:absolute;inset:auto 10% -12% 10%;height:40%;z-index:-1;filter:blur(60px);opacity:.55;
  background:radial-gradient(ellipse at 50% 50%,rgba(76,141,255,.35),transparent 70%)}
@media(prefers-reduced-motion:no-preference){.of-open{animation:pl-up 1100ms var(--ease-out) 260ms backwards}}

/* ---------------- the tour ----------------
   A pinned act: steps on the left, a device on the right whose screens crossfade as
   the steps change. offering.js sets .is-on from the act's own progress. In flow
   (phone, reduced motion, ?static=1) every step and every screen is shown, in order. */
.of-tour{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:64px;align-items:center}
.of-tour .head{text-align:left;margin:0;align-items:flex-start}
.of-tour .head .eyebrow{justify-content:flex-start}
.of-tour .head .display{font-size:clamp(30px,3.2vw,48px)}
.of-steps{list-style:none;margin:34px 0 0;padding:0;counter-reset:st}
.of-step{position:relative;padding:16px 0 16px 46px;border-top:1px solid var(--line);
  color:var(--muted);transition:color .35s var(--ease-out)}
.of-step:first-child{border-top:0}
.of-step::before{counter-increment:st;content:counter(st,decimal-leading-zero);position:absolute;left:0;top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);transition:color .35s}
.of-step::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--blue);
  transform-origin:left;transform:scaleX(0);transition:transform 700ms var(--ease-out)}
.of-step b{display:block;font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;color:inherit}
.of-step p{margin-top:6px;font-size:15px;line-height:1.55;max-height:0;opacity:0;overflow:hidden;
  transition:max-height 600ms var(--ease-out),opacity 400ms var(--ease-out)}
.of-step.is-on{color:var(--text)}
.of-step.is-on::before{color:var(--blue)}
.of-step.is-on::after{transform:scaleX(1)}
.of-step.is-on p{max-height:8em;opacity:1;color:var(--muted)}
.of-device{position:relative;aspect-ratio:16/10.4;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);background:#0D1218;box-shadow:var(--shadow)}
.of-device.is-phone{aspect-ratio:auto;height:min(72svh,640px);width:auto;max-width:100%;margin:0 auto;
  border-radius:40px;border:0;background:none;box-shadow:none}
.of-device.is-phone .of-screen{inset:0;display:flex;justify-content:center}
.of-device.is-phone .of-screen img{width:auto;height:100%;border-radius:36px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px var(--line-2)}
.of-screen{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.035);
  transition:opacity 620ms var(--ease-out),transform 900ms var(--ease-out)}
.of-screen.is-on{opacity:1;transform:none}
.of-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.of-screen .ui{height:100%;border:0;border-radius:0}
.of-cap{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);padding:6px 10px;border-radius:999px;
  background:rgba(11,15,20,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* In flow: everything shown, stacked. */
[data-sc-act]:not(.sc-act--pinned) .of-tour,html.hv-static .of-tour,html.no-js .of-tour{grid-template-columns:1fr;gap:28px}
[data-sc-act]:not(.sc-act--pinned) .of-step p,html.hv-static .of-step p,html.no-js .of-step p{max-height:none;opacity:1}
[data-sc-act]:not(.sc-act--pinned) .of-step,html.hv-static .of-step,html.no-js .of-step{color:var(--text)}
[data-sc-act]:not(.sc-act--pinned) .of-device,html.hv-static .of-device,html.no-js .of-device{aspect-ratio:auto;display:grid;gap:16px;
  border:0;background:none;box-shadow:none;height:auto}
[data-sc-act]:not(.sc-act--pinned) .of-screen,html.hv-static .of-screen,html.no-js .of-screen{position:relative;opacity:1;transform:none;
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
[data-sc-act]:not(.sc-act--pinned) .of-device.is-phone .of-screen,html.hv-static .of-device.is-phone .of-screen{border:0;height:auto}
[data-sc-act]:not(.sc-act--pinned) .of-device.is-phone .of-screen img,html.hv-static .of-device.is-phone .of-screen img{height:auto;width:min(280px,80vw)}
[data-sc-act]:not(.sc-act--pinned) .of-screen img{height:auto}

/* ---------------- the depth stack ----------------
   Three real captures layered at different scroll rates (data-sc-parallax), the
   back one dimmed. Depth, not decoration: the front capture is the one to read. */
.of-depth{position:relative;margin-top:64px;height:clamp(340px,46vw,620px)}
.of-depth figure{position:absolute;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95);background:#0D1218}
.of-depth img{display:block;width:100%;height:auto}
.of-depth .d-back{left:0;top:0;width:54%;filter:brightness(.62) saturate(.8)}
.of-depth .d-mid{right:0;top:9%;width:50%;filter:brightness(.82)}
.of-depth .d-front{left:22%;top:30%;width:56%}
.of-depth figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);padding:5px 9px;border-radius:999px;background:rgba(11,15,20,.74)}

/* ---------------- the ticker ----------------
   One slow line of capabilities. It stops for reduced motion and on hover. */
.of-ticker{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.of-ticker-row{display:flex;gap:44px;width:max-content;animation:of-tick 46s linear infinite}
.of-ticker:hover .of-ticker-row{animation-play-state:paused}
.of-ticker span{font-family:var(--serif);font-size:clamp(22px,2.2vw,32px);color:var(--text);white-space:nowrap;
  display:inline-flex;align-items:center;gap:44px}
.of-ticker span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
@keyframes of-tick{to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.of-ticker-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:14px 30px}
  .of-ticker span{gap:30px}}

/* ---------------- cards ---------------- */
.of-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:56px}
.of-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.of-card{position:relative;display:flex;flex-direction:column;padding:26px 24px 28px;border:1px solid var(--line-2);
  border-radius:18px;background:linear-gradient(180deg,#121821,#0D1218);overflow:hidden;text-decoration:none;color:inherit}
.of-card:hover{border-color:rgba(76,141,255,.45)}
.of-card .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.of-card h3{margin-top:14px;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.of-card p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.55}
.of-card .mlink{margin-top:auto;padding-top:20px}
.of-card .of-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(76,141,255,.08);border:1px solid rgba(76,141,255,.25);color:var(--blue)}
.of-card .of-ico svg{width:20px;height:20px}
.of-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(76,141,255,.10),transparent 60%)}
.of-card:hover::before{opacity:1}

/* ---------------- the sparkline that draws ----------------
   An SVG path drawn by the act: stroke-dashoffset follows --sc-p, so scrolling back
   undraws it. Used inside the HTML dashboards, which are labelled Illustration. */
@property --draw{syntax:"<number>";inherits:true;initial-value:1}
.of-spark{display:block;width:100%;height:64px;overflow:visible}
.of-spark path{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,1))}
.of-spark .area{stroke:none;fill:url(#ofFade);opacity:calc(var(--draw,1) * .9)}
[data-sc-act].sc-act--pinned .of-spark{--draw:min(1,calc(var(--sc-p,0) * 1.6))}
[data-sc-in] .of-spark{--draw:0;transition:--draw 1.4s}
[data-sc-in].sc-in .of-spark{--draw:1}

/* ---------------- the big statement ----------------
   One sentence that fills the screen, its words lifting from dim to full ink as
   the act runs: reading speed set by the reader's own scroll. */
.of-say{display:flex;align-items:center;min-height:100svh;background:var(--ink)}
.of-say>.wrap{width:100%}
.of-say p{max-width:22ch;margin:0 auto;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,5.4vw,84px);line-height:1.04;letter-spacing:-.015em;color:var(--text)}
.of-say p span{opacity:calc(.16 + .84 * min(1,max(0,(var(--sc-p,1) * 1.35 - var(--k,0)) * 4)))}
.of-say em{font-style:italic;color:var(--blue)}
[data-sc-act]:not(.sc-act--pinned) .of-say,html.hv-static .of-say,html.no-js .of-say{min-height:0;padding:var(--sec-pad) 0}
[data-sc-act]:not(.sc-act--pinned) .of-say p span{opacity:1}
@media(prefers-reduced-motion:reduce){.of-say p span{opacity:1}}

/* ---------------- breadcrumbs ---------------- */
.of-crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.of-crumb a{color:var(--muted);text-decoration:none}
.of-crumb a:hover{color:var(--text)}

/* ---------------- static and reduced ---------------- */
html.no-js .of-open,html.hv-static .of-open{transform:none!important}
@media(prefers-reduced-motion:reduce){
  .of-open{transform:none!important}
  .of-screen{transition:opacity 200ms}
  .btn:active,.of-card:active,.mcard:active{transform:none}
}

/* ---------------- responsive ---------------- */
@media(max-width:900px){
  .of-tour{grid-template-columns:1fr;gap:28px}
  .of-grid,.of-grid.two{grid-template-columns:1fr}
  .of-depth{height:auto;display:grid;gap:14px}
  .of-depth figure{position:relative;inset:auto!important;width:100%!important;transform:none!important;filter:none!important}
}
@media(max-width:760px){
  .of-open{margin-top:40px}
  .of-step{padding-left:38px}
}

/* =================== shared page pieces =================== */
.of-spark .area{fill:rgba(76,141,255,.10)}
.of-spark .area{fill:rgba(76,141,255,.08)}
.of-shot{margin:0;position:relative}
.of-after{padding-top:0!important}
.of-mid{margin-top:8px}
.of-rules-solo{max-width:760px;margin:56px auto 0}
.of-peak .head .display{font-size:clamp(30px,3.4vw,50px)}
.pl-lines .line.is-turn{color:var(--blue)}
/* A fourth and fifth rail card share the product card's frame without a picture. */
.of-help{flex-basis:min(400px,78vw)}
.of-help .prod-body{padding:34px 30px 36px;justify-content:flex-end;min-height:min(420px,56svh)}
.of-help .prod-body h3{margin-top:auto;padding-top:80px}
.of-panel{flex-basis:min(480px,82vw)}
.of-panel-ui{border:0;border-radius:0;border-bottom:1px solid var(--line)}
.of-panel-in{padding:18px 20px 22px}
.of-panel .meters{margin-top:12px}
.of-steps-wrap{position:relative}
/* The step trail: the hairline joining the steps draws as the list arrives. */
.steps.of-trail{position:relative}

/* =================== /traceframe =================== */
/* The peak's picture: the answer is in five pieces; three of them leave, one returns. */
.of-fade-stack{position:relative;display:grid;gap:14px}
.ofs-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line-2);border-radius:14px;
  background:linear-gradient(180deg,#121821,#0E131A);font-size:15px;color:var(--text);
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),filter .5s}
.ofs-card b{font-weight:500}
.ofs-card span:not(.chipx):not(.tf-thumb){margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim)}
.ofs-card .chipx{margin-left:auto}
.ofs-q b{font-family:var(--serif);font-weight:400;font-size:24px}
#why.sc-act--pinned .ofs-card{--t:clamp(0,(var(--sc-p,0) - var(--s,0)) * 6,1);opacity:calc(.12 + .88 * var(--t));transform:translate3d(calc((1 - var(--t)) * 30px),0,0)}
#why.sc-act--pinned .ofs-post{--s:0}
#why.sc-act--pinned .ofs-q{--s:.18}
#why.sc-act--pinned .ofs-gone{--s:.38;filter:saturate(calc(1 - var(--t)))}
#why.sc-act--pinned .ofs-shelf{--s:.58}
#why.sc-act--pinned .ofs-kept{--s:.8;border-color:rgba(76,141,255,calc(.2 + .5 * var(--t)));
  box-shadow:0 0 calc(var(--t) * 40px) rgba(76,141,255,.18)}
.of-confirm-in{padding:16px 18px}
.of-confirm-in .row{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.of-confirm-in .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.of-confirm-act{display:flex;gap:10px;justify-content:flex-end;padding-top:16px}
.of-proof{display:flex;align-items:center}
.of-proof .ui{width:100%}

/* =================== /dashboards =================== */
.of-dash-board .of-spark{margin-top:10px;height:46px}
.hero .of-dash-board .of-spark{--draw:clamp(0,var(--sc-p,0) * 2.4 + .25,1)}
html.no-js .hero .of-dash-board .of-spark,html.hv-static .hero .of-dash-board .of-spark{--draw:1}
.of-dash-board .meter i::after{transform:scaleX(clamp(.15,var(--sc-p,1) * 2.2 + .2,1))}
.hero:not(.sc-act--pinned) .of-dash-board .meter i::after{transform:none}
/* The peak's picture: four loose sources gather into one board. */
.of-scatter{position:relative;height:min(52svh,440px)}
.of-scatter>span{position:absolute;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);
  padding:10px 14px;border:1px dashed var(--line-2);border-radius:10px;background:#0E131A;
  --t:clamp(0,var(--sc-p,0) * 1.45 - .45,1);
  transform:translate3d(calc(var(--dx) * (1 - var(--t))),calc(var(--dy) * (1 - var(--t))),0) rotate(calc(var(--rot) * (1 - var(--t))));
  opacity:calc(1 - var(--t))}
.of-scatter .sc1{left:4%;top:6%;--dx:0px;--dy:0px;--rot:-4deg}
.of-scatter .sc2{right:6%;top:16%;--dx:0px;--dy:0px;--rot:3deg}
.of-scatter .sc3{left:12%;bottom:22%;--dx:0px;--dy:0px;--rot:5deg}
.of-scatter .sc4{right:10%;bottom:8%;--dx:0px;--dy:0px;--rot:-3deg}
#why.sc-act--pinned .of-scatter>span{transform:translate3d(calc((50% - 50%) * var(--t)),0,0) rotate(calc(var(--rot) * (1 - var(--t)))) scale(calc(1 - var(--t) * .4))}
.of-scatter-board{position:absolute;inset:18% 8%;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  --t:clamp(0,var(--sc-p,1) * 1.6 - .6,1);opacity:var(--t);transform:scale(calc(.9 + var(--t) * .1))}
.of-scatter-board i{font-style:normal;display:flex;align-items:flex-end;padding:14px;border:1px solid var(--line-2);border-radius:12px;
  background:linear-gradient(180deg,rgba(76,141,255,.08),#0E131A);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text)}
[data-sc-act]:not(.sc-act--pinned) .of-scatter>span,html.hv-static .of-scatter>span{opacity:0}
[data-sc-act]:not(.sc-act--pinned) .of-scatter-board,html.hv-static .of-scatter-board,html.no-js .of-scatter-board{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.of-scatter>span{opacity:0}.of-scatter-board{opacity:1;transform:none}}

/* =================== /ai-enablement =================== */
.of-flow{width:100%}
.of-flow-row{list-style:none;margin:0;padding:26px 22px 30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
.of-flow-row::before{content:"";position:absolute;left:34px;right:34px;top:42px;height:1px;background:var(--line-2)}
.of-flow-row li{position:relative;display:flex;flex-direction:column;gap:14px;
  --t:clamp(0,var(--sc-p,1) * 5 - var(--i) - .6,1)}
.of-flow-row b{position:relative;z-index:1;align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);padding:6px 10px;border:1px solid var(--line-2);border-radius:999px;background:#0E131A}
.of-aistep{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;font-size:13px;line-height:1.4;
  color:var(--text);border:1px solid rgba(76,141,255,calc(.12 + .45 * var(--t)));
  background:rgba(76,141,255,calc(.02 + .08 * var(--t)));opacity:calc(.25 + .75 * var(--t));
  transform:translate3d(0,calc((1 - var(--t)) * 14px),0)}
.of-aistep i{width:18px;height:18px;border-radius:6px;background:var(--blue);opacity:calc(.3 + .7 * var(--t));
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 30%,transparent 32%),linear-gradient(#000,#000);mask-composite:exclude}
[data-sc-act]:not(.sc-act--pinned) .of-aistep,html.hv-static .of-aistep,html.no-js .of-aistep{--t:1}
@media(prefers-reduced-motion:reduce){.of-flow-row li{--t:1}}
/* The path: five nodes on one line that draws as the list arrives. */
.of-path{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative}
.of-path::before{content:"";position:absolute;left:8px;right:8px;top:7px;height:1px;background:var(--blue);transform-origin:left;
  transform:scaleX(0);transition:transform 1600ms var(--ease-out) 200ms}
.of-path.sc-in::before,html.hv-static .of-path::before,html.no-js .of-path::before{transform:scaleX(1)}
.of-path li i{display:block;width:15px;height:15px;border-radius:50%;background:var(--ink);border:1px solid var(--blue);position:relative;z-index:1}
.of-path li:last-child i{background:var(--blue)}
.of-path b{display:block;margin-top:18px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.of-path p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.of-path::before{transform:scaleX(1);transition:none}}

/* =================== /editing-assistance =================== */
.of-queue .q-cols{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:340px}
.q-col{padding:16px 16px 0;border-right:1px solid var(--line)}
.q-col:last-of-type{border-right:0}
.q-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400}
.q-cards{position:absolute;inset:48px 0 12px 0}
.q-card{position:absolute;width:calc(33.333% - 24px);left:calc(var(--col,var(--c0)) * 33.333% + 12px);
  top:calc(var(--r) * 46px);display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:#121821;font-size:13px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.q-card b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-card span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.q-card.is-yours{border-color:rgba(215,168,79,.5)}
.q-card.is-yours span{color:var(--amber)}
/* In the peak, each card travels at its own moment. --t is that card's own progress. */
#why .q-card{--t:clamp(0,(var(--sc-p,1) - var(--s)) * 7,1);
  left:calc((var(--c0) + (var(--c1) - var(--c0)) * var(--t)) * 33.333% + 12px)}
#why .q-card[style*="--c1:2"]{border-color:rgba(76,141,255,calc(var(--t) * .5 + .1))}
.hero .of-queue .q-card{--col:var(--c0)}
[data-sc-act]:not(.sc-act--pinned) #why .q-card,html.hv-static #why .q-card,html.no-js #why .q-card{--t:1}
@media(prefers-reduced-motion:reduce){#why .q-card{--t:1}}

/* =================== /airview-studio =================== */
.of-phonecard{flex-basis:min(380px,78vw)}
.of-phonecard .of-phonepic{display:flex;justify-content:center;padding:28px 0 0;
  background:radial-gradient(ellipse at 50% 100%,rgba(76,141,255,.18),transparent 70%);border-bottom:1px solid var(--line);overflow:hidden;height:min(48svh,420px)}
.of-phonecard img{width:auto;height:118%;border-radius:30px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px var(--line-2)}
.of-calls{list-style:none;margin:0;padding:0;align-self:center}
.of-calls li{display:flex;align-items:center;gap:18px;padding:16px 0;border-top:1px solid var(--line);
  font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em}
.of-calls li:first-child{border-top:0}
.of-wave{display:inline-flex;gap:3px;align-items:center;height:22px}
.of-wave i{width:3px;height:100%;border-radius:2px;background:var(--blue);transform:scaleY(.3);transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  .of-calls.sc-in .of-wave i{animation:of-wave 1.1s var(--ease-out) infinite}
  .of-wave i:nth-child(2){animation-delay:.12s!important}.of-wave i:nth-child(3){animation-delay:.24s!important}.of-wave i:nth-child(4){animation-delay:.36s!important}
  .of-calls li:not(:hover) .of-wave i{animation-iteration-count:2}
}
@keyframes of-wave{50%{transform:scaleY(1)}}
.of-airview .of-screen img{transform-origin:var(--x,50%) var(--y,50%);transform:scale(var(--z,1));transition:transform 1100ms var(--ease-out)}
.of-airview .of-screen:not(.is-on) img{transform:scale(calc(var(--z,1) * .94))}
[data-sc-act]:not(.sc-act--pinned) .of-screen img{transform:none}
.of-crop{background-size:calc(var(--z,1) * 100%) auto;background-position:var(--x,50%) var(--y,50%);background-repeat:no-repeat;
  transform:scale(.97);transition:opacity 620ms var(--ease-out),transform 1100ms var(--ease-out)}
.of-crop.is-on{transform:none}
[data-sc-act]:not(.sc-act--pinned) .of-crop,html.hv-static .of-crop{display:none}

/* =================== responsive for page pieces =================== */
@media(max-width:900px){
  .of-flow-row{grid-template-columns:1fr 1fr}
  .of-flow-row::before{display:none}
  .of-path{grid-template-columns:1fr;gap:26px}
  .of-path::before{left:7px;right:auto;top:8px;bottom:8px;width:1px;height:auto;transform-origin:top;transform:scaleY(0)}
  .of-path.sc-in::before{transform:scaleY(1)}
  .of-path li{padding-left:34px;position:relative}
  .of-path li i{position:absolute;left:0;top:4px}
  .of-path b{margin-top:0}
  .of-scatter{height:auto;min-height:260px}
  .of-help .prod-body{min-height:0}
  .of-help .prod-body h3{padding-top:12px}
  .of-phonecard .of-phonepic{height:360px}
}
@media(max-width:760px){
  .q-card span{display:none}
  .of-queue .q-cols{min-height:320px}
  .q-card{font-size:11.5px;padding:8px 8px}
}

/* =================== the help cards' mini pictures ===================
   --t is this card's own progress: the rail's --sc-p offset by its place, --n. Out of a
   pin (--sc-p unset) every card sits at its finished state. */
.of-help .prod-body h3{padding-top:0;margin-top:12px}
.of-help .prod-body{min-height:0;padding-top:24px}
.of-mini{position:relative;height:200px;border-bottom:1px solid var(--line);overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%,rgba(76,141,255,.14),transparent 70%);
  --t:clamp(0,var(--sc-p,1) * 5 - var(--n,0) + .25,1)}
.of-railcta{margin-top:28px;align-self:flex-start}
.mn-aspects{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px}
.mn-aspects i{display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--blue);
  border:1px solid rgba(76,141,255,.5);border-radius:6px;background:rgba(76,141,255,.06)}
.mn-aspects .a169{width:128px;height:72px}
.mn-aspects .a11{width:84px;height:84px;transform:translate3d(calc((1 - var(--t)) * -98px),0,0);opacity:var(--t)}
.mn-aspects .a916{width:58px;height:104px;transform:translate3d(calc((1 - var(--t)) * -170px),0,0);opacity:var(--t)}
.mn-l3 .mn-frame{position:absolute;inset:24px 28px;border-radius:8px;border:1px solid var(--line-2);
  background:linear-gradient(135deg,#2a3442,#121821)}
.mn-l3 .mn-bar{position:absolute;left:44px;bottom:42px;display:flex;flex-direction:column;padding:8px 14px 9px;border-left:3px solid var(--blue);
  background:rgba(11,15,20,.86);clip-path:inset(0 calc((1 - var(--t)) * 100%) 0 0)}
.mn-l3 b{font-size:14px;font-weight:600}
.mn-l3 em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);margin-top:2px}
.mn-tl{position:absolute;inset:40px 22px}
.mn-tl i{position:absolute;left:var(--l);width:var(--w);height:22px;border-radius:5px;
  transform-origin:left;transform:scaleX(clamp(0,var(--t) * 2.2 - var(--j) * .15,1))}
.mn-tl .v2{top:0;background:rgba(76,141,255,.55)}
.mn-tl .v1{top:34px;background:rgba(76,141,255,.3)}
.mn-tl .a1{top:68px;background:rgba(215,168,79,.35)}
.mn-head{position:absolute;top:-10px;bottom:-14px;width:2px;background:var(--text);left:calc(var(--t) * 88%)}
.mn-list,.mn-toggles{position:absolute;inset:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.mn-list span,.mn-toggles span{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted);
  --on:clamp(0,var(--t) * 5 - var(--j),1)}
.mn-list i{width:16px;height:16px;border-radius:5px;border:1px solid var(--line-2);
  background:rgba(76,141,255,calc(var(--on) * .9));border-color:rgba(76,141,255,calc(.2 + var(--on) * .6))}
.mn-list span{color:rgba(244,241,234,calc(.45 + var(--on) * .55))}
.mn-toggles span{justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.mn-toggles i{width:30px;height:18px;border-radius:9px;background:rgba(244,241,234,.1);position:relative;
  background:color-mix(in srgb,var(--blue) calc(var(--on) * 100%),rgba(244,241,234,.12))}
.mn-toggles i::after{content:"";position:absolute;top:2px;left:calc(2px + var(--on) * 12px);width:14px;height:14px;border-radius:50%;background:var(--text)}
.mn-nodes{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px}
.mn-nodes span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border-radius:999px;
  border:1px solid var(--line-2);--on:clamp(0,var(--t) * 5 - var(--j),1);
  color:color-mix(in srgb,var(--blue) calc(var(--on) * 100%),var(--muted));border-color:rgba(76,141,255,calc(.15 + var(--on) * .5))}
.mn-flow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px}
.mn-flow span{font-size:13px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:#121821;
  --on:clamp(0,var(--t) * 4 - var(--j),1);border-color:rgba(76,141,255,calc(.15 + var(--on) * .55))}
.mn-flow em{width:22px;height:1px;background:var(--blue);opacity:.6}
.mn-train{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px}
.mn-train i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(76,141,255,calc(clamp(0,var(--t) * 6 - var(--j),1) * .85))}
.mn-train span{margin-left:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);opacity:clamp(0,var(--t) * 6 - 5,1)}
@media(prefers-reduced-motion:reduce){.of-mini{--t:1}}
[data-sc-act]:not(.sc-act--pinned) .of-mini,html.hv-static .of-mini,html.no-js .of-mini{--t:1}
/* The editing peak's board is wider than the copy beside it, so every job reads. */
@media(min-width:901px){.of-edit .of-peak{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.of-edit #why .q-card span{display:none}

/* Every offering rail is held like the /products lineup: centred in one viewport while the
   pan runs, and a plain column on a phone. */
.of-rail [data-sc-stage]{display:flex;align-items:center;min-height:100svh;overflow:hidden;background:var(--ink)}
.of-rail .rail-lead{display:flex;flex-direction:column}
@media(max-width:900px){
  .of-rail:not(.sc-act--pinned) .rail{flex-direction:column;transform:none!important;padding:var(--sec-pad) var(--pad) 0}
  .of-rail:not(.sc-act--pinned) [data-sc-stage]{min-height:0;display:block}
}

/* =================== real captures (VLP-2403 round two) =================== */
.of-tfmatch img{display:block;width:100%;height:auto}
.of-tall{margin:0;position:relative;align-self:center;max-height:min(78svh,720px);overflow:hidden;border-radius:16px;
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.of-tall img{display:block;width:100%;height:auto}
.of-wide{margin:56px auto 0;max-width:1180px}
.of-wide .frame img{display:block;width:100%;height:auto}
.of-fit img{object-fit:contain;object-position:50% 50%;background:#0B0B0B}
.of-fit{background:#0B0B0B;display:flex;align-items:center}
.of-depth .d-front{top:26%}
.of-wide .frame-window{aspect-ratio:auto}
.of-wide .frame-window img{transform:none}

/* =================== VLP-2408 page pieces =================== */
.ft-h2{margin-top:22px}
.of-help .mlink{margin-top:auto;padding-top:18px}

/* ---- Traceframe: the ranked board ----
   Rows arrive in the order the posts were published and re-sort by engagement as the hero
   pins: each row's top runs from --r0 to --r1 on the act's own --sc-p, so scrolling back
   un-sorts it. Demoted or reduced, the board shows the ranked order. */
.of-rank{--rh:62px;font-size:14px}
.rk-head,.rk-rows li{display:grid;grid-template-columns:minmax(0,2.3fr) repeat(5,minmax(0,.8fr)) minmax(0,1.5fr);gap:12px;align-items:center;padding:0 22px}
.rk-head{height:44px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rk-head span:not(:first-child){text-align:right}
.rk-sort{font-style:normal;margin-left:6px;padding:3px 7px;border-radius:999px;color:var(--blue);border:1px solid rgba(76,141,255,.5);
  opacity:var(--rk,1);transition:opacity .3s}
.rk-rows{list-style:none;margin:0;padding:0;position:relative;height:calc(var(--rh) * 5)}
.rk-rows li{position:absolute;left:0;right:0;height:var(--rh);border-bottom:1px solid var(--line);
  top:calc(var(--rh) * (var(--r0) + (var(--r1) - var(--r0)) * var(--rk,1)));background:#0D1218;
  transition:top 700ms var(--ease-out)}
.rk-rows li>span:not(.rk-post){text-align:right;font-family:var(--mono);font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.rk-post{display:flex;align-items:center;gap:12px;min-width:0}
.rk-post .tf-thumb{width:36px;height:36px;flex:none}
.rk-post b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-post small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim);margin-top:2px}
.rk-post>span:last-child{min-width:0}
.rk-n{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10px;
  color:var(--blue);border:1px solid rgba(76,141,255,.45);opacity:var(--rk,1)}
.rk-eng{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.rk-eng i{flex:1;max-width:110px;height:6px;border-radius:3px;background:rgba(244,241,234,.06);position:relative;overflow:hidden}
.rk-eng i::after{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,rgba(76,141,255,.5),var(--blue));border-radius:3px}
.hero.sc-act--pinned .of-rank{--rk:clamp(0,var(--sc-p,0) * 2.6 - .5,1)}
.hero.sc-act--pinned .rk-rows li{transition:none}
@media(prefers-reduced-motion:reduce){.of-rank{--rk:1!important}}
@media(max-width:760px){
  .of-rank{--rh:58px;font-size:13px}
  .rk-head,.rk-rows li{grid-template-columns:minmax(0,1fr) 62px 52px;padding:0 14px;gap:8px}
  .rk-head span:nth-child(n+2):nth-child(-n+4),.rk-head span:nth-child(6),
  .rk-rows li>span:nth-child(n+2):nth-child(-n+4),.rk-rows li>span:nth-child(6){display:none}
  .rk-eng i{display:none}
  .rk-post .tf-thumb{display:none}
}

/* ---- Traceframe: the cost strip under a trace ---- */
.tf-cost{margin:4px 20px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tf-cost div{padding:14px 14px 12px;border:1px solid rgba(76,141,255,.3);border-radius:12px;background:rgba(76,141,255,.05)}
.tf-cost span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tf-cost b{display:block;margin-top:6px;font-family:var(--serif);font-weight:400;font-size:clamp(30px,2.8vw,40px);line-height:1;color:var(--text)}
.tf-cost small{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.tf-measures{grid-template-columns:repeat(3,minmax(0,1fr))}
.tf-measures .of-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2vw,30px);letter-spacing:-.01em}

/* ---- Dashboards: six tiles ---- */
.dash-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-grid--6 .tile{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.dash-grid--6 .tile:nth-child(3n){border-right:0}
.dash-grid--6 .tile:nth-child(n+4){border-bottom:0}
.dash-grid--6 .meter{grid-template-columns:96px minmax(0,1fr)}
.tile-brief ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tile-brief li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.4;color:var(--text)}
.tile-brief li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.of-scatter-board{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
  .dash-grid--6{grid-template-columns:1fr 1fr}
  .dash-grid--6 .tile:nth-child(n){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .dash-grid--6 .tile:nth-child(2n){border-right:0}
}
@media(max-width:560px){
  .dash-grid--6{grid-template-columns:1fr}
  .dash-grid--6 .tile:nth-child(n){border-right:0}
  .dash-grid--6 .tile:nth-child(n+3){display:none}
  .dash-grid--6 .tile:last-child{display:block}
}

/* ---- AI enablement: Claude Code at work ---- */
.of-term .term-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:320px}
.term-log{list-style:none;margin:0;padding:22px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line);
  font-family:var(--mono);font-size:13px;line-height:1.5;background:#0A0E13}
.term-log li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;color:var(--muted);
  --on:clamp(0,var(--tt,1) * 6 - var(--j),1);opacity:calc(.12 + .88 * var(--on));transform:translate3d(0,calc((1 - var(--on)) * 8px),0)}
.term-log i{font-style:normal;color:var(--blue)}
.term-log .t-prompt{color:var(--text)}
.term-log .t-done{color:var(--text)}
.term-log .t-done i{color:#3ddc84}
.term-prev{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,rgba(76,141,255,.16),transparent 70%)}
.term-prev .mn-frame{position:absolute;inset:26px;border-radius:10px;border:1px solid var(--line-2);background:linear-gradient(135deg,#2a3442,#121821)}
.term-l3{position:absolute;left:48px;bottom:56px;display:flex;flex-direction:column;padding:10px 16px 11px;border-left:3px solid var(--blue);
  background:rgba(11,15,20,.88);clip-path:inset(0 calc((1 - clamp(0,var(--tt,1) * 2 - 1,1)) * 100%) 0 0)}
.term-l3 b{font-size:16px;font-weight:600}
.term-l3 em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);margin-top:3px;text-transform:uppercase}
.term-tc{position:absolute;right:38px;top:38px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.hero.sc-act--pinned .of-term{--tt:clamp(0,var(--sc-p,0) * 2.4 + .15,1)}
@media(prefers-reduced-motion:reduce){.of-term{--tt:1!important}}
@media(max-width:760px){.of-term .term-grid{grid-template-columns:1fr}.term-log{border-right:0;border-bottom:1px solid var(--line)}.term-prev{min-height:200px}}

/* ---- the W&I rail's mini pictures ---- */
.mn-trace{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;flex-wrap:nowrap}
.mn-trace span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 8px;border-radius:8px;white-space:nowrap;
  border:1px solid var(--line-2);background:#121821;--on:clamp(0,var(--t) * 5 - var(--j),1);
  color:color-mix(in srgb,var(--text) calc(var(--on) * 100%),var(--dim));border-color:rgba(76,141,255,calc(.12 + var(--on) * .55))}
.mn-trace em{flex:none;width:10px;height:1px;background:var(--blue);opacity:.6}
.mn-dash{position:absolute;inset:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.mn-dash span{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;--on:clamp(0,var(--t) * 5 - var(--j),1)}
.mn-dash b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
.mn-dash i{height:8px;border-radius:4px;background:rgba(244,241,234,.06);position:relative;overflow:hidden}
.mn-dash i::after{content:"";position:absolute;inset:0;width:calc(var(--w) * var(--on));background:var(--blue);border-radius:4px}

/* ---- /products: the fan and the four cards ----
   The hero holds four tools stacked as one; as it pins they fan apart into a row. */
.pr-fan{position:relative;height:clamp(300px,36vw,500px);max-width:1180px;margin:0 auto}
.pr-f{position:absolute;margin:0;top:50%;left:50%;border-radius:16px;overflow:hidden;box-shadow:0 40px 100px -40px rgba(0,0,0,.95),0 0 0 1px var(--line-2);
  --f:var(--fan,1);transition:transform 160ms linear}
.pr-f img{display:block;width:100%;height:auto}
.pr-f1{width:44%;transform:translate(-50%,-50%) translate(calc(var(--f) * -62%),calc(var(--f) * -6%)) rotate(calc(var(--f) * -3deg))}
.pr-f2{width:24%;transform:translate(-50%,-50%) translate(calc(var(--f) * 40%),calc(var(--f) * -38%)) rotate(calc(var(--f) * 4deg))}
.pr-f3{width:30%;transform:translate(-50%,-50%) translate(calc(var(--f) * 70%),calc(var(--f) * 44%)) rotate(calc(var(--f) * -2deg))}
.pr-f4{width:15%;border-radius:0;box-shadow:none;overflow:visible;transform:translate(-50%,-50%) translate(calc(var(--f) * 240%),calc(var(--f) * -6%)) rotate(calc(var(--f) * 5deg))}
.pr-f .passport,.pr-f .report{position:relative;inset:auto;margin:0;width:100%}
.pr-f2,.pr-f3{background:#0D1218}
.pr-f2{padding:14px}
.hero.sc-act--pinned .pr-fan{--fan:clamp(.15,var(--sc-p,0) * 2.2 + .15,1)}
@media(prefers-reduced-motion:reduce){.pr-fan{--fan:1!important}}
.pr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pr-card{padding:0 0 26px}
.pr-card>.num,.pr-card>h3,.pr-card>p,.pr-card>.mlink{margin-left:22px;margin-right:22px}
.pr-card>.num{margin-top:20px}
.pr-pic{position:relative;height:220px;overflow:hidden;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 120%,rgba(76,141,255,.16),transparent 70%)}
.pr-pic>img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.pr-pic .passport{inset:12% 9%;font-size:11px}
.pr-pic .report{inset:10% 6%;font-size:11px}
.pr-pic .av-phone{width:44%;margin-top:12%;align-self:flex-start}
.pr-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.2vw,32px)}
@media(max-width:1100px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .pr-grid{grid-template-columns:1fr}
  .pr-fan{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:8px}
  .pr-f{position:relative;top:auto;left:auto;width:auto!important;transform:none!important}
  .pr-f1{grid-column:1/-1}
  .pr-f4{display:none}
}
.av-wide{max-width:1000px}
.av-wide .av-frame{background:#000}
@media(max-width:900px){.tf-measures{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tf-measures{grid-template-columns:1fr}}
@media(max-width:560px){.mn-trace{flex-wrap:wrap;align-content:center;gap:6px 4px}.mn-trace em{display:none}}