/* ============================================================================
   Track2Map — main.css
   Palette inherited unchanged from business/onepager_investor_en.html so the
   site, the one-pagers and the decks read as one company.
   ========================================================================== */

:root{
  /* ---- brand: white, red, black. The red is the one-pagers' red, unchanged. ---- */
  --white:  #ffffff;
  --ink:    #0d0e10;   /* near black, body text and dark panels */
  --slate:  #3a3d42;   /* secondary text */
  --muted:  #74787f;   /* captions, sources */
  --line:   #e4e4e6;   /* rules and card borders */
  --accent: #cf2e2e;   /* the only chromatic colour on the site */
  --wash:   #f6f6f7;   /* neutral grey. No blue in it */
  --green:  #0f7a4a;   /* privacy only. The one place the site is allowed to be reassuring */
  --green-bg: #eef7f2;

  /* ---- derived ---- */
  --navy:       #0d0e10;   /* kept as an alias so nothing breaks */
  --navy-soft:  #17181b;
  --line-soft:  #ededef;
  --accent-dim: rgba(207,46,46,.10);

  /* ---- type ---- */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-hero:  clamp(2.35rem, 6.2vw, 4.4rem);
  --t-h2:    clamp(1.65rem, 3.4vw, 2.6rem);
  --t-h3:    clamp(1.05rem, 1.7vw, 1.3rem);
  --t-lead:  clamp(1.05rem, 1.75vw, 1.3rem);
  --t-body:  1.0rem;
  --t-small: 0.86rem;
  --t-eyebrow: 0.72rem;

  /* ---- space ---- */
  --gap:      1.5rem;
  --section:  clamp(3.2rem, 6.5vw, 5.4rem);
  --measure:  68ch;
  --shell:    1180px;

  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background-color:var(--white);
  /* the static half of the backdrop. JavaScript never draws this. */
  background-image:
    radial-gradient(circle, rgba(13,14,16,.15) 1.1px, transparent 1.6px),
    linear-gradient(to right,  rgba(13,14,16,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,14,16,.028) 1px, transparent 1px);
  background-size:26px 26px, 130px 130px, 130px 130px;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.022em; font-weight:650; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
img,svg,video{ max-width:100%; height:auto; display:block; }
strong,b{ font-weight:640; }

/* the cursor-reactive layer, between the dot field and the content */
.backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.site-head, main, .site-foot{ position:relative; z-index:1; }

/* Sections are translucent so the field shows through, except the dark ones. */
section{ background:rgba(255,255,255,.78); }
.band-wash{ background:rgba(242,242,244,.82); }
.panel-dark, .site-foot{ background:var(--ink); }
.hero{ background:rgba(255,255,255,.62); }

/* ---------- layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem); }
section{ padding-block:var(--section); }
section[id]{ scroll-margin-top:82px; }
section.strip{ padding-block:clamp(2.4rem,4vw,3.4rem); }
.measure{ max-width:var(--measure); }

.eyebrow{
  font-size:var(--t-eyebrow); font-weight:620; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1.1rem;
}
.eyebrow.on-dark{ color:#8b8e95; }
.lead{ font-size:var(--t-lead); line-height:1.5; color:var(--slate); }
.src{ font-size:var(--t-small); color:var(--muted); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:.75rem 1.1rem; font-weight:600;
}
.skip:focus{ left:.5rem; top:.5rem; }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .shell{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:72px; }
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.brand .mark{ width:38px; height:38px; flex:0 0 38px; border-radius:9px; }
.brand__w{ font-weight:700; letter-spacing:-.022em; font-size:1.18rem; color:var(--ink); }
.brand__2{ color:var(--accent); font-weight:800; }
.nav{ display:flex; align-items:center; gap:1.8rem; }
.nav a{ text-decoration:none; font-size:.9rem; color:var(--slate); font-weight:520; transition:color .18s var(--ease); }
.nav a:hover{ color:var(--ink); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:#fff; text-decoration:none;
  font-weight:600; font-size:.92rem; letter-spacing:.005em;
  padding:.72rem 1.35rem; border:1px solid var(--accent); border-radius:var(--radius);
  cursor:pointer; transition:background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{ background:#b32626; border-color:#b32626; }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--wash); border-color:var(--muted); }
/* This button always sits on a permanently dark panel, so its colours must be
   literal. Using var(--ink) broke it in the accessibility dark mode, where --ink
   flips to near-white and the label disappeared into the white button. */
.btn--onDark{ background:#fff; color:#0d0e10; border-color:#fff; }
.btn--onDark:hover{ background:#e8e8ea; border-color:#e8e8ea; }
.btn--lg{ padding:.85rem 1.7rem; font-size:.98rem; }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(3.5rem,8vw,5.5rem) 0; background:var(--white); }
.hero h1{ font-size:var(--t-hero); font-weight:680; letter-spacing:-.033em; max-width:17ch; }
.hero h1 .dim{ color:var(--muted); }
.hero .lead{ margin-top:1.6rem; max-width:60ch; }
.hero .cta-row{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* the console and the guard app, side by side, inside the hero.
   The pair breaks out past the text column so the console is readable. */
.shot{ margin:clamp(2.8rem,6vw,4.5rem) 0 0;
  --pair-gap:1.6rem;
  /* Both images must end up the SAME height. With the console at 1900x1060
     (aspect 1.7925) and the phone at 700x1462 (aspect 0.4788), equal heights
     means each takes its aspect's share of the row:
        phone   = 0.4788 / (1.7925 + 0.4788) = 21.08%
        console = 1.7925 / (1.7925 + 0.4788) = 78.92%
     of the width left after the gap. Recompute these if either export is
     re-cropped. */
  --phone-share:21.08%;
  width:min(calc(100vw - 3rem), 1440px);
  margin-inline:calc((100% - min(calc(100vw - 3rem), 1440px)) / 2); }
.shot__pair{ display:flex; gap:var(--pair-gap); align-items:flex-end; }
.shot__desk{ flex:1 1 auto; min-width:0;
  border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--ink);
  box-shadow:0 30px 70px -40px rgba(13,14,16,.55); }
.shot__phone{ flex:0 0 calc((100% - var(--pair-gap)) * 0.2108); }
.shot img{ width:100%; height:auto; display:block; }
/* The device is a rounded rectangle, so a rectangular crop leaves background in
   the corners. This is the measured device radius expressed per axis, so the
   corner stays circular at every display size. Tied to the export dimensions:
   re-crop the phone and this must be recomputed. */
.shot__phone img{ border-radius:16.11% / 7.71%;
  filter:drop-shadow(0 26px 40px rgba(13,14,16,.42)); }
.shot figcaption{ margin-top:.95rem; font-size:var(--t-small); color:var(--muted);
  padding-inline:.2rem; }

/* ---------- generic section head ---------- */
.s-head{ max-width:var(--measure); margin-bottom:clamp(2rem,4vw,3rem); }
.s-head h2{ font-size:var(--t-h2); }
.s-head p{ margin-top:1.1rem; font-size:var(--t-lead); color:var(--slate); line-height:1.5; }

/* ---------- washed band ---------- */
.band-wash{ background:var(--wash); border-block:1px solid var(--line-soft); }

/* ---------- cards ---------- */
.grid{ display:grid; gap:1.4rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.5rem;
}
.card h3{ font-size:var(--t-h3); margin-bottom:.7rem; }
.card p{ color:var(--slate); font-size:.955rem; }
.card .src{ display:block; margin-top:.9rem; }

/* case cards carry a red spine */
.card--case{ border-top:3px solid var(--accent); }

/* numbered capability cards */
.card--step .n{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--accent-dim); color:var(--accent);
  font-size:.82rem; font-weight:680; margin-bottom:1rem;
}

/* ---------- the four questions ---------- */
.qrow{ margin-top:1.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.qrow div{ background:var(--white); padding:1.5rem 1.3rem; }
.qrow p{ font-size:1.02rem; font-weight:600; line-height:1.35; letter-spacing:-.012em; }
.after{ margin-top:1.6rem; font-size:var(--t-lead); color:var(--ink); font-weight:560; }

/* ---------- the four questions ---------- */
.qlead{ font-size:var(--t-lead); font-weight:560; color:var(--ink); margin:0 0 1.3rem; max-width:52ch; }
.qrow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; }
.qrow li{ background:var(--white); padding:1.5rem 1.3rem; }
.qrow .qn{ display:block; font-size:.72rem; font-weight:680; letter-spacing:.12em;
  color:var(--accent); margin-bottom:.6rem; }
.qrow p{ font-size:1.02rem; font-weight:600; line-height:1.35; letter-spacing:-.012em; }

/* ---------- running today ---------- */
.today{ margin:0 0 2.2rem; padding-left:1.4rem; border-left:3px solid var(--accent); max-width:var(--measure); }
.today .eyebrow{ margin-bottom:.6rem; }
.today__lead{ font-size:1.05rem; color:var(--ink); font-weight:500; line-height:1.55; }
.card__so{ margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line-soft);
  color:var(--ink) !important; font-size:.92rem; }

