/* ===========================================================================
   The call form (fields, country dropdown, sent/fail states) + the
   "Call me now" modal + the .closer sections that embed the form.
   Markup and behaviour live in call-modal.js (single source since 2026-08-11).
   Depends on: tokens.css (colors, fonts, radii) + flag-icons CDN (country flags).
   2026-08-12 sweep: the old inline-section rules (.seeit .reveal, .seeit-dots,
   the 100px .seeit-h) died with the sections; .seeit itself survives as the
   modal's inner wrapper.
   =========================================================================== */

.seeit{position:relative;background:transparent;overflow:hidden;padding:64px 24px 140px;display:flex;flex-direction:column;align-items:center}
.seeit-h{position:relative;z-index:2;font-family:var(--display);text-align:center}   /* sizing/colour live on .call-modal .seeit-h below */
.seeit-form{position:relative;z-index:2;width:548px;max-width:100%;display:flex;flex-direction:column;gap:40px;margin-top:32px}
.seeit-sub{font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--panel)}
.seeit-fields{display:flex;flex-direction:column;gap:44px}
.field{position:relative}
.field label{display:block;font-family:var(--sans);font-weight:400;font-size:16px;color:var(--white);margin-bottom:8px}
.field input{width:100%;height:46px;border:1px solid var(--deep);border-radius:var(--radius-sm);background:var(--field-fill);color:var(--panel);font-family:var(--sans);font-size:16px;padding:0 16px;box-sizing:border-box}
.field input::placeholder{color:var(--muted-ink)}
.field .seeit-company::placeholder{color:var(--soft)}   /* two classes so it beats `.field input::placeholder` (--muted-ink) in the embedded form; class not id because the form renders twice (modal + closer) */
.field input:focus{outline:2px solid var(--action);outline-offset:1px}
/* phone field: country-code dropdown + number */
.phone-field{display:flex;align-items:center;height:46px;background:var(--field-fill);border:1px solid var(--deep);border-radius:var(--radius-sm);box-sizing:border-box}
.cc{position:relative;height:100%;display:flex;align-items:center}
.cc-toggle{display:flex;align-items:center;gap:8px;height:100%;padding:0 12px 0 16px;background:transparent;border:none;cursor:pointer;font-family:var(--sans);font-size:16px;color:var(--soft)}
.cc .fi{width:22px;height:16px;border-radius:var(--radius-xs);flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.cc-caret{width:12px;height:12px;flex:none;color:var(--soft);transition:transform .2s ease}
.cc.open .cc-caret{transform:rotate(180deg)}
.cc-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:288px;padding:8px;background:var(--white);border-radius:var(--radius-md);box-shadow:0 16px 40px rgba(0,5,30,.35);display:none}
.cc.open .cc-menu{display:block}
/* three classes deep ON PURPOSE: the search input sits inside .field, whose dark-page
   styling (.field input, .call-modal .field input) paints inputs in pale --panel text.
   This menu is WHITE, so the search must win those rules with dark ink text. */
