/* ===================================================================
   ORINEX Workspace — marketing site
   Palette pulled from the app (dark slate + cyan #0dcaf0 accent)
   =================================================================== */

:root {
  --ink:        #07090c;   /* near-black page base */
  --ink-2:      #0b0e13;
  --panel:      #12161c;   /* raised surfaces */
  --panel-2:    #171c24;
  --card:       #2b3035;   /* matches app --ow-bg-card */
  --line:       rgba(255,255,255,0.08);
  --line-2:     rgba(255,255,255,0.14);

  --text:       #e9ecef;   /* app --ow-text-primary */
  --text-2:     #c6ced6;   /* app --ow-text-secondary, brightened for low-quality school displays */
  --muted:      #8b949e;   /* 6.5:1 on --ink; was #6c757d at 4.25:1, under AA */

  --cyan:       #0dcaf0;   /* app --ow-accent */
  --cyan-2:     #31d2f2;
  --blue:       #3b82f6;
  --violet:     #7c5cff;
  --warm:       #f9793d;

  --radius:     14px;
  --radius-lg:  22px;
  --maxw:       1180px;
  --ease:       cubic-bezier(.22,.61,.36,1);

  --shadow-glow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* keep the HTML hidden attr winning over .btn's display */
/* `overflow-x: clip` here, in addition to the `overflow-x: hidden` on body.
   The hero mock bleeds -7vw past the container on purpose, and between roughly
   1000px and 1180px that bleed lands outside the viewport and the page really
   did scroll sideways ~82px - body's `hidden` does not hold once Lenis is
   driving the scroll. `clip` is deliberate over `hidden`: it does not create a
   scroll container, so it cannot fight Lenis or break sticky positioning, and
   unlike `hidden` it may pair with `visible` on the other axis. */
html { scroll-behavior: smooth; overflow-x: clip; }
html.js { scroll-behavior: auto; }        /* Lenis handles it when JS is on */

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin: 0; }

