/* ============================================================================
   DesignPro, v6 "Shop Drawing".

   The idea: a cabinet dealer's world is dimensions and SKUs, so the page is
   drawn like a cabinet elevation. Hairline sheet rules run down the content
   column, dimension callouts annotate real things with real values, and every
   label is set in mono. The light is one source, not an aurora: the product
   stage emits it and the rest of the page stays black.

   Purple is the primary now (2026-08-14): Shop Pay purple everywhere that
   used to split violet/orange two-tone, including every headline pop and
   CTA. --salmon and --salmon-soft stay aliased to it for those call sites.
   --coral is a second, later pass (same day): real salmon/coral brought
   back, but scoped only to small decorative accents (badge dots, the
   announcement pulse, the warm side of the hero glow) rather than restored
   everywhere, so purple keeps the primary weight.
   ========================================================================= */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/montserrat-var.woff2") format("woff2");
}

:root {
  --ink: #000;
  --panel: #0b0c10;
  --violet: #5a31f4;
  --salmon: var(--violet);
  --salmon-soft: #8163ff;
  --coral: #ff7a63;
  --coral-soft: #ff9c86;
  --bone: #f5f5f0;
  --mute: #9aa0ab;
  --dim: #787d8a;

  --rule: rgba(245, 245, 240, 0.07);
  --rule-live: rgba(245, 245, 240, 0.12);
  --rule-hot: rgba(245, 245, 240, 0.2);

  --t-display: clamp(40px, 5.6vw, 76px);
  --t-section: clamp(28px, 3.4vw, 42px);
  --t-panel: 24px;
  --t-card: 18px;
  --t-lead: 17px;
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 11px;

  --r-panel: 18px;
  --r-chip: 10px;
  --r-pill: 999px;

  --sans: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --w: 1120px;
  --gut: 28px;
  --sec: 128px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: rgba(90, 49, 244, 0.5); color: #fff; }

h1, h2 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
/* one phrase per headline carries the accent, and it is set lighter so the
   weight shift does the work as much as the colour */
h1 em, h2 em {
  font-style: normal;
  font-weight: 300;
  color: var(--salmon);
}

/* Display type emerges out of the black: a per-line vertical fade, dark at the
   cap line rising to white by the x-height. The gradient PERIOD is locked to
   line-height, which is what makes it repeat correctly on wrapped lines
   instead of smearing across the whole block the way a single ramp does. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .fade-in-black.fade-in-black {
    /* lh is the line box itself, so the period cannot drift from the text the
       way an em-guess does (that put line 1 in the white band and line 2 in
       the dark one) */
    background-image: repeating-linear-gradient(
      180deg,
      #4e4f58 0,
      #ffffff 0.52lh,
      #ffffff 1lh
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* children with their own colour paint over the clipped fill */
  .fade-in-black em, .fade-in-black .grad { color: var(--salmon); }
  .fade-in-black.fade-in-black { color: transparent; }
}
/* a clipped gradient is painted across the span's union box, so it splits
   words and reverses when the line wraps. One solid accent instead. */
h1 .grad, h2 .grad { font-style: normal; font-weight: 300; color: var(--salmon); }
h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }

/* -------------------------------------------------------------- aurora ---
   The same purple + coral wash the hero stage uses behind the render,
   reused as a section backdrop instead of invented fresh per section.
   Drop `.aurora.a-1` or `.aurora.a-2` as the first child of any
   `position: relative; overflow: hidden` section. */

.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(74px); }
.aurora.a-1 {
  background:
    radial-gradient(38% 55% at 14% 30%, rgba(90, 49, 244, 0.32), transparent 70%),
    radial-gradient(32% 48% at 88% 65%, rgba(255, 122, 99, 0.2), transparent 72%);
}
.aurora.a-2 {
  background: radial-gradient(46% 60% at 50% 45%, rgba(90, 49, 244, 0.3), transparent 72%);
}

/* --------------------------------------------------------------- glass ---
   Translucent panel standing in for the flat --panel fill: a soft-UI
   surface that reads as floating glass rather than a filled card. */

/* Raised, not flat. Three things make a panel read as a slab with thickness:
   a top-lit gradient across the face, a bright top edge paired with a dark
   bottom edge, and a two-part shadow (tight contact + wide ambient). Shared
   here so every panel on the page is the same machined object. */
.glass {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028) 46%, rgba(255, 255, 255, 0.014));
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 0 #131419,
    0 2px 0 #131419,
    0 3px 0 #131419,
    0 4px 0 #131419,
    0 5px 0 #131419,
    0 6px 0 #131419,
    0 7px 0 #131419,
    0 8px 0 #131419,
    0 18px 30px -10px rgba(0, 0, 0, 0.8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(20, 18, 28, 0.72); }
}

/* ---------------------------------------------------------------- sheet ---
   The drawing sheet: two hairlines down the content column, the way an
   elevation sits inside its border. Quiet enough to read as paper. */

.wrap { position: relative; max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }


/* ------------------------------------------------------------ dimension ---
   The signature: a hairline with end ticks and a mono value, used only where
   it annotates something true. */

.dim {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.dim::before,
.dim::after {
  content: "";
  flex: 1;
  height: 7px;
  border-top: 1px solid var(--rule-live);
}
.dim::before { border-left: 1px solid var(--rule-live); }
.dim::after { border-right: 1px solid var(--rule-live); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 99, 0.16);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 122, 99, 0.16); }
  50% { box-shadow: 0 0 0 6px rgba(255, 122, 99, 0.06); }
}

/* ------------------------------------------------------------------ nav ---
   A hairline bar, not a floating pill: the hero owns the only CTA. */

.site-head { position: fixed; inset: 0 0 auto; z-index: 60; transition: transform 0.3s var(--ease); }
/* a soft ambient wash bleeding out from under the fixed header, so the nav
   reads as a lit HUD panel rather than a flat bar sitting on the page */
.site-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 70px;
  background: linear-gradient(180deg, rgba(90, 49, 244, 0.14), transparent 85%);
  filter: blur(18px);
  pointer-events: none;
}
/* a floating pill instead of an edge to edge bar: inset from the viewport
   on all sides so the page shows through around it, glass intensity kept
   from the STL Cabinetry storefront nav match (backdrop-blur-xl) */
.nav {
  position: relative;
  z-index: 1;
  max-width: calc(var(--w) - 40px);
  width: calc(100% - 32px);
  margin: 14px auto 0;
  border-radius: var(--r-pill);
  /* same machined slab as the panels: lit across the face, bright top edge
     against a dark bottom one, and a contact shadow under a wide ambient */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 55%, rgba(255, 255, 255, 0)),
    rgba(10, 10, 14, 0.78);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--rule-live);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 0 #101116,
    0 2px 0 #101116,
    0 3px 0 #101116,
    0 4px 0 #101116,
    0 5px 0 #101116,
    0 6px 0 #101116,
    0 18px 32px -12px rgba(0, 0, 0, 0.8),
    0 34px 60px -26px rgba(90, 49, 244, 0.28);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
