/* All Google Cloud page styles.
   Used by the Google Cloud page (/google-cloud), frontend/google-cloud.html; loaded in the order the page lists it. */

:root {
  --ink: #14203f;
  --muted: #4b5a7a;
  --line: #d2dcf0;
  --bg: #eef3fc;
  --blue: #23408f;
  --blue-2: #2f55b5;
  --navy: #0d1738;
  --card: #fff;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Google Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid #e0a100;
  outline-offset: 3px;
}
.container {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* Header, matching the front page. */
.site-header {
  background: var(--navy);
  color: #eef3ff;
}
.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.6px;
}
.brand img {
  margin-right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: 0 4px 14px #23408f40;
}
.brand-dot {
  color: #8d99ad;
}
.header-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.header-links a {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #dfe7fb;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.header-links a:hover,
.header-links a:focus-visible {
  background: #ffffff12;
  color: #fff;
}
.header-links a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 #ffd66b;
  border-radius: 10px 10px 0 0;
}
.header-links .cta {
  margin-left: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}
.header-links .cta:hover {
  background: #e8effc;
  color: var(--ink);
}

/* Hero */
.hero {
  padding: 64px 24px 56px;
  text-align: center;
  background: linear-gradient(180deg, #5b8def 0%, #9fbff5 38%, #dbe8fc 72%, #eef3fc 100%);
}
.cloud-hero-inner {
  width: min(100%, 1000px);
  margin-inline: auto;
}
.eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: #f5f9ff;
  border: 1px solid #ffffffb3;
  box-shadow: 0 4px 16px #23408f0a;
  font-size: 13px;
  font-weight: 600;
  color: #23408f;
}
.g-dots {
  display: inline-flex;
  gap: 3px;
}
.g-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.hero h1 {
  max-width: 820px;
  font-size: clamp(40px, 5.7vw, 72px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.06;
  margin: 24px auto 0;
  text-wrap: balance;
  color: #14203f;
}
.hero h1 span {
  display: block;
  color: #23408f;
}
.lead {
  max-width: 560px;
  margin: 22px auto 0;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.65;
  color: #293f66;
  text-wrap: pretty;
}
.stats {
  list-style: none;
  padding: 0;
  margin: 38px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 960px;
  text-align: left;
}
.stats li {
  min-width: 0;
  padding: 20px;
  border-radius: 22px;
  background: #ffffffd9;
  border: 1px solid #ffffff;
  box-shadow: 0 8px 28px #23408f0a;
}
.stats .stat-label {
  display: block;
  margin-bottom: 8px;
  color: #52617b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.stats strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
  color: #23408f;
}
.stats .stat-detail {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #4b5a7a;
}

/* Architecture */
section {
  padding: 44px 0;
}
h2 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -.02em;
  margin: 0;
  text-align: center;
}
.sub {
  text-align: center;
  color: var(--muted);
  margin: 10px auto 0;
  max-width: 620px;
}
.arch {
  margin-top: 34px;
  padding: clamp(18px, 3vw, 36px);
  border-radius: 28px;
  background: radial-gradient(ellipse at 52% 0%, #e7efff 0%, transparent 60%), #f8faff;
  border: 1px solid #d9e3f3;
  box-shadow: 0 18px 56px #203a6b0b, inset 0 1px 0 #fff;
}
.arch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.2fr) 28px minmax(0, 1.45fr);
  align-items: center;
  gap: 14px;
}
.flow-stage {
  min-width: 0;
}
.stage-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #52617b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stage-label span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid #d7e1f0;
  border-radius: 50%;
  background: #fff;
  color: #315ab4;
  letter-spacing: 0;
  font-size: 12px;
  flex-shrink: 0;
}
.node {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e0e6f0;
  box-shadow: 0 4px 12px #243b6105;
  min-width: 0;
}
.node>div {
  min-width: 0;
}
.node b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: #172440;
}
.node small {
  display: block;
  margin-top: 5px;
  color: #52617b;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.node.main {
  padding-block: 24px;
  background: linear-gradient(135deg, #fff, #f1f6ff);
  border-color: #b4caf3;
  box-shadow: 0 8px 24px #3767c510, 0 0 0 4px #eaf1fd;
}
.node-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #315fbd;
  background: #edf3ff;
}
.node-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.node-icon.green {
  color: #217449;
  background: #eaf5ee;
}
.node-icon.red {
  color: #b04338;
  background: #fff0ed;
}
.node-icon.yellow {
  color: #88620b;
  background: #fff7df;
}
.stack {
  display: grid;
  gap: 10px;
}
.arrow {
  display: grid;
  place-items: center;
  color: #6585b7;
  font-size: 22px;
  margin-top: 37px;
}
.arch-support {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #dce5f2;
}
.arch-support-label {
  margin: 0 0 12px;
  color: #52617b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.arch-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.arch-foot .node {
  box-shadow: none;
}
.arch-foot .node b {
  font-size: 13px;
}
.arch-color-line {
  display: flex;
  gap: 4px;
  width: 64px;
  margin: 0 auto 18px;
}
.arch-color-line i {
  height: 4px;
  flex: 1;
  border-radius: 4px;
}