/* ============ animated background ============ */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
      radial-gradient(1200px 800px at 70% -10%, #0e1620 0%, transparent 60%),
      radial-gradient(900px 700px at 10% 10%, #0b1118 0%, transparent 55%),
      var(--ink); }

.bg__aurora { position: absolute; inset: -20% -10% 0 -10%; filter: blur(60px); opacity: .55; }
.aurora { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.aurora--cyan { width: 46vw; height: 46vw; left: 55%; top: -8%;
  background: radial-gradient(circle at 30% 30%, var(--cyan) 0%, transparent 68%);
  animation: drift1 22s var(--ease) infinite alternate; }
.aurora--blue { width: 40vw; height: 40vw; left: -6%; top: 18%;
  background: radial-gradient(circle at 50% 50%, var(--violet) 0%, transparent 66%);
  animation: drift2 28s var(--ease) infinite alternate; }
.aurora--warm { width: 28vw; height: 28vw; left: 30%; top: 42%;
  background: radial-gradient(circle at 50% 50%, var(--warm) 0%, transparent 70%);
  opacity: .5; animation: drift3 26s var(--ease) infinite alternate; }

@keyframes drift1 { to { transform: translate3d(-8%, 12%, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(10%, -6%, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(-12%, -10%, 0) scale(1.2); } }

.bg__grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(1000px 700px at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(1000px 700px at 50% 0%, #000 0%, transparent 75%);
  opacity: .42; }
.bg__vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% -10%, transparent 55%, var(--ink) 100%); }

/* ============ layout helpers ============ */
.eyebrow { display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2); font-weight: 500; padding: .4rem .8rem;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan); }

.grad { background: linear-gradient(100deg, var(--cyan) 0%, var(--cyan-2) 35%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============ buttons ============ */
.btn { --pad: .8rem 1.35rem; display: inline-flex; align-items: center; gap: .5rem;
  padding: var(--pad); border-radius: 999px; font-weight: 600; font-size: .98rem;
  font-family: "Space Grotesk", sans-serif; letter-spacing: -.01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s; cursor: pointer; border: 1px solid transparent; }
.btn--sm { --pad: .55rem 1.05rem; font-size: .9rem; }
.btn--lg { --pad: 1rem 1.8rem; font-size: 1.05rem; }
.btn--primary { color: #04222b; background: linear-gradient(180deg, var(--cyan-2), var(--cyan));
  box-shadow: 0 8px 30px -8px rgba(13,202,240,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(13,202,240,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--ghost { color: var(--text); background: rgba(255,255,255,.03); border-color: var(--line-2); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--cyan); color: #fff; background: rgba(13,202,240,.08); }
.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.play { font-size: .7rem; color: var(--cyan); }

/* ============ nav ============ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(8,10,13,.72); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); }
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__logo { border-radius: 8px; filter: drop-shadow(0 4px 14px rgba(13,202,240,.25)); }
.brand__name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand__sub { color: var(--text-2); font-weight: 500; }
.nav__links { display: flex; gap: 1.6rem; margin-left: .5rem; }
.nav__link { color: var(--text-2); font-size: .95rem; font-weight: 500; transition: color .2s; }
.nav__link:hover { color: var(--text); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.nav__signin { color: var(--text-2); font-size: .95rem; font-weight: 500; transition: color .2s; }
.nav__signin:hover { color: var(--text); }

/* ---- mobile menu ----
   `.nav__links` is display:none below 900px, which left phones with NO
   navigation at all: Product / Security & Trust / Pricing / Docs simply
   vanished. The footer carries the same links, but the home page is ~15,000px
   tall, so reaching them meant scrolling roughly nineteen screens. */
.nav__toggle { display: none; width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.03); }
.nav__toggle span { display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform .28s var(--ease), opacity .18s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Absolutely positioned against .nav, which is fixed and therefore the
   containing block. Appended to .nav (not .nav__inner) so it spans full width. */
.nav__menu { display: none; position: absolute; top: 100%; left: 0; right: 0;
  padding: .4rem 1.5rem 1rem; border-bottom: 1px solid var(--line);
  background: rgba(8,10,13,.97);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.nav__menu.is-open { display: block; }
/* Beats the cloned .nav__link (0,1,0) on specificity (0,1,1). */
.nav__menu a { display: block; padding: .95rem .2rem; font-size: 1.02rem; font-weight: 500;
  color: var(--text-2); border-bottom: 1px solid var(--line); transition: color .2s; }
.nav__menu a:last-child { border-bottom: 0; }
.nav__menu a:hover, .nav__menu a:focus-visible { color: var(--text); }
/* The bar CTA moves in here on the narrowest screens - see the 480px block. */
.nav__menu .nav__menu-cta { display: none; }

/* ============ hero ============ */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 11rem 1.5rem 5rem; }
/* The copy column is sized by the headline, not by the ratio below: `1fr` is
   `minmax(auto, 1fr)`, and "Google Workspace" cannot break, so its
   min-content width sets a floor the ratio can never go under. At the old
   4.4rem that floor was 626px and the ratio was moot - the headline was
   silently taking space from the screenshot and STILL wrapping "center" and
   "for" onto lines of their own. Sizing the type so the longest line fits is
   what lets the ratio work again, which is why the mock did not shrink. */
.hero__inner { display: grid; grid-template-columns: 1fr .58fr; gap: 2.2rem; align-items: center; }
/* Sized against "Your command center for" - the longest line, now that "for"
   sits at the end of line 1 instead of dangling at the start of line 2.
   That line is 654px at 3.5rem against a 694px column: ~40px of slack.
   The middle term (4.6vw) has to move with the cap. The longer line pushes
   the wrap boundary, and at the previous 5vw every width from ~900px to
   ~1180px missed by a hair - it would have looked right at the cap and broken
   apart on a smaller laptop.
   The lower bound is min(2rem, 8.6vw), not a flat 2.5rem: because the brand
   name cannot break, a fixed floor overflows the viewport on a narrow phone
   rather than wrapping - at 375px a 2.5rem floor made "Google Workspace."
   351px wide inside a 327px column, i.e. a horizontally scrolling page.
   Fallback faces (system-ui, Segoe UI, Arial) all measure NARROWER than
   Space Grotesk here, so a blocked Google Fonts CDN cannot reintroduce
   the wrap. */
.hero__title { font-size: clamp(min(1.85rem, 8vw), 4.6vw, 3.5rem); margin: 1.4rem 0; }
.hero__title .line { display: block; }
.hero__sub { color: var(--text-2); font-size: 1.15rem; max-width: 34ch; margin: 0 0 2rem; }
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; }
.hero__trust { color: var(--muted); font-size: .9rem; margin-top: 1.4rem; }

/* floating product mock */
.hero__visual { position: relative; perspective: 1600px; margin-right: -7vw; }
.glow { position: absolute; inset: -12% -8%; z-index: 0;
  background: radial-gradient(closest-side, rgba(13,202,240,.28), transparent 70%); filter: blur(20px); }
.mock { position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow-glow);
  transform: rotateY(-14deg) rotateX(6deg) translateZ(0); transform-style: preserve-3d;
  transition: transform .4s var(--ease); }
.mock__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  background: rgba(255,255,255,.02); border-bottom: 1px solid var(--line); }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #3a4048; }
.dot:nth-child(1){ background:#ff5f57 } .dot:nth-child(2){ background:#febc2e } .dot:nth-child(3){ background:#28c840 }
.mock__addr { margin-left: .6rem; font-size: .75rem; color: var(--muted);
  background: rgba(255,255,255,.04); padding: .25rem .7rem; border-radius: 6px; }
.mock__body { display: grid; grid-template-columns: 128px 1fr; min-height: 320px; }
.mock__side { background: var(--ink-2); border-right: 1px solid var(--line); padding: .9rem .7rem; display: flex; flex-direction: column; gap: .35rem; }
.mock__brand { display: flex; align-items: center; gap: .4rem; font-family: "Space Grotesk"; font-weight: 700; font-size: .8rem; margin-bottom: .7rem; }
.mock__nav { font-size: .78rem; color: var(--text-2); padding: .4rem .55rem; border-radius: 7px; }
.mock__nav.is-active { color: #04222b; background: linear-gradient(180deg, var(--cyan-2), var(--cyan)); font-weight: 600; }
.mock__main { padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.mock__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; }
.mcard__label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.mcard__num { font-family: "Space Grotesk"; font-weight: 700; font-size: 1.3rem; }
.mcard--alert .mcard__num { color: var(--warm); }
.mock__chart { display: flex; align-items: flex-end; gap: 5px; height: 92px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .7rem; }
.mock__chart span { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(13,202,240,.15)); }
.mock__rows { display: flex; flex-direction: column; gap: .45rem; }
.mrow { display: flex; align-items: center; gap: .6rem; }
.mrow__ava { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); flex: none; }
.mrow__bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.09); }
.mrow__bar.w70 { width: 70% } .mrow__bar.w50 { width: 50% } .mrow__bar.w60 { width: 60% }
.mrow__tag { margin-left: auto; font-size: .62rem; padding: .18rem .5rem; border-radius: 999px; font-weight: 600; }
.mrow__tag.ok { color: #7ee0a7; background: rgba(25,135,84,.18); }
.mrow__tag.warn { color: #ffd479; background: rgba(255,193,7,.15); }

/* ============ trust strip ============ */
.strip { max-width: var(--maxw); margin: 2rem auto; padding: 2rem 1.5rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.strip__label { color: var(--muted); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1.2rem; }
.strip__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1rem; }
.strip__items li { color: var(--text-2); font-family: "Space Grotesk"; font-weight: 500; font-size: 1.02rem;
  padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); }

/* ============ sections ============ */
.section { max-width: var(--maxw); margin: 0 auto; padding: 6rem 1.5rem; }
/* First section on a subpage: clears the fixed nav. A class, not an inline
   style, so the mobile override below can actually reach it. */
.section--top { padding-top: 11rem; padding-bottom: 1rem; }
/* Someone lands on Security & Trust with a question, not to be impressed.
   Same design system, ~20% less air between sections. */
.page-dense .section { padding: 4.75rem 1.5rem; }
.page-dense .section--top { padding-top: 10rem; padding-bottom: .5rem; }
/* A section that is ONLY a headline and a lead - no grid, table or figure
   beneath it. At full section padding it stacks against the next section's
   padding and the pair reads as a hole in the page rather than a beat. */
.section--statement { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.page-dense .section--statement { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.page-dense .stats { padding: 2.6rem 1.5rem; }
.section__head { max-width: 640px; margin: 0 auto 3.4rem; text-align: center; }
.section__title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 1.1rem 0 .9rem; }
.section__lead { color: var(--text-2); font-size: 1.1rem; margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
/* 2-up variant for cards with longer bodies. Must be a class, not an
   inline style: an inline grid-template-columns would beat the 900px
   media query below and the grid would never collapse on mobile. */
.feature-grid--2up { grid-template-columns: repeat(2, 1fr); }
.feature { position: relative; padding: 1.7rem 1.6rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.01));
  transition: transform .3s var(--ease), border-color .3s, background .3s; overflow: hidden; }
.feature::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(130deg, transparent 40%, rgba(13,202,240,.5)); -webkit-mask:
  linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.feature:hover { transform: translateY(-2px); border-color: transparent; background: linear-gradient(180deg, rgba(13,202,240,.06), rgba(255,255,255,.01)); }
.feature:hover::before { opacity: 1; }
.feature__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  font-size: 1.3rem; color: var(--cyan); margin-bottom: 1.1rem;
  background: rgba(13,202,240,.1); border: 1px solid rgba(13,202,240,.25); box-shadow: inset 0 0 18px rgba(13,202,240,.12); }
.feature__title { font-size: 1.22rem; margin-bottom: .5rem; }
.feature__desc { color: var(--text-2); font-size: .98rem; margin: 0; }
/* Card that ends in a CTA. Without this the button sits directly under the
   body copy, so two cards side by side with different copy lengths put their
   buttons at different heights - plainly visible across a 2-up grid. */
.feature--action { display: flex; flex-direction: column; }
.feature__action { margin-top: auto; padding-top: 1.2rem; }
/* Guides index: the whole card is the anchor, not just its heading. .feature
   already lifted and glowed on hover, which promised a click target the markup
   did not provide. Global `a { color: inherit }` covers the colour, so all
   that is needed here is a title cue and a real focus ring - the card is now
   the tab stop, and without this keyboard users get no visible one. */
.guide-card:hover .feature__title { color: var(--cyan); }
.guide-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ============ request form ============ */
.form { max-width: 720px; margin: 0 auto; }
/* Sent state: no fields left, so centre what remains to sit under the centred
   hero instead of hanging off to the left of it. */
.form.is-sent { text-align: center; }
.form.is-sent .form__note { text-align: center; margin-top: 1.6rem; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form__row--full { grid-column: 1 / -1; }
.form__label { display: block; font-size: .84rem; font-weight: 600; color: var(--text-2);
  margin-bottom: .42rem; letter-spacing: .01em; }
.form__req { color: var(--cyan); }
.form__input, .form__select, .form__textarea {
  width: 100%; padding: .82rem 1rem; border-radius: 12px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04); color: var(--text); font-family: Inter, system-ui, sans-serif;
  font-size: .98rem; outline: none; transition: border-color .2s, background .2s; }
.form__input::placeholder, .form__textarea::placeholder { color: var(--text-2); opacity: .55; }
.form__input:focus, .form__select:focus, .form__textarea:focus {
  border-color: var(--cyan); background: rgba(13,202,240,.06); }
.form__textarea { min-height: 118px; resize: vertical; }
.form__select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
.form__select option { background: #12151b; color: var(--text); }

/* Purpose picker. Real radios kept in the DOM for keyboard and screen-reader
   users; the chip is the visible control. */
.form__purpose { display: flex; gap: .6rem; flex-wrap: wrap; }
.form__chip { position: relative; }
.form__chip input { position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; }
.form__chip span { display: block; padding: .62rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text-2);
  font-size: .92rem; font-weight: 500; transition: all .2s var(--ease); }
.form__chip input:checked + span { border-color: var(--cyan); color: var(--text);
  background: rgba(13,202,240,.12); }
.form__chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Off-screen, not display:none - a bot that skips hidden fields still fills it. */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.6rem; }
.form__msg { margin: .9rem 0 0; font-size: .95rem; color: var(--text-2); min-height: 1.4em; }
/* Collapse at rest. The element now sits on its own line below the button
   rather than beside it, so a reserved 1.4em would be permanent dead space. */
