/* ==========================================================================
   studio.css — Haplo studio homepage
   Warm paper ground, light-leaks drawn from the real app icon colours,
   Figtree display, IBM Plex Mono labels (kept from the Ship Log system).
   ========================================================================== */

:root {
  /* ground + ink */
  --paper:      #F4F3EA;
  --paper-2:    #FAF9F3;
  --card:       #FFFFFF;
  --ink:        #101210;
  --ink-2:      #5A5D56;
  --ink-3:      #8B8E86;
  --line:       rgba(16, 18, 16, .10);
  --line-2:     rgba(16, 18, 16, .17);

  /* real brand colours, read out of each app's Swift source */
  --c-bilbo:        #FF4D00;
  --c-cinder:       #101210;
  /* Cinder reads as black and frost blue — the icon is black, the accent is ice */
  --c-cinder-tint:  #6FB3DC;
  --c-shiphappens:  #5961FA;
  --c-haploai:      #007CF8;
  --c-barrier:      #FF6B1F;
  --c-investing:    #0DCC7D;
  --c-annot8:       #22B07D;
  --c-md2pdf:       #0A84FF;
  --c-easylogo:     #7C6BFF;

  --r-pill: 999px;
  --r-card: 24px;
  --r-md:   14px;
  --r-sm:   10px;

  --wrap: 1240px;
  --header-h: 78px;

  --font-display: Figtree, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22, .8, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}

* { box-sizing: border-box; }

body.studio {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.studio a:not(.btn):not(.btn-ship):not(.btn-haplo) { color: inherit; }
body.studio a { text-decoration: none; }
body.studio h1, body.studio h2, body.studio h3 { font-family: var(--font-display); margin: 0; }
body.studio .hero h1 { margin-inline: auto; }
.mono { font-family: var(--font-mono); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* --------------------------------------------------------------------------
   Light-leaks — soft washes in the app colours, drifting slowly.
   This is the whole atmosphere; everything else sits flat on top.
   -------------------------------------------------------------------------- */
.leaks { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; contain: strict; }
.leak {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  /* Promote each leak to its own layer. Without this the 70px blur over a
     ~45vw box is re-rasterised on every frame of the drift AND on every
     scroll frame, because the whole thing lives in a fixed layer. With it
     the blur is rasterised once and only the transform moves. */
  will-change: transform;
}
.leak-1 { top: -14vh;  left: -8vw;  width: 46vw; height: 42vw; background: radial-gradient(circle, rgba(46,204,112,.42), transparent 68%); animation: drift1 26s ease-in-out infinite alternate; }
.leak-2 { top: -10vh;  right: -10vw; width: 44vw; height: 40vw; background: radial-gradient(circle, rgba(255,107,31,.30), transparent 68%); animation: drift2 31s ease-in-out infinite alternate; }
.leak-3 { top: 52vh;   left: 22vw;  width: 52vw; height: 44vw; background: radial-gradient(circle, rgba(0,124,248,.24), transparent 70%); animation: drift3 37s ease-in-out infinite alternate; }
.leak-4 { bottom: -12vh; right: 6vw; width: 40vw; height: 36vw; background: radial-gradient(circle, rgba(255,77,0,.20), transparent 70%); animation: drift1 29s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(6vw, 5vh, 0) scale(1.14); } }
@keyframes drift2 { to { transform: translate3d(-7vw, 6vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(4vw, -6vh, 0) scale(1.18); } }

.page { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Header — centred nav, one mega dropdown holding all nine apps
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 200;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.stuck {
  background: rgba(244, 243, 234, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }

.nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  padding: 9px 15px; border-radius: var(--r-pill);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav-link:hover { background: rgba(16,18,16,.055); }
.nav-link .chev { transition: transform .25s var(--ease); }
.nav-item.open > .nav-link { background: rgba(16,18,16,.07); }
.nav-item.open > .nav-link .chev { transform: rotate(180deg); }

.hdr-cta { display: flex; align-items: center; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1;
  border-radius: var(--r-pill); border: 1px solid transparent;
  padding: 13px 22px; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-dark, body.studio a.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover, body.studio a.btn-dark:hover { background: #000; color: #fff; box-shadow: 0 10px 26px -12px rgba(16,18,16,.6); }
.btn-soft, body.studio a.btn-soft { background: rgba(16,18,16,.06); color: var(--ink); }
.btn-soft:hover { background: rgba(16,18,16,.1); }
.btn-ghost, body.studio a.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(16,18,16,.045); }
.btn-lg { font-size: 15.5px; padding: 15px 27px; }

/* the mega panel */
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.985);
  width: 760px; max-width: calc(100vw - 40px);
  background: rgba(252, 251, 246, .94);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(16,18,16,.4), 0 2px 8px -4px rgba(16,18,16,.18);
  padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .3s var(--ease), visibility .22s;
}
.nav-item.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 14px; transition: background-color .16s var(--ease); }
.mega-item:hover { background: rgba(16,18,16,.05); }
.mega-item img { width: 38px; height: 38px; border-radius: 10px; display: block; flex: none; }
.mega-t { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; display: block; }
.mega-d { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; display: block; margin-top: 1px; }
.mega-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 13px 14px 4px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}
.mega-foot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-investing); }

