/* ============================================================================
   GoogleViews — Components
   ========================================================================= */

/* ----------------------------------------------------------- 1. THE SPARK
   Gemini's 4-pointed star, using the official 192×192 outline: 4-fold
   symmetric, tips inset 8px, concave sides swept by large-radius arcs.   */
.spark{
  --spark-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'%3E%3Cpath d='M164.93 86.68c-13.56-5.84-25.42-13.84-35.6-24.01-10.17-10.17-18.18-22.04-24.01-35.6-2.23-5.19-4.04-10.54-5.42-16.02C99.45 9.26 97.85 8 96 8s-3.45 1.26-3.9 3.05c-1.38 5.48-3.18 10.81-5.42 16.02-5.84 13.56-13.84 25.43-24.01 35.6-10.17 10.16-22.04 18.17-35.6 24.01-5.19 2.23-10.54 4.04-16.02 5.42C9.26 92.55 8 94.15 8 96s1.26 3.45 3.05 3.9c5.48 1.38 10.81 3.18 16.02 5.42 13.56 5.84 25.42 13.84 35.6 24.01 10.17 10.17 18.18 22.04 24.01 35.6 2.24 5.2 4.04 10.54 5.42 16.02A4.03 4.03 0 0 0 96 184c1.85 0 3.45-1.26 3.9-3.05 1.38-5.48 3.18-10.81 5.42-16.02 5.84-13.56 13.84-25.42 24.01-35.6 10.17-10.17 22.04-18.18 35.6-24.01 5.2-2.24 10.54-4.04 16.02-5.42A4.03 4.03 0 0 0 184 96c0-1.85-1.26-3.45-3.05-3.9-5.48-1.38-10.81-3.18-16.02-5.42Z'/%3E%3C/svg%3E");
  width:1em;height:1em;flex:none;
  display:inline-block;
  background-image:var(--gradient-gemini);
  -webkit-mask:var(--spark-mask) center/contain no-repeat;
  mask:var(--spark-mask) center/contain no-repeat;
}
.spark--flat{background-image:none;background-color:currentColor}
.spark--blue{background-image:var(--gradient-blue)}
.spark--sm{width:.8em;height:.8em}

@keyframes sparkPulse{
  0%,100%{transform:scale(1) rotate(0deg);opacity:1}
  50%{transform:scale(1.16) rotate(24deg);opacity:.82}
}
.spark--pulse{animation:sparkPulse 3.4s var(--ease-standard) infinite}

/* --------------------------------------------------------- 2. EYEBROW PILL */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px 7px 12px;
  border-radius:var(--r-full);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--e1);
  font-size:.815rem;
  font-weight:500;
  color:var(--text-2);
  white-space:nowrap;
}
.eyebrow--glass{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-border);
}
.eyebrow strong{color:var(--text);font-weight:600}

/* --------------------------------------------------------------- 3. BUTTONS */
.btn{
  --btn-h:52px;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--btn-h);
  padding-inline:26px;
  border-radius:var(--r-full);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.008em;
  white-space:nowrap;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  transition:transform var(--d-fast) var(--spring-spatial-fast),
             box-shadow var(--d-base) var(--ease-standard),
             background var(--d-fast) var(--spring-effects),
             border-color var(--d-fast) var(--spring-effects),
             color var(--d-fast) var(--spring-effects);
}
/* M3 Expressive: pressed state tightens the corner */
.btn:active{transform:scale(.96);border-radius:var(--r-lg)}
.btn svg,.btn .spark{flex:none}

/* Primary — the Gemini gradient, sheen sweeping on hover */
.btn--primary{
  color:#fff;
  background:var(--gradient-gemini-h);
  background-size:200% 100%;
  background-position:0% 50%;
  box-shadow:0 2px 6px rgba(66,133,244,.24),0 8px 22px -8px rgba(155,114,203,.5);
  transition:background-position var(--d-slow) var(--ease-standard),
             transform var(--d-fast) var(--spring-spatial-fast),
             box-shadow var(--d-base) var(--ease-standard);
}
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gradient-sheen);
  transform:translateX(-120%);
  transition:transform 780ms var(--ease-standard);
}
.btn--primary:hover{
  background-position:100% 50%;
  box-shadow:0 4px 10px rgba(66,133,244,.28),0 14px 32px -10px rgba(217,101,112,.55);
}
.btn--primary:hover::after{transform:translateX(120%)}

