/* ── Webflow embed shim ──
   Webflow wraps every Code Embed in <div class="w-embed">. display:contents
   removes those wrappers from layout, so the sections sit in the body's flow
   exactly as in homepage/index.html — the sticky nav in particular needs the
   body, not a wrapper, as its scrolling container. Webflow's own clearfix
   pseudo-elements on the wrapper are switched off for the same reason. */
.w-embed{display:contents}
.w-embed::before,.w-embed::after{display:none}
/* Webflow's stylesheet styles BARE elements — p, h1-h3, figure, blockquote,
   ul/ol, a — at element specificity (p{margin-bottom:10px},
   h3{font-size:34px;font-family:Newakefont Regular}, blockquote{border-left:
   5px solid #e2e2e2;padding:10px 20px}, a{transition:all .3s}), which beats
   this page's universal *{margin:0;padding:0} reset. Restate what the page
   assumes at the same specificity: the reset, and the browser defaults the
   page's own rules build on. Class rules on both sides are untouched. */
h1,h2,h3,h4,h5,h6,p,figure,figcaption,blockquote,ul,ol,li{margin:0;padding:0}
h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.17em}h4{font-size:1em}
h1,h2,h3,h4{line-height:inherit;font-family:inherit;color:inherit}
blockquote{border:0;font-size:inherit;line-height:inherit;background:none}
a{transition:none}
/* Webflow gives form controls font:inherit, so a button inherits the body's
   1.6 line-height where the browser default is "normal" — the country panel's
   "see all brands" button grew 10px. Restate the browser defaults. */
button,input,select,textarea{font-size:13.3333px;line-height:normal}
/* Webflow's site stylesheet sets a medium (500) weight at the root, which
   every element here that leaves its weight to inheritance would pick up. */
html,body{font-weight:400}
/* Webflow's Body (All pages) class, if anyone ever applies it, must not
   restyle this page: the page's own body rule again, at class specificity. */
body[class]{font-family:Montserrat,sans-serif;color:var(--body);background:#fff;font-size:16px;line-height:1.6;font-weight:400}


/* Licensed Newake (Indieground web license). Served from machines.gifted.co because
   the Spaces bucket sends no Access-Control-Allow-Origin and font fetches are CORS-checked. */
@font-face{font-family:'Newake';src:url('https://machines.gifted.co/fonts/Newake-Font-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
  --red:#FA2357; --red-dark:#D8173E; --maroon:#560024; --ink:#171214;
  --body:#604f52; --muted-sm:#7E7173; --muted-lg:#998e90;
  --tint-pink:#f9f4f5; --tint-rose:#f0e6e8; --tint-peach:#ffe5dd; --tint-red:#ffe4ea;
  --ice:#E5F5FF; --frost:#BFE8F7; --glacier:#AAD6E2; --red-ice:#FFD6E1; --rose-mist:#EFB3C4;
  --pill-border:#eadfe3; --card-border:rgba(86,0,36,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Montserrat,sans-serif;color:var(--body);background:#fff;overflow-x:hidden;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2{font-family:'Newake',Montserrat,sans-serif;font-weight:400;color:var(--ink);font-synthesis:none;font-synthesis-weight:none}
h3{font-weight:700;color:var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

.gh-wrap{max-width:1310px;margin:0 auto;padding:0 40px}
section{padding:110px 0}

/* ── eyebrow + type scale ── */
.gh-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
.gh-eyebrow::before{content:'';width:18px;height:2px;background:var(--red);border-radius:2px}
.gh-h2{font-size:clamp(36px,4.2vw,54px);line-height:1.08;letter-spacing:-.02em;max-width:19ch}
.gh-lede{font-size:18px;line-height:1.65;max-width:60ch;margin-top:18px}
.gh-center{text-align:center}
.gh-center .gh-h2,.gh-center .gh-lede{margin-left:auto;margin-right:auto}
.gh-center .gh-eyebrow::after{content:'';width:18px;height:2px;background:var(--red);border-radius:2px}

/* ── buttons & links ── */
.gh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:100px;padding:16px 32px;font:600 16px Montserrat,sans-serif;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;border:0}
.gh-btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(250,35,87,.25)}
.gh-btn-primary:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 14px 34px rgba(250,35,87,.32)}
.gh-btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--pill-border)}
.gh-btn-secondary:hover{transform:translateY(-1px);border-color:#d9c9cf}
.gh-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--red);transition:gap .15s ease}
.gh-arrow:hover{gap:10px}

/* ── reveal on scroll ── */
html.gh-js .gh-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
html.gh-js .gh-reveal.gh-in{opacity:1;transform:none}
html.gh-js .gh-reveal[data-delay="1"]{transition-delay:.08s}
html.gh-js .gh-reveal[data-delay="2"]{transition-delay:.16s}
html.gh-js .gh-reveal[data-delay="3"]{transition-delay:.24s}
html.gh-js .gh-reveal[data-delay="4"]{transition-delay:.32s}

/* ── promo strip ──
   Reserve the strip's height HERE, in the page's own CSS, so the space exists
   before the embed's feed lands and nothing below it moves. Kept above the
   "── nav ──" marker deliberately: site/sync-homepage.js replaces everything
   between that marker and "── hero ──" from site/tokens.js on every build. */
/* No min-height on #gifted-banner. That container is Webflow's, not ours —
   it lives inside home_total_header above the nav, and the banner script sizes
   it. These rules reserved 100px/132px for a container this page used to own;
   against Webflow's element the mobile figure over-reserved by 34px and left a
   band of dead white space between the strip and the navbar. Same rule as the
   nav and the footer: this stylesheet does not size Webflow's chrome. */

/* ── nav ── */
/* ══════════════════════════════════════════════════════════════════════════
   NAV — the homepage's bar, with the leaf pages restored underneath it.
   The bar itself is byte-for-byte the homepage's rules; the .gh-dd* block is
   the only addition, and it is inert on the homepage because that page emits
   no panels.
   ══════════════════════════════════════════════════════════════════════════ */
.gh-nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(86,0,36,.06);transition:box-shadow .3s ease}
.gh-nav-in{display:flex;align-items:center;gap:28px;height:72px;transition:height .3s ease}
/* Nothing in the bar wraps. Three right-hand actions plus six items is a
   full bar at 1440, and a wrapped "Use Cases" reads as broken. */
.gh-navitem>a,.gh-nav-login,.gh-nav .gh-btn{white-space:nowrap}
.gh-nav-slim .gh-nav-in{height:58px}
.gh-nav-slim{box-shadow:0 10px 30px rgba(86,0,36,.07)}
.gh-nav-logo img{height:30px;width:auto}
/* align-self:stretch so a nav item is the full height of the bar. Without it
   the item is only as tall as its text, and a panel positioned at top:100%
   opens *inside* the bar rather than under it. */
.gh-nav-links{display:flex;gap:24px;font-size:14.5px;font-weight:600;color:var(--ink);align-self:stretch;align-items:center}
.gh-nav-links a:hover{color:var(--red)}
.gh-nav-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.gh-nav-login{font-size:14.5px;font-weight:600;color:var(--ink)}
.gh-nav-login:hover{color:var(--red)}
.gh-nav .gh-btn{padding:12px 24px;font-size:14.5px}
/* Three right-hand actions: Log in (text), Talk to an expert (ghost pill),
   Start gifting free (red pill). The ghost pill is the B2B path and it was
   buried in dropdown promos. */
.gh-nav .gh-btn-secondary{padding:10px 18px;font-size:13.5px;box-shadow:none}
.gh-nav .gh-btn-primary{padding:11px 22px;font-size:14px}
@media (max-width:1199px){.gh-nav-ghost{display:none}}
/* current section: a red dot under the top-level item for the section the
   page lives in. Cheap, orienting, and the live site never had it. */
.gh-navitem>a{position:relative}
.gh-navitem.gh-current>a::before{content:'';position:absolute;left:50%;bottom:-9px;width:5px;height:5px;border-radius:50%;background:var(--red);transform:translateX(-50%)}
.gh-navitem.gh-flat.gh-current>a::before{left:50%}
.gh-nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.gh-nav-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
/* ── the phone bar and its menu ──
   Rebuilt quieter (Andy, 2026-10-09: "too big … clunky … make an elegant,
   Apple-level version"). The bar is 60px with a 23px logo and a compact pill;
   the menu is a calm list, section names in text weight rather than the
   display face, small icon tiles, tight link rows, and one primary action at
   the bottom with Log in and Talk to an expert as quiet links beneath it.
   While it is open the bar is pinned to the top of the screen and the page
   behind is frozen (NAV_JS), so the logo and the close button can never
   scroll away; iOS ignores overflow:hidden on a touch scroll, which is how the
   first version left people stuck. */
