/* ===================================================================
   NexauraPay — site styles

   The design lives in inline styles on the markup (carried over from the
   design canvas). This file supplies:
     1. tokens + base
     2. motion
     3. the responsive layer — overrides keyed on [data-m~="..."] hooks
   Overrides need !important because they are competing with inline styles.
   =================================================================== */

/* ---------- 1. tokens + base ---------------------------------------- */

:root {
  --bg: #ffffff; --bg2: #F7F9FC; --card: #ffffff;
  --fg: #070A12; --fg2: rgba(7, 10, 18, .62); --fg3: rgba(7, 10, 18, .38);
  --line: rgba(7, 10, 18, .10); --line2: rgba(7, 10, 18, .18);
  --ph1: #EDF1F8; --ph2: #F7F9FC; --inv: #070A12; --invfg: #ffffff;
  --navy: #10265F; --blue: #0878F9; --indigo: #3035D8; --purple: #7430E8; --magenta: #C735F5;
  --gut: clamp(20px, 5vw, 40px);       /* gutter for the [data-m~="pad"] screens */

  /* Vertical rhythm. The canvas hand-picked a different clamp() at every seam;
     build.py routes them all through these three so spacing is consistent and
     actually scales down on phones. */
  --sec: clamp(76px, 10vw, 180px);     /* between major sections */
  --top: clamp(84px, 8vw, 116px);      /* first content below the sticky header */
  --btm: clamp(80px, 9vw, 140px);      /* last content above the footer */
}

[data-theme] { color: var(--fg); background: var(--bg); }

[data-theme="dark"] {
  --bg: #070A12; --bg2: #0A0F1C; --card: #0D1322;
  --fg: #ffffff; --fg2: #98A2B3; --fg3: #5E6A82;
  --line: #1D2638; --line2: #2A3550;
  --ph1: #101827; --ph2: #0A1120; --inv: #ffffff; --invfg: #070A12;
}

* { box-sizing: border-box; }

/* No global scroll-behavior:smooth — the app calls window.scrollTo(0,0) on every
   screen change and those must land instantly. It opts into smooth scrolling
   per call, for in-page anchor jumps only. */
html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Geist, -apple-system, "SF Pro Display", "Helvetica Neue", Helvetica, sans-serif;
  transition: background .5s ease, color .5s ease;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

/* No scroll lock behind the mobile nav sheet: the sheet is position:sticky, so
   it stays pinned under the header while the page scrolls, and locking the
   document would take away the scrollport that both it and the header stick to.
   The sheet contains its own overscroll instead. */

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--indigo); }

button {
  font: inherit; color: inherit; background: none; border: 0;
  padding: 0; cursor: pointer; text-align: left;
}

#app a[data-route-link] { color: inherit; font: inherit; text-align: left; display: inline-flex; }
.doc-breadcrumb { font-size: 13px; color: var(--fg2); margin-bottom: 26px; }
.doc-sitemap { columns: 2 280px; }
.doc-sitemap li { break-inside: avoid; margin-bottom: 10px; }
.search-summary { padding: var(--sec) var(--gut); border-top: 1px solid var(--line); }
.search-summary-inner { max-width: 1180px; margin: 0 auto; }
.search-summary h2 { font-size: clamp(24px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; }
.search-summary p { max-width: 75ch; line-height: 1.65; color: var(--fg2); }
.search-service-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 28px 0 44px; }
.search-service-links a { border: 1px solid var(--line2); border-radius: 12px; padding: 18px; color: var(--fg); }
.search-service-links a:hover { border-color: var(--blue); color: var(--blue); }
.search-summary details { border-top: 1px solid var(--line); }
.search-summary summary { padding: 18px 0; cursor: pointer; font-size: 17px; font-weight: 550; }
.search-summary details p { margin: 0 0 22px; }

img, svg, video { max-width: 100%; }

