/* ==========================================================================
   MORROW — direction layer
   Theme: money that arrives before you have to go and find it.
   Villain: the chase — the follow-up email, the deadline, the scramble.
   Through-line: the ribbon (already page-level here) — it ends tied into
            the M of the wordmark, so the thread literally becomes the logo.
   The gap this closes: a neutral UI sans was carrying the display, every
            section moved with the same fade-up, and no claim was demonstrated.
   ========================================================================== */

@font-face{font-family:Disp;src:url(fonts/FrankRuhl.ttf)format('truetype');
  font-weight:300 900;font-display:swap}

:root{
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --e3:cubic-bezier(.16,1,.3,1);
}

/* ── a display face with a point of view ──────────────────────────────── */
/* Instrument Sans keeps every job a UI face is good at; the headline voice
   belongs to a high-contrast serif, which is what nothing else in this
   category is doing. */
.disp,h1,h2.disp,.plan h2,.quote blockquote{
  font-family:Disp,Georgia,"Times New Roman",serif;
  font-weight:500; letter-spacing:-.018em; line-height:1.02;
}
h1.disp{font-size:clamp(38px,6.6vw,104px); line-height:.98; letter-spacing:-.026em}
.lede{font-size:clamp(15px,1.25vw,19px); line-height:1.66; max-width:52ch}