@media (max-width:991px){
  .gh-nav-links,.gh-nav-ghost,.gh-nav-login{display:none}
  .gh-nav-in{height:60px;gap:12px}
  .gh-nav-slim .gh-nav-in{height:56px}
  .gh-nav-logo img{height:23px}
  .gh-nav-right{gap:6px}
  .gh-nav .gh-nav-right .gh-btn-primary{padding:8px 14px;font-size:12.5px;box-shadow:0 6px 16px rgba(250,35,87,.22)}
  .gh-nav-burger{display:block;padding:10px 4px 10px 8px;margin-right:-4px}
}
.gh-nav-burger span{width:20px;height:1.8px;margin:5px 0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.gh-nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.gh-nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.gh-nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
html.gh-mm-open .gh-nav{position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:none;border-bottom-color:rgba(86,0,36,.08)}
html.gh-mm-open,html.gh-mm-open body{overflow:hidden;overscroll-behavior:none}
.gh-nav-menu{display:none;position:fixed;left:0;right:0;bottom:0;top:var(--gh-mm-top,60px);z-index:199;flex-direction:column;background:#fff}
.gh-nav-menu.gh-nav-menu-on{display:flex;animation:ghMmIn .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes ghMmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gh-mm-scroll{position:relative;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 20px 16px}
.gh-nav-menu a:not(.gh-btn){color:var(--ink)}
/* sections */
.gh-mm-sec,.gh-mm-flat{border-bottom:1px solid rgba(86,0,36,.07)}
.gh-mm-sec summary,.gh-mm-flat{list-style:none;display:flex;align-items:center;gap:12px;min-height:54px;padding:6px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gh-mm-sec summary::-webkit-details-marker{display:none}
.gh-mm-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--t,var(--tint-red));color:var(--maroon)}
.gh-mm-ic svg{width:16px;height:16px;stroke:currentColor}
.gh-mm-t{flex:1;font:600 16.5px/1.2 Montserrat,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.gh-mm-chev{flex:none;width:18px;height:18px;position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.gh-mm-chev::after{content:'';position:absolute;left:5px;top:3px;width:7px;height:7px;border-right:1.6px solid var(--muted-sm);border-bottom:1.6px solid var(--muted-sm);transform:rotate(45deg)}
.gh-mm-sec[open] .gh-mm-chev{transform:rotate(180deg)}
.gh-mm-sec[open] .gh-mm-t{color:var(--red)}
.gh-mm-go{flex:none;width:18px;font-style:normal;font-size:15px;color:var(--muted-sm);text-align:center}
.gh-mm-body{padding:0 0 14px 42px;animation:ghMmIn .22s ease both}
.gh-mm-h{margin:10px 0 2px;font:700 11px Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-sm)}
/* links */
.gh-mm-list{display:grid}
.gh-mm-link{display:flex;align-items:center;gap:11px;padding:7px 0;border-radius:10px}
.gh-mm-link:active{background:var(--tint-pink)}
.gh-mm-dot{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--maroon)}
.gh-mm-dot img{width:16px;height:16px;object-fit:contain}
.gh-mm-dot svg{width:14px;height:14px;stroke:currentColor}
.gh-mm-lab{min-width:0}
.gh-mm-lab b{display:block;font:600 14.5px/1.25 Montserrat,sans-serif;color:var(--ink)}
.gh-mm-lab span{display:block;font-size:12px;font-weight:500;line-height:1.3;color:var(--muted-sm);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the Catalog's photographs, small */
.gh-mm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 4px}
.gh-mm-card{display:block}
.gh-mm-card-im{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--tint-pink)}
.gh-mm-card-im img{width:100%;height:100%;object-fit:cover;display:block}
.gh-mm-card b{display:block;font:600 12.5px/1.25 Montserrat,sans-serif;margin-top:6px}
.gh-mm-card>span:last-child{display:none}
/* Integrations' marks */
.gh-mm-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
.gh-mm-logos a{display:flex;align-items:center;gap:9px;padding:7px 0;font:600 13.5px Montserrat,sans-serif}
.gh-mm-logos img{width:20px;height:20px;border-radius:50%;flex:none}
.gh-mm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.gh-mm-chips a{padding:6px 11px;border-radius:100px;background:var(--tint-pink);font:600 12px Montserrat,sans-serif}
/* the featured page and the promo, as single quiet rows */
.gh-mm-feature{display:flex;align-items:center;gap:12px;margin-top:10px;padding:8px;border-radius:14px;background:#FBF6F7}
.gh-mm-feature img{width:56px;height:42px;border-radius:9px;object-fit:cover;flex:none}
.gh-mm-feature em{display:block;font:700 10.5px Montserrat,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.gh-mm-feature b{display:block;font:600 13.5px/1.3 Montserrat,sans-serif;margin-top:2px}
.gh-mm-promo{display:block;margin-top:10px;padding:12px 14px;border-radius:14px;background:#FBF6F7}
.gh-mm-promo b{display:block;font:600 13.5px Montserrat,sans-serif}
.gh-mm-promo span{display:none}
.gh-mm-promo em{display:block;font:600 12.5px Montserrat,sans-serif;font-style:normal;color:var(--red);margin-top:3px}
.gh-mm-all{display:inline-block;margin:10px 0 0;font:600 13.5px Montserrat,sans-serif;color:var(--red)!important}
/* the footer: one primary action, the rest as quiet links */
.gh-mm-foot{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid rgba(86,0,36,.08)}
.gh-nav-menu .gh-mm-foot .gh-mm-start{display:flex;align-items:center;justify-content:center;height:48px;padding:0 16px;font-size:15px;border-radius:100px}
.gh-mm-quiet{display:flex;justify-content:center;gap:22px}
.gh-mm-quiet a{font:600 14px Montserrat,sans-serif;padding:6px 2px}
@media (min-width:992px){.gh-nav-menu,.gh-nav-menu.gh-nav-menu-on{display:none}}
@media (prefers-reduced-motion:reduce){.gh-nav-menu.gh-nav-menu-on,.gh-mm-body{animation:none}.gh-nav-burger span{transition:none}}

/* dropdowns */
.gh-navitem{position:relative;display:flex;align-items:center;align-self:stretch}
.gh-navitem>a{display:inline-flex;align-items:center;gap:6px}
.gh-navitem>a::after{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .2s ease,opacity .2s ease}
.gh-navitem.gh-flat>a::after{display:none}
.gh-navitem.gh-dd-on>a{color:var(--red)}
.gh-navitem.gh-dd-on>a::after{transform:rotate(-135deg) translateY(-2px);opacity:1}
/* Anchored to the item's left edge, then nudged by JS so the panel centers on
   its trigger when there is room and clamps to the container when there is
   not. The five-column Use Cases panel is ~1100px wide, so centering it on a
   trigger 300px from the left would hang it off the viewport. */
.gh-dd{
  position:absolute;top:calc(100% + 14px);left:0;transform:translateY(-6px);
  background:#fff;border:1px solid var(--card-border);border-radius:24px;
  box-shadow:0 30px 70px rgba(86,0,36,.13);padding:30px 34px 24px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:210;
}
.gh-navitem.gh-dd-on .gh-dd{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* Without JS a panel can never be opened, and an unclamped one still widens the
   document. Take it out of layout entirely in that case: the top-level link
   still navigates to the pillar page, which lists every leaf underneath it, so
   nothing becomes unreachable. */
html:not(.gh-js) .gh-dd{display:none}
.gh-dd::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.gh-dd-grid{display:flex;gap:38px}
.gh-dd-col{min-width:172px}
.gh-dd-col .gh-dd-h{margin:0;font-size:11px;font-weight:800;color:var(--muted-sm);text-transform:uppercase;letter-spacing:.11em;margin-bottom:14px;white-space:nowrap}
.gh-dd-col a{display:block;padding:7px 0;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;transition:color .15s ease}
.gh-dd-col a:hover{color:var(--red)}
/* Label and sub-label are styled by their own classes, never by a descendant
   selector on the link. A ".gh-dd-col a span" rule used to do this job, and it
   also matched the label wrapper and the icon circle — so the label rendered in
   the sub-label's 12px muted style (the two lines blurred into each other) and
   the circle lost its display:flex, dropping the icon into its top-left corner
   instead of centering it. One over-broad selector, two bugs.
   (No backticks in here: this block lives inside a template literal.) */
.gh-dd-lab{display:block;min-width:0;font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.gh-dd-lab span{display:block;font-size:12px;font-weight:500;color:var(--muted-sm);line-height:1.4;margin-top:3px}
.gh-dd-foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--tint-rose);display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
/* the foot can carry a short second list — the partner collabs, which are
   five links that do not deserve a column of their own */
.gh-dd-foot-extra{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-left:auto;font-size:12.5px;font-weight:600;color:var(--muted-sm)}
.gh-dd-foot-extra span{font-weight:800;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;margin-right:4px}
.gh-dd-foot-extra a{color:var(--body);white-space:nowrap}
.gh-dd-foot-extra a:hover{color:var(--red)}
/* one featured photo card per panel, the same device the Catalog panel uses */
.gh-dd-feature{display:block;width:238px;flex:none;border-radius:18px;overflow:hidden;background:var(--tint-pink);align-self:flex-start;transition:transform .2s ease,box-shadow .2s ease}
.gh-dd-feature:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(86,0,36,.12)}
.gh-dd-feature-im{display:block;height:132px;overflow:hidden;background:var(--tint-rose)}
.gh-dd-feature-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gh-dd-feature:hover .gh-dd-feature-im img{transform:scale(1.04)}
.gh-dd-feature-tx{display:block;padding:16px 18px 18px}
/* photo thumbnails in the Use Cases columns, and the live preview they drive */
.gh-dd-ph .gh-dd-dot{color:var(--maroon);transition:background .18s ease,color .18s ease}
.gh-dd-ph .gh-dd-dot svg{display:block}
.gh-dd-ph:hover .gh-dd-dot{background:var(--red)!important;color:#fff}
/* catalog: three numbered ways to send */
.gh-dd-card-im{position:relative}
.gh-dd-card-n{position:absolute;left:10px;top:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--red);font:800 11.5px Montserrat,sans-serif;font-style:normal;box-shadow:0 4px 12px rgba(86,0,36,.18)}
.gh-dd-feature-im img{transition:opacity .25s ease,transform .3s ease}
.gh-dd-feature.gh-swap .gh-dd-feature-im img{opacity:.2}
.gh-dd-feature-tx em{display:block;font:800 10.5px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-style:normal;margin-bottom:6px}
.gh-dd-feature-tx b{display:block;font-size:14.5px;color:var(--ink);line-height:1.3}
.gh-dd-feature-tx span{display:block;font-size:12.5px;font-weight:500;color:var(--body);line-height:1.45;margin-top:5px}

/* icon links — a tinted circle holding the link's own mark */
.gh-dd-col a.gh-dd-ico{display:flex;align-items:center;gap:11px;padding:6px 0}
.gh-dd-dot{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;transition:transform .18s ease}
.gh-dd-dot img{width:18px;height:18px;object-fit:contain;display:block}
.gh-dd-col a.gh-dd-ico:hover .gh-dd-dot{transform:scale(1.08)}

/* catalog photo cards — merchandise is the argument on that menu */
.gh-dd-cards{display:flex;gap:14px;flex:none}
/* Integrations: the top HR systems as marks, three columns of four */
.gh-dd-logos{min-width:0}
.gh-dd-lgrid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:6px}
.gh-dd-lgrid a{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;border-radius:12px;font:700 13.5px Montserrat,sans-serif;color:var(--ink);transition:background .16s ease,transform .16s ease}
.gh-dd-lgrid a:hover{background:var(--tint-pink);color:var(--red);transform:translateX(2px)}
.gh-dd-lgrid img{width:26px;height:26px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(86,0,36,.06)}
.gh-dd-card{display:block;width:186px;padding:0}
.gh-dd-card-im{display:block;height:118px;border-radius:16px;overflow:hidden;background:var(--tint-pink);margin-bottom:12px}
.gh-dd-card-im img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gh-dd-card:hover .gh-dd-card-im img{transform:scale(1.04)}
.gh-dd-card b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.gh-dd-card span{display:block;font-size:12px;font-weight:500;color:var(--muted-sm);line-height:1.45}
.gh-dd-card:hover b{color:var(--red)}

/* one promo card per panel — the live nav's "talk to us" surface */
.gh-dd-promo{display:block;width:236px;flex:none;background:var(--tint-pink);border-radius:18px;padding:22px;align-self:flex-start;transition:background .18s ease}
.gh-dd-promo:hover{background:var(--tint-peach)}
.gh-dd-promo b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:8px}
.gh-dd-promo>span{display:block;font-size:12.5px;font-weight:500;color:var(--body);line-height:1.5;margin-bottom:14px}
.gh-dd-promo .gh-arrow{font-size:13px}

/* ── hero ── */
.gh-hero{position:relative;padding:88px 0 110px;overflow:hidden;background:
  radial-gradient(900px 520px at 88% -10%, var(--tint-peach) 0%, rgba(255,229,221,0) 62%),
  radial-gradient(700px 480px at -8% 32%, var(--tint-red) 0%, rgba(255,228,234,0) 58%),
  #fff}
/* ambient washes: two soft blobs drifting below consciousness */
.gh-wash{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.gh-wash-a{width:560px;height:420px;right:-120px;top:-140px;background:rgba(255,229,221,.55);animation:ghDrift 26s ease-in-out infinite alternate}
.gh-wash-b{width:480px;height:400px;left:-160px;top:32%;background:rgba(255,228,234,.5);animation:ghDrift 34s ease-in-out -8s infinite alternate-reverse}
@keyframes ghDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(36px,26px) scale(1.08)}}
.gh-hero .gh-wrap{position:relative;z-index:1}
/* Three children now: copy, picture, trust. The picture is placed explicitly
   and spans both rows so the desktop composition is unchanged; row-gap is 0
   because .gh-hero-trust carries its own 44px. When the grid collapses to one
   column the picture lands between the copy and the logos, which is the order
   that reads on a phone. */
.gh-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:72px;row-gap:0;align-items:center}
.gh-hero-grid>.gh-hero-visual{grid-column:2;grid-row:1/span 2}
.gh-hero-grid>.gh-hero-trust{grid-column:1}
.gh-hero-badge{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--pill-border);background:#fff;border-radius:100px;padding:8px 18px;font-size:13px;font-weight:700;color:var(--maroon);margin-bottom:26px}
.gh-hero-badge svg{flex:0 0 auto}
.gh-hero h1{font-size:clamp(52px,6.6vw,88px);line-height:1.02;letter-spacing:-.03em;max-width:14ch}
/* the one flourish: a hand-drawn underline that draws itself under "love" */
.gh-love{position:relative;display:inline-block;white-space:nowrap}
.gh-love svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.28em;overflow:visible}
.gh-love svg path{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-dasharray:230;stroke-dashoffset:230;transition:stroke-dashoffset .7s ease 1s}
html.gh-entered .gh-love svg path{stroke-dashoffset:0}
.gh-hero-lede{font-size:19px;line-height:1.65;max-width:54ch;margin-top:24px}
.gh-hero-ctas{display:flex;align-items:center;gap:16px;margin-top:36px;flex-wrap:wrap}
.gh-hero-micro{font-size:13.5px;font-weight:600;color:var(--muted-sm);margin-top:14px}
.gh-hero-trust{margin-top:44px}
.gh-hero-trust-label{font-size:12.5px;font-weight:700;color:var(--muted-sm);letter-spacing:.06em;text-transform:uppercase}
/* One line, never wrapped. The old row wrapped after four marks and left the
   fifth stranded, so this is nowrap with a scroll escape hatch on narrow screens. */
