/* ricordo build v4.2 · 2026-06-21 */
/* ============ TOKENS ============ */
:root{
  --paper:#fafaf9;
  --paper-deep:#f0f1ee;
  --ink:#1a2d45;
  --steel:#1b4f72;
  --ink-soft:#1b4f72;
  --warm-amber:#f4a261;
  --sepia:#8A7A66;
  --sepia-line:#C3B7A2;
  --sepia-faint:#E2DACB;
  --rust:#9e4a0a;
  --rust-deep:#7e3a08;
  --amber:#e8920a;
  --amber-glow:rgba(232,146,10,.45);
  --soil:#262019;
  --soil-2:#1C1712;
  --deep-navy:#10243a;
  --deep-navy-2:#0b1a2c;
  --paper-on-soil:#EFE8DA;
  --display:'Fraunces',serif;
  --body:'Newsreader',serif;
  --ui:'Space Grotesk',sans-serif;
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.125rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--amber-glow);color:var(--ink)}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--ui);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rust);
  font-weight:500;
}
h1,h2,h3{font-family:var(--display);font-weight:560;line-height:1.08;letter-spacing:-.01em}
.btn{
  font-family:var(--ui);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.04em;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.78em 1.5em;
  white-space:nowrap;
  border-radius:999px;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  cursor:pointer;border:none;
}
.btn-primary{background:var(--rust);color:var(--paper)}
.btn-primary:hover{background:var(--rust-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--sepia-line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--sepia)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:4px}

/* ============ NAV ============ */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,249,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sepia-faint);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
}
.logo svg{width:34px;height:34px}
.logo span{
  font-family:var(--display);
  font-size:1.42rem;font-weight:640;
  letter-spacing:.02em;
}
/* enlarge the lowercase letters; R slightly larger so it still leads, baselines aligned */
.logo .wm{display:inline-flex;align-items:baseline}
.logo .wm-r{font-size:1.84rem}
.logo .wm{font-size:1.74rem}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
.nav-links a:not(.btn){
  font-family:var(--ui);font-size:.82rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);
  transition:color .15s;
}
.nav-links a:not(.btn):hover{color:var(--rust)}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:0;text-align:center}
.hero h1{
  font-size:clamp(3.2rem,8.5vw,6.8rem);
  font-weight:560;
}
.hero h1 .dot{color:var(--rust)}
.hero p.lede{
  max-width:34em;margin:0 auto;
  font-size:clamp(1.43rem,2vw,1.63rem);
  color:var(--ink-soft);
}
.hero p.lede-sub{margin-top:.75rem}
.hero-cta{margin-top:2rem;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* image tucks just under the title; the subline overlays its sky (desktop) */
.hero-city{position:relative;margin-top:1.6rem}
.hero-sub{
  position:absolute;left:0;right:0;top:3.2rem;z-index:6;
  text-align:center;padding:0 24px;
}
.hero-sub .lede-sub{margin-top:.75rem}
.hero-city .hero-fallback{width:100%;height:auto;display:block}
.hero-note{
  font-family:var(--ui);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sepia);text-align:center;
  padding:14px 24px 10px;
}

/* hero render stage: image + percentage-mapped overlay */
.hero-stage{position:relative;display:block;line-height:0}
.hero-stage .hero-render{position:relative;z-index:1;width:100%;height:auto;display:block}
.marker-layer{position:absolute;inset:0;z-index:3;pointer-events:none;line-height:1.2}

/* marker anchor point = the street-level spot. Label floats above it,
   a dotted stem drops down to a small glowing foot dot on the street. */
.marker{
  position:absolute;
  --float:84px;            /* how high the label hovers above the spot */
  opacity:0;animation:mkRise .7s ease forwards;
}
.mk1{animation-delay:.5s}
.mk2{animation-delay:.85s}
.mk3{animation-delay:1.2s}

