/* Service home — light ground on GreyTomato design-system tokens (values identical to the design system). */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("fonts/bricolage-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("fonts/bricolage-latin.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:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/jakarta-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/jakarta-latin.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:"Figtree";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/figtree-800-latin.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}

:root{
  /* Design-system tokens used here */
  --graphite-0:#ffffff;--graphite-50:#f6f6f7;--graphite-100:#eeeef0;--graphite-150:#e5e5e8;--graphite-200:#d7d7db;--graphite-300:#b9babf;--graphite-500:#6e6f76;--graphite-700:#26272a;--graphite-800:#1c1d1f;--graphite-900:#141416;--graphite-950:#0c0c0d;
  --rose-800:#8a2626;--amber-800:#7a560b;
  --font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --font-wordmark:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --text-md:14px;--leading-normal:1.5;
  --tracking-tighter:-0.03em;--tracking-caps:0.08em;--tracking-wordmark:-0.02em;
  --radius-sm:7px;--radius-md:10px;--radius-lg:14px;--control-lg:44px;
  --shadow-xs:0 1px 1px rgba(21,21,24,.04);--shadow-lg:0 12px 32px -6px rgba(21,21,24,.14),0 2px 6px rgba(21,21,24,.06);--shadow-xl:0 24px 64px -12px rgba(21,21,24,.24),0 4px 12px rgba(21,21,24,.08);
  --ring-focus:0 0 0 3px color-mix(in srgb,var(--gz-accent) 30%,transparent);--ring-focus-strong:0 0 0 2px var(--graphite-0),0 0 0 4px var(--gz-accent);
  /* Page */
  --gz-ease:cubic-bezier(.16,1,.3,1);
  --gz-pad:clamp(20px,5vw,88px);
  --gz-top-pad:clamp(18px,3vh,32px);
  --gz-ground:var(--graphite-50);--gz-ink:var(--graphite-950);--gz-dim:var(--graphite-500);

  /* The accent is the blue of the car in the photo. Its mid tone is too light for small text
     on the light ground, so small text takes the darker tone from the same car. */
  --gz-accent:#478bae;--gz-accent-soft:#c8dce7;--gz-accent-text:#276883;
  --gz-label:12.5px;
}

/* Theme colours are registered so the intro can ease from the dark ground to the light one */
@property --gz-ground{syntax:"<color>";inherits:true;initial-value:#f6f6f7}
@property --gz-ink{syntax:"<color>";inherits:true;initial-value:#0c0c0d}
@property --gz-dim{syntax:"<color>";inherits:true;initial-value:#6e6f76}
/* Intro: open on the dark space ground (the original dark design), turn light as the warp begins */
.gz-night{--gz-ground:var(--graphite-950);--gz-ink:var(--graphite-50);--gz-dim:var(--graphite-300)}
.gz-m{--gz-dawn:3s cubic-bezier(.65,0,.35,1);transition:--gz-ground var(--gz-dawn),--gz-ink var(--gz-dawn),--gz-dim var(--gz-dawn)}
.gz-night .gz-logo .wm{filter:brightness(0) invert(1)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--gz-ground);color:var(--gz-ink);font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
::selection{background:var(--gz-accent-soft);color:var(--graphite-950)}
a{color:var(--gz-ink);text-decoration-thickness:1px;text-underline-offset:.25em}
a:hover{color:var(--gz-accent-text)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--ring-focus-strong);border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Stage */
.gz{position:relative;min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;isolation:isolate}
.gz-stars,.gz-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gz-stars{z-index:0}
.gz-lines{z-index:1;overflow:visible}
.gz-lines .paint{transition:translate 1.2s var(--gz-ease)}
.gz-m:not(.gz-drawn) .gz-lines{visibility:hidden}
.gz-lines .line{fill:none;stroke:var(--gz-accent);stroke-width:var(--paint,6px);stroke-dasharray:1 1}
.gz-glow{position:absolute;z-index:1;width:720px;height:720px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--gz-accent) 14%,transparent),transparent);left:var(--mx,30%);top:var(--my,45%);transform:translate(-50%,-50%);transition:left 1.2s var(--gz-ease),top 1.2s var(--gz-ease)}
.gz-grain{position:fixed;inset:-100%;z-index:4;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.gz-m .gz-grain{animation:gz-grain .7s steps(1) infinite}
@keyframes gz-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,6%)}80%{transform:translate(5%,-2%)}}