/* the same violet to coral wash the rest of the page uses for glow, now as
   a ring around the pill once stuck, instead of a bottom hairline that no
   longer makes sense on a shape with rounded edges on every side */
.nav.stuck {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 55%, rgba(255, 255, 255, 0)),
    rgba(10, 10, 14, 0.92);
  border-color: rgba(90, 49, 244, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 0 #101116,
    0 2px 0 #101116,
    0 3px 0 #101116,
    0 4px 0 #101116,
    0 5px 0 #101116,
    0 6px 0 #101116,
    0 22px 38px -12px rgba(0, 0, 0, 0.85),
    0 40px 70px -26px rgba(90, 49, 244, 0.42);
}
@media (max-width: 640px) { .nav { border-radius: 20px; margin-top: 10px; width: calc(100% - 20px); } }
.nav-inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 56px;
  display: flex;
  align-items: center;
  gap: 30px;
}
/* the exact .btn-shop recipe from the STL Cabinetry nav CTA: scoped to the
   nav only (not the shared .btn used in the hero/pricing/final sections,
   which stays the subtler treatment already tuned earlier) */
.nav-links a.btn {
  height: 38px;
  padding: 0 18px;
  font-size: var(--t-small);
  font-weight: 600;
  background: linear-gradient(180deg, #8163ff 0%, #6338f7 52%, #5a31f4 100%);
  box-shadow:
    0 10px 24px -8px rgba(90, 49, 244, 0.55),
    0 2px 6px -2px rgba(90, 49, 244, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 5px rgba(52, 22, 160, 0.35);
  transition: box-shadow 0.16s ease, filter 0.16s ease, transform 0.12s ease;
}
.nav-links a.btn:hover {
  background: linear-gradient(180deg, #8163ff 0%, #6338f7 52%, #5a31f4 100%);
  filter: brightness(1.05);
  box-shadow:
    0 14px 30px -8px rgba(90, 49, 244, 0.65),
    0 3px 8px -2px rgba(90, 49, 244, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 5px rgba(52, 22, 160, 0.35);
  transform: none;
}
.nav-links a.btn:active { filter: brightness(0.98); transform: translateY(1px); }
.nav-links { margin-left: auto; }

/* announcement strip: says the honest thing, that this is the beta */
.ann {
  position: relative;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.03);
}
.ann .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.ann b { font-weight: 400; color: var(--bone); }
.ann .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); animation: pulse 2.4s ease-in-out infinite; }
@media (max-width: 640px) { .ann .wrap { font-size: 9.5px; letter-spacing: 0.08em; } }
.nav .mark { display: flex; align-items: center; margin-right: auto; text-decoration: none; flex: none; }
/* mark-brand.png is painted violet-to-salmon; brightness(0) flattens every
   opaque pixel to black without touching the alpha edge, then invert(1)
   flips that to solid white, so the nav mark stops carrying the old
   two-tone gradient */
.nav .mark img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter 0.3s var(--ease);
}
.nav .mark:hover img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(90, 49, 244, 0.7)); }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--mute);
  transition: color 0.16s var(--ease);
}
.nav-links a:hover { color: var(--bone); }
.nav-links .signin { color: var(--bone); }
/* a gradient underline on every link, not just sign in: the same violet to
   coral sweep used for the nav's own stuck-state hairline */
.nav-links a:not(.btn)::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background: linear-gradient(90deg, var(--violet), var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .nav-links a:not(.signin):not(.btn) { display: none; }
  .nav-links { gap: 14px; }
}
@media (max-width: 560px) {
  .nav-inner { gap: 12px; height: 58px; padding: 0 16px; }
  .nav-links a.btn { padding: 0 14px; font-size: var(--t-label); }
}

/* ---------------------------------------------------------------- forms ---
   One input treatment on the whole site. */

.capture { display: flex; gap: 8px; max-width: 520px; margin: 26px auto 12px; }
.capture input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-live);
  background: rgba(255, 255, 255, 0.03);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--t-body);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.capture input::placeholder { color: var(--dim); }
.capture input:focus {
  outline: none;
  border-color: rgba(90, 49, 244, 0.7);
  background: rgba(90, 49, 244, 0.06);
}
.capture .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 520px) {
  .capture { flex-direction: column; }
  .capture .btn { width: 100%; }
  /* in column flow the input's flex basis collapses it to text height */
  .capture input[type="email"] { flex: none; height: 52px; }
}

/* soft/morphic instead of a flat harsh fill (2026-08-14): a gentle top-to-
   bottom gradient reads as a rounded, extruded surface rather than a block
   of color, the inset highlight simulates a glass edge catching light, and
   the inset shadow near the bottom keeps that surface from looking flat.
   White text instead of near-black is deliberate too, it's a softer
   contrast than the old dark-on-bright-accent CTA convention. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 30px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #8163ff 0%, #5a31f4 60%, #5a31f4 100%);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* A pressable key with real height. The side is ONE flat colour, not a ramp
     of darkening steps: a real extruded edge is a single face catching one
     light, and grading it just reads as a blur. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 0 #3a1aa8,
    0 2px 0 #3a1aa8,
    0 3px 0 #3a1aa8,
    0 4px 0 #3a1aa8,
    0 5px 0 #3a1aa8,
    0 6px 0 #3a1aa8,
    0 10px 18px -6px rgba(0, 0, 0, 0.6),
    0 16px 30px -10px rgba(90, 49, 244, 0.5);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease), background 0.2s var(--ease);
}
.btn:hover {
  background: linear-gradient(180deg, #8163ff 0%, #6338f7 60%, #5a31f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 1px 0 #3a1aa8,
    0 2px 0 #3a1aa8,
    0 3px 0 #3a1aa8,
    0 4px 0 #3a1aa8,
    0 5px 0 #3a1aa8,
    0 6px 0 #3a1aa8,
    0 7px 0 #3a1aa8,
    0 8px 0 #3a1aa8,
    0 14px 24px -6px rgba(0, 0, 0, 0.65),
    0 22px 40px -10px rgba(90, 49, 244, 0.6);
  transform: translateY(-2px);
}
/* Pressing it drives the key down onto its own side, which is the whole point
   of giving it one. */
.btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 0 #3a1aa8,
    0 2px 0 #3a1aa8,
    0 6px 12px -6px rgba(0, 0, 0, 0.6);
}
.btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 4px 8px -4px rgba(0, 0, 0, 0.28),
    0 3px 8px -4px rgba(90, 49, 244, 0.28);
}
.btn.ghost {
  background: none;
  border-color: var(--rule-hot);
  color: var(--bone);
}
.btn.ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: #fff; box-shadow: none; }
.btn svg { width: 15px; height: 15px; }

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

.capture-note {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.capture-done {
  display: none;
  max-width: 520px;
  margin: 32px auto 14px;
  padding: 15px 22px;
  border: 1px solid rgba(255, 122, 99, 0.45);
  border-radius: var(--r-pill);
  background: rgba(90, 49, 244, 0.12);
  font-size: var(--t-body);
  font-weight: 500;
}
form.done { display: none; }
form.done + .capture-done { display: block; }

/* ----------------------------------------------------------------- hero ---
   Almost entirely black. The only light in the fold comes off the product
   stage, so the eye lands on the product rather than on a gradient. */

/* 150px of dead air above the eyebrow pushed the product shot to y=716, which
   on a 1440x800 laptop left 16% of it in the fold. The page argues that the
   renders are the product; the render has to be visible while the claim is
   still on screen. */
.hero { position: relative; padding: 156px 0 0; text-align: center; overflow: clip; }
.hero .wrap { position: relative; z-index: 1; }
.hero .kicker {
  max-width: 520px;
  margin: 0 auto 20px;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
/* caps + tracking put the space AFTER a highlighted span, which opens a gap
   before the letters that finish the word; cancel it so DESIGNING reads whole */
.hero .kicker b,
.hero .kicker i { margin-right: -0.14em; }
/* these two were 400 against a 500 line, so they read lighter than the copy
   they were supposed to emphasise */
.hero .kicker b,
.hero .kicker i { font-style: normal; font-weight: 700; color: #fff; }
.hero h1 { font-size: var(--t-display); max-width: 18ch; margin: 0 auto; color: #fff; }
.hero .sub { max-width: 46ch; margin: 18px auto 0; color: var(--mute); font-size: var(--t-lead); }

/* ---------------------------------------------------------------- stage ---
   The product, framed like a drawing plate and lit from behind. */

/* Back to 1000 on 2026-08-14. I widened this to 94vw off the SaaS references
   and Andrew called it way too large: at that size the render stops being the
   evidence under the claim and becomes the page. The headline is the hero. */
.stage { position: relative; margin: 40px auto 0; max-width: 1000px; padding: 0 var(--gut); }
/* the plate is an opaque photograph now, so the light has to come from beside
   and below it, not from behind its centre where it is simply occluded */
.stage .glow {
  position: absolute;
  inset: -14% -12% -26%;
  /* The kitchen went black (bevel black, 08-14), so it no longer separates
     itself from a black page the way the sage one did. The light has to do
     that work: a wash ABOVE the plate's top edge as well as beside it, which
     is what reads as the product being lit rather than pasted on. */
  background:
    radial-gradient(46% 30% at 50% 4%, rgba(90, 49, 244, 0.50), transparent 72%),
    radial-gradient(28% 44% at 4% 58%, rgba(90, 49, 244, 0.55), transparent 70%),
    radial-gradient(28% 44% at 96% 50%, rgba(255, 122, 99, 0.4), transparent 70%),
    radial-gradient(60% 26% at 50% 96%, rgba(90, 49, 244, 0.42), transparent 76%);
  filter: blur(78px);
  z-index: 0;
  pointer-events: none;
}
/* The same tablet as the project manager section, flat rather than leaned.
   The bottom-fade that used to dissolve this render into the page is gone on
   purpose: a device with a bezel cannot fade out at one edge without looking
   broken, so it is a whole object now instead of a blended one. */
.stage .plate {
  position: relative;
  z-index: 1;
  padding: 8px;
  background: linear-gradient(158deg, #34353d, #17181d 46%, #0d0e12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  line-height: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1px 0 #101116,
    0 2px 0 #101116,
    0 3px 0 #101116,
    0 4px 0 #101116,
    0 5px 0 #101116,
    0 6px 0 #101116,
    0 7px 0 #101116,
    0 8px 0 #101116,
    0 40px 70px -26px rgba(0, 0, 0, 0.9);
}
/* the camera, centred in the top bezel */
.stage .plate::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  z-index: 2;
}
.stage .plate picture, .stage .plate img { display: block; width: 100%; height: auto; border-radius: 11px; }
.stage .caption { position: relative; z-index: 1; max-width: 560px; margin: 26px auto 0; }

/* -------------------------------------------------------------- section --- */

section.block { position: relative; padding: var(--sec) 0 0; overflow: hidden; }
/* The hero used to end on a bordered facts strip, which carried its own space.
   With that gone the full section gap leaves the tool section stranded, so the
   first block after the hero sits closer. */
#features { padding-top: 64px; }
.head { max-width: 640px; margin: 0 0 44px; }
.head.center { margin: 0 auto 44px; text-align: center; }
.head h2 { font-size: var(--t-section); color: #fff; }
.head p { color: var(--mute); margin-top: 14px; font-size: var(--t-body); }

/* ----------------------------------------------------------------- tabs --- */

.tabs { display: flex; margin-bottom: 30px; border-bottom: 1px solid var(--rule); }
.tabs [role="tab"] {
  position: relative;
  border: 0;
  background: none;
  color: var(--dim);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  padding: 0 0 14px;
  margin-right: 30px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
  transition: color 0.16s var(--ease);
}
.tabs [role="tab"] .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--dim); }
.tabs [role="tab"]:hover { color: var(--mute); }
.tabs [role="tab"][aria-selected="true"] { color: var(--bone); }
.tabs [role="tab"][aria-selected="true"] .k { color: var(--salmon); }
.tabs [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--violet);
}
@media (max-width: 640px) {
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }
  .tabs::-webkit-scrollbar { display: none; }
}

.panel { display: none; }
.panel.on { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .panel.on { grid-template-columns: 1fr; gap: 30px; } }
.panel h3 { font-size: var(--t-panel); margin-bottom: 12px; }
.panel .blurb { color: var(--mute); font-size: var(--t-body); margin-bottom: 20px; }
.panel ul { list-style: none; }
.panel li {
  display: flex;
  gap: 12px;
  color: var(--mute);
  font-size: var(--t-small);
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.panel li:last-child { border-bottom: 1px solid var(--rule); }
.panel li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-left: 1px solid var(--salmon);
  border-bottom: 1px solid var(--salmon);
}
.panel li b { color: var(--bone); font-weight: 500; }

/* a real monitor silhouette, not a rotated flat image: bezel + camera dot +
   stand, straight on. Reference sites (Scotch, Pathway) put screenshots on
   an actual rendered device rather than tilting the image itself. */
.device {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 26px 54px rgba(90, 49, 244, 0.35)) drop-shadow(0 14px 34px rgba(255, 122, 99, 0.16));
}
.device-screen {
  position: relative;
  padding: 10px 10px 14px;
  background: linear-gradient(160deg, #2b2c34, #0e0e12);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.device-screen::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.device-stand { width: 130px; height: 32px; margin: 0 auto; position: relative; }
.device-stand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 22px;
  background: linear-gradient(180deg, #2b2c34, #16171b);
}
.device-stand::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, #303139, #16171b);
}
.shot {
  border-radius: 7px;
  overflow: hidden;
  background: var(--panel);
  /* one height for all three tabs, so switching does not shove the page */
  aspect-ratio: 16 / 9;
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (max-width: 900px) {
  .device { filter: none; }
  .device-stand { display: none; }
}

/* -------------------------------------------------------------- compare ---
   Before/after slider: .compare-before is a full-bleed absolute layer
   clipped by --pos, so one drag handler updates a single custom property
   and both the clip and the handle position read from it. */
/* dragging on a raw <img> normally starts a native image-drag (or a text
   selection if the pointer strays off it) and swallows the custom drag
   entirely, so both have to be switched off on the slider and everything
   inside it */
.shot.compare {
  position: relative;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.shot.compare img { -webkit-user-drag: none; user-drag: none; }
.compare-after { position: absolute; inset: 0; }
.compare-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare-before img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 2;
}
.compare-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 10, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.6);
}
.compare-grip::before, .compare-grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--bone);
  border-right: 2px solid var(--bone);
}
.compare-grip::before { left: 11px; transform: translateY(-50%) rotate(-135deg); }
.compare-grip::after { right: 11px; transform: translateY(-50%) rotate(45deg); }
.shot.compare:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* ------------------------------------------------------------ statement --- */