/* ── margins are real estate ──────────────────────────────────────────── */
.edge{
  position:fixed; top:0; bottom:0; width:clamp(16px,2.2vw,30px); z-index:70;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  pointer-events:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  color:rgba(20,20,20,.38);
}
.edge span{writing-mode:vertical-rl; white-space:nowrap}
.edge--l{left:0} .edge--r{right:0}
.edge--r span{transform:rotate(180deg)}
.baseline{
  position:fixed; left:clamp(16px,2.2vw,30px); right:clamp(16px,2.2vw,30px); bottom:12px; z-index:70;
  display:flex; align-items:center; gap:14px; pointer-events:none;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:rgba(20,20,20,.46);
}
.baseline__rule{flex:1; height:1px; background:currentColor; opacity:.22; position:relative}
.baseline__rule i{position:absolute; inset:0 auto 0 0; background:var(--btn); width:var(--prog,0%)}
.live-dot{width:5px;height:5px;border-radius:999px;background:var(--lime);display:inline-block;margin-right:7px;
  animation:blip 2.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
:root[data-theme="dark"] .edge,:root[data-theme="dark"] .baseline{color:rgba(246,239,230,.5)}
@media (max-width:1100px){.edge{display:none}.baseline{left:14px;right:14px}}

/* ══ MOTION ════════════════════════════════════════════════════════════
   Simple on purpose: one entrance, one easing, one duration. Direction is
   the only thing that varies, and it follows the section's own layout.
   Morrow's own site.js already runs the ribbon parallax and the counters —
   this only supplies the entrances it reveals.
   ────────────────────────────────────────────────────────────────────── */
:root{--mo-e:cubic-bezier(.22,.9,.24,1); --mo-d:.8s}

.rv{opacity:0; transform:translateY(24px)}
.rvl{opacity:0; transform:translateX(-28px)}
.rvr{opacity:0; transform:translateX(28px)}
.rv.in,.rvl.in,.rvr.in{opacity:1; transform:none;
  transition:opacity var(--mo-d) var(--mo-e), transform var(--mo-d) var(--mo-e)}
.rv.d1.in{transition-delay:.08s}
.rv.d2.in{transition-delay:.16s}
.rv.d3.in{transition-delay:.24s}
.rv.d4.in{transition-delay:.32s}

/* grouped children arrive one after another rather than as a slab */
.in > .card, .in > .col, .in > li, .in > .tile{
  animation:moRise var(--mo-d) var(--mo-e) both;
  animation-delay:calc(var(--i,0) * 70ms)}
@keyframes moRise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* ── masked line reveals: the type is set, not faded ──────────────────
   story.js splits these into lines and gives each one an overflow mask,
   so a headline arrives the way it would in a title sequence. */
[data-split]{opacity:1}
.sp-line{overflow:hidden}
.sp-u{transition:transform 1.05s var(--mo-e); transition-delay:calc(var(--i,0) * 78ms)}

/* site.js owns the ribbon transform for its parallax — never write transform
   on .rib from here, or the two fight every frame and the ribbon tears. */
.is-scrubbing .rib{will-change:transform}

/* interactive states — short, eased, no bounce */
.btn,.plan .card,.foot a{transition:transform .26s var(--mo-e), background .26s var(--mo-e),
  color .26s var(--mo-e), border-color .26s var(--mo-e)}
.btn:hover{transform:translateY(-2px)}

/* promote scrubbed layers only while the page is actually moving */

@media (prefers-reduced-motion:reduce){
  .rv,.rvl,.rvr,h1.disp{opacity:1; transform:none; transition:none}
  .in > .card,.in > .col,.in > li,.in > .tile{animation:none}
  .btn:hover{transform:none}
}

/* the primary action is drawn toward the cursor, gently */
[data-magnetic]{transition:transform .32s var(--mo-e)}
@media (hover:none){ [data-magnetic]{transform:none !important} }

/* numbers that count up read as measured rather than typed */
.tally{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .sp-u{transform:none !important; transition:none}
  [data-magnetic]{transform:none !important}
}

/* ══ LEGIBILITY PASS ═══════════════════════════════════════════════════════
   Everything below the headlines was set at product-screenshot sizes — 9 to
   11px — which is fine inside a real app UI and unreadable as marketing you
   scroll past. Sizes only; no copy, colour or layout changes here. */

/* A serif at line-height 1.02 hangs its descenders below the split mask, and
   the mask clips them. Give the display face room inside its own mask. */
.disp .sp-mask{padding-block:.16em; margin-block:-.16em}

.eyebrow{font-size:12.5px; letter-spacing:.18em}
.stat{font-size:11px; letter-spacing:.07em}
.statv{font-size:clamp(19px,2vw,28px)}
.crow .t{font-size:19px}

/* the insights wall — three cards now, each with one figure that carries it */
.dcards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px)}
.dcard{padding:clamp(22px,2vw,30px)}
.dcard .h{font-size:15px; line-height:1.4; color:#CFCBC4; font-weight:600}
.dcard .foot{font-size:12.5px}
.dcard > div[style*="10.5px"]{font-size:13px !important; line-height:1.6 !important}
.dcard div[style*="font-size:11px"]{font-size:13px !important}
.dcard [style*="font-size:clamp(18px"]{font-size:clamp(26px,2.6vw,36px) !important}
.dcard [style*="font-size:clamp(22px"]{font-size:clamp(30px,3.2vw,44px) !important}
.dcard svg text{font-size:15px}

/* the trust row and the secure card in CALM */
.trust div{font-size:12.5px; letter-spacing:.12em}
.secure .r{font-size:14px}

/* The CALM headline is authored as two lines and the column was narrow enough
   to break it into three; the third fell out of its own grid row and the
   section clipped it. Give the column the width the type actually needs. */
.calm .grid{grid-template-columns:minmax(min-content,22%) minmax(230px,25%) auto 1fr; align-items:center}
.calm h2.disp{white-space:nowrap; font-size:clamp(30px,3.6vw,50px)}

/* ══ THE ARRIVAL ═══════════════════════════════════════════════════════════
   Three bands of the brand blue drawing off to the right — the ribbon that
   runs the length of the page, used once as the way in. The wordmark leaves
   with the first band so the two beats read as one gesture. */
.gate{position:fixed; inset:0; z-index:200; pointer-events:none; overflow:hidden;
  display:grid; place-items:center; background:transparent}
.gate__band{position:absolute; left:-2px; right:-2px; height:34%; background:var(--blue);
  will-change:transform; backface-visibility:hidden}
.gate__band:nth-child(1){top:-1%}
.gate__band:nth-child(2){top:33%}
.gate__band:nth-child(3){top:67%; height:35%}
.gate__mark{position:relative; z-index:2; display:flex; align-items:center; gap:10px;
  font-family:Disp,Georgia,serif; font-weight:600; letter-spacing:-.02em; color:#fff;
  font-size:clamp(30px,4vw,58px)}
.gate__mark b{width:.30em; height:.30em; border-radius:999px; background:var(--lime); display:block}

html.gate-open .gate__mark{animation:moMark .5s cubic-bezier(.6,0,.3,1) forwards}
html.gate-open .gate__band{animation:moBand .78s cubic-bezier(.76,0,.2,1) forwards}
html.gate-open .gate__band:nth-child(2){animation-delay:.09s}
html.gate-open .gate__band:nth-child(3){animation-delay:.18s}
html.gate-done .gate{display:none}
@keyframes moBand{to{transform:translate3d(101%,0,0)}}
@keyframes moMark{to{opacity:0; transform:translateX(34px)}}
html.gate-arm body,html.gate-open body{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .gate{display:none !important} }

/* ══ KEYBOARD ══════════════════════════════════════════════════════════════
   One input had a focus style and nothing else did. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--btn); outline-offset:3px; border-radius:3px}
.paid :focus-visible,.calm :focus-visible,.story :focus-visible{outline-color:var(--lime)}
.btn:focus-visible,.pill:focus-visible{outline-offset:4px}

/* ── the M in "made for the way you work" ─────────────────────────────
   It was a solid near-black slab laid on top of a photograph, and it
   collided with the right-hand chrome. It now embosses INTO the picture
   and sits clear of the rail. */
.made .serifM{
  right:clamp(52px,6vw,104px) !important;
  font-size:clamp(160px,26vw,380px) !important;
  color:#FFFFFF !important;
  opacity:.16;
  mix-blend-mode:overlay;
  letter-spacing:-.03em;
  text-shadow:0 2px 40px rgba(0,0,0,.25);
  transition:opacity 1.2s var(--mo-e), transform 1.2s var(--mo-e);
  transform:translateY(14px);
}
.made.in .serifM,.made .serifM{transform:none}
@supports not (mix-blend-mode:overlay){ .made .serifM{opacity:.10} }
@media (max-width:820px){ .made .serifM{right:14px !important; opacity:.12} }
@media (prefers-reduced-motion:reduce){ .made .serifM{transition:none; transform:none} }