::selection { background: var(--blue); color: #fff; }
*:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

/* The page wrapper carries overflow-x:hidden inline, which turns it into a
   scroll container and stops the sticky header from sticking. `clip` gives the
   same overflow containment without the scrollport — and browsers that do not
   know the keyword simply keep the inline value. */
#app > [data-theme] { overflow-x: clip !important; }

.skip {
  position: fixed; top: -100px; left: 12px; z-index: 999;
  padding: 12px 18px; border-radius: 10px;
  background: var(--inv); color: var(--invfg);
  font-size: 13px; font-weight: 600;
  transition: top .25s ease;
}
.skip:focus { top: 12px; color: var(--invfg); }

.noscript {
  max-width: 40em; margin: 0 auto; padding: 18vh 24px;
  font-family: Geist, -apple-system, sans-serif;
}
.noscript h1 { font-size: 40px; letter-spacing: -.04em; margin: 0 0 12px; }
.noscript p { color: var(--fg2); line-height: 1.6; }

/* ---------- company pages (about / contact / legal / 404) ------------- */
/* Standalone crawlable pages. Plain HTML, no JavaScript needed to read them. */

.doc { background: var(--bg); color: var(--fg); }

.doc-head {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 24px;
  padding: 0 clamp(20px, 5vw, 56px); height: 66px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.doc-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.doc-brand img { height: 30px; width: auto; display: block; }
.doc-brand .doc-word { height: 18px; }
.doc-nav { display: flex; gap: 24px; font-size: 13.5px; margin-left: auto; }
.doc-nav a { color: var(--fg2); transition: color .25s; }
.doc-nav a:hover { color: var(--fg); }
.doc-cta {
  flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
  border-radius: 100px; background: var(--inv); color: var(--invfg);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; transition: opacity .25s;
}
.doc-cta:hover { opacity: .85; color: var(--invfg); }

.doc-main {
  max-width: 74ch; margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 40px) clamp(72px, 9vw, 120px);
}
.doc-main h1 {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02;
  letter-spacing: -.045em; font-weight: 600;
}
.doc-main h2 {
  margin: clamp(38px, 4.4vw, 58px) 0 12px;
  font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -.028em; font-weight: 600;
}
.doc-main p, .doc-main li { font-size: 16.5px; line-height: 1.65; color: var(--fg2); }
.doc-main ol, .doc-main ul { padding-left: 1.2em; }
.doc-main li { margin: 6px 0; }
.doc-main .lede {
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5;
  font-weight: 300; color: var(--fg2); letter-spacing: -.015em;
}
.doc-main a { color: var(--blue); }
.doc-main a:hover { color: var(--indigo); }
.doc-stamp {
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px !important; letter-spacing: .14em; color: var(--fg3) !important;
  text-transform: uppercase;
}
.doc-warn {
  margin-top: 40px; padding: 18px 20px; border-radius: 12px;
  border: 1px solid var(--line2); background: var(--bg2);
  font-size: 14.5px !important; line-height: 1.6;
}
.doc-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.doc-btn {
  display: inline-flex; align-items: center; height: 48px; padding: 0 26px;
  border: 0; border-radius: 100px; cursor: pointer;
  background: var(--inv); color: var(--invfg) !important;
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  transition: opacity .25s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.doc-btn:hover { opacity: .85; transform: translateY(-2px); }
.doc-btn.ghost {
  background: none; border: 1px solid var(--line2); color: var(--fg) !important;
}
.doc-btn.ghost:hover { border-color: var(--fg); opacity: 1; }
.doc-note { font-size: 13.5px; color: var(--fg3); }

.doc-form { margin-top: 36px; display: flex; flex-direction: column; gap: 20px; }
.doc-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.doc-form label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--fg2);
}
.doc-form .req { color: var(--blue); }
.doc-form input, .doc-form textarea {
  height: 48px; padding: 0 15px; border-radius: 11px;
  border: 1px solid var(--line2); background: transparent; color: var(--fg);
  font-family: inherit; font-size: 16px; letter-spacing: -.014em;
  outline: none; transition: border-color .25s;
}
.doc-form textarea { height: auto; padding: 13px 15px; line-height: 1.55; resize: vertical; }
.doc-form input:focus, .doc-form textarea:focus { border-color: var(--blue); }
.doc-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.doc-foot { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 76px) clamp(20px, 5vw, 56px) 44px; }
.doc-cols {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px;
}
.doc-cols h2 {
  margin: 0 0 16px;
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .14em; color: var(--fg3); font-weight: 400;
}
.doc-cols a { display: block; padding: 5px 0; font-size: 14px; color: var(--fg2); }
.doc-cols a:hover { color: var(--fg); }
/* inbox directory — footer of every company page */
.doc-contact {
  max-width: 1180px; margin: clamp(32px, 3.6vw, 46px) auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 28px;
}
.doc-contact span {
  display: block;
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .14em; color: var(--fg3);
}
.doc-contact a {
  display: inline-block; margin-top: 8px;
  font-size: 15px; font-weight: 550; letter-spacing: -.02em; color: var(--fg);
  overflow-wrap: anywhere;
}
.doc-contact a:hover { color: var(--blue); }
.doc-contact address {
  margin-top: 8px; font-style: normal;
  font-size: 15px; font-weight: 550; letter-spacing: -.02em;
  line-height: 1.5; color: var(--fg);
}

