/* ============================================================================
   Outvori v27 visual layer (2026-11-04). Loaded after ds.css on every public page.
   "Your AI growth team. Always on." - one 3D night-console look everywhere:
   ink + forest + lime, Manrope + JetBrains Mono, sculpted 3D art, glass boxes.
   - Boxes: one card material (glass + gradient hairline + soft depth), fluid grids
     that fit 320 px phones and 2000 px screens, tables that stay readable on mobile.
   - Motion: headline words rise, lime words get a light sweep, boxes stagger in,
     numbers count up, cards follow the pointer, the 3D hero art drifts slowly.
     transform/opacity only, 150-700 ms, everything off under prefers-reduced-motion.
   - Agents: Vori, one colour per agent (--vori-c), used on /ai-team, home and the app.
   ========================================================================== */
:root{
  --v-ink:#0A110F; --v-ink-2:#101917; --v-ink-3:#16211E; --v-forest:#244F43; --v-forest-2:#2F6556;
  --v-lime:#D6F16B; --v-lime-2:#E4F78F; --v-cream:#F5F4ED; --v-sage:#A7B9A7; --v-muted:#93A598; --v-fg2:#C9D4CC;
  --v-line:rgba(238,242,234,.10); --v-line-2:rgba(238,242,234,.16);
  --v-card:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --v-r:22px; --v-r-sm:14px;
  --v-pad:clamp(18px,2.2vw,28px);
  --v-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -36px rgba(0,0,0,.85);
  --v-ease:cubic-bezier(.2,.8,.2,1); --v-spring:cubic-bezier(.34,1.56,.64,1);
  /* agent colours (Vori) */
  --vori-lime:#D6F16B; --vori-sky:#6CC6F2; --vori-violet:#A98BFF; --vori-amber:#F2B75C;
  --vori-coral:#FF8A6B; --vori-mint:#5FE0B4; --vori-pink:#FF7EC8; --vori-blue:#7AA2FF;
}

/* ---------- Type: one scale, balanced lines, lime words never orphaned ---------- */
.h1,.hero h1{text-wrap:balance}
.h2,.sec h2,.sec-head h2{text-wrap:balance}
.lede,.hero-sub,.sec-head p{text-wrap:pretty}
.h1 em,.h1 .lime,.h2 em,.h2 .lime,h1 .hl,h2 .hl{white-space:nowrap}
/* footer slogan: keep "Always on." together, never "Always / on." */
.ov-ftr-tag{text-wrap:balance}
.ov-ftr-tag .v27-nb{white-space:nowrap}
.ov-ftr-tag .v27-nb.lime,.ov-ftr-tag .lime{color:var(--v-lime)}

/* ---------- Boxes: one material ---------- */
:is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.seq-step,.faq,.auth-card,.cta-grid > *,.v27-card){
  position:relative; border-radius:var(--v-r)!important; isolation:isolate;
  transition:transform .45s var(--v-ease),box-shadow .45s var(--v-ease),border-color .3s ease;
}
:root[data-theme="dark"] :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.seq-step,.faq,.v27-card){
  background:var(--v-card),rgba(16,25,23,.72)!important; border:1px solid var(--v-line)!important; box-shadow:var(--v-shadow);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.seq-step,.faq,.v27-card){
  background:var(--v-card),rgba(16,25,23,.72)!important; border:1px solid var(--v-line)!important; box-shadow:var(--v-shadow)}}
/* gradient hairline that lights up toward the pointer */
:is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.v27-card)::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(214,241,107,.55),rgba(214,241,107,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease;
}
/* soft spotlight inside the box */
:is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.v27-card)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(214,241,107,.07),transparent 65%);
  opacity:0; transition:opacity .35s ease;
}
@media (hover:hover) and (pointer:fine){
  :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.v27-card):hover::before,
  :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.v27-card):hover::after{opacity:1}
  :is(.pf-card,.pz-card,.fp-card,.spot,.at-day-card,.how-step,.v27-card):hover{transform:translateY(-4px)}
}
/* featured plan glows */
:is(.plan,.price).feat,:is(.plan,.price).is-featured,:is(.plan,.price)[data-featured]{box-shadow:0 0 0 1px rgba(214,241,107,.45),0 40px 80px -40px rgba(214,241,107,.35),var(--v-shadow)!important}

