/* ============================================================
   XPAD MOBILE - brochure styles
   Design language aligned to the XPAD FLEX master brochure.
   Fonts are loaded via <link> in the document head (faster than @import).
   ============================================================ */

:root{
  --bg:        #0a0a08;
  --bg-2:      #100f0c;
  --panel:     #131210;
  --ink:       #efece3;
  --ink-soft:  #c4c0b5;
  --body:      #a4a096;
  --muted:     #8f8a7c;   /* second-tone headline / dim labels (WCAG-AA on --bg) */
  --faint:     rgba(239,236,227,0.10);
  --faint-2:   rgba(239,236,227,0.06);
  --gold:      #c9ba6b;
  --gold-dim:  rgba(201,186,107,0.55);
  --gold-faint:rgba(201,186,107,0.16);

  --page-w: 1400px;
  --page-h: 1050px;

  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ background:#000; }
body{
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#stage{
  width:var(--page-w);
  transform-origin:top center;
  margin:0 auto;
}

/* ---------------- page shell ---------------- */
.page{
  position:relative;
  width:var(--page-w);
  height:var(--page-h);
  background:var(--bg);
  overflow:hidden;
  margin:0 auto 40px;
}
.page:last-child{ margin-bottom:0; }

/* subtle ops grid overlay */
.grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--faint-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--faint-2) 1px, transparent 1px);
  background-size:100px 100px;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 120% at 70% 30%, #000 30%, transparent 90%);
          mask-image:radial-gradient(120% 120% at 70% 30%, #000 30%, transparent 90%);
}

/* ---------------- running chrome ---------------- */
.run-head, .run-foot{
  position:absolute; left:64px; right:64px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:13px; letter-spacing:0.22em;
  color:var(--muted); text-transform:uppercase; z-index:5;
}
.run-head{ top:50px; }
.run-foot{ bottom:46px; }
.run-head > div, .run-foot > div{ white-space:nowrap; }
.run-head .brand b, .run-foot .brand b{ color:var(--ink-soft); font-weight:600; }
.run-foot .brand b{ color:var(--ink-soft); }
.pageno{
  position:absolute; right:64px; bottom:74px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.2em;
  color:var(--muted); z-index:5;
}

/* ---------------- typography ---------------- */
.eyebrow{
  font-family:var(--mono); font-size:14px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:14px; white-space:nowrap;
}
.eyebrow .slash{ color:var(--gold); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); display:inline-block; }

.display{
  font-weight:800; line-height:0.96; letter-spacing:-0.02em;
  color:var(--ink);
}
.display .dim{ color:var(--muted); font-weight:300; }

.lede{
  font-size:25px; line-height:1.5; color:var(--body); font-weight:400;
  max-width:34ch;
}
.lede b{ color:var(--ink); font-weight:600; }

/* hairline rule */
.rule{ height:1px; background:var(--faint); width:100%; }

/* corner-bracket frame */
.frame{ position:relative; }
.frame .br{ position:absolute; width:26px; height:26px; border:2px solid var(--gold-dim); }
.frame .br.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.frame .br.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.frame .br.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.frame .br.br2{ bottom:14px; right:14px; border-left:0; border-top:0; }

.cap{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* telemetry rail - Mobile's signature live-ops motif */
.telerail{
  display:flex; gap:38px; align-items:center;
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted);
}
.telerail .k{ color:var(--muted); }
.telerail .v{ color:var(--ink-soft); margin-left:8px; }
.telerail .v.on{ color:var(--gold); }
.telerail .seg{ display:flex; align-items:center; white-space:nowrap; }

/* ============================================================
   01 · COVER
   ============================================================ */