.cc .cc-menu .cc-search{width:100%;height:36px;box-sizing:border-box;border:1px solid #d4d9e6;border-radius:var(--radius-sm);padding:0 12px;margin-bottom:8px;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white)}
.cc .cc-menu .cc-search::placeholder{color:var(--muted-ink)}
.cc .cc-menu .cc-search:focus{outline:2px solid var(--action);outline-offset:0}
.cc-list{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto}
.cc-list li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.2}
.cc-list li:hover,.cc-list li.sel,.cc-list li.act{background:var(--surface)}   /* .act = keyboard active option (aria-activedescendant) */
.cc-list .cc-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-list .cc-dial{color:var(--muted-ink);flex:none}
.cc-empty{padding:12px;color:var(--muted-ink);font-family:var(--sans);font-size:16px}
.phone-divider{width:1px;height:22px;background:var(--deep);flex:none}
.phone-field input{flex:1;height:100%;border:none;background:transparent;color:var(--panel);font-family:var(--sans);font-size:16px;padding:0 16px;box-sizing:border-box;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.phone-field input:focus{outline:none}
.phone-field:focus-within{outline:2px solid var(--action);outline-offset:1px}
/* validation */
.field-err{position:absolute;top:100%;left:0;right:0;margin-top:8px;font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--error-soft);opacity:0;pointer-events:none;transition:opacity .18s ease}
.field.invalid > .field-err{opacity:1}
.field.invalid input,.field.invalid .phone-field{outline:2px solid var(--error);outline-offset:1px}
.seeit-success{display:none;margin:16px 0 0;text-align:center;font-family:var(--sans);font-size:16px;color:var(--soft)}
.seeit-success.show{display:block}
/* network/validation failure from the link-intake POST — same slot as the success line */
.seeit-fail{display:none;margin:16px 0 0;text-align:center;font-family:var(--sans);font-size:16px;color:var(--error-soft)}
.seeit-fail.show{display:block}
.seeit-sent{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px 0}
.seeit-sent.show{display:flex}
.seeit-sent-badge{width:48px;height:48px;border-radius:50%;background:rgba(36,69,157,.3);border:1px solid var(--action);display:flex;align-items:center;justify-content:center}
.seeit-sent-badge svg{width:24px;height:24px;stroke:var(--white)}
.seeit-sent-title{margin:0;font-family:var(--display);font-weight:400;font-size:32px;line-height:40px;color:var(--white)}
.seeit-sent-sub{margin:0;max-width:480px;font-family:var(--sans);font-size:16px;line-height:24px;color:var(--panel);text-wrap:balance}
.seeit-sent-back{margin-top:4px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-size:15px;color:var(--soft);text-decoration:none}
.seeit-sent-back u{text-decoration:underline;text-underline-offset:3px}
.seeit-sent-back:hover{color:var(--panel)}
.seeit-sent-back:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:var(--radius-xs)}
.seeit-cta{margin-top:8px;align-self:center}
.seeit-cta svg{width:20px;height:20px;display:block}
/* consent disclosure under the CTA (2026-08-15) — notice at the point of submission */
.seeit-consent{margin:0;text-align:center;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--soft)}
.seeit-consent a{color:var(--soft);text-decoration:underline;text-underline-offset:2px}
.seeit-consent a:hover{color:var(--white)}

@media (max-width:640px){
  .seeit-fields{gap:20px}                                          /* tighter form */
  /* error text sits IN the flow on mobile so it pushes the next field down instead of overlapping its label */
  .field-err{position:static;top:auto;left:auto;right:auto;max-height:0;margin-top:0;overflow:hidden;transition:max-height .2s ease, margin-top .2s ease}
  .field.invalid > .field-err{max-height:48px;margin-top:8px}
  .field input{height:40px}                                        /* smaller inputs */
  .phone-field{height:40px}                                        /* match the phone field to the other two */
}

/* ---- "Call me now" modal (call-modal.js) ---------------------------------
   The form's single home. .seeit inside here is the same markup the inline
   sections used to carry, so it inherits every field style above; only the
   framing is overridden. */
/* Centred explicitly rather than relying on the UA's `margin:auto` for :modal —
   setting width/max-width on the dialog defeated it and pinned the box top-left.
   The country dropdown carries its own max-height:240px scroll, so letting the
   dialog scroll on short screens cannot trap it. */
.call-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;
  border:0;padding:0;max-width:min(900px,calc(100vw - 32px));width:100%;
  max-height:calc(100dvh - 32px);overflow-y:auto;
  border-radius:var(--radius-md);color:var(--white);
  background:#000;overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.55)}
/* A blue glow centred in the modal, falling off to black well before the edges — so most of the
   panel reads black and the light sits behind the form rather than washing the whole surface.
   Replaces the off-centre skewed ellipse converted from Figma, which spread blue to every corner.
   The three sizing numbers are the ones to tune: the radii, and where the last blue stop lands. */
.call-modal::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 46%,
    var(--deep) 0%, #1B3474 34%, #122451 52%, var(--ink) 66%,
    #060C1B 80%, #03060E 90%, #000 100%)}
.call-modal > *{position:relative;z-index:1}
/* ---- open/close motion: the panel expands out of the button that was clicked -------------
   call-modal.js sets transform-origin and --open-x/--open-y per open, so the collapsed state
   sits over that button. Transform + opacity only, so this composites and never relayouts.
   400ms out on a decelerating curve, 260ms back on a faster one — closing should not make the
   reader wait. Reduced motion skips both states entirely. */