.form__msg:empty { margin: 0; min-height: 0; }
/* The success state replaces the entire form, so it has to carry that weight -
   as a bare line of text it reads as a caption for a form that is no longer
   there. */
.form__msg.is-ok { color: var(--cyan); font-size: 1.05rem; line-height: 1.5;
  padding: 1.15rem 1.35rem; border: 1px solid rgba(13,202,240,.35);
  background: rgba(13,202,240,.07); border-radius: var(--radius); }
.form__msg.is-err { color: #ff8a8a; }
.form__note { font-size: .86rem; color: var(--muted); margin: 1.4rem 0 0; }
@media (max-width: 700px) { .form__grid { grid-template-columns: 1fr; } }

/* ============ product screenshots (framed) ============ */
.shot { position: relative; z-index: 1; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--panel);
  box-shadow: var(--shadow-glow), 0 0 90px -45px rgba(13, 202, 240, .5); }
.shot img { display: block; width: 100%; height: auto; }
.shot--hero { transform: rotateY(-14deg) rotateX(6deg) translateZ(0); transform-style: preserve-3d;
  transition: transform .4s var(--ease); }

/* ============ security showcase ============ */
.security__feature { display: grid; grid-template-columns: .92fr 1.08fr; gap: 2.6rem; align-items: center; margin-bottom: 1.4rem; }
.security__title { font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin-bottom: 1.2rem; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .95rem; }
.checks li { position: relative; padding-left: 2.1rem; color: var(--text-2); font-size: 1.02rem; }
.checks li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--cyan);
  background: rgba(13,202,240,.12); border: 1px solid rgba(13,202,240,.3); border-radius: 6px; }