/* ---------- privacy, the only green on the site ---------- */
.privacy{ margin-top:2.6rem; padding:1.7rem 1.8rem;
  background:var(--green-bg); border:1px solid #cfe6da;
  border-left:4px solid var(--green); border-radius:var(--radius); }
.privacy__head{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.privacy__badge{ flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--green);
  color:#fff; display:flex; align-items:center; justify-content:center; }
.privacy__badge svg{ width:18px; height:18px; }
.privacy h3{ font-size:.78rem; font-weight:680; letter-spacing:.14em; text-transform:uppercase;
  color:#0b5c38; }
.privacy__claims{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#cfe6da;
  border:1px solid #cfe6da; border-radius:3px; overflow:hidden; }
.privacy__claims li{ background:var(--green-bg); padding:.9rem .95rem;
  font-size:.89rem; font-weight:570; line-height:1.35; color:#0b4630; letter-spacing:-.01em;
  display:flex; align-items:center; }

/* ---------- the domain carousel ---------- */
.s-head--row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; }
.s-head--row > div:first-child{ max-width:var(--measure); }
.rail-nav{ display:flex; gap:.5rem; flex:0 0 auto; }
.rail-btn{ width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease); }
.rail-btn svg{ width:19px; height:19px; }
.rail-btn:hover:not([disabled]){ background:var(--accent); border-color:var(--accent); }
.rail-btn[disabled]{ opacity:.25; cursor:default; }

.rail{ overflow-x:auto;
  /* This is a scrolling box on BOTH axes whether we like it or not: the spec
     forces overflow-y:clip (and :visible) back to :hidden whenever the other
     axis is auto or scroll. Safari then swallows vertical wheel events over the
     rail and the page will not scroll. There is no CSS way out, so the wheel is
     handed back to the page in js/domains.js. */
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none; padding-block:.5rem 1.4rem;
  scroll-padding-inline:clamp(1.15rem,4vw,2.5rem); }
.rail::-webkit-scrollbar{ display:none; }
.rail__track{ display:flex; gap:1.1rem; align-items:stretch; width:max-content;
  padding-inline:clamp(1.15rem,4vw,2.5rem); }
@media (min-width:1245px){
  .rail__track{ padding-inline:calc((100vw - var(--shell))/2 + 2.5rem); }
  .rail{ scroll-padding-inline:calc((100vw - var(--shell))/2 + 2.5rem); }
}

.dom{
  scroll-snap-align:start; position:relative; flex:0 0 340px; width:340px;
  border-radius:10px; overflow:hidden; background:#141518;
  border:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:460px; isolation:isolate;
  transition:border-color .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease), flex-basis .35s var(--ease), width .35s var(--ease);
}
.dom:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.26);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.9); }
.dom.is-open{ flex-basis:430px; width:430px; border-color:var(--accent); }

