/* ═══════════════════════════════════════════════════════════
   ShiftPoint.ai — light edition.

   Four rules this sheet is built on:
   1. White is the page. Depth comes from hairlines and one soft
      wash behind the hero, never from a second background colour
      fighting the first.
   2. Blue is reserved. It marks a call to action, an active link,
      and nothing else. If everything is accented, nothing is.
   3. Serif carries the argument, sans carries the interface.
   4. Contrast is a floor, not a preference — body text sits at
      #3D4653 on white (8.9:1), the accent at #1D4ED8 (5.6:1).
   ═══════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --paper:      #FFFFFF;
  --paper-2:    #F7F8FA;
  --paper-3:    #EFF2F6;
  --line:       #E4E8ED;
  --line-2:     #D2D8E0;

  /* ink */
  --ink:        #0C1017;
  --body:       #3D4653;
  --mute:       #6B7583;
  --faint:      #949CA8;

  /* The one accent, taken from the product rather than picked to suit
     the page: #1B37D8 is the app's blue, documented in pivot's
     AGENTS.md as "every other blue in the app". #0046F3 is sampled off
     the bowl of the logo's p, #012490 off the splash field. Change
     these only when the app changes. */
  --blue:       #1B37D8;
  --blue-lit:   #0046F3;
  --blue-deep:  #012490;
  --blue-wash:  #F0F3FE;

  /* The logo's orange (#FF7300, the three dots in the speech bubble).
     Declared so it is on record, deliberately used nowhere: the mark
     carries it, the interface does not. */
  --orange:     #FF7300;

  /* type */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* metrics */
  --gut: clamp(20px, 5vw, 64px);
  --col: 1140px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--ui);
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

.wrap{
  width:100%;
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff;
  padding:12px 20px; border-radius:0 0 8px 0;
  font-size:14px; font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:3px;
}

/* ─────────────── type scale ─────────────── */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-.012em;
  line-height:1.06;
  margin:0;
}

h2{ font-size:clamp(30px, 4.4vw, 50px); line-height:1.12; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
em{ font-style:italic; }
strong{ color:var(--ink); font-weight:600; }

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 22px;
}
.eyebrow span{
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow span::before{
  content:""; width:26px; height:1px; background:var(--line-2);
}

/* ═══════════════════ NAV ═══════════════════ */

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav.is-stuck{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 var(--line), 0 8px 28px -22px rgba(12,16,23,.5);
}

.nav__in{
  max-width:var(--col);
  margin-inline:auto;
  padding:14px var(--gut);
  display:flex; align-items:center; gap:20px;
}

.mark{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--ink);
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  margin-right:auto;
}
.mark__glyph{ width:19px; height:19px; color:var(--blue); flex:none; }
.mark__glyph svg{ width:100%; height:100%; display:block; }
.mark__dot{ color:var(--blue); }