/* ---------- Grids that fit every screen ---------- */
.pf-grid,.faq-grid,.ov-rel-grid,.cta-grid{gap:clamp(12px,1.6vw,20px)!important}
@media (max-width:760px){
  .pf-grid,.ov-rel-grid,.cta-grid,.faq-grid{grid-template-columns:minmax(0,1fr)!important}
  :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.how-step){padding:var(--v-pad)!important}
}
@media (min-width:761px) and (max-width:1100px){
  .pf-grid,.ov-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---------- Tables: readable on phones ---------- */
.tbl-wrap,.cmp-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--v-r);scrollbar-width:thin}
.tbl-wrap table th:first-child,.tbl-wrap table td:first-child{position:sticky;left:0;z-index:2;background:inherit}
:root[data-theme="dark"] .tbl-wrap table th:first-child,:root[data-theme="dark"] .tbl-wrap table td:first-child{background:#111B18}
.tbl-wrap table tr{transition:background .2s ease}
@media (hover:hover){.tbl-wrap table tbody tr:hover{background:rgba(214,241,107,.04)}}
/* the Outvori column in comparisons */
.tbl-wrap table :is(th,td).us,.tbl-wrap table :is(th,td)[data-us]{background:linear-gradient(180deg,rgba(214,241,107,.10),rgba(214,241,107,.04))!important}
.v27-scroll-hint{display:none}
@media (max-width:760px){
  .v27-scroll-hint{display:flex;align-items:center;gap:8px;margin:10px 2px 0;font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--v-sage)}
  .v27-scroll-hint::after{content:"";width:28px;height:1px;background:currentColor;animation:v27-nudge 1.6s var(--v-ease) infinite}
}
@keyframes v27-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.yes{color:var(--v-lime)}

/* ---------- Sections: rhythm, no dead gaps ---------- */
.sec{padding-block:clamp(56px,8vw,112px)}
.sec + .sec{border-top:1px solid rgba(238,242,234,.05)}
.sec-head{margin-bottom:clamp(24px,3.5vw,44px)}
/* a lime hairline that draws itself under each section eyebrow */
.eyebrow{position:relative}
.v27 .eyebrow.v27-line::after{content:"";display:block;width:44px;height:2px;margin-top:10px;border-radius:2px;background:var(--v-lime);transform-origin:left;transform:scaleX(0);transition:transform .7s var(--v-ease) .15s}
.v27 .eyebrow.v27-line.v27-in::after{transform:scaleX(1)}

/* ---------- 3D: hero art drift + section plates ---------- */
.hero{overflow:clip}
.hero-art{will-change:transform;transition:transform 1.2s var(--v-ease)}
.v27 .hero-art{transform:translate3d(var(--px,0),var(--py,0),0) scale(1.04)}
.v27-motes{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.9;mix-blend-mode:screen}
/* final CTA and dark sections get the 3D horizon as a faint plate */
.cta,.sec.v27-plate{position:relative;overflow:clip;isolation:isolate}
.cta::before,.sec.v27-plate::before{content:"";position:absolute;inset:auto -10% -30% 30%;height:120%;z-index:-1;pointer-events:none;
  background:url("/brand/artwork-3d/hero-desktop.webp") 70% 100%/cover no-repeat;opacity:.28;
  -webkit-mask:radial-gradient(70% 70% at 70% 80%,#000 30%,transparent 75%);mask:radial-gradient(70% 70% at 70% 80%,#000 30%,transparent 75%)}
@media (max-width:760px){.cta::before,.sec.v27-plate::before{background-image:url("/brand/artwork-3d/hero-mobile.webp");inset:auto -20% -20% 0;opacity:.22}}
/* floating 3D mark next to section heads that ask for it */
.v27-mark3d{width:clamp(56px,7vw,88px);height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));animation:v27-float 7s ease-in-out infinite}
@keyframes v27-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}