/* the photograph fills the card and sits behind everything */
.dom__art{ position:absolute; inset:0; z-index:-2; }
.dom__art img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.32) contrast(1.08) brightness(.88);
  transform:scale(1.04); transition:filter .45s var(--ease), transform .6s var(--ease); }
.dom:hover .dom__art img{ filter:grayscale(0) contrast(1.1) brightness(1); transform:scale(1.09); }

/* the scrim that keeps the type readable over any photograph */
.dom::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,11,13,.96) 0%, rgba(10,11,13,.88) 30%,
             rgba(10,11,13,.5) 55%, rgba(10,11,13,.12) 85%, rgba(10,11,13,0) 100%); }

.dom__body{ padding:1.5rem 1.4rem 1.5rem; display:flex; flex-direction:column; }
.dom__idx{ font-size:.7rem; font-weight:700; letter-spacing:.16em; color:#ff6b6b;
  margin-bottom:.5rem; }
.dom h3{ font-size:1.22rem; color:#fff; margin-bottom:.55rem; letter-spacing:-.02em; }
.dom__line{ font-size:.92rem; color:#c6c8cd; line-height:1.55; }
.dom__more{ margin-top:1.1rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:100px;
  padding:.42rem .9rem; cursor:pointer; font:inherit;
  font-size:.8rem; font-weight:620; letter-spacing:.01em; color:#fff;
  transition:background .18s var(--ease), border-color .18s var(--ease); }
.dom__more:hover{ background:var(--accent); border-color:var(--accent); }
.dom__more svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.dom__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.dom__cases{ list-style:none; margin:1.1rem 0 0; padding:1.1rem 0 0;
  border-top:1px solid rgba(255,255,255,.16); display:grid; gap:.9rem; }
.dom__cases[hidden]{ display:none; }
.dom__cases li{ font-size:.87rem; color:#b0b3b9; line-height:1.55; }
.dom__cases b{ color:#fff; font-weight:600; display:block; margin-bottom:.1rem; }
.dom--ask{ background:#0a0b0d; border-style:dashed; justify-content:center; min-height:460px; }
.dom--ask::after{ display:none; }
.dom--ask .dom__body{ gap:.9rem; align-items:flex-start; }

/* ---------- dark panel ---------- */
.panel-dark{ background:var(--ink); color:#d6d7da; }
.panel-dark h2{ color:#fff; }
.panel-dark .lead, .panel-dark p{ color:#a8aab0; }
.panel-dark strong{ color:#fff; }
.panel-dark .rule{ background:rgba(255,255,255,.14); }

/* ---------- founders ---------- */
.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem; max-width:820px; }
.person{ display:flex; gap:1.1rem; align-items:flex-start; }
.person .avatar{
  flex:0 0 68px; width:68px; height:68px; border-radius:50%;
  background:var(--wash); overflow:hidden;
}
.person .avatar img{ width:100%; height:100%; object-fit:cover; }
.person h3{ font-size:1.05rem; }
.person .role{ font-size:.86rem; color:var(--accent); font-weight:600; margin:.15rem 0 .5rem; }
.person p{ font-size:.94rem; color:var(--slate); }
.person a{ font-size:.86rem; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); }
.person a:hover{ color:var(--ink); border-color:var(--muted); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.form{ display:grid; gap:1.05rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.82rem; font-weight:600; letter-spacing:.01em; color:#c9cacd; }
.field input,.field select,.field textarea{
  font-family:inherit; font-size:.95rem; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); padding:.72rem .85rem; width:100%;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#75787e; }
.field select option{ background:var(--ink); color:#fff; }
.field .err{ font-size:.78rem; color:#ff8a8a; min-height:1em; }
.form-note{ font-size:.8rem; color:#8b8e95; }
.form-status{ font-size:.92rem; font-weight:560; min-height:1.4em; }
.form-status[data-state="ok"]{ color:#7fd6a3; }
.form-status[data-state="err"]{ color:#ff8a8a; }
.contact-alt{ font-size:.92rem; color:#a8aab0; }
.contact-alt a{ color:#fff; }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink); color:#8b8e95; border-top:1px solid rgba(255,255,255,.09); padding-block:2.6rem; font-size:.87rem; }
.site-foot .shell{ display:flex; flex-wrap:wrap; gap:1.2rem 2.5rem; justify-content:space-between; align-items:center; }
.site-foot a{ color:#a8aab0; text-decoration:none; }
.site-foot a:hover{ color:#fff; }
.foot-links{ display:flex; gap:1.5rem; flex-wrap:wrap; }

/* ---------- legal pages ---------- */
.doc{ padding-block:clamp(3rem,7vw,5rem); }
.doc h1{ font-size:var(--t-h2); margin-bottom:1.5rem; }
.doc h2{ font-size:1.2rem; margin:2.4rem 0 .8rem; }
.doc p,.doc li{ color:var(--slate); max-width:var(--measure); }
.doc ul{ padding-left:1.15rem; }
.doc li{ margin-bottom:.45rem; }


/* ---------- hero backdrop: one gradient-masked grid, no JS, no repaint ---------- */
.hero{ position:relative; overflow:hidden; }
.hero > .shell{ position:relative; z-index:1; }
.hero__grid{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 62% at 80% 6%,  rgba(207,46,46,.075) 0%, transparent 60%),
    radial-gradient(46% 54% at 12% 92%, rgba(13,14,16,.05)  0%, transparent 62%);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0)      scale(1); }
  to  { transform:translate3d(-2.5%,1.5%,0) scale(1.08); }
}
.hero__grid::after{
  content:""; position:absolute; top:0; right:6%; width:1px; height:100%;
  background:linear-gradient(to bottom, transparent, rgba(207,46,46,.5), transparent);
  animation:sweep 9s var(--ease) infinite;
}
@keyframes sweep{
  0%,100%{ transform:translateX(0);   opacity:0; }
  12%    { opacity:.9; }
  50%    { transform:translateX(-46vw); opacity:.55; }
  88%    { opacity:0; }
}

/* ---------- reveal on scroll: opacity and transform only ---------- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-in{ opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease); }
.js-off .reveal{ opacity:1; transform:none; }

/* ---------- header condenses once you leave the hero ---------- */
.site-head{ transition:box-shadow .25s var(--ease), height .25s var(--ease); }
.site-head.is-stuck{ box-shadow:0 1px 0 rgba(13,14,16,.06), 0 10px 30px -22px rgba(13,14,16,.5); }

@media (prefers-reduced-motion: reduce){
  .hero__grid{ animation:none; }
  .hero__grid::after{ animation:none; opacity:0; }
  .reveal, .reveal.is-in{ opacity:1; transform:none; transition:none; }
}

/* honeypot, and the optional-field hint */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.opt{ font-weight:400; color:#8b8e95; }