.statement { position: relative; padding: var(--sec) 0 0; text-align: center; overflow: hidden; }
.statement .wrap { position: relative; z-index: 1; }
.statement h2 { font-size: var(--t-section); color: #fff; }
.statement p { color: var(--mute); max-width: 52ch; margin: 18px auto 0; font-size: var(--t-body); }

/* -------------------------------------------------------------- designs --- */

/* The isometric slab's painted bounds are far bigger than its layout box, so
   the section has to be given the room the turn actually needs. */
.pm { position: relative; padding: var(--sec) 0 120px; text-align: center; overflow: hidden; }
/* The section's own headline, set larger than the standard section size:
   it is carrying the whole product claim above the board. */
.pm h2 { font-size: clamp(38px, 5.6vw, 76px); letter-spacing: -0.035em; color: #fff; max-width: 18ch; margin: 0 auto; }
.pm .sub { color: var(--mute); font-size: var(--t-body); margin: 16px auto 0; }
.designs {
  position: relative;
  width: min(860px, 100%);
  margin: 52px auto 0;
  padding: 18px 20px 22px;
  text-align: left;
  border: 1px solid var(--rule-live);
  border-radius: var(--r-panel);
  background: var(--panel);
}
.designs .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 18px; }
.designs .find {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  justify-self: start;
  width: min(190px, 100%);
  font-size: var(--t-small);
  color: var(--dim);
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
}
.designs .find svg { width: 12px; height: 12px; flex: none; }
.designs .bar h3 { font-size: var(--t-card); color: var(--bone); text-align: center; }
.designs .make {
  justify-self: end;
  font-size: var(--t-small);
  color: #eadfff;
  padding: 8px 14px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(90, 49, 244, 0.5);
  background: rgba(90, 49, 244, 0.14);
  white-space: nowrap;
}
.designs .cols,
.designs .r { display: grid; grid-template-columns: 104px 1fr 1fr 1fr 60px; gap: 12px; align-items: center; }
.designs .cols {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-live);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.designs .rows {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 100%);
}
.designs .r { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-small); color: var(--mute); }
.designs .r span:nth-child(2) { color: var(--bone); font-family: var(--mono); }
.designs .r .go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--mute);
  border: 1px solid var(--rule-live);
  border-radius: var(--r-chip);
  padding: 6px 8px;
  white-space: nowrap;
}
.designs .r .icons { display: flex; gap: 10px; justify-content: flex-end; color: var(--dim); }
.designs .r .icons svg { width: 15px; height: 15px; }
.designs .all {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--dim);
  text-decoration: none;
}
.designs .all:hover { color: var(--mute); }
@media (max-width: 700px) {
  .designs .bar { grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "find make"; gap: 12px 8px; }
  .designs .bar h3 { grid-area: title; }
  .designs .find { grid-area: find; width: 100%; }
  .designs .make { grid-area: make; }
  .designs .cols, .designs .r { grid-template-columns: 70px 1fr 1fr 40px; gap: 8px; font-size: var(--t-label); }
  .designs .cols span:nth-child(4), .designs .r .cust { display: none; }
}

/* ---------------------------------------------------------------- bento ---
   A single ruled grid, not eight different cards. */

.bento {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } }
.cell {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028) 46%, rgba(255, 255, 255, 0.014));
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--r-panel);
  padding: 30px 26px 32px;
  /* one flat side, same as the board's cards */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 0 #131419,
    0 2px 0 #131419,
    0 3px 0 #131419,
    0 4px 0 #131419,
    0 5px 0 #131419,
    0 6px 0 #131419,
    0 7px 0 #131419,
    0 8px 0 #131419,
    0 18px 30px -10px rgba(0, 0, 0, 0.8);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.cell:hover {
  transform: translateY(-5px);
  border-color: rgba(90, 49, 244, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 0 #131419,
    0 2px 0 #131419,
    0 3px 0 #131419,
    0 4px 0 #131419,
    0 5px 0 #131419,
    0 6px 0 #131419,
    0 7px 0 #131419,
    0 8px 0 #131419,
    0 9px 0 #131419,
    0 10px 0 #131419,
    0 11px 0 #131419,
    0 12px 0 #131419,
    0 26px 42px -12px rgba(0, 0, 0, 0.85),
    0 46px 84px -30px rgba(90, 49, 244, 0.45);
}
/* icon badge shared by .claim and .cell: matches the reference sites'
   circular-icon-plus-label pattern instead of a bare mono label alone */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(90, 49, 244, 0.14);
  border: 1px solid rgba(90, 49, 244, 0.3);
  color: var(--violet);
  margin-bottom: 14px;
}
.badge svg { width: 16px; height: 16px; }
.cell .mono {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--salmon);
  margin-bottom: 16px;
}
.cell h3 { font-size: var(--t-card); margin-bottom: 10px; }
.cell p { color: var(--mute); font-size: var(--t-small); }
.cell.wide { grid-column: span 2; }
@media (max-width: 600px) { .cell.wide { grid-column: span 1; } }

