/* ==========================================================================
   LAYAW SYSTEM — own website

   Type system measured off trionn.com rather than guessed:
     display  Familjen Grotesk 400  ·  line-height .90  ·  tracking -.06em
     ink      #d8d8d8 on #040508 (never pure white on pure black)
   Familjen Grotesk is the same face trionn uses, and it is free on Google Fonts.

   The page alternates full dark and full light panels — that rhythm, plus the
   size and lightness of the type, is what makes this read as designed rather
   than as a template.
   ========================================================================== */

:root{
  /* ---- brand ramp, sampled from the real logo files ----
     navy #04284d is the official wordmark; #002448 and #00c0c0 were read
     straight out of the LAYAW PDF Pro icon, which runs navy → teal → cyan.
     Everything on this site is tinted from that ramp — a neutral grey site
     next to a navy-and-cyan logo is what read as out of sync. */
  --navy:#04284d;
  --navy-deep:#002448;
  --teal:#177c91;
  --cyan:#00c0c0;
  --cyan-soft:#3fd2dc;

  /* dark panel — near-black, but carrying the navy cast */
  --d-bg:#04101c;
  --d-ink:#d6dee6;
  --d-ink-2:#8794a3;
  --d-ink-3:#495868;
  --d-line:rgba(214,222,230,.15);

  /* light panel — cool paper, same family as the navy */
  --l-bg:#eef1f3;
  --l-ink:#04121f;
  --l-ink-2:#54626f;
  --l-ink-3:#93a1af;
  --l-line:rgba(4,18,31,.15);

  --display:'Familjen Grotesk',Helvetica,Arial,sans-serif;
  --body:'Inter',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --pad:clamp(20px,4.6vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--d-bg);color:var(--d-ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-loading{overflow:hidden;height:100vh}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:400}

/* ---- the two panel skins ---- */
/* --accent flips with the panel: cyan reads on the navy dark, teal reads on
   the light paper. Sections reference --accent, never a literal hex. */
.panel-dark{background:var(--d-bg);color:var(--d-ink);
  --ink:var(--d-ink);--ink-2:var(--d-ink-2);--ink-3:var(--d-ink-3);
  --line:var(--d-line);--accent:var(--cyan-soft)}
.panel-light{background:var(--l-bg);color:var(--l-ink);
  --ink:var(--l-ink);--ink-2:var(--l-ink-2);--ink-3:var(--l-ink-3);
  --line:var(--l-line);--accent:var(--teal)}

/* ---- type primitives ---- */
.display{
  font-family:var(--display);font-weight:400;
  line-height:.90;letter-spacing:-.06em;
}
.mono{
  font-family:var(--mono);font-weight:400;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;
}
.display.xxl{font-size:clamp(52px,13vw,190px)}
.display.xl {font-size:clamp(30px,5.2vw,74px);letter-spacing:-.045em;line-height:1.02}
.display.lg {font-size:clamp(38px,7.4vw,104px)}

.tag{color:var(--accent);margin-bottom:clamp(20px,3vw,38px)}
.tag.centre{text-align:center}

/* underlined mono link with an arrow — trionn's link idiom */
.ulink{
  display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  min-width:min(280px,72vw);padding:8px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);position:relative;overflow:hidden;
}
.ulink::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--accent);transition:width .55s cubic-bezier(.22,1,.36,1);
}
.ulink:hover::after{width:100%}
.ulink:hover{color:var(--accent)}
.ulink i{font-style:normal;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.ulink:hover i{transform:translateX(6px)}

/* ---- preloader ---- */
.pre{
  position:fixed;inset:0;z-index:300;background:var(--d-bg);color:var(--d-ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--pad);gap:16px;
}
.pre-mark{flex:1;display:grid;place-items:center}
.pre-mark img{
  width:min(190px,34vw);height:auto;
  filter:drop-shadow(0 0 40px rgba(0,192,192,.35));
  animation:markPulse 2.4s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 30px rgba(0,192,192,.28))}
  50%    {transform:translateY(-8px) scale(1.03);filter:drop-shadow(0 0 52px rgba(0,192,192,.5))}
}
.pre-foot{display:flex;flex-direction:column;gap:14px}
.pre-row{display:flex;justify-content:space-between;align-items:baseline}
.pre-row .mono{font-size:clamp(12px,2vw,15px);letter-spacing:.2em}
.pre-rule{height:1px;background:var(--d-line);position:relative}
.pre-rule i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--cyan);display:block}

