/* ════════ base.css — shared system for every page ════════
   Type scale: 72 hero · 48 section (Inter Black) · 32 titles (serif) · 20 sub · 17 body · 13 label */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ease:cubic-bezier(0.16,1,0.3,1)}
html{scroll-behavior:smooth}
body{background:#fff;color:#000;font-family:'Instrument Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.fu{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.fu.vis{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.fu{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
.v7 a{color:inherit}
.v7 a.v7-card,.v7 a.v7-img{text-decoration:none;color:inherit}
.v7 a.v7-link,.v7 a.v7-btn,.v7-nlinks a,.v7-flinks a,.v7-menu a,.v7-logo{text-decoration:none}
.v7-img{position:relative}
.v7-img>img,.v7c-ba-layer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* <picture> = a separate phone crop (used on case heroes); same fill behavior */
.v7-img>picture{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.v7-img>picture>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* The gray fill is for empty placeholders only. Once a slot holds an image, it has
   no fill or border, so transparent exports sit on the section's own color.
   (The before/after layers are excluded: the top layer must stay opaque.) */
.v7-img:has(>img),.v7-img:has(>picture){background:transparent!important;border-color:transparent!important}
/* Home cards (screenshots): crop only from the bottom, so the composed headroom survives 4:3 */
.v7-card>.v7-img>img,.v7-feat>.v7-img>img{object-position:center top}
/* Device slots (.is-device): a tight-trimmed device image is fitted, never cropped.
   It sits on the slot's bottom edge, centered, with fixed headroom set here, not in the image. */
.v7-img.is-device>img{inset:32px 0 0;height:calc(100% - 32px);object-fit:contain;object-position:center bottom;border-radius:0}
@media(max-width:768px){.v7-img.is-device>img{inset:24px 0 0;height:calc(100% - 24px)}}
/* portrait */
.v7-portrait{overflow:hidden}
.v7-portrait>img{display:block;width:100%;height:100%;object-fit:cover}
.v7-skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#000;color:#fff;padding:10px 14px;border-radius:6px}
.v7-skip:focus{left:8px}
/* ════════ v7 — minimal system (home first; inner pages pending) ════════
   Type scale: 72 hero · 48 section (Inter Black) · 32 titles (serif) · 20 sub · 17 body · 13 label */
:root{
  --v-bg:#fff;--v-band:#fafafa;--v-card:#f2f2f2;--v-line:#e5e5e5;
  --v-ink:#000;--v-ink2:#5c5c5c;--v-ink3:#6b6b6b;
  --v-sans:'Instrument Sans',system-ui,sans-serif;
  --v-serif:'Instrument Serif',Georgia,serif;
  --v-black:'Inter',system-ui,sans-serif;
  --v-pad:144px;--v-gap:120px
}
.v7{background:var(--v-bg);color:var(--v-ink);font-family:var(--v-sans);-webkit-font-smoothing:antialiased}
.v7-wrap{max-width:1152px;margin:0 auto}
.v7 button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
#work,#contact{scroll-margin-top:72px}

/* nav */
.v7-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);display:flex;align-items:center;justify-content:space-between;padding:18px var(--v-pad);border-bottom:1px solid transparent;transition:border-color .2s}
.v7-nav.scrolled{border-bottom-color:var(--v-line)}
.v7-logo{display:inline-block;font-family:var(--v-black);font-weight:900;font-size:24px;letter-spacing:-.01em;color:var(--v-ink);background:none;border:none;cursor:pointer;line-height:1}
.v7-nlinks{display:flex;align-items:center;gap:36px}
.v7-nlinks a,.v7-nlinks button{background:none;border:none;cursor:pointer;font-family:var(--v-sans);font-weight:500;font-size:15px;color:var(--v-ink2);line-height:1;transition:color .2s}
.v7-nlinks a:not(.v7-ncta):hover{color:var(--v-ink)}
.v7-nlinks .v7-ncta{text-decoration:none;font-size:14px;color:#fff;background:var(--v-ink);border-radius:6px;padding:12px 18px;display:inline-flex;align-items:center;gap:8px;transition:opacity .2s}
.v7-nlinks .v7-ncta:hover{color:#fff;opacity:.82}
.v7-dot{width:6px;height:6px;border-radius:50%;background:#2fe57a;box-shadow:0 0 6px 1px rgba(47,229,122,.8);animation:glow 2.5s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:1;box-shadow:0 0 6px 1px rgba(47,229,122,.8)}50%{opacity:.6;box-shadow:0 0 2px 0 rgba(47,229,122,.35)}}
@media (prefers-reduced-motion:reduce){.v7-dot{animation:none}}

/* type scale */
.v7-h1{font-family:var(--v-sans);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.06;letter-spacing:-.035em;color:var(--v-ink);max-width:1120px}
.v7-h1 em{font-family:var(--v-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.v7-display{font-family:var(--v-black);font-weight:900;text-transform:uppercase;font-size:max(clamp(32px,calc(32px + (100vw - 360px) / 10),36px),min(3.4vw,48px));letter-spacing:-.025em;line-height:1.1;color:var(--v-ink)}
.v7-card-t{font-family:var(--v-serif);font-weight:400;font-size:32px;line-height:1.1;letter-spacing:-.015em;color:var(--v-ink)}
.v7-sub{font-size:20px;line-height:1.45;color:var(--v-ink2)}
.v7-body{font-size:17px;line-height:1.65;color:var(--v-ink2)}
.v7-body p+p{margin-top:1.1em}
.v7-lbl{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink3);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v7-meta{font-size:15px;color:var(--v-ink3)}
.v7 .v7-link{display:inline-block;font-family:var(--v-black);font-weight:500;font-size:16px;color:var(--v-ink);border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .2s}
.v7 .v7-link:hover,.v7-card:hover .v7-link{border-bottom-color:var(--v-ink)}
.v7-mt{margin-top:28px}

/* hero */
.v7-hero{padding:136px var(--v-pad) 56px}
.v7-sub{margin-top:28px;max-width:640px}
.v7-btns{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.v7 .v7-btn{font-family:var(--v-black);font-weight:500;font-size:16px;border-radius:12px;padding:13px 20px;line-height:22px;transition:background .2s,border-color .2s}
.v7 .v7-btn-pri{background:var(--v-ink);color:#fff;border:1px solid var(--v-ink)}
.v7 .v7-btn-pri:hover{background:#262626}
.v7 .v7-btn-sec{background:transparent;color:var(--v-ink);border:1px solid #d4d4d4}
.v7 .v7-btn-sec:hover{border-color:var(--v-ink)}
.v7-stats{display:flex;margin-top:56px;padding-top:28px;border-top:1px solid var(--v-line)}
.v7-stats>div{flex:1;padding-right:24px}
.v7-stats>div+div{padding-left:28px;border-left:1px solid var(--v-line)}
.v7-stats dt{font-family:var(--v-serif);font-size:32px;line-height:1;letter-spacing:-.01em;color:var(--v-ink)}
.v7-stats dd{font-size:15px;color:var(--v-ink2);margin-top:8px}

/* sections */
.v7-sec{padding:var(--v-gap) var(--v-pad)}
.v7-sec-work{padding-top:64px}
.v7-rule{border-top:1px solid var(--v-line)}
.v7-band{background:var(--v-band)}
.v7-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:40px}
.v7-split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:64px;align-items:start}
.v7-split-l{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.v7-split-l .v7-link{margin-top:16px}
.v7-split-l .v7-btns{margin-top:16px}
.v7-body .v7-btns{margin-top:28px}

/* cards — contained (assets live inside the card) */
.v7-card{background:#fff;border:1px solid #ececec;border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.v7-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -12px rgba(0,0,0,.14)}
.v7-img{background:var(--v-card);border-radius:10px;display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.v7-img span{font-size:12px;color:var(--v-ink3);line-height:1.4;max-width:280px}
.v7-card>.v7-img{margin:24px 24px 0;aspect-ratio:1/1.05}
.v7-card-body{padding:28px 24px}
.v7-card .v7-card-t{margin:12px 0}
.v7-card-d{font-size:17px;line-height:1.55;color:var(--v-ink2);margin-bottom:24px}
.v7-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.v7-feat{display:grid;grid-template-columns:1.15fr 1fr;margin-bottom:32px}
.v7-feat>.v7-img{margin:24px;aspect-ratio:auto;min-height:380px}
.v7-feat>.v7-card-body{padding:48px 48px 48px 24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.v7-pill{font-size:11px;letter-spacing:.08em;color:var(--v-ink);border:1px solid var(--v-ink);border-radius:999px;padding:3px 10px;line-height:1.2}
/* Card tags (Oct 27): topic = dark gray pill, white text (#2a2a2a, as the Before/After pills) (what the case is about), status = outline pill (how it ended). No self-labels. */
.v7-tags{gap:8px}
.v7-pill.is-fill{background:#2a2a2a;border-color:#2a2a2a;color:#fff}

/* previously / about */
.v7-prev-img{margin-top:64px;aspect-ratio:1152/554;cursor:pointer}
.v7-about{display:grid;grid-template-columns:302px minmax(0,1fr);gap:64px;align-items:start}
.v7-portrait{width:151px;height:151px;border-radius:50%;background:var(--v-card)}
.v7-about-lbl{margin:32px 0 12px}

/* footer */
.v7-foot{display:block;padding:0;border-top:none;background:#000;color:#fff;font-family:var(--v-sans)}
.v7-foot-main{padding:var(--v-gap) var(--v-pad)}
.v7-foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px}
.v7-foot-h{font-family:var(--v-sans);font-weight:500;font-size:clamp(32px,3.4vw,48px);line-height:1.08;letter-spacing:-.03em}
.v7-foot-h em{font-family:var(--v-serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.v7-foot-p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.7)}
.v7-foot-grid>div>.v7-foot-p{margin:20px 0 36px;max-width:460px}
.v7-email{font-family:var(--v-serif);font-style:italic;font-size:24px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;transition:border-color .2s}
.v7-email:hover{border-color:#fff}
.v7-foot-small{font-size:13px;color:rgba(255,255,255,.7);margin-top:16px}
.v7-foot-small a{color:#fff}
.v7-eng{padding:28px 0;border-top:1px solid rgba(255,255,255,.18)}
.v7-eng:first-child{padding-top:0;border-top:none}
.v7-foot-lbl{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:8px}
.v7-eng-t{font-weight:500;font-size:20px;margin-bottom:8px}
.v7-signoff{border-top:1px solid rgba(255,255,255,.25);padding:28px var(--v-pad)}
.v7-signoff-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.v7-sig{font-family:var(--v-serif);font-style:italic;font-size:20px;color:rgba(255,255,255,.9)}
.v7-flinks{display:flex;gap:28px}
.v7-flinks button,.v7-flinks a{font-size:13px;color:rgba(255,255,255,.8);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--v-sans)}
.v7-flinks button:hover,.v7-flinks a:hover{color:#fff}


/* mobile menu */
.v7-menu-btn{display:none;font-family:var(--v-sans);font-weight:500;font-size:15px;color:var(--v-ink);background:none;border:1px solid #d4d4d4;border-radius:6px;padding:10px 14px;line-height:1;cursor:pointer;min-height:40px}
.v7-menu{position:fixed;inset:0;z-index:99;background:#fff;padding:96px var(--v-pad) 32px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s;font-family:var(--v-sans)}
.v7-menu.open{opacity:1;visibility:visible;transition:opacity .25s var(--ease),visibility 0s}
.v7-menu-in{height:100%;display:flex;flex-direction:column}
.v7-menu a.v7-menu-cta{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500;color:#fff;background:var(--v-ink);border-radius:6px;padding:14px 18px;margin-bottom:12px;text-decoration:none}
.v7-menu .v7-menu-links{position:static;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;background:none;border:none;z-index:auto}
.v7-menu-links a{display:block;text-decoration:none;font-family:var(--v-sans);font-weight:500;font-size:40px;letter-spacing:-.03em;line-height:1.1;color:var(--v-ink);background:none;border:none;border-bottom:1px solid var(--v-line);text-align:left;padding:18px 0;cursor:pointer;transform:translateY(8px);opacity:0;transition:transform .4s var(--ease),opacity .4s var(--ease)}
.v7-menu.open .v7-menu-links a{display:block;text-decoration:none;transform:none;opacity:1}
.v7-menu.open .v7-menu-links a:nth-child(2){transition-delay:.04s}
.v7-menu.open .v7-menu-links a:nth-child(3){transition-delay:.08s}
.v7-menu.open .v7-menu-links a:nth-child(4){transition-delay:.12s}
.v7-menu-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.v7-menu-email{font-family:var(--v-serif);font-style:italic;font-size:22px;color:var(--v-ink);text-decoration:none;border-bottom:1px solid #bdbdbd;padding:10px 0 2px}
.v7-menu-li{font-size:15px;color:var(--v-ink2);text-decoration:none;padding:12px 0}
html.v7-lock,html.v7-lock body{overflow:hidden}

/* footer tap targets */
.v7-flinks a{display:inline-flex;align-items:center;min-height:44px}
.v7-signoff{padding-top:16px;padding-bottom:16px}

/* responsive */
@media(max-width:1200px){:root{--v-pad:64px}}
@media(max-width:1100px){
  .v7-grid3{grid-template-columns:1fr;gap:24px}
  .v7-grid3>.v7-card,.v7-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;margin-bottom:0}
  .v7-feat{margin-bottom:24px}
  .v7-grid3>.v7-card>.v7-img,.v7-feat>.v7-img{margin:20px;aspect-ratio:4/3;min-height:0}
  .v7-grid3>.v7-card>.v7-card-body,.v7-feat>.v7-card-body{padding:28px 32px 28px 8px}
}
@media(max-width:1024px){
  .v7-about{grid-template-columns:1fr;gap:32px}
  .v7-split{grid-template-columns:1fr;gap:28px}
  .v7-foot-grid{grid-template-columns:1fr;gap:56px}
}
@media(max-width:768px){
  :root{--v-pad:20px;--v-gap:72px}
  .v7-nav{padding:14px var(--v-pad)}
  .v7-logo{display:inline-block;font-size:20px}
  .v7-nlinks>a,.v7-nlinks>a.v7-ncta{display:none}
  .v7-menu-btn{display:inline-flex;align-items:center}
  .v7-grid3>.v7-card,.v7-feat{display:block}
  .v7-hero{padding:120px var(--v-pad) 64px}
  .v7-sub{font-size:18px;margin-top:20px}
  .v7-stats{flex-direction:column;margin-top:48px;padding-top:0;border-top:none}
  .v7-stats>div,.v7-stats>div+div{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-left:none;border-top:1px solid var(--v-line)}
  .v7-stats dt{min-width:96px;font-size:28px}
  .v7-stats dd{margin-top:0}
  .v7-sec-work{padding-top:64px}
  .v7-sec-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:32px}
  .v7-grid3{grid-template-columns:1fr;gap:20px}
  .v7-card>.v7-img,.v7-feat>.v7-img,.v7-grid3>.v7-card>.v7-img{margin:16px 16px 0;aspect-ratio:4/3;min-height:0}
  .v7-card-body,.v7-feat>.v7-card-body,.v7-grid3>.v7-card>.v7-card-body{padding:24px 20px}
  .v7-portrait{width:112px;height:112px}
  .v7-card-t{font-size:28px}
  .v7-prev-img{margin-top:40px;aspect-ratio:4/3}
  .v7-flinks{gap:18px}
}

/* ════════ adaptive nav ════════
   js/site.js reads the background of the section behind the nav and sets
   data-tone: "light" (fill = that section's color, set inline), "dark"
   (black, white text, white CTA) or "clear" (over the smoke hero: no fill,
   no blur). No divider line in any tone; the color change does the work.
   Without JS there is no data-tone, so the original frosted nav applies. */
.v7-nav{transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .2s ease,border-color .2s,-webkit-backdrop-filter .2s,backdrop-filter .2s}
.v7-nav[data-tone]{border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.v7-nav[data-tone="clear"]{background-color:transparent!important}
.v7-nav .v7-logo,.v7-nav .v7-menu-btn{transition:color .2s,border-color .2s}
.v7-nav .v7-nlinks .v7-ncta{transition:opacity .2s,background-color .2s,color .2s}
/* clear: links go darker so they hold contrast over the gray clouds */
.v7-nav[data-tone="clear"] .v7-nlinks a:not(.v7-ncta),.v7-nav[data-tone="clear"] .v7-menu-btn{color:#333}
.v7-nav[data-tone="dark"] .v7-logo{color:#fff}
.v7-nav[data-tone="dark"] .v7-nlinks a,.v7-nav[data-tone="dark"] .v7-nlinks button{color:rgba(255,255,255,.7)}
.v7-nav[data-tone="dark"] .v7-nlinks a:not(.v7-ncta):hover{color:#fff}
.v7-nav[data-tone="dark"] .v7-nlinks .v7-ncta{background:#fff;color:#000}
.v7-nav[data-tone="dark"] .v7-menu-btn{color:#fff;border-color:rgba(255,255,255,.3)}
@media (prefers-reduced-motion:reduce){.v7-nav,.v7-nav .v7-logo,.v7-nav .v7-menu-btn,.v7-nav .v7-nlinks a,.v7-nav .v7-nlinks .v7-ncta{transition:none}}

/* ════════ real images on phones ════════
   Once a wide slot holds a real <img>, phones show the whole image at its own
   shape instead of cropping it to 4:3. Placeholders keep their 4:3 box. */
@media(max-width:768px){
  .v7-prev-img:has(>img){aspect-ratio:auto;padding:0}
  .v7-prev-img>img{position:static;display:block;width:100%;height:auto}
}

/* Frame slots (.is-frame): a transparent export that draws its own device or browser
   frames. The slot drops its corner radius so it doesn't shave the frames' own (tighter)
   corners. Opaque screenshots keep the 16px slot radius. */
.v7-img.is-frame{border-radius:0}
/* The frames' shadow comes from CSS, not the export: a baked-in shadow would be cut
   off at the slot edge. A filter is drawn outside the slot, so it isn't clipped. */
.v7-img.is-frame:has(>img){filter:drop-shadow(0 6px 16px rgba(0,0,0,.08))}
/* Card CTA alignment (Oct 27): in the three-card row, "Read case study" sits on the card bottom so the three line up. Desktop only (≤1024 the cards turn horizontal). */
@media(min-width:1025px){
  .v7-grid3>.v7-card{display:flex;flex-direction:column}
  .v7-grid3>.v7-card>.v7-card-body{flex:1;display:flex;flex-direction:column;align-items:flex-start}
  .v7-grid3>.v7-card>.v7-card-body>.v7-link{margin-top:auto}
}
/* Elsewhere on stacked layouts (Oct 27): the button follows the description, so the action comes after the explanation. */
@media(max-width:1024px){
  .v7-split{gap:0}
  .v7-split-l{display:contents}
  .v7-split-l .v7-meta{margin-top:12px}
  .v7-split>.v7-body{margin-top:28px}
  .v7-split-l .v7-btns{order:1;margin-top:28px}
}
/* Hide on scroll down, show on scroll up (Oct 27). Never hidden while the mobile menu is open. */
.v7-nav.is-hidden{transform:translateY(-100%)}
.v7-lock .v7-nav.is-hidden{transform:none}
/* Nav content aligns with the 1152px page column on wide screens (Oct 27); the bar itself stays full width, like the footer. At ≤1440 the 144px margin already matches. */
@media(min-width:1441px){.v7-nav{padding-left:calc((100% - 1152px)/2);padding-right:calc((100% - 1152px)/2)}}
/* Outline button on the black footer (Oct 27): white text, light outline. */
.v7-foot a.v7-btn-sec{color:#fff;border-color:rgba(255,255,255,.35)}
.v7-foot a.v7-btn-sec:hover{border-color:#fff}
.v7-eng .v7-btns{margin-top:24px}
/* Lock icon for links to the password-protected Gemini page (Oct 27): inline SVG, text colour, sits on the text baseline. */
.v7-lock-i{display:inline-block;vertical-align:-2px;margin-right:6px}
.v7-lock-i.is-after{margin:0 0 0 8px}
/* Buttons share one family and shape (Oct 27): the nav and phone-menu "Open for contracts" are actions, so Inter Medium like the page buttons; every button-shaped control uses a 12px radius. Navigation text links stay Instrument Sans. */
.v7-nlinks .v7-ncta,.v7-menu a.v7-menu-cta{font-family:var(--v-black);font-weight:500;border-radius:12px}
.v7-menu-btn{border-radius:12px}

/* Gemini unlock modal (Oct 27): built by js/site.js for links with data-gate. Same parts as the password page
   (work/gemini-locked.html), on a centered white card at every width (keyboard-safe on phones). */
.v7-gate{border:0;padding:0;margin:auto;width:min(560px,calc(100% - 40px));max-height:calc(100% - 40px);overflow:auto;border-radius:16px;box-shadow:0 24px 64px -16px rgba(0,0,0,.35)}
.v7-gate::backdrop{background:rgba(0,0,0,.55)}
.v7-gate[open]{animation:v7GateIn .2s ease-out}
@keyframes v7GateIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.v7-gate[open]{animation:none}}
.v7-gate-in{position:relative;padding:48px}
.v7 .v7-gate-x{position:absolute;top:16px;right:16px;font-family:var(--v-sans);font-weight:500;font-size:15px;color:var(--v-ink);background:transparent;border:1px solid #d4d4d4;border-radius:12px;padding:8px 14px;min-height:40px;line-height:1;cursor:pointer;transition:border-color .2s}
.v7 .v7-gate-x:hover{border-color:var(--v-ink)}
.v7-gate-eb{padding-right:88px}
.v7-gate .v7-card-t{margin-top:16px}
.v7-gate-intro{font-size:17px;line-height:1.55;color:var(--v-ink2);margin-top:12px}
.v7-gate-form{margin-top:32px}
.v7-gate-form .v7-lbl{margin-bottom:12px}
.v7-gate-row{display:flex;gap:12px;flex-wrap:wrap}
.v7-gate-row input{flex:1 1 220px;min-width:0;font-family:var(--v-sans);font-size:16px;line-height:22px;padding:13px 16px;border:1px solid #d4d4d4;border-radius:12px;background:#fff;color:var(--v-ink);transition:border-color .2s}
.v7-gate-row input:hover,.v7-gate-row input[aria-invalid="true"]{border-color:var(--v-ink)}
.v7-gate-row input:focus-visible,.v7-gate-x:focus-visible{outline:2px solid var(--v-ink);outline-offset:2px}
.v7 .v7-gate-row .v7-btn{cursor:pointer}
.v7 .v7-gate-row .v7-btn:disabled{opacity:.6;cursor:default}
.v7-gate-err{margin-top:12px;font-size:15px;line-height:1.5;color:var(--v-ink);font-weight:500}
.v7-gate-ask{margin-top:32px;padding-top:24px;border-top:1px solid var(--v-line);font-size:17px;line-height:1.6;color:var(--v-ink2)}
.v7 .v7-gate-ask a.v7-link{display:inline;font:inherit;color:var(--v-ink);border-bottom:0;padding-bottom:0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(max-width:768px){.v7-gate-in{padding:32px 24px}.v7 .v7-gate-x{top:12px;right:12px}}
@media(max-width:479px){.v7-gate-row .v7-btn{flex:1 1 100%}}