/* ---------- Text motion ---------- */
.v27-w{display:inline-block;white-space:pre}
.v27-split .v27-w{opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(6px)}
.v27-split.v27-in .v27-w{opacity:1;transform:none;filter:none;transition:opacity .6s var(--v-ease),transform .7s var(--v-ease),filter .6s ease;transition-delay:calc(var(--i,0) * 45ms)}
/* lime words get a light sweep once they land */
.v27-sweep{background:linear-gradient(100deg,var(--v-lime) 0 40%,#F7FFD2 50%,var(--v-lime) 60% 100%) 100% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.v27-in .v27-sweep,.v27-sweep.v27-in{animation:v27-sweep 1.6s var(--v-ease) .5s both}
@keyframes v27-sweep{from{background-position:100% 0}to{background-position:0% 0}}
/* numbers */
.v27-num{font-variant-numeric:tabular-nums}

/* ---------- Boxes in: stagger ---------- */
.v27 .v27-stg > *{opacity:0;transform:translateY(22px) scale(.985)}
.v27 .v27-stg.v27-in > *{opacity:1;transform:none;transition:opacity .6s var(--v-ease),transform .7s var(--v-ease);transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- Buttons ---------- */
.btn-lime{position:relative;overflow:hidden;transition:transform .2s var(--v-ease),box-shadow .3s ease}
.btn-lime::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
@media (hover:hover){.btn-lime:hover::after{transform:translateX(120%);transition:transform .8s var(--v-ease)}.btn-lime:hover{box-shadow:0 14px 40px -12px rgba(214,241,107,.7)}}
.btn-lime:active{transform:scale(.97)}

/* ---------- Vori agents ---------- */
.v27-vori{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--vs,64px);height:var(--vs,64px)}
.v27-vori::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--vori-c,#D6F16B) 55%,transparent),transparent 70%);filter:blur(10px);opacity:.75}
.v27-vori img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
@media (hover:hover){.v27-vori:hover img,a:hover .v27-vori img,.at-agent:hover .v27-vori img{animation:v27-wave .9s var(--v-spring)}}
@keyframes v27-wave{0%{transform:rotate(0)}30%{transform:rotate(-8deg) translateY(-3px)}60%{transform:rotate(6deg)}100%{transform:rotate(0)}}
.v27-vori-row{display:flex;flex-wrap:wrap;gap:10px}
.v27-agent-tag{--vori-c:#D6F16B;border-color:color-mix(in srgb,var(--vori-c) 40%,transparent)!important}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .v27-split .v27-w,.v27 .v27-stg > *{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .v27-sweep{animation:none!important;color:var(--v-lime)!important;background:none}
  .v27-mark3d,.v27-scroll-hint::after{animation:none}
  .v27 .hero-art{transform:none}
  :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.v27-card):hover{transform:none}
}

/* ---------- Lime words in headings (em = the brand highlight, never italic) ---------- */
:is(.h1,.h2,.sec h2,.cta h2,.sec-head h2,.hero h1) em{font-style:normal;color:var(--v-lime)}
:root[data-theme="light"] :is(.h2,.sec h2,.sec-head h2) em{color:var(--v-forest)}
:root[data-theme="light"] .sec.dark :is(.h2,h2) em,:root[data-theme="light"] .cta h2 em{color:var(--v-lime)}
:root[data-theme="light"] .v27-sweep:not(.dark .v27-sweep):not(.cta .v27-sweep):not(.hero .v27-sweep){background:none;color:var(--v-forest)!important;-webkit-background-clip:border-box;background-clip:border-box}

/* legal documents: never dimmed by the reveal, even before scripts run */
.js .doc-card.rv:not(.seen){opacity:1;transform:none}

/* FAQ as one box: questions sit inside it with a gutter, no double line at the bottom */
.faq{padding:6px clamp(18px,2.4vw,28px)!important}
.faq details:last-child{border-bottom:0}
.faq summary{padding-block:20px}
/* sweep words: a little room so the text clip never shaves the last glyph */
.v27-w.v27-sweep{padding-right:.04em;margin-right:-.04em}

/* ---------- v27.1 polish (2026-11-04) ---------- */
/* italic highlight words in headings read as one lime highlight, like the rest of the site */
:is(h1,h2,h3) em{font-style:normal}
:is(.sec,.cta,section) h2 em{color:var(--v-lime)}
:root[data-theme="light"] :is(.sec,section) h2 em{color:var(--v-forest)}
/* boxes inside boxes: flat, quiet rows instead of a stack of cards */
:is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.seq-step,.faq,.v27-card,.console,.pwin,.calc) :is(.pf-card,.pz-card,.fp-card,.spot,.at-day-card,.how-step,.seq-step,.v27-card){
  box-shadow:none!important;background:rgba(238,242,234,.025)!important;border-color:rgba(238,242,234,.07)!important;transform:none!important;border-radius:14px!important}