.call-modal::backdrop{transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){
  .call-modal,.call-modal.is-opening,.call-modal.is-closing{transition:none;transform:translate(-50%,-50%);opacity:1}
}
.call-modal::backdrop{background:rgba(3,8,22,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.call-modal .seeit{padding:112px 40px 56px}   /* Figma: title top edge at ~114 of 700 */
.call-modal .seeit-h{font-size:40px;line-height:44px;margin:0;color:var(--white);font-weight:400}
.call-modal .seeit-form{margin-top:24px;width:432px;max-width:100%;margin-left:auto;margin-right:auto;gap:32px}
.call-modal .seeit-fields{gap:28px}
.call-modal .seeit-sub{text-align:center;color:var(--soft)}   /* Figma 879:6001 */
/* The shared field styling is --field-fill (--deep at 14%) on a --deep border. That was built
   for the flat --ink page background; on this gradient the panel behind the fields is already
   --deep, so fill and border both vanish into it. Darker fill + a --soft border restores the
   affordance and lifts the placeholder well clear of the 4.5:1 line. */
.call-modal .field input,
.call-modal .phone-field{background:rgba(6,16,41,.55);border-color:rgba(179,198,249,.42)}
.call-modal .field input::placeholder{color:rgba(179,198,249,.75)}
.call-modal .field input:hover,
.call-modal .phone-field:hover{border-color:rgba(179,198,249,.62)}
.call-modal .field input:focus,
.call-modal .phone-field:focus-within{border-color:var(--soft);background:rgba(6,16,41,.72)}
.call-modal .field label{color:var(--white)}
/* Figma 879:5998: a soft 340px halo sits behind the title */
.call-modal .seeit{position:relative}
.call-modal .seeit::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:34px;width:340px;height:340px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgba(58,111,255,.28), rgba(58,111,255,0) 100%)}
.call-modal-x{position:absolute;top:14px;right:14px;z-index:5;width:36px;height:36px;display:flex;
  align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--tint-soft);color:var(--soft)}
.call-modal-x:hover{background:var(--tint-soft-hover);color:var(--white)}
.call-modal-x svg{width:18px;height:18px}
.call-modal-x:focus-visible{outline:2px solid var(--action);outline-offset:2px}
@media (max-width:640px){
  .call-modal .seeit{padding:52px 20px 32px}
  .call-modal .seeit-h{font-size:32px;line-height:40px;white-space:normal;margin-top:0}
  .call-modal .seeit-form{width:100%}
}

/* ============================================================================
   Closing CTA (.closer) — moved here from index.css 2026-08-06 when how-it-works
   adopted the same block. seeit.css is already loaded by every page that carries
   this CTA, so the rules live in one place rather than being duplicated per page.
   ============================================================================ */
/* ---- Closing CTA (.closer) · Figma 844:3015 + 844:3012 ----------------------------------
   Shard backdrop and text both measured off the design. The shard group is one
   exported asset (never redrawn): its natural box is 1039x604, sitting from -142
   to 896 across the 1360 content column, i.e. it bleeds off the left edge. Both
   numbers are written as percentages of the content column so the whole cluster
   scales with the grid instead of drifting.
   The text is right-aligned in the right column (632 wide). Figma had it 139px
   further left; snapped to the grid, same call as the testimonial. */
.closer{position:relative;background:transparent;overflow:hidden;padding:24px 0 144px}   /* 144 bottom: 96 left the button almost touching the footer */
/* Figma 884:6125 (2026-08-06). Was a right-aligned block with a shard graphic behind it; now a
   single centred stack: star, headline, sub, button. .closer-stage / .closer-shards are gone
   with the artwork. Type is 56/64 and 32/40 — both pairs already in use elsewhere on the site
   (.shift-h and the tablet panel heading), not new values. Figma's own leading on the headline
   is 44 on a 56px face, which would collide the moment it wraps, so it takes our 64.
   Spacing is on the 8 grid (48 / 24 / 32) rather than Figma's literal 44 / 25 / 30. */