.security__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.2rem; }
.shot--card { display: flex; flex-direction: column; transition: transform .3s var(--ease), border-color .3s; }
.shot--card img { border-bottom: 1px solid var(--line);
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.shot--card figcaption { padding: .95rem 1.15rem; color: var(--text-2); font-size: .95rem;
  font-family: "Space Grotesk", sans-serif; font-weight: 500; flex: 1; }
.shot--card:hover { transform: translateY(-4px); border-color: rgba(13,202,240,.4); }

/* ============ showcase (image + copy, alternating) ============ */
.showcase { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.8rem; align-items: center; }
.showcase__copy .eyebrow { margin-bottom: 1rem; }
.showcase__title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin: .3rem 0 1.1rem; }
.showcase__lead { color: var(--text-2); font-size: 1.08rem; margin: 0 0 1.6rem; }

/* ============ architecture diagram ============ */
.arch { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: auto; }
/* The diagram carries 11-13px labels in a 900-unit viewBox. Left to scale
   freely it would render them at ~5px on a phone. Scroll it inside its own
   container instead, exactly like the wide tables do. */
.arch-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; }
@media (max-width: 760px) { .arch { min-width: 700px; } }
.arch__box { fill: rgba(255,255,255,.03); stroke: var(--line-2); }
.arch__box--you { fill: rgba(13,202,240,.07); stroke: rgba(13,202,240,.45); }
.arch__label { fill: var(--text); font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; }
.arch__sub { fill: var(--text-2); font-family: Inter, sans-serif; font-size: 13px; }
.arch__tag { fill: var(--muted); font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: .1em; }
.arch__wire { stroke: var(--cyan); stroke-width: 2.5; fill: none; }
.arch__wire--minor { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 5 5; }
.arch__pulse { fill: var(--cyan); }
.js .arch__pulse { animation: archPulse 3.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes archPulse {
  0%   { transform: translateX(0);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(212px); opacity: 0; }
}
.arch__note { fill: var(--muted); font-family: Inter, sans-serif; font-size: 12.5px; }
.arch__head { fill: var(--cyan); }
/* Second pulse runs the opposite way on the lower wire, offset by half the
   cycle so the two read as one conversation going back and forth rather than
   two unrelated things firing at once. */
.js .arch__pulse--rev { animation: archPulseRev 3.4s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay: 1.7s; }
@keyframes archPulseRev {
  0%   { transform: translateX(0);      opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(-204px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .arch__pulse { display: none; } }

/* ============ pricing ============ */
.pricing__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 880px; margin: 0 auto; }
.plan { position: relative; padding: 2.3rem 2rem; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.plan--featured { border-color: rgba(13,202,240,.5);
  background: radial-gradient(120% 100% at 50% 0%, rgba(13,202,240,.10), transparent 62%), var(--panel);
  box-shadow: 0 24px 70px -34px rgba(13,202,240,.55); }
.plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--cyan-2), var(--cyan)); color: #04222b;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .03em;
  padding: .34rem .95rem; border-radius: 999px; white-space: nowrap; }
.plan__name { font-size: 1.75rem; }
.plan__tag { color: var(--text-2); margin: .55rem 0 1.4rem; min-height: 2.9em; }
.plan__features { list-style: none; margin: 0 0 1.8rem; padding: 0; display: flex; flex-direction: column; gap: .72rem; }
.plan__features li { position: relative; padding-left: 1.7rem; color: var(--text-2); font-size: .98rem; }
.plan__features li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--cyan); font-weight: 700; font-size: .85rem; }
.plan__features strong { color: var(--text); }
.plan__cta { width: 100%; justify-content: center; }
/* Multi-year block under the band table. Width matches .pricing__table-wrap so
   the three cards line up with the table above rather than running wider. */