/* Top bar */
.gz-top,.gz-bot{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:var(--gz-top-pad) var(--gz-pad)}
.gz-logo{display:flex;align-items:center;text-decoration:none}
.gz-logo .wm{height:clamp(18px,1.9vw,24px);width:auto;display:block;transition:filter 3s cubic-bezier(.65,0,.35,1)}
.gz-contact{display:flex;align-items:center;gap:8px}
/* Signed out: logo in the top-right corner (signed in, see below). The empty
   slot takes no room while signed out, and min-height keeps the row from growing when the 28px
   avatar arrives. */
.gz-top{justify-content:flex-end;gap:14px}
.gz-top .gz-logo{min-height:28px}
.gz-top .gz-contact{order:-1}
.gz-top .gz-contact:has(> .gz-login:empty){display:none}
/* Signed in: logo back on the left, avatar in the top-right corner */
.gz-top:has(.gz-avatar){justify-content:space-between}
.gz-top:has(.gz-avatar) .gz-contact{order:0}
/* No Popover API (Safari <17, Firefox <125): hide the "?" rather than show a dead button; the purpose line stays in the footer */
@supports not selector(:popover-open){.gz-q,.gz-pop,.gz-me{display:none}}

.gz-avatar{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--gz-accent-soft);color:var(--graphite-800);font:600 13px/1 var(--font-sans);display:inline-grid;place-items:center;overflow:hidden;cursor:pointer;flex:none;text-decoration:none}
.gz-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.gz-avatar:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:50%}

/* position:fixed, not absolute: a popover is promoted to the top layer, where its containing
   block for position:absolute is the initial containing block (the viewport), not its nearest
   positioned DOM ancestor — so top/right are computed against the header's own tokens instead. */
.gz-me{position:fixed;top:calc(var(--gz-top-pad) + 46px);right:var(--gz-pad);left:auto;bottom:auto;margin:0;width:220px;max-width:calc(100vw - 32px);padding:4px;background:var(--graphite-0);border:1px solid var(--graphite-150);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(6px) scale(.98);transition:opacity .2s var(--gz-ease),transform .2s var(--gz-ease),overlay .2s allow-discrete,display .2s allow-discrete}
.gz-me:popover-open{opacity:1;transform:none}
@starting-style{.gz-me:popover-open{opacity:0;transform:translateY(6px) scale(.98)}}
.gz-me::backdrop{background:transparent}
.gz-me-name{margin:0;padding:8px 10px 0;font:600 16px/1.3 var(--font-sans);color:var(--graphite-900)}
.gz-me-mail{margin:2px 0 8px;padding:0 10px;font:14px/1.3 var(--font-sans);color:var(--graphite-500)}
.gz-me-sep{height:1px;margin:4px -4px;background:var(--graphite-100)}
.gz-me-item{display:flex;align-items:center;width:100%;height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;font:500 16px/1 var(--font-sans);color:var(--graphite-900);text-decoration:none;cursor:pointer;text-align:left;box-sizing:border-box}
.gz-me-item:hover{background:var(--graphite-100)}

/* Main */
/* Desktop: copy above sign-in on the left, centred as a pair against the photo on the right.
   Phones: copy, photo with its note, then sign-in. */