:is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.seq-step,.faq,.v27-card) :is(.pf-card,.pz-card,.fp-card,.spot,.at-day-card,.how-step,.seq-step,.v27-card)::before,
:is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.seq-step,.faq,.v27-card) :is(.pf-card,.pz-card,.fp-card,.spot,.at-day-card,.how-step,.seq-step,.v27-card)::after{display:none}
/* buttons answer the press */
:is(.btn,.btn-lime,.btn-ghost,button.btn){transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
:is(.btn,.btn-lime,.btn-ghost,button.btn):active{transform:scale(.97)}
/* phones: the hero text sits on a calm dark top, the 3D art lives below it instead of under the buttons */
@media (max-width:680px){
  .hero{min-height:0!important;padding-block:28px 300px!important}
  .hero-art{top:auto!important;height:360px}
  .hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0A110F 0%,rgba(10,17,15,.6) 22%,rgba(10,17,15,0) 45%)}
  .hero-art img{object-position:center bottom!important}
}
@media (prefers-reduced-motion:reduce){:is(.btn,.btn-lime,.btn-ghost,button.btn):active{transform:none}}

/* ---------- v27.2 premium pass (2026-11-04): design-motion-principles + high-end-visual-design ----------
   Marketing site, so Jakub-style production polish first, Jhey-style delight only in the hero and Vori,
   Emil-style restraint on forms and nav. Only transform/opacity animate. */
:root{--v-spring:cubic-bezier(.32,.72,0,1)}
/* button-in-button: the arrow sits in its own small round chip and moves on its own */
.btn > svg:last-child{box-sizing:content-box;width:14px;height:14px;padding:7px;margin:-4px -12px -4px 0;border-radius:999px;
  background:rgba(238,242,234,.08);transition:transform .45s var(--v-spring),background-color .3s ease}
.btn-lime > svg:last-child{background:rgba(10,17,15,.10)}
@media (hover:hover) and (pointer:fine){
  .btn:hover > svg:last-child{transform:translate(3px,-1px) scale(1.06)}
  .btn-lime:hover > svg:last-child{background:rgba(10,17,15,.16)}
}
/* double bezel: top-level boxes sit in a faint machined tray (outer ring) with a light inner top edge.
   Pure box-shadow, so no extra markup and no layout change. Nested boxes stay flat (rule above). */
:root[data-theme="dark"] :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.faq,.v27-card,.console,.pwin,.calc){
  box-shadow:0 0 0 5px rgba(238,242,234,.018),0 0 0 6px rgba(238,242,234,.05),inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -36px rgba(0,0,0,.7)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.faq,.v27-card,.console,.pwin,.calc){
  box-shadow:0 0 0 5px rgba(238,242,234,.018),0 0 0 6px rgba(238,242,234,.05),inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -36px rgba(0,0,0,.7)!important}}