/* ---- nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease;
}
/* Once the page has moved, the bar gets a frosted backing tinted to the panel
   under it. Without it the big marquee words ran straight through the brand
   and the buttons — on a phone the buttons were barely readable. */
.nav.is-stuck{
  background:rgba(4,16,28,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(214,222,230,.08);
}
.nav.is-stuck.on-light{background:rgba(238,241,243,.8);border-bottom-color:rgba(4,18,31,.08)}
/* the full-screen menu is its own dark backdrop — the bar goes clear over it */
body.menu-open .nav{
  background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* No blend mode here on purpose. `mix-blend-mode:difference` looks clever over
   alternating panels, but it inverted the navy mark to pink on the light
   sections. The logo's colours are fixed, so the nav swaps colours instead:
   JS adds .on-light whenever a light panel is under the bar. */
/* The mark carries a teal→navy gradient and reads on both panels on its own,
   so it needs no white chip — that chip was what made the logo look flat and
   lifeless. Only the navy *wordmark* has no reversed version, so the name is
   set in type here and the official lockup is kept for the footer. */
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:auto;height:clamp(30px,3.4vw,38px);
  filter:drop-shadow(0 0 14px rgba(0,192,192,.30));
  transition:transform .55s cubic-bezier(.22,1,.36,1),filter .55s;
}
.brand:hover .brand-mark{
  transform:translateY(-3px) scale(1.06) rotate(-3deg);
  filter:drop-shadow(0 0 24px rgba(0,192,192,.62));
}
/* ---- the flying mark ----
   #flyMark is the mark you actually see. The one in the nav keeps its layout
   space but is hidden, so the flying copy can sit exactly on top of it at rest
   and then leave without the nav reflowing. */
.flymark{
  /* above the nav (200): the bar now has a frosted backing, and the logo sits
     on top of the bar at rest — underneath, it would be dimmed and blurred */
  position:fixed;left:0;top:0;z-index:210;pointer-events:none;
  perspective:900px;will-change:transform;
  opacity:0;                      /* stays hidden unless the effect is active */
}
.has-flymark .flymark{opacity:1}
.fm-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.fm-face{
  position:absolute;inset:0;width:100%;height:100%;
  backface-visibility:hidden;
  filter:drop-shadow(0 0 14px rgba(0,192,192,.30));
}
.fm-back{transform:rotateY(180deg)}
/* while the flying copy is running, the nav one only reserves space */
.has-flymark .brand-mark{visibility:hidden}

.brand-name{display:flex;flex-direction:column;line-height:1;gap:4px}
.brand-name b{
  font-family:var(--display);font-weight:500;font-size:clamp(14px,1.5vw,17px);
  letter-spacing:.13em;color:#fff;transition:color .4s;
}
.brand-name i{
  font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--cyan-soft);
}
.nav.on-light .brand-name b{color:var(--l-ink)}
.nav.on-light .brand-name i{color:var(--teal)}
body.menu-open .nav.on-light .brand-name b{color:#fff}
body.menu-open .nav.on-light .brand-name i{color:var(--cyan-soft)}
.nav-right{display:flex;align-items:center;gap:10px}
.clock{color:#8a8d94;font-size:10.5px;letter-spacing:.14em;transition:color .4s}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;
  padding:8px 16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:transparent;cursor:pointer;
  transition:background .3s,color .3s,border-color .4s;
}
.pill:hover{background:#fff;color:#000}

.nav.on-light .pill{border-color:rgba(13,15,18,.35);color:var(--l-ink)}
.nav.on-light .pill:hover{background:var(--l-ink);color:var(--l-bg)}
.nav.on-light .clock{color:var(--l-ink-2)}
/* while the full-screen menu is open the bar always sits on dark */
body.menu-open .nav.on-light .pill{border-color:rgba(255,255,255,.45);color:#fff}
body.menu-open .nav.on-light .pill:hover{background:#fff;color:#000}
body.menu-open .nav.on-light .clock{color:#8a8d94}
/* the two rules stack inside the pill, so they need taking out of flow */
.pill-menu{position:relative;padding-right:34px}
.pill-menu i{
  position:absolute;right:14px;display:block;width:12px;height:1px;
  background:currentColor;transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.pill-menu i:first-of-type{top:calc(50% - 3px)}
.pill-menu i:last-of-type{top:calc(50% + 2px)}
body.menu-open .pill-menu i:first-of-type{transform:translateY(2.5px) rotate(45deg)}
body.menu-open .pill-menu i:last-of-type{transform:translateY(-2.5px) rotate(-45deg)}

/* ---- full-screen menu ---- */
.menu{
  position:fixed;inset:0;z-index:150;background:var(--d-bg);
  clip-path:inset(0 0 100% 0);transition:clip-path .75s cubic-bezier(.76,0,.24,1);
  display:flex;align-items:center;
}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu-inner{width:100%;padding:0 var(--pad)}
.menu-label{color:var(--d-ink-3);margin-bottom:24px}
.menu-inner a{
  display:flex;align-items:baseline;gap:20px;
  font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:-.05em;
  font-size:clamp(34px,8.5vw,88px);color:var(--d-ink);
  padding:10px 0;border-top:1px solid var(--d-line);transition:color .3s,padding-left .4s;
}
.menu-inner a:last-child{border-bottom:1px solid var(--d-line)}
.menu-inner a .mono{color:var(--d-ink-3);font-size:11px}
.menu-inner a:hover{padding-left:18px;color:#fff}

/* ---- shared canvas / texture ---- */
.hero-gl,.cap-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== 1. HERO ===================== */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(96px,14vh,150px) var(--pad) clamp(56px,8vh,80px);
}
.hero-top,.hero-bottom{position:relative;z-index:2}
.hero-h1{font-size:clamp(40px,9.4vw,140px);color:var(--d-ink)}
/* The clip that makes the line slide up would also cut the descenders off
   g, y, j and p at line-height .90. Padding gives them room; the matching
   negative margin keeps the line spacing exactly as it was. */
.hero-h1 .ln{
  display:block;overflow:hidden;
  padding-bottom:.16em;margin-bottom:-.16em;
}
[data-split]{display:block}
.hero-links{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:clamp(28px,4.5vw,54px)}

.hero-bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.hero-card{display:flex;border:1px solid var(--d-line)}
.hero-card-l{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:14px 18px;border-right:1px solid var(--d-line);
}
.hero-card-l .mono{color:var(--d-ink-3)}
.hero-card-l .big{font-size:15px;letter-spacing:.12em;color:var(--cyan-soft)}
.hero-card-r{padding:14px 18px;font-size:13px;line-height:1.45;color:var(--d-ink-2)}
.hero-note{max-width:46ch;font-size:clamp(14px,1.4vw,16px);color:var(--d-ink-2)}

.scroll-cue{
  position:absolute;left:var(--pad);bottom:clamp(18px,3vh,26px);z-index:2;
  display:flex;align-items:center;gap:10px;color:var(--d-ink-3);
}
.scroll-cue i{
  width:22px;height:22px;border:1px solid var(--d-line);border-radius:50%;
  display:block;position:relative;
}
.scroll-cue i::after{
  content:"";position:absolute;left:50%;top:50%;width:1px;height:7px;
  background:var(--cyan-soft);transform:translate(-50%,-60%);
  animation:cue 1.9s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.2;transform:translate(-50%,-90%)}50%{opacity:1;transform:translate(-50%,-25%)}}

/* ===================== 2. MARQUEE BAND ===================== */
.band{padding:clamp(16px,2.4vw,30px) 0;overflow:hidden}
.mq{overflow:hidden;white-space:nowrap}
.mq-track{display:inline-flex;align-items:center;gap:clamp(18px,3vw,44px);will-change:transform}
.mq-track .display{font-size:clamp(34px,7.6vw,108px);color:var(--l-ink)}
.mq-track b{font-size:clamp(14px,2vw,30px);color:var(--teal)}

/* ===================== 3. STATEMENT ===================== */
.statement{position:relative;padding:clamp(90px,15vh,190px) var(--pad)}
.statement .display.xl{max-width:24ch}
/* same descender fix as .hero-h1 .ln — these are clipped for the reveal too */
.word{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.16em;margin-bottom:-.16em;
}
.word > i{display:inline-block;font-style:normal}


/* ===================== 4. PRODUCT ROWS ===================== */
.sec-head{margin-bottom:clamp(40px,7vw,90px)}
.products{padding:clamp(70px,11vh,150px) var(--pad)}
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;align-items:baseline;gap:6px 28px;
  grid-template-columns:44px minmax(230px,1.05fr) minmax(0,1.5fr) 150px;
  padding:clamp(20px,2.8vw,34px) 0;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .5s cubic-bezier(.22,1,.36,1);
}
.row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--ink);opacity:.035;transition:width .55s cubic-bezier(.22,1,.36,1);
}
.row:hover{padding-left:16px}
.row:hover::before{width:100%}
.row-n{color:var(--ink-3);padding-top:8px}
.row-t{font-size:clamp(24px,3.1vw,44px)}
.row-d{color:var(--ink-2);font-size:14.5px;line-height:1.6;max-width:52ch}
/* every system is available - two ready to install, six built to the client's spec */
.row-s{color:var(--accent);text-align:right;padding-top:8px;white-space:nowrap}
.row.is-live .row-s{color:var(--teal)}

/* ===================== 4b. FEATURED PRODUCT ===================== */
.feature{
  display:grid;gap:clamp(30px,5vw,80px);align-items:center;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  padding:clamp(70px,11vh,140px) var(--pad);
  border-top:1px solid var(--d-line);
}
/* Same rule as the nav mark: this logo has no dark version either, so it gets
   its own white card rather than being forced onto the navy. */
.feature-mark{margin:0;display:flex;justify-content:center}
.feature-mark img{
  width:min(320px,74%);background:#fff;border-radius:20px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.feature-t{font-size:clamp(30px,4.6vw,68px);margin-bottom:22px}
.feature-d{color:var(--d-ink-2);font-size:15px;line-height:1.62;max-width:52ch}
.feature-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.feature-tags li{border:1px solid var(--d-line);border-radius:3px;padding:5px 10px;color:var(--d-ink-3)}

/* ===================== 5. CAPABILITY (stacked words) ===================== */
.cap{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(90px,12vh,140px) var(--pad);
}
.cap .tag,.stack,.cap-foot{position:relative;z-index:2}
.stack{display:flex;flex-direction:column;align-items:center;text-align:center}
.stack-w{
  display:block;color:var(--d-ink);line-height:.86;
  /* 11vw keeps the stack commanding on a phone; the longest line,
     "Point of sale", still clears the padding at 390px */
  font-size:clamp(30px,11vw,124px);
  white-space:pre;               /* letters are individual spans; keep the gaps */
}
/* one span per letter, driven by the pointer in main.js */
.stack-w .ltr{display:inline-block;will-change:transform;backface-visibility:hidden}
.stack-w .ltr.sp{width:.28em}
.cap .stack{touch-action:pan-y}  /* a finger can still scroll past the section */
/* each line sits at a different weight of presence, like a depth stack */
.stack-w:nth-child(1){opacity:.32}
.stack-w:nth-child(2){opacity:.55}
.stack-w:nth-child(3){opacity:.85}
.stack-w:nth-child(4){opacity:.55}
.stack-w:nth-child(5){opacity:.32}
.cap-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(40px,7vh,80px);color:var(--d-ink-2);
}

/* ===================== 6. WORK ===================== */
.work{padding:clamp(70px,11vh,150px) var(--pad)}

/* ---- pinned device stage ----
   The devices are drawn in CSS rather than shipped as PNG mockups: no extra
   image weight, they stay sharp at any size, and the screen is a real element
   the screenshot can scroll inside. */
.stage{height:340vh;position:relative}        /* the scroll runway for the pin */
.stage-inner{
  height:100vh;display:grid;align-items:center;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,56px);
}

.devices{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;gap:0}

/* MacBook */
.mac{flex:1 1 auto;min-width:0;max-width:660px;position:relative}
.mac-lid{
  position:relative;border-radius:14px 14px 4px 4px;
  padding:11px 11px 13px;
  background:linear-gradient(160deg,#2a3138,#151a20 55%,#0d1116);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.07);
}
.mac-screen{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  border-radius:4px;background:#000;
}
.mac-cam{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#0c0f13;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.mac-base{
  height:11px;margin:0 -5.5%;border-radius:0 0 11px 11px;
  background:linear-gradient(180deg,#2b3239,#1a2027 60%,#10151a);
  box-shadow:0 12px 24px -12px rgba(0,0,0,.9);
  display:flex;justify-content:center;align-items:flex-start;
}
.mac-base span{width:14%;height:4px;border-radius:0 0 5px 5px;background:rgba(0,0,0,.5)}

/* iPhone */
.phone{
  position:relative;flex:0 0 auto;width:clamp(118px,13.5vw,190px);
  /* sits over the laptop's right corner, the way a real desk shot looks */
  margin-left:clamp(-104px,-7vw,-44px);margin-bottom:-14px;z-index:2;
  border-radius:15%/7.4%;padding:8px;
  background:linear-gradient(155deg,#3a424b,#181d23 55%,#0e1217);
  box-shadow:0 34px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.09);
}
.phone-screen{
  position:relative;width:100%;aspect-ratio:430/932;overflow:hidden;
  border-radius:12%/5.6%;background:#000;
}
.phone-island{
  position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:32%;height:13px;border-radius:8px;background:#05070a;z-index:3;
}

/* the screenshots themselves — stacked, one visible at a time */
.shot{
  position:absolute;top:0;left:0;width:100%;height:auto;
  opacity:0;will-change:transform;
}
.shot[data-shot="0"]{opacity:1}

/* copy column */
.stage-copy{position:relative;min-height:340px}
/* the three copies are stacked; an invisible one on top was swallowing the
   clicks meant for the visible one, so only the active copy takes pointer input */
.sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;opacity:0;pointer-events:none}
.sc[data-copy="0"]{opacity:1;pointer-events:auto}
.sc-n{color:var(--accent);margin-bottom:14px}
.sc-t{font-size:clamp(28px,4.2vw,62px);margin-bottom:18px}
.sc-d{color:var(--ink-2);font-size:15px;line-height:1.62;max-width:44ch}
.sc-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.sc-tags li{border:1px solid var(--line);border-radius:3px;padding:5px 10px;color:var(--ink-3)}

.stage-dots{position:absolute;left:0;bottom:8vh;display:flex;gap:8px}
.stage-dots i{
  width:22px;height:2px;background:var(--line);display:block;
  transition:background .4s;
}
.stage-dots i.on{background:var(--accent)}

/* mobile stage (Genard, 11 Sep 2026): no device mockups under 900px. The phone
   screenshot fills the pinned view behind a white wash - lighter at the top so
   the site shows through, near-solid at the bottom where the copy sits.
   Held by position:sticky, not a JS pin: the browser keeps a sticky element
   still on its own scroll thread, where a JS pin chases a finger scroll a frame
   late and shudders - the lag Genard saw on the live site. svh keeps the copy
   clear of a phone's address bar. */
.stage-mobile .stage-inner{
  position:sticky;top:0;height:100vh;height:100svh;
  grid-template-columns:1fr;align-content:end;
  padding-bottom:9vh;
}
.stage-mobile .devices{display:none}
.stage-bg{
  position:absolute;top:0;bottom:0;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);
  overflow:hidden;z-index:0;pointer-events:none;
}
.stage-bg img{position:absolute;top:0;left:0;width:100%;height:auto;opacity:0;will-change:transform}
/* The wash is anchored to the copy, not to the screen. The copy block is
   410px tall and sits 9vh off the bottom, so the wash goes solid just above
   its top edge on every phone height - the screenshot's own headings never
   sit behind ours (the first wash was only .72 there and the two sets of
   text read on top of each other). Fully opaque there, in the panel's own
   colour: even 98.5% let the POS screen's labels ghost through. Above that,
   the site shows through. */
.stage-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    var(--l-bg) 0, var(--l-bg) calc(9vh + 418px),
    rgba(238,241,243,.74) calc(9vh + 500px), rgba(238,241,243,.5) 100%);
}
.stage-mobile .stage-copy{position:relative;z-index:1;min-height:410px}
.stage-mobile .stage-dots{z-index:1;left:0;bottom:4vh}