.gz-main{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy visual" "cta visual";column-gap:clamp(24px,5vw,80px);row-gap:clamp(20px,3.5vh,32px);align-items:center;padding:0 var(--gz-pad)}
.gz-copy{grid-area:copy;align-self:end}
.gz-head{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:clamp(16px,2.2vw,32px)}
.gz-orb{position:relative;width:var(--orb,clamp(70px,10.2vw,144px));aspect-ratio:1}
.gz-orb img{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform}
.gz-ident{display:grid;justify-items:start}
.gz-title{margin:0;font-family:var(--font-wordmark);font-weight:800;line-height:1;letter-spacing:var(--tracking-wordmark);font-size:clamp(56px,8.4vw,120px);color:var(--graphite-950);white-space:nowrap} /* stays dark through the dark intro */
.gz-rule{width:clamp(36px,4.2vw,60px);height:clamp(4px,.4vw,6px);background:var(--gz-accent);margin-top:clamp(10px,1.4vw,18px);transform-origin:left}
.gz-tag{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,42px);line-height:1.05;letter-spacing:var(--tracking-tighter);margin:clamp(16px,3vh,28px) 0 0;color:var(--gz-ink)}
.gz-tag .ac,.gz-title .ac{color:var(--gz-accent)}
.gz-tag .ln{display:block;text-wrap:balance;overflow-wrap:anywhere}
.gz-tag.is-welcome .ln{animation:gz-in .8s var(--gz-ease) both}
.gz-m:not(.gz-go) .gz-tag.is-welcome .ln{animation-play-state:paused} /* wait for the splash to lift */
@keyframes gz-in{from{opacity:0;transform:translateY(6px)}}
.gz-note{margin:0;max-width:40ch;justify-self:center;text-align:center;color:var(--gz-dim);font-size:clamp(15px,1.1vw,16px);text-wrap:pretty}
[data-sand] .w{display:inline-block;white-space:nowrap}
[data-sand] .ch{display:inline-block}
/* Photo: the whole square image with a soft transparent rim, its note underneath */
.gz-visual{grid-area:visual;justify-self:center;display:grid;gap:4px;width:min(100%,70dvh,740px)}
.gz-fig{position:relative;margin:0;width:100%;aspect-ratio:1;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.6) 4%,#000 10%,#000 90%,rgba(0,0,0,.6) 96%,transparent),linear-gradient(180deg,transparent,rgba(0,0,0,.6) 4%,#000 10%,#000 90%,rgba(0,0,0,.6) 96%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.6) 4%,#000 10%,#000 90%,rgba(0,0,0,.6) 96%,transparent),linear-gradient(180deg,transparent,rgba(0,0,0,.6) 4%,#000 10%,#000 90%,rgba(0,0,0,.6) 96%,transparent);mask-composite:intersect;will-change:translate}
.gz-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Sign-in: the design system's large primary and secondary buttons (as on the account page) */
.gz-cta{grid-area:cta;align-self:start;display:grid;justify-items:start;gap:12px}
.gz-btns{display:flex;flex-wrap:wrap;gap:10px}
.gt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-lg);padding:0 18px;border-radius:var(--radius-md);border:1px solid transparent;font:500 16px/1 var(--font-sans);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;user-select:none;text-decoration:none;transition:background .12s cubic-bezier(.2,0,0,1),border-color .12s,box-shadow .12s,transform .12s,color .12s}
.gt-btn svg{flex:none}
.gt-btn:focus-visible{border-radius:var(--radius-md)}
.gt-btn:active:not(:disabled){transform:scale(.98)}
.gt-btn:disabled{cursor:not-allowed;opacity:.45}
.gt-btn--primary{background:var(--graphite-700);color:var(--graphite-0);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--shadow-xs)}
.gt-btn--primary:hover:not(:disabled){background:var(--graphite-800);color:var(--graphite-0)}
.gt-btn--secondary{background:var(--graphite-0);color:var(--graphite-900);border-color:var(--graphite-200);box-shadow:var(--shadow-xs)}
.gt-btn--secondary:hover:not(:disabled){background:var(--graphite-50);border-color:var(--graphite-300);color:var(--graphite-900)}
.gz-msg{margin:0;max-width:44ch;color:var(--gz-dim);font-size:15px;line-height:1.5}
.gz-msg:empty{display:none}
.gz-msg.is-danger{color:var(--rose-800)}
.gz-msg.is-warning{color:var(--amber-800)}

