/* LaneWatch site.
   ------------------------------------------------------------------
   The palette is lifted from the product rather than invented: neutrals
   from lib/theme/colors.dart, and the two identity colours are the app's
   own control colours — the teal of NEW RUN and the brand blue. The app
   half of the page is teal, the Hub half is blue, so the colour says
   which product you are reading about before the words do.

   Type is the LaneWatch family: Orbitron for the wordmark and anything
   behaving like a readout, Oxanium for everything else, the same way
   lib/theme/typography.dart divides them. */

:root {
  /* neutrals — BrandColors._light */
  --bg: #f2f3f6;
  --bg-deep: #e8eaee;
  --card: #ffffff;
  --card-alt: #f7f8fa;
  --ink: #16181c;
  --ink-2: rgba(22, 24, 28, 0.72);
  --ink-3: rgba(22, 24, 28, 0.52);
  --rule: rgba(22, 24, 28, 0.14);
  --rule-strong: rgba(22, 24, 28, 0.28);

  /* identity — straight off the app's own controls */
  --blue: #1565c0;
  --blue-bright: #2196f3;
  --teal: #00806c;
  --teal-bright: #12b79a;
  --amber: #b46a00;
  --on-key: #04120f;

  --shell: 70rem;
  --measure: 63ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --mark-filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --bg-deep: #000000;
    --card: #1c1c1c;
    --card-alt: #171717;
    --ink: #ffffff;
    --ink-2: rgba(255, 255, 255, 0.72);
    --ink-3: rgba(255, 255, 255, 0.5);
    --rule: rgba(255, 255, 255, 0.14);
    --rule-strong: rgba(255, 255, 255, 0.3);
    --blue: #90caf9;
    --teal: #4fd8bd;
    --amber: #ffb300;
    --mark-filter: none;
  }
}

:root[data-theme="dark"] {
  --bg: #121212;
  --bg-deep: #000000;
  --card: #1c1c1c;
  --card-alt: #171717;
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.5);
  --rule: rgba(255, 255, 255, 0.14);
  --rule-strong: rgba(255, 255, 255, 0.3);
  --blue: #90caf9;
  --teal: #4fd8bd;
  --amber: #ffb300;
  --mark-filter: none;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Oxanium, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

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

.shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; }

/* ---------------------------------------------------------------- */
/* masthead                                                          */
/* ---------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding-block: 0.8rem;
}

.wordmark {
  font-family: Orbitron, Oxanium, sans-serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  white-space: nowrap;
  font-size: clamp(0.95rem, 3.4vw, 1.05rem);
}

.wordmark img { height: 1.3em; width: auto; display: block; filter: var(--mark-filter); }

.masthead nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: 0.88rem; }
.masthead nav a { color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- */
/* intro                                                             */
/* ---------------------------------------------------------------- */

.intro { padding-block: clamp(3rem, 9vw, 5.5rem) clamp(2.5rem, 7vw, 4rem); }

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
}

@media (max-width: 62rem) {
  .intro-grid { grid-template-columns: 1fr; }
}

.intro h1 {
  font-family: Orbitron, Oxanium, sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 7.5vw, 3.9rem);
  letter-spacing: 0.01em;
}

.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--ink-2);
  max-width: var(--measure);
  margin-top: 1.4rem;
}

.lede strong { color: var(--ink); font-weight: 700; }

.stores { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 44px; width: auto; display: block; }

/* All four carry .store-badge img on purpose. Written bare they score
   (0,1,0), lose to .store-badge img at (0,1,1), and the light case renders
   both Apple lockups stacked on top of each other. */
.store-badge img.badge-dark { display: none; }
.store-badge img.badge-light { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .store-badge img.badge-dark { display: block; }
  :root:not([data-theme="light"]) .store-badge img.badge-light { display: none; }
}

:root[data-theme="dark"] .store-badge img.badge-dark { display: block; }
:root[data-theme="dark"] .store-badge img.badge-light { display: none; }

/* Google bakes its required clear space into the file — 564x168 of artwork
   on a 646x250 canvas — so matching CSS heights render it a third smaller
   than Apple's. Scale up, pull the padding back out, touch neither file. */
.store-badge.play img { height: 66px; margin: -11px; }

/* ---------------------------------------------------------------- */
/* device frame                                                      */
/* ---------------------------------------------------------------- */