/* the label, centered horizontally on the spot, floating above it */
.mk-tag{
  position:absolute;left:0;top:calc(-1 * var(--float));
  transform:translate(-50%,-100%);
  font-family:var(--ui);font-size:.78rem;font-weight:500;
  color:var(--ink);white-space:nowrap;
  background:#fff;border:1px solid var(--sepia-line);border-radius:999px;
  padding:.5em 1.05em;
  box-shadow:0 8px 22px -10px rgba(26,45,69,.45);
}
/* dotted leader line with slowly travelling dots, from label down to street spot */
.mk-stem{
  position:absolute;left:0;top:calc(-1 * var(--float));
  width:4px;height:var(--float);
  transform:translateX(-50%);
  background-image:radial-gradient(circle, #fff5f0 1.6px, transparent 2px);
  background-size:4px 7px;
  background-repeat:repeat-y;
  background-position:0 0;
  opacity:1;
  filter:drop-shadow(0 0 1.2px rgba(158,74,10,.9));
  animation:stemFlow 3.2s linear infinite;
}
@keyframes stemFlow{
  from{background-position:0 0}
  to{background-position:0 7px}
}
@media(prefers-reduced-motion:reduce){
  /* keep the dotted line visible, just stop the motion */
  .mk-stem{animation:none}
}
/* glowing dot sitting on the street-level spot */
.mk-foot{
  position:absolute;left:0;top:0;
  width:12px;height:12px;border-radius:50%;
  background:var(--rust);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 0 16px 5px rgba(232,146,10,.8);
}
@keyframes mkRise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .marker{animation:none;opacity:1}
}

/* ============ SECTION BASICS ============ */
section{padding:96px 0}
.sec-head{max-width:620px;margin-bottom:48px}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);margin-top:.5rem}
.sec-head p{margin-top:1rem;color:var(--ink-soft)}

/* ============ WHAT NOW (hook) ============ */
.hook{background:var(--paper-deep);border-top:1px solid var(--sepia-faint);border-bottom:1px solid var(--sepia-faint)}
.hook .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hook blockquote{
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:400;font-style:italic;
  line-height:1.3;
}
.hook blockquote strong{font-style:normal;font-weight:640;color:var(--rust)}
.hook .hook-body p+p{margin-top:1em}
.hook .hook-body .whatnow-pill{
  margin-top:1.6em;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--ui);font-weight:700;font-size:.95rem;letter-spacing:.06em;
  background:var(--ink);color:var(--paper);
  padding:.8em 1.6em;border-radius:999px;
}
.whatnow-pill .ping{
  width:10px;height:10px;border-radius:50%;background:var(--warm-amber);
  box-shadow:0 0 0 0 rgba(244,162,97,.7);
  animation:ping 1.9s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(244,162,97,.7);background:var(--amber)}
  60%{box-shadow:0 0 0 20px rgba(244,162,97,0)}
  100%{box-shadow:0 0 0 0 rgba(244,162,97,0);background:var(--warm-amber)}
}
@media(prefers-reduced-motion:reduce){.whatnow-pill .ping{animation:none}}
@media(max-width:860px){.hook .wrap{grid-template-columns:1fr;gap:36px}}

/* ============ PHONE + FEATURES ============ */
.product .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
@media(max-width:900px){.product .wrap{grid-template-columns:1fr;gap:48px}}
.phone{
  width:min(330px,86vw);margin:0 auto;
  background:#fff;
  border-radius:42px;
  border:1.5px solid var(--sepia-line);
  box-shadow:0 24px 60px -24px rgba(30,42,68,.28), 0 4px 14px rgba(30,42,68,.08);
  overflow:hidden;
  font-family:var(--ui);
}
.phone-top{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:18px 0 12px;border-bottom:1px solid var(--sepia-faint);
}
.phone-top svg{width:20px;height:20px}
.phone-top b{font-size:.8rem;letter-spacing:.3em;font-weight:700}
.radars{padding:14px 14px 6px;background:var(--paper)}
.radars-head{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 11px}
.radars-title{font-size:.96rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
.radars-count{font-size:.62rem;color:var(--sepia);letter-spacing:.12em;text-transform:uppercase}
.radar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.radar{
  position:relative;
  display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--sepia-faint);border-radius:13px;
  padding:.6em .8em;
}
.radar .r-ic{
  width:30px;height:30px;flex:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;background:var(--paper-deep);
}
.radar .r-name{flex:1;font-size:.85rem;font-weight:600;color:var(--ink)}
.radar .r-saved{
  font-size:.62rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  color:#2e7d52;background:rgba(46,125,82,.12);
  border-radius:999px;padding:.42em .72em;
}
.radar .r-badge{
  position:absolute;top:-7px;right:-7px;
  min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:#d8412f;color:#fff;
  font-size:.62rem;font-weight:700;line-height:1;
  border-radius:999px;border:2px solid #fff;
  box-shadow:0 1px 3px rgba(30,42,68,.22);
}
.phone-input{
  display:flex;align-items:center;gap:9px;
  padding:12px 14px 18px;background:var(--paper);
}
.phone-input .field{
  flex:1;font-size:.76rem;color:var(--sepia);
  border:1px solid var(--sepia-line);border-radius:999px;
  padding:.65em 1.1em;background:#fff;
}
.phone-input .wn{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;
  background:var(--warm-amber);color:var(--ink);border-radius:999px;
  padding:.7em 1em;white-space:nowrap;
}
.features{display:flex;flex-direction:column;gap:0}
.feature{
  padding:26px 0;
  border-top:1px solid var(--sepia-faint);
  display:grid;grid-template-columns:52px 1fr;gap:20px;
}
.feature:last-child{border-bottom:1px solid var(--sepia-faint)}
.feature .ic{width:44px;height:44px}
.feature h3{font-size:1.35rem;margin-bottom:.35rem}
.feature p{font-size:1.02rem;color:var(--ink-soft)}