.cover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:84% center;
  transform:scale(1.26); transform-origin:78% bottom;
}
.cover-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,8,0.55) 0%, rgba(10,10,8,0) 24%, rgba(10,10,8,0.30) 55%, rgba(10,10,8,0.92) 88%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10,10,8,0.88) 0%, rgba(10,10,8,0.42) 38%, rgba(10,10,8,0) 65%);
}
.cover-block{
  position:absolute; left:64px; bottom:150px; right:64px; z-index:4;
}
.cover-block .eyebrow{ margin-bottom:30px; }
.cover-block .eyebrow .cover-eyebrow-tail{ white-space:nowrap; }
.cover-logo{ height:34px; width:auto; display:block; }
.wordmark{
  font-size:168px; line-height:0.9; letter-spacing:-0.03em; font-weight:800;
  color:var(--ink); margin-bottom:26px;
}
.wordmark .dim{ color:var(--ink-soft); font-weight:300; }
.cover-line{
  font-size:46px; line-height:1.04; font-weight:600; letter-spacing:-0.015em;
  color:var(--ink); margin-bottom:26px; max-width:18ch;
}
.cover-line .dim{ color:var(--muted); font-weight:300; }
.cover-block .lede{ max-width:48ch; font-size:21px; }
.cover-tele{ position:absolute; left:64px; bottom:104px; z-index:4; }

/* ============================================================
   shared page body
   ============================================================ */
.pg-body{
  position:absolute; left:64px; right:64px; top:128px; bottom:124px;
  display:flex; flex-direction:column;
}
.row-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:60px;
}
.page-tele{ position:absolute; left:64px; bottom:88px; z-index:5; }

/* ============================================================
   02 · CONCEPT
   ============================================================ */
.concept-vehicle{
  position:absolute; z-index:1; pointer-events:none;
  right:18px; top:50%; transform:translateY(-42%);
  width:740px; height:auto;
  opacity:0.9;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 14%, #000 30%);
          mask-image:linear-gradient(90deg, transparent 0%, transparent 14%, #000 30%);
}
.concept-lede{ max-width:42ch; font-size:22px; text-align:left; }
.row-top .concept-lede{ margin-top:2px; }
.concept-head{
  position:relative; z-index:11;
  font-size:108px; margin-top:64px; margin-bottom:auto;
}
.triad{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--faint); margin-top:30px;
}
.triad-cell{
  padding:34px 44px 4px 0; border-right:1px solid var(--faint);
}
.triad-cell:last-child{ border-right:0; padding-right:0; }
.triad-cell:not(:first-child){ padding-left:44px; }
.triad-cell .idx{
  font-family:var(--mono); font-size:13px; color:var(--gold);
  letter-spacing:0.2em; margin-bottom:18px;
}
.triad-cell .t{ font-size:30px; font-weight:600; margin-bottom:12px; color:var(--ink); }
.triad-cell .d{ font-size:17px; line-height:1.5; color:var(--body); max-width:26ch; }

/* ============================================================
   03 · CAPABILITIES
   ============================================================ */
.cap-head{ font-size:104px; margin-top:34px; }
.cap-lede{ max-width:50ch; margin-top:30px; font-size:22px; }
.caps{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:auto; border-top:1px solid var(--faint);
}
.cap-col{
  padding:46px 48px 8px 0; border-right:1px solid var(--faint);
  display:flex; flex-direction:column;
}
.cap-col:last-child{ border-right:0; }
.cap-col:not(:first-child){ padding-left:48px; }
.cap-num{
  font-family:var(--mono); font-size:13px; letter-spacing:0.24em;
  color:var(--muted); margin-bottom:34px;
}
.cap-icon{ width:48px; height:48px; margin-bottom:28px; }
.cap-t{ font-size:38px; font-weight:700; letter-spacing:-0.01em; margin-bottom:16px; }
.cap-d{ font-size:19px; line-height:1.5; color:var(--body); max-width:24ch; margin-bottom:30px; }
.cap-stat{
  margin-top:auto; font-family:var(--mono); font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase;
  display:flex; gap:10px; align-items:center;
  border-top:1px solid var(--faint-2); padding-top:18px;
}
.cap-stat .k{ color:var(--muted); }
.cap-stat .v.on{ color:var(--gold); }

