/* ============================================================
   Penna — marketing landing
   Faithful build of the "Marketing · Landing" design board
   (desktop 1440 + mobile 390), merged into one responsive page.
   Palette = the Onionskin light theme (penna-tokens.js, SSOT).
   ============================================================ */

:root {
  /* Type stack */
  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
  --hand:  'Caveat', cursive;

  /* Onionskin palette */
  --pg:#f9fafe; --paper:#fcfdff; --rail:#f5f7fc;
  --ink:#1b1d24; --ink-2:#565c6a; --ink-3:#888fa2; --dim:#c2c7d6;
  --hair:#e6e9f2; --accent:#3d54b4; --accent-soft:#dce3f8;
  --danger:#d6483b;
  --sh:30,34,54;

  /* Elevation (derived) */
  --card-sh: 0 1px 2px rgba(22,24,26,.04), 0 30px 70px -34px rgba(var(--sh),.30);
  --win-shadow: 0 1px 2px rgba(var(--sh),.06), 0 44px 96px -42px rgba(var(--sh),.42);

  /* Full-bleed sections; inner content is centered at this max width
     (1328 = the design's 1440 board minus its 2×56 gutter). */
  --gutter: 56px;
  --content-max: 1328px;
}

/* Center a full-bleed section's content at --content-max, with at least
   --gutter of side padding on narrower screens. */


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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--pg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

@keyframes caret { 0%,48%{opacity:1} 52%,100%{opacity:0} }

/* Full-screen surface — no framing card; the app surface IS the page. */
.page { width: 100%; }

.board { background: var(--pg); width: 100%; }
.board--desktop { display: block; }
.board--mobile  { display: none; max-width: 480px; margin: 0 auto; }

/* Board visibility switch */
@media (max-width: 860px) {
  .board--desktop { display: none; }
  .board--mobile  { display: block; }
}

/* Shrinking gutter on narrower desktop widths */
@media (max-width: 1100px) { :root { --gutter: 40px; } }
@media (max-width: 940px)  { :root { --gutter: 28px; } }

