/* Landing page styles.
 *
 * Drawn from the Ohayo Studio design reference ("Daylight · pale blue"
 * palette) and ported into the live theme tokens — palette colors come
 * from --cms-* (Setting) and --design-* (theme_extras), so editing
 * either updates the landing page in lockstep.
 *
 * Everything is scoped under .landing so the design-reference styles
 * don't leak into the rest of the site.
 */

.landing {
  /* surfaces */
  --paper:        var(--cms-background,  #e6eef5);
  --paper-soft:   var(--design-paper-soft, #eff4f9);
  --surface:      var(--design-surface,    #f8fbfd);
  --mist:         var(--design-mist,       #cad7e3);
  --rule:         var(--cms-accent,       #c5d2dc);
  --rule-soft:    var(--design-rule-soft,  #d8e2ea);

  /* ink */
  --ink:          var(--cms-text,          #15171c);
  --ink-soft:     var(--cms-text-primary,  #3a3e48);
  --ink-muted:    var(--design-ink-muted,  #7a7e87);
  --ink-faint:    var(--design-ink-faint,  #a8aaa6);

  /* sky */
  --sky:          var(--design-sky,        #6e95b8);
  --sky-deep:     var(--cms-primary,       #3d6889);
  --sky-soft:     var(--design-sky-soft,   #b6c8d8);
  --sky-tint:     var(--design-sky-tint,   #dde7ef);

  /* sun */
  --sun:          var(--cms-secondary,     #f0d670);
  --sun-deep:     var(--design-sun-deep,   #a88c2c);
  --sun-soft:     var(--design-sun-soft,   #f7e7a0);
  --sun-tint:     var(--design-sun-tint,   #fcf3cf);

  /* sepia — reserved for Sepia Braun product card */
  --sepia:        #b89472;
  --sepia-soft:   #ddc5a8;
  --sepia-tint:   #ecdcc6;

  /* type — wrap the single-family --cms-font-* tokens in fallback stacks */
  --f-display: var(--cms-font-display, 'Geist'), -apple-system, system-ui, sans-serif;
  --f-serif:   var(--cms-font-serif,   'Instrument Serif'), 'Newsreader', Georgia, serif;
  --f-jp:      var(--cms-font-jp,      'Noto Sans JP'), -apple-system, system-ui, sans-serif;
  --f-jpserif: var(--cms-font-jp-serif, 'Noto Serif JP'), 'Instrument Serif', Georgia, serif;
  --f-mono:    var(--cms-font-mono,    'Geist Mono'), ui-monospace, monospace;

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --page-max: 1240px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.landing img { display: block; max-width: 100%; }
.landing a { color: inherit; text-decoration: none; }

/* Mark styles (.mark.s16 — .mark.s320) live globally in header.css so
   header, footer, and landing all share the same definition. */

/* shared */
.landing .eyebrow {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 12px;
}
.landing .eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--ink-faint);
}
.landing .eyebrow .num { color: var(--sun-deep); }

.landing .section-rule {
  height: 1px; background: var(--rule);
  max-width: var(--page-max); margin: 0 auto;
}

/* HERO */
.landing .hero {
  max-width: var(--page-max); margin: 0 auto;
  padding: 80px 36px 100px;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 56px;
  align-items: end;
}
.landing .hero .left { padding-bottom: 12px; }
.landing .hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 104px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 32px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
.landing .hero h1 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--sky-deep);
}
.landing .hero h1 .amp {
  font-family: var(--f-serif); font-style: italic;
  color: var(--ink-faint);
}
.landing .hero .jp {
  margin-top: 26px;
  font-family: var(--f-jp); font-weight: 400;
  font-size: 17px;
  color: var(--ink-muted);
  letter-spacing: 0.18em;
}
.landing .hero .lede {
  margin-top: 36px;
  font-family: var(--f-serif); font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 480px;
  text-wrap: pretty;
}
.landing .hero .meta-row {
  margin-top: 40px;
  display: flex; gap: 36px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}
.landing .hero .meta-row b { color: var(--ink); font-weight: 500; display:block; margin-top: 4px; font-family: var(--f-display); font-size: 13px; letter-spacing: 0; }
.landing .hero .meta-row .it { display: flex; flex-direction: column; }

.landing .hero .right {
  display: flex; justify-content: flex-end; align-items: flex-end;
  position: relative;
}
.landing .hero .right .mark-wrap { position: relative; }
.landing .hero .right .mark-wrap::before {
  content: ""; position: absolute;
  inset: -60px -100px -60px -100px;
  background: radial-gradient(circle at 55% 45%, var(--sun-tint), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.landing .hero .right .mark { position: relative; z-index: 1; }
.landing .hero .right .annot {
  position: absolute;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  z-index: 2;
}
.landing .hero .right .annot::before {
  content: ""; display: inline-block;
  width: 22px; height: 1px; background: var(--ink-faint);
  vertical-align: middle; margin-right: 8px;
}
.landing .hero .right .a1 { top: 6%;   right: -10px;  }
.landing .hero .right .a2 { top: 38%;  right: -16px;  }
.landing .hero .right .a3 { bottom: 28%; right: -12px; }

/* INTRO */
.landing .intro {
  max-width: var(--page-max); margin: 0 auto;
  padding: 80px 36px 90px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
}
.landing .intro .side {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: sticky; top: 100px;
  align-self: start;
}
.landing .intro .side .ix { color: var(--sun-deep); margin-right: 8px; }
.landing .intro .body {
  font-family: var(--f-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: pretty;
  max-width: 760px;
}
.landing .intro .body p { margin: 0 0 28px; }
.landing .intro .body p:last-child { margin-bottom: 0; }
.landing .intro .body em { color: var(--sky-deep); font-style: italic; }
.landing .intro .body .pull {
  display: block;
  font-size: 17px;
  font-family: var(--f-display); font-style: normal;
  color: var(--ink-muted);
  margin-top: 36px;
  letter-spacing: 0;
  line-height: 1.55;
}

/* PRODUCTS */
.landing .products {
  max-width: var(--page-max); margin: 0 auto;
  padding: 80px 36px;
}
.landing .products-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 56px;
}
.landing .products-head h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 12px 0 0;
}
.landing .products-head h2 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  color: var(--sun-deep);
}
.landing .products-head .right {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-muted);
  text-align: right;
  letter-spacing: 0.08em;
}

.landing .product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  padding: 56px 0;
  gap: 56px;
  align-items: center;
}
.landing .product:last-child { border-bottom: 1px solid var(--rule); }

.landing .product .info { padding-right: 32px; }
.landing .product .info .badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 12px 0 10px;
  border-radius: var(--r-pill);
  background: var(--sun-tint);
  color: var(--sun-deep);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
.landing .product .info .badge.draft { background: var(--mist); color: var(--ink-muted); }
.landing .product .info .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.landing .product .info .name {
  font-family: var(--f-display); font-weight: 400;
  font-size: 64px;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 22px 0 8px;
}
.landing .product .info .name em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
}
.landing .product .info .jp {
  font-family: var(--f-jpserif); font-weight: 400;
  font-size: 16px;
  color: var(--ink-muted);
  letter-spacing: 0.16em;
}
.landing .product .info .desc {
  margin-top: 28px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 460px;
  text-wrap: pretty;
}
.landing .product .info .specs {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 20px;
}
.landing .product .info .specs .s {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.landing .product .info .specs .s b {
  display: block; margin-top: 6px;
  font-family: var(--f-display); font-weight: 500; font-size: 14px;
  color: var(--ink); letter-spacing: 0; text-transform: none;
}
.landing .product .info .links {
  margin-top: 32px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.landing .btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 20px;
  border-radius: var(--r-pill);
  font-family: var(--f-display); font-weight: 500; font-size: 13.5px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s, background .2s, border-color .2s;
}
.landing .btn.primary { background: var(--ink); color: var(--paper); }
.landing .btn.primary:hover { transform: translateY(-1px); background: #0e131a; }
.landing .btn.secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
.landing .btn.secondary:hover { background: var(--paper-soft); border-color: var(--ink-faint); }
.landing .btn .arr { display: inline-block; transition: transform .2s; }
.landing .btn:hover .arr { transform: translateX(3px); }

.landing .product .visual {
  position: relative;
  min-height: 460px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.landing .product .visual.tile-sky { background: linear-gradient(160deg, var(--sky-tint), var(--paper) 70%); border-radius: var(--r-xl); border: 1px solid var(--rule-soft); }
.landing .product .visual.tile-sepia { background: linear-gradient(160deg, var(--sepia-tint), var(--paper) 75%); border-radius: var(--r-xl); border: 1px solid var(--rule-soft); }

/* Pokeibo phone mock — kept in its own warmer palette,
   sitting inside the cool studio chrome */
.landing .pokeibo-phone {
  width: 280px; height: 560px;
  background: #fdf9f1;
  border-radius: 40px;
  border: 1px solid #e6dccb;
  padding: 22px 16px;
  box-shadow: 0 30px 50px -20px rgba(30, 40, 50, 0.18), 0 2px 0 rgba(0,0,0,0.03);
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.landing .pokeibo-phone .pf-top { display: flex; align-items: center; justify-content: space-between; }
.landing .pokeibo-phone .pf-top .lk {
  display:flex; align-items:center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 14px;
  letter-spacing: -0.02em; color: #2b2620;
}
.landing .pokeibo-phone .pf-top .lk .pmark {
  width: 22px; height: 22px; border-radius: 6px;
  background: #8aa68d;
  position: relative;
}
.landing .pokeibo-phone .pf-top .lk .pmark::before {
  content: ""; position: absolute;
  left: 50%; top: 18%;
  width: 11px; height: 13px;
  background: #f0c2a3; border-radius: 1.5px;
  transform: translateX(-50%);
}
.landing .pokeibo-phone .pf-top .lk .pmark::after {
  content: ""; position: absolute;
  left: 12%; right: 12%; top: 65%;
  height: 6px;
  background: #faf4ea;
  border-radius: 1px 1px 4px 4px;
}
.landing .pokeibo-phone .pf-top .date {
  font-family: var(--f-mono); font-size: 9px;
  color: #8a8175; letter-spacing: 0.1em;
}
.landing .pokeibo-phone .greet {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: 13px; color: #4a4239;
}
.landing .pokeibo-phone .greet b {
  display: block;
  font-family: var(--f-display); font-style: normal; font-weight: 600;
  font-size: 19px; color: #2b2620; margin-top: 3px; letter-spacing: -0.018em;
}
.landing .pokeibo-phone .greet b span { color: #6e8c75; }
.landing .pokeibo-phone .budget {
  background: #ecf1ea; border: 1px solid #d8e2d6;
  border-radius: 14px;
  padding: 14px 14px 12px;
}
.landing .pokeibo-phone .budget .lbl {
  font-family: var(--f-mono); font-size: 9px;
  color: #6e8c75; letter-spacing: 0.12em; text-transform: uppercase;
}
.landing .pokeibo-phone .budget .num {
  font-family: var(--f-display); font-weight: 600;
  font-size: 26px; color: #2b2620; margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.landing .pokeibo-phone .budget .num span { font-size: 13px; color: #8a8175; margin-left: 4px; font-weight: 500; }
.landing .pokeibo-phone .budget .bar { margin-top: 10px; height: 5px; background: rgba(110,140,117,0.18); border-radius: 3px; overflow:hidden; }
.landing .pokeibo-phone .budget .bar i { display:block; height: 100%; width: 62%; background: #6e8c75; border-radius: 3px; }
.landing .pokeibo-phone .chips { display:flex; gap: 6px; }
.landing .pokeibo-phone .chips .c {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecf1ea; border: 1px solid #d8e2d6;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; color: #6e8c75; font-weight: 500;
}
.landing .pokeibo-phone .chips .c.p { background: #fdf0e5; border-color: #fbe2cf; color: #8c5a3a; }
.landing .pokeibo-phone .chips .c .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.landing .pokeibo-phone .feed { display:flex; flex-direction: column; gap: 4px; }
.landing .pokeibo-phone .feed .r {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
}
.landing .pokeibo-phone .feed .r .ic {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 12px;
}
.landing .pokeibo-phone .feed .r .ic.s { background: #ecf1ea; color: #6e8c75; }
.landing .pokeibo-phone .feed .r .ic.p { background: #fdf0e5; color: #8c5a3a; }
.landing .pokeibo-phone .feed .r .body { flex: 1; min-width: 0; }
.landing .pokeibo-phone .feed .r .body .n { font-size: 11.5px; color: #2b2620; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing .pokeibo-phone .feed .r .body .d { font-family: var(--f-mono); font-size: 9px; color: #8a8175; margin-top: 1px; letter-spacing: 0.04em; }
.landing .pokeibo-phone .feed .r .amt { font-family: var(--f-display); font-weight: 600; font-size: 12px; color: #2b2620; font-variant-numeric: tabular-nums; }

/* Sepia Braun magazine mock */
.landing .sepia-mag {
  width: 320px;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, #d2b88f 0%, var(--sepia) 100%);
  border-radius: 4px;
  box-shadow:
    0 30px 60px -20px rgba(60, 40, 20, 0.30),
    0 2px 0 rgba(0,0,0,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  padding: 38px 30px;
  display: flex; flex-direction: column;
  position: relative;
  font-family: var(--f-serif);
  color: #f3ead9;
  overflow: hidden;
}
.landing .sepia-mag::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.10), transparent 50%);
  pointer-events: none;
}
.landing .sepia-mag .mag-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(243, 234, 217, 0.78);
}
.landing .sepia-mag .mag-title {
  font-family: var(--f-serif); font-style: italic;
  font-size: 48px;
  line-height: 0.95;
  margin-top: auto;
  letter-spacing: -0.01em;
  color: #f3ead9;
}
.landing .sepia-mag .mag-sub {
  margin-top: 14px;
  font-family: var(--f-serif);
  font-style: normal;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(243, 234, 217, 0.82);
  max-width: 220px;
}
.landing .sepia-mag .mag-foot {
  margin-top: 22px;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243, 234, 217, 0.6);
  border-top: 1px solid rgba(243, 234, 217, 0.22);
  padding-top: 12px;
}

/* LAB */
.landing .lab {
  background: var(--paper-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.landing .lab .inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: 96px 36px;
}
.landing .lab-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px;
  align-items: end;
}
.landing .lab-head h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 14px 0 0;
}
.landing .lab-head h2 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  color: var(--sky-deep);
}
.landing .lab-head .blurb {
  font-family: var(--f-serif);
  font-size: 20px; line-height: 1.45;
  color: var(--ink-soft);
  max-width: 440px;
  text-wrap: pretty;
  justify-self: end;
  text-align: right;
}

.landing .edo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 32px;
}
.landing .edo .info { padding: 48px 48px 44px; display: flex; flex-direction: column; }
.landing .edo .info .row1 {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.landing .edo .info .row1 .pill {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--sky-tint);
  color: var(--sky-deep);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.landing .edo .info h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 52px;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 18px 0 4px;
}
.landing .edo .info h3 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
}
.landing .edo .info .tagline {
  font-family: var(--f-serif); font-style: italic;
  font-size: 19px;
  color: var(--sky-deep);
  margin: 0 0 22px;
}
.landing .edo .info .desc {
  font-size: 15.5px; line-height: 1.55;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0 0 28px;
  text-wrap: pretty;
}
.landing .edo .info .feats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.landing .edo .info .feats div { display:flex; align-items: baseline; gap: 8px; }
.landing .edo .info .feats div::before {
  content: "·"; color: var(--sun-deep); font-size: 14px; line-height: 0;
}
.landing .edo .info .actions { margin-top: auto; display: flex; gap: 12px; }

.landing .edo .visual {
  background: linear-gradient(160deg, var(--sky-tint), var(--paper-soft) 70%);
  padding: 48px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  border-left: 1px solid var(--rule);
}
.landing .edo .visual .terminal {
  background: var(--ink);
  border-radius: var(--r-md);
  padding: 18px 20px 22px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #d0d2cf;
  box-shadow: 0 30px 50px -20px rgba(30,40,50,0.25);
}
.landing .edo .visual .terminal .lights { display: flex; gap: 6px; margin-bottom: 12px; }
.landing .edo .visual .terminal .lights span {
  width: 10px; height: 10px; border-radius: 50%; background: #3a4250;
}
.landing .edo .visual .terminal .ln { white-space: pre; }
.landing .edo .visual .terminal .pr { color: var(--sky); }
.landing .edo .visual .terminal .cmd { color: var(--sun-soft); }
.landing .edo .visual .terminal .out { color: var(--ink-faint); }
.landing .edo .visual .terminal .ok { color: #a0c4a1; }

.landing .edo .visual .files {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-soft);
}
.landing .edo .visual .files .f { display: flex; gap: 8px; padding: 3px 0; }
.landing .edo .visual .files .f .gl {
  display:inline-block; width: 10px; height: 10px;
  border-radius: 2px; background: var(--sky-soft);
  flex: 0 0 auto; margin-top: 3px;
}
.landing .edo .visual .files .f.dir .gl { background: var(--sun-soft); }
.landing .edo .visual .files .f .pth { color: var(--ink); }
.landing .edo .visual .files .f .meta { color: var(--ink-faint); margin-left: auto; }

.landing .gems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.landing .gem {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  min-height: 280px;
}
.landing .gem .gh {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.landing .gem .gem-mark {
  width: 38px; height: 38px;
  border-radius: 9px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 14px; font-weight: 500;
}
.landing .gem .gem-mark.a { background: var(--sky); color: #ffffff; }
.landing .gem .gem-mark.b { background: var(--sun); color: #5e4f1a; }
.landing .gem .gem-mark.c { background: var(--ink); color: var(--paper); }
.landing .gem .gh .ver {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-faint); letter-spacing: 0.08em;
}
.landing .gem .nm {
  font-family: var(--f-display); font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.landing .gem .nm em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--ink-muted); margin-left: 6px; font-size: 18px; }
.landing .gem .gd {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.landing .gem .grow { flex: 1; }
.landing .gem .install {
  margin-top: 18px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  letter-spacing: 0;
  display: flex; align-items: center; gap: 8px;
}
.landing .gem .install::before { content: "$"; color: var(--ink-faint); }
.landing .gem .install span { color: var(--ink); }

.landing .ext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.landing .ext .info { padding: 44px 44px; display: flex; flex-direction: column; }
.landing .ext .info .row1 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.landing .ext .info h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 16px 0 6px;
}
.landing .ext .info h3 em { font-family: var(--f-serif); font-style: italic; }
.landing .ext .info .desc {
  font-size: 15.5px; line-height: 1.55;
  color: var(--ink-soft);
  max-width: 440px;
  margin-top: 16px;
  text-wrap: pretty;
}
.landing .ext .info .browsers {
  display: flex; gap: 8px;
  margin-top: 24px;
}
.landing .ext .info .browsers .b {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  color: var(--ink-muted);
}
.landing .ext .info .pill-sun {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--sun-tint);
  color: var(--sun-deep);
  font-weight: 500;
}
.landing .ext .info .actions {
  margin-top: 28px;
  display: flex; gap: 12px;
}
.landing .ext .visual {
  background: linear-gradient(160deg, var(--sun-tint), var(--paper-soft) 70%);
  padding: 36px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  border-left: 1px solid var(--rule);
}
.landing .ext .visual .browser-frame {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 30px -16px rgba(30,40,50,0.18);
  overflow: hidden;
}
.landing .ext .visual .bf-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.landing .ext .visual .bf-top .l { display: flex; gap: 5px; }
.landing .ext .visual .bf-top .l span { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.landing .ext .visual .bf-top .url {
  flex: 1;
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 8px;
}
.landing .ext .visual .bf-top .ext-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--sun);
  position: relative;
}
.landing .ext .visual .bf-top .ext-icon::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 7px; height: 7px; background: var(--sun-deep); border-radius: 50%;
  border: 1.5px solid var(--surface);
}
.landing .ext .visual .bf-body {
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.landing .ext .visual .bf-popup {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
  font-family: var(--f-display);
  font-size: 12px;
  color: var(--ink);
  align-self: flex-end;
  max-width: 80%;
  position: relative;
  margin-top: -2px;
}
.landing .ext .visual .bf-popup .ph {
  display:flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 9.5px;
  color: var(--ink-muted); letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.landing .ext .visual .bf-popup .ph .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sun-deep); }
.landing .ext .visual .bf-popup .pb { font-size: 13px; color: var(--ink); line-height: 1.45; }
.landing .ext .visual .bf-popup .pb b { color: var(--ink); font-weight: 600; }
.landing .ext .visual .bf-popup .pa { display: flex; gap: 8px; margin-top: 10px; }
.landing .ext .visual .bf-popup .pa .pbtn {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--ink); color: var(--paper);
  padding: 5px 10px; border-radius: 6px;
}
.landing .ext .visual .bf-popup .pa .pbtn.sec { background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); }
.landing .ext .visual .bf-line { height: 6px; background: var(--mist); border-radius: 3px; }
.landing .ext .visual .bf-line.short { width: 60%; }
.landing .ext .visual .bf-line.med { width: 80%; }

/* STUDIO */
.landing .studio {
  max-width: var(--page-max); margin: 0 auto;
  padding: 100px 36px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.landing .studio .col h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 16px 0 0;
}
.landing .studio .col h2 em { font-family: var(--f-serif); font-style: italic; color: var(--sun-deep); }
.landing .studio .col p {
  margin-top: 24px;
  font-family: var(--f-serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 460px;
  text-wrap: pretty;
}
.landing .studio .col p:not(:first-of-type) {
  font-family: var(--f-display);
  font-style: normal;
  font-size: 15.5px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.landing .location {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: 36px;
}
.landing .location .map {
  height: 240px;
  background: var(--sky-tint);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sky-soft);
}
.landing .location .map::before,
.landing .location .map::after {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px dashed var(--sky-deep);
  opacity: 0.35;
  transform: translate(-50%, -50%);
}
.landing .location .map::before { width: 180px; height: 180px; }
.landing .location .map::after { width: 320px; height: 320px; }
.landing .location .map .pin {
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sun-deep);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(168, 140, 44, 0.18);
}
.landing .location .map .pin-label {
  position: absolute; left: calc(50% + 16px); top: calc(50% - 12px);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-soft);
  text-transform: uppercase;
}
.landing .location .map .coast {
  position: absolute;
  inset: 12% -15% 18% 38%;
  background: var(--paper-soft);
  border-radius: 70% 30% 60% 40% / 50% 40% 60% 50%;
  opacity: 0.85;
}
.landing .location .stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.landing .location .stats .s {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.landing .location .stats .s b {
  display: block; margin-top: 6px;
  font-family: var(--f-display); font-weight: 500; font-size: 14.5px;
  color: var(--ink); letter-spacing: 0; text-transform: none;
}
.landing .location .stats .s b em {
  font-family: var(--f-jpserif); font-style: normal;
  margin-left: 6px; color: var(--ink-muted);
}

.landing .contact-card .item .lbl {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.landing .contact-card .item .v {
  margin-top: 8px;
  font-family: var(--f-serif); font-style: italic;
  font-size: 22px;
  color: var(--ink);
}

@media (max-width: 880px) {
  .landing .hero,
  .landing .intro,
  .landing .product,
  .landing .lab-head,
  .landing .studio,
  .landing .edo,
  .landing .ext { grid-template-columns: 1fr; }
  .landing .hero .right { justify-content: flex-start; }
  .landing .hero { padding: 60px 24px 60px; }
  .landing .lab-head .blurb { justify-self: start; text-align: left; }
  .landing .gems { grid-template-columns: 1fr; }
}

/* ── Phones ──────────────────────────────────────────────────────────
 * Once the grids stack, the desktop layout's asymmetric paddings
 * (.product .info padding-right, right-aligned heads), fixed-width mocks,
 * and the hero's decorative overflow (radial glow + negative-offset
 * annotations) leave sections clipped and off-centre. This block: kills
 * the horizontal overflow, gives every section the same gutter, scales
 * the hero display type down, and re-centres the mocks. */
@media (max-width: 560px) {
  /* stop decorative overflow (hero glow/annotations) from creating a
     horizontal scrollbar that shifts and clips the whole page */
  .landing { overflow-x: clip; }

  /* eyebrows are inline-flex (shrink-wrap to content), so their long
     uppercase text can't wrap and gets clipped — switch to block so the
     text reflows as normal inline content within the column */
  .landing .eyebrow {
    display: block;
    font-size: 10px; letter-spacing: 0.08em;
    white-space: normal; overflow-wrap: anywhere;
  }
  .landing .eyebrow::before { display: inline-block; vertical-align: middle; margin-right: 10px; }

  /* display headings use fixed / high clamp-floor sizes that overflow a
     phone column ("Sepia Braun" at 64px, h2s at 36px) — scale them to fit */
  .landing .product .info .name { font-size: clamp(38px, 12vw, 56px); }
  .landing .products-head h2,
  .landing .lab-head h2,
  .landing .studio .col h2 { font-size: clamp(30px, 8.5vw, 42px); }

  /* one consistent gutter + tighter vertical rhythm for every section */
  .landing .hero,
  .landing .intro,
  .landing .products,
  .landing .lab .inner,
  .landing .studio { padding-left: 22px; padding-right: 22px; }
  .landing .hero     { padding-top: 48px; padding-bottom: 48px; }
  .landing .intro    { padding-top: 56px; padding-bottom: 56px; }
  .landing .products { padding-top: 56px; padding-bottom: 56px; }
  .landing .lab .inner { padding-top: 64px; padding-bottom: 64px; }
  .landing .studio   { padding-top: 64px; padding-bottom: 64px; gap: 48px; }

  /* HERO — display type was clipping at the viewport edge */
  .landing .hero h1 { font-size: 32px; letter-spacing: -0.02em; line-height: 1.08; text-wrap: normal; }
  .landing .hero .lede { font-size: 20px; margin-top: 28px; }
  .landing .hero .meta-row { gap: 18px 26px; margin-top: 32px; }
  /* shrink the sun's glow and pull the annotations back on-screen */
  .landing .hero .right .mark-wrap::before { inset: -30px -24px; }
  .landing .hero .right .a1,
  .landing .hero .right .a2,
  .landing .hero .right .a3 { right: 0; }

  /* PRODUCTS — stack the head, drop right-alignment + asymmetric inset */
  .landing .products-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 40px; }
  .landing .products-head .right { text-align: left; }
  .landing .product { padding: 40px 0; gap: 32px; }
  .landing .product .info { padding-right: 0; }
  /* centre the fixed-width / image mocks in their now full-width cell */
  .landing .sepia-mag { width: min(320px, 100%); margin: 0 auto; }
  .landing .product .visual img { margin-left: auto; margin-right: auto; }

  /* LAB (Edo card) — trim oversized inner padding; keep the terminal
     mock's long monospace lines from pushing the page width */
  .landing .edo .info { padding: 28px 24px; }
  .landing .edo .visual { padding: 24px; }
  .landing .edo .visual .terminal { font-size: 11px; overflow-x: auto; }

  /* STUDIO — trim the location card; tighten the contact grid (its
     columns are set inline, so override the gap) */
  .landing .location { padding: 22px; }
  .landing .contact-card { gap: 22px !important; }
}

/* Japanese — swap the Latin display + serif tokens for their JP
 * equivalents so the h1, lede, intro body, italic emphases, etc.
 * render in Noto Sans JP / Noto Serif JP. Mono stays Latin because
 * the terminal mock + ASCII labels read better in Geist Mono. The
 * .jp strap already uses --f-jp explicitly, so it's unaffected. */
html[lang="ja"] .landing {
  --f-display: var(--cms-font-jp,       'Noto Sans JP'),   -apple-system, system-ui, sans-serif;
  --f-serif:   var(--cms-font-jp-serif, 'Noto Serif JP'),  Georgia, serif;
}

/* JP characters carry more weight per glyph than Latin, so the Latin
 * display sizes look overbearing in Japanese. Pull the hero h1 down
 * a step, open up letter-spacing (tight tracking collapses kanji),
 * and lift line-height for proper kana/kanji breathing. */
html[lang="ja"] .landing .hero h1 {
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: 0;
  line-height: 1.3;
}