/* ============ VIGNETTES ============ */
.vignettes{background:var(--paper-deep);border-top:1px solid var(--sepia-faint);border-bottom:1px solid var(--sepia-faint)}
.vig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:860px){.vig-grid{grid-template-columns:1fr}}
.vig{
  background:var(--paper);
  border:1px solid var(--sepia-line);
  border-radius:6px;
  padding:30px 28px 28px;
  position:relative;
  box-shadow:0 2px 0 var(--sepia-faint);
}
.vig::before{
  content:"";position:absolute;inset:7px;
  border:1px solid var(--sepia-faint);border-radius:3px;pointer-events:none;
}
.vig .time{
  font-family:var(--ui);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);font-weight:700;
}
.vig h3{font-size:1.45rem;margin:.6rem 0 .7rem}
.vig p{font-size:1rem;color:var(--ink-soft)}

/* ============ MANIFESTO TEASER ============ */
.manifesto{background:var(--paper-deep);border-top:1px solid var(--sepia-faint);border-bottom:1px solid var(--sepia-faint)}
.manifesto .wrap{max-width:780px;text-align:center}
.manifesto h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-top:.6rem}
.manifesto p{margin:1.3rem auto 0;color:var(--ink-soft);max-width:38em}
.manifesto .btn{margin-top:2rem}

/* ============ CROSS-SECTION + UNDERGROUND ============ */
.section-drawing{padding:96px 0 0;background:linear-gradient(var(--paper) 0%, var(--paper-deep) 55%, var(--deep-navy) 100%)}
.section-drawing .sec-head{margin:0 auto 8px;text-align:center;max-width:680px}
.cross{margin-top:24px;position:relative;display:block;line-height:0}
.cross .cross-fallback{width:100%;height:auto}
/* fade the bottom of the soil image straight into the dark-blue footer */
.cross::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:38%;
  background:linear-gradient(to bottom, rgba(16,36,58,0) 0%, var(--deep-navy) 88%);
  pointer-events:none;z-index:6;
}