.pricing__term { max-width: 880px; margin: 2.6rem auto 0; }
.pricing__term-head { text-align: center; margin: 0 0 1.3rem; }
.pricing__term-head h3 { font-size: 1.4rem; margin: 0 0 .45rem; }
.pricing__term-head p { color: var(--text-2); font-size: .98rem; margin: 0; }
.pricing__note { text-align: center; color: var(--text-2); margin: 2rem 0 0; }
.pricing__note a { color: var(--cyan); font-weight: 600; }
.pricing__fine { text-align: center; color: var(--muted); font-size: .85rem; margin: .6rem 0 0; }
.pricing__table-wrap { max-width: 880px; margin: 2.4rem auto 0; overflow-x: auto; }
.th-narrow { display: none; }   /* mobile-only short form of the first column header */
.pricing__table { width: 100%; border-collapse: collapse; font-size: .98rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pricing__table th, .pricing__table td { padding: .8rem 1.15rem; text-align: left;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.pricing__table thead th { color: var(--text-2); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.02); }
.pricing__table thead th.is-featured { color: var(--cyan); }
.pricing__table tbody tr:last-child td { border-bottom: 0; }
.pricing__table tbody td { color: var(--text-2); }
.pricing__table tbody td:first-child { color: var(--text); font-weight: 500; }
.pricing__table td.is-featured { color: #fff; background: rgba(13,202,240,.06); font-weight: 500; }
.pricing__table td span { color: var(--muted); font-size: .8rem; font-weight: 400; }
/* starting-price line on the plan cards */
.plan__price { margin: .3rem 0 .1rem; color: var(--text-2); font-size: .95rem; }
.plan__price strong { color: var(--text); font-size: 1.5rem; font-weight: 700; font-family: "Space Grotesk"; }
.plan__price span { color: var(--muted); font-size: .85rem; }
/* vendor trust strip */
.trustbar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 1000px; margin: 2rem auto 0; }
.trustbar__item { padding: 1.5rem 1.4rem; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.01)); }
.trustbar__title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; color: var(--text); }
.trustbar__title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan); margin-right: .55rem; vertical-align: middle; }
.trustbar__desc { color: var(--text-2); font-size: .95rem; line-height: 1.5; margin: 0; }
@media (max-width: 820px) { .trustbar__grid { grid-template-columns: 1fr; max-width: 460px; } }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 1.8rem; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 460px; }
}

/* ============ stats band ============ */
.stats { max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1.5rem;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13,202,240,.04), transparent); }
.stat { text-align: center; }
.stat__num { display: block; font-family: "Space Grotesk"; font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
  background: linear-gradient(180deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* A word-valued stat ("DIRECT") next to numerals. Smaller font so it fits the
   column, but the LINE-HEIGHT is pinned to the numeral font-size so the box is
   exactly as tall -- otherwise this column's label rides up above the others. */
.stat__num--word { font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: .02em; }
.stat__label { color: var(--text-2); font-size: .9rem; margin-top: .5rem; display: block; }

/* ============ CTA band ============ */
.cta-band { max-width: var(--maxw); margin: 6rem auto; padding: 0 1.5rem; }
.cta-band__inner { position: relative; overflow: hidden; text-align: center;
  padding: 4.5rem 2rem; border-radius: var(--radius-lg); border: 1px solid var(--line-2);
  background: radial-gradient(120% 140% at 50% 0%, rgba(13,202,240,.16), transparent 60%), var(--panel); }
/* pointer-events:none is LOAD-BEARING, not tidiness. This pseudo-element covers
   the whole band, and `position:relative` on the title/sub/actions does NOT lift
   them above it — with both at `z-index:auto` the ::after paints last and wins
   the hit test. The grid is faint and masked, so it looks fine while silently
   eating every click in the band. It made "Request a 30-day evaluation" and
   "See pricing" unclickable on all 7 pages that use .cta-band. */
.cta-band__inner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent 70%); opacity: .5; }
.cta-band__title { position: relative; font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
.cta-band__sub { position: relative; color: var(--text-2); margin: 1rem 0 2rem; font-size: 1.1rem; }
.cta-band__actions { position: relative; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ============ sub-pages (docs / legal / stubs) ============ */
.page { max-width: 780px; margin: 0 auto; padding: 12rem 1.5rem 5rem; min-height: 60vh; }
.page__eyebrow { margin-bottom: 1.3rem; }
.page__title { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 1.2rem; }
.page__lead { color: var(--text-2); font-size: 1.15rem; margin: 0 0 2rem; }
.page__note { color: var(--text-2); border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 10px; background: rgba(13,202,240,.04); padding: 1.1rem 1.3rem; margin: 0 0 2.2rem; font-size: .98rem; }
.page__actions { display: flex; gap: .9rem; flex-wrap: wrap; }
/* display:flex, not inline-flex. As an inline box it sat on the same line as
   the eyebrow badge that follows it and read as a collision rather than a
   layout. width:fit-content keeps the hover target on the text only. */
.page__back { display: flex; width: fit-content; align-items: center; gap: .4rem; color: var(--text-2); font-weight: 500; margin-bottom: 2.2rem; }
.page__back:hover { color: var(--cyan); }

/* ============ footer ============ */
.footer { border-top: 1px solid var(--line); margin-top: 3rem; }
.footer__grid { max-width: var(--maxw); margin: 0 auto; padding: 4rem 1.5rem 2.5rem;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 2rem; }
.footer__tag { color: var(--text-2); font-size: .95rem; max-width: 30ch; margin: 1rem 0 0; }
.footer__col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 1rem; }
.footer__col a { display: block; color: var(--text-2); font-size: .95rem; padding: .3rem 0; transition: color .2s; }
.footer__col a:hover { color: var(--cyan); }
.footer__bottom { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; color: var(--muted); font-size: .85rem; }

/* ============ before / after workflow ============ */
.workflow__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 940px; margin: 0 auto; }
.wf { position: relative; padding: 2rem 1.9rem; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.wf--after { border-color: rgba(13,202,240,.4);
  background: radial-gradient(120% 100% at 50% 0%, rgba(13,202,240,.08), transparent 60%), var(--panel); }
.wf__head { margin-bottom: 1.3rem; }
.wf__tag { display: inline-block; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: .76rem;
  letter-spacing: .05em; text-transform: uppercase; padding: .36rem .9rem; border-radius: 999px; }
.wf__tag--before { color: #ff9d8a; background: rgba(255,95,87,.12); border: 1px solid rgba(255,95,87,.3); }
.wf__tag--after { color: #04222b; background: linear-gradient(180deg, var(--cyan-2), var(--cyan)); }
.wf__steps { list-style: none; margin: 0; padding: 0; counter-reset: wf; display: flex; flex-direction: column; gap: .85rem; }
.wf__steps li { position: relative; counter-increment: wf; padding-left: 2.5rem; color: var(--text-2); font-size: 1rem; line-height: 1.9; }
.wf__steps li::before { content: counter(wf); position: absolute; left: 0; top: 0; width: 27px; height: 27px;
  display: grid; place-items: center; font-family: "Space Grotesk"; font-size: .8rem; font-weight: 700;
  color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 8px; }
.wf__steps--after li { color: var(--text); }
.wf__steps--after li::before { color: var(--cyan); background: rgba(13,202,240,.12); border-color: rgba(13,202,240,.35); }
.wf__punch { margin: 1.6rem 0 0; color: var(--text); font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 1.05rem; }
@media (max-width: 900px) { .workflow__grid { grid-template-columns: 1fr; } }

/* ============ security substrip (detect / respond / prove) ============ */
.security__substrip { text-align: center; max-width: 580px; margin: 3.4rem auto 0; }
.security__subtitle { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.security__subtext { color: var(--text-2); margin: .7rem 0 0; }
.shot--card__step { display: inline-block; margin-right: .55rem; color: var(--cyan); font-weight: 700;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* ============ built by school IT ============ */
.builtby__inner { max-width: 800px; margin: 0 auto; text-align: center; padding: 2.8rem 2rem;
  border-radius: var(--radius-lg); border: 1px solid var(--line-2);
  background: radial-gradient(120% 130% at 50% 0%, rgba(124,92,255,.10), transparent 60%), var(--panel); }
.builtby__inner .eyebrow { margin-bottom: 1.2rem; }
.builtby__title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 1.2rem; }
.builtby__lead { color: var(--text-2); font-size: 1.1rem; margin: 0 auto 1.9rem; max-width: 62ch; }
.builtby__points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .9rem; }
.builtby__points li { color: var(--text-2); font-size: .93rem; padding: .5rem 1.05rem;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); }

/* ============ product tour (poster -> lightbox) ============ */
/* A <button>, not a div: this is the primary control for the tour and it has
   to be reachable and operable from the keyboard. That means resetting the UA
   button styling (font, text-align, padding, background) by hand. */
.tour__player { display: block; position: relative; width: 100%; max-width: 1000px;
  margin: 0 auto; padding: 0; font: inherit; text-align: left; color: inherit; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--panel); box-shadow: var(--shadow-glow);
  transition: border-color .35s, box-shadow .35s; }
/* No transform on this hover, deliberately. The element carries .reveal, and
   GSAP finishes that animation by writing `transform: translate(0px, 0px)`
   inline -- an inline declaration beats any stylesheet rule, so a :hover
   transform here would simply never apply. The lift lives on .tour__play,
   which GSAP never touches. */
.tour__player:hover { border-color: rgba(13,202,240,.45);
  box-shadow: 0 0 0 1px rgba(13,202,240,.22), 0 44px 110px -34px rgba(13,202,240,.4); }
.tour__player:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.tour__poster { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.tour__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 58% at 50% 46%, rgba(4,6,9,.26), rgba(4,6,9,.68)); }
.tour__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--cyan-2), var(--cyan));
  box-shadow: 0 18px 50px -12px rgba(13,202,240,.75); pointer-events: none;
  transition: transform .35s var(--ease); }