.viz { margin-top: 18px; }
.viz.sku { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-chip); overflow: hidden; }
.viz.sku span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--dim);
  padding: 9px 12px;
}
.viz.sku b { color: var(--bone); font-weight: 400; }
.viz.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.viz.flow span { border: 1px solid var(--rule); border-radius: var(--r-chip); padding: 7px 10px; color: var(--dim); white-space: nowrap; }
.viz.flow span.hot { border-color: rgba(255, 122, 99, 0.4); color: var(--coral); }
.viz.flow i { color: var(--dim); font-style: normal; }
.viz.files { display: flex; gap: 8px; }
.viz.files span {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--dim);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--violet);
  border-radius: var(--r-chip);
  padding: 9px 12px;
}
.viz.files span:last-child { border-left-color: var(--salmon); }
.viz.price { font-family: var(--mono); font-size: var(--t-label); color: var(--dim); display: grid; }
.viz.price .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.viz.price .row:last-child { border-bottom: 0; }
.viz.price b { color: var(--bone); font-weight: 400; }

/* ---------------------------------------------------------------- steps ---
   A real sequence, so the numbering is earned. */

/* the gradient across each card's top edge runs violet to coral left to
   right, so the row itself reads as a flow even though each step is its
   own floating tile rather than a connected line */
.steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step {
  counter-increment: step;
  position: relative;
  overflow: hidden;
  padding: 32px 28px 32px;
  border-radius: var(--r-panel);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028) 46%, rgba(255, 255, 255, 0.014));
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  /* one flat side, same slab as every other panel */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 0 #131419,
    0 2px 0 #131419,
    0 3px 0 #131419,
    0 4px 0 #131419,
    0 5px 0 #131419,
    0 6px 0 #131419,
    0 7px 0 #131419,
    0 8px 0 #131419,
    0 18px 30px -10px rgba(0, 0, 0, 0.8);
}
.step::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; }
.step:nth-child(1)::after { background: var(--violet); }
.step:nth-child(2)::after { background: linear-gradient(90deg, var(--violet), var(--coral)); }
.step:nth-child(3)::after { background: var(--coral); }
.step::before {
  content: "0" counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(90, 49, 244, 0.14);
  border: 1px solid rgba(90, 49, 244, 0.4);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone);
  margin-bottom: 18px;
}
.step h3 { font-size: var(--t-card); margin-bottom: 10px; }
.step p { color: var(--mute); font-size: var(--t-small); }

/* -------------------------------------------------------------- pricing --- */

.plans { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; text-align: center; }
.plans .card { border-radius: var(--r-panel); padding: 44px 36px 38px; }
.plans h3 { font-size: var(--t-panel); margin-bottom: 12px; }
.plans p { color: var(--mute); font-size: var(--t-body); max-width: 44ch; margin: 0 auto; }
.plans .note {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--salmon);
  margin: 22px auto 24px;
}

/* ------------------------------------------------------------------ faq --- */

.faq { max-width: 720px; margin: 0 auto; border-radius: var(--r-panel); padding: 6px 30px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 20px 2px;
  font-size: var(--t-body);
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--dim);
  border-bottom: 1px solid var(--dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.faq .a { padding: 0 2px 22px; color: var(--mute); font-size: var(--t-small); max-width: 62ch; }

/* ----------------------------------------------------------------- final -- */

.final { position: relative; text-align: center; padding: var(--sec) 0 132px; overflow: clip; }
.final .glow {
  position: absolute;
  inset: 12% 10% 0;
  background:
    radial-gradient(46% 56% at 38% 55%, rgba(90, 49, 244, 0.4), transparent 72%),
    radial-gradient(34% 44% at 74% 40%, rgba(255, 122, 99, 0.22), transparent 72%);
  filter: blur(64px);
  pointer-events: none;
}
.final .wrap { position: relative; z-index: 1; }
.final h2 { font-size: var(--t-section); max-width: 18ch; margin: 0 auto; color: #fff; }
.final h2 em { font-style: normal; color: var(--salmon); }
.final > .wrap > p { color: var(--mute); margin: 16px auto 0; max-width: 48ch; font-size: var(--t-body); }

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

footer { border-top: 1px solid var(--rule); padding: 56px 0 44px; margin-top: var(--sec); }
.foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
@media (max-width: 720px) { .foot { grid-template-columns: 1fr; gap: 30px; } }
.foot .mark { display: inline-flex; text-decoration: none; }
/* same treatment as .nav .mark img: the raw PNG is still violet-to-salmon,
   which would be the one place the retired orange survives */
.foot .mark img { height: 38px; width: auto; filter: brightness(0) invert(1); }
.foot .tag { color: var(--mute); font-size: var(--t-small); margin-top: 16px; max-width: 32ch; }
.foot h4 {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 400;
  margin-bottom: 14px;
}
.foot ul { list-style: none; display: grid; gap: 10px; }
.foot a { color: var(--mute); text-decoration: none; font-size: var(--t-small); }
.foot a:hover { color: var(--bone); }
.legal {
  max-width: var(--w);
  margin: 44px auto 0;
  padding: 20px var(--gut) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
}

/* ----------------------------------------------------------------- mock ---
   Real UI, drawn quietly so it reads as a screenshot, not a decorated card. */

.screen { background: var(--panel); }
.screen-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  font-weight: 500;
}
.screen-top .title { grid-column: 1 / -1; grid-row: 1; text-align: center; }
.screen-top .out {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dim);
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  padding: 5px 9px;
}
.screen-top .out svg { width: 10px; height: 10px; }
.grad-name { color: var(--salmon); }

.screen-body { display: grid; grid-template-columns: 168px 1fr; }
@media (max-width: 640px) { .screen-body { grid-template-columns: 1fr; } .side { display: none; } }
.side { border-right: 1px solid var(--rule); padding: 16px 14px; }
.side img.wm { height: 18px; width: auto; margin-bottom: 16px; }
.side .search, .main .search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--t-label);
  color: var(--dim);
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  padding: 7px 10px;
  white-space: nowrap;
}
.search svg { width: 11px; height: 11px; flex: none; }
.side .search { margin-bottom: 16px; }
.side nav { display: grid; gap: 2px; font-size: var(--t-small); color: var(--mute); }
.side nav span { padding: 8px 10px; border-radius: var(--r-chip); }
.side nav span.on { color: var(--bone); background: rgba(90, 49, 244, 0.14); box-shadow: inset 2px 0 0 var(--violet); }