/* Tonal — Gemini's soft filled secondary */
.btn--tonal{color:var(--text);background:var(--surface-3);border:1px solid transparent}
.btn--tonal:hover{background:var(--surface-4)}

/* Ghost — outlined */
.btn--ghost{color:var(--text);background:var(--surface);border:1px solid var(--border-strong)}
.btn--ghost:hover{background:var(--surface-1);border-color:var(--outline)}

/* Glass — for sitting over the aurora */
.btn--glass{
  color:var(--text);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--e2);
}
.btn--glass:hover{box-shadow:var(--e3)}

.btn--lg{--btn-h:58px;padding-inline:32px;font-size:1.05rem}
.btn--sm{--btn-h:40px;padding-inline:18px;font-size:.92rem}
.btn--block{display:flex;width:100%}

/* Text link with a nudging arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;color:var(--primary);
  font-family:var(--font-display);
  letter-spacing:-.008em;
}
.link-arrow svg{transition:transform var(--d-base) var(--ease-emph-dec)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ----------------------------------------------------------------- 4. CARDS */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:clamp(24px,2.6vw,32px);
  box-shadow:var(--shadow-card);
  transition:transform var(--d-med) var(--spring-spatial),
             box-shadow var(--d-base) var(--ease-standard),
             background var(--d-base) var(--ease-standard),
             border-color var(--d-base) var(--ease-standard);
}
.card--pad-lg{padding:clamp(28px,3.4vw,44px)}
.card--flat{box-shadow:none}
.card--raised{box-shadow:var(--shadow-card-hover)}
/* Depth from the tonal ramp rather than shadow — the Gemini way */
.card--sunken{background:var(--surface-1);border-color:transparent;box-shadow:none}
.card--tonal{background:var(--surface-2);border-color:transparent;box-shadow:none}

.card--hover:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card-hover);
  border-color:transparent;
}

/* Glass card — frosted, for stacking over the aurora */
.card--glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--e4);
}
.card--glass-strong{background:var(--glass-bg-strong)}

/* Gradient hairline that lights up on hover */
.glow-edge::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:var(--gradient-gemini);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity var(--d-base) var(--ease-standard);
  pointer-events:none;
}
.glow-edge:hover::before,.glow-edge--always::before{opacity:1}