.gh-wordmarks{display:flex;flex-wrap:nowrap;gap:14px;align-items:center;margin-top:14px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.gh-wordmarks::-webkit-scrollbar{display:none}
.gh-wordmarks span{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font-size:clamp(10.5px,.92vw,12px);font-weight:800;color:var(--ink);opacity:.5;letter-spacing:.02em;white-space:nowrap;transition:opacity .2s ease}
.gh-wordmarks span:hover{opacity:.78}
.gh-wordmarks span::before{content:attr(data-i);display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--tint-rose);color:var(--maroon);font-size:10.5px;font-weight:800;letter-spacing:0;box-shadow:inset 0 0 0 1px var(--card-border)}
/* staged entrance: elements rise in once, in order, after load */
html.gh-js [data-enter]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.gh-js [data-enter="2"]{transition-delay:.1s}
html.gh-js [data-enter="3"]{transition-delay:.22s}
html.gh-js [data-enter="4"]{transition-delay:.34s}
html.gh-js [data-enter="5"]{transition-delay:.46s}
html.gh-js [data-enter="media"]{transform:scale(.965);transition:opacity .8s ease .28s,transform .8s ease .28s}
html.gh-js.gh-entered [data-enter]{opacity:1;transform:none}
.gh-hero-visual{position:relative}
.gh-hero-media{position:relative;width:100%;max-width:520px;aspect-ratio:10/11;margin-left:auto;border-radius:240px 240px 28px 28px;overflow:hidden;box-shadow:0 30px 70px rgba(86,0,36,.13)}
.gh-hero-media img,.gh-hero-media video{width:100%;height:100%;object-fit:cover;object-position:62% 30%}
/* the living moment: "gift sent" slides in, the recipient's reply pops in, long pause, loop */
.gh-note{position:absolute;z-index:3;background:#fff;border:1px solid var(--card-border);border-radius:16px;box-shadow:0 18px 44px rgba(86,0,36,.16);opacity:0}
.gh-note-sent{top:9%;left:-34px;display:flex;align-items:center;gap:10px;padding:13px 18px 13px 14px;animation:ghNoteSent 14s ease-in-out 1.6s infinite}
.gh-note-sent svg{flex:0 0 auto}
.gh-note-sent b{display:block;font-size:13.5px;color:var(--ink)}
.gh-note-sent span{display:block;font-size:12px;font-weight:600;color:var(--muted-sm);margin-top:1px}
.gh-note-reply{bottom:19%;right:-20px;max-width:230px;padding:13px 17px;border-radius:16px 16px 4px 16px;transform-origin:100% 100%;animation:ghNoteReply 14s ease-in-out 1.6s infinite}
.gh-note-reply b{display:block;font-size:14px;color:var(--ink);line-height:1.4}
.gh-note-reply span{display:block;font-size:11.5px;font-weight:600;color:var(--muted-sm);margin-top:5px}
@keyframes ghNoteSent{0%{opacity:0;transform:translateY(12px)}4%,84%{opacity:1;transform:translateY(0)}90%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes ghNoteReply{0%,12%{opacity:0;transform:scale(.82)}16%{opacity:1;transform:scale(1.04)}18%,84%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.94)}}
.gh-hero-fan{position:absolute;left:-52px;bottom:-14px;width:260px;height:180px;z-index:2}
.gh-fan-card{position:absolute;left:50%;top:50%;width:172px;transition:transform .28s ease}
.gh-fan-card img{width:100%;height:auto;border-radius:9px;filter:drop-shadow(0 16px 26px rgba(86,0,36,.26))}
.gh-fan-card .gh-fan-float{animation:ghFloat 7s ease-in-out infinite}
.gh-fan-2 .gh-fan-float{animation-delay:1.1s}
.gh-fan-3 .gh-fan-float{animation-delay:2.3s}
@keyframes ghFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.gh-fan-1{transform:translate(-78%,-64%) rotate(-9deg)}
.gh-fan-2{transform:translate(-50%,-46%) rotate(-1deg);z-index:2}
.gh-fan-3{transform:translate(-22%,-30%) rotate(8deg)}
.gh-hero-visual:hover .gh-fan-1{transform:translate(-84%,-70%) rotate(-12deg)}
.gh-hero-visual:hover .gh-fan-3{transform:translate(-16%,-24%) rotate(11deg)}
.gh-spark{position:absolute;pointer-events:none}
.gh-spark-hero{top:-6px;right:-14px;animation:ghTwinkle 4.2s ease-in-out infinite}
@keyframes ghTwinkle{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

/* ── proof bar ── */
.gh-proofbar{padding:0}
.gh-proofbar-in{border-top:1px solid var(--tint-rose);border-bottom:1px solid var(--tint-rose);padding:44px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;min-height:130px}
.gh-stat{text-align:center}
.gh-stat b{display:block;font-size:clamp(2rem,3.2vw,2.9rem);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.gh-stat span{display:block;font-size:13.5px;font-weight:600;color:var(--muted-sm);margin-top:6px}

/* ── use-case worlds: one persistent stage, four scenes ── */
.gh-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:44px auto 0;padding:7px;width:max-content;max-width:100%;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:100px;box-shadow:0 4px 24px rgba(86,0,36,.05)}
.gh-tab{position:relative;display:inline-flex;align-items:center;gap:9px;border:0;background:none;border-radius:100px;padding:11px 22px 11px 16px;font:700 14px Montserrat,sans-serif;color:var(--body);cursor:pointer;transition:background .2s ease,color .2s ease;white-space:nowrap}
.gh-tab:hover{color:var(--ink)}
.gh-tab[aria-selected="true"]{background:var(--ink);color:#fff}
/* auto-advance progress bar, only while the tour is running */
@property --ghRing{syntax:'<angle>';inherits:false;initial-value:0deg}
/* Auto-tour progress. The pill is fully rounded (100px), so a straight rule along
   its bottom edge is always clipped by the curve and reads as a floating bar —
   a ring sits inside the shape instead. Every tab reserves the ring slot, so
   changing tabs can never reflow the row. */
.gh-tab::before{content:'';width:14px;height:14px;border-radius:50%;flex:0 0 auto;background:conic-gradient(rgba(43,10,24,.22) 0 360deg);-webkit-mask:radial-gradient(circle,#0000 3.8px,#000 4.3px);mask:radial-gradient(circle,#0000 3.8px,#000 4.3px)}
.gh-tab[aria-selected="true"]::before{background:conic-gradient(rgba(255,255,255,.85) 0 360deg)}
.gh-tabs.gh-auto .gh-tab[aria-selected="true"]::before{background:conic-gradient(#fff var(--ghRing),rgba(255,255,255,.28) 0);animation:ghRing 7s linear}
@keyframes ghRing{from{--ghRing:0deg}to{--ghRing:360deg}}
.gh-stage-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center;margin-top:48px}
.gh-stage{position:relative;border-radius:28px;aspect-ratio:5/4;box-shadow:0 24px 60px rgba(86,0,36,.12)}
.gh-scene{position:absolute;inset:0;border-radius:28px;overflow:hidden;opacity:0;transform:scale(1.02);filter:blur(6px);transition:opacity .9s ease,filter .9s ease,transform .9s ease;pointer-events:none}
.gh-scene.gh-on{opacity:1;transform:scale(1);filter:blur(0);pointer-events:auto}
.gh-scene>img,.gh-scene>video{width:100%;height:100%;object-fit:cover}
.gh-scene-ui{position:absolute;width:46%;border-radius:16px;overflow:hidden;border:1px solid var(--card-border);box-shadow:0 18px 44px rgba(86,0,36,.18);background:#fff;opacity:0;transition:opacity .5s ease .35s,transform .5s ease .35s}
.gh-scene-ui img{width:100%;height:auto}
.gh-ui-br{right:-18px;bottom:-24px;transform:translate(14px,14px)}
.gh-ui-bl{left:-18px;bottom:-24px;transform:translate(-14px,14px)}
.gh-scene.gh-on .gh-scene-ui{opacity:1;transform:translate(0,0)}
.gh-stage-chip{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--card-border);border-radius:100px;padding:9px 17px;font-size:13px;font-weight:700;color:var(--maroon);box-shadow:0 8px 24px rgba(86,0,36,.14);opacity:0;transform:translateY(-8px);transition:opacity .5s ease .5s,transform .5s ease .5s}
.gh-stage-chip b{color:var(--red);font-weight:800}
.gh-scene.gh-on .gh-stage-chip{opacity:1;transform:none}
/* the notification motif, echoed from the hero */
.gh-mini{position:absolute;left:18px;bottom:20px;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--card-border);border-radius:14px;padding:12px 17px 12px 13px;box-shadow:0 14px 36px rgba(86,0,36,.18);opacity:0;transform:translateY(10px);transition:opacity .5s ease .7s,transform .5s ease .7s;max-width:64%}
.gh-scene.gh-on .gh-mini{opacity:1;transform:none}
.gh-mini b{display:block;font-size:13px;color:var(--ink)}
.gh-mini span{display:block;font-size:11.5px;font-weight:600;color:var(--muted-sm);margin-top:1px}
.gh-mini-emoji{font-size:20px;line-height:1}
/* when the UI card owns the bottom-left, the mini card moves top-right */
.gh-mini-tr{left:auto;bottom:auto;right:18px;top:64px}
.gh-scopy{display:none}
.gh-scopy.gh-on{display:block;animation:ghPanelIn .35s ease}
@keyframes ghPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gh-scopy h3{font-size:24px;letter-spacing:-.01em;line-height:1.25}
.gh-scopy p{font-size:16.5px;line-height:1.65;margin-top:14px;max-width:46ch}
.gh-scopy .gh-arrow{margin-top:22px}
.gh-scopy-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.gh-scopy-tags span{font-size:12.5px;font-weight:700;color:var(--maroon);background:var(--tint-pink);border:1px solid var(--tint-rose);border-radius:100px;padding:6px 14px}

/* ── how it works ── */
.gh-how{background:linear-gradient(180deg,#fff 0%,var(--tint-pink) 24%,var(--tint-pink) 76%,#fff 100%)}
.gh-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px;position:relative}
.gh-steps::before{content:'';position:absolute;top:26px;left:16.6%;right:16.6%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rose-mist),var(--frost));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s ease .25s}
.gh-steps.gh-in::before{transform:scaleX(1)}
.gh-step{position:relative;text-align:center;padding:0 12px}
.gh-step-num{position:relative;z-index:1;width:52px;height:52px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid var(--red);color:var(--red);font:800 20px/48px Montserrat,sans-serif;text-align:center;box-shadow:0 6px 18px rgba(250,35,87,.15);transition:background .4s ease,color .4s ease}
.gh-step.gh-in .gh-step-num{background:var(--red);color:#fff}
.gh-step:nth-child(2).gh-in .gh-step-num{transition-delay:.35s}
.gh-step:nth-child(3).gh-in .gh-step-num{transition-delay:.7s}
.gh-step h3{font-size:18px;margin-top:22px}
.gh-step p{font-size:15px;line-height:1.6;margin-top:10px}
/* tiny product vignettes: the step, shown not told */
.gh-vig{display:flex;align-items:center;gap:11px;margin:18px auto 0;background:#fff;border:1px solid var(--card-border);border-radius:14px;padding:12px 16px 12px 13px;box-shadow:0 8px 24px rgba(86,0,36,.07);text-align:left;width:min(100%,336px);min-height:65px;box-sizing:border-box}
.gh-vig svg{flex:0 0 auto}
.gh-vig>div{min-width:0}
.gh-vig>div b{display:block;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-vig>div span{display:block;font-size:11.5px;font-weight:600;color:var(--muted-sm);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-vig em{flex:0 0 auto;font-style:normal;font-size:10.5px;font-weight:800;color:var(--red);background:var(--tint-red);border-radius:100px;padding:4px 10px;margin-left:6px;letter-spacing:.04em;text-transform:uppercase}
.gh-vig .gh-vig-cards{display:flex;flex:0 0 auto;align-items:center}
.gh-vig-cards img{width:46px;height:29px;object-fit:contain;background:#fff;border-radius:5px;box-shadow:0 0 0 1.5px #fff,0 3px 7px rgba(86,0,36,.24);transition:transform .25s ease}
.gh-vig-cards img:nth-child(1){transform:rotate(-8deg) translateY(1px)}
.gh-vig-cards img:nth-child(2){transform:rotate(-1deg) translateY(-2px)}
.gh-vig-cards img:nth-child(3){transform:rotate(7deg) translateY(1px)}
.gh-vig:hover .gh-vig-cards img{transform:rotate(0) translateY(0)}
.gh-vig-cards img+img{margin-left:-15px}
.gh-how-close{text-align:center;margin-top:52px;font-size:17px;font-weight:700;color:var(--maroon)}
.gh-how-close em{font-style:normal;color:var(--red)}

/* ── catalog ── */
.gh-cat-acts{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center;margin-top:64px}
.gh-cat-acts+.gh-cat-acts{margin-top:96px}
/* numbered kickers: the catalog is three kinds of gift, say so */
.gh-cat-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.gh-cat-kicker i{font-style:normal;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--red);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;letter-spacing:0}
.gh-marq{overflow:hidden;position:relative;padding:9px 0;height:118px}
.gh-marq+.gh-marq{margin-top:2px}
.gh-marq::before,.gh-marq::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.gh-marq::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.gh-marq::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.gh-marq-track{display:flex;gap:16px;width:max-content;animation:ghMarq 52s linear infinite}
.gh-marq-rev .gh-marq-track{animation-direction:reverse;animation-duration:60s}
.gh-marq:hover .gh-marq-track{animation-play-state:paused}
@keyframes ghMarq{to{transform:translateX(-50%)}}
.gh-marq-track img{width:158px;height:100px;object-fit:contain;flex:0 0 auto}
.gh-marqs{margin-top:64px}
/* Physical gifts is a flagship category, but the two-column catalog rhythm gave it
   half the width and then split that three ways — ~180px per card, which read as an
   afterthought next to swag's single large image. It gets the full container instead:
   copy on one row, three generous cards beneath. */
.gh-cat-feature{margin-top:96px}
/* .gh-cat-acts+.gh-cat-acts no longer matched once physical gifts became a
   feature block, so swag lost its 96px gap and butted up against it. */
.gh-cat-sep{display:flex;align-items:center;gap:20px;margin:104px auto 0;max-width:440px}
.gh-cat-sep::before,.gh-cat-sep::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rose-mist))}
.gh-cat-sep::after{background:linear-gradient(90deg,var(--rose-mist),transparent)}
.gh-cat-sep svg{flex:0 0 auto;opacity:.75}
.gh-cat-sep+.gh-cat-acts{margin-top:72px}
.gh-cat-feature .gh-cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.gh-cat-feature .gh-cat-copy p{max-width:62ch}
.gh-cat-feature .gh-cat-copy .gh-arrow{margin-top:0}
.gh-cat-feature .gh-polaroids{margin-top:40px}
.gh-polaroids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;align-items:start}
.gh-pola{background:#fff;border:1px solid var(--card-border);border-radius:24px;padding:14px 14px 20px;box-shadow:0 22px 54px rgba(86,0,36,.12);transition:transform .25s ease,box-shadow .25s ease}
.gh-pola:nth-child(1){transform:rotate(-1.8deg)}
.gh-pola:nth-child(2){transform:rotate(1.2deg) translateY(16px)}
.gh-pola:nth-child(3){transform:rotate(-1deg)}
.gh-pola:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 30px 70px rgba(86,0,36,.16)}
.gh-pola-im{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--tint-peach),#fdf3ee)}
.gh-pola-im img{width:100%;height:100%;object-fit:cover}
.gh-pola figcaption{font-size:14.5px;font-weight:700;color:var(--maroon);text-align:center;margin-top:16px}
.gh-swag-im{border-radius:28px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 24px 60px rgba(86,0,36,.12)}
.gh-swag-im img{width:100%;height:100%;object-fit:cover}
.gh-cat-copy h3{font-size:24px;letter-spacing:-.01em}
.gh-cat-copy p{font-size:16.5px;line-height:1.65;margin-top:14px;max-width:46ch}
.gh-cat-copy .gh-arrow{margin-top:22px}

/* ── the globe: 150+ countries you can touch ── */
.gh-globe-band{background:linear-gradient(160deg,var(--ice) 0%,#fff 42%,var(--tint-red) 100%);border-radius:32px;padding:64px 56px;margin-top:64px;position:relative;overflow:hidden}
.gh-globe-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.gh-globe-left h3{font-size:24px;letter-spacing:-.01em;max-width:20ch}
.gh-globe-left>p{font-size:16px;line-height:1.6;margin-top:12px;max-width:min(46ch,100%)}
.gh-csearch{position:relative;max-width:min(420px,100%);margin-top:22px}
.gh-csearch input{width:100%;border:1.5px solid rgba(70,115,137,.3);border-radius:100px;padding:14px 22px;font-family:Montserrat,sans-serif;font-size:15px;font-weight:600;color:var(--ink);background:#fff;outline:none}
.gh-csearch input:focus{border-color:var(--red)}
.gh-clist{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid rgba(86,0,36,.1);border-radius:16px;box-shadow:0 18px 44px rgba(86,0,36,.16);max-height:280px;overflow-y:auto;z-index:40;display:none}
.gh-clist.gh-open{display:block}
.gh-copt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 18px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.gh-copt:hover,.gh-copt.gh-act{background:var(--tint-pink)}
.gh-copt em{font-style:normal;font-size:12px;color:var(--muted-lg);font-weight:700}
.gh-mchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.gh-mchip{border:1.5px solid rgba(70,115,137,.3);background:#fff;color:var(--ink);border-radius:100px;padding:9px 17px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .16s ease}
.gh-mchip:hover{border-color:var(--red);transform:translateY(-1px)}
.gh-mchip.gh-mchip-on{background:var(--red);border-color:var(--red);color:#fff}
.gh-cpanels{margin-top:24px;min-height:196px}
.gh-cpanel{display:flex;gap:30px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid rgba(86,0,36,.08);border-radius:24px;padding:28px 32px;box-shadow:0 10px 32px rgba(86,0,36,.08);overflow:hidden}
html.gh-js .gh-cpanel{animation:ghPanelIn .4s ease}
.gh-cpanel-left{flex:0 0 205px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.gh-cpanel-flag{font-size:40px;line-height:1;margin-bottom:2px}
.gh-cpanel-left b{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.gh-cpanel-count{font-size:14px;font-weight:600;color:var(--body)}
.gh-cpanel-count em{font-style:normal;font-weight:800;color:var(--red)}
.gh-cpanel-fanwrap{flex:1;min-width:230px}
.gh-cpanel-fan{display:flex;padding:8px 2px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.gh-cpanel-fan .gh-gcm{width:118px;height:74px;flex:0 0 auto;margin-left:-36px;border-radius:11px;box-shadow:0 10px 24px rgba(86,0,36,.18);transition:transform .25s ease,margin .25s ease;overflow:hidden;background:#fff}
.gh-cpanel-fan .gh-gcm img{width:100%;height:100%;object-fit:cover}
.gh-cpanel-fan .gh-gcm:first-child{margin-left:0}
.gh-cpanel-fan .gh-gcm:nth-child(odd){transform:rotate(-3deg)}
.gh-cpanel-fan .gh-gcm:nth-child(even){transform:rotate(2.5deg) translateY(3px)}
.gh-cpanel-fan:hover .gh-gcm{margin-left:-12px;transform:rotate(0) translateY(0)}
.gh-cpanel-fan:hover .gh-gcm:first-child{margin-left:0}
/* cards fly in from the globe's direction on every selection */
html.gh-js .gh-cpanel-fan .gh-gcm{animation:ghCardFly .5s ease backwards}
html.gh-js .gh-cpanel-fan .gh-gcm:nth-child(2){animation-delay:.05s}
html.gh-js .gh-cpanel-fan .gh-gcm:nth-child(3){animation-delay:.1s}
html.gh-js .gh-cpanel-fan .gh-gcm:nth-child(4){animation-delay:.15s}
html.gh-js .gh-cpanel-fan .gh-gcm:nth-child(5){animation-delay:.2s}
html.gh-js .gh-cpanel-fan .gh-gcm:nth-child(6){animation-delay:.25s}
@keyframes ghCardFly{from{opacity:0;transform:translate(56px,-22px) rotate(7deg)}to{opacity:1}}
.gh-cpanel-note{font-size:14px;font-weight:600;color:var(--muted-lg);margin:8px 0}
.gh-cpanel-more{margin-top:12px;border:1.5px solid var(--pill-border);background:#fff;color:var(--red);border-radius:100px;padding:9px 18px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .18s ease}
.gh-cpanel-more:hover{border-color:var(--red);transform:translateY(-1px)}
.gh-globe-wrap{display:none;position:relative;justify-content:center;margin:0 auto;width:100%;max-width:460px}
html.gh-js .gh-globe-wrap{display:flex}
.gh-globe-wrap.gh-gone{display:none!important}
.gh-globe-stage{position:relative;width:100%;aspect-ratio:1/1}
.gh-globe-svg{touch-action:none;cursor:grab;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.gh-globe-svg.gh-ready{opacity:1}
.gh-globe-svg:active{cursor:grabbing}
.gh-globe-skel{position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,var(--ice) 30%,#fff 48%,var(--tint-red) 66%);background-size:280% 100%;animation:ghGlobeShim 1.6s linear infinite;box-shadow:inset 0 0 0 2px rgba(239,179,196,.35)}
.gh-globe-skel.gh-gone{display:none}
@keyframes ghGlobeShim{to{background-position:-280% 0}}
.gh-gtip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-family:Montserrat,sans-serif;font-size:13px;font-weight:700;border-radius:10px;padding:8px 14px;transform:translate(-50%,-130%);white-space:nowrap;display:none;z-index:5}
.gh-gtip em{font-style:normal;color:var(--red-ice);font-weight:700}
.gh-globe-hint{text-align:center;font-size:12.5px;font-weight:700;color:var(--muted-sm);letter-spacing:.05em;text-transform:uppercase;margin-top:14px}
html:not(.gh-js) .gh-globe-hint{display:none}
/* full-country overlay browser */
.gh-ovl{position:fixed;inset:0;background:rgba(23,18,20,.55);z-index:9999;display:none;align-items:flex-start;justify-content:center;padding:4vh 18px;overflow-y:auto}
.gh-ovl.gh-open{display:flex}
.gh-ovl-panel{background:#fff;border-radius:24px;max-width:1080px;width:100%;margin:auto 0;box-shadow:0 40px 100px rgba(0,0,0,.3);overflow:hidden}
.gh-ovl-head{position:sticky;top:0;background:linear-gradient(135deg,var(--ice),#fff 70%);padding:30px 36px 20px;border-bottom:1px solid rgba(86,0,36,.07);z-index:2}
.gh-ovl-head h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.02em;margin:0 0 4px;max-width:85%}
.gh-ovl-x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--pill-border);background:#fff;color:var(--body);font-size:16px;cursor:pointer;padding:0}
.gh-ovl-x:hover{color:var(--red);border-color:var(--red)}
.gh-ovl-sub{font-size:13.5px;font-weight:600;color:var(--body);margin:0 0 14px}
.gh-ovl-sub em{font-style:normal;color:var(--red);font-weight:800}
.gh-ovl-search{width:100%;max-width:380px;border:1.5px solid var(--pill-border);border-radius:100px;padding:11px 20px;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;outline:none}
.gh-ovl-search:focus{border-color:var(--red)}
.gh-ovl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:26px 36px;min-height:220px}
.gh-ovl-card{text-align:center;margin:0}
/* card art ships rounded corners in its alpha channel: no CSS radius, drop-shadow only */
.gh-ovl-card img{width:100%;aspect-ratio:8/5;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(86,0,36,.16));display:block}
.gh-ovl-card .gh-noimg{width:100%;aspect-ratio:8/5;border-radius:10px;background:var(--tint-pink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted-lg);padding:8px;text-align:center}
.gh-ovl-card figcaption{margin-top:7px;font-size:11.5px;font-weight:700;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh-ovl-more{padding:14px 0 6px;text-align:center;font-size:13px;font-weight:700;color:var(--muted-lg);grid-column:1/-1}
.gh-skel{aspect-ratio:8/5;border-radius:10px;background:linear-gradient(90deg,#f4eef1 25%,#fbf7f9 42%,#f4eef1 58%);background-size:300% 100%;animation:ghShimmer 1.1s linear infinite}
@keyframes ghShimmer{to{background-position:-300% 0}}
.gh-ovl-foot{border-top:1px solid rgba(86,0,36,.07);padding:20px 36px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--tint-pink)}
.gh-ovl-foot p{margin:0;font-size:14px;font-weight:600;color:var(--body);flex:1;min-width:220px}
body.gh-lock{overflow:hidden}

/* ── free band ── */
.gh-free-band{background:
  radial-gradient(760px 500px at 8% -12%, rgba(250,35,87,.36) 0%, rgba(250,35,87,0) 62%),
  radial-gradient(680px 520px at 104% 110%, rgba(239,179,196,.20) 0%, rgba(239,179,196,0) 58%),
  var(--maroon);border-radius:32px;padding:90px 72px;position:relative;overflow:hidden}
.gh-free-band::before{content:'';position:absolute;inset:0;background:
  radial-gradient(700px 420px at 90% -10%, rgba(250,35,87,.22) 0%, transparent 60%),
  radial-gradient(560px 420px at -6% 110%, rgba(250,35,87,.12) 0%, transparent 55%)}
/* fine grain so the maroon reads rich, not flat */
.gh-free-band::after{content:'';position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.gh-free-in{position:relative;z-index:1}
.gh-free-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center}
.gh-free-band .gh-eyebrow{color:var(--red-ice)}
.gh-free-band .gh-eyebrow::before{background:var(--red-ice)}
.gh-free-band h2{color:#fff;font-size:clamp(38px,4.4vw,56px);letter-spacing:-.02em;line-height:1.06;max-width:14ch}
.gh-free-band .gh-free-lede{color:rgba(255,255,255,.78);font-size:17.5px;line-height:1.65;max-width:50ch;margin-top:20px}
.gh-free-quote{margin-top:40px;padding-top:34px;border-top:1px solid rgba(255,255,255,.14);display:flex;gap:18px;align-items:flex-start}
.gh-free-quote img{width:52px;height:52px;border-radius:50%;flex:0 0 auto;object-fit:cover;box-shadow:0 0 0 2.5px rgba(255,255,255,.25)}
.gh-free-quote blockquote{font-size:17px;line-height:1.6;color:#fff;font-weight:500;max-width:46ch}
.gh-free-quote cite{display:block;font-style:normal;font-size:14px;font-weight:700;color:var(--rose-mist);margin-top:12px}
.gh-free-quote cite small{font-weight:600;color:rgba(255,255,255,.6);font-size:13px}
.gh-free-band .gh-btn-secondary{border-color:rgba(255,255,255,.35);background:transparent;color:#fff;margin-top:36px}
.gh-free-band .gh-btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.06)}
/* the receipt: the whole business model, itemized */
.gh-receipt{background:#fff;border-radius:22px;padding:36px 34px 30px;box-shadow:0 34px 90px rgba(0,0,0,.35);transform:rotate(1.4deg);transition:transform .3s ease;max-width:430px;justify-self:end;width:100%}
.gh-receipt:hover{transform:rotate(0deg)}
.gh-receipt-head{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);padding-bottom:18px;border-bottom:1.5px dashed var(--tint-rose)}
.gh-receipt-head svg{flex:0 0 auto}
.gh-receipt-head em{font-style:normal;margin-left:auto;color:var(--muted-lg);font-weight:700;letter-spacing:.08em}
.gh-receipt-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px dashed var(--tint-rose);font-size:14.5px;font-weight:600;color:var(--body)}
.gh-receipt-row b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;font-size:15.5px}
.gh-receipt-total{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0 4px}
.gh-receipt-total span{font-size:14.5px;font-weight:800;color:var(--maroon);max-width:20ch;line-height:1.35}
.gh-receipt-total b{font-size:34px;font-weight:800;color:var(--red);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}

/* ── testimonials ── */
.gh-quotes-marq{overflow:hidden;position:relative;margin-top:56px;height:330px}
.gh-quotes-marq::before,.gh-quotes-marq::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.gh-quotes-marq::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.gh-quotes-marq::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.gh-quotes-track{display:flex;gap:26px;width:max-content;animation:ghMarq 74s linear infinite}
.gh-quotes-marq:hover .gh-quotes-track{animation-play-state:paused}
.gh-quote-card{position:relative;width:420px;flex:0 0 auto;background:#fff;border:1px solid var(--card-border);border-radius:24px;box-shadow:0 4px 24px rgba(86,0,36,.05);padding:38px 34px 34px;display:flex;flex-direction:column;height:310px;overflow:hidden}
.gh-quote-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red),var(--rose-mist))}
.gh-quote-card:nth-child(even)::before{background:linear-gradient(90deg,var(--frost),var(--glacier))}
.gh-quote-card blockquote{font-size:16.5px;line-height:1.62;color:var(--ink);font-weight:500;flex:1;overflow:hidden}
.gh-quote-who{display:flex;align-items:center;gap:14px;margin-top:22px}
.gh-quote-av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font:800 15px Montserrat,sans-serif;color:var(--maroon);overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 4px 12px rgba(86,0,36,.12)}
.gh-quote-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.gh-quote-who b{display:block;font-size:14px;color:var(--ink)}
.gh-quote-who span{display:block;font-size:12.5px;font-weight:600;color:var(--muted-sm);margin-top:2px}

/* ── trust ── */
.gh-trust{background:linear-gradient(180deg,#fff 0%,var(--tint-pink) 30%,var(--tint-pink) 70%,#fff 100%)}
.gh-trust-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:start;margin-top:56px}
.gh-int-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
/* Logo marks are gifted.co's own integration icons, re-hosted on our CDN rather
   than hot-linked from Webflow. Paylocity's is its round app icon from
   paylocity.com on a white disc (site/hris.js says why). The [data-i] monogram
   rule below is the fallback for any future chip without a mark. */
.gh-int-chips span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--pill-border);border-radius:100px;padding:8px 18px 8px 9px;transition:border-color .2s ease,transform .2s ease}
.gh-int-chips span:hover{border-color:var(--rose-mist);transform:translateY(-1px)}
.gh-int-chips img{width:24px;height:24px;flex:0 0 auto;border-radius:50%;object-fit:contain}
.gh-int-chips span[data-i]::before{content:attr(data-i);display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--tint-rose);color:var(--maroon);font-size:11px;font-weight:800}
.gh-trust-card{background:#fff;border:1px solid var(--card-border);border-radius:24px;box-shadow:0 4px 24px rgba(86,0,36,.05);padding:40px 36px}
.gh-trust-card h3{font-size:20px}
.gh-trust-card p{font-size:15px;line-height:1.6;margin-top:12px}
.gh-badges{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.gh-badge{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:700;color:var(--maroon)}
.gh-badge svg{flex:0 0 auto}

/* ── faq: the questions people ask before a first send, in the page's own
   accordion (the mobile nav's details pattern), answers set in body type.
   The FAQPage JSON-LD in <head> is GENERATED from this markup by
   homepage/seo-sync.js — edit the questions here, then run it. ── */
.gh-faq-list{max-width:820px;margin:52px auto 0;border-top:1px solid var(--tint-rose)}
.gh-faq-q{border-bottom:1px solid var(--tint-rose)}
.gh-faq-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
.gh-faq-q summary::-webkit-details-marker{display:none}
.gh-faq-q summary h3{font-size:18px;line-height:1.35}
.gh-faq-q summary::after{content:'';flex:0 0 auto;width:9px;height:9px;border-right:1.8px solid var(--red);border-bottom:1.8px solid var(--red);transform:rotate(45deg);margin-right:8px;transition:transform .2s ease}
.gh-faq-q[open] summary::after{transform:rotate(-135deg)}
.gh-faq-a{padding:0 0 24px;max-width:66ch}
.gh-faq-a p{font-size:16px;line-height:1.65}
.gh-faq-more{text-align:center;margin-top:36px}

/* ── finale: a light rounded band, headline up top, a strip of arch-shaped
   moment cards below — the hero's arch, echoed four times ── */
.gh-finale{padding-top:0}
.gh-finale-band{position:relative;overflow:hidden;border-radius:32px;text-align:center;padding:96px 48px 84px;background:
  radial-gradient(760px 460px at 12% -6%, var(--ice) 0%, rgba(229,245,255,0) 58%),
  radial-gradient(760px 480px at 92% 104%, var(--tint-red) 0%, rgba(255,228,234,0) 56%),
  var(--tint-pink)}
.gh-finale h2{font-size:clamp(40px,5vw,66px);letter-spacing:-.025em;line-height:1.05;max-width:16ch;margin:0 auto}
.gh-finale-band>p{font-size:17px;font-weight:600;color:var(--maroon);margin-top:16px}
.gh-finale-band .gh-btn{margin-top:30px}
.gh-finale-micro{display:block;font-size:13px;font-weight:600;color:var(--muted-sm);margin-top:14px}
.gh-finale-strip{display:flex;justify-content:center;align-items:flex-end;gap:22px;margin-top:60px}
.gh-fcard{position:relative;width:min(220px,21vw);aspect-ratio:4/5;border-radius:110px 110px 18px 18px;overflow:hidden;box-shadow:0 22px 54px rgba(86,0,36,.16);transition:transform .3s ease;flex:0 0 auto}
.gh-fcard img,.gh-fcard video{width:100%;height:100%;object-fit:cover}
.gh-fcard:nth-child(1){transform:rotate(-3deg) translateY(6px)}
.gh-fcard:nth-child(2){transform:rotate(1.5deg) translateY(-8px)}
.gh-fcard:nth-child(3){transform:rotate(-1.5deg)}
.gh-fcard:nth-child(4){transform:rotate(3deg) translateY(4px)}
/* NOTE: no keyframe animation on .gh-fcard — a transform keyframe would replace
   the per-card rotation outright (the hub's fan lesson). Rotation + hover only. */
.gh-fcard:hover{transform:rotate(0deg) translateY(-10px)}
.gh-finale-band .gh-spark-a{top:60px;left:9%;animation:ghTwinkle 4.6s ease-in-out infinite}
.gh-finale-band .gh-spark-b{top:120px;right:11%;animation:ghTwinkle 3.8s ease-in-out 1.2s infinite}

/* ── footer ── */
.gh-footer{background:#fff;border-top:1px solid var(--tint-rose);padding:80px 0 40px}
.gh-foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:44px}
.gh-foot-brand img{height:30px;width:auto}
.gh-foot-brand p{font-size:13.5px;line-height:1.6;color:var(--muted-sm);margin-top:18px;max-width:30ch}
.gh-foot-social{display:flex;gap:14px;margin-top:22px}
.gh-foot-social a{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--pill-border);display:flex;align-items:center;justify-content:center;color:var(--maroon);transition:border-color .18s ease,transform .18s ease}
.gh-foot-social a:hover{border-color:var(--red);transform:translateY(-2px)}
.gh-foot-col h4{font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.gh-foot-col a{display:block;font-size:14px;font-weight:500;color:var(--body);padding:5px 0}
.gh-foot-col a:hover{color:var(--red)}
.gh-foot-legal{margin-top:64px;padding-top:28px;border-top:1px solid var(--tint-rose);display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:12.5px;color:var(--muted-sm)}
.gh-foot-legal a{font-weight:600}
.gh-foot-legal a:hover{color:var(--red)}
.gh-foot-legal .gh-foot-copy{margin-right:auto;font-weight:600}

/* ── expert panel (from gifted-expert-panel.js) ── */
.hub-fab{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;align-items:center;gap:10px;background:#FA2357;border-radius:99px;padding:16px 24px 16px 19px;font:800 14.5px Montserrat,sans-serif;color:#fff;text-decoration:none;box-shadow:0 14px 40px rgba(250,35,87,.35);transition:transform .2s ease,box-shadow .2s ease,opacity .35s ease,visibility .35s}
.hub-fab:hover{transform:translateY(-2px);box-shadow:0 20px 52px rgba(250,35,87,.45);color:#fff}
.hub-fab svg{flex:0 0 auto}
.hub-fab-hide{opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none}
.hub-fab-in{animation:hubFabIn .45s ease-out}
.hub-fab-breath{animation:hubFabBreath .9s ease-in-out}
@keyframes hubFabIn{0%{opacity:0;transform:translateY(16px)}70%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}
@keyframes hubFabBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(max-width:640px){.hub-fab{right:16px;bottom:16px;padding:0;width:56px;height:56px;justify-content:center}.hub-fab span{display:none}}
.hub-bkp{position:fixed;padding:0;right:22px;bottom:92px;z-index:100001;width:400px;height:min(660px,calc(100vh - 130px));background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(86,0,36,.30);display:flex;flex-direction:column;overflow:hidden;transform-origin:100% 100%;transition:transform .3s ease,opacity .3s ease,visibility .3s}
.hub-bkp-hide{opacity:0;visibility:hidden;transform:translateY(14px) scale(.92);pointer-events:none}
.hub-bkp-head{display:flex;align-items:center;gap:9px;background:#FA2357;color:#fff;font:800 13.5px Montserrat,sans-serif;padding:13px 12px 13px 17px}
.hub-bkp-head span{outline:none}
.hub-bkp-x{margin-left:auto;background:none;border:0;color:#fff;font-size:16px;cursor:pointer;padding:4px 8px;line-height:1}
.hub-bkp-body{flex:1;position:relative;background:#FA2357}
.hub-bkp-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hub-bkp-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 13px Montserrat,sans-serif;color:rgba(255,255,255,.9)}
.hub-bkp-err{display:none;position:absolute;inset:0;background:#fff;padding:28px;text-align:center;font:500 14px/1.6 Montserrat,sans-serif;color:#604f52;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.hub-bkp-err a{display:inline-flex;border-radius:100px;padding:14px 28px;font:600 15px Montserrat,sans-serif;background:#FA2357;color:#fff;box-shadow:0 10px 30px rgba(250,35,87,.25)}
.hub-bkp-scrim{display:none}
@media(max-width:640px){
.hub-bkp{right:0;bottom:0;width:100%;height:100%;border-radius:0}
.hub-bkp-scrim{display:block;position:fixed;inset:0;z-index:100000;background:rgba(23,18,20,.5);transition:opacity .3s ease,visibility .3s}
.hub-bkp-scrim.hub-bkp-hide{opacity:0;visibility:hidden;pointer-events:none}
}

/* ── responsive ── */
@media(max-width:991px){
  .gh-hero-grid{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:56px}
  .gh-hero-grid>.gh-hero-visual{grid-column:1;grid-row:auto}
  .gh-hero-grid>.gh-hero-trust{grid-column:1;margin-top:0}
  .gh-hero-media{margin:0 auto}
  .gh-note-sent{left:0}
  .gh-note-reply{right:0}
  .gh-hero-fan{left:6px}
  .gh-stage-wrap,.gh-cat-acts,.gh-trust-grid,.gh-globe-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .gh-stage-wrap>*,.gh-cat-acts>*,.gh-trust-grid>*,.gh-globe-grid>*{min-width:0}
  .gh-cat-acts .gh-cat-copy{order:2}
  .gh-globe-band{padding:48px 32px}
  .gh-globe-grid .gh-globe-right{order:-1}
  .gh-globe-wrap{max-width:340px}
  .gh-proofbar-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;min-height:0}
  .gh-free-band{padding:72px 44px}
  .gh-free-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .gh-receipt{justify-self:start;transform:none;max-width:460px}
  .gh-finale-strip{flex-wrap:wrap}
  .gh-fcard{width:calc(50% - 12px);max-width:230px}
  .gh-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-foot-brand{grid-column:1/-1}
  .gh-nav-links{display:none}
  .gh-nav-burger{display:block}
}
@media(max-width:767px){
  .gh-wrap{padding:0 22px}
  section{padding:64px 0}
  /* logo + CTA + burger is all that fits; 'Log in' wrapped to two lines and the
     CTA to three, so Log in moves into the burger menu and the CTA gets compact */
  .gh-nav-in{gap:12px}
  .gh-nav-login{display:none}
  .gh-nav-right{gap:10px}
  .gh-nav .gh-btn{padding:9px 15px;font-size:13px;white-space:nowrap}
  .gh-hero{padding:56px 0 72px}
  /* the platform line is long; trim the type so the pill stays a single row */
  .gh-hero-badge{font-size:clamp(10.1px,2.86vw,11.6px);padding:8px 14px;gap:7px;letter-spacing:-.005em}
  .gh-hero h1{font-size:clamp(42px,11vw,58px)}
  .gh-hero-media{aspect-ratio:10/12;border-radius:180px 180px 22px 22px}
  .gh-hero-fan{left:-4px;bottom:6px;width:190px;height:130px}
  .gh-fan-card{width:128px}
  .gh-note-sent{top:6%;padding:11px 14px 11px 12px}
  .gh-note-reply{max-width:200px;bottom:24%}
  .gh-steps{grid-template-columns:minmax(0,1fr);gap:40px}
  .gh-faq-q summary{padding:18px 0}
  .gh-faq-q summary h3{font-size:16.5px}
  .gh-steps::before{display:none}
  .gh-tabs{border-radius:24px;width:100%;justify-content:flex-start;overflow-x:auto}
  .gh-scene-ui{width:54%}
  .gh-ui-br{right:8px;bottom:-18px}
  .gh-ui-bl{left:8px;bottom:-18px}
  .gh-mini:not(.gh-mini-tr){bottom:auto;top:64px;max-width:86%}
  .gh-mini-tr{max-width:74%}
  /* Below ~400px the stage is too small for both overlays and the inset app
     screenshot is ~149px wide, which conveys nothing anyway. The photograph,
     the chip and the label card carry the scene; the screenshot steps out. */
  @media(max-width:400px){ .gh-scene-ui{display:none} }
  .gh-globe-band{padding:40px 22px;border-radius:24px}
  .gh-globe-wrap{max-width:280px}
  .gh-cpanel{padding:22px 20px}
  /* the country panel reserved 205px + 230px side by side, which cannot fit a
     phone column — stack them so the card fan gets the full width to fade into */
  .gh-cpanel-left{flex:1 1 100%}
  .gh-cpanel-fanwrap{flex:1 1 100%;min-width:0}
  .gh-polaroids{grid-template-columns:minmax(0,1fr);gap:20px}
  .gh-pola:nth-child(2){transform:rotate(1.2deg)}
  .gh-free-band{padding:56px 26px;border-radius:24px}
  .gh-receipt{padding:28px 22px 24px}
  .gh-quote-card{width:320px;height:330px;padding:32px 24px 28px}
  .gh-quotes-marq{height:350px}
  .gh-finale h2{font-size:clamp(34px,9vw,48px)}
  .gh-finale-band{padding:64px 22px 56px;border-radius:24px}
  .gh-finale-strip{gap:14px;margin-top:44px}
  .gh-fcard{width:calc(50% - 7px);border-radius:80px 80px 14px 14px}
  .gh-foot-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .gh-marq-track img{width:120px;height:76px}
  .gh-marq{height:94px}
}

/* ── reduced motion: everything visible, nothing moving ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.gh-js .gh-reveal{opacity:1;transform:none;transition:none}
  html.gh-js [data-enter]{opacity:1;transform:none;transition:none}
  .gh-love svg path{stroke-dashoffset:0;transition:none}
  .gh-note{animation:none;opacity:1}
  .gh-wash-a,.gh-wash-b{animation:none}
  .gh-fan-card .gh-fan-float{animation:none}
  .gh-marq-track,.gh-quotes-track{animation:none}
  .gh-spark-hero{animation:none}
  .gh-scene{transition:opacity .2s ease;filter:none;transform:none}
  .gh-scene-ui,.gh-stage-chip,.gh-mini{transition:opacity .2s ease}
  .gh-tabs.gh-auto .gh-tab[aria-selected="true"]::before{animation:none;background:conic-gradient(rgba(255,255,255,.85) 0 360deg)}
  .gh-steps::before{transform:scaleX(1);transition:none}
  .gh-step .gh-step-num{transition:none}
  html.gh-js .gh-cpanel{animation:none}
  html.gh-js .gh-cpanel-fan .gh-gcm{animation:none}
  .gh-globe-skel{animation:none}
  .gh-globe-svg{transition:none}
  .gh-skel,.gh-ovl-grid .gh-skel{animation:none}
  .gh-finale-band .gh-spark-a,.gh-finale-band .gh-spark-b{animation:none}
  .hub-fab{transition:none}
  .hub-fab-in,.hub-fab-breath{animation:none}
  .hub-bkp{transition:opacity .2s ease,visibility .2s}
  .hub-bkp-hide{transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ── shell guard: the same protection, pointing the other way ──
   The rules above stop Webflow's stylesheet reaching into this page. This block
   stops THIS page's stylesheet reaching into Webflow's navbar and footer, which
   it otherwise does: the sheet is loaded page-wide and its bare-element rules
   outrank Webflow's element rules by source order, on components this page does
   not own. img{display:block} was turning the 13px inline arrow glyphs in the
   mega-menu and the footer into blocks on their own line, and body{font-size:16px}
   was inflating the whole shell from Webflow's inherited 15px.

   The scope is written with :where(), which contributes NOTHING to specificity.
   That is the whole trick: each rule below lands at plain element specificity,
   so it beats this sheet's own bare-element rules (same specificity, later in
   the file) and loses to every one of Webflow's class rules. A first attempt
   used .navbar ul instead and broke the nav by outranking .nav_list_listing.
   Only the shell's inherited typography is set at class level, because nothing
   of Webflow's competes for it there. */
.navbar,header.main_head,footer.main_footr{font-size:15px;font-weight:500;line-height:1.8;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
:where(.navbar,header.main_head,footer.main_footr) img,
:where(.navbar,header.main_head,footer.main_footr) video{display:inline-block;max-width:100%;vertical-align:middle}
:where(.navbar,header.main_head,footer.main_footr) a{color:var(--primary-color);text-decoration:none;transition:all .3s ease-in-out}
:where(.navbar,header.main_head,footer.main_footr) p{margin:0 0 10px}
:where(.navbar,header.main_head,footer.main_footr) figure{margin:0 0 10px}
:where(.navbar,header.main_head,footer.main_footr) :is(ul,ol){margin:0 0 10px;padding-left:40px}
:where(.navbar,header.main_head,footer.main_footr) :is(button,input,select,textarea){font-size:inherit;line-height:inherit}

/* ── the rebuild's own nav and footer ship here; Webflow's are hidden ── */
header.main_head,.main_head .navbar.w-nav,footer.main_footr{display:none!important}