/* Service cards */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.svc {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px #23408f12;
}
.svc::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent, #4285f4);
}
.svc .tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #1a56c4;
}
.svc h3 {
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 10px 0 4px;
}
.svc .what {
  margin: 0;
  color: var(--muted);
}
.svc ul {
  margin: 14px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
}
.svc li::marker {
  color: var(--blue-2);
}
.svc code {
  font-size: 13px;
  background: #e7edf8;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--blue);
}
.svc.wide {
  grid-column: 1 / -1;
}
.ai {
  --accent: linear-gradient(90deg, #4285f4, #9b72cb, #d96570);
}
.maps {
  --accent: linear-gradient(90deg, #34a853 0 25%, #fbbc04 25% 50%, #ea4335 50% 75%, #4285f4 75%);
}
.ai .tag {
  background: #f3e8fd;
  color: #5b3fb5;
}
.maps .tag {
  background: #e6f4ea;
  color: #137333;
}

/* Cost and safety */
.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}
.control {
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
}
.control b {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}
.control p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.end {
  text-align: center;
  padding: 56px 0 80px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px #14203f33;
}
.btn:hover {
  background: var(--blue);
}
footer {
  padding: 24px 0 40px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .arch-row {
    grid-template-columns: 1fr;
  }
  .arrow {
    transform: rotate(90deg);
    margin: -4px 0;
  }
  .stage-label {
    margin-bottom: 10px;
  }
  .arch-row {
    gap: 18px;
  }
  .node.main {
    padding-block: 20px;
  }
  .arch-foot,
  .controls {
    grid-template-columns: 1fr;
  }
  .services {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .header-links a:not(.cta) {
    padding: 8px 9px;
    font-size: 13.5px;
  }
  .hero {
    padding: 42px 18px 30px;
  }
  .stats {
    margin-top: 28px;
    gap: 10px;
  }
  .stats li {
    padding: 16px;
    border-radius: 18px;
  }
  .stats strong {
    font-size: 18px;
  }
  .hero h1 {
    letter-spacing: -.035em;
  }
  .svc {
    padding: 22px;
  }
}
/* Service cards: one plain summary, then each point as a short bold headline with the detail underneath. */
.svc .what {
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.55
}
.svc ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  gap: 14px
}
.svc li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5
}
.svc li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8f0fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55b5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat
}
.svc li b {
  display: block;
  font-size: 15px;
  color: var(--ink)
}
.svc li span {
  display: block;
  font-size: 14.5px;
  color: var(--muted)
}
/* Footer: brand and page links on one row, the team credit underneath. */
.cl-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 40px;
  margin-top: 24px;
  color: var(--muted)
}
.cl-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap
}
.cl-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.4px
}
.cl-footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: 0 3px 10px #23408f33
}
.cl-footer-brand span {
  color: #8d99ad;
  margin-left: -8px
}
.cl-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}
.cl-footer-links a {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s
}
.cl-footer-links a:hover {
  color: var(--blue-2);
  background: #e2eafb
}
.cl-footer-credit {
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid #d2dcf099;
  font-size: 13.5px;
  line-height: 1.6
}
.cl-footer-credit b {
  color: var(--ink);
  font-weight: 600
}
@media (max-width: 640px) {
  .cl-footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center
  }
  .cl-footer-links {
    justify-content: center
  }
  .cl-footer-credit {
    text-align: center
  }
}
.cl-footer {
  text-align: left
}
.cl-footer-note {
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid #d2dcf099;
  font-size: 13.5px;
  line-height: 1.6
}
.cl-footer-note+.cl-footer-credit {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0
}
.cl-footer-links a[aria-current="page"] {
  color: var(--blue-2);
  background: #e2eafb
}
@media (max-width: 640px) {
  .cl-footer-note {
    text-align: center
  }
}
/* Motion. The hero rises in on load, sections and cards come up as they scroll into view (siblings a beat apart,
       set by the script at the end), and a small "request" dot keeps running along the diagram's arrows from your
       browser to Cloud Run to Google's services. Nothing moves with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .cloud-hero-inner> :not(.stats),
  .stats li {
    animation: gc-rise .8s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--d, 0s);
  }
  .cloud-hero-inner> :nth-child(2) {
    --d: .08s;
  }
  .cloud-hero-inner> :nth-child(3) {
    --d: .18s;
  }
  .stats li:nth-child(1) {
    --d: .3s;
  }
  .stats li:nth-child(2) {
    --d: .38s;
  }
  .stats li:nth-child(3) {
    --d: .46s;
  }
  .stats li:nth-child(4) {
    --d: .54s;
  }
  .g-dots i {
    animation: gc-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;
  }
  .g-dots i:nth-child(2) {
    animation-delay: .07s;
  }
  .g-dots i:nth-child(3) {
    animation-delay: .14s;
  }
  .g-dots i:nth-child(4) {
    animation-delay: .21s;
  }
  .gc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1), translate .25s ease, box-shadow .25s ease;
    transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s;
  }
  .gc-reveal.gc-on {
    opacity: 1;
    transform: none;
  }
  .arch-color-line.gc-reveal {
    transform: scaleX(.15);
  }
  .arch-color-line.gc-reveal.gc-on {
    transform: none;
  }
  .svc:hover,
  .control:hover {
    translate: 0 -4px;
    box-shadow: 0 22px 50px #23408f1f;
  }
  .arrow {
    position: relative;
  }
  .arch.gc-on .arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-radius: 50%;
    background: #4285f4;
    box-shadow: 0 0 10px #4285f4aa;
    animation: gc-packet 2.6s ease-in-out 1s infinite both;
  }
  .arch.gc-on .arch-row>.arrow:nth-of-type(2)::after {
    animation-delay: 2.3s;
    background: #34a853;
    box-shadow: 0 0 10px #34a853aa;
  }
  .end .btn.gc-on {
    animation: gc-glow 2.2s ease-in-out .5s 2;
  }
}
@keyframes gc-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}
@keyframes gc-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes gc-packet {
  0% {
    left: 0;
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 7px);
    opacity: 0;
  }
}
@keyframes gc-glow {
  50% {
    box-shadow: 0 0 0 9px #4285f421, 0 14px 30px #2f55b540;
  }
}
/* The clear header sits over this page's blue hero, as on the home page; the hero leaves room for it. */
.hero {
  padding-top: 148px
}
@media (max-width: 860px) {
  .hero {
    padding-top: 110px
  }
}