.main { padding: 16px 18px; min-width: 0; }
.main .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.main .toolbar .search { flex: 1; max-width: 230px; }
.main .toolbar .new {
  font-size: var(--t-label);
  color: #eadfff;
  border: 1px solid rgba(90, 49, 244, 0.5);
  background: rgba(90, 49, 244, 0.14);
  border-radius: var(--r-chip);
  padding: 7px 12px;
  white-space: nowrap;
}
.grid-head, .rowcard { display: grid; grid-template-columns: 104px 1fr 1fr 1fr 54px; gap: 12px; align-items: center; }
.grid-head {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule-live);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.grid-head span:first-child { visibility: hidden; }
.rowcard { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-small); color: var(--mute); }
.rowcard .proj { color: var(--bone); font-family: var(--mono); }
.rowcard .open {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--mute);
  border: 1px solid var(--rule-live);
  border-radius: var(--r-chip);
  padding: 5px 8px;
  text-align: center;
  white-space: nowrap;
}
.rowcard .icons { display: flex; gap: 9px; justify-content: flex-end; color: var(--dim); }
.rowcard .icons svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .grid-head, .rowcard { grid-template-columns: 66px 1fr 1fr 30px; gap: 8px; font-size: var(--t-label); }
  .grid-head span:nth-child(4), .rowcard .cust { display: none; }
}

/* ------------------------------------------------------------------ misc -- */

.reveal, .reveal.in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  /* the plate is live layout, not a scaled image, so it needs real rules here */
  .screen-top { padding: 11px 12px; font-size: var(--t-label); }
  .screen-top .title { grid-column: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main { padding: 12px; }
  .grid-head, .rowcard { grid-template-columns: 60px 1fr 1fr 26px; gap: 7px; }
  .rowcard .open { font-size: 8.5px; padding: 4px 5px; letter-spacing: 0; }
  .rowcard .icons { gap: 6px; }
  .rowcard .icons svg { width: 11px; height: 11px; }
  .designs .cols, .designs .r { grid-template-columns: 62px 1fr 1fr 30px; gap: 7px; }
  .designs .r .go { font-size: 8.5px; padding: 4px 5px; letter-spacing: 0; }
  .designs .r .icons svg { width: 12px; height: 12px; }
}

@media (max-width: 720px) {
  :root { --sec: 84px; --gut: 20px; }
  .hero { padding-top: 118px; }
  .stage { margin-top: 52px; padding: 0 12px; }
  .stage .caption { font-size: 10px; letter-spacing: 0.1em; }
}


/* --------------------------------------------------------------- ahead ----
   The positioning band: what the tool does that the old desktop software
   cannot. Three claims, each concrete. */

.ahead { position: relative; padding: var(--sec) 0 0; overflow: hidden; }
.ahead .head { max-width: 720px; }
.ahead .wrap { position: relative; z-index: 1; }
.claims {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 52px;
}
.claim.wide { grid-column: span 2; }
@media (max-width: 820px) { .claims { grid-template-columns: 1fr; } .claim.wide { grid-column: span 1; } }
.claim {
  border-radius: var(--r-panel);
  padding: 30px 26px 34px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.claim:hover {
  transform: translateY(-3px);
  border-color: rgba(90, 49, 244, 0.35);
  box-shadow: 0 20px 44px -18px rgba(90, 49, 244, 0.45);
}
.claim .n {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--salmon);
  margin-bottom: 18px;
}
.claim h3 { font-size: var(--t-card); margin-bottom: 10px; }
.claim h3 { min-height: 2.5em; }
.claim h3 em { font-style: normal; font-weight: 400; color: var(--salmon); white-space: nowrap; }
.claim p { color: var(--mute); font-size: var(--t-small); }

/* ------------------------------------------------------------------- vs ---
   The 2020 head to head. Two columns doing the opposite job: theirs stays
   dim and small print, ours carries the contrast and the weight, so the eye
   reads a winner without an icon or a checkmark doing the work. */

.vs-wrap { position: relative; z-index: 1; margin-top: 48px; overflow-x: auto; border-radius: var(--r-panel); padding: 8px 28px; }
.vs { width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; }
.vs th, .vs td { padding: 16px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: var(--t-body); }
.vs thead th {
  padding-top: 0;
  padding-bottom: 14px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-live);
}
.vs thead th.them { color: var(--dim); font-weight: 500; }
.vs thead th.us { color: var(--violet); font-weight: 600; }
.vs tbody th {
  font-weight: 500;
  color: var(--mute);
  white-space: nowrap;
  width: 1%;
}
.vs td.them { color: var(--dim); }
.vs td.us { color: var(--bone); font-weight: 500; }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: none; }
.vs sup { font-size: 0.7em; color: var(--dim); margin-left: 1px; }
.vs-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--dim);
  max-width: 720px;
  margin: 18px auto 0;
}
#vs .wrap.sheet { text-align: center; }
#vs .vs-wrap { text-align: left; }
#vs .btn { margin: 32px auto 0; }
/* a 3 column table has nowhere to go under ~460px of actual content width,
   and a horizontal scroll buries the DesignPro column exactly where a
   mobile visitor would stop looking, so it collapses into one card per row
   instead of scrolling sideways */
@media (max-width: 640px) {
  .vs-wrap { overflow-x: visible; }
  .vs { min-width: 0; }
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: 100%; }
  .vs tbody tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .vs tbody tr:last-child { border-bottom: none; }
  .vs tbody th {
    padding: 0 0 12px;
    color: var(--bone);
    font-size: var(--t-small);
    font-weight: 600;
    white-space: normal;
    width: 100%;
  }
  .vs td { padding: 10px 0 0; border-bottom: none; font-size: var(--t-small); }
  .vs td:first-of-type { padding-top: 0; }
  .vs td::before {
    content: attr(data-col);
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .vs td.them::before { color: var(--dim); }
  .vs td.us::before { color: var(--violet); }
}

/* The dashboard shot sits FLAT, in the same plate language as the hero. It
   was tilted in perspective for a while; a screenshot of a real product is
   evidence, and evidence should be readable rather than posed. The glow still
   lives on the wrapper because .appshot clips its own corners and would cut a
   shadow painted on the same element right back off. */
/* Laid back like a tablet flat on the counter, seen from standing height. One
   axis only: rotateX leans it away, and there is deliberately no rotateY,
   because twisting it as well is the posed 3D look rather than a real object
   on a real surface. transform-style/backface are left alone; this is a single
   flat plane, nothing to preserve. */
.appshot-tilt {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  /* Pulled up hard against the headline. The lean leaves a wedge of empty
     space above the near edge, so the gap reads far larger than the number. */
  margin: -34px auto 0;
  perspective: 1600px;
}
/* The tablet the board is being read on: a uniform bezel all the way round,
   a machined outer edge, and the screen inset inside it. No stand and no
   tilt, because it is lying on the counter being pointed at. */