/* ---- icons (inline; sized via width/height) ---- */
.i { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.i svg { display: block; }

/* =====================================================================
   DESKTOP BOARD
   ===================================================================== */

/* top nav */
.d-nav {
  height: 74px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(var(--gutter), calc((100% - var(--content-max)) / 2));
  border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--pg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  position: relative; width: 30px; height: 30px; flex: none; border-radius: 22.5%;
  background: linear-gradient(180deg,#ffffff,#f3f4f6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 3px rgba(22,24,26,.14);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.brand__mark > span {
  font-family: 'EB Garamond', serif; font-weight: 600; font-size: 27px; line-height: 1;
  color: #26303f; transform: translateY(-3.1%);
}
.brand__name { font: 400 italic 24px/1 var(--serif); color: var(--ink); letter-spacing: -.01em; }

.d-nav__right { display: flex; align-items: center; gap: 26px; }
.d-nav__os {
  font: 500 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

.btn-download {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 13px/1 var(--sans); color: var(--paper); background: var(--ink);
  padding: 11px 17px; border-radius: 9px; cursor: pointer; border: 0; text-decoration: none;
  transition: opacity var(--dur, .15s) ease;
}
.btn-download:hover { color: var(--paper); opacity: .88; }
.btn-download--lg { gap: 10px; font-size: 15px; padding: 16px 24px; border-radius: 11px; }

/* "Coming soon" — the same pill, non-interactive until the notarized build ships. */
.btn-download.is-soon { cursor: default; opacity: .72; }
.btn-download.is-soon:hover { color: var(--paper); opacity: .72; }
.btn-download--light.is-soon:hover { color: var(--ink); }
.m-cta__btn.is-soon { cursor: default; }

/* hero */
.d-hero {
  padding: 120px max(var(--gutter), calc((100% - var(--content-max)) / 2)) 128px;
  text-align: center;
}
.eyebrow {
  font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 32px;
}
.d-hero h1 {
  font: 600 92px/.98 var(--serif); font-size: clamp(52px, 7.2vw, 92px);
  letter-spacing: -.025em; margin: 0 auto; max-width: 15ch; color: var(--ink);
}
.d-hero__lede {
  font: 400 22px/1.55 var(--serif); color: var(--ink-2); margin: 30px auto 0; max-width: 40rem;
}
.d-hero__cta {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  flex-wrap: wrap; margin-top: 44px;
}
.req { font: 400 13px/1.6 var(--mono); color: var(--ink-3); text-align: left; }

/* the app, as the presentation */
.d-app { padding: 0 max(var(--gutter), calc((100% - var(--content-max)) / 2)) 96px; }
.d-app__cap {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px;
}
.d-app__cap-l {
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.d-app__cap-r { font: 400 italic 15px/1 var(--serif); color: var(--ink-3); }

.appwin {
  height: 940px; background: var(--pg); border-radius: 14px; border: 1px solid var(--hair);
  box-shadow: var(--card-sh); overflow: hidden; display: flex; flex-direction: column;
}
.appwin__titlebar {
  height: 40px; flex: none; position: relative; display: flex; align-items: center;
  padding: 0 16px; border-bottom: 1px solid var(--hair);
}
.traffic { display: flex; gap: 8px; flex: none; }
.traffic span { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); }
.appwin__title {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
}
.appwin__title .t-app  { font: 400 13px/1 var(--sans); color: var(--ink-2); }
.appwin__title .t-sep  { font: 400 13px/1 var(--sans); color: var(--ink-3); }
.appwin__title .t-doc  { font: 500 13px/1 var(--sans); color: var(--ink); }
.appwin__gear {
  margin-left: auto; width: 30px; height: 30px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3);
}
.appwin__progress { height: 2px; flex: none; background: var(--hair); }
.appwin__progress > div { height: 2px; width: 0%; background: var(--accent); transition: width .12s linear; }

.appwin__body { flex: 1; display: flex; min-height: 0; }

/* sidebar */
.side {
  width: 266px; flex: none; border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; padding: 0 0 18px;
}
.side__brand { height: 62px; flex: none; display: flex; align-items: center; padding: 0 22px; }
.side__brand span { font: 600 27px/1 var(--hand); color: var(--ink); }
.side__group { padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }
.side__label {
  padding: 22px 24px 8px; font: 500 10px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.navitem {
  padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; font: 400 14px/1.3 var(--sans); color: var(--ink-2);
  background: none; border: 0; width: 100%; text-align: left;
}
.navitem:hover { background: var(--hair); }
.navitem.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.navitem__dot {
  width: 6px; height: 6px; border: 1.4px solid currentColor; transform: rotate(45deg);
  display: inline-block; flex: none;
}
.navitem__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__spacer { flex: 1; }

/* editor */
.editor { flex: 1; min-width: 0; position: relative; overflow-y: auto; background: var(--pg); scroll-behavior: smooth; }
.editor::-webkit-scrollbar { width: 11px; }
.editor::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 6px; border: 3px solid var(--paper); }
.editor::-webkit-scrollbar-track { background: transparent; }
.editor__inner { max-width: 640px; margin: 0 auto; padding: 64px 32px 620px; }

.piece + .piece { margin-top: 72px; }
.piece__eyebrow {
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 16px;
}
.piece h1 {
  font: 600 34px/1.12 var(--serif); letter-spacing: -.015em; margin: 0 0 22px; color: var(--ink);
}
.piece h2 {
  font: 600 22px/1.25 var(--serif); letter-spacing: -.01em; margin: 0 0 12px; color: var(--ink);
}
.piece p { font: 400 18px/1.8 var(--serif); color: var(--ink); margin: 0 0 20px; }
.piece p:last-child { margin-bottom: 0; }
.piece b { font-weight: 600; }
.piece a { text-decoration: underline; text-underline-offset: 2px; }

.piece blockquote {
  margin: 0 0 22px; padding: 2px 0 2px 22px; border-left: 2px solid var(--accent);
  font: 400 italic 20px/1.6 var(--serif); color: var(--ink-2);
}
.piece ul, .piece ol { font: 400 18px/1.8 var(--serif); color: var(--ink); margin: 0 0 18px; padding-left: 24px; }
.piece ol { margin-bottom: 22px; }
.piece li:not(:last-child) { margin-bottom: 4px; }
.piece code {
  font: 500 15px/1 var(--mono); background: var(--rail); padding: 2px 6px; border-radius: 5px; color: var(--ink);
}
.piece pre {
  font: 400 14px/1.7 var(--mono); background: var(--rail); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 9px; padding: 16px 18px; margin: 0 0 22px;
  overflow-x: auto; white-space: pre;
}
.piece table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 22px; }
.piece td { border: 1px solid var(--hair); padding: 11px 15px; font: 400 16px/1.5 var(--serif); color: var(--ink); vertical-align: middle; }
.piece tr:first-child td { font-weight: 600; }
.piece td.dim { color: var(--ink-2); }
.piece hr { border: 0; border-top: 1px solid var(--hair); margin: 0 0 22px; }
.caret-blink {
  display: inline-block; width: 2px; height: 1.2em; background: var(--ink);
  margin-left: 2px; transform: translateY(.18em); animation: caret 1.1s steps(1) infinite;
}

/* status bar */
.appwin__status {
  height: 40px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; border-top: 1px solid var(--hair);
  font: 400 11px/1 var(--mono); color: var(--ink-3); letter-spacing: .02em;
}
.appwin__status .dot { width: 6px; height: 6px; border-radius: 50%; background: #28c840; display: inline-block; }
.appwin__status .l { display: flex; gap: 7px; align-items: center; }
.appwin__status .r { display: flex; gap: 9px; align-items: center; }

/* footer */
.d-foot {
  background: var(--ink); color: var(--paper);
  padding: 104px max(var(--gutter), calc((100% - var(--content-max)) / 2)) 40px;
}
.d-foot__hero { text-align: center; }
.d-foot__hand { font: 600 96px/.9 var(--hand); font-size: clamp(52px, 7.5vw, 96px); margin: 0 auto; }
.d-foot__lede {
  font: 400 19px/1.6 var(--serif); color: color-mix(in srgb, var(--paper) 74%, transparent);
  max-width: 34rem; margin: 26px auto 0;
}
.d-foot__cta { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; }
.btn-download--light { color: var(--ink); background: var(--paper); }
.btn-download--light:hover { color: var(--ink); }
.req--light { color: color-mix(in srgb, var(--paper) 60%, transparent); }

.d-foot__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  margin-top: 96px; padding-top: 26px; border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.d-foot__brand { display: flex; align-items: center; gap: 13px; }
.d-foot__brand .brand__mark { width: 36px; height: 36px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.28); }
.d-foot__brand .brand__mark > span { font-size: 32px; }
.d-foot__brand .nm { font: 400 italic 20px/1 var(--serif); }
.d-foot__brand .os { font: 400 12px/1 var(--mono); color: color-mix(in srgb, var(--paper) 45%, transparent); margin-left: 6px; }
.d-foot__nav { display: flex; gap: 26px; font: 500 12px/1 var(--sans); }
.d-foot__nav span { color: color-mix(in srgb, var(--paper) 66%, transparent); cursor: pointer; }
.d-foot__nav span:hover { color: var(--paper); }
.d-foot__copy { font: 400 11px/1.5 var(--mono); color: color-mix(in srgb, var(--paper) 45%, transparent); text-align: right; }

/* =====================================================================
   MOBILE BOARD
   ===================================================================== */
.m-nav {
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--pg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
}
.m-nav .brand__mark { width: 26px; height: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(22,24,26,.14); }
.m-nav .brand__mark > span { font-size: 23px; }
.m-nav .brand__name { font-size: 21px; }
.m-pill {
  font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--hair); padding: 5px 9px; border-radius: 999px;
}

