/* ============================================================
   AtlasGTM for Google Cloud Sellers — page styles
   Consumes Brand Studio kit #94 tokens from brand.css.
   Built to be read in five minutes and forwarded without edits.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  font-family:var(--brand-font-body,Inter,system-ui,sans-serif);
  font-size:16px;
  line-height:1.6;
  color:var(--brand-text,#374151);
  background:var(--brand-background,#f9fafb);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--brand-font-heading,Inter,system-ui,sans-serif);color:#0f172a;letter-spacing:-.02em;margin:0;}
p{margin:0;}
a{color:var(--brand-primary,#52a0ff);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

:focus-visible{outline:2px solid var(--brand-primary,#52a0ff);outline-offset:3px;border-radius:4px;}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px;}
.narrow{max-width:820px;}

/* ---------- section rhythm ---------- */
section{padding:64px 0;}
section.tight{padding:48px 0;}
.alt{background:var(--brand-surface,#fff);border-top:1px solid var(--brand-border,#e5e7eb);border-bottom:1px solid var(--brand-border,#e5e7eb);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-primary,#52a0ff);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.55;}

h2.sec{font-size:30px;line-height:1.2;margin-bottom:10px;}
.sec-sub{font-size:17px;color:var(--brand-muted,#64748b);max-width:64ch;margin-bottom:32px;}

/* ============================================================
   CO-BRAND LOCKUP SIZING
   The AtlasGTM PNG carries a large transparent margin inside the
   file, so at an identical CSS height its glyphs read roughly
   half the size of the tightly-cropped Google Cloud mark. Every
   lockup below therefore sets the Atlas height at about 2x the
   Google Cloud height, which lands the two marks at the same
   optical weight. Change these in pairs.
   ============================================================ */
.nav-marks img.atlas{height:34px;width:auto;}
.nav-marks .gc-lockup .gc-img{height:17px;}

.hero-marks img.atlas{height:50px;width:auto;}
.hero .gc-lockup .gc-img{height:25px;}

.foot img.atlas{height:32px;width:auto;}
.foot .gc-lockup .gc-img{height:16px;}

@media(max-width:700px){
  .hero-marks img.atlas{height:40px;}
  .hero .gc-lockup .gc-img{height:20px;}
  .nav-marks img.atlas{height:28px;}
  .nav-marks .gc-lockup .gc-img{height:14px;}
}

/* typographic fallback, used only if the real mark fails to load */
.gc-lockup{display:inline-flex;align-items:center;line-height:1;}
.gc-lockup .gc-img{width:auto;}
.gc-lockup[data-gc="type"]{font-weight:600;color:#0f172a;letter-spacing:-.01em;white-space:nowrap;}
.nav-marks .gc-lockup[data-gc="type"]{font-size:15px;}
.hero-marks .gc-lockup[data-gc="type"]{font-size:22px;}
.foot .gc-lockup[data-gc="type"]{font-size:14px;}
@media(max-width:700px){ .hero-marks .gc-lockup[data-gc="type"]{font-size:18px;} }

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--brand-border,#e5e7eb);
}
.nav-in{display:flex;align-items:center;gap:16px;height:64px;}
.nav-marks{display:flex;align-items:center;gap:12px;min-width:0;}
.nav-x{color:#cbd5e1;font-size:14px;flex:none;}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:22px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--brand-muted,#64748b);white-space:nowrap;}
.nav-links a:hover{color:#0f172a;text-decoration:none;}
.nav-cta{
  background:#0f172a;color:#fff !important;padding:8px 16px;
  border-radius:999px;font-size:13px;font-weight:600;
  transition:transform .18s ease,background .18s ease;
}
.nav-cta:hover{background:#1e293b;transform:translateY(-1px);text-decoration:none;}
@media(max-width:860px){ .nav-links a:not(.nav-cta){display:none;} }

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:66px 0 58px;
  background:
    radial-gradient(1100px 460px at 78% -12%, rgba(82,160,255,.16), transparent 62%),
    radial-gradient(760px 380px at 6% 4%, rgba(166,114,247,.13), transparent 60%),
    #fff;
  border-bottom:1px solid var(--brand-border,#e5e7eb);
}
.hero .grule{width:120px;margin-bottom:22px;}
.hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.1;margin-bottom:18px;max-width:19ch;}
.hero h1 .hl{
  background:linear-gradient(180deg,transparent 62%,rgba(82,160,255,.28) 62%);
  padding:0 2px;
}
.hero .lede{font-size:19px;line-height:1.55;color:#475569;max-width:60ch;margin-bottom:14px;}
.hero .lede strong{color:#0f172a;font-weight:600;}
.hero .sub{font-size:15px;color:var(--brand-muted,#64748b);max-width:62ch;margin-bottom:28px;}

.hero-marks{display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
.hero-marks .plus{color:#cbd5e1;font-size:17px;}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;font-size:15px;font-weight:600;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand-primary,#52a0ff),var(--brand-secondary,#a672f7));
  color:#fff !important;box-shadow:0 8px 22px rgba(82,160,255,.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(82,160,255,.38);text-decoration:none;}
.btn-ghost{background:#fff;color:#0f172a !important;border-color:var(--brand-border,#e5e7eb);}
.btn-ghost:hover{border-color:#cbd5e1;transform:translateY(-2px);text-decoration:none;}
.btn-dark{background:#0f172a;color:#fff !important;}
.btn-dark:hover{background:#1e293b;transform:translateY(-2px);text-decoration:none;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}

.readtime{font-size:13px;color:#94a3b8;margin-top:18px;}

/* ---------- the four numbers ---------- */
.tally{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:38px;background:#fff;
  border:1px solid var(--brand-border,#e5e7eb);border-radius:var(--brand-radius-lg,16px);
  overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.tally div{padding:18px 20px;border-right:1px solid var(--brand-border,#e5e7eb);}
.tally div:last-child{border-right:0;}
.tally b{display:block;font-size:15px;color:#0f172a;font-weight:700;margin-bottom:3px;letter-spacing:-.01em;}
.tally span{font-size:12.5px;color:var(--brand-muted,#64748b);line-height:1.45;display:block;}
@media(max-width:800px){
  .tally{grid-template-columns:repeat(2,1fr);}
  .tally div:nth-child(2){border-right:0;}
  .tally div:nth-child(1),.tally div:nth-child(2){border-bottom:1px solid var(--brand-border,#e5e7eb);}
}
@media(max-width:440px){
  .tally{grid-template-columns:1fr;}
  .tally div{border-right:0;border-bottom:1px solid var(--brand-border,#e5e7eb);}
  .tally div:last-child{border-bottom:0;}
}

/* ---------- pitch block ---------- */
.pitch{
  background:#0f172a;color:#e2e8f0;border-radius:var(--brand-radius-lg,16px);
  padding:34px 36px;position:relative;overflow:hidden;
}
.pitch::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 260px at 88% -20%, rgba(82,160,255,.22), transparent 62%);
  pointer-events:none;
}
.pitch .lbl{
  position:relative;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#7dd3fc;margin-bottom:14px;
}
.pitch p{position:relative;font-size:19px;line-height:1.62;color:#f1f5f9;}
.pitch p + p{margin-top:14px;}
.pitch .copy{
  position:relative;margin-top:22px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#e2e8f0;font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.pitch .copy:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);}
.pitch .copy.done{background:rgba(52,168,83,.22);border-color:rgba(52,168,83,.5);color:#bbf7d0;}
@media(max-width:600px){ .pitch{padding:26px 22px;} .pitch p{font-size:17px;} }

/* ---------- card grids ---------- */
.grid{display:grid;gap:18px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){ .g3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:680px){ .g2,.g3{grid-template-columns:1fr;} }

.card{
  background:#fff;border:1px solid var(--brand-border,#e5e7eb);
  border-radius:var(--brand-radius-lg,16px);padding:24px 24px 26px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.08);border-color:#dbeafe;}
.card .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:14px;font-size:17px;
  background:linear-gradient(135deg,rgba(82,160,255,.14),rgba(166,114,247,.14));
}
.card h3{font-size:17px;line-height:1.3;margin-bottom:8px;}
.card p{font-size:14.5px;color:#475569;line-height:1.6;}
.card p + p{margin-top:10px;}
.card .kicker{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-secondary,#a672f7);margin-bottom:9px;
}

/* seller-economics cards get the Google accent */
.card.g-accent{border-top:3px solid transparent;background-clip:padding-box;position:relative;}
.card.g-accent::after{
  content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75% 100%);
  opacity:.9;
}

/* ---------- numbered steps ---------- */
.steps{counter-reset:s;display:grid;gap:14px;}
.step{
  display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  background:#fff;border:1px solid var(--brand-border,#e5e7eb);
  border-radius:var(--brand-radius-md,10px);padding:20px 22px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.step:hover{border-color:#dbeafe;box-shadow:0 6px 18px rgba(15,23,42,.06);}
.step::before{
  counter-increment:s;content:counter(s);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand-primary,#52a0ff),var(--brand-secondary,#a672f7));
}
.step h4{font-size:16px;margin-bottom:5px;}
.step p{font-size:14.5px;color:#475569;}
.step .when{
  display:inline-block;margin-top:9px;font-size:12px;font-weight:600;
  color:var(--brand-muted,#64748b);background:#f1f5f9;
  padding:3px 10px;border-radius:999px;
}
@media(max-width:560px){ .step{grid-template-columns:1fr;gap:12px;} }

/* ---------- ask list ---------- */
.asks{display:grid;gap:10px;}
.ask{
  background:#fff;border:1px solid var(--brand-border,#e5e7eb);border-left:3px solid var(--brand-primary,#52a0ff);
  border-radius:var(--brand-radius-sm,6px);padding:15px 18px;
  font-size:15.5px;color:#0f172a;line-height:1.55;
}
.ask span{display:block;font-size:13.5px;color:var(--brand-muted,#64748b);margin-top:5px;line-height:1.5;}

/* ---------- objections (details) ---------- */
.obj{
  background:#fff;border:1px solid var(--brand-border,#e5e7eb);
  border-radius:var(--brand-radius-md,10px);margin-bottom:10px;overflow:hidden;
}
.obj summary{
  list-style:none;cursor:pointer;padding:16px 20px;
  font-size:15.5px;font-weight:600;color:#0f172a;
  display:flex;align-items:center;gap:12px;
  transition:background .16s ease;
}
.obj summary::-webkit-details-marker{display:none;}
.obj summary:hover{background:#f8fafc;}
.obj summary::after{
  content:"+";margin-left:auto;font-size:19px;font-weight:400;color:#94a3b8;
  transition:transform .2s ease;flex:none;
}
.obj[open] summary::after{transform:rotate(45deg);}
.obj .body{padding:0 20px 18px 20px;font-size:14.5px;color:#475569;line-height:1.65;}
.obj .body p + p{margin-top:10px;}

/* ---------- proof band ---------- */
.proof{background:#0f172a;color:#cbd5e1;}
.proof h2.sec{color:#fff;}
.proof .sec-sub{color:#94a3b8;}
.proof .eyebrow{color:#7dd3fc;}
.pcard{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--brand-radius-lg,16px);padding:22px 24px;
  transition:background .2s ease,border-color .2s ease;
}
.pcard:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);}
.pcard .kicker{color:#7dd3fc;}
.pcard h3{color:#fff;font-size:16px;margin-bottom:8px;}
.pcard p{font-size:14.5px;color:#cbd5e1;line-height:1.6;}
.names{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;
}
.names span{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600;color:#e2e8f0;
}
.names span.nda{font-weight:500;color:#94a3b8;}

/* ---------- do / don't ---------- */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:680px){ .dd{grid-template-columns:1fr;} }
.dd .col{background:#fff;border:1px solid var(--brand-border,#e5e7eb);border-radius:var(--brand-radius-lg,16px);padding:22px 24px;}
.dd .col h3{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:9px;}
.dd .col.yes h3{color:#15803d;}
.dd .col.no h3{color:#b91c1c;}
.dd ul{margin:0;padding:0;list-style:none;}
.dd li{font-size:14.5px;color:#475569;line-height:1.55;padding:8px 0 8px 24px;position:relative;border-top:1px solid #f1f5f9;}
.dd li:first-child{border-top:0;}
.dd .yes li::before{content:"✓";position:absolute;left:0;top:8px;color:#22c55e;font-weight:700;}
.dd .no li::before{content:"×";position:absolute;left:0;top:7px;color:#ef4444;font-weight:700;font-size:17px;}

/* ---------- form ---------- */
.formwrap{
  background:#fff;border:1px solid var(--brand-border,#e5e7eb);
  border-radius:var(--brand-radius-lg,16px);padding:30px 32px;
  box-shadow:0 4px 20px rgba(15,23,42,.05);
}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:600px){ .frow{grid-template-columns:1fr;} }
.field label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;font-size:15px;font-family:inherit;color:#0f172a;
  background:#fff;border:1px solid var(--brand-border,#e5e7eb);border-radius:var(--brand-radius-sm,6px);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:92px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-primary,#52a0ff);
  box-shadow:0 0 0 3px rgba(82,160,255,.16);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.fnote{font-size:13px;color:var(--brand-muted,#64748b);margin-top:14px;}
.fmsg{margin-top:14px;font-size:14.5px;font-weight:600;display:none;}
.fmsg.ok{display:block;color:#15803d;}
.fmsg.err{display:block;color:#b91c1c;}

/* ---------- footer ---------- */
footer{background:#fff;border-top:1px solid var(--brand-border,#e5e7eb);padding:34px 0 70px;}
.foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.foot .sep{color:#cbd5e1;}
.foot p{font-size:13px;color:#94a3b8;margin-left:auto;}
@media(max-width:620px){ .foot p{margin-left:0;width:100%;} }

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none;} }