.tour__player:hover .tour__play { transform: translate(-50%, -50%) scale(1.09); }
/* CSS triangle rather than a glyph: ▶ renders at a different size and baseline
   in every fallback font, and inside an 84px disc that is very visible. */
.tour__tri { width: 0; height: 0; margin-left: 6px;
  border-left: 23px solid #04222b;
  border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.tour__meta { position: absolute; left: 1.15rem; bottom: 1.15rem; pointer-events: none;
  display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(7,9,12,.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text-2); font-size: .85rem; }
.tour__time { color: var(--cyan); font-weight: 600; font-variant-numeric: tabular-nums; }
.tour__note { max-width: 1000px; margin: 1.15rem auto 0; text-align: center;
  color: var(--muted); font-size: .9rem; }

/* ============ tour lightbox ============ */
.tour-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  padding: 5vw; background: rgba(4,6,9,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tour-modal.is-open { display: flex; }
/* NO `overflow: hidden` here, deliberately. The close button is a CHILD of the
   frame and is positioned to hang off the corner at top/right: -14px, so
   clipping the frame ate its own close button - it survived only as a sliver
   where it overlapped the frame's box. The rounding is done on the video
   itself below instead, which gets the same look without clipping anything.
   The frame's own background and border are still rounded by border-radius;
   overflow only ever affected children. */
.tour-modal__frame { position: relative; width: min(1040px, 100%); aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: #000;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); }
.tour-modal__frame video, .tour-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block;
  border-radius: inherit; }
.tour-modal__close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 1.3rem; cursor: pointer;
  display: grid; place-items: center; line-height: 1; z-index: 1; }
.tour-modal__close:hover { border-color: var(--cyan); color: var(--cyan); }
.tour-modal__close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ============ reveal (JS-driven) ============ */
.js .reveal { opacity: 0; transform: translateY(16px); }
/* Directional pair reveal. Same .js gate as .reveal, so the no-GSAP and
   reduced-motion paths (both of which drop the .js class) show everything. */
.js .reveal-l { opacity: 0; transform: translateX(-26px) scale(.97); }
.js .reveal-r { opacity: 0; transform: translateX(26px); }
@media (max-width: 900px) {
  .js .reveal-l, .js .reveal-r { transform: translateY(16px); }
}

/* ============ responsive ============ */
@media (max-width: 900px) {
  /* 6rem top AND bottom per section is 192px of dead space between every
     block on a 375px screen. Long pages (security, system requirements)
     become an unreasonable amount of scrolling for no benefit. */
  .section { padding: 3.5rem 1.5rem; }
  .section--top { padding-top: 7rem; padding-bottom: .5rem; }
  .page-dense .section { padding: 3rem 1.5rem; }
  .page-dense .section--top { padding-top: 6.5rem; }
  .hero { padding-top: 8.5rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 3.5rem; }
  /* Drop the authored line break on narrow screens and let the headline
     reflow. The desktop break ("...center for" / "Google Workspace.") is
     wider than a phone column, so forcing it strands "for" alone on a line.
     Greedy wrapping never strands a single word this way, and the &nbsp; in
     the brand name still keeps "Google Workspace" together. */
  .hero__title .line { display: inline; }
  .hero__sub { max-width: none; }
  .hero__visual { margin-right: 0; }
  .shot--hero { transform: none; }
  .security__feature { grid-template-columns: 1fr; gap: 1.8rem; }
  .security__grid { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  /* 2rem gaps plus brand + CTA + toggle overflows a 375px bar; these two rules
     are what make the row fit. Measured, not guessed. */
  .nav__inner { gap: .7rem; }
  .feature-grid, .feature-grid--2up { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 2rem 1rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .tour__play { width: 62px; height: 62px; }
  .tour__tri { margin-left: 4px; border-left-width: 17px; border-top-width: 10px; border-bottom-width: 10px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .stats { grid-template-columns: 1fr; }
  /* Reclaims ~80px so brand + CTA + menu button fit on one row. The logo and
     "ORINEX" still identify the site. */
  .brand__sub { display: none; }
  /* The band table is 439px wide against a 327px column on a 375px phone, so
     112px - the entire Compliance price column - sat off-screen behind a
     scroll nobody is told about. Tightening the cells and shortening the first
     header brings all three columns into view. The wrap keeps overflow-x:auto
     as a backstop for narrower devices. */
  .pricing__table { font-size: .82rem; }
  .pricing__table th, .pricing__table td { padding: .6rem .45rem; }
  .th-wide { display: none; }
  .th-narrow { display: inline; }
}
/* The bar needs ~420px for brand + "Request an evaluation" + menu button. Below
   that the CTA wrapped onto two lines and pushed the nav to ~190px tall. It
   moves into the menu panel instead; the hero repeats it within the first
   screen anyway, so nothing is lost. */
@media (max-width: 480px) {
  .nav__actions { display: none; }
  .nav__menu .nav__menu-cta { display: flex; justify-content: center; width: 100%;
    margin-top: 1rem; border-bottom: 0; color: #04222b; }
  /* The duration chip overlaps the play disc once the poster is this narrow. */
  .tour__meta { left: .7rem; bottom: .7rem; font-size: .78rem; padding: .35rem .75rem; }
  .footer__bottom { flex-direction: column; gap: .5rem; text-align: center; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  * { scroll-behavior: auto; }
}

/* ============ long-form legal documents (data practices, EULA, terms) ============
   The substance lives in HTML, not behind a PDF: a district privacy reviewer
   needs to search it, quote it into a DPA worksheet, and link a colleague to one
   section. A PDF defeats all three, and an untagged PDF would likely fail the
   508/WCAG check a public-sector buyer applies. The PDF is offered alongside for
   board packets, not as the destination. */
.legal { color: var(--text-2); font-size: 1rem; line-height: 1.7; }
.legal > *:first-child { margin-top: 0; }

/* Section headings arrive ALL CAPS from the signed source and are rendered
   verbatim. Sized down with letter-spacing so they read as deliberate small
   caps rather than as shouting. */
.legal h2 {
  font-size: .95rem; letter-spacing: .08em; color: var(--text);
  margin: 2.6rem 0 .9rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.legal .legal__toc h2 { margin: 0 0 .8rem; padding: 0; border: 0; }
.legal h3 {
  font-size: .9rem; letter-spacing: .04em; color: var(--text);
  margin: 1.8rem 0 .6rem;
}
.legal p { margin: 0 0 1rem; }
.legal a { color: var(--cyan); }
.legal a:hover { text-decoration: underline; }
.legal strong, .legal b { color: var(--text); font-weight: 650; }

.legal ul { margin: 0 0 1.2rem; padding-left: 1.1rem; list-style: none; }
.legal ul li { position: relative; padding-left: .9rem; margin: .35rem 0; }
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); opacity: .75;
}

/* Contents. The document runs to 3,300 words; a reviewer arrives wanting one
   answer and should be able to jump straight to it. */
.legal__toc {
  border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 10px; background: rgba(13,202,240,.04);
  padding: 1.2rem 1.4rem; margin: 0 0 2.4rem;
}
.legal__toc ol { margin: 0; padding-left: 1.2rem; }
.legal__toc li { margin: .3rem 0; font-size: .93rem; }
.legal__toc a { color: var(--text-2); }
.legal__toc a:hover { color: var(--cyan); }

.legal__version { color: var(--muted); font-size: .88rem; margin: 0 0 .5rem;
  letter-spacing: .04em; text-transform: uppercase; }
.legal__download { color: var(--muted); font-size: .93rem; margin: 0 0 1.6rem; }
.legal__meta { color: var(--muted); font-size: .93rem; margin: 0 0 2rem; }

/* EULA clause numbering. The number is its own element rather than a tab, so
   "1.1" and "1.10" still start the same text column -- matching the PDF, which
   is what a district's counsel will have alongside it. */
.legal__clause { position: relative; padding-left: 3.4rem; margin: 0 0 .85rem; }
.legal__num {
  position: absolute; left: 0; top: 0; width: 3rem;
  color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums;
}
.legal__sub { padding-left: 4.6rem; text-indent: -1.2rem; margin: 0 0 .7rem; }

/* Conspicuous blocks (the fixed-term promise, the warranty disclaimer). The
   source drew these as an ASCII box of "=" rules; this is that box. Text stays
   upper case on purpose -- conspicuousness is doing legal work here. */
.legal__callout {
  margin: 1.4rem 0; padding: 1.1rem 1.25rem;
  background: rgba(120, 170, 190, .07);
  border: 1px solid var(--line, rgba(140,170,185,.22));
  border-radius: 10px;
}
.legal__callout h3 {
  margin: 0 0 .7rem; font-size: .93rem; font-weight: 700;
  color: var(--text); letter-spacing: .01em;
}
.legal__callout p {
  margin: 0 0 .65rem; font-size: .88rem; line-height: 1.6;
  font-weight: 600; color: var(--text-2);
}
.legal__callout p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .legal__clause { padding-left: 2.7rem; }
  .legal__num { width: 2.4rem; }
  .legal__sub { padding-left: 3.4rem; text-indent: -1rem; }
}

/* Term / description pairs. The source was authored as fixed-width text, so
   these arrive space-aligned; they are rebuilt as a real definition list. */
.legal__pairs { margin: 0 0 1.4rem; display: grid; gap: 0; }
.legal__pairs > div {
  display: grid; grid-template-columns: minmax(9.5rem, 15rem) 1fr; gap: 0 1.2rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.legal__pairs dt { color: var(--text); font-weight: 600; font-size: .93rem; }
.legal__pairs dd { margin: 0; font-size: .95rem; }

/* Retention table. Scrolls inside its own container so the page body never
   scrolls sideways on a phone. */
.legal__tablewrap { overflow-x: auto; margin: 0 0 1.6rem;
  border: 1px solid var(--line); border-radius: 10px; }
.legal__table { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .92rem; }
.legal__table th {
  text-align: left; color: var(--text); font-weight: 650; font-size: .8rem;
  letter-spacing: .07em; background: rgba(255,255,255,.03);
  padding: .7rem .9rem; border-bottom: 1px solid var(--line-2);
}
.legal__table td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal__table tr:last-child td { border-bottom: 0; }

@media (max-width: 620px) {
  .legal__pairs > div { grid-template-columns: 1fr; gap: .15rem; }
  .legal h2 { margin-top: 2rem; }
}

/* ============ guides ============
   Reference articles about how Google Workspace behaves, distinct from the
   product documentation. Narrower measure than the marketing sections: these
   are read, not scanned. */
.guide { max-width: 720px; margin: 0 auto; color: var(--text-2); font-size: 1.05rem; line-height: 1.75; }
.guide h2 { font-size: 1.35rem; color: var(--text); margin: 2.6rem 0 .9rem; scroll-margin-top: 90px; }
.guide p { margin: 0 0 1.15rem; }
.guide a { color: var(--cyan); }
.guide a:hover { text-decoration: underline; }
.guide strong { color: var(--text); font-weight: 650; }
.guide ul, .guide ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.guide li { margin: .4rem 0; }
.guide ul { list-style: none; padding-left: 1.1rem; }
.guide ul li { position: relative; padding-left: .9rem; }
.guide ul li::before { content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); opacity: .75; }
.guide__rule { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0 1.6rem; }
.guide__toc { border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 10px; background: rgba(13,202,240,.04); padding: 1rem 1.3rem; margin: 0 0 2.2rem; }
.guide__toc ol { margin: 0; padding-left: 1.1rem; }
.guide__toc li { margin: .25rem 0; font-size: .93rem; }
.guide__toc a { color: var(--text-2); }
.guide__toc a:hover { color: var(--cyan); }

.guide h3 { font-size: 1.06rem; color: var(--text); margin: 1.9rem 0 .6rem; font-weight: 650; }
.guide code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 5px; padding: .1em .22em; color: var(--text); white-space: nowrap; }
/* horizontal padding on inline code reads as a stray space before a following
   comma or full stop, so keep it tight -- .38em looked like a typo. */
.guide a code { color: inherit; }
.guide__quote { margin: 1.4rem 0; padding: .9rem 1.3rem; border-left: 3px solid var(--cyan);
  background: rgba(13,202,240,.05); border-radius: 0 8px 8px 0; color: var(--text);
  font-size: 1rem; line-height: 1.6; }
.guide__quote code { background: rgba(0,0,0,.25); }
.guide__crumbs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  font-size: .82rem; color: var(--muted); margin: 0 0 1.1rem; }
.guide__crumbs a { color: var(--text-2); }
.guide__crumbs a:hover { color: var(--cyan); }
.guide__crumb-sep { opacity: .45; }
.guides__cat { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.1rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--line); }
.guide__tablewrap { overflow-x: auto; margin: 1.5rem 0; }
.guide__table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.guide__table th, .guide__table td { padding: .55rem .8rem; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.guide__table thead th { color: var(--text); font-weight: 650; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--cyan); }
.guide__table tbody tr:last-child td { border-bottom: 0; }
.guide__table td:first-child { color: var(--text); }