/* Footer */
/* Purpose line, then the apps row: under the sign-in buttons, not in the footer */
.gz-foot{display:grid;justify-items:start;gap:10px;margin-top:clamp(8px,2vh,20px)}
.gz-purpose{margin:0;max-width:60ch;color:var(--gz-dim);font-size:15px;line-height:1.5;text-wrap:pretty}
/* Footer: one row, vertically centred. "?" (About) in the corner on the left, then the side: the
   email, and Terms · Privacy · © pushed to the right edge. Up to 600px the side stacks the email
   above the legal links, right-aligned, and the two parts stay centred on each other.
   --gz-corner-h sizes the "?" glyph box (the popover's position below is measured from it). */
.gz-bot{flex-wrap:nowrap}
.gz-side{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-width:0;font-size:var(--gz-label)}
.gz-legal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 18px;font-size:var(--gz-label);line-height:1.4;color:var(--gz-dim);min-width:0}
.gz-legal>*{white-space:nowrap}
.gz-legal a{color:var(--gz-dim);text-decoration:none}
.gz-legal a:hover{color:var(--gz-accent-text)}
.gz-corner{display:flex;align-items:center;gap:14px;min-width:0;font-size:var(--gz-label);--gz-corner-h:calc(var(--gz-label) * 2.8 + 6px)}
.gz-mail{display:inline-flex;align-items:center;font-weight:600;text-decoration:none;transition:transform .5s var(--gz-ease)}
.gz-side .gz-mail,.gz-side .gz-mail:hover{color:var(--gz-accent-text)}
.gz-mail .roll{position:relative;display:block;overflow:hidden;height:1.4em;line-height:1.4em;white-space:nowrap}
.gz-mail .roll>span{display:block;transition:transform .55s var(--gz-ease)}
.gz-mail .roll>span+span{position:absolute;inset:0;transform:translateY(100%);user-select:none;-webkit-user-select:none}
.gz-mail:hover .roll>span:first-child{transform:translateY(-100%)}
.gz-mail:hover .roll>span+span{transform:none}

/* "?" (About): first in the footer corner, its glyph box sized by --gz-corner-h (above) and
   centred on the row. flex:none keeps it from shrinking on a narrow row. */