/* fallback used when the pin is off (small screens / reduced motion):
   the shared device pair cannot show three builds at once, so JS drops it and
   gives every block its own phone shot instead */
.no-stage .stage{height:auto}
.no-stage .stage-inner{height:auto;grid-template-columns:1fr;gap:34px;padding:10px 0}
.no-stage .devices,.no-stage .stage-dots{display:none}
.no-stage .stage-copy{min-height:0;display:flex;flex-direction:column;gap:clamp(48px,9vw,80px)}
.no-stage .sc{position:relative;inset:auto;opacity:1;transform:none!important;pointer-events:auto}
.sc-shot{
  width:min(212px,54vw);aspect-ratio:430/760;   /* crop to a phone, not the whole page */
  margin-bottom:26px;overflow:hidden;
  border-radius:22px;border:1px solid var(--line);background:#000;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.5);
}
.sc-shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}

/* ===================== 7. HOW ===================== */
.how{padding:clamp(70px,11vh,150px) var(--pad)}
.how-rows{border-top:1px solid var(--d-line)}
.how-row{
  display:grid;gap:8px 32px;align-items:baseline;
  grid-template-columns:70px minmax(180px,.8fr) minmax(0,1.6fr);
  padding:clamp(22px,3.4vw,44px) 0;border-bottom:1px solid var(--d-line);
}
.how-l{font-size:clamp(34px,4.4vw,62px);color:var(--d-ink-3)}
.how-t{font-size:clamp(22px,2.6vw,36px)}
.how-d{color:var(--d-ink-2);font-size:14.5px;line-height:1.62;max-width:56ch}