.burger { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: 74px 0 130px; text-align: center; }
.hero > .wrap { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(30px, 4.1vw, 60px);
  line-height: 1.24; letter-spacing: -.025em; font-weight: 600;
  max-width: 20ch; margin: 0 auto;
}
.hero-sub { transition: opacity .6s cubic-bezier(.4,0,.2,1); font-size: clamp(15px, 1.25vw, 17px); color: var(--ink-2); max-width: 56ch; margin: 26px auto 0; }
.hero-btns { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.hero-note { font-size: 14.5px; color: var(--ink-3); margin-top: 20px; }

/* the inline dropdown inside the headline */
.pick { position: relative; display: inline-block; vertical-align: baseline; }
.pick-btn {
  display: inline-flex; align-items: center; gap: .22em;
  font: inherit; letter-spacing: inherit; color: var(--pick-c, var(--c-haploai));
  background: var(--pick-bg, rgba(0,124,248,.1));
  border: 1px solid var(--pick-br, rgba(0,124,248,.22));
  border-radius: .2em; padding: 0 .14em .04em .2em; line-height: 1.02;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.pick-btn .chev { width: .5em; height: .5em; flex: none; transition: transform .3s var(--ease); }
.pick.open .pick-btn .chev { transform: rotate(180deg); }
.pick-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(.97);
  width: 320px; padding: 8px;
  background: rgba(252,251,246,.96);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 26px 60px -26px rgba(16,18,16,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .28s var(--ease-spring), visibility .2s;
  z-index: 60; text-align: left;
}
.pick.open .pick-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.pick-opt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border: 0; background: none; cursor: pointer;
  border-radius: 12px; font-family: inherit; text-align: left;
  font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -.01em;
  transition: background-color .15s var(--ease);
}
.pick-opt:hover, .pick-opt[aria-selected="true"] { background: rgba(16,18,16,.06); }
.pick-opt img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.pick-opt .oapp { margin-left: auto; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }

/* floating evidence — real screenshots at the edges of the hero */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 0; }




/* Edge cutouts: real app components, blurred and faded back toward the outside
   of the viewport so the headline keeps its contrast — each with a caption in
   the app's own voice. */
.hero-cut {
  position: absolute; margin: 0; width: 228px;
  opacity: 1; transition: opacity .6s var(--ease);
}
.hero-cut.in { opacity: 1; }
.hero-cut img.cutimg {
  width: 100%; height: auto; display: block;
  max-height: 176px; object-fit: contain; object-position: top;
  border-radius: 18px;
  opacity: .88;
  filter: drop-shadow(0 14px 20px rgba(16,18,16,.10));
  transition: opacity .34s var(--ease), filter .34s var(--ease);
}
.hero-cut.swap img.cutimg { opacity: 0; }


.cutstack {
  position: relative; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.45) 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.45) 84%, transparent 100%);
}
.cutimg--blur {
  position: absolute; inset: 0; pointer-events: none;
  filter: blur(2.2px) saturate(.92);
}
.hero-cut--tl .cutimg--blur, .hero-cut--ml .cutimg--blur, .hero-cut--bl .cutimg--blur {
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.62) 52%, transparent 88%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.62) 52%, transparent 88%);
}
.hero-cut--tr .cutimg--blur, .hero-cut--mr .cutimg--blur, .hero-cut--br .cutimg--blur {
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.62) 52%, transparent 88%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.62) 52%, transparent 88%);
}
/* captions sit above everything and stay perfectly sharp */
.hero-cut figcaption { position: relative; z-index: 3; }

.hero-cut figcaption {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 11px; max-width: 244px; opacity: .92;
}
.hero-cut__ic {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  background: var(--tint, rgba(16,18,16,.07));
  display: flex; align-items: center; justify-content: center;
}
.hero-cut__ic img { width: 15px; height: 15px; border-radius: 4px; display: block; }
.hero-cut figcaption em {
  font-style: italic; font-size: 12.5px; line-height: 1.45;
  color: #6b7280; text-wrap: pretty;
}

/* fade toward whichever edge the cutout hugs */
.hero-cut--tl, .hero-cut--ml, .hero-cut--bl {
  -webkit-mask-image: linear-gradient(102deg, transparent 0%, #000 44%);
          mask-image: linear-gradient(102deg, transparent 0%, #000 44%);
}
.hero-cut--tr, .hero-cut--mr, .hero-cut--br {
  -webkit-mask-image: linear-gradient(258deg, transparent 0%, #000 44%);
          mask-image: linear-gradient(258deg, transparent 0%, #000 44%);
}

.hero-cut--tl { top: 86px;  left: 38px; }
.hero-cut--tr { top: 74px;  right: 38px; }
.hero-cut--ml { top: 392px; left: 74px; }
.hero-cut--mr { top: 380px; right: 74px; }

/* the model marks — only out when Haplo AI is the selected app */
.marks { position: absolute; inset: 0; }
.mk {
  position: absolute; width: 58px; height: 58px; display: block;
  opacity: 0; transform: scale(.5); pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(16,18,16,.18));
  transition: opacity .45s var(--ease), transform .55s var(--ease-spring);
}
.marks.show .mk { opacity: 1; transform: none; }
.marks.show .mk-1 { transition-delay: .04s; } .marks.show .mk-2 { transition-delay: .1s; }
.marks.show .mk-3 { transition-delay: .16s; } .marks.show .mk-4 { transition-delay: .22s; }
.marks.show .mk-5 { transition-delay: .28s; }
.mk-1 { top: 262px; left: 30px; }
.mk-2 { top: 372px; left: 104px; width: 50px; height: 50px; }
.mk-3 { top: 424px; right: 38px; }
.mk-4 { top: 532px; right: 116px; width: 50px; height: 50px; }
.mk-5 { top: 470px; left: 44px; width: 46px; height: 46px; }
.marks.show .mk-1 { animation: bob 6.5s ease-in-out 1s infinite alternate; }
.marks.show .mk-3 { animation: bob 7.5s ease-in-out 1.2s infinite alternate-reverse; }
.marks.show .mk-5 { animation: bob 8s ease-in-out 1.4s infinite alternate; }
@keyframes bob { to { transform: translateY(-12px); } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.sec { padding: 96px 0; position: relative; }
.sec-head { text-align: center; max-width: 22ch; margin: 0 auto 46px; }
.sec-head.wide { max-width: 30ch; }
.sec h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.035em; font-weight: 500; }
.sec-lede { font-size: 17.5px; color: var(--ink-2); margin: 18px auto 0; max-width: 58ch; }
.eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--ink-3); text-transform: uppercase; display: block; margin-bottom: 14px; }

/* the orbit ring — positions come from JS so the tilt can't be flattened */
.ring-sec { padding: 96px 0 74px; }
.ring-scene { height: 340px; position: relative; }
.ring-ic-wrap { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.ring-ic { width: 62px; height: 62px; border-radius: 16px; display: block; margin: -31px 0 0 -31px;
           box-shadow: 0 16px 34px -14px rgba(16,18,16,.5); transition: filter .3s var(--ease); }
.ring-ic-wrap:hover .ring-ic { filter: brightness(1.06); }
.ring-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 5; }
.ring-mid .n { font-size: 46px; font-weight: 500; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.ring-mid .l { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--ink-3); margin-top: 8px; text-transform: uppercase; }

/* problem -> solution grid */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: rgba(255,255,255,.42); }
.pcol { padding: 30px 26px 34px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.pcol:last-child { border-right: 0; }
.chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--r-pill); background: rgba(16,18,16,.07); color: var(--ink-2); width: max-content; }
.chip-good { background: rgba(0,124,248,.12); color: var(--c-haploai); }
.pcol p { font-size: 16px; line-height: 1.5; margin: 16px 0 0; letter-spacing: -.012em; }
.pcol .vis { margin: 22px 0; border-radius: var(--r-md); min-height: 132px; border: 1px solid var(--line); overflow: hidden; position: relative; background: var(--paper-2); display: flex; align-items: center; justify-content: center; padding: 14px; }
.pcol .arrow { text-align: center; color: var(--ink-3); border-top: 1px dashed var(--line-2); padding-top: 18px; margin-top: auto; }
.pcol .sol { margin-top: 18px; }