.gz-q{flex:none;width:var(--gz-corner-h);height:var(--gz-corner-h);padding:0;border:0;background:none;color:var(--gz-accent);font-family:var(--font-wordmark);font-weight:800;font-size:calc(var(--gz-corner-h) * .78);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .3s,transform .4s var(--gz-ease)}
.gz-q:hover{color:var(--gz-ink);transform:rotate(-12deg)}
/* Separate rule: browsers without :popover-open drop a whole selector list that names it */
body:has(#gz-about:popover-open) .gz-q{color:var(--gz-ink);transform:rotate(-12deg)}

/* Popover — native top layer, so position:fixed against the viewport (a popover's containing
   block for position:absolute is the initial containing block once promoted to the top layer,
   not any DOM ancestor). Opens upward from the footer corner: bottom is measured from the page's
   own bottom padding plus the "?" button's own height plus a 14px gap (the footer is one row and
   "?" is its tallest item, so its bottom sits on the footer's padding), and left lines up with
   "?"'s own left edge (both the popover and the corner are inset by the same --gz-pad). The tip sits on the popover's bottom
   edge, centred under "?" (half its square width, inset from that shared left edge). */
.gz-pop{position:fixed;top:auto;bottom:calc(var(--gz-top-pad) + var(--gz-corner-h) + 14px);left:var(--gz-pad);right:auto;margin:0;border:0;overflow:visible;width:min(320px,82vw);background:var(--gz-ink);color:var(--gz-ground);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:16px 18px;font-size:15px;line-height:1.55;opacity:0;transform:translateY(6px) scale(.98);transform-origin:30px 100%;transition:opacity .28s var(--gz-ease),transform .28s var(--gz-ease),overlay .28s allow-discrete,display .28s allow-discrete}
.gz-pop:popover-open{opacity:1;transform:none}
@starting-style{.gz-pop:popover-open{opacity:0;transform:translateY(6px) scale(.98)}}
.gz-pop::backdrop{background:transparent}
.gz-pop::before{content:"";position:absolute;bottom:-6px;left:calc(var(--gz-corner-h) / 2 - 6px);width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
.gz-pop p{margin:0}
@media (max-width:600px){.gz-side{flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}}
.gz-pop p+p{margin-top:10px;color:var(--graphite-300);font-size:13px}

/* Splash */
.gz-sp{display:none}
.gz-splash .gz-sp{display:block;position:fixed;inset:0;z-index:10;cursor:pointer}
.gz-sp .bg{position:absolute;inset:0;background:var(--gz-ground)}
.gz-sp .ball{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;background:url("images/gt_sphere.png?v=2") center/cover;transform:scale(0)}
.gz-sp .ball i{position:absolute;inset:0;border-radius:50%;background:var(--gz-accent);opacity:0}

/* Motion states: gz-m = motion on, gz-go = reveal */
.gz-m .fx{opacity:0;transform:translateY(14px);transition:opacity 1.4s var(--gz-ease),transform 1.4s var(--gz-ease)}
.gz-m .ch{opacity:0;filter:blur(var(--b,5px));transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(var(--s,1))}
.gz-go .ch{opacity:1;filter:blur(0);transform:none;transition:opacity .9s ease var(--d),filter 1.5s var(--gz-ease) var(--d),transform 2s var(--gz-ease) var(--d)}
.gz-m .smoke .ch{opacity:0;filter:blur(var(--b));transform:translate(var(--dx),var(--dy));text-shadow:0 0 18px color-mix(in srgb,var(--gz-accent) 70%,transparent)}
.gz-go .smoke .ch{opacity:1;filter:blur(0);transform:none;text-shadow:0 0 0 transparent;transition:opacity 2s ease var(--d),filter 2.6s var(--gz-ease) var(--d),transform 3.2s var(--gz-ease) var(--d),text-shadow 3.4s ease var(--d)}
.gz-m .gz-rule{transform:scaleX(0)}
.gz-go .gz-rule{transform:none;transition:transform 1.5s var(--gz-ease) var(--rd,1.3s)}
.gz-m .gz-orb img{opacity:0}
.gz-go .gz-orb img{opacity:1}
.gz-m .gz-fig{opacity:0;filter:blur(18px) brightness(.5);transform:perspective(900px) translateZ(-2600px);transition:opacity 1.6s ease var(--fd,0s),filter 3s var(--gz-ease) var(--fd,0s),transform 4.2s cubic-bezier(.22,.9,.28,1) var(--fd,0s),translate 1.2s var(--gz-ease)}
.gz-m .gz-stars{opacity:0;transition:opacity 2s ease .3s}
.gz-go .fx{transform:none;opacity:1}
.gz-go .gz-fig{opacity:1;filter:none;transform:perspective(900px) translateZ(0)}
.gz-go .gz-stars{opacity:1}
.gz-go .d1{transition-delay:.5s}.gz-go .d4{transition-delay:min(var(--fd4,0s),1.5s)}.gz-go .d5{transition-delay:var(--fd5,0s)}

@media (max-width:860px){
  .gz-main{grid-template-columns:1fr;grid-template-areas:"copy" "visual" "cta";padding-top:12px;padding-bottom:24px}
  .gz-visual{width:min(100%,60dvh)}
  .gz-cta,.gz-btns{justify-items:stretch;align-items:stretch}
  .gz-btns{flex-direction:column}
  .gz-mail .roll{max-width:46vw}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}