/* Page CSS for the landing: only what sits inside a visual and the kit lacks (taste-skill system.md).
   Everything else comes from system.css, ui/cards.css, layout/layout.css and icons/icon.css.
   The palette is the dashboard's own (DESIGN.md): its night tokens on the page, its day tokens on the
   security band. The lit ground is the kit's sky, with Signal Blue as its accent. */

html[data-ground="sky"] { --ground-accent: #0b57d0; }

/* Skip link: hidden until focused, so it never moves the logo off the left line (system.md, Base) */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; z-index: 20; padding: var(--s-2) var(--s-4); background: var(--bg); color: var(--ink); border-radius: var(--r-sm); }

/* A run of words that must not break (a region name such as us-east-1) */
.nowrap { white-space: nowrap; }

/* The client's own shield mark beside the name, in the nav and the footer */
.nav__logo .logo-mark { width: 22px; height: 22px; flex: none; color: var(--accent); }

/* The bar's words sit on the page axis only from 1440, where five words, ES and Sign in fit. From 1024
   to 1439 they centre between the logo and the actions (the Spanish actions are 333px wide), and
   under 1280 Workflow and Questions leave the bar (both stay in the footer), so no word runs under
   ES or Sign in */
@media (min-width: 1024px) and (max-width: 1439px) {
  .nav--centre .nav__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .nav__item--wide { display: none; } }
/* On the phone the bar's button drops its arrow, so "Probá CloudGuard" and the menu button fit 342px */
@media (max-width: 639px) { .nav__actions .btn > .m-arrow { display: none; } }

/* Hero: the report on the grain ground, cut by the frame's bottom. The evidence note needs 216px
   beside the page; a narrower frame (1024 to 1279, the phone) drops it and gives the page the width */
.hero--split .hero__media--ui { isolation: isolate; }
.hero__media--ui > .stage { position: absolute; inset: 0; z-index: 1; container: hero-doc / inline-size; }
.hero__media--ui > .stage > .at-corner { right: var(--ax); }
.hero__media--ui .ui-doc { width: 100%; max-width: 580px; padding-right: 216px; }
@container hero-doc (max-width: 579px) {
  .hero__media--ui .ui-doc { padding-right: 0; }
  .hero__media--ui .ui-doc__note { display: none; }
}
@media (max-width: 639px) { .hero__media--ui > .stage > .at-corner { right: var(--ax-sm, 16px); } }
.hero__media--ui > .ly-float { z-index: 3; }
/* The hero's report is read at a glance: plain words at a reading size, not the mock's 13px */
.hero__media--ui .ui-doc__title { font-size: 20px; line-height: 28px; }
.hero__media--ui .ui-doc__text { font-size: 15px; line-height: 24px; }
.hero__media--ui .ui-doc__label { font-size: 13px; }
/* The float card reports a finished result, and in the app a pulsing dot means "still investigating"
   (DESIGN.md, status chips), so this dot holds still; the report's marks are the hero's motion */
.hero__media--ui .ly-live::before { animation: none; }

/* The report's timeline: a quiet section label and one line per event, its time in the mono face
   (the machine's own words, DESIGN.md's Verbatim Mono Rule) */
.ui-doc__label.ui-doc__section { margin-top: var(--s-5); }
.ui-doc__section + .ui-doc__text { margin-top: var(--s-2); }
.ui-doc__line + .ui-doc__line { margin-top: var(--s-1); }
.ui-doc__time { margin-right: var(--s-2); font: 400 13px/21px var(--font-mono); color: var(--u-muted); }

/* app-frame (sections-library.md, app-frame): the list beside the open report, one row that takes
   what the screen leaves and cuts both panes at its foot */
.product__lede { margin: 0; }
.app.ui {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); overflow: hidden;
  margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow);
}
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
/* both panes are cut by the frame's foot, so their last rows dissolve over 64px (the kit's
   .stage--fade-b) instead of being sliced through a line of text */