.nav__links{ display:flex; gap:4px; }
.nav__links a{
  position:relative;
  padding:7px 13px;
  border-radius:7px;
  color:var(--mute);
  text-decoration:none;
  font-size:14.5px; font-weight:500;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav__links a.is-active{ color:var(--blue); background:var(--blue-wash); }

/* the scroll progress hairline under the bar */
.nav__rule{ height:1px; background:var(--line); }
.nav__rule i{
  display:block; height:100%; width:0;
  background:var(--blue);
  transition:width .12s linear;
}

/* ─────────────── the one accent: CTAs ─────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px;
  border-radius:9px;
  background:var(--blue);
  color:#fff;
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(12,16,23,.16), 0 8px 20px -12px rgba(29,78,216,.6);
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{
  background:var(--blue-deep);
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(12,16,23,.18), 0 14px 28px -14px rgba(29,78,216,.7);
}
.btn:active{ transform:translateY(0); }

.btn--sm{ padding:9px 16px; font-size:14px; border-radius:8px; }
.btn--lg{ padding:15px 30px; font-size:16.5px; border-radius:10px; }

/* inverted, for the dark contact panel */
.btn--on{ background:#fff; color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.28); }
.btn--on:hover{ background:#fff; color:var(--blue-deep); }

/* secondary CTA — the accent carried by the arrow */
.quiet{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--blue);
  font-size:15px; font-weight:500;
  text-decoration:none;
}
.quiet span{ transition:transform .2s var(--ease); }
.quiet:hover span{ transform:translateX(4px); }
.quiet--on{ color:#B9CCF6; }
.quiet--on:hover{ color:#fff; }

/* ─────────────── mobile drawer ─────────────── */

.burger{
  display:none;
  width:38px; height:38px;
  padding:0;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:16px; height:1.5px;
  background:var(--ink); border-radius:2px;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.drawer{
  position:absolute; top:100%; left:0; right:0; z-index:99;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:10px var(--gut) 22px;
  display:flex; flex-direction:column;
  box-shadow:0 20px 40px -28px rgba(12,16,23,.6);
}
.drawer[hidden]{ display:none; }
.drawer a{
  padding:15px 2px;
  border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none;
  font-size:17px; font-weight:500;
}
.drawer a:last-child{ border-bottom:0; }

/* ═══════════════════ HERO ═══════════════════ */

.hero{
  position:relative;
  /* the bottom padding is not decorative — overflow:hidden clips
     the phone's long drop shadow without it */
  padding:clamp(64px, 10vw, 118px) 0 clamp(56px, 7vw, 96px);
  text-align:center;
  overflow:hidden;
}

/* one soft wash, top-centred — the only gradient on the page */
.hero__wash{
  position:absolute; inset:-30% -20% auto -20%; height:120%;
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(46,123,255,.14), transparent 70%),
    radial-gradient(40% 34% at 82% 14%, rgba(46,123,255,.07), transparent 72%);
  pointer-events:none;
}

.hero__in{ position:relative; }

.hero__h{
  font-size:clamp(44px, 8.2vw, 92px);
  line-height:1.02;
  letter-spacing:-.028em;
  margin:0 0 24px;
}

.hero__stmt{
  max-width:640px;
  margin:0 auto 34px;
  font-size:clamp(17px, 2.1vw, 20.5px);
  line-height:1.55;
  color:var(--body);
}

.hero__cta{
  display:flex; flex-wrap:wrap; gap:16px 28px;
  align-items:center; justify-content:center;
}

.hero__note{
  margin:26px 0 0;
  font-size:13.5px;
  color:var(--faint);
}

/* ─── the stage: product shot, floated ─────────────────────
   The screenshot is a light UI already, so it needs a seam
   against the page rather than a frame around it. A hairline
   bezel plus a long soft shadow does that; a heavy device
   chrome would fight the app's own header. */

.stage{
  position:relative;
  margin:clamp(48px, 7vw, 84px) auto 0;
  padding:0 var(--gut);
  max-width:calc(var(--col) - 120px);
  text-align:center;
}
.stage__glow{
  position:absolute; left:50%; top:8%;
  width:min(560px, 86%); height:70%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(46,123,255,.2), transparent 70%);
  filter:blur(48px);
  pointer-events:none;
}

.dev{
  position:relative;
  width:min(286px, 74vw);
  margin-inline:auto;
  padding:9px;
  border-radius:40px;
  background:linear-gradient(#F4F6F9, #E7EBF1);
  border:1px solid var(--line-2);
  box-shadow:
    0 1px 1px rgba(255,255,255,.9) inset,
    0 30px 60px -28px rgba(12,16,23,.42),
    0 60px 120px -60px rgba(12,16,23,.5);
}
.dev__screen{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  background:var(--paper);
  border:1px solid rgba(12,16,23,.1);
  /* the screenshot's own ratio, so nothing is cropped — it is a
     chat UI and cropping the sides eats the message bubbles */
  aspect-ratio:1320 / 2303;
}
.dev__screen img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
}
/* No notch overlay: the screenshot carries the app's own header
   row, and a drawn notch would sit right on top of it. */

.stage figcaption{
  margin-top:26px;
  font-size:13px;
  color:var(--faint);
  letter-spacing:.005em;
}

/* ═══════════════════ CHAPTERS ═══════════════════ */

.chapter{
  position:relative;
  padding:clamp(72px, 10vw, 132px) 0;
}
.chapter--alt{
  background:var(--paper-2);
  border-block:1px solid var(--line);
}

.chead{
  display:flex; align-items:center; gap:16px;
  margin-bottom:clamp(36px, 5vw, 60px);
}
.chead__num{
  font-family:var(--display);
  font-size:15px;
  color:var(--blue);
  letter-spacing:.04em;
}
.chead__rule{ flex:none; width:40px; height:1px; background:var(--line-2); }
.chead__label{
  font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}
.chead--on .chead__num{ color:#8FB4FF; }
.chead--on .chead__rule{ background:rgba(255,255,255,.24); }
.chead--on .chead__label{ color:#A9B4C4; }

/* ─────────────── narrative blocks ─────────────── */

.lede{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 68px);
  align-items:start;
}
/* No ch cap: the grid column is already the constraint, and 15ch on a
   50px serif broke this headline to one word per line. */
.lede h2{ max-width:none; }
.lede__body{ font-size:17px; padding-top:6px; }

.pillars{
  list-style:none;
  margin:clamp(48px, 6vw, 76px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.pillars li{
  background:var(--paper);
  padding:28px 26px 30px;
  display:flex; flex-direction:column; gap:8px;
}
.chapter--alt .pillars li{ background:var(--paper-2); }
.pillars b{
  font-size:15.5px; font-weight:600; color:var(--ink);
  letter-spacing:-.005em;
}
.pillars span{ font-size:15px; color:var(--mute); line-height:1.55; }

/* ═══════════════════ THE PRODUCT ═══════════════════ */

.prod{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 76px);
  align-items:start;
}

/* The mark ships as a square app icon on its own near-white field
   (#FCFCFC), not as a transparent glyph, so it needs the hairline and
   the radius to read as a tile rather than as a smudge on the page. */
.logo{
  display:block;
  width:66px; height:66px;
  margin-bottom:22px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 6px 18px -12px rgba(12,16,23,.55);
}
.logo img{ width:100%; height:100%; object-fit:cover; }

.prod__name{
  font-size:clamp(40px, 5.6vw, 62px);
  line-height:1;
  margin:0 0 14px;
}
.prod__promise{
  font-family:var(--display);
  font-size:clamp(20px, 2.5vw, 26px);
  line-height:1.3;
  color:var(--blue);
  margin:0 0 24px;
  /* no ch cap here — at 22ch the serif broke this into five ragged
     lines in the product column. The column is already the limit. */
  max-width:30ch;
}

.prod__cta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 26px;
  margin-top:30px;
}

/* The spec table — the factual counterweight to the prose.
   Label stacked over value rather than in a second column: the labels
   are uppercase with wide tracking, and in a fractional side column
   they overflowed straight through the values sitting beside them. */
.specs{
  margin:6px 0 0;
  border-top:1px solid var(--line);
}
.specs div{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.specs dt{
  font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
  margin-bottom:5px;
}
.specs dd{ margin:0; font-size:15.5px; color:var(--ink); line-height:1.45; }

/* ─────────────── the three cards ─────────────── */

.cards{
  list-style:none;
  margin:clamp(52px, 6vw, 84px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:9px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover{
  border-color:var(--line-2);
  box-shadow:0 18px 40px -30px rgba(12,16,23,.55);
  transform:translateY(-2px);
}
.card__n{
  font-family:var(--display);
  font-size:14px;
  color:var(--blue);
  letter-spacing:.06em;
  margin-bottom:2px;
}
.card b{
  font-family:var(--display);
  font-size:23px; font-weight:400;
  color:var(--ink);
  letter-spacing:-.01em;
}
.card span:last-child{ font-size:15px; color:var(--mute); line-height:1.58; }

/* ─────────────── the screenshot gallery ───────────────
   Real screens, cropped to the app's own column with the browser
   chrome removed. They are light UI on a light page, so each one gets
   a hairline and a soft shadow to sit on rather than a device bezel —
   these are not phone captures and a phone frame would lie about it. */

.gallery{
  list-style:none;
  margin:clamp(52px, 6vw, 84px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(24px, 3.5vw, 44px);
}
.gallery figure{ margin:0; }

/* Flat frame — the gallery holds cropped phone captures, not full-screen
   ones, so the `.phone` markup below would letterbox them badly. Keep the
   flat frame until a capture is a true full-height device screenshot.

   Both frames share one ratio so the two columns line up. It is the
   shorter capture's ratio, which means the lead shot is uncut and the
   identity shot loses its last ~5% — the already-clipped card at the
   bottom. Re-check this when either image is replaced. */
.screen__frame{
  border-radius:14px;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 24px 50px -34px rgba(12,16,23,.5);
  aspect-ratio:1039 / 1810;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.screen:hover .screen__frame{
  transform:translateY(-3px);
  box-shadow:0 30px 60px -32px rgba(12,16,23,.55);
}
.screen__frame img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
}

/* ─── the iPhone ───────────────────────────────────────────
   A real device frame: titanium bezel, 19.5:9 screen, dynamic
   island. The screen aspect is the iPhone's, NOT the image's, which
   is the whole point — a screenshot that is not phone-shaped will be
   cropped by it, and that is a signal the capture is wrong rather
   than something to paper over by bending the frame. */

.phone{
  position:relative;
  width:min(300px, 78%);
  margin-inline:auto;
  padding:11px;
  border-radius:52px;
  background:linear-gradient(155deg, #D9DDE3, #A9B0BA 42%, #C7CCD3 60%, #8F97A2);
  box-shadow:
    0 0 0 1px rgba(12,16,23,.16),
    0 30px 60px -30px rgba(12,16,23,.5),
    0 60px 110px -60px rgba(12,16,23,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.screen:hover .phone{
  transform:translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(12,16,23,.18),
    0 38px 72px -30px rgba(12,16,23,.55),
    0 70px 130px -60px rgba(12,16,23,.5);
}

.phone__screen{
  position:relative;
  border-radius:42px;
  overflow:hidden;
  background:#fff;
  aspect-ratio:1179 / 2556;   /* the actual iPhone screen */
}
.phone__screen img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
}

/* dynamic island */
.phone::after{
  content:"";
  position:absolute; top:23px; left:50%;
  transform:translateX(-50%);
  width:86px; height:25px;
  background:#0B0D11;
  border-radius:14px;
  z-index:2;
}
/* side buttons */
.phone::before{
  content:"";
  position:absolute; left:-2px; top:112px;
  width:2px; height:78px;
  background:linear-gradient(#B9BFC7, #98A0AB);
  border-radius:2px 0 0 2px;
}

.gallery figcaption{
  margin-top:20px;
  font-size:15px;
  line-height:1.58;
  color:var(--mute);
}
.gallery figcaption b{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:21px;
  line-height:1.25;
  color:var(--ink);
  letter-spacing:-.01em;
  margin-bottom:6px;
}

/* ─────────────── the market band ───────────────
   Sits under the three cards as the answer to "yes, but my store
   is different." Tinted rather than bordered, so it reads as a
   claim the page is making rather than a fourth feature card. */

.market{
  margin-top:20px;
  padding:clamp(28px, 3.6vw, 42px) clamp(24px, 3.4vw, 44px);
  background:var(--blue-wash);
  border:1px solid #DBE6FB;
  border-radius:14px;
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:clamp(24px, 4vw, 56px);
  align-items:center;
}
.market h3{
  font-size:clamp(24px, 3.2vw, 33px);
  line-height:1.14;
  margin:0 0 12px;
}
.market p{
  font-size:16px;
  color:var(--body);
  max-width:52ch;
  margin:0;
}

.market__tags{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:9px;
}
.market__tags li{
  padding:8px 15px;
  background:var(--paper);
  border:1px solid #D5E2FA;
  border-radius:999px;
  font-size:14px; font-weight:500;
  color:var(--blue);
  white-space:nowrap;
}

/* ─────────────── pull quote ─────────────── */

.pull{
  margin:clamp(56px, 7vw, 92px) 0 0;
  padding:clamp(34px, 4.5vw, 52px) clamp(28px, 4vw, 56px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:2px solid var(--blue);
  border-radius:4px 14px 14px 4px;
}
.chapter--alt .pull{ background:var(--paper); }
.pull blockquote{ margin:0; }
.pull blockquote p{
  font-family:var(--display);
  font-size:clamp(23px, 3.1vw, 34px);
  line-height:1.28;
  color:var(--ink);
  letter-spacing:-.012em;
  max-width:30ch;
}
.pull figcaption{
  margin-top:26px;
  display:flex; align-items:center; flex-wrap:wrap; gap:0 12px;
  font-size:14px;
}
.pull__rule{ width:28px; height:1px; background:var(--line-2); }
.pull__name{ color:var(--ink); font-weight:600; }
.pull__role{ color:var(--mute); }

/* ═══════════════════ CONTACT ═══════════════════ */

/* The one dark surface on the site. It is the last thing on the
   page and it is where the decision happens, so it gets to be the
   only place the palette inverts. */
.contact{ padding-bottom:clamp(72px, 9vw, 120px); }
.contact__in{
  position:relative;
  background:#0C1017;
  background-image:radial-gradient(70% 90% at 88% 6%, rgba(46,123,255,.26), transparent 62%);
  border-radius:20px;
  padding:clamp(40px, 6vw, 76px) clamp(28px, 5vw, 68px);
  overflow:hidden;
}
.contact__in h2{ color:#fff; max-width:14ch; margin-bottom:18px; }
.contact__in > p{
  color:#B5BECB;
  max-width:56ch;
  font-size:16.5px;
  margin-bottom:34px;
}
.contact .chead{ margin-bottom:30px; }

.contact__cta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:16px 28px;
}

/* ─────────────── the beta signup form ───────────────
   Lives on the dark panel, so the fields are translucent white rather
   than a second surface colour. Posts to /api/early-access, which has
   been live since the site launched. */

.ea{ margin:0; }

.ea__row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.ea__f{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ea__f--wide{ grid-column:span 2; }

.ea__f span{
  font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#8B94A2;
}
.ea__f i{ color:var(--blue-lit); font-style:normal; }

.ea__f input{
  width:100%;
  padding:13px 15px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-family:var(--ui);
  font-size:15.5px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.ea__f input::placeholder{ color:#69727F; }
.ea__f input:hover{ border-color:rgba(255,255,255,.28); }
.ea__f input:focus{
  outline:none;
  border-color:var(--blue-lit);
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(46,123,255,.25);
}
/* Only mark a field wrong after a real submit, never while typing. */
.ea.checked input:invalid{ border-color:#FF6B5E; }

.ea__go{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 22px;
  margin-top:22px;
}
.ea__status{ margin:0; font-size:14.5px; color:#A9B4C4; }
.ea__status.ok{ color:#7FE0A8; }
.ea__status.err{ color:#FF9186; }

.ea__fine{
  margin:18px 0 0;
  font-size:13px;
  color:#79828F;
}

.contact__meta{
  margin:clamp(38px, 5vw, 56px) 0 0;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px 32px;
}
.contact__meta dt{
  font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#79828F;
  margin-bottom:7px;
}
.contact__meta dd{ margin:0; font-size:15px; color:#E4E8ED; }
.contact__meta a{ color:#B9CCF6; text-decoration:none; }
.contact__meta a:hover{ color:#fff; text-decoration:underline; }

/* ═══════════════════ FOOTER ═══════════════════ */

.foot{ border-top:1px solid var(--line); padding:30px 0; }
.foot__in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 28px;
  font-size:13.5px;
  color:var(--faint);
}
.foot__nav{ display:flex; gap:20px; margin-inline:auto; }
.foot__nav a{ color:var(--mute); text-decoration:none; }
.foot__nav a:hover{ color:var(--blue); }
.foot__s{ font-style:italic; font-family:var(--display); font-size:15px; }

/* ═══════════════════ REVEAL ═══════════════════ */

/* Reveal is opt-in: .r is visible by default and only hidden once
   boot.js has confirmed the browser runs scripts. Hiding first and
   waiting to be shown makes a failed script.js a blank page. */
.js .r{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .r.in{ opacity:1; transform:none; }
.d1{ transition-delay:.07s; }
.d2{ transition-delay:.14s; }
.d3{ transition-delay:.21s; }
.d4{ transition-delay:.28s; }

@media (prefers-reduced-motion: reduce){
  .js .r{ opacity:1; transform:none; transition:none; }
  .btn,.card,.quiet span{ transition:none; }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

@media (max-width: 940px){
  .lede{ grid-template-columns:1fr; }
  .lede h2{ max-width:22ch; }
  .ea__row{ grid-template-columns:1fr 1fr; }
  .ea__f--wide{ grid-column:span 2; }
  .prod{ grid-template-columns:1fr; }
  .specs{ margin-top:8px; }
  .cards{ grid-template-columns:1fr 1fr; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .market{ grid-template-columns:1fr; }
}

@media (max-width: 780px){
  body{ font-size:16.5px; }
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .btn--sm{ display:none; }

  .cards{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .contact__meta{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .ea__row{ grid-template-columns:1fr; }
  .ea__f--wide{ grid-column:span 1; }
  .ea__go .btn{ width:100%; }

  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .hero__cta .quiet{ justify-content:center; }

  .foot__in{ flex-direction:column; align-items:flex-start; gap:12px; }
  .foot__nav{ margin-inline:0; }
}

@media (max-width: 460px){
  .stage{ padding-inline:0; }
  .dev{ border-radius:34px; }
  .dev__screen{ border-radius:26px; }
}