/* Card carrying the full gradient as its surface */
.card--gemini{
  background:var(--gradient-gemini);
  border:none;color:#fff;overflow:hidden;
}
.card--gemini h2,.card--gemini h3,.card--gemini strong{color:#fff}
.card--gemini .muted,.card--gemini .lead,.card--gemini .dim{color:rgba(255,255,255,.9)}

/* ------------------------------------------------------------ 5. ICON TILES */
.icon-tile{
  width:52px;height:52px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-lg);
  background:var(--surface-3);
  color:var(--text);
  transition:transform var(--d-med) var(--spring-spatial),
             background var(--d-base) var(--ease-standard);
}
.icon-tile svg{width:26px;height:26px}
.icon-tile--blue{background:var(--primary-container);color:var(--on-primary-container)}
.icon-tile--green{background:var(--tertiary-container);color:var(--tertiary)}
.icon-tile--red{background:rgba(234,67,53,.12);color:#B3261E}
.icon-tile--yellow{background:rgba(251,188,4,.18);color:#8A6A00}
.icon-tile--violet{background:rgba(155,114,203,.15);color:#6E4AA0}
.icon-tile--gemini{background:var(--gradient-gemini);color:#fff}.card--hover:hover .icon-tile{transform:scale(1.07) rotate(-4deg)}

.icon-tile--lg{width:64px;height:64px;border-radius:var(--r-lg-inc)}
.icon-tile--lg svg{width:31px;height:31px}

/* ------------------------------------------------------------------ 6. NAV */
.nav{
  position:fixed;inset:0 0 auto 0;
  z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--d-base) var(--ease-standard),
             box-shadow var(--d-base) var(--ease-standard),
             border-color var(--d-base) var(--ease-standard);
}
.nav.is-stuck{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur-light);
  backdrop-filter:var(--glass-blur-light);
  border-bottom-color:var(--border);
}
.nav__inner{
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
  display:flex;align-items:center;gap:var(--s-6);
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand__mark{height:32px;width:auto}
.brand__name{
  font-family:var(--font-display);
  font-size:1.2rem;font-weight:600;letter-spacing:-.028em;
  color:var(--text);
}
.nav__links{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav__link{
  position:relative;
  padding:9px 15px;
  border-radius:var(--r-full);
  font-size:.94rem;font-weight:500;
  color:var(--text-2);
  transition:color var(--d-fast) var(--spring-effects),
             background var(--d-fast) var(--spring-effects);
}
.nav__link:hover{color:var(--text);background:var(--surface-2)}
.nav__link.is-active{color:var(--text);font-weight:600}
.nav__link.is-active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2.5px;
  border-radius:2px;background:var(--gradient-gemini-h);
}
.nav__actions{display:flex;align-items:center;gap:10px;flex:none}.nav__burger{
  display:none;
  width:44px;height:44px;
  border-radius:var(--r-full);
  place-items:center;color:var(--text);
}
.nav__burger:hover{background:var(--surface-2)}
.burger-box{width:20px;height:14px;position:relative}
.burger-box span{
  position:absolute;left:0;height:2px;width:100%;border-radius:2px;
  background:currentColor;
  transition:transform var(--d-base) var(--ease-emph),
             opacity var(--d-fast) var(--ease-standard),
             top var(--d-base) var(--ease-emph);
}
.burger-box span:nth-child(1){top:0}
.burger-box span:nth-child(2){top:6px}
.burger-box span:nth-child(3){top:12px}
body.menu-open .burger-box span:nth-child(1){top:6px;transform:rotate(45deg)}
body.menu-open .burger-box span:nth-child(2){opacity:0}
body.menu-open .burger-box span:nth-child(3){top:6px;transform:rotate(-45deg)}

.nav__drawer{
  position:fixed;inset:var(--nav-h) 0 0 0;
  z-index:99;
  background:var(--bg);
  padding:var(--s-6) clamp(20px,5vw,40px) var(--s-9);
  display:flex;flex-direction:column;gap:4px;
  transform:translateY(-8px);
  opacity:0;visibility:hidden;
  transition:opacity var(--d-base) var(--ease-standard),
             transform var(--d-base) var(--ease-emph-dec),
             visibility var(--d-base);
  overflow-y:auto;
}
body.menu-open .nav__drawer{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
.nav__drawer a.nav__link{
  padding:15px 18px;font-size:1.1rem;font-weight:500;
  border-radius:var(--r-lg);color:var(--text);
}
.nav__drawer a.nav__link.is-active::after{display:none}
.nav__drawer a.nav__link.is-active{background:var(--surface-2);font-weight:600}
.nav__drawer .btn{margin-top:var(--s-5)}

@media (max-width:1060px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__actions{margin-left:auto}
  .nav__actions .btn--nav{display:none}
}

/* --------------------------------------------------------------- 7. STARS */
.stars{display:inline-flex;gap:2px;color:#FBBC04;flex:none}
.stars svg{width:1.05em;height:1.05em;fill:currentColor}
.stars--lg svg{width:1.5em;height:1.5em}

/* ---------------------------------------------------------------- 8. STATS */
.stat{text-align:center}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.3rem,4.4vw,3.3rem);
  font-weight:500;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  background-image:var(--gradient-gemini-h);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.stat__label{margin-top:12px;color:var(--text-2);font-size:.95rem;line-height:1.5}

/* ---------------------------------------------------------------- 9. STEPS */
.step__num{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  font-family:var(--font-display);
  font-weight:600;font-size:1.05rem;
  color:#fff;
  background:var(--gradient-gemini);
  box-shadow:0 4px 14px -6px rgba(66,133,244,.6);
}

/* ------------------------------------------------------------ 10. ACCORDION */
.faq{border-top:1px solid var(--border)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__q{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-5);
  padding:22px 4px;
  text-align:left;
  font-family:var(--font-display);
  font-size:1.06rem;font-weight:600;letter-spacing:-.014em;
  line-height:1.45;
  color:var(--text);
  transition:color var(--d-fast) var(--spring-effects);
}
.faq__q:hover{color:var(--primary)}
.faq__icon{
  width:30px;height:30px;flex:none;margin-top:3px;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:var(--surface-3);
  transition:transform var(--d-base) var(--ease-emph),
             background var(--d-base) var(--ease-standard),
             color var(--d-base) var(--ease-standard);
}
.faq__icon svg{width:16px;height:16px}
.faq__item.is-open .faq__icon{transform:rotate(180deg);background:var(--gradient-gemini);color:#fff}
.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-med) var(--ease-emph);
}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 46px 24px 4px;color:var(--text-2);line-height:1.72;text-wrap:pretty}
.faq__a p+p{padding-top:14px}

/* --------------------------------------------------------------- 11. FORMS */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.9rem;font-weight:600;color:var(--text-2)}
.field input,.field textarea,.field select{
  width:100%;
  padding:14px 18px;
  border-radius:var(--r-lg);
  background:var(--surface-2);
  border:1.5px solid var(--border);
  color:var(--text);
  font-size:1rem;
  transition:border-color var(--d-fast) var(--spring-effects),
             background var(--d-fast) var(--spring-effects),
             box-shadow var(--d-fast) var(--spring-effects);
}.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23727676' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:48px;
}
.field textarea{resize:vertical;min-height:136px;line-height:1.65}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  border-color:var(--g-blue);
  background:var(--surface);
  box-shadow:0 0 0 4px rgba(66,133,244,.14);
}
.field--error input,.field--error textarea,.field--error select{border-color:#B3261E}
.field__err{font-size:.83rem;color:#B3261E;display:none}
.field--error .field__err{display:block}.form-note{font-size:.85rem;color:var(--text-3);line-height:1.6}
.form-success{
  display:none;
  padding:20px 24px;border-radius:var(--r-lg);
  background:var(--tertiary-container);
  color:var(--text);
}
.form-success.is-visible{display:flex;gap:12px;align-items:flex-start}
.form-success svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--tertiary)}