.app > .app__pane {
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 64px), transparent calc(100% - 4px));
  mask: linear-gradient(to bottom, #000 calc(100% - 64px), transparent calc(100% - 4px));
}
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane--open { container: report / inline-size; }
.app > .app__pane--open > .ui-doc { width: 100%; max-width: 760px; padding: var(--s-6) 248px var(--s-6) var(--s-6); }
.app > .app__pane--open > .ui-doc > .ui-doc__note { right: var(--s-6); }
@container report (max-width: 599px) {
  .app > .app__pane--open > .ui-doc { padding-right: var(--s-6); }
  .app > .app__pane--open > .ui-doc > .ui-doc__note { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
/* The list's compact sidebar is 128px; 8px more keeps "Google Cloud" on one line */
@container ui-win (min-width: 420px) and (max-width: 539px) { .app .ui-win .ui-win__body { grid-template-columns: 136px minmax(0, 1fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
  .app > .app__pane--open > .ui-doc { padding: var(--s-4); }
}

/* Three short facts under a split's lead, as plain lines */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.facts > li { padding-top: var(--s-3); border-top: 1px solid var(--line); }

/* .bg-band brings its own min-height and padding (backgrounds.css); the section box wins here, so
   #integrations stays exactly two screens and every later section starts on the screen grid */
main > section#integrations.bg-band { min-height: 0; padding: var(--padt) 0 calc(var(--padb) + var(--bar)); display: block; }
@media (min-width: 640px) and (max-width: 1279px) {
  main > section#integrations.bg-band { min-height: calc(var(--h, 1) * 100svh); display: flex; flex-direction: column; }
}

/* The tools: a heading, then two rows of well-known logos drifting in opposite directions (the
   client asked for a carousel). The rows hold the list twice, so a half-length move loops without a
   seam; hover or the pause button stops them, and under reduced motion they stand still and wrap */
.tools-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5) var(--grid-gap, 24px); align-items: end; }
.tools-head > .tools-title { grid-column: 1 / span 5; margin: 0; }
.tools-head > p { grid-column: 7 / span 6; margin: 0; }
.marquees { display: grid; gap: var(--s-8); margin-top: var(--s-9); }
.marquee__item .ic-tile--72 { --tile: 96px; }
/* the desktop's second screen holds only the tools, so the rows spread down it rather than leave its foot empty */
@media (min-width: 1024px) { .marquees { margin-top: var(--s-10); gap: var(--s-9); } }
.marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { --gap: var(--s-8); list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap); width: max-content; animation: marquee 48s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 56s; }
.marquee__item { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.marquee__name { font: 500 var(--t-lead)/1.2 var(--font-text); color: var(--ink); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.marquee:hover .marquee__track, [data-marquee].is-paused .marquee__track { animation-play-state: paused; }
.marquee-pause {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-top: var(--s-6); padding: 0;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
}
.marquee-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.marquee-pause__play { display: none; }
.marquee-pause[aria-pressed="true"] .marquee-pause__pause { display: none; }
.marquee-pause[aria-pressed="true"] .marquee-pause__play { display: block; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; row-gap: var(--s-5); }
  .marquee__item[aria-hidden="true"], .marquee-pause { display: none; }
}
@media (max-width: 1023px) {
  .marquee__item .ic-tile--72 { --tile: 80px; }
  .tools-head { display: block; }
  .tools-head > p { margin-top: var(--s-4); }
  #integrations .facts { display: none; }
}
@media (max-width: 639px) {
  .marquees { margin-top: var(--s-6); gap: var(--s-5); }
  .marquee__track { --gap: var(--s-6); }
  .marquee__item { flex-direction: column; gap: var(--s-2); }
  .marquee__item .ic-tile--72 { --tile: 64px; }
  .acct__sub { white-space: normal; }
  .marquee__name { font-size: var(--t-small); }
}

/* The cloud accounts panel beside the clouds: a real logo, the account and its state on each row */
.acct { width: 100%; overflow: hidden; background: #ffffff;
  --u-ink: #1f1f1f; --u-muted: #5f6368; --u-line: #dde3ea; --u-bg: #f0f4f9; }
.acct__list { list-style: none; margin: 0; padding: 4px 0; }
.acct__row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; }
.acct__row + .acct__row { box-shadow: inset 0 1px 0 var(--u-line); }
.acct__row .ic-tile { --tile-bg: var(--u-bg); }
.acct__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.acct__name { font-size: 15px; font-weight: 500; color: var(--u-ink); }
.acct__sub { font-size: 13px; color: var(--u-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__st { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--u-muted); box-shadow: inset 0 0 0 1px var(--u-line); }
.acct__st.is-on { color: #0d5223; background: #c4eed0; box-shadow: none; }
.acct__st.is-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #188038; }

/* The steps: one panel height for the group, three across from 1024 so no card is left alone on a
   row; the alert stack loses 8px of inset there so its widest title fits the narrow card */
#how .panel { --p-h: 300px; }
#how .panel > .dg { position: absolute; inset: 0; }
@media (min-width: 1024px) and (max-width: 1279px) {
  #how .grid > .card.span-4 { grid-column: span 4; }
  #how .panel .stage > .fit { left: var(--s-2); right: var(--s-2); }
}
/* A finished report section reads as done, not crossed out */
#how .ui-check.is-done .ui-check__label { color: var(--u-ink, inherit); }
#how .ui-check .ui-check__label::after { display: none; }
/* The lanes diagram sits on the lit ground, so it takes that ground's ink, not the dark page's */
#how .panel .dg-cap, #how .panel .dg-node.is-done > .dg-cap { color: var(--ground-ink); }

/* Security: the permissions panel takes the frame's width less its inset (up to 480px), so it is
   never cut at the right edge, only by the frame's foot. On the phone (.g2m) the words take the
   first screen and the whole panel the second, instead of a panel stretched down an empty screen */
#security .ui-toggles { overflow: hidden; }
@media (max-width: 639px) {
  #security > .wrap > .grid { display: contents; }
  #security > .wrap > .split-col { align-self: start; }
}

/* Questions: the clouds the first answer names, as real logos on the app's pale tile (the kit's tile
   mixes white into the dark page and turns grey there). The heading's line keeps the heading-to-
   content space from the answers when the split stacks; on the phone the line goes so the logos and
   the five answers stand on one screen */
.clouds { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.clouds .ic-tile { --tile-bg: #f0f4f9; --tile-line: transparent; }
@media (max-width: 1023px) {
  #faq .faq { margin-top: var(--s-5); }
  .clouds { margin-top: var(--s-4); gap: var(--s-2); }
  .clouds .ic-tile--56 { --tile: 48px; }
}
@media (max-width: 639px) { #faq .muted { display: none; } }

/* The close: the name spans the wrap from line to line at every width (its width is 5.24 times its
   size in Funnel Display), with room above the capitals so its own box never clips them */
.close--word .close__word { line-height: 1; font-size: calc(min(100vw - 2 * var(--gut), 1280px) / 5.3); }

/* The footer's button keeps the page's one action colour, as in the nav and the hero (#1967d2 holds
   3:1 on both the dark page and the lit ground, with its white label at 5.4:1) */
.footer--statement { --action: var(--p-action); --action-ink: var(--p-action-ink); }

/* The footer's three link columns fill the row on the tablet, ending on the right line */
@media (min-width: 640px) and (max-width: 1023px) { .closing__links .footer__col { grid-column: span 4; } }

/* The tablet held upright (640 to 1023): sections whose stacked content runs past one screen take two
   (layout-v4.md section 2, the one page-CSS rule on a section) */
@media (min-width: 640px) and (max-width: 1023px) { #how { --h: 2; } }

/* The phone (under 640): sections whose stacked content needs two screens say so (--hm), panels step
   down, and the footer's close and links take one phone screen each (.g2m) */
@media (max-width: 639px) {
  #how { --hm: 2; }
  #how .panel { --p-h: 220px; }
}

/* Large screens: the page is drawn for 1440x900. On a bigger screen (a 1440p or 4K monitor at 100%)
   its fixed sizes left the words small and every one-screen section half empty, so from 1584x990 the
   whole page scales up in steps of 0.1, by the smaller of width / 1440 and height / 900: it always sees
   at least 1440x900 and looks as it does there, only larger. CSS zoom also scales viewport units, so
   the few heights the kit sets from the screen (the sections, the hero and layout.css's screen
   tokens) are divided by the zoom to stay exactly one screen. Media queries ignore CSS zoom. */
:root { --zoom: 1; }
@media (min-width: 1584px) and (min-height: 990px) { :root { --zoom: 1.1; } }
@media (min-width: 1728px) and (min-height: 1080px) { :root { --zoom: 1.2; } }
@media (min-width: 1872px) and (min-height: 1170px) { :root { --zoom: 1.3; } }
@media (min-width: 2016px) and (min-height: 1260px) { :root { --zoom: 1.4; } }
@media (min-width: 2160px) and (min-height: 1350px) { :root { --zoom: 1.5; } }
@media (min-width: 2304px) and (min-height: 1440px) { :root { --zoom: 1.6; } }
@media (min-width: 2448px) and (min-height: 1530px) { :root { --zoom: 1.7; } }
@media (min-width: 2592px) and (min-height: 1620px) { :root { --zoom: 1.8; } }
@media (min-width: 2736px) and (min-height: 1710px) { :root { --zoom: 1.9; } }
@media (min-width: 2880px) and (min-height: 1800px) { :root { --zoom: 2; } }
@media (min-width: 3168px) and (min-height: 1980px) { :root { --zoom: 2.2; } }
@media (min-width: 3456px) and (min-height: 2160px) { :root { --zoom: 2.4; } }
@media (min-width: 1584px) and (min-height: 990px) {
  html { zoom: var(--zoom); }
  :root {
    --ly-screen: calc(100svh / var(--zoom) - var(--ly-nav));
    --ly-fit: calc(100svh / var(--zoom) - var(--padt, 120px) - var(--padb, 72px) - var(--bar, 0px));
    --ly-hero-h: calc(100svh / var(--zoom) - var(--nav, 72px) - var(--hgap, 48px) - var(--hpadb, 64px) - var(--bar, 0px));
  }
  main > :is(section, .section), footer.closing { height: calc(var(--h, 1) * 100svh / var(--zoom)); }
  main > :is(.hero, .section--hero) { height: calc(100svh / var(--zoom)); }
}

/* Integrations: the accounts panel sits straight on the band's ground, its top on the heading's and its left on the split line; the lit frame's own fill was a
   second, slightly different grey behind it */
/* on a desktop screen with room the panel's rows open up, so it runs down to the screen's foot beside
   the words (a 768px-tall laptop keeps the compact rows) */
@media (min-width: 1280px) and (min-height: 860px) {
  .acct .ui-head { min-height: 56px; }
  .acct__row { min-height: 92px; padding: 14px 24px; gap: 18px; }
  .acct__row .ic-tile--40 { --tile: 52px; }
  .acct__name { font-size: 17px; }
  .acct__sub { font-size: 14px; }
  .acct__st { height: 30px; padding: 0 12px; font-size: 14px; }
}
#integrations .frame { background: none; border-color: transparent; box-shadow: none; padding: 0; align-items: flex-start; justify-content: flex-start; }