/* the same directory, given prominence on /contact */
.doc-mail {
  margin: clamp(26px, 3vw, 36px) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 30px;
}
.doc-mail span {
  display: block;
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .14em; color: var(--fg3);
}
.doc-mail a {
  display: inline-block; margin-top: 9px;
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 600;
  letter-spacing: -.024em; color: var(--fg) !important; overflow-wrap: anywhere;
}
.doc-mail a:hover { color: var(--blue) !important; }
.doc-mail address {
  margin-top: 9px; font-style: normal;
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 600;
  letter-spacing: -.024em; line-height: 1.45; color: var(--fg);
}
.doc-mail em {
  display: block; margin-top: 4px;
  font-style: normal; font-size: 13.5px; line-height: 1.5; color: var(--fg2);
}

.doc-legal {
  max-width: 1180px; margin: clamp(44px, 5vw, 68px) auto 0;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.6; color: var(--fg3);
}

@media (max-width: 720px) {
  .doc-nav { display: none; }
  .doc-head { gap: 12px; }
  .doc-brand .doc-word { display: none; }
}

/* ---------- 2. motion ------------------------------------------------ */

@keyframes rise   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes plate  { from { opacity: 0; transform: scale(1.035) translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes travel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

[data-r], [data-rs] { opacity: 1; }

/* Chrome/Edge: scroll-driven. */
@supports (animation-timeline: view()) {
  [data-r] {
    animation: rise 1.1s cubic-bezier(.16, 1, .3, 1) both;
    animation-timeline: view(); animation-range: entry 0% cover 24%;
  }
  [data-rs] {
    animation: plate 1.3s cubic-bezier(.16, 1, .3, 1) both;
    animation-timeline: view(); animation-range: entry 0% cover 30%;
  }
}

/* Safari/Firefox: same effect, driven by the runtime's IntersectionObserver. */
html[data-reveal-js] [data-r],
html[data-reveal-js] [data-rs] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
html[data-reveal-js] [data-r]  { transform: translateY(26px); }
html[data-reveal-js] [data-rs] { transform: scale(1.035) translateY(28px); }
html[data-reveal-js] [data-r][data-in],
html[data-reveal-js] [data-rs][data-in] { opacity: 1; transform: none; will-change: auto; }

[data-screen] { animation: fadein .55s cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  [data-r], [data-rs] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 3. responsive layer -------------------------------------- */

/* Horizontal scrollers: no visible bar, momentum on iOS. */
[data-m~="rail"], [data-m~="scrollx"], [data-m~="steps"], [data-m~="portalside"] {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
[data-m~="rail"]::-webkit-scrollbar,
[data-m~="scrollx"]::-webkit-scrollbar,
[data-m~="steps"]::-webkit-scrollbar,
[data-m~="portalside"]::-webkit-scrollbar { display: none; }

/* ---- product footage ---- */
/* Boxes that can hold a video are position:relative + overflow:hidden, and the
   video fills them absolutely. Footage is square; the home rail's 4/5 cards
   centre-crop it, the gallery and detail boxes are 1:1 so nothing is lost. */
[data-m~="pshot"] { background-color: var(--ph2); }
[data-m~="pshot"] video { display: block; border: 0; }
[data-m~="pshot"] video::-webkit-media-controls-panel { border-radius: 0; }

/* The product stills are transparent cut-outs of dark grey hardware, which
   would vanish against the dark theme. Any box holding one gets a light stage
   in both themes, the way a product catalogue plates its shots. */
[data-m~="pshot"]:has([data-m~="pimg"]),
[data-m~="pthumb"]:has(img) {
  background: linear-gradient(160deg, #F6F8FC, #E7EDF6) !important;
}

/* ---------- hero ------------------------------------------------------ */

@keyframes heroLine  { from { opacity: 0; transform: translateY(.34em); } to { opacity: 1; transform: none; } }
@keyframes heroRise  { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes floatY    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatYAlt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes gradShift { to { background-position: 200% 0; } }
@keyframes glowDrift { 0%, 100% { transform: none; } 50% { transform: translate3d(-5%, 5%, 0) scale(1.14); } }

/* The hero is a full-bleed clip with the copy over it. Type is white here
   regardless of the page theme, because the footage behind it is dark. */
[data-m~="hero"] [data-m~="heroh1"],
[data-m~="hero"] [data-m~="herosub"] { color: #fff; }
[data-m~="hero"] [data-m~="herosub"] { color: rgba(255, 255, 255, .78); max-width: 30em; }

[data-m~="herobg"] { z-index: 0; }
[data-m~="heroscrim"] {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 10, 18, .88) 0%, rgba(7, 10, 18, .66) 42%,
                    rgba(7, 10, 18, .34) 72%, rgba(7, 10, 18, .30) 100%),
    linear-gradient(to top, rgba(7, 10, 18, .58), rgba(7, 10, 18, 0) 42%);
}
[data-m~="herowrap"] { max-width: 1620px; }

[data-m~="heroh1"] {
  margin: 0;
  font-size: clamp(46px, 6.9vw, 108px);
  line-height: .84; letter-spacing: -.052em; font-weight: 600;
}
[data-m~="hl"] { display: block; animation: heroLine 1s cubic-bezier(.16, 1, .3, 1) both; }
[data-m~="heroh1"] [data-m~="hl"]:nth-child(1) { animation-delay: .06s; }
[data-m~="heroh1"] [data-m~="hl"]:nth-child(2) { animation-delay: .16s; }
[data-m~="heroh1"] [data-m~="hl"]:nth-child(3) { animation-delay: .26s; }

/* the third line keeps the brand gradient, drifting slowly through it */
[data-m~="grad"] {
  background: linear-gradient(96deg, #0878F9, #3035D8 26%, #7430E8 54%, #C735F5 76%, #0878F9);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroLine 1s cubic-bezier(.16, 1, .3, 1) .26s both,
             gradShift 11s linear 1.3s infinite;
}

[data-m~="herosub"] {
  margin: clamp(24px, 2.6vw, 38px) 0 0;
  max-width: 26em;
  font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45;
  letter-spacing: -.02em; font-weight: 300; color: var(--fg2); text-wrap: pretty;
  animation: heroLine .9s cubic-bezier(.16, 1, .3, 1) .36s both;
}
[data-m~="herocta"] {
  margin-top: clamp(28px, 3vw, 44px);
  display: flex; gap: 12px; flex-wrap: wrap;
  animation: heroLine .9s cubic-bezier(.16, 1, .3, 1) .46s both;
}

@media (max-width: 900px) {
  [data-m~="heroh1"] { font-size: clamp(46px, 13vw, 88px); }
  /* portrait crops lose the terminal, so bias the frame and darken further */
  [data-m~="herobg"] { object-position: 62% center; }
  [data-m~="heroscrim"] {
    background:
      linear-gradient(180deg, rgba(7, 10, 18, .52) 0%, rgba(7, 10, 18, .74) 55%,
                      rgba(7, 10, 18, .88) 100%);
  }
}
@media (max-width: 520px) {
  [data-m~="heroh1"] { font-size: clamp(36px, 12.6vw, 58px) !important; }
}

/* ---------- motion ---------------------------------------------------- */

/* product media leans in on hover */
@media (hover: hover) {
  [data-m~="pshot"] img, [data-m~="pshot"] video {
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
  }
  button:hover > [data-m~="pshot"] img,
  button:hover > [data-m~="pshot"] video,
  a:hover > [data-m~="pshot"] img,
  a:hover > [data-m~="pshot"] video { transform: scale(1.045); }
}

/* industry photography settles as the plate scrolls through view */
@supports (animation-timeline: view()) {
  [data-m~="plate"] > img {
    animation: plateZoom linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
@keyframes plateZoom { from { transform: scale(1.14); } to { transform: scale(1); } }

/* Scrim over editorial photography, so type stays readable on top of it.
   The industry plates use theme text colours, so the scrim flips with the
   theme; the POS plate is always white-on-dark. */
[data-m~="plate"] [data-m~="scrim"] {
  background: linear-gradient(to top,
    rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .72) 38%,
    rgba(255, 255, 255, .30) 70%, rgba(255, 255, 255, .10) 100%);
}
[data-theme="dark"] [data-m~="plate"] [data-m~="scrim"] {
  background: linear-gradient(to top,
    rgba(7, 10, 18, .94) 0%, rgba(7, 10, 18, .74) 38%,
    rgba(7, 10, 18, .34) 70%, rgba(7, 10, 18, .12) 100%);
}
/* Section 01 — "Every transaction matters" — is a full-bleed clip too. The
   copy and the payment-flow timeline invert to white over the footage. */
[data-m~="txnfull"] { min-height: min(86svh, 880px); display: flex; align-items: center; }
[data-m~="txnbg"] { z-index: 0; }
[data-m~="txnscrim"] {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 10, 18, .90) 0%, rgba(7, 10, 18, .72) 46%,
                    rgba(7, 10, 18, .40) 76%, rgba(7, 10, 18, .36) 100%),
    linear-gradient(to top, rgba(7, 10, 18, .58), rgba(7, 10, 18, 0) 42%);
}
[data-m~="txnfull"] h2 { color: #fff !important; }
[data-m~="txnfull"] p  { color: rgba(255, 255, 255, .74) !important; }
[data-m~="txnfull"] [data-m~="flowline"] { background: rgba(255, 255, 255, .34) !important; }
[data-m~="txnfull"] [data-m~="flow"] span { color: rgba(255, 255, 255, .72) !important; }

/* Section 02 is a full-bleed clip like the hero. Copy sits top-left, so the
   scrim is heaviest there and clears toward the shop floor on the right. */
[data-m~="posfull"] { min-height: min(86svh, 860px); display: flex; align-items: center; }
[data-m~="posbg"] { z-index: 0; }
[data-m~="posscrim"] {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(9, 20, 56, .90) 0%, rgba(9, 20, 56, .70) 44%,
                    rgba(9, 20, 56, .38) 74%, rgba(9, 20, 56, .34) 100%),
    linear-gradient(to top, rgba(7, 10, 18, .55), rgba(7, 10, 18, 0) 40%);
}

/* Long display headings must never push the page sideways. */
[data-screen] h1, [data-screen] h2, [data-screen] h3 { overflow-wrap: break-word; }

/* ---- laptop ---- */
@media (max-width: 1200px) {
  [data-m~="pad"]   { padding-left: 30px !important; padding-right: 30px !important; }
  [data-m~="glyph"] { opacity: .09 !important; }
}

/* ---- tablet ---- */
@media (max-width: 1024px) {
  [data-m~="pad"]    { padding-left: 26px !important; padding-right: 26px !important; }
  [data-m~="portal"] { grid-template-columns: 190px minmax(0, 1fr) !important; }
}

/* ---- the main mobile breakpoint (matches the canvas file) ---- */
@media (max-width: 900px) {
  [data-m~="col2"] { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }

  /* The desktop layout pins children to explicit grid tracks (grid-column:2 for
     the alternating product rows). Left alone, those pins re-create a second
     implicit column and the row overflows sideways. */
  [data-m~="col2"] > * { grid-column: 1 !important; grid-row: auto !important; }

  [data-m~="pad"]     { padding-left: var(--gut) !important; padding-right: var(--gut) !important; }
  [data-m~="hide"]    { display: none !important; }
  [data-m~="burger"]  { display: flex !important; }

  /* Header: the nav is a space-between row, so once the links are hidden the
     call-to-action group floats into the middle of the bar. Push it back
     against the burger. */
  nav { gap: 12px !important; }
  [data-m~="navcta"] { margin-left: auto; gap: 12px !important; }
  [data-m~="scrollx"] { overflow-x: auto !important; }
  [data-m~="tbl"]     { min-width: 620px !important; }
  [data-m~="noprt"]   { padding-right: 0 !important; }

  /* portal shell: sidebar becomes a scrolling tab strip */
  [data-m~="portal"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m~="portalside"] {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    padding: 12px var(--gut) !important;
    gap: 6px !important;
    position: sticky; top: 50px; z-index: 20;
    background: var(--bg);
  }
  [data-m~="portalside"] > button { flex: none !important; }
  [data-m~="portalside"] > div:first-child { display: none !important; }

  /* Nav drawer. It used to be a sticky panel capped at 76svh, which left it
     ending mid-screen with the page showing underneath. Now it is a proper
     full-height drawer that owns everything below the header. */
  [data-m~="sheet"] {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg) !important;
    padding-left: var(--gut) !important;
    padding-right: var(--gut) !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
  }
  /* menu groups fade up in sequence as the drawer opens */
  [data-m~="sheet"] > * {
    animation: rise .5s cubic-bezier(.16, 1, .3, 1) both;
  }
  [data-m~="sheet"] > *:nth-child(1) { animation-delay: .04s; }
  [data-m~="sheet"] > *:nth-child(2) { animation-delay: .10s; }
  [data-m~="sheet"] > *:nth-child(3) { animation-delay: .16s; }
  [data-m~="sheet"] > *:nth-child(4) { animation-delay: .22s; }

  /* header shows the mark only */
  [data-m~="wordmark"] { display: none !important; }

  /* spec strip: even columns instead of a 56px flex gap */
  [data-m~="meta"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 22px 18px !important;
  }

  /* phone mock: never wider than the screen it is being viewed on */
  [data-m~="frame"] {
    width: min(100%, 340px) !important;
    height: min(660px, 74svh) !important;
    border-radius: 40px !important;
    padding: 9px !important;
  }
  [data-m~="frame"] > div:last-child  { border-radius: 32px !important; }
  [data-m~="frame"] > div:first-child { top: 16px !important; width: 88px !important; height: 24px !important; }

  /* screen/theme switcher out of the way of content and of the sticky CTA */
  [data-m~="switcher"] {
    top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
    align-items: flex-end;
  }

  /* portrait crops lose the subject, so bias the frame and darken further */
  [data-m~="txnfull"] { min-height: min(78svh, 720px); }
  [data-m~="txnbg"] { object-position: 58% center; }
  [data-m~="txnscrim"] {
    background:
      linear-gradient(180deg, rgba(7, 10, 18, .84) 0%, rgba(7, 10, 18, .76) 45%,
                      rgba(7, 10, 18, .90) 100%);
  }
  [data-m~="posfull"] { min-height: min(78svh, 720px); }
  [data-m~="posbg"] { object-position: 60% center; }
  [data-m~="posscrim"] {
    background:
      linear-gradient(180deg, rgba(9, 20, 56, .90) 0%, rgba(9, 20, 56, .82) 45%,
                      rgba(9, 20, 56, .94) 100%);
  }

  [data-m~="glyph"] { display: none !important; }
}

/* ---- large phones ---- */
@media (max-width: 640px) {
  /* A centred full-height hero leaves a screenful of dead space above the
     headline on a phone — start the type just under the header instead. */
  /* keep the clip full-height on phones; the copy gets breathing room from
     the wrapper instead of the section collapsing to content height */
  [data-m~="hero"] { min-height: calc(100svh - 120px) !important; }
  [data-m~="herowrap"] { padding-top: var(--top); padding-bottom: clamp(40px, 8vw, 72px); }

  /* space-between + wrap leaves the fifth stage stranded on its own line */
  [data-m~="flow"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 12px 16px !important;
  }

  /* product carousels go closer to edge-to-edge */
  [data-m~="rail"] > :is(button,a) { width: min(84vw, 420px) !important; }

  /* application progress bar scrolls instead of crushing five labels */
  [data-m~="steps"]     { overflow-x: auto !important; }
  [data-m~="steps"] > div { min-width: 92px; }

  /* footer link columns pair up rather than stacking four deep */
  [data-m~="fcols"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px !important; }

  [data-m~="cells"] { grid-template-columns: minmax(0, 1fr) !important; }

  [data-m~="stickycta"] { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
}

/* ---- small phones: rein in the display type ---- */
@media (max-width: 520px) {
  [data-screen="home"] h1 { font-size: clamp(34px, 12.4vw, 58px) !important; }
  [data-screen="home"] h2 { font-size: clamp(29px, 9.8vw, 46px) !important; }
  [data-screen="home"] h3 { font-size: clamp(24px, 7.6vw, 40px) !important; }
  [data-m~="plate"] h3    { font-size: clamp(24px, 7.4vw, 42px) !important; }
  [data-m~="plate"]       { min-height: min(72svh, 620px) !important; }

  [data-screen="clover"] h1, [data-screen="nrs"] h1 { font-size: clamp(34px, 9.6vw, 48px) !important; }
  [data-screen="detail"] h1  { font-size: clamp(30px, 8.6vw, 42px) !important; }
  [data-screen="pricing"] h1 { font-size: clamp(28px, 7.8vw, 40px) !important; }
  [data-screen="finder"] h1, [data-screen="apply"] h1 { font-size: clamp(26px, 7.4vw, 36px) !important; }
  [data-screen="portal"] h1  { font-size: 24px !important; }

  /* product-row headings inside the galleries */
  [data-screen="clover"] h2, [data-screen="nrs"] h2 { font-size: clamp(24px, 6.6vw, 32px) !important; }
}

/* ---- very small phones ---- */
@media (max-width: 380px) {
  :root { --gut: 16px; }
  [data-m~="rail"] > :is(button,a) { width: 86vw !important; }
}

/* ---- touch targets ---- */
@media (pointer: coarse) {
  #app button { min-height: 44px; }
  #app [data-m~="portalside"] > button { min-height: 40px; }
}

/* ---- landscape phones: the full-height panels are too tall ---- */
@media (max-height: 520px) and (orientation: landscape) {
  [data-m~="hero"]  { min-height: auto !important; padding-top: 90px; padding-bottom: 70px; }
  [data-m~="plate"] { min-height: 460px !important; }
  [data-m~="frame"] { height: min(660px, 84svh) !important; }
}