/* Vantyx Point site styles (redesign, Oct 2026).
   Built from ~/HUB/Walkthrough_Videos/market/website-handoff/design/ (index.html, films.html), which is the source of truth
   for layout, copy, colours, spacing and motion. Fonts are self-hosted (assets/fonts). Phone fixes sit in the media queries
   at the end of each block, exactly as in the design. */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Archivo: a static instance of the variable font at wdth 108, wght 700, the only setting the headings use (14 KB instead of 90 KB) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-stretch:108%;font-display:swap;src:url(/assets/fonts/archivo-latin-108-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'VXP Price';src:url(/assets/fonts/vxp-price.woff) format('woff');font-weight:400;font-display:swap}

:root{--accent:#76E8E1;--tint1:color-mix(in srgb,#76E8E1 14%,#FFFFFF);--tint2:color-mix(in srgb,#76E8E1 34%,#FFFFFF)}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF}
.vxp{font-family:'Instrument Sans','Avenir Next','Segoe UI',system-ui,sans-serif;color:#0E2A47;-webkit-font-smoothing:antialiased;background:#FFFFFF;width:100%;overflow:hidden;overflow:clip}
.disp{font-family:'Archivo','Avenir Next','Segoe UI',system-ui,sans-serif;font-stretch:108%}
.wrap{max-width:1600px;margin:0 auto;padding:0 clamp(20px,4vw,72px);box-sizing:border-box}
a{color:#1F6F7A}a:hover{color:#0E2A47}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:#0E2A47;color:#FFFFFF;padding:12px 18px;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#FFFFFF}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#1F6F7A}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.eyebrow.c::after{content:"";width:26px;height:2px;background:currentColor}
.eyebrow.lg{font-size:20px;gap:18px;color:#339CA8}
.eyebrow.lg::before,.eyebrow.lg::after{width:40px}
@media (max-width:640px){.eyebrow.lg{font-size:13px;gap:10px;letter-spacing:.14em}.eyebrow.lg::before,.eyebrow.lg::after{width:18px}}
.h2{margin:0;font-size:clamp(34px,3.8vw,60px);line-height:1.02;letter-spacing:-.03em;font-weight:700;color:#0E2A47}
.lede{margin:0;font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:#41566B}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;box-sizing:border-box;padding:15px 28px;border-radius:999px;font:inherit;font-weight:600;font-size:17px;text-decoration:none;cursor:pointer;transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-ink{background:#0E2A47;color:#FFFFFF;border:1.5px solid #0E2A47}
.btn-ink:hover{background:#1B4470;border-color:#1B4470;color:#FFFFFF}
.btn-line{background:#FFFFFF;color:#0E2A47;border:1.5px solid #0E2A47}
.btn-line:hover{background:#EFFCFB;color:#0E2A47}
input:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #339CA8;outline-offset:3px}
[hidden]{display:none !important}

/* header (same on every page) */
.site-head{position:relative;z-index:6;background:#FFFFFF}
.head-in{display:flex;align-items:center;gap:44px;padding:20px clamp(20px,2.6vw,48px);box-sizing:border-box}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
/* Size tokens. The header and the footer share one logo size so they can't drift (Thomas, footer fixes): --logo-ink is the
   logo's visible height, 1.3x the old 30 px (preview feedback 5); the lockup (horizontal-spaced.svg: the light kit's horizontal.svg
   with the words 40% of the symbol's height away from it, scripts/brand/space-lockup.mjs) has its ink on about 403.5 of its
   520-unit height, so the image is --logo-h tall. --text-small is the site's secondary text size (notes, receipts, the footer).
   Below 375 px both tokens step down together (the query at the end). */
.vxp{--logo-ink:calc(1.3 * 30px);--logo-h:calc(var(--logo-ink) * 520 / 403.5);--text-small:14px;--icon-small:18px}
.brand .logo{height:var(--logo-h);width:auto;display:block}
.nav{display:flex;gap:36px;align-items:center;margin-left:auto}
.nav a{color:#0E2A47;text-decoration:none;font-size:16px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:#76E8E1;color:#0E2A47}
.nav a.on{border-bottom-color:#339CA8;font-weight:600}
.hcta{min-height:46px;padding:11px 22px;font-size:16px}

/* footer (same on every page) */
.site-foot{border-top:1px solid #E3E9EE}
/* the footer lines up with the header: same full width and side padding, logo far left, links far right */
.foot-in{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;padding:32px clamp(20px,2.6vw,48px);box-sizing:border-box}
/* the footer logo is the header's (same .brand .logo, same tokens); its links and the copyright are the small text size, below the
   wordmark. The links row may shrink and wrap, and the copyright never breaks, so it moves to its own line instead of running past
   the edge (the page wrapper clips anything wider than the screen) */
.foot-links{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;min-width:0;max-width:100%}
.foot-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--text-small);font-weight:600;text-decoration:none}
.foot-links svg{width:var(--icon-small);height:var(--icon-small);flex:none}
.foot-links .copy{font-size:var(--text-small);color:#41566B;white-space:nowrap}

/* entry motion */
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line > span{display:inline-block;animation:lineUp 1.1s cubic-bezier(.2,.8,.2,1) both}
.fade-up{animation:up 1s cubic-bezier(.2,.8,.2,1) both}

/* ---------- homepage: hero wall ---------- */
.hero{position:relative;height:clamp(820px,calc(100vh - 90px),1180px);overflow:hidden}
.wall{position:absolute;top:-260px;bottom:-260px;left:-10%;right:-10%;display:flex;flex-direction:column;justify-content:center;gap:18px;transform:rotate(-6deg);pointer-events:none}
.hrow{height:272px;animation:rowIn 1.6s cubic-bezier(.2,.8,.2,1) both}
.htrack{display:flex;width:max-content;height:100%;will-change:transform;animation:toR linear infinite}
.htrack.x3{animation-name:toR3}
.hero.off .htrack{animation-play-state:paused}
.hcard{position:relative;flex:none;width:204px;height:100%;margin-right:18px;border-radius:18px;overflow:hidden;background:#DCEFF2}
.hcard img,.ltile img,.vtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.spot{position:absolute;left:50%;top:50%;width:min(1320px,100%);height:580px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,#FFFFFF 0%,#FFFFFF 60%,rgba(255,255,255,.86) 76%,rgba(255,255,255,0) 100%);pointer-events:none}
.hero::before,.hero::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.hero::before{top:0;height:70px;background:linear-gradient(180deg,#FFFFFF,rgba(255,255,255,0))}
.hero::after{bottom:0;height:140px;background:linear-gradient(0deg,#FFFFFF,rgba(255,255,255,0))}
.hero-copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px}
.hero-title{position:relative;z-index:0;margin:0;font-size:clamp(36px,3.7vw,64px);line-height:1.02;letter-spacing:-.03em;font-weight:700;color:#0E2A47}
.bul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:8px}
.bul li{display:flex;align-items:center;gap:16px;font-size:16px;font-weight:600;color:#0E2A47}
.bul li + li::before{content:"";width:6px;height:6px;border-radius:50%;background:#339CA8;margin-left:16px}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero .ctas{margin-top:4px}

/* ---------- homepage: how it works ---------- */
.how{position:relative;padding:clamp(90px,8vw,140px) 0 clamp(70px,7vw,120px);background:linear-gradient(180deg,#FFFFFF 0%,var(--tint1) 22%,var(--tint2) 52%,var(--tint1) 80%,#FFFFFF 100%)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.flow{position:relative;height:620px;margin-top:28px;perspective:1100px}
.flow::before{content:"";position:absolute;left:50%;top:50%;width:760px;height:560px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));pointer-events:none}
.lane{position:absolute;top:50%;overflow:hidden}
.lane-l{left:0;width:calc(50% - 150px);height:230px;margin-top:-115px;transform-origin:right center;transform:rotateY(30deg);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 18%);mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 18%)}
.lane-r{right:0;width:calc(50% - 150px);height:330px;margin-top:-165px;transform-origin:left center;transform:rotateY(-30deg);-webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,0),#000 18%);mask-image:linear-gradient(270deg,rgba(0,0,0,0),#000 18%)}
/* How it works is one conveyor (home.js): a photo slides along the left lane into the phone, plays there with a slow zoom,
   and comes out on the right lane as a film frame. No will-change and no CSS animation on the tilted lanes: a promoted
   layer under rotateY was rasterised at low resolution and looked soft. Without JavaScript the lanes sit still. */
.ftrack{display:flex;align-items:center;width:max-content;height:100%}
.flow.conveyor .ftrack{display:block;position:relative;width:100%}
.flow.conveyor .ltile,.flow.conveyor .vtile{position:absolute;left:0;top:50%;visibility:hidden}
.ltile{position:relative;flex:none;width:300px;height:200px;margin-right:20px;border-radius:12px;overflow:hidden;background:#FFFFFF;box-shadow:0 0 0 6px #FFFFFF,0 24px 40px -22px rgba(14,42,71,.5)}
.vtile{position:relative;flex:none;width:178px;height:316px;margin-right:20px;border-radius:20px;overflow:hidden;background:#DCEFF2;box-shadow:0 26px 44px -24px rgba(14,42,71,.55)}
.vtile .play{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.vtile .bar{position:absolute;left:12px;right:12px;bottom:12px;height:3px;border-radius:3px;background:rgba(255,255,255,.45);overflow:hidden}
.vtile .bar i{display:block;height:100%;width:60%;background:#FFFFFF}
.phone{position:absolute;left:50%;top:50%;width:300px;height:560px;margin:-280px 0 0 -150px;z-index:3;box-sizing:border-box;padding:10px;border-radius:48px;background:#0E2A47;box-shadow:0 30px 50px -30px rgba(14,42,71,.45)}
.screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#DCEFF2}
.screen .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0}
.screen .shot.first{opacity:1}
/* captions at the design's size again (preview feedback 4 halved feedback 2's 24 / 36 px), centred under each lane; --half is the phone's half width */
.flow{--half:150px}
.flow-cap{position:absolute;bottom:4px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;white-space:nowrap}
.flow-cap.l{left:calc((50% - var(--half)) / 2)}
.flow-cap.r{left:calc(100% - (50% - var(--half)) / 2)}
.flow-cap small{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#1F6F7A}
.flow-cap span{font-size:18px;font-weight:600;color:#0E2A47;letter-spacing:-.01em}

/* ---------- homepage: process ---------- */
.process{padding:clamp(80px,8vw,130px) 0 clamp(58px,5.75vw,93px);background:linear-gradient(180deg,#FFFFFF 0%,var(--tint1) 50%,#FFFFFF 100%)}
.proc{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.6vw,48px);margin:56px 0 0;padding:0;list-style:none}
.proc::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:2px;background:linear-gradient(90deg,var(--accent),#339CA8)}
.proc li{position:relative;display:flex;flex-direction:column;gap:12px}
.proc h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.proc .pstep{margin:0;font-size:16px;line-height:1.6;color:#41566B;text-wrap:balance;max-width:21em}
.lede.one{white-space:nowrap}
@media (max-width:760px){.lede.one{white-space:normal;text-wrap:balance}}
.proc .n{position:relative;z-index:1;width:44px;height:44px;box-sizing:border-box;border-radius:50%;background:#FFFFFF;border:2px solid #339CA8;display:grid;place-items:center;font-size:15px;font-weight:700;color:#0E2A47}

/* ---------- homepage: what you get ---------- */
.uses-sec{padding:clamp(49px,5vw,84px) 0 clamp(53px,5.25vw,90px)}
.uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,28px);margin-top:52px}
.wrap.wide{padding:0 clamp(20px,2vw,40px)}
.use h3{margin:0;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.01em}
.use p{margin:0;font-size:16px;line-height:1.55;color:#41566B;text-wrap:balance}
@media (min-width:1240px){.use h3{white-space:nowrap}}
.use{display:flex;flex-direction:column;gap:14px}
/* .uph = the design's .ph photo frame, renamed so the deploy guard's placeholder sweep doesn't flag it */
.use .uph{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#DCEFF2}
.use .uph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.use:hover .uph img{transform:scale(1.05)}
.use .chip{position:absolute;left:14px;top:14px;width:42px;height:42px;border-radius:50%;background:#FFFFFF;display:grid;place-items:center;box-shadow:0 8px 20px -10px rgba(14,42,71,.5)}

/* ---------- homepage: pricing + order ---------- */
.order-sec{padding:clamp(53px,5.25vw,90px) 0 clamp(90px,9vw,150px);background:linear-gradient(180deg,#FFFFFF 0%,#F1F8F8 100%);color:#16233B}
/* gap about 96 px on desktop (Thomas, preview feedback); the container grows so the card keeps its 580 px and the pair stays centred */
.order-grid{display:grid;grid-template-columns:minmax(0,460px) 580px;justify-content:center;gap:clamp(64px,7vw,120px);align-items:start;max-width:calc(1040px + clamp(64px,7vw,120px) + 2 * clamp(20px,4vw,72px))}
.o-left{position:sticky;top:32px;padding-top:34px}
.o-lin{display:flex;flex-direction:column;gap:22px}
.o-eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#2F6F73}
.o-eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.o-h{margin:0;font-size:clamp(34px,3.4vw,48px);line-height:1.05;font-weight:700;letter-spacing:-.02em;color:#16233B}
.pricebox{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding:18px 0;border-top:1px solid #E1E7EC;border-bottom:1px solid #E1E7EC}
.amount{font-family:'VXP Price','DejaVu Sans',Verdana,sans-serif;font-weight:400;font-size:clamp(58px,5.3vw,76px);letter-spacing:-.02em;line-height:1;color:#16233B;-webkit-text-stroke:.03em #16233B}
.per{font-size:18px;color:#4A5668}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;align-items:center;font-size:17px;color:#16233B}
.ticks svg{flex:none}
.o-refund{margin:0;display:flex;gap:12px;align-items:flex-start;background:#E8F3F2;border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.45;color:#1F4447}
.o-refund strong{font-weight:600}
.o-refund svg{flex:none;margin-top:1px}
.o-card{background:#FFFFFF;border:1px solid #E4EAEF;border-radius:24px;box-shadow:0 24px 60px rgba(22,35,59,.10);padding:36px 40px;box-sizing:border-box;scroll-margin-top:24px}
.o-stack{display:flex;flex-direction:column;gap:18px;margin:0}
.o-stack.s2{gap:16px}
.o-title{margin:0;font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:#16233B}
.o-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.o-link{border:0;background:none;padding:0;font:inherit;font-size:15px;font-weight:600;color:#2F6F73;cursor:pointer;min-height:44px;white-space:nowrap}
.o-link:hover{color:#1F5154;text-decoration:underline}
.o-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#EEF2F5;border-radius:14px;padding:5px}
.o-seg button{font:inherit;font-size:16px;border:0;border-radius:10px;padding:12px;min-height:46px;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease;background:transparent;color:#4A5668;font-weight:500;box-shadow:none}
.o-seg button.on{background:#FFFFFF;color:#16233B;font-weight:600;box-shadow:0 1px 3px rgba(22,35,59,.12)}
.o-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:#5B6778}
.o-steps li{display:flex;align-items:center;gap:8px;white-space:nowrap}
@media (min-width:641px){.o-steps{flex-wrap:nowrap}}
.o-steps b{width:24px;height:24px;border-radius:50%;background:#EEF2F5;display:grid;place-items:center;font-size:12px;font-weight:600;color:#5B6778}
.o-steps li.on{color:#16233B;font-weight:600}
.o-steps li.on b{background:#16233B;color:#FFFFFF}
.o-prog{display:none;flex-direction:column;gap:8px;font-size:13px;color:#5B6778}
.o-bar{display:block;height:4px;border-radius:4px;background:#EEF2F5;overflow:hidden}
.o-bar span{display:block;height:100%;border-radius:4px;background:#2F6F73}
.o-fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.o-fld.sm{gap:6px}
.o-lbl{font-size:15px;font-weight:600;color:#16233B}
.o-lbl.sm{font-size:14px}
.o-opt{color:#5B6778;font-weight:400}
.o-inp{font:inherit;font-size:16px;color:#16233B;border:1px solid #DCE3EA;border-radius:12px;padding:13px 14px;background:#FFFFFF;width:100%;box-sizing:border-box;min-width:0;transition:border-color .2s ease,box-shadow .2s ease}
.o-inp::placeholder,.o-linp::placeholder{color:#8A94A3}
.o-inp:focus{outline:none;border-color:#2F6F73;box-shadow:0 0 0 3px rgba(47,111,115,.18)}
.o-inp[aria-invalid="true"],.o-lbox.bad{border-color:#B4413C}
textarea.o-inp{resize:vertical;min-height:72px;font-size:15px;line-height:1.45;padding:12px 14px}
.o-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.o-row.keep{gap:12px}
.o-links{display:flex;flex-direction:column;gap:12px}
.o-lbox{display:flex;align-items:center;gap:12px;border:1px solid #DCE3EA;border-radius:12px;background:#FFFFFF;box-sizing:border-box;min-height:50px;transition:border-color .2s ease,box-shadow .2s ease}
.o-lbox:focus-within{border-color:#2F6F73;box-shadow:0 0 0 3px rgba(47,111,115,.18)}
.o-lbox.on{border:1.5px solid #2F6F73;padding:8px 6px 8px 8px}
.o-lmid{flex:1;min-width:0;display:flex;flex-direction:column}
.o-linp{font:inherit;font-size:16px;color:#16233B;border:0;outline:none;background:transparent;padding:13px 14px;width:100%;box-sizing:border-box;min-width:0}
.o-lbox.on .o-linp{font-size:13px;color:#5B6778;padding:0}
.o-ltitle{font-size:15px;font-weight:600;color:#16233B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-thumb{width:52px;height:40px;flex:none;border-radius:8px;object-fit:cover;display:block;background:#DCE8E6}
.o-thumb.fb{display:grid;place-items:center;background:#EEF2F5}
.o-found{flex:none;display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#2F6F73;padding-right:4px}
.o-x{flex:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;cursor:pointer;display:grid;place-items:center}
.o-x:hover{background:#EEF2F5}
.o-add{align-self:flex-start;font:inherit;font-size:15px;font-weight:600;color:#2F6F73;background:transparent;border:1px dashed #B7CBCB;border-radius:10px;padding:9px 14px;min-height:44px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.o-add:hover{border-color:#2F6F73;background:#F2F8F8}
.o-add span{margin-left:4px;color:#5B6778;font-weight:500}
.o-note{margin:0;font-size:14px;line-height:1.5;color:#4A5668}
.o-note a{font-weight:600;color:#2F6F73}
.o-chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:#4A5668;cursor:pointer}
.o-chk input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:#1B2A47}
.o-err{margin:0;font-size:14px;line-height:1.5;color:#9A2F2A}
.o-err a{color:#9A2F2A;font-weight:600}
.o-btn{font:inherit;font-size:17px;font-weight:600;color:#FFFFFF;background:#1B2A47;border:0;border-radius:14px;padding:0 24px;min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;width:100%;box-sizing:border-box;text-align:left;transition:background-color .2s ease}
.o-btn:hover{background:#2A3D63}
.o-btn.c{justify-content:center;gap:10px}
.o-btn[disabled]{opacity:.8;cursor:progress}
.o-foot{margin:0;display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;line-height:1.45;color:#5B6778;text-align:center}
.o-foot svg{flex:none}
.o-sum{background:#F6F9FA;border:1px solid #E4EAEF;border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.o-sitem{display:flex;align-items:center;gap:14px}
.o-sitem .o-thumb{width:60px;height:46px;border-radius:9px}
.o-smid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.o-sname{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-ssub{font-size:13px;color:#5B6778;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-dm{display:none}
.o-sprice{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.o-stot{border-top:1px solid #E4EAEF;padding-top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px}
.o-disc{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#2F6F73;font-weight:600}
.o-promo{font:inherit;font-size:14px;font-weight:600;color:#2F6F73;background:transparent;border:0;padding:0;min-height:44px;cursor:pointer}
.o-promo:hover{text-decoration:underline}
.o-prow{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 220px;max-width:300px}
.o-prow .o-inp{flex:1 1 120px;padding:8px 12px;font-size:16px;border-radius:10px}
.o-prow .o-err{flex-basis:100%}
.o-apply{flex:none;font:inherit;font-size:14px;font-weight:600;color:#16233B;background:#FFFFFF;border:1px solid #C9D2DB;border-radius:10px;padding:0 14px;min-height:44px;cursor:pointer}
.o-apply:hover{border-color:#2F6F73}
.o-total{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.o-dl{font-size:15px;color:#4A5668}
.o-dlt{font-size:17px;font-weight:700;white-space:nowrap}
.o-express{min-height:0}
.o-or{display:flex;align-items:center;gap:12px;font-size:13px;color:#5B6778}
.o-or::before,.o-or::after{content:"";flex:1;height:1px;background:#E4EAEF}
.o-pe{min-height:120px}
.o-loading{font-size:14px;color:#5B6778}
.o-receipt{margin:0;font-size:14px;color:#4A5668;overflow-wrap:anywhere}
.o-receipt strong{color:#16233B;font-weight:600}
.o-paybar{display:flex;flex-direction:column;gap:12px}
.o-box{border:1px solid #DCE3EA;border-radius:12px;padding:13px 14px;font-size:16px;color:#16233B;overflow-wrap:anywhere}
.o-okc{width:52px;height:52px;border-radius:50%;background:#E8F3F2;display:grid;place-items:center}
.o-ghost{font:inherit;font-size:15px;font-weight:600;color:#16233B;background:#FFFFFF;border:1px solid #C9D2DB;border-radius:12px;min-height:46px;padding:0 20px;cursor:pointer}
.o-ghost:hover{border-color:#2F6F73}

/* ---------- films page ---------- */
.films-hero{padding:clamp(56px,6vw,96px) 0 clamp(90px,8vw,140px);background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 30%,var(--tint1) 70%,#FFFFFF 100%)}
.films-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.films-h1{margin:0;font-size:clamp(44px,5vw,84px);line-height:1;letter-spacing:-.035em;font-weight:700}
.ln{display:block;white-space:nowrap}
@media (max-width:760px){.ln{white-space:normal}}
.films{display:grid;grid-template-columns:repeat(2,minmax(0,440px));justify-content:center;gap:clamp(36px,6vw,96px);margin-top:clamp(56px,6vw,88px)}
.film{position:relative;display:flex;flex-direction:column;gap:22px;animation:up28 1.1s cubic-bezier(.2,.8,.2,1) both}
.glow{position:absolute;left:8%;right:8%;top:6%;height:80%;width:84%;object-fit:cover;filter:blur(60px) saturate(1.3);opacity:.5;transform:scale(1.08);pointer-events:none;z-index:0;border-radius:40px}
.frame{position:relative;z-index:1;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:30px;overflow:hidden;cursor:pointer;background:#DCEFF2;box-shadow:0 40px 70px -40px rgba(14,42,71,.55),0 0 0 1px rgba(14,42,71,.06)}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.frame[aria-pressed="false"]:hover video{transform:scale(1.03)}
.frame .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,42,71,0) 72%,rgba(14,42,71,.4) 100%);pointer-events:none}
.frame .play{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:#76E8E1;display:grid;place-items:center;box-shadow:0 18px 40px -14px rgba(14,42,71,.6),0 0 0 10px rgba(118,232,225,.28);transition:transform .25s ease;pointer-events:none}
.frame:hover .play{transform:scale(1.06)}
.frame .bottom{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:12px;text-align:left;pointer-events:none}
.frame .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.35);overflow:hidden}
.frame .bar i{display:block;height:100%;width:0;background:#76E8E1}
.meta{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.meta h2{margin:0;font-size:clamp(24px,2vw,30px);font-weight:700;letter-spacing:-.02em}
.meta p{margin:0;font-size:17px;color:#41566B}
.link{position:relative;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:8px;font-size:16px;font-weight:600;color:#1F6F7A;text-decoration:none;border-bottom:2px solid #76E8E1;padding-bottom:3px}
.link::after{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:-10px}  /* 44px tap area without moving anything */
.link:hover{color:#0E2A47;border-bottom-color:#339CA8}
.cta-band{padding:clamp(80px,8vw,130px) 0;background:radial-gradient(900px 380px at 50% 100%,var(--tint2),#FFFFFF 72%)}
.cta-band .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.cta-band .ctas{margin-top:6px}
.page-films .eyebrow.lg{font-size:20px;gap:18px}
@media (max-width:760px){
.films{grid-template-columns:minmax(0,420px)}
.page-films .eyebrow.lg{font-size:15px;gap:12px;letter-spacing:.18em}
.page-films .eyebrow.lg::before,.page-films .eyebrow.lg::after{width:24px}
.page-films .ctas{flex-direction:column;width:100%}
.page-films .ctas .btn{width:100%}
}

/* ---------- terms and privacy ---------- */
.legal-sec{padding:clamp(48px,6vw,96px) 0 clamp(70px,8vw,120px);background:linear-gradient(180deg,#FFFFFF 0%,var(--tint1) 100%)}
.legal-wrap{max-width:760px}
.legal-h1{margin:14px 0 0;font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.03em;font-weight:700}
.legal-meta{margin:16px 0 0;font-size:15px;color:#41566B}
.legal h2{margin:40px 0 0;font-size:21px;line-height:1.3;font-weight:700;color:#0E2A47}
.legal p,.legal li{font-size:17px;line-height:1.65;color:#29455E}
.legal p{margin:12px 0 0}
.legal ul{margin:12px 0 0;padding-left:1.2em}
.legal li + li{margin-top:6px}
.legal-back{margin-top:44px}

/* ---------- keyframes, reveal, reduced motion ---------- */
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes up28{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateX(-160px)}to{opacity:1;transform:none}}
@keyframes toR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes toR3{from{transform:translateX(-33.33333%)}to{transform:translateX(0)}}
@keyframes reveal{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 26%}}
/* Motion runs for everyone, prefers-reduced-motion included (Thomas, preview feedback 8: many laptops ship with Windows
   "Animation effects" off, and the wall went dead). The hero wall still pauses off screen (.hero.off). */

/* ---------- responsive (as in the design) ---------- */
@media (max-width:1100px){
.order-grid{grid-template-columns:minmax(0,1fr);justify-content:stretch;max-width:640px;gap:44px}
.o-left{position:static;padding-top:0}
.flow{height:520px}
.phone{width:250px;height:466px;margin:-233px 0 0 -125px;border-radius:40px;padding:9px}
.screen{border-radius:32px}
.lane-l,.lane-r{width:calc(50% - 125px)}
.ltile{width:240px;height:160px}
.vtile{width:146px;height:260px}
.lane-l{height:190px;margin-top:-95px}
.lane-r{height:280px;margin-top:-140px}
.flow{--half:125px}
.uses{grid-template-columns:repeat(2,minmax(0,1fr))}
.proc{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
.proc::before{display:none}
}
@media (max-width:900px){
.nav{display:none !important}
.hcta{margin-left:auto}
.bul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;max-width:460px}
.bul li{justify-content:center;font-size:15px}
.bul li + li::before{display:none}
}
@media (max-width:640px){
.head-in{gap:14px;padding-left:16px;padding-right:16px}
.foot-in{flex-direction:column;align-items:flex-start;gap:12px;padding-left:16px;padding-right:16px}
.foot-links{gap:4px 22px}
.hcta{white-space:nowrap;padding:10px 16px;font-size:15px;min-height:44px}
.hero-title{font-size:34px;animation:up 1s cubic-bezier(.2,.8,.2,1) both}
.hero-title .line{display:inline;overflow:visible;padding:0}
.hero-title .line > span{display:inline;animation:none}
.hero{height:clamp(760px,calc(100vh - 80px),900px)}
.hrow{height:190px}
.hcard{width:142px;border-radius:14px;margin-right:12px}
.wall{gap:12px}
.spot{width:150%;height:600px}
.hero-copy{gap:20px}
.ctas{flex-direction:column;width:100%}
.ctas .btn{width:100%}
.flow{height:400px;perspective:700px}
.flow::before{width:420px;height:380px}
.phone{width:184px;height:344px;margin:-172px 0 0 -92px;border-radius:30px;padding:7px}
.screen{border-radius:24px}
.lane-l,.lane-r{width:calc(50% - 92px)}
.ltile{width:150px;height:100px;margin-right:12px}
.vtile{width:96px;height:171px;margin-right:12px;border-radius:14px}
.lane-l{height:120px;margin-top:-60px}
.lane-r{height:184px;margin-top:-92px}
/* phones: eyebrow 11 px, title 14 px (Thomas, preview feedback 5); one line each, centred in each
   half below the phone, as before (the lanes are only about 100 px wide here) */
.flow{height:460px}
.flow-cap.l{left:25%}.flow-cap.r{left:75%}
.flow-cap span{font-size:14px}
.flow-cap small{font-size:11px}
.flow-cap{gap:3px}
.uses,.proc{grid-template-columns:minmax(0,1fr)}
.o-card{padding:22px 18px;border-radius:20px}
.o-title{font-size:26px}
.o-row{grid-template-columns:minmax(0,1fr)}
.o-row.keep{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.o-steps{display:none}
.o-prog{display:flex}
.o-sitem{gap:12px}
.o-sitem .o-thumb{width:48px;height:38px;border-radius:8px}
.o-sname{font-size:14px}
.o-sprice{font-size:15px}
.o-df{display:none}
.o-dm{display:inline}
.o-paybar{position:sticky;bottom:0;z-index:5;margin:0 -18px -22px;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:#FFFFFF;border-top:1px solid #E4EAEF;border-radius:0 0 20px 20px;gap:8px}
.o-paybar .o-btn{min-height:54px}
.o-paybar .o-foot{font-size:12px}
}

/* ---------- phones and tablets (preview feedback 6): every rule below is inside a query at 1023 px or less, so 1024 and wider
   render exactly as before. The header's Films link (.hfilms) is display:none until the main nav hides (900 px). ---------- */
.hfilms{display:none}
@media (max-width:1023px){
/* Our process: the number beside its title, the text under the title (not under the circle); tablets keep the 2x2 */
.proc li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:8px;align-items:start;align-content:start}
.proc .n{grid-row:1 / span 2}
.proc h3{grid-column:2;min-height:44px;display:flex;align-items:center}
.proc .pstep{grid-column:2}
}
@media (max-width:900px){
/* the nav is hidden from here down: Films sits before Get my film, both on the right */
.head-in{gap:24px}
.hfilms{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;color:#0E2A47;text-decoration:none;font-size:16px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;box-sizing:border-box}
.hfilms.on{border-bottom-color:#339CA8;font-weight:600}
.hcta{margin-left:0}
}
@media (max-width:640px){
/* header: logo, then Films and Get my film on one line down to 320 px. The logo's SVG has empty space right of the wordmark
   (15.1 of 1800 units in horizontal-spaced.svg), trimmed here; the button is smaller (15 px, less padding) */
.head-in{gap:12px}
.site-head .brand .logo{margin-right:calc(var(--logo-ink) * -15.1 / 403.5)}
.hfilms{font-size:15px}
.hcta{padding:0 10px}
/* hero points: a tidy 2x2, a teal check before each, text left-aligned, two equal columns, the block centred (it may use
   10 px of each 20 px gutter, so every point stays on one line from 390 px up) */
.bul{grid-template-columns:repeat(2,minmax(0,1fr));width:max-content;max-width:calc(100% + 20px);gap:8px 14px;justify-items:start;align-items:start}
.bul li{display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:6px;align-items:start;justify-content:start;text-align:left;font-size:14px;line-height:1.35}
.bul li::before,.bul li + li::before{content:"";display:block;width:12px;height:12px;margin:3.5px 0 0;border-radius:0;background:#339CA8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* hero buttons: side by side at exactly half the width each, 46 px tall, 16 px text; below 375 px half the width can't hold
   "Free photo check" (about 158 px), so they stack (the 374 px query below) */
.ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px}
.ctas .btn{width:auto;min-height:46px;height:46px;padding:0 12px;font-size:16px;white-space:nowrap}
/* Our process: one column, closer steps */
.proc{row-gap:22px}
/* What you get: a 2x2 like tablets; the card style and crops stay, the icon badge scales down */
.uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
.use{gap:10px}
.use h3{font-size:15px}
.use p{font-size:13px;line-height:1.5}
.use .chip{left:8px;top:8px;width:30px;height:30px}
.use .chip svg{width:14px;height:14px}
}
@media (max-width:374px){
/* below 375 px the logo drops back to 1.0x (the token, so the footer follows) and the header's gaps and button padding tighten */
/* the shared logo drops to 1.0x (header and footer together); the footer text steps down with it so it stays below the wordmark
   (the 1.0x wordmark's capitals are 8.4 px tall; 11 px text's are 7.9, 12 px's would be 8.6) */
.vxp{--logo-ink:30px;--text-small:11px;--icon-small:15px}
.head-in{gap:8px}
.hcta{padding:0 8px}
.ctas{grid-template-columns:minmax(0,1fr)}
}

/* ---------- pricing, stacked (preview feedback 7): at 1100 px and down the order grid is one column (the query above), and the
   "Pricing" eyebrow and its title are centred like every other section head: the .eyebrow.c look, a dash on both sides.
   Side by side (1101 px and up) keeps the left-aligned eyebrow with one dash. ---------- */
@media (max-width:1100px){
.o-eyebrow{justify-content:center;gap:12px;font-weight:700;letter-spacing:.18em;color:#1F6F7A}
.o-eyebrow::before,.o-eyebrow::after{content:"";width:26px;height:2px;background:currentColor}
.o-h{text-align:center}
}

/* ---------- desktop and laptop logo (Thomas, 2026-10-13, decision DL4): 1024 px and wider, the logo is 1.6x the old 30 px (it was
   1.3x, and its words read smaller than the menu). The shared token grows, so the footer logo matches (FB9). The header keeps today's
   height exactly (the 1.3x logo plus 20 px above and below = 90.25 px): the top and bottom padding go and the header is that tall
   (a min-height, so the padding the logo gains is taken out with no rounding), and the logo, menu and button stay centred
   (align-items). Phones and tablets are unchanged. ---------- */
@media (min-width:1024px){
.vxp{--logo-ink:calc(1.6 * 30px);--head-h:calc(1.3 * 30px * 520 / 403.5 + 40px)}
.head-in{padding-top:0;padding-bottom:0;min-height:var(--head-h)}
}