/* ============================================================
   04 · INTEGRATION
   ============================================================ */
.integ-frame{
  margin-top:22px; width:100%; height:438px; background:#0d0c0a;
  border:1px solid var(--faint); position:relative; overflow:hidden;
}
.integ-frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:grayscale(0.15) contrast(1.02);
}
.integ-cap{
  position:absolute; left:0; bottom:0;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ink);
  background:linear-gradient(90deg, rgba(10,10,8,0.82), rgba(10,10,8,0.45));
  padding:16px 26px 16px 30px;
}
.integ-foot{
  display:flex; gap:80px; margin-top:34px; align-items:flex-start;
}
.integ-left{ flex:0 0 40%; }
.integ-head{ font-size:62px; line-height:1.0; }
.integ-right{ flex:1; }
.integ-right .lede{ max-width:46ch; font-size:21px; }
.integ-list{
  margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.il-row{
  font-size:17px; color:var(--ink-soft); padding:16px 0;
  border-top:1px solid var(--faint); display:flex; align-items:center; gap:14px;
}
.il-row::before{ content:""; width:6px; height:6px; background:var(--gold); flex:0 0 6px; }
.il-row:nth-child(odd){ padding-right:30px; }
.il-row:nth-child(even){ padding-left:30px; border-left:1px solid var(--faint); }

/* ============================================================
   05 · SPECIFICATIONS
   ============================================================ */
.spec-render{
  position:absolute; z-index:1; pointer-events:none;
  right:40px; top:230px; width:348px; height:auto;
  opacity:0.98;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,0.6));
}
.spec-head{ font-size:60px; margin-top:24px; }
.spec-lede{ max-width:40ch; font-size:20px; margin-top:4px; }
.spec-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:auto; border-top:1px solid var(--faint);
}
.spec-col{ padding:38px 46px 0 0; border-right:1px solid var(--faint); }
.spec-col:last-child{ border-right:0; }
.spec-col:not(:first-child){ padding-left:46px; }
.spec-group{
  font-family:var(--mono); font-size:13px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.spec-row{
  padding:20px 0; border-top:1px solid var(--faint-2);
  display:flex; flex-direction:column; gap:7px;
}
.spec-row .sk{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted);
}
.spec-row .sv{ font-size:23px; font-weight:500; color:var(--ink); letter-spacing:-0.01em; }
.spec-row .sv em{ font-style:normal; color:var(--muted); font-weight:400; font-size:0.78em; }

/* ============================================================
   06 · CLOSE
   ============================================================ */
.close-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 60%;
  filter:grayscale(0.18) brightness(0.86) contrast(1.03);
  transform:scale(1.04);
}
.close-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,8,0.80) 0%, rgba(10,10,8,0.42) 30%, rgba(10,10,8,0.54) 60%, rgba(10,10,8,0.92) 100%),
    radial-gradient(64% 54% at 50% 60%, rgba(10,10,8,0.74) 0%, rgba(10,10,8,0.22) 70%, rgba(10,10,8,0.05) 100%);
}
.close-block{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:0;
  transform:translateY(150px);
}
.eyebrow.center{ justify-content:center; }
.close-head{ font-size:80px; line-height:1.06; margin:34px 0 46px; }
.close-head .cl{ display:block; white-space:nowrap; }
.close-tele{ justify-content:center; margin-bottom:42px; }
.close-cta{
  font-family:var(--mono); font-size:15px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--bg); background:var(--gold);
  text-decoration:none; padding:16px 34px; margin-top:6px;
  border:1px solid var(--gold); transition:background .2s, color .2s;
}
.close-cta:hover{ background:transparent; color:var(--gold); }

/* ============================================================
   print
   ============================================================ */