.closer-say{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.closer-star-flat{width:72px;height:auto;display:block}   /* 53x76 in Figma; 72 wide keeps the mass the old 104px star had */
/* ===== EXPERIMENT: scroll-assembled star (2026-08-06) ==============================
   The 8 petals are the star's real parts from Figma 847:4408 — a gradient-mesh fill plus
   a clip mask each. Reassembled they match the flat export they replace.
   Everything below only takes effect once home-closer-assemble.js adds .closer-assembled,
   so deleting that one script tag restores the flat <img> and the plain entrance.
   --k is written per petal by the script: 1 = scattered, 0 = home. */
.closer-star{display:none}
.closer-assembled .closer-star-flat{display:none}
.closer-assembled .closer-star{display:block;position:relative;width:104px;height:101px}
.closer-star .sp{position:absolute;display:block;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  --k:1;
  opacity:calc(1 - var(--k));
  transform:translate(calc(var(--ux) * var(--k) * var(--spread,2.6) * 104px),
                      calc(var(--uy) * var(--k) * var(--spread,2.6) * 104px))
            rotate(calc(var(--rot) * var(--k)))
            scale(calc(1 - .35 * var(--k)))}
.closer-star .sp1{left:19.544%;top:16.793%;width:50.028%;height:78.975%;background-image:url("img/home/star/petal-1.svg");-webkit-mask-image:url("img/home/star/mask-1.svg");mask-image:url("img/home/star/mask-1.svg");--ux:-0.665;--uy:0.747;--rot:-28deg}
.closer-star .sp2{left:0.000%;top:16.793%;width:70.133%;height:62.182%;background-image:url("img/home/star/petal-2.svg");-webkit-mask-image:url("img/home/star/mask-2.svg");mask-image:url("img/home/star/mask-2.svg");--ux:-0.991;--uy:-0.137;--rot:28deg}
.closer-star .sp3{left:13.465%;top:14.010%;width:74.247%;height:58.056%;background-image:url("img/home/star/petal-3.svg");-webkit-mask-image:url("img/home/star/mask-3.svg");mask-image:url("img/home/star/mask-3.svg");--ux:0.087;--uy:-0.996;--rot:-28deg}
.closer-star .sp4{left:27.679%;top:0.000%;width:54.704%;height:76.960%;background-image:url("img/home/star/petal-4.svg");-webkit-mask-image:url("img/home/star/mask-4.svg");mask-image:url("img/home/star/mask-4.svg");--ux:0.409;--uy:-0.913;--rot:28deg}
.closer-star .sp5{left:30.952%;top:20.248%;width:62.652%;height:70.627%;background-image:url("img/home/star/petal-5.svg");-webkit-mask-image:url("img/home/star/mask-5.svg");mask-image:url("img/home/star/mask-5.svg");--ux:0.915;--uy:0.404;--rot:-28deg}
.closer-star .sp6{left:22.442%;top:31.475%;width:77.801%;height:49.611%;background-image:url("img/home/star/petal-6.svg");-webkit-mask-image:url("img/home/star/mask-6.svg");mask-image:url("img/home/star/mask-6.svg");--ux:0.880;--uy:0.475;--rot:28deg}
.closer-star .sp7{left:13.278%;top:31.475%;width:67.421%;height:69.187%;background-image:url("img/home/star/petal-7.svg");-webkit-mask-image:url("img/home/star/mask-7.svg");mask-image:url("img/home/star/mask-7.svg");--ux:-0.189;--uy:0.982;--rot:-28deg}
.closer-star .sp8{left:26.557%;top:19.576%;width:41.893%;height:80.415%;background-image:url("img/home/star/petal-8.svg");-webkit-mask-image:url("img/home/star/mask-8.svg");mask-image:url("img/home/star/mask-8.svg");--ux:-0.253;--uy:0.967;--rot:28deg}
/* the pin: the section holds the viewport while .closer-hold supplies the scroll distance.
   Same mechanism as .stats / .stats-hold higher up the page. */
.closer-pin{position:relative}   /* bounds the sticky section so it releases before the footer */
.closer.closer-pinned{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
.closer-assembled .frame{width:100%}
@media (prefers-reduced-motion:reduce){
  .closer-star{display:none !important}
  .closer-star-flat{display:block !important}
  .closer.closer-pinned{position:static;min-height:0}
}
.closer .cm-h{margin:32px 0 0;font-family:var(--display);font-weight:600;font-size:48px;line-height:56px;color:var(--white)}
.closer-sub{margin:24px 0 0;max-width:560px;font-family:var(--sans);font-weight:300;font-size:20px;line-height:32px;color:var(--white)}   /* same as .testi-quote: Geist 300, 20/32 */
/* embedded call form (2026-08-11, Tony/Chad): title + sub above, then the fields directly.
   Same 432 column the modal uses; fields left-aligned under the centred copy. The base
   --ink-page field styling is exactly what these dark closers are, so nothing re-skins. */
.closer-form{width:432px;max-width:100%;margin:32px auto 0;text-align:left}
.closer-form .seeit-form{width:100%;margin-top:0;gap:32px}
.closer-form .seeit-fields{gap:28px}
/* Entrance (2026-08-06), driven by home-closer-intro.js. The headline uses the SAME per-letter
   reveal as the hero — fade plus a blur that resolves over a longer curve — and the button uses
   the same pop as the panel CTAs. .closer-anim is added by the script, so with no JS the copy
   just renders; and it is removed when the run ends, so the resting headline carries no filter
   and keeps normal subpixel antialiasing (same reason as the hero). */
.closer-anim .closer-star{opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1)}
.closer-anim.go .closer-star{opacity:1;transform:none}
.closer-anim .cm-h{opacity:0;animation:closerHFailsafe 0s 3s forwards}
.closer-anim .cm-h.split{opacity:1;animation:none}
@keyframes closerHFailsafe{to{opacity:1}}
.closer-anim .cm-h .w{white-space:nowrap}
.closer-anim .cm-h .c{opacity:0;filter:blur(10px);
  transition:opacity .42s cubic-bezier(.25,.46,.45,.94), filter .58s cubic-bezier(.25,.46,.45,.94)}
.closer-anim .cm-h .c.on{opacity:1;filter:blur(0)}
.closer-anim .closer-sub{opacity:0;transform:translateY(-16px)}
.closer-anim .closer-sub.on{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.33,1,.68,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
/* the embedded form glides in like the sub does — a whole form popping from 60% (the old
   button move) reads as a toy at this size */
.closer-anim .closer-form{opacity:0;transform:translateY(-16px)}
.closer-anim .closer-form.on{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.33,1,.68,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  .closer-anim .closer-star,.closer-anim .cm-h,.closer-anim .cm-h .c,
  .closer-anim .closer-sub,.closer-anim .closer-form{
    opacity:1;transform:none;filter:none;transition:none;animation:none}
}

@media (max-width:1024px){
  .closer-star-flat{width:64px}
  .closer-assembled .closer-star{width:88px;height:85px}
  .closer .cm-h{font-size:40px;line-height:44px;margin-top:40px}
}
@media (max-width:640px){
  .closer{padding:96px 0 72px}   /* was 24: the Commerce logo sat almost on top of the star */
  .closer-star-flat{width:48px}
  .closer-assembled .closer-star{width:72px;height:70px}
  .closer .cm-h{font-size:32px;line-height:40px;margin-top:32px}
  .closer-form{margin-top:32px}
}

/* ---- the isotype builds itself (2026-08-13, Victoria) ------------------------------------
   In the how-it-works and use-cases closers the mark is an INLINE svg (not the img) so its
   three chevrons can cascade in as part of the form's entrance: big, outer, then the core.
   The svg carries .reveal only as the trigger — the container is exempted from the generic
   reveal fade, the chevrons do the moving. The homepage keeps the flat img: its star has
   the scroll-assembly show and two star animations would fight. */
svg.closer-star-flat.reveal{opacity:1;transform:none;transition:none;overflow:visible}
/* start: scattered in three directions, tilted, as faint OUTLINES (no fill).
   flight: they converge on their resting spots. reunion: the fills snap solid
   together and the outlines dissolve — assembly, then the boom. */
.closer-star-flat .st{opacity:0;fill-opacity:0;stroke:var(--soft);stroke-width:1;stroke-opacity:.9;
  transform-box:fill-box;transform-origin:center}
.closer-star-flat .st1{transform:translate(-30px,14px) rotate(-14deg)}
.closer-star-flat .st2{transform:translate(28px,-16px) rotate(12deg)}
.closer-star-flat .st3{transform:translate(-6px,-28px) rotate(-8deg)}
.closer-star-flat.in .st{opacity:1;transform:none;fill-opacity:1;stroke-opacity:0;
  transition:opacity .35s ease,
    transform .9s cubic-bezier(.22,.61,.36,1),
    fill-opacity .3s ease .62s,      /* the boom: fills land together just as the flight settles */
    stroke-opacity .4s ease .62s}
@media (prefers-reduced-motion:reduce){
  .closer-star-flat .st{opacity:1;transform:none;fill-opacity:1;stroke-opacity:0;transition:none}
}

/* First/Last name split (Irina, 2026-08-14): the two fields share one row on desktop and
   stack on phones. Each half keeps the full .field treatment. */
.field-row{display:flex;gap:16px}
.field-row .field{flex:1 1 0;min-width:0}
@media (max-width:640px){ .field-row{flex-direction:column;gap:0} }