.m-hero { padding: 44px 24px 40px; }
.m-hero .eyebrow { font-size: 10px; letter-spacing: .18em; margin-bottom: 20px; }
.m-hero h1 { font: 600 42px/1.02 var(--serif); letter-spacing: -.02em; margin: 0; color: var(--ink); }
.m-hero__lede { font: 400 16px/1.62 var(--serif); color: var(--ink-2); margin: 20px 0 0; }

.m-cta { margin-top: 28px; border: 1px solid var(--hair); border-radius: 14px; background: var(--paper); padding: 20px; }
.m-cta__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.m-cta__diamond { width: 10px; height: 10px; border: 1.5px solid var(--ink-2); transform: rotate(45deg); display: inline-block; }
.m-cta__head span:last-child { font: 600 14px/1 var(--sans); color: var(--ink); }
.m-cta__btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 14px/1 var(--sans); color: var(--ink-3); border: 1.5px solid var(--dim);
  border-radius: 10px; padding: 14px;
}
.m-cta__note { font: 400 12px/1.6 var(--mono); color: var(--ink-3); margin: 12px 0 0; }

.m-contents { padding: 0 24px 8px; }
.m-contents__card { background: var(--rail); border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; }
.m-contents__label { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.m-contents__list { display: flex; flex-direction: column; gap: 9px; }
.m-contents__row { display: flex; align-items: baseline; gap: 10px; font: 400 14px/1.2 var(--sans); color: var(--ink-2); }
.m-contents__num { font: 500 10px/1 var(--mono); color: var(--ink-3); width: 24px; flex: none; }

.m-read { padding: 24px; }
.m-read__card { background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 30px 24px; }
.m-sec { padding: 28px 0; border-top: 1px solid var(--hair); }
.m-sec:first-child { padding: 0 0 28px; border-top: 0; }
.m-sec:last-child { padding: 28px 0 0; }
.m-sec__eyebrow { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.m-sec h2 { font: 600 23px/1.16 var(--serif); letter-spacing: -.01em; margin: 0 0 14px; color: var(--ink); }
.m-sec p { font: 400 15.5px/1.72 var(--serif); color: var(--ink); margin: 0; }
.m-sec p + p { margin-top: 14px; }
.m-sec b { font-weight: 600; }
.m-sec a { text-decoration: underline; text-underline-offset: 2px; }
.m-sec blockquote { margin: 18px 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--accent); font: 400 italic 17px/1.55 var(--serif); color: var(--ink-2); }
.m-sec ul { font: 400 15.5px/1.72 var(--serif); color: var(--ink); margin: 0 0 16px; padding-left: 22px; }
.m-sec pre { font: 400 12.5px/1.7 var(--mono); background: var(--rail); color: var(--ink); border: 1px solid var(--hair); border-radius: 8px; padding: 14px; margin: 0; overflow-x: auto; white-space: pre; }

.m-foot { background: var(--ink); color: var(--paper); padding: 44px 24px 30px; text-align: center; }
.m-foot__hand { font: 600 46px/.92 var(--hand); }
.m-foot__lede { font: 400 14.5px/1.6 var(--serif); color: color-mix(in srgb, var(--paper) 72%, transparent); margin: 16px 0 0; }
.m-foot__bar {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 26px;
  padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.m-foot__diamond { width: 10px; height: 10px; border: 1.5px solid var(--paper); transform: rotate(45deg); display: inline-block; }
.m-foot__nm { font: 400 italic 18px/1 var(--serif); }
.m-foot__copy { font: 400 11px/1 var(--mono); color: color-mix(in srgb, var(--paper) 45%, transparent); margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  .caret-blink { animation: none; }
  .editor { scroll-behavior: auto; }
}