:root[data-theme="light"] :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.faq,.v27-card){
  box-shadow:0 0 0 5px rgba(16,25,23,.025),0 0 0 6px rgba(16,25,23,.06),inset 0 1px 0 #fff,0 24px 50px -34px rgba(16,25,23,.25)!important}
:is(.plan,.price):is(.feat,.is-featured,[data-featured]){box-shadow:0 0 0 5px rgba(214,241,107,.06),0 0 0 6px rgba(214,241,107,.35),inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -40px rgba(214,241,107,.35)!important}
/* entries feel like mass settling: longer, spring-like ease-out for boxes coming into view */
.v27 .v27-stg > *{transition-timing-function:var(--v-spring)!important}
@media (prefers-reduced-motion:reduce){.btn > svg:last-child{transition:none}.btn:hover > svg:last-child{transform:none}}
/* the tray ring is for top-level boxes only: anything inside a box (price chip in a plan, steps in a console) stays flat */
:root :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.seq-step,.faq,.v27-card,.console,.pwin,.calc) :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.seq-step,.v27-card){
  box-shadow:none!important;background:rgba(238,242,234,.025)!important;border-color:rgba(238,242,234,.07)!important;transform:none!important}
:root[data-theme="light"] :is(.plan,.pf-card,.spot) :is(.price,.spot,.pf-card){background:rgba(16,25,23,.03)!important;border-color:rgba(16,25,23,.07)!important}
/* plan price: plain big figure, not a box in a box */
:root .plan .price{background:transparent!important;border-color:transparent!important;padding:6px 0!important;min-height:0!important;height:auto!important}

/* ---------- v27.3 one continuous canvas (2026-11-04) ----------
   Dark theme: every section sits on the same ground as the logged-in app (#0A110F). No more stripes of
   slightly different near-blacks with hairlines between them; sections are told apart by space and a
   soft light at their top instead of a hard edge. */