footer{
  background:var(--deep-navy);
  color:#C7D2E0;
  padding:48px 0 36px;
  position:relative;
  margin-top:-2px;
}
.foot-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:44px}}
.foot-grid h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:#fff}
.foot-grid .sub{margin-top:.8rem;color:#90A2B8;max-width:30em}
.waitlist{margin-top:1.8rem;display:flex;gap:10px;max-width:440px}
.waitlist input{
  flex:1;font-family:var(--ui);font-size:.9rem;
  background:var(--deep-navy-2);color:#C7D2E0;
  border:1px solid #2a4258;border-radius:999px;
  padding:.85em 1.3em;
}
.waitlist input::placeholder{color:#6982a0}
.waitlist .btn-primary{flex-shrink:0}
.foot-right{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.socials{display:flex;gap:14px}
.socials a{
  width:42px;height:42px;border-radius:50%;
  border:1px solid #2a4258;
  display:grid;place-items:center;
  transition:border-color .15s, background .15s;
}
.socials a:hover{border-color:var(--amber);background:var(--deep-navy-2)}
.socials svg{width:17px;height:17px;fill:#C7D2E0}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-links a{
  font-family:var(--ui);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:#90A2B8;
}
.foot-links a:hover{color:var(--amber)}
.legal{
  margin-top:56px;padding-top:24px;
  border-top:1px solid #26405a;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--ui);font-size:.74rem;letter-spacing:.04em;color:#7188a3;
}
.legal a{color:#7188a3}
.legal a:hover{color:var(--amber)}

/* artwork slot image behaviour: img covers slot when present; spec shows when absent */
.img-slot{position:relative;overflow:hidden}
.img-slot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;z-index:2;
}
.ratio-wide-fig{aspect-ratio:16/10}
.pc-photo{position:relative;overflow:hidden}
.pc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.pc-photo .pc-trend,.pc-photo .pc-score{z-index:3}

/* hero render layering — fallback drawing only shows when render is absent */
.hero-fallback{display:block}
.hero-city:has(.hero-render) .hero-fallback{display:none}
.hero-city.has-render .hero-fallback{display:none}
.hero-stage:not(:has(.hero-render)) .marker-layer{display:none}

/* blend the hero render's paper edges into the page canvas */
.hero-stage:has(.hero-render)::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(to right, var(--paper) 0%, rgba(250,250,249,0) 7%, rgba(250,250,249,0) 93%, var(--paper) 100%),
    linear-gradient(to bottom, var(--paper) 0%, rgba(250,250,249,0) 10%, rgba(250,250,249,0) 90%, var(--paper) 100%);
}
/* optional: hide the four waypoint label cards (keep dots) if it feels crowded */
.hero-city.minimal-overlay .mk-tag{display:none}

/* cross-section: rendered image replaces the SVG when present */
.cross{position:relative}
.cross .cross-render{position:relative;z-index:1;width:100%;height:auto;display:block}
.cross.has-render .cross-fallback{display:none}
.cross:has(.cross-render) .cross-fallback{display:none}

/* cross-section logo overlay — visible by default; only hidden if image is absent */
.cross-stage{position:relative;display:block;line-height:0}
.src-layer{
  position:absolute;inset:0;z-index:5;
  opacity:1;pointer-events:none;
}
/* fade-in is a nicety, not a gate: animate from .92 so logos are essentially always shown */
.src-layer{animation:srcFade 1s ease .2s both}
@keyframes srcFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.src-layer{animation:none}}
/* genuine no-image edge case: onerror removes the img, then hide the layer */
.cross-stage:not(:has(.cross-render)) .src-layer{display:none}

/* source marker: the icon sits directly on the glowing dot, obscuring it */
.src{
  position:absolute;transform:translate(-50%,-50%);
  width:clamp(40px,4.6vw,68px);height:clamp(40px,4.6vw,68px);
  display:grid;place-items:center;
  background:var(--brand,#1a2d45);
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.92), 0 0 22px 4px rgba(232,146,10,.5), 0 4px 12px rgba(0,0,0,.4);
}
.src .src-icon{display:grid;place-items:center;width:100%;height:100%}
.src svg{display:block;width:58%;height:58%;fill:#fff}
/* text-lockup icons (BlogTO, Medium M) fill more of the disc */
.src[title="BlogTO"] svg,.src[title="Medium"] svg{width:82%;height:82%}

/* ===== homepage market band ===== */
.market-band{
  background:var(--ink);color:var(--paper-on-soil);
  padding:64px 0;text-align:center;
}
.market-band .market-line{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.35;color:#fff;
  max-width:18em;margin:0 auto;
}
.market-band .market-line em{font-style:italic;color:var(--amber)}
.market-band .market-kicker{
  display:block;
  margin-top:1.1em;
}
.market-band .market-link{
  display:inline-block;margin-top:1.4rem;
  font-family:var(--ui);font-size:.82rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--amber);
}
.market-band .market-link:hover{text-decoration:underline}

/* ============ MOBILE OVERLAY TUNING ============ */
/* On phones the hero/cross images scale down but the pinned overlays kept
   desktop sizing — labels collided and source icons crowded. Scale them to
   the image without moving any pinned anchor point. */
@media(max-width:600px){
  /* nav CTA: keep it on a single line at small widths */
  header .btn-primary{padding:.7em 1.15em;font-size:.8rem}

  /* hero markers: smaller label + shorter stem so tags clear each other */
  .marker{--float:54px}
  .mk-tag{
    font-size:.6rem;
    padding:.4em .8em;
    letter-spacing:.01em;
  }

  /* source logos: drop the 40px floor so the eight discs sit on the roots
     at a size proportional to the small image instead of piling up */
  .src{width:clamp(22px,6.8vw,32px);height:clamp(22px,6.8vw,32px)}
}

/* tablet & phone: the landscape hero image is too short to hold the subline
   over its sky, so the subline flows in white above the image instead.
   Above this width the image is tall enough for the sky overlay (see .hero-sub). */
@media(max-width:820px){
  .hero-city{margin-top:2.1rem}
  .hero-sub{position:static;padding:0 24px;margin-bottom:2rem}
}