/* ---------------------------------------------------------------- 12. LIST */
.checklist{display:flex;flex-direction:column;gap:14px}
.checklist li{display:flex;gap:13px;align-items:flex-start;line-height:1.6}
.checklist svg{width:21px;height:21px;flex:none;margin-top:3px;color:var(--tertiary)}
.checklist--blue svg{color:var(--primary)}
.checklist--muted svg{color:var(--text-3)}

/* --------------------------------------------------------------- 13. LOGOS */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{
  display:flex;gap:clamp(30px,5vw,68px);
  width:max-content;
  animation:marquee 48s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__item{
  display:flex;align-items:center;gap:11px;
  color:var(--text-3);
  font-family:var(--font-display);
  font-size:1rem;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;
  padding-block:6px;
}
.marquee__item svg{width:21px;height:21px;flex:none;opacity:.7}

/* ---------------------------------------------------- 14. SHIMMER / REVEAL */
/* Gemini's loading sheen: the sweep finishes at 70%, then rests. */
.shimmer{position:relative;overflow:hidden;isolation:isolate}
.shimmer::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:400% 400%;
  animation:shimmerSweep 2.6s linear infinite;
}@keyframes shimmerSweep{
  0%{background-position:100% 100%}
  70%,100%{background-position:0 0}
}

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--d-slow) var(--ease-standard),
             transform var(--d-slow) var(--ease-emph-dec);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* --------------------------------------------------------------- 15. FOOTER */
.footer{
  background:var(--bg-sunken);
  border-top:1px solid var(--border-strong);
  padding-block:clamp(52px,6vw,84px) 32px;
  position:relative;overflow:hidden;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.7fr repeat(3,1fr);
  gap:clamp(28px,4vw,56px);
}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer__h{
  font-size:.775rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:18px;
}
.footer__links{display:flex;flex-direction:column;gap:12px}
.footer__links a{
  color:var(--text-2);font-size:.95rem;
  transition:color var(--d-fast) var(--spring-effects);
  width:fit-content;
}
.footer__links a:hover{color:var(--text)}
.footer__bottom{
  margin-top:clamp(40px,5vw,64px);
  padding-top:26px;
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
  color:var(--text-3);font-size:.85rem;
}
.footer__legal{max-width:680px;line-height:1.65}

/* ------------------------------------------------------------- 16. HELPERS */
.divider{height:1px;background:var(--border);border:none}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-full);
  font-size:.75rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;
}
.badge--gemini{background:var(--gradient-gemini);color:#fff}
.badge--green{background:var(--tertiary-container);color:var(--tertiary)}
.badge--blue{background:var(--primary-container);color:var(--on-primary-container)}
.badge--soft{background:var(--surface-3);color:var(--text-2)}

.skip-link{
  position:absolute;left:16px;top:-70px;z-index:200;
  padding:12px 20px;border-radius:var(--r-full);
  background:var(--text);color:var(--bg);font-weight:600;
  transition:top var(--d-base) var(--ease-emph-dec);
}
.skip-link:focus{top:16px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}