.appshot {
  position: relative;
  padding: 8px;
  background: linear-gradient(158deg, #34353d, #17181d 46%, #0d0e12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
  line-height: 0;
  /* Square to the reader and leaned back on one axis: no rotateZ, so every
     vertical stays vertical and the board is still readable. The stack of
     hard 0-blur shadows is the slab's thickness, painted in the element's own
     space before the lean, so it comes out as the front edge. Static: it does
     not move on hover, because a page-scale object shifting under the cursor
     reads as a toy. */
  transform: rotateX(30deg) scale(1.03);
  transform-origin: 50% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 0 #23242b,
    0 4px 0 #202129,
    0 6px 0 #1d1e25,
    0 8px 0 #1a1b22,
    0 10px 0 #17181e,
    0 12px 0 #14151b,
    0 14px 0 #0f1015,
    0 70px 90px -34px rgba(0, 0, 0, 0.95),
    0 56px 140px -30px rgba(90, 49, 244, 0.5);
}
/* The tagline over the project manager reads as a statement of fact, not a
   section label, so it drops the coral the other eyebrows wear. Scoped to
   this section only: the rest of the page keeps the accent. */
/* Set in the hero slogan's treatment rather than the mono eyebrow one:
   sans, uppercase, wide tracking, white. It is a claim in the brand voice,
   not a code-styled section label, so it loses the mono and the dot. */
#projects .eyebrow {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #fff;
  gap: 0;
}
#projects .eyebrow::before { display: none; }

/* ------------------------------------------------------ request access ---
   The page the preview's one live button leads to. Small on purpose: one
   decision on it, and a door for dealers who already hold a code. */