/* tabs + fact table */
.tabs { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.tab {
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ink-3);
  background: none; border: 0; cursor: pointer; padding: 11px 20px; border-radius: var(--r-pill);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.on { background: rgba(16,18,16,.075); color: var(--ink); }
.ftable { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: rgba(255,255,255,.5); }
.frow { display: grid; grid-template-columns: 260px 1fr 1fr; border-bottom: 1px solid var(--line); }
.frow:last-child { border-bottom: 0; }
.fcell { padding: 20px 26px; border-right: 1px solid var(--line); font-size: 16.5px; }
.fcell:last-child { border-right: 0; }
.fcell.k { color: var(--ink-2); }
.frow.head .fcell { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 11px; }
.frow.head img { width: 30px; height: 30px; border-radius: 8px; }
.fbig { font-size: 36px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.fbig small { font-size: 15px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.fwin { background: linear-gradient(180deg, rgba(0,124,248,0), rgba(0,124,248,.11)); }
.fnote { font-size: 13.5px; color: var(--ink-3); text-align: center; margin-top: 18px; }

/* 2x2 capability grid */
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.cell { padding: 34px 36px 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.42); }
.cell:nth-child(2n) { border-right: 0; }
.cell:nth-child(n+3) { border-bottom: 0; }
.cell h3 { font-size: 25px; font-weight: 500; letter-spacing: -.028em; margin-top: 26px; }
.cell p { font-size: 16px; color: var(--ink-2); margin: 10px 0 0; line-height: 1.55; }
.cell-vis { border-radius: var(--r-md) var(--r-md) 0 0; height: 292px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; position: relative; padding: 24px 20px 0; }
.vis-green { background: linear-gradient(165deg, rgba(46,204,112,.16), rgba(46,204,112,.03) 62%, transparent); }
.vis-blue  { background: linear-gradient(165deg, rgba(0,124,248,.16), rgba(0,124,248,.03) 62%, transparent); }
.vis-orange{ background: linear-gradient(165deg, rgba(255,107,31,.17), rgba(255,107,31,.03) 62%, transparent); }
.vis-violet{ background: linear-gradient(165deg, rgba(89,97,250,.16), rgba(89,97,250,.03) 62%, transparent); }
.shot { border-radius: 14px 14px 0 0; border: 1px solid var(--line); border-bottom: 0; overflow: hidden; box-shadow: 0 22px 46px -22px rgba(16,18,16,.4); align-self: flex-start; }
.shot img { display: block; width: 100%; }

/* reviews */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rcard { background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.rcard:hover { transform: translateY(-4px); box-shadow: 0 20px 42px -22px rgba(16,18,16,.3); }
.stars { color: var(--c-bilbo); font-size: 13px; letter-spacing: .16em; }
.rcard p { font-size: 16px; line-height: 1.55; margin: 14px 0 0; letter-spacing: -.01em; }
.rmeta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 16px; }

/* closing cta */
.cta { text-align: center; padding: 104px 0 112px; }
.cta h2 { font-size: clamp(36px, 5.4vw, 68px); letter-spacing: -.04em; font-weight: 500; line-height: 1.05; }

/* footer */
.ftr { background: var(--ink); color: rgba(255,255,255,.72); padding: 62px 0 40px; position: relative; z-index: 1; }
.ftr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.ftr h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.42); margin: 0 0 16px; font-weight: 500; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a { font-size: 14.5px; color: rgba(255,255,255,.76); transition: color .16s var(--ease); }
.ftr a:hover { color: #fff; }
.ftr-brand { font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.ftr-note { font-size: 13.5px; color: rgba(255,255,255,.5); margin-top: 14px; max-width: 34ch; line-height: 1.6; }
.ftr-bottom { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); margin-top: 46px; padding-top: 24px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); }

/* --------------------------------------------------------------------------
   Scroll reveals
   -------------------------------------------------------------------------- */
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s; } .rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .21s; } .rv-d4 { transition-delay: .28s; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) { .floaters { display: none; } }
@media (max-width: 1080px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcol:nth-child(2n) { border-right: 0; }
  .pcol:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .rgrid { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav, .hdr-cta .btn-ghost { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: none; cursor: pointer; margin-left: auto; }
  .hdr-in { gap: 12px; }
  .cgrid { grid-template-columns: 1fr; }
  .cell { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .cell:last-child { border-bottom: 0 !important; }
  .frow { grid-template-columns: 1fr; }
  .fcell { border-right: 0; border-bottom: 1px solid var(--line); }
  .floaters { display: none; }
  .ring-scene { height: 280px; transform: scale(.72); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .sec { padding: 66px 0; }
  .hero { padding: 44px 0 66px; }
  .hero h1 { letter-spacing: -.032em; }
  .pgrid { grid-template-columns: 1fr; }
  .pcol { border-right: 0; border-bottom: 1px solid var(--line); }
  .ftr-top { grid-template-columns: 1fr; }
  .btn { padding: 14px 20px; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .leak, .ring-spin, .ring-unspin { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
  .flt { opacity: 1; animation: none !important; }
  .mk { animation: none !important; }
  .flt-1 { transform: rotate(-7deg); } .flt-2 { transform: rotate(6deg); }
  .flt-3 { transform: rotate(5deg); }  .flt-4 { transform: rotate(-5deg); }
  * { transition-duration: .01ms !important; }
}

/* the blocked apps drift slowly so they read as background, not a row */
@keyframes bicDrift { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.bicons.show .bic-1 { animation: bicDrift 11s ease-in-out 1.2s infinite; }
.bicons.show .bic-3 { animation: bicDrift 13s ease-in-out 1.6s infinite; }
.bicons.show .bic-5 { animation: bicDrift 12s ease-in-out 2.0s infinite; }
.bicons.show .bic-7 { animation: bicDrift 14s ease-in-out 2.4s infinite; }
@media (prefers-reduced-motion: reduce) { .bicons .bic { animation: none !important; } }

/* truly centred nav, independent of the brand and CTA widths */
@media (min-width: 901px) {
  .hdr-in { position: relative; }
  .nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
}

/* --------------------------------------------------------------------------
   Barrier: the real apps it blocks, drifting small in the background.
   A padlock eases on in 3D and the icon blurs out behind it.
   -------------------------------------------------------------------------- */
.bicons { position: absolute; inset: 0; perspective: 1000px; pointer-events: none; }
.bic {
  position: absolute; display: block; transform-style: preserve-3d;
  opacity: 0; transform: scale(.78);
  transition: opacity .9s var(--ease), transform 1.1s cubic-bezier(.22,.85,.25,1);
}
.bic img {
  width: 100%; height: 100%; border-radius: 24%; display: block; opacity: .8;
  filter: blur(.5px);
  transition: filter .9s cubic-bezier(.22,.7,.2,1), opacity .9s cubic-bezier(.22,.7,.2,1);
  box-shadow: 0 10px 18px -9px rgba(16,18,16,.24);
}
.bic .blk {
  position: absolute; inset: 0; border-radius: 24%;
  background: rgba(10,10,10,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'%3E%3Crect x='3.5' y='11' width='17' height='9.5' rx='2.2'/%3E%3Cpath d='M7.4 11V7a4.6 4.6 0 0 1 9.2 0v4'/%3E%3C/svg%3E") center/22px no-repeat;
  opacity: 0; transform: rotateY(-70deg) scale(.9); transform-origin: 50% 50%;
  transition: opacity .75s cubic-bezier(.22,.7,.2,1), transform 1s cubic-bezier(.22,.9,.24,1);
}
.bicons.show .bic { opacity: 1; transform: none; }
.bicons.show .bic.locked img { filter: blur(3px) saturate(.45); opacity: .46; }
.bicons.show .bic.locked .blk { opacity: 1; transform: rotateY(0deg) scale(1); }

.bic-1 { top: 128px; left: 36px;   width: 52px; height: 52px; }
.bic-2 { top: 306px; left: 182px;  width: 38px; height: 38px; }
.bic-3 { top: 534px; left: 96px;   width: 42px; height: 42px; }
.bic-4 { top: 120px; right: 54px;  width: 50px; height: 50px; }
.bic-5 { top: 300px; right: 186px; width: 38px; height: 38px; }
.bic-6 { top: 524px; right: 92px;  width: 44px; height: 44px; }
.bic-7 { top: 626px; left: 336px;  width: 36px; height: 36px; }
.bicons.show .bic-1 { transition-delay: .06s; } .bicons.show .bic-2 { transition-delay: .14s; }
.bicons.show .bic-3 { transition-delay: .22s; } .bicons.show .bic-4 { transition-delay: .3s; }
.bicons.show .bic-5 { transition-delay: .38s; } .bicons.show .bic-6 { transition-delay: .46s; }
.bicons.show .bic-7 { transition-delay: .54s; }

@keyframes bicDrift { 0%,100% { translate: 0 0; } 50% { translate: 0 -13px; } }
.bicons.show .bic-1 { animation: bicDrift 11s ease-in-out 1.4s infinite; }
.bicons.show .bic-3 { animation: bicDrift 13s ease-in-out 1.8s infinite; }
.bicons.show .bic-5 { animation: bicDrift 12s ease-in-out 2.2s infinite; }
.bicons.show .bic-7 { animation: bicDrift 14s ease-in-out 2.6s infinite; }

/* keep the CTA pinned right now that the nav is absolutely centred */
@media (min-width: 901px) { .hdr-cta { margin-left: auto; } }

@media (prefers-reduced-motion: reduce) {
  .bic, .bic img, .bic .blk { transition: none; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Floating icon cluster — a live hero-cut that holds a drifting swarm of app
   icons instead of a still image. Icons sit at different depths: the further
   back, the smaller and fainter. Everything drifts independently.
   -------------------------------------------------------------------------- */
.cutcluster { position: relative; width: 100%; height: 168px; display: none; }
.hero-cut.is-cluster .cutimg { display: none; }
.hero-cut.is-cluster .cutcluster { display: block; }

.cl-ic {
  position: absolute; display: block;
  filter: drop-shadow(0 6px 10px rgba(16,18,16,.22));
  animation: clFloat var(--dur, 9s) ease-in-out var(--del, 0s) infinite alternate;
  will-change: transform;
}
.cl-ic img { width: 100%; height: 100%; display: block; }
/* square app artwork needs the iOS corner radius; the model marks do not */
.cl-ic.cl-rounded img { border-radius: 23%; }
.cl-ic.cl-rounded { filter: drop-shadow(0 7px 12px rgba(16,18,16,.26)); }
/* depth: further back = smaller, fainter, more blurred */
.cl-d1 { opacity: .95; filter: none; }
.cl-d2 { opacity: .72; filter: blur(.5px); }
.cl-d3 { opacity: .5;  filter: blur(1.1px); }

@keyframes clFloat {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(var(--dx, 6px), var(--dy, -9px)) scale(1.04); }
  100% { transform: translate(calc(var(--dx, 6px) * -.6), calc(var(--dy, -9px) * -.7)) scale(.98); }
}

/* the padlock that lands on a social icon in the cluster */
.cl-ic .cl-lock {
  position: absolute; right: -5px; bottom: -5px;
  width: 46%; height: 46%; min-width: 16px; min-height: 16px;
  border-radius: 50%;
  background: rgba(22,24,20,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='3.5' y='11' width='17' height='9.5' rx='2.2'/%3E%3Cpath d='M7.4 11V7a4.6 4.6 0 0 1 9.2 0v4'/%3E%3C/svg%3E") center/58% no-repeat;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(16,18,16,.4), 0 0 0 2px rgba(250,249,243,.9);
  opacity: 0; transform: scale(.4);
  transition: opacity .5s var(--ease), transform .6s var(--ease-spring);
}
.cl-ic.locked .cl-lock { opacity: 1; transform: scale(1); }
.cl-ic.locked img { filter: saturate(.72); opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .cl-ic { animation: none; }
  .cl-ic .cl-lock { transition: none; }
}

.hero-sub.fading { opacity: 0; }

/* --------------------------------------------------------------------------
   Smooth app switching: the whole cutout — image, blurred twin and caption —
   crossfades as one unit, and the pill grows to its new width instead of
   snapping. Slots that are unused fade out rather than disappearing.
   -------------------------------------------------------------------------- */
.hero-cut {
  transition: opacity .85s cubic-bezier(.4,0,.2,1), transform .85s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.hero-cut.out { opacity: 0 !important; transform: translateY(12px) scale(.98); }
.hero-cut.gone { opacity: 0 !important; pointer-events: none; }

/* caption rides the same fade instead of snapping to new text */
.hero-cut figcaption { transition: opacity .7s cubic-bezier(.4,0,.2,1); }
.hero-cut.out figcaption { opacity: 0; }

/* the cluster fades with everything else */
.cutcluster { transition: opacity .75s cubic-bezier(.4,0,.2,1); }
.hero-cut.out .cutcluster { opacity: 0; }

/* the word, and the pill around it, resize smoothly */
#pickWord {
  display: inline-block; text-align: center; white-space: nowrap;
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
.pick-btn {
  transition: background-color .8s cubic-bezier(.4,0,.2,1), color .8s cubic-bezier(.4,0,.2,1),
              border-color .8s cubic-bezier(.4,0,.2,1);
}
.pick-measure {
  position: absolute; visibility: hidden; white-space: nowrap;
  pointer-events: none; left: -9999px; top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cut, .hero-cut figcaption, .cutcluster, #pickWord, .pick-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Video cutout — a generated clip with a play control. Click to play.
   -------------------------------------------------------------------------- */
.cutvideo { position: relative; display: none; border-radius: 18px; overflow: hidden; }
.hero-cut.is-video .cutstack { display: none; }
.hero-cut.is-video .cutvideo { display: block; }
.cutvideo video {
  width: 100%; display: block; border-radius: 18px;
  filter: drop-shadow(0 14px 20px rgba(16,18,16,.12));
}
.cutvideo__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  border: 0; cursor: pointer; pointer-events: auto; padding: 0;
  background:
    radial-gradient(120% 120% at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,.14) 46%, rgba(255,255,255,.06) 70%),
    rgba(255,255,255,.18);
  backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -1px 2px rgba(255,255,255,.35),
    0 8px 22px rgba(16,18,16,.28),
    0 1px 3px rgba(16,18,16,.2);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s var(--ease), transform .45s var(--ease-spring), box-shadow .3s var(--ease);
}
.cutvideo__play::before {
  content: ""; display: block;
  width: 0; height: 0; margin-left: 5px;
  border-left: 19px solid rgba(255,255,255,.98);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(16,18,16,.35));
}
.cutvideo__play:hover { transform: scale(1.07); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 12px 28px rgba(16,18,16,.34), 0 1px 3px rgba(16,18,16,.22); }
.cutvideo__play:active { transform: scale(.96); }
.cutvideo.playing .cutvideo__play { opacity: 0; transform: scale(.7); pointer-events: none; }
/* the video slot is the one thing in the hero you can actually click */
.hero-cut.is-video { pointer-events: auto; }

/* ==========================================================================
   Legacy compatibility — pages still written against the old Ship Log class
   names render in the studio language without touching their markup. Keeps
   forms and dynamic templates working while the look comes across.
   ========================================================================== */
body.studio .hero { padding: 66px 0 40px; }
body.studio .hero h1 {
  font-size: clamp(30px, 4.1vw, 56px); line-height: 1.16; font-weight: 600;
  letter-spacing: -.028em; max-width: 22ch; margin-inline: auto;
}
body.studio .hero-tagline,
body.studio .hero-body { color: var(--ink-2); max-width: 58ch; margin: 18px auto 0; text-align: center; }
body.studio .hero-tagline { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); }
body.studio .hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

body.studio .section { padding: 64px 0; }
body.studio .section-head { text-align: center; max-width: 30ch; margin: 0 auto 40px; }
body.studio .section-head h1,
body.studio .section-head h2 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.032em; font-weight: 500; }
body.studio .section-lede { color: var(--ink-2); font-size: 16.5px; margin: 14px auto 0; max-width: 58ch; }

body.studio .paper-card,
body.studio .paper-card-flat,
body.studio .review,
body.studio .whatsnew-card,
body.studio .dossier-card {
  background: rgba(255,255,255,.62); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 26px 28px; box-shadow: none;
}
body.studio .review blockquote { font-size: 16px; line-height: 1.55; margin: 0; }
body.studio .review figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 14px; }

body.studio .btn-ship,
body.studio .btn-haplo {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1;
  border-radius: var(--r-pill); border: 1px solid transparent; padding: 14px 24px;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
body.studio .btn-ship:active, body.studio .btn-haplo:active { transform: scale(.97); }
body.studio .btn-ship-primary, body.studio .btn-haplo-primary,
body.studio a.btn-ship-primary, body.studio a.btn-haplo-primary { background: var(--ink); color: #fff; }
body.studio .btn-ship-primary:hover, body.studio .btn-haplo-primary:hover { background: #000; color: #fff; }
body.studio .btn-ship-secondary, body.studio .btn-haplo-secondary,
body.studio a.btn-ship-secondary { background: rgba(16,18,16,.06); color: var(--ink); border-color: transparent; }
body.studio .btn-ship-secondary:hover { background: rgba(16,18,16,.1); color: var(--ink); }
body.studio .link-more { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

body.studio .chip {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: rgba(16,18,16,.06);
  border: 0; border-radius: var(--r-pill); padding: 6px 11px;
}
body.studio .chip-blue, body.studio .chip-progress { background: rgba(0,124,248,.12); color: var(--c-haploai); }
body.studio .chip-red { background: rgba(255,77,0,.12); color: var(--c-bilbo); }
body.studio .vnum, body.studio .mono { font-family: var(--font-mono); }
body.studio .muted { color: var(--ink-3); }

body.studio .table-ship { width: 100%; border-collapse: collapse; font-size: 15.5px; }
body.studio .table-ship th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-2);
}
body.studio .table-ship td { padding: 14px 16px; border-bottom: 1px solid var(--line); }

body.studio .field-label, body.studio .form-label {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: 0;
  font-family: var(--font-display); text-transform: none;
}
body.studio .field-input, body.studio .field-select,
body.studio .form-control, body.studio .form-select {
  display: block; width: 100%; font-family: var(--font-display); font-size: 15.5px;
  color: var(--ink); background: rgba(255,255,255,.7);
  border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 13px 15px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.studio .field-input:focus, body.studio .form-control:focus,
body.studio .field-select:focus, body.studio .form-select:focus {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,18,16,.08);
}
body.studio .field-help { font-size: 12.5px; color: var(--ink-3); margin-top: 7px; }
body.studio .field-error { font-size: 12.5px; color: #C0392B; margin-top: 7px; }

body.studio .flash {
  display: flex; gap: 10px; align-items: flex-start; font-size: 15px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 18px; margin: 0 0 16px;
}
body.studio .manifest { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; }
body.studio .manifest li::before { content: "✓ "; color: var(--c-investing); font-weight: 700; }
body.studio .leader { display: none; }
body.studio .stamp { display: none; }

/* the App Store screenshot carousel on app pages, lightened to match */
body.studio .gallery-strip-wrap { background: transparent; padding: 8px 0; }
body.studio .gallery-strip { background: transparent; }
body.studio .g-frame {
  background: rgba(255,255,255,.6); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; box-shadow: 0 14px 30px -20px rgba(16,18,16,.3);
}
body.studio .g-item img { border-radius: 18px; }
body.studio .g-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); text-align: center; }
body.studio .dossier-crumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 20px 0 0; }
body.studio .dossier-title { font-size: clamp(30px, 4vw, 50px); font-weight: 600; letter-spacing: -.03em; }
body.studio .dossier-pitch { font-size: 17px; color: var(--ink-2); max-width: 56ch; }
body.studio .dossier-grid, body.studio .about-grid, body.studio .carve-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}

/* review cards: the app icon hangs off the top-left corner so it is obvious
   which app the review is about */
body.studio .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 20px; }
body.studio .rcard { position: relative; overflow: visible; padding-top: 30px; }
body.studio .rcard__app {
  position: absolute; top: -16px; left: -14px;
  width: 46px; height: 46px; border-radius: 12px; display: block;
  box-shadow: 0 6px 14px -6px rgba(16,18,16,.4), 0 0 0 3px var(--paper);
}
@media (max-width: 1080px) { body.studio .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { body.studio .rgrid { grid-template-columns: 1fr; } }

html.js .hero-cut { opacity: 0; }
html.js .hero-cut.in { opacity: 1; }

/* ============================================================
   App pages — the same hero language as the homepage, tinted
   with each app's own brand colour. `--accent` is set inline
   from the app's row in the `apps` table.
   ============================================================ */
body.studio .hero--app {
  padding: 40px 0 78px;
  min-height: 566px;
}
/* a soft wash of the app's colour behind the hero, so each page
   reads as its own place without repainting the whole ground */
body.studio .hero--app::before {
  content: ""; position: absolute; inset: -10% -20% 30%;
  background:
    radial-gradient(38% 42% at 18% 26%, var(--accent-tint, rgba(16,18,16,.06)) 0%, transparent 72%),
    radial-gradient(34% 38% at 84% 32%, var(--accent-tint, rgba(16,18,16,.05)) 0%, transparent 70%);
  opacity: .62;
  pointer-events: none; z-index: 0;
}
body.studio .eyebrow--accent { color: var(--accent, var(--ink-3)); }

body.studio .apphero-lockup {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 20px;
}
body.studio .apphero-icon {
  flex: none; width: 72px; height: 72px; display: block;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 26px -12px rgba(16,18,16,.42), 0 0 0 1px rgba(16,18,16,.06);
}
body.studio .apphero-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
body.studio .hero--app h1 { margin: 0; max-width: none; }
/* fact strip under the buttons */
body.studio .apphero-facts {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px 46px; list-style: none; margin: 40px auto 0; padding: 0;
  max-width: 720px;
}
body.studio .apphero-facts li { display: flex; flex-direction: column; gap: 3px; text-align: center; }
body.studio .apphero-facts strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
body.studio .apphero-facts span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

/* the primary button borrows the app's colour on its own page */
body.studio .hero--app .btn-dark {
  background: var(--accent, var(--ink));
  border-color: var(--accent, var(--ink));
}
body.studio .hero--app .btn-dark svg { margin-right: 8px; vertical-align: -2px; }

/* The homepage hides its floaters below 1400px because the headline is wide.
   An app hero is just a name and one line, so its cutouts still clear the copy
   on a 1280-wide laptop — keep them until the columns actually meet. */
@media (max-width: 1400px) {
  body.studio .hero--app .floaters { display: block; }
}
@media (max-width: 1180px) {
  body.studio .hero--app { min-height: 0; padding-bottom: 64px; }
  body.studio .hero--app .floaters { display: none; }
}
@media (max-width: 620px) {
  body.studio .apphero-lockup { flex-direction: column; gap: 14px; }
  body.studio .apphero-icon { width: 62px; height: 62px; }
}

/* app heroes are shorter than the homepage's, so the lower cutouts ride higher */
body.studio .hero--app .hero-cut--ml { top: 322px; }
body.studio .hero--app .hero-cut--mr { top: 310px; }

/* Product Hunt badge sits beside the store button as a trust marker */
body.studio .producthunt-badge-link { display: inline-flex; align-items: center; }
body.studio .producthunt-badge-link img { display: block; height: 46px; width: auto; }
body.studio .producthunt-badge-dark { display: none; }

/* ------------------------------------------------------------------
   Section headings: the display line wants a tight measure, the lede
   under it does not. Constraining the whole block (as it was) squeezed
   both to ~22ch and left long thin columns of text.
   ------------------------------------------------------------------ */
body.studio .sec-head { max-width: 60ch; }
body.studio .sec-head.wide { max-width: 68ch; }
body.studio .sec-head h2 { max-width: 20ch; margin-inline: auto; }
body.studio .sec-head.wide h2 { max-width: 22ch; }
body.studio .sec-head .sec-lede { max-width: 56ch; }

/* ==================================================================
   Token bridge.
   Pages written before the redesign (help, features, press, the legal
   pages, every app page's feature grid) style themselves with the old
   shiplog token names. studio.css never defined them, so any rule that
   used one — most of the padding and radii on those pages — was thrown
   away by the parser and the layout collapsed. Mapping them onto the
   studio scale restores that spacing in the new design's terms.
   ================================================================== */
:root {
  /* spacing scale */
  --s1: 6px;
  --s2: 10px;
  --s3: 18px;
  --s4: 28px;
  --s5: 44px;

  /* surfaces + ink */
  --paper-raised: var(--card);
  --ink-soft:     var(--ink-2);
  --line-strong:  var(--line-2);

  /* accents */
  --blue:       var(--c-haploai);
  --blue-tint:  rgba(0, 124, 248, .10);
  --green:      var(--c-investing);
  --red:        #E5484D;

  /* shape + shadow */
  --radius:      var(--r-card);
  --radius-sm:   var(--r-md);
  --shadow-card: 0 1px 2px rgba(16, 18, 16, .04), 0 12px 30px -18px rgba(16, 18, 16, .22);
  --shadow-pop:  0 2px 6px rgba(16, 18, 16, .06), 0 26px 54px -26px rgba(16, 18, 16, .32);
  --focus-ring:  var(--c-haploai);

  /* buttons */
  --btn-primary-bg:  var(--ink);
  --btn-primary-ink: var(--paper);

  /* footer (the studio footer is the dark slab) */
  --footer-bg:         #101210;
  --footer-ink:        rgba(244, 243, 234, .82);
  --footer-ink-strong: #F4F3EA;
  --footer-ink-soft:   rgba(244, 243, 234, .55);
  --footer-line:       rgba(244, 243, 234, .16);

  --container: var(--wrap);
  --font-body: var(--font-display);
}

/* an app with only one or two reviews shouldn't leave a hole in the grid */
body.studio .rgrid--few { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(0, 340px)); }

/* On a phone the header CTA was wide enough to push the menu button off the
   right edge, leaving no way to reach the nav at all. */
@media (max-width: 900px) {
  /* with the nav hidden nothing pushes the CTA group right any more */
  body.studio .hdr-cta { margin-left: auto; }
}
@media (max-width: 560px) {
  body.studio .hdr-in { gap: 10px; }
  body.studio .hdr-cta .btn-dark { padding: 9px 15px; font-size: 13.5px; }
  body.studio .burger { flex: none; margin-left: 0; }
}
@media (max-width: 400px) {
  body.studio .hdr-cta { display: none; }
  body.studio .burger { margin-left: auto; }
}

/* The decorative light-leaks sit outside the layout box on purpose. On a phone
   they pushed the document wider than the viewport, so the whole page could be
   dragged sideways and copy ran off the right edge. `clip` trims them without
   creating a scroll container, which `hidden` would — that breaks the sticky
   header. The gallery strip keeps its own horizontal scroll either way. */
html { overflow-x: clip; }
body.studio { overflow-x: clip; }

/* ------------------------------------------------------------------
   Dropdowns. The roadmap filters and the support form used the browser's
   own select chrome, which reads as a different site. This gives them the
   same shape, type and chevron as the header's Apps menu.
   ------------------------------------------------------------------ */
body.studio select,
body.studio .field-select,
body.studio .form-select {
  -webkit-appearance: none; appearance: none;
  padding-right: 42px;
  background-color: var(--card);
  /* same chevron the nav uses, drawn in --ink-3 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8E86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  text-overflow: ellipsis;
}
body.studio select:hover,
body.studio .field-select:hover,
body.studio .form-select:hover { border-color: var(--ink-3); }
body.studio select:focus-visible,
body.studio .field-select:focus,
body.studio .form-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16, 18, 16, .08);
}
/* the popup list itself — as far as the platform lets us go */
body.studio select option { background: var(--card); color: var(--ink); padding: 8px; }
body.studio select option:checked { font-weight: 600; }
body.studio select:disabled { opacity: .55; cursor: not-allowed; }

/* the roadmap's filter row reads as one control bar */
body.studio .roadmap-filters { padding: 0 0 var(--s5); }
body.studio .roadmap-filter-row { gap: 16px; }
body.studio .field-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 9px;
}

/* form fields need room to breathe between them */
body.studio .field + .field,
body.studio .help-form-row + .field { margin-top: 20px; }
body.studio .help-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* side-by-side fields are columns, not stacked siblings — no top margin */
body.studio .help-form-row .field + .field { margin-top: 0; }
body.studio form .btn-submit-haplo,
body.studio form button[type="submit"] { margin-top: 24px; }
@media (max-width: 620px) { body.studio .help-form-row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   Icon select. A native <select> can't show an app icon next to the
   name, so app pickers use this listbox instead. It carries its value
   on a hidden input so FormData and the existing change handlers work
   exactly as they did with the <select> it replaced.
   ------------------------------------------------------------------ */
body.studio .iselect { position: relative; }
body.studio .iselect__btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font-display); font-size: 15.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 12px 15px; cursor: pointer;
  text-align: left; line-height: 1.3;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.studio .iselect__btn:hover { border-color: var(--ink-3); }
body.studio .iselect__btn:focus-visible,
body.studio .iselect.open .iselect__btn {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16, 18, 16, .08);
}
body.studio .iselect__ic {
  width: 22px; height: 22px; border-radius: 6px; display: block; flex: none;
  box-shadow: 0 0 0 1px rgba(16, 18, 16, .07);
}
body.studio .iselect__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.studio .iselect__btn[data-empty="true"] .iselect__label { color: var(--ink-3); }
body.studio .iselect__btn .chev { flex: none; color: var(--ink-3); transition: transform .2s var(--ease); }
body.studio .iselect.open .iselect__btn .chev { transform: rotate(180deg); }

body.studio .iselect__menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 6px;
  box-shadow: var(--shadow-pop);
  max-height: 320px; overflow-y: auto;
}
body.studio .iselect__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font-display); font-size: 15px; color: var(--ink);
  background: none; border: 0; border-radius: var(--r-sm);
  padding: 9px 10px; cursor: pointer; text-align: left;
}
body.studio .iselect__opt img { width: 22px; height: 22px; border-radius: 6px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(16, 18, 16, .07); }
body.studio .iselect__opt .iselect__dot {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: rgba(16, 18, 16, .06);
}
body.studio .iselect__opt:hover,
body.studio .iselect__opt:focus-visible { background: rgba(16, 18, 16, .06); outline: 0; }
body.studio .iselect__opt[aria-selected="true"] { font-weight: 600; }
body.studio .iselect__sep { height: 1px; background: var(--line); margin: 6px 4px; }

body.studio .iselect.invalid .iselect__btn { border-color: #C0392B; }
body.studio .req { color: var(--c-barrier); margin-left: 2px; }

/* a section head that opens a page carries an h1 rather than an h2 */
body.studio .sec-head h1 {
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08;
  letter-spacing: -.035em; font-weight: 500;
  max-width: 20ch; margin-inline: auto;
}
body.studio .sec-head.wide h1 { max-width: 22ch; }

/* The narrow column — the FAQ, the roadmap list, the press boilerplate.
   This class was used in three templates but never defined, so those blocks
   ran the full width of the viewport with no side padding at all. */
body.studio .wrap-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 560px) { body.studio .wrap-narrow { padding: 0 20px; } }