/* ============================================================================
   /what-is-makeway — the explainer the hero link points at.

   Standalone page, same shell as /interest (logotype-only masthead, legal
   footer, black ground) so the two read as one family. Deliberately not sharing
   interest.css: that file is mostly Leaflet and form rules, and coupling an
   explainer page to a map page would be worse than a little duplication.

   Copy is governed by brand/foundation/ — Product Truth & Claims first
   (mechanism before qualification), then the Brand Foundation refusals. The
   permit-vs-space math is retired and does not appear here.
   ========================================================================= */

@font-face { font-family:'Switzer'; font-weight:400; font-display:swap;
             src:url('../fonts/Switzer-Regular.otf')  format('opentype'); }
@font-face { font-family:'Switzer'; font-weight:500; font-display:swap;
             src:url('../fonts/Switzer-Medium.otf')   format('opentype'); }
@font-face { font-family:'Switzer'; font-weight:600; font-display:swap;
             src:url('../fonts/Switzer-Semibold.otf') format('opentype'); }

:root {
  --wm-bg:#000;
  --wm-panel:#0d0d0d;
  --wm-line:#1f1f1f;
  --wm-ink:#ededed;        /* --text-primary */
  --wm-body:#d7d7d7;
  --wm-muted:#b3b3b3;      /* --text-secondary */
  --wm-dim:#888;           /* --text-search */
  --wm-accent:#3084d5;     /* --mw-900. The single brand-colour moment on the
                              page: the step numerals and nothing else. */
  --wm-accent-hi:#469bee;
}

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