/* ===================== 8. FOOTER ===================== */
.foot{position:relative;padding:clamp(70px,11vh,140px) var(--pad) 26px;overflow:hidden}
.foot > *{position:relative;z-index:2}
.foot-head{display:flex;justify-content:space-between;gap:20px;color:var(--d-ink-2)}
.foot-h{margin:clamp(20px,3vw,34px) 0 clamp(44px,7vh,86px);color:var(--d-ink)}
.foot-grid{
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(260px,1.3fr) repeat(2,minmax(140px,.6fr));
}
.foot-links{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.foot-lab{color:var(--d-ink-3);margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:14.5px;color:var(--d-ink-2);padding:3px 0;transition:color .25s}
.foot-col a:hover{color:var(--d-ink)}
.foot-base{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  margin-top:clamp(50px,9vh,110px);padding-top:20px;border-top:1px solid var(--d-line);
  color:var(--d-ink-3);
}
.foot-sign{display:flex;align-items:center;gap:11px}
.foot-sign img{width:auto;height:26px;filter:drop-shadow(0 0 12px rgba(0,192,192,.28))}

/* ---- footer: code typed live (built in main.js) ----
   Sits in the empty space beside "Ready to start?" rather than under the links
   and copyright, so moving text never runs behind text you need to read. */
.foot-hero{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:clamp(28px,6vw,110px);
  margin:clamp(20px,3vw,34px) 0 clamp(44px,7vh,86px);
}
.foot-hero .foot-h{margin:0}
.foot-feed{position:relative;height:clamp(210px,30vh,280px);overflow:hidden;font-family:var(--mono)}
.tc-lines{transition:opacity .45s ease,transform .45s ease}
.tc-lines.is-out{opacity:0;transform:translateY(-8px)}
.tc-row{display:flex;align-items:center;height:24px;white-space:pre;font-size:12.5px;color:var(--d-ink-2)}
.tc-row.is-cur{background:rgba(214,222,230,.035)}
.tc-n{flex:0 0 34px;padding-right:14px;text-align:right;font-size:11px;color:var(--d-ink-3);opacity:.7}
.tc-code .k{color:var(--teal)}
.tc-code .s{color:#6aa3b3}
.tc-code .n{color:var(--cyan-soft)}
.tc-code .c{color:#4f6878}
.tc-code .f{color:#a9c6d3}
.tc-caret{
  display:inline-block;width:7px;height:1.15em;margin-left:1px;vertical-align:-2px;
  background:var(--cyan);animation:tcBlink 1.05s steps(1) infinite;
}
.is-typing .tc-caret{animation:none}            /* solid while typing, blinks when idle */
@keyframes tcBlink{50%{opacity:0}}
@media (max-width:760px){
  .foot-hero{grid-template-columns:1fr}
  .foot-feed{height:176px}
  .tc-row{height:20px;font-size:10.5px}
  .tc-n{flex-basis:24px;padding-right:9px;font-size:9.5px}
}

/* ---- reveal defaults; JS turns them on ---- */
[data-reveal],[data-row],[data-stack]{opacity:0}
.no-motion [data-reveal],.no-motion [data-row],.no-motion [data-stack]{opacity:1;transform:none}
.no-motion .stack-w:nth-child(1),.no-motion .stack-w:nth-child(5){opacity:.32}
.no-motion .stack-w:nth-child(2),.no-motion .stack-w:nth-child(4){opacity:.55}
.no-motion .stack-w:nth-child(3){opacity:.85}

/* ===================== responsive ===================== */
@media (max-width:1000px){
  .feature{grid-template-columns:1fr;justify-items:start}
  .feature-mark{justify-content:flex-start}
  .feature-mark img{width:min(220px,52vw)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-links{grid-column:1/-1}
}
/* The statement's tall padding is the runway the flying logo parks in on
   desktop. Below 900px the logo stays in the nav, so that space was just a
   blank gap between the statement and the suite. */
@media (max-width:899px){
  .statement{padding:clamp(56px,9vh,88px) var(--pad)}
  .products{padding-top:clamp(44px,7vh,72px)}
}
@media (max-width:820px){
  .row{grid-template-columns:36px 1fr;gap:4px 16px}
  .row-d{grid-column:2;max-width:none;margin-top:6px}
  .row-s{grid-column:2;text-align:left;padding-top:10px}
  .how-row{grid-template-columns:44px 1fr}
  .how-d{grid-column:2;margin-top:6px}
  /* the phone tucks behind the laptop; on a narrow screen put it alongside */
  .devices{flex-direction:column;align-items:center;gap:20px}
  .phone{margin-left:0;margin-bottom:0;width:min(190px,46vw)}
}
@media (max-width:560px){
  .nav .clock{display:none}
  .scroll-cue{display:none}
  .foot-grid{grid-template-columns:1fr}
  .hero-card-r{max-width:200px}
}
@media (prefers-reduced-motion:reduce){
  .tc-caret{animation:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal],[data-row]{opacity:1!important;transform:none!important}
}