.ra { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 40px 20px 64px; overflow: hidden; }
.ra-inner { position: relative; z-index: 1; width: min(560px, 100%); }
.ra-back {
  display: inline-block;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.ra-back:hover { color: var(--bone); }
.ra-card { padding: 38px 34px 32px; border-radius: 22px; text-align: center; }
.ra-mark { height: 40px; width: auto; margin: 0 auto 20px; filter: brightness(0) invert(1); opacity: 0.92; }
.ra-card .eyebrow { margin-bottom: 16px; }
.ra-card h1 { font-size: clamp(28px, 4.4vw, 40px); color: #fff; margin-bottom: 12px; }
.ra-sub { color: var(--mute); font-size: var(--t-body); line-height: 1.55; max-width: 42ch; margin: 0 auto; }
.ra-capture { margin: 24px auto 10px; }
.ra-rule { height: 1px; background: var(--rule); margin: 26px 0 20px; }
.ra-have { font-size: var(--t-small); color: var(--mute); }
.ra-have a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.ra-have a:hover { color: #fff; }

.ra-facts { list-style: none; margin: 26px 0 0; display: grid; gap: 12px; }
.ra-facts li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--rule-live); }
.ra-facts b {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
}
.ra-facts span { font-size: var(--t-small); color: var(--dim); }
@media (max-width: 560px) { .ra-card { padding: 30px 22px 26px; } }

/* --------------------------------------------------------- ground type ---
   Laid on the same plane as the tablet and continuing away from the reader,
   so the two read as one object and one floor rather than a picture with a
   caption. Same rotateX as .appshot; the mask fades it into the far distance
   instead of ending on a hard edge. It is decorative and duplicated by the
   heading above, so it is aria-hidden. */

/* Pulled up so the tablet's near edge just crosses the tops of the letters:
   the line reads as running underneath the device rather than sitting in
   its own band below it. */
.pm-ground { perspective: 1600px; margin-top: 4px; }
.pm-ground span {
  display: block;
  transform: rotateX(30deg);
  transform-origin: 50% 0;
  /* Sized to FIT the plate at nowrap: the line is ~21 characters, so anything
     near the viewport width runs off the end of the tablet and gets clipped. */
  font-size: clamp(28px, 5vw, 88px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  /* only the far end falls away, so the line stays a statement rather than a
     watermark */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.pm-ground em { font-style: normal; color: #8163ff; }
@media (max-width: 1100px) {
  .pm-ground { perspective: none; margin-top: 22px; }
  .pm-ground span { transform: none; font-size: clamp(30px, 7vw, 56px); }
}

/* the camera, centred in the top bezel */
.appshot::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  z-index: 2;
}
.appshot > img { width: 100%; height: auto; border-radius: 9px; }

/* ------------------------------------------------------------- pm app ---
   The project manager rendered LIVE inside the tablet, so its cards answer
   the pointer instead of being a picture of cards.

   SEAM WORTH KNOWING: this is a hand-built replica of app/styles.css, not the
   product's own CSS. The marketing page ships zero framework JS on purpose,
   so it cannot mount the React dashboard. That means the two can drift: if the
   real board changes, this has to be changed to match, or the site starts
   advertising a product that no longer looks like this. */

.pmapp {
  border-radius: 9px;
  background: #050506;
  padding: 14px;
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
  overflow: hidden;
}
.pmapp-lab, .pmapp-kicker, .pmapp-s, .pmapp-po, .pmapp-signout {
  font-family: var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* command bar */
.pmapp-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012) 55%, transparent),
    rgba(10, 10, 14, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 0 #101116,
    0 2px 0 #101116,
    0 3px 0 #101116,
    0 4px 0 #101116,
    0 5px 0 #101116,
    0 6px 0 #101116,
    0 14px 22px -8px rgba(0, 0, 0, 0.85);
}
.pmapp-logo { height: 15px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.pmapp-spacer { flex: 1; }
.pmapp-seg { padding: 4px 8px; border-radius: 999px; color: var(--mute); white-space: nowrap; }
.pmapp-seg b { color: rgba(245, 245, 240, 0.4); font-weight: 400; margin-left: 2px; }
.pmapp-on { background: rgba(255, 255, 255, 0.09); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.pmapp-on b { color: rgba(255, 255, 255, 0.75); }
.pmapp-search, .pmapp-pill {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: var(--dim);
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.pmapp-search { min-width: 110px; }

/* readouts */
.pmapp-readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.4fr;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028) 50%, rgba(255, 255, 255, 0.012));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 0 #131419,
    0 2px 0 #131419,
    0 3px 0 #131419,
    0 4px 0 #131419,
    0 5px 0 #131419,
    0 6px 0 #131419,
    0 7px 0 #131419,
    0 8px 0 #131419,
    0 18px 28px -10px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.pmapp-cell { padding: 11px 13px 12px; border-left: 1px solid rgba(245, 245, 240, 0.07); display: flex; flex-direction: column; gap: 3px; }
.pmapp-cell:first-child { border-left: 0; }
.pmapp-lab { font-size: 6.5px; color: rgba(245, 245, 240, 0.38); }
.pmapp-v { font-size: 26px; font-weight: 200; letter-spacing: -0.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pmapp-d { font-size: 8px; color: var(--mute); }
.pmapp-mix { display: flex; gap: 2px; height: 4px; margin-top: 3px; }
.pmapp-mix i { border-radius: 999px; display: block; }
.pmapp-key { display: flex; flex-wrap: wrap; gap: 8px; font-size: 8px; color: var(--mute); margin-top: 2px; }
.pmapp-key span { display: inline-flex; align-items: center; gap: 4px; }
.pmapp-key i { width: 4px; height: 4px; border-radius: 999px; display: inline-block; }
.pmapp-key b { color: #fff; font-weight: 500; }

/* resume */
.pmapp-resume {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(90, 49, 244, 0.3);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(90, 49, 244, 0.14), rgba(90, 49, 244, 0.03) 52%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 0 #131419,
    0 2px 0 #131419,
    0 3px 0 #131419,
    0 4px 0 #131419,
    0 5px 0 #131419,
    0 6px 0 #131419,
    0 7px 0 #131419,
    0 8px 0 #131419,
    0 18px 28px -10px rgba(0, 0, 0, 0.85),
    0 26px 50px -18px rgba(90, 49, 244, 0.45);
}
.pmapp-resume-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmapp-kicker { font-size: 6.5px; color: rgba(196, 167, 255, 0.9); }
.pmapp-resume-n { font-size: 15px; font-weight: 300; letter-spacing: -0.02em; color: #fff; }
.pmapp-open {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pmapp-head { margin: 14px 2px 8px; font-size: 12px; font-weight: 500; color: #fff; letter-spacing: -0.015em; }
.pmapp-head b { font-family: var(--mono); font-size: 7px; color: var(--dim); font-weight: 400; margin-left: 5px; letter-spacing: 0.16em; }

/* The board assembles on reveal: armed by JS before the section is reached,
   released on a per-card stagger driven by --i. */
.pmapp.is-armed .pmapp-card {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
}
.pmapp.is-armed.is-in .pmapp-card {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i) * 55ms + 120ms);
}
.pmapp.is-armed .pmapp-readout,
.pmapp.is-armed .pmapp-resume { opacity: 0; transform: translateY(10px); }
.pmapp.is-armed.is-in .pmapp-readout,
.pmapp.is-armed.is-in .pmapp-resume {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.pmapp.is-armed.is-in .pmapp-resume { transition-delay: 90ms; }

/* the rack */
.pmapp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pmapp-card {
  display: flex;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0.014));
  /* Real thickness. The stack of hard 0-blur shadows is the card's SIDE: each
     is painted in the card's own space before the board is leaned, so a
     straight downward stack comes out as the extruded edge. The blurred one at
     the end is the shadow that edge throws onto the board. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 0 #131419,
    0 2px 0 #131419,
    0 3px 0 #131419,
    0 4px 0 #131419,
    0 5px 0 #131419,
    0 6px 0 #131419,
    0 7px 0 #131419,
    0 8px 0 #131419,
    0 14px 22px -8px rgba(0, 0, 0, 0.85);
}
/* the real door plate, multiplied into its paint, same as the product */
.pmapp-door {
  position: relative;
  flex: none;
  width: 30px;
  height: 50px;
  border-radius: 3px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.95);
}
.pmapp-door img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
@supports not (mix-blend-mode: multiply) { .pmapp-door img { display: none; } }
.pmapp-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pmapp-n { font-size: 11px; font-weight: 500; color: #fff; letter-spacing: -0.01em; display: flex; align-items: center; gap: 5px; }
.pmapp-s { font-size: 6px; font-style: normal; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pmapp-s::before { content: ""; width: 3px; height: 3px; border-radius: 999px; background: currentColor; }
.pmapp-dr { color: rgba(245, 245, 240, 0.42); }
.pmapp-q { color: #c3a6ff; }
.pmapp-o { color: #5ee3a0; }
.pmapp-po { font-size: 7px; color: var(--mute); letter-spacing: 0.06em; }
.pmapp-none { color: var(--dim); }
.pmapp-f { font-size: 7px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* dock */
.pmapp-dock { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.pmapp-avatar {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  font-size: 8px;
  font-weight: 600;
  color: var(--bone);
}
.pmapp-signout { font-size: 6.5px; color: var(--dim); }
/* The ONE live control on the preview. Everything else on the board is a
   picture; this is a key you can press, so it is the only thing that lights
   up, lifts, and travels under the cursor. */
.pmapp-new {
  position: relative;
  overflow: hidden;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8163ff, #5a31f4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 1px 0 #3a1aa8,
    0 2px 0 #3a1aa8,
    0 3px 0 #3a1aa8,
    0 4px 0 #3a1aa8,
    0 5px 0 #3a1aa8,
    0 6px 0 #3a1aa8,
    0 12px 20px -8px rgba(0, 0, 0, 0.85),
    0 18px 34px -14px rgba(90, 49, 244, 0.7);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease), filter 0.2s var(--ease);
}
.pmapp-new svg { width: 10px; height: 10px; }
/* a specular sweep that crosses the key on hover */
.pmapp-new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
  transform: translateX(-140%);
  transition: transform 0.6s var(--ease);
}
.pmapp-new:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 0 #3a1aa8,
    0 2px 0 #3a1aa8,
    0 3px 0 #3a1aa8,
    0 4px 0 #3a1aa8,
    0 5px 0 #3a1aa8,
    0 6px 0 #3a1aa8,
    0 7px 0 #3a1aa8,
    0 8px 0 #3a1aa8,
    0 18px 28px -8px rgba(0, 0, 0, 0.9),
    0 26px 48px -14px rgba(90, 49, 244, 0.85);
}
.pmapp-new:hover::after { transform: translateX(140%); }
.pmapp-new:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 #3a1aa8,
    0 2px 0 #3a1aa8,
    0 8px 14px -8px rgba(0, 0, 0, 0.8);
}

@media (max-width: 1100px) {
  .pmapp { font-size: 9px; }
  .pmapp-grid { grid-template-columns: repeat(2, 1fr); }
  .pmapp-readout { grid-template-columns: repeat(2, 1fr); }
  .pmapp-seg:not(.pmapp-on) { display: none; }
}
/* The lean costs vertical room and legibility, and there is none to spare
   below a desktop. It sits flat from here down. */
@media (max-width: 1100px) {
  .appshot {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.6),
      0 40px 90px -28px rgba(90, 49, 244, 0.4);
  }
}
@media (max-width: 640px) { .appshot-tilt { display: none; } }

.hero-alt { margin-top: 18px; font-size: var(--t-small); }
.hero-alt a {
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule-hot);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.hero-alt a:hover { color: var(--bone); text-decoration-color: var(--salmon); }