.wm-body {
  margin:0; background:var(--wm-bg); color:var(--wm-ink);
  font-family:'Switzer',-apple-system,"Helvetica Neue",Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.wm-wrap { max-width:1100px; margin:0 auto; padding:0 26px; }

/* ---- masthead: the logotype is the only chrome, matching /interest ---- */
.wm-mast { padding:22px 26px; }
.wm-mast a { display:inline-block; border-radius:4px; }
.wm-wordmark { display:block; width:160px; height:auto; }

/* ---- the answer, first thing on the page ---- */
/* Louder than a caption, and it shines once when you reach it. The sheen is a
   single specular pass over the letterforms, fired by an IntersectionObserver the
   first time the line enters view and never again — a loop would turn a moment
   into decoration. Base colour is legible on its own, so JS off, observer missing
   or reduced-motion set all degrade to plain bright type. */
.wm-eyebrow {
  margin:0 0 20px; font-size:12.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:#c8ccd0;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .wm-eyebrow {
    background:linear-gradient(100deg,#c8ccd0 0%,#c8ccd0 38%,#ffffff 50%,#c8ccd0 62%,#c8ccd0 100%);
    background-size:280% 100%; background-position:120% 0;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .wm-eyebrow.is-lit { animation:wm-shine 1.6s cubic-bezier(.35,0,.2,1) .12s 1 both; }
}
@keyframes wm-shine {
  from { background-position:120% 0; }
  to   { background-position:-30% 0; }
}
/* The hero backdrop, carried over from the Paper file. A real photograph (Canon
   5D Mk IV, Aug 2022) at 12%, which is the opacity Keven set there. At that
   value the brightest pixel renders at 31 of 255, so it reads as texture behind
   the type rather than as a picture, and the copy needs no scrim to stay legible.
   Full-bleed via 100vw rather than restructuring the markup; safe because
   .wm-body already clips overflow-x. isolation:isolate keeps the z-index:-1
   layer inside this section instead of dropping behind the page. */
.wm-head { padding:104px 0 100px; text-align:center; position:relative; isolation:isolate; }
.wm-head::before {
  content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:50%; transform:translateX(-50%); width:100vw;
  background-image:url('../images/hero-what-is-makeway.jpg');
  background-image:image-set(url('../images/hero-what-is-makeway.webp') type('image/webp'),
                             url('../images/hero-what-is-makeway.jpg') type('image/jpeg'));
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:.12;
}
@media (max-width:560px) { .wm-head { padding:68px 0 64px; } }
.wm-head h1 {
  margin:0 auto 20px; max-width:21ch;
  font-weight:600; font-size:clamp(29px,4.2vw,50px); line-height:1.08;
  letter-spacing:-.024em; text-wrap:balance;
}
.wm-lede {
  margin:0 auto; max-width:56ch; color:var(--wm-body);
  font-size:clamp(16px,1.5vw,18px); line-height:1.7; text-wrap:pretty;
}

/* ---- the mechanism, in the order it happens ----
   Three app frames, no numerals: the icons and the reading order carry the
   sequence, and three numbered chips above three phones was one label too many. */
.wm-steps {
  display:grid; grid-template-columns:repeat(3,1fr); gap:38px;
  padding:44px 0 8px;
}
.wm-step { display:flex; flex-direction:column; min-width:0; }

/* No glow behind the phones. Two attempts at one both landed below the threshold
   where it was visible on a normal display — blur spreads the alpha so far that a
   .30 core renders around 5-10% effective — and the layers overflowed their
   columns badly enough to put a horizontal scrollbar on the page between 861px
   and 1000px. Invisible and load-bearing in the wrong direction, so it is gone.
   The mockups carry real alpha and sit on their own black; they do not need it. */
.wm-screen { position:relative; margin-bottom:24px; }
.wm-screen img { position:relative; z-index:1; display:block; width:100%; height:auto; }

.wm-steplbl { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
/* fixed slot so the three headings start on the same x regardless of icon aspect */
/* White, not blue: the accent is spent on the shine and the map pins inside the
   screenshots, and three blue marks in a row started competing with them. */
.wm-ico {
  width:21px; height:21px; flex:0 0 auto; color:var(--wm-ink);
  display:flex; align-items:center; justify-content:center;
}
.wm-ico svg { display:block; width:100%; height:100%; }

/* Lucide icons (ISC): map-pin-plus, radio, route. This site has no bundler, so
   the Lucide Animated React components could not ship as components; the
   geometry and the motion below are theirs, ported to keyframes with the
   registry timings unchanged. Trigger is hover, their native behaviour, on the
   whole step rather than the 21px mark so it is findable, plus a one-shot when
   the step scrolls in, because hover never fires on touch. At rest each icon
   sits fully drawn, so no-JS and reduced-motion both get a plain static icon. */
.wm-drw { stroke-dasharray:1; stroke-dashoffset:0; }

@keyframes wm-ico-draw {
  from { stroke-dashoffset:1; opacity:0; }
  to   { stroke-dashoffset:0; opacity:1; }
}
@keyframes wm-ico-lift {
  0%   { transform:translateY(0); }
  60%  { transform:translateY(-18%); }
  100% { transform:translateY(-11%); }
}
/* the arc pairs come back 0.1s apart, which is Lucide's i * 0.1 stagger */
@keyframes wm-ico-wave-in  { 0% { opacity:1; } 43%   { opacity:0; }                 100% { opacity:1; } }
@keyframes wm-ico-wave-out { 0% { opacity:1; } 37.5% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } }

/* map-pin-plus: the pin lifts and holds, then the plus redraws, upright first */
.wm-ico--pin svg { transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.wm-step:hover .wm-ico--pin svg,
.wm-ico--pin.is-playing svg    { animation:wm-ico-lift .5s cubic-bezier(.2,.7,.3,1) forwards; }
.wm-step:hover .wm-bar-v,
.wm-ico.is-playing .wm-bar-v   { animation:wm-ico-draw .2s ease-out .3s backwards; }
.wm-step:hover .wm-bar-h,
.wm-ico.is-playing .wm-bar-h   { animation:wm-ico-draw .2s ease-out .6s backwards; }

/* radio: the waves drop out and spring back, inner pair leading */
.wm-step:hover .wm-wave--in,
.wm-ico.is-playing .wm-wave--in  { animation:wm-ico-wave-in .7s cubic-bezier(.2,.7,.3,1); }
.wm-step:hover .wm-wave--out,
.wm-ico.is-playing .wm-wave--out { animation:wm-ico-wave-out .8s cubic-bezier(.2,.7,.3,1); }

/* route: both stops draw, then the line runs between them */
.wm-step:hover .wm-node,
.wm-ico.is-playing .wm-node    { animation:wm-ico-draw .3s ease-out .1s backwards; }
.wm-step:hover .wm-line,
.wm-ico.is-playing .wm-line    { animation:wm-ico-draw .7s ease-out .5s backwards; }
.wm-step h2 {
  margin:0; font-size:17.5px; font-weight:600; letter-spacing:-.012em; line-height:1.3;
  text-wrap:balance;
}
.wm-step p { margin:0; color:var(--wm-muted); font-size:15px; line-height:1.7; }
.wm-micro { margin:9px 0 0 !important; color:var(--wm-dim); font-size:13.5px; }

/* ---- the summary, the one place type gets loud ---- */
.wm-pull { padding:72px 0 64px; text-align:center; }
.wm-pullline {
  margin:0 0 15px; font-size:clamp(23px,3vw,34px); font-weight:600;
  line-height:1.2; letter-spacing:-.022em; color:var(--wm-ink);
}
.wm-pullsub {
  margin:0 auto; max-width:52ch; color:var(--wm-body);
  font-size:clamp(15.5px,1.4vw,17px); line-height:1.75; text-wrap:pretty;
}

/* ---- section two's thesis. The three principles below it are equal to each
   other on purpose; the hierarchy comes from this statement sitting above
   them, not from ranking the rows. ---- */
.wm-statement {
  padding:62px 0 40px; text-align:center; border-top:1px solid var(--wm-line);
}
.wm-statement h2 {
  margin:0; font-size:clamp(25px,3.4vw,40px); font-weight:600;
  line-height:1.18; letter-spacing:-.024em; text-wrap:balance;
}

/* ---- definition bands: heading left, prose right ----
   An editorial two-column rather than another centred stack, so the page has a
   spine instead of a single ribbon down the middle. */
.wm-band {
  display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:24px 56px; padding:42px 0; border-top:1px solid var(--wm-line);
}
.wm-band h3 {
  margin:0; font-size:clamp(17px,1.8vw,20px); font-weight:600;
  letter-spacing:-.014em; line-height:1.28; text-wrap:balance;
}
.wm-band .wm-prose { max-width:60ch; }
.wm-band p { margin:0 0 15px; color:var(--wm-body); font-size:16px; line-height:1.75; }
.wm-band p:last-child { margin-bottom:0; }
.wm-band .wm-quiet { color:var(--wm-muted); font-size:15px; }

/* The /interest link. Same draw-in underline as the hero's "What is Makeway?",
   plus the circular arrow chip the rest of the site uses on its buttons. White
   plate, black arrow: on a black page that is the affirmative direction, and it
   keeps the chip from reading as another ghost outline. */
.wm-next { display:inline-flex; align-items:center; gap:14px; text-decoration:none;
           color:var(--wm-ink); }
.wm-next-label {
  position:relative; display:inline-block; padding-bottom:4px;
  font-size:16px; font-weight:500;
}
.wm-next-label::before,
.wm-next-label::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; }
.wm-next-label::before { background:rgba(255,255,255,.24); }
.wm-next-label::after  { background:var(--wm-accent-hi); transform:scaleX(0); transform-origin:left;
                         transition:transform .34s cubic-bezier(.2,.7,.3,1); }
.wm-next:hover .wm-next-label::after,
.wm-next:focus-visible .wm-next-label::after { transform:scaleX(1); }
.wm-next-arrow {
  width:30px; height:30px; border-radius:999px; flex:0 0 auto;
  background:#fff; color:#000;
  display:flex; align-items:center; justify-content:center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
/* the arrowhead pulls the eye right, so notch the glyph a hair left to centre it
   optically — same correction hero.css makes on the Webflow arrow chips */
.wm-next-arrow svg { display:block; width:17px; height:17px; transform:translateX(-.5px); }
.wm-next:hover .wm-next-arrow { transform:translateX(3px); }

/* The chip hangs outside the centring rather than sitting inside it. Centring
   label + gap + chip as one box pushes the words left of true centre, so they
   stop lining up with the paragraph above. Pulling the chip's own width back out
   of the flow (30px chip + 14px gap = 44px) makes the flex box measure exactly
   the label: the label centres against the paragraph, and the chip simply sits
   next to it. Below 561px the label wraps to the full column, so the chip goes
   back into the flow instead of overhanging off-screen. */
@media (min-width:561px) { .wm-next-arrow { margin-right:-44px; } }
@media (hover:none) { .wm-next-label::before { background:rgba(255,255,255,.4); } }

/* ---- Hoboken gets its own moment rather than a row alongside the principles.
   It is origin and ambition in one breath, not a third rule about the product. */
.wm-place {
  padding:58px 0 4px; text-align:center; border-top:1px solid var(--wm-line);
}
.wm-place h2 {
  margin:0 auto 16px; max-width:26ch; font-size:clamp(20px,2.3vw,27px); font-weight:600;
  letter-spacing:-.018em; line-height:1.26; text-wrap:balance;
}
.wm-place p {
  margin:0 auto; max-width:56ch; color:var(--wm-body); font-size:16px; line-height:1.75;
}
.wm-place p + p { margin-top:20px; }

/* ---- close: the app is live, so the page ends at the stores ---- */
/* No rule above this one. The link out to /interest is the last beat of the
   Hoboken section, and a divider under it read as a second, competing underline
   right beneath the link's own. Whitespace carries the break. */
.wm-close { padding:64px 0 12px; text-align:center; }
.wm-close h2 {
  margin:0 0 22px; font-size:clamp(22px,2.6vw,30px); font-weight:600;
  letter-spacing:-.018em; text-wrap:balance;
}
/* Equal height IS equal size: both plates fill their viewBox edge to edge
   (Apple 119.66x40, Google 180x53.33), so the width difference is pure aspect
   ratio. Never scale them to matching widths. */
.wm-badges { display:flex; gap:14px; align-items:center; justify-content:center;
             flex-wrap:wrap; }
.wm-badge { display:block; line-height:0; border-radius:8px; }
.wm-badge img { display:block; height:44px; width:auto; }

.wm-sign {
  margin:44px 0 0; text-align:center; color:var(--wm-dim);
  font-size:14px; font-style:italic; letter-spacing:.01em;
}

/* ---- footer, identical to /interest ---- */
.wm-foot {
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  padding:44px 26px 40px; border-top:1px solid var(--wm-line); margin-top:56px;
}
.wm-foot a { color:var(--wm-dim); font-size:12.5px; text-decoration:none; }
.wm-foot a:hover { color:var(--wm-body); }

a:focus-visible, button:focus-visible {
  outline:2px solid var(--wm-accent-hi); outline-offset:3px;
}

@media (max-width:860px) {
  /* one column, and the phone stops being full-bleed so it does not dominate */
  .wm-steps { grid-template-columns:1fr; gap:48px; padding-top:34px; }
  .wm-screen { max-width:300px; margin:0 auto 20px; }
  .wm-steplbl, .wm-step p { text-align:left; }
  .wm-band { grid-template-columns:1fr; gap:12px; padding:34px 0; }
}
@media (max-width:560px) {
  .wm-wrap { padding:0 22px; }
  .wm-head { padding:38px 0 40px; }
  .wm-pull { padding:46px 0 42px; }
  .wm-badges { gap:10px; }
  .wm-badge img { height:40px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; animation:none !important; }
  /* belt and braces: never leave the eyebrow mid-gradient with transparent fill */
  .wm-eyebrow { background:none; -webkit-text-fill-color:#c8ccd0; color:#c8ccd0; }
}