.device {
  padding: 9px;
  border-radius: 2.1rem;
  background: linear-gradient(160deg, #3c3c40, #131314 42%, #232326);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 24px 50px -28px rgba(0, 0, 0, 0.85);
  max-width: 20rem;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.55rem;
  background: #000;
}

.intro .device { margin-inline: auto; }

/* ---------------------------------------------------------------- */
/* the switch — the spine of the page                                */
/* ---------------------------------------------------------------- */

.switch-bar {
  border-block: 1px solid var(--rule);
  background: var(--card-alt);
  position: sticky;
  top: 3.3rem;
  z-index: 15;
}

.switch { display: grid; grid-template-columns: 1fr 1fr; }

.switch button {
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: 1rem 0.5rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transition: color 0.15s, border-color 0.15s;
}

.switch .k {
  font-family: Orbitron, Oxanium, sans-serif;
  font-weight: 700;
  font-size: clamp(0.92rem, 2.6vw, 1.12rem);
  letter-spacing: 0.02em;
}

.switch .v { font-size: 0.85rem; line-height: 1.35; }
.switch button:hover { color: var(--ink-2); }
.switch button[aria-selected="true"] { color: var(--ink); }

#tab-app[aria-selected="true"] { border-bottom-color: var(--teal-bright); }
#tab-hub[aria-selected="true"] { border-bottom-color: var(--blue-bright); }

@media (max-width: 40rem) {
  .switch .v { display: none; }
}

/* ---------------------------------------------------------------- */
/* panels                                                            */
/* ---------------------------------------------------------------- */

.panel { padding-block: clamp(3rem, 8vw, 5rem); }
.panel[hidden] { display: none; }

/* Each panel takes its key colour from the product it describes. */
.panel-app { --key: var(--teal); --key-bright: var(--teal-bright); }
.panel-hub { --key: var(--blue); --key-bright: var(--blue-bright); }

.kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--key, var(--blue));
  margin-bottom: 0.7rem;
}

.panel h2 {
  font-family: Orbitron, Oxanium, sans-serif;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 700;
}

.panel .lede { margin-top: 1.1rem; }

/* Features as a spec list rather than a deck of identical cards. */
.spec {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--rule);
  max-width: 56rem;
}

.spec > div {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.35rem clamp(1.5rem, 4vw, 3rem);
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 46rem) {
  .spec > div { grid-template-columns: 1fr; }
}

.spec h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; }
.spec p { color: var(--ink-2); font-size: 0.97rem; max-width: 56ch; }

/* ---------------------------------------------------------------- */
/* screenshot run                                                    */
/* ---------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2.75rem, 7vw, 4rem);
  align-items: start;
}

.gallery figure { margin: 0; display: grid; gap: 1rem; justify-items: start; }
.gallery .device { max-width: none; }
.gallery figcaption { color: var(--ink-3); font-size: 0.89rem; }

/* ---------------------------------------------------------------- */
/* the bridge                                                        */
/* ---------------------------------------------------------------- */

.carry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  margin-top: 2.5rem;
}

.carry section {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem 1.4rem;
  background: var(--card-alt);
}

.carry h3 { font-size: 0.98rem; margin-bottom: 1rem; }
.carry ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }

.carry li {
  color: var(--ink-2);
  font-size: 0.95rem;
  padding-left: 1.5rem;
  position: relative;
}

.carry li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--key-bright, var(--blue-bright));
}

.carry .comes li::before { content: "✓"; }
.carry .added li::before { content: "+"; }

.footnote {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- */
/* calls to action                                                   */
/* ---------------------------------------------------------------- */

.actions {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
}

.button {
  display: inline-block;
  background: var(--key-bright, var(--blue-bright));
  color: var(--on-key);
  text-decoration: none;
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  transition: filter 0.15s;
}

.button:hover { filter: brightness(1.1); }

.quiet-link { color: var(--key, var(--blue)); font-weight: 600; text-decoration: none; }
.quiet-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- */
/* shared sections below the switch                                  */
/* ---------------------------------------------------------------- */

.common { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 8vw, 5rem); }

.common h2 {
  font-family: Orbitron, Oxanium, sans-serif;
  font-size: clamp(1.5rem, 4.2vw, 2.2rem);
  font-weight: 700;
}

/* The race split into where things happen. The lane rope above it is the
   one ornament on the page, and it is the thing the product is named
   after — blue and amber, the way a real rope alternates. */
.phases {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  padding-top: 2rem;
}

.phases::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--blue-bright) 0 18px,
    var(--amber) 18px 36px
  );
  opacity: 0.8;
}

.phase h3 {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule-strong);
}

.phase ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.phase li { color: var(--ink-2); font-size: 0.93rem; }

/* privacy: a short list set wide, not four identical cards */
.pledges { margin-top: 2.5rem; display: grid; gap: 1.4rem; max-width: 52rem; }

.pledge {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 0.3rem clamp(1.5rem, 4vw, 2.5rem);
}

@media (max-width: 46rem) { .pledge { grid-template-columns: 1fr; } }

.pledge h3 { font-size: 1rem; }
.pledge p { color: var(--ink-2); font-size: 0.96rem; }

/* ---------------------------------------------------------------- */
/* footer                                                            */
/* ---------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3.5rem;
  font-size: 0.9rem;
  color: var(--ink-3);
}

.site-foot .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }

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