@media print{
  html,body{ background:#fff; }
  #stage{ transform:none !important; width:1400px; }
  body{ height:auto !important; }
  .page{ margin:0 !important; page-break-after:always; break-after:page; }
  .page:last-child{ page-break-after:auto; }
  @page{ size:1400px 1050px; margin:0; }
}

/* ============================================================
   ACCESSIBILITY - skip link, focus rings, motion
   ============================================================ */
.skip-link{
  position:absolute; left:14px; top:-64px; z-index:60;
  background:var(--gold); color:#0a0a08;
  font-family:var(--mono); font-size:13px; letter-spacing:0.12em;
  text-transform:uppercase; text-decoration:none;
  padding:12px 18px; transition:top .15s ease;
}
.skip-link:focus{ top:14px; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}
#stage:focus, #stage:focus-visible{ outline:none; }
.close-cta:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   RESPONSIVE - tablet & mobile reflow (< 900px)
   Below this width the fixed 1400px canvas is abandoned and the
   content reflows into a single fluid column. The JS scaler in the
   document clears its transform at the same breakpoint.
   ============================================================ */
@media (max-width:899px){
  html, body{ background:var(--bg); }
  #stage{ width:100%; transform:none !important; margin:0; }
  body{ height:auto !important; }

  .page{
    width:100%; height:auto; min-height:0;
    margin:0; padding:68px 22px 60px;
    display:flex; flex-direction:column;
  }

  /* drop repeating print-chrome on small screens */
  .run-head, .run-foot, .pageno, .page-tele, .cover-tele, .grid-bg{ display:none; }

  /* shared content container becomes a normal flow column */
  .pg-body{
    position:static; inset:auto;
    left:auto; right:auto; top:auto; bottom:auto;
    display:flex; flex-direction:column;
  }
  .row-top{ flex-direction:column; align-items:stretch; gap:18px; }
  .eyebrow{ font-size:clamp(11px,3vw,13px); flex-wrap:wrap; }
  .lede{ font-size:clamp(16px,4.5vw,20px); max-width:none; }

  /* ---- 01 COVER ---- */
  .cover{ min-height:100svh; padding:0; justify-content:flex-end; }
  .cover-img{ object-position:80% center; transform:scale(1.12); transform-origin:80% bottom; }
  .cover-shade{
    background:
      linear-gradient(180deg, rgba(10,10,8,0.55) 0%, rgba(10,10,8,0) 26%, rgba(10,10,8,0.45) 58%, rgba(10,10,8,0.96) 90%, var(--bg) 100%);
  }
  .cover .run-head{
    display:flex; position:absolute; top:20px; left:22px; right:22px; margin:0;
  }
  .cover-block{
    position:static; left:auto; right:auto; bottom:auto;
    padding:0 22px 56px;
  }
  .cover-block .eyebrow{ margin-bottom:20px; }
  .cover-block .eyebrow .cover-eyebrow-tail{ flex-basis:100%; }
  .wordmark{ font-size:clamp(60px,17vw,140px); margin-bottom:18px; }
  .cover-line{ font-size:clamp(25px,6.6vw,40px); max-width:none; margin-bottom:18px; }
  .cover-block .lede{ font-size:clamp(15px,4.3vw,19px); max-width:none; }

  /* ---- 02 CONCEPT ---- */
  .page[data-screen-label="02 - Concept"]{ display:flex; flex-direction:column; }
  .page[data-screen-label="02 - Concept"] .pg-body{ display:contents; }
  .page[data-screen-label="02 - Concept"] .row-top{ display:contents; }
  .page[data-screen-label="02 - Concept"] .row-top .eyebrow{ display:none; }
  .page[data-screen-label="02 - Concept"] .row-top .concept-lede{ order:4; }
  .page[data-screen-label="02 - Concept"] .concept-head{ order:2; }
  .page[data-screen-label="02 - Concept"] .concept-vehicle{ order:3; }
  .page[data-screen-label="02 - Concept"] .rule{ order:5; }
  .page[data-screen-label="02 - Concept"] .triad{ order:6; }
  .concept-vehicle{
    position:static; width:100%; max-width:520px; height:auto;
    right:auto; top:auto; transform:none; opacity:1;
    margin:4px auto 26px; -webkit-mask-image:none; mask-image:none;
  }
  .concept-lede{ font-size:clamp(16px,4.5vw,20px); max-width:none; }
  .concept-head{ font-size:clamp(40px,10.5vw,84px); margin:0 0 6px; }
  .triad{ grid-template-columns:1fr; margin-top:24px; }
  .triad-cell{
    border-right:0; border-bottom:1px solid var(--faint);
    padding:24px 0 22px;
  }
  .triad-cell:last-child{ border-bottom:0; }
  .triad-cell:not(:first-child){ padding-left:0; }
  .triad-cell .d{ max-width:none; }

  /* ---- 03 CAPABILITIES ---- */
  .cap-head{ font-size:clamp(40px,10.5vw,84px); margin:0; }
  .cap-lede{ font-size:clamp(16px,4.5vw,20px); max-width:none; margin-top:18px; }
  .caps{ grid-template-columns:1fr; margin-top:30px; }
  .cap-col{
    border-right:0; border-bottom:1px solid var(--faint);
    padding:28px 0;
  }
  .cap-col:last-child{ border-bottom:0; }
  .cap-col:not(:first-child){ padding-left:0; }
  .cap-d{ max-width:none; margin-bottom:22px; }

  /* ---- 04 INTEGRATION ---- */
  .integ-frame{ height:auto; aspect-ratio:16/10; margin-top:18px; }
  .integ-foot{ flex-direction:column; gap:22px; margin-top:26px; }
  .integ-left{ flex:none; }
  .integ-head{ font-size:clamp(34px,8.5vw,58px); }
  .integ-right .lede{ font-size:clamp(16px,4.5vw,20px); max-width:none; }
  .integ-list{ grid-template-columns:1fr; margin-top:18px; }
  .il-row{ padding:14px 0 !important; border-left:0 !important; }

  /* ---- 05 SPECIFICATIONS ---- */
  .page[data-screen-label="05 - Specifications"]{ display:flex; flex-direction:column; }
  .page[data-screen-label="05 - Specifications"] .pg-body{ display:contents; }
  .page[data-screen-label="05 - Specifications"] .row-top{ order:1; }
  .page[data-screen-label="05 - Specifications"] .spec-render{ order:2; }
  .page[data-screen-label="05 - Specifications"] .spec-grid{ order:3; }
  .spec-render{
    position:static; width:74%; max-width:360px; height:auto;
    right:auto; top:auto; margin:2px auto 22px;
    filter:drop-shadow(0 14px 26px rgba(0,0,0,0.55));
  }
  .spec-head{ font-size:clamp(34px,8.5vw,58px); }
  .spec-lede{ font-size:clamp(16px,4.5vw,20px); max-width:none; }
  .spec-grid{ grid-template-columns:1fr; margin-top:28px; }
  .spec-col{
    border-right:0; border-bottom:1px solid var(--faint);
    padding:24px 0;
  }
  .spec-col:last-child{ border-bottom:0; }
  .spec-col:not(:first-child){ padding-left:0; }
  .spec-row .sv{ font-size:clamp(18px,4.8vw,23px); }

  /* ---- 06 CLOSE ---- */
  .close{ min-height:100svh; padding:0; }
  .close-img{ object-position:center 52%; }
  .close-block{
    position:static; transform:none !important; inset:auto;
    min-height:100svh; padding:120px 22px 96px;
    justify-content:center;
  }
  .close-head{ font-size:clamp(34px,8.5vw,72px); margin:28px 0 36px; }
  .close-head .cl{ white-space:normal; }
  .close-tele{ flex-wrap:wrap; gap:14px 26px; justify-content:center; }
}

/* very small phones */
@media (max-width:380px){
  .page{ padding-left:18px; padding-right:18px; }
  .wordmark{ font-size:56px; }
}