:root[data-theme="dark"]{--v-canvas:#0A110F}
:root[data-theme="dark"] body{background:#0A110F!important}
:root[data-theme="dark"] main > section:not(.hero):not(.cta){background-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}
:root[data-theme="dark"] main > section.hero{background-color:#0A110F!important;border-bottom-color:transparent!important}
:root[data-theme="dark"] main > :is(section.how,section.pricing,section.dark:not(.cta):not(.hero),section.run-band){background-image:radial-gradient(70% 55% at 50% 0%,rgba(214,241,107,.045),rgba(214,241,107,0) 70%),radial-gradient(50% 60% at 100% 100%,rgba(36,79,67,.22),rgba(36,79,67,0) 70%)!important}
:root[data-theme="dark"] main > section.cta{border-top-color:transparent!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background:#0A110F!important}
:root:not([data-theme="light"]) main > section:not(.hero):not(.cta){background-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}
:root:not([data-theme="light"]) main > section.hero{background-color:#0A110F!important;border-bottom-color:transparent!important}
:root:not([data-theme="light"]) main > :is(section.how,section.pricing,section.dark:not(.cta):not(.hero),section.run-band){background-image:radial-gradient(70% 55% at 50% 0%,rgba(214,241,107,.045),rgba(214,241,107,0) 70%),radial-gradient(50% 60% at 100% 100%,rgba(36,79,67,.22),rgba(36,79,67,0) 70%)!important}
:root:not([data-theme="light"]) main > section.cta{border-top-color:transparent!important}}
/* the 3D art melts into the page instead of ending on a hard edge */
.hero-art img{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}

/* hero overlays end in the page ground, so the hero has no bottom edge on the continuous canvas */
:root[data-theme="dark"] .hero::before{background:linear-gradient(90deg,rgba(10,17,15,.92) 0%,rgba(10,17,15,.72) 30%,rgba(10,17,15,.15) 58%,rgba(10,17,15,0) 75%),linear-gradient(0deg,#0A110F 0%,rgba(10,17,15,0) 26%)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero::before{background:linear-gradient(90deg,rgba(10,17,15,.92) 0%,rgba(10,17,15,.72) 30%,rgba(10,17,15,.15) 58%,rgba(10,17,15,0) 75%),linear-gradient(0deg,#0A110F 0%,rgba(10,17,15,0) 26%)!important}}
@media (max-width:680px){:root[data-theme="dark"] .hero::before{background:linear-gradient(180deg,rgba(10,17,15,.94) 0%,rgba(10,17,15,.7) 40%,rgba(10,17,15,0) 62%),linear-gradient(0deg,#0A110F 0%,rgba(10,17,15,0) 22%)!important}}
@media (max-width:680px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero::before{background:linear-gradient(180deg,rgba(10,17,15,.94) 0%,rgba(10,17,15,.7) 40%,rgba(10,17,15,0) 62%),linear-gradient(0deg,#0A110F 0%,rgba(10,17,15,0) 22%)!important}}
/* closing call-to-action and footer on the same ground too; art inside the CTA fades out at its edges */
:root[data-theme="dark"] main > section.cta,:root[data-theme="dark"] :is(footer,.ftr,.ov-ftr){background-color:#0A110F!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main > section.cta,:root:not([data-theme="light"]) :is(footer,.ftr,.ov-ftr){background-color:#0A110F!important}}
.cta :is(img,picture,.cta-art){-webkit-mask-image:radial-gradient(70% 80% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(70% 80% at 50% 45%,#000 55%,transparent 100%)}
.cta::before,.sec.v27-plate::before{bottom:0!important;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 25%,#000 55%,transparent 96%),linear-gradient(90deg,transparent 0,#000 30%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(180deg,transparent 0,#000 25%,#000 55%,transparent 96%),linear-gradient(90deg,transparent 0,#000 30%,#000 80%,transparent 100%);mask-composite:intersect}
/* light theme: lime words on white are unreadable, so table marks and lime text use forest there */
:root[data-theme="light"] :is(.pz-m.yes,.yes,td .lime,.tbl-wrap .lime){color:var(--v-forest)!important}
/* light theme: the tray ring is a whisper, not an outline */
:root[data-theme="light"] :is(.pf-card,.pz-card,.fp-card,.spot,.plan,.price,.at-day-card,.how-step,.faq,.v27-card){
  box-shadow:0 0 0 1px rgba(16,25,23,.06),inset 0 1px 0 #fff,0 18px 40px -30px rgba(16,25,23,.22)!important}
:root[data-theme="light"] :is(.plan,.price):is(.feat,.is-featured,[data-featured]){box-shadow:0 0 0 1px rgba(36,79,67,.35),0 30px 60px -36px rgba(36,79,67,.35)!important}

/* ---------- v27.4 one hero system (2026-11-04) ----------
   Every inner page opens the same way: same height, same text column, same art placement.
   Home keeps its taller hero; "slim" heroes (pricing, contact, legal) are a step shorter. */
@media (min-width:681px){
  .hero.page{min-height:clamp(520px,42vw,600px)!important;padding-block:clamp(72px,7vw,96px) clamp(120px,11vw,150px)!important;align-items:center!important}
  .hero.page.slim{min-height:clamp(420px,32vw,460px)!important;padding-block:clamp(64px,6vw,84px) clamp(96px,8vw,120px)!important}
  .hero.page :is(.h1,h1){max-width:16ch}
  .hero.page :is(.lede,.hero-sub,p.sub){max-width:56ch}
}
@media (max-width:680px){
  .hero.page{padding-block:28px 240px!important}
  .hero.page.slim{padding-block:28px 200px!important}
  .hero.page .hero-art{height:290px}
  .hero.page.slim .hero-art{height:250px}
}