/* ══ PanelPro Studio — landing ═════════════════════════════════════════════
   The page is painted RAL 7035: the light grey every control panel enclosure
   in the world is finished in. Everything is quiet and unsaturated so the two
   photoreal renders are the only rich things on the page — and the accent is
   the exact orange of a Phoenix terminal lever, which is sitting in them.  */

@font-face {
  font-family: 'Archivo Exp';
  src: url('fonts/archivo-expanded.a152b7ab.woff2') format('woff2');
  font-weight: 500 800;
  font-stretch: 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans.fa41c43a.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/plex-mono-500.b1c8a895.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --ral:        #DDE0DE;   /* RAL 7035 — the page */
  --ral-deep:   #CFD3D1;   /* recessed bands */
  --white:      #FFFFFF;
  --ink:        #14191C;
  --steel:      #59636A;
  --hair:       #B6BCB9;
  --gunmetal:   #191F23;
  --lever:      #E8551D;   /* Phoenix terminal lever */
  --lever-deep: #C4400E;

  --display: 'Archivo Exp', 'Arial Black', 'Segoe UI', sans-serif;
  --body:    'Instrument Sans', system-ui, 'Segoe UI', sans-serif;
  --data:    'Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  --maxw: 1220px;
  --gut: 28px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--ral);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--lever);
  outline-offset: 3px;
}

/* ── Type roles ─────────────────────────────────────────────────────────── */
h1, h2, h3, .price {
  font-family: var(--display);
  font-stretch: 125%;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
h1 { font-size: clamp(42px, 7vw, 92px); font-weight: 800; }
h2 { font-size: clamp(27px, 3.4vw, 40px); font-weight: 700; }

.kicker, .eyebrow, .fine, .tb-label, .items-head, .cap-meta, .price-alt, .beta-tag {
  font-family: var(--data);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.kicker {
  font-size: 11px;
  color: var(--lever);
  margin-bottom: 16px;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--lever);
  vertical-align: 0.28em;
  margin-right: 10px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border: 1.5px solid var(--ink);
  border-radius: 1px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-solid { background: var(--lever); border-color: var(--lever); color: #fff; }
.btn-solid:hover { background: var(--lever-deep); border-color: var(--lever-deep); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ral); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-block { display: block; text-align: center; margin-top: 24px; }

/* ── Top bar ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(221, 224, 222, 0.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 13px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark b { color: var(--lever); font-weight: 700; }
.mark { width: 19px; height: 19px; color: var(--lever); flex: none; }
.chip {
  font-family: var(--data);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--hair);
  padding: 2px 6px 1px;
  margin-left: 2px;
}
.topnav { display: flex; align-items: center; gap: 20px; }
.navlink {
  color: var(--steel);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.navlink:hover { color: var(--ink); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 74px var(--gut) 46px;
}
.eyebrow { font-size: 11px; color: var(--steel); margin-bottom: 24px; }
.hero h1 { font-size: clamp(34px, 7.2vw, 88px); }
.hero-foot {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 60px;
  align-items: start;
}
.lede { font-size: 18.5px; color: var(--steel); max-width: 50ch; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.fine { margin-top: 16px; font-size: 10.5px; color: var(--steel); }

/* ── Signature: balloted assembly render ───────────────────────────────── */
.plate {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gut) 84px;
}
.plate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 322px;
  gap: 30px;
  align-items: start;
}

.drawing-img {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink);
}
.drawing-img img { width: 100%; }

.balloons { list-style: none; }
.balloons li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
}
.balloons button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--data);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
  transition: background-color .16s ease, color .16s ease,
              transform .16s ease, border-color .16s ease;
}
.balloons li.lit button,
.balloons button:hover {
  background: var(--lever);
  border-color: var(--lever);
  color: #fff;
  transform: scale(1.22);
}

/* Draw the balloons on after the render has settled. */
@media (prefers-reduced-motion: no-preference) {
  .balloons li { animation: pop .45s cubic-bezier(.2, .9, .3, 1.4) backwards; }
  .balloons li:nth-child(1) { animation-delay: .35s }
  .balloons li:nth-child(2) { animation-delay: .45s }
  .balloons li:nth-child(3) { animation-delay: .55s }
  .balloons li:nth-child(4) { animation-delay: .65s }
  .balloons li:nth-child(5) { animation-delay: .75s }
  .balloons li:nth-child(6) { animation-delay: .85s }
}
@keyframes pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.2) }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}

.drawing figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 11px;
}
.cap-name {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 15px;
}
.cap-meta { font-size: 10px; color: var(--steel); letter-spacing: 0.09em; }

/* Item list — the drawing's parts table */
.items { border-top: 2px solid var(--ink); padding-top: 12px; }
.items-head {
  font-size: 10.5px;
  color: var(--ink);
  margin-bottom: 10px;
}
.items-head span { color: var(--steel); letter-spacing: 0.09em; }
.itemtable { list-style: none; }
.itemtable li {
  display: grid;
  grid-template-columns: 20px 62px 1fr;
  gap: 0 9px;
  padding: 9px 8px 9px 5px;
  border-bottom: 1px solid var(--hair);
  border-left: 2px solid transparent;
  font-size: 13.5px;
  transition: background-color .16s ease, border-left-color .16s ease;
}
.itemtable li.lit {
  background: var(--white);
  border-left-color: var(--lever);
}
.itemtable .no {
  font-family: var(--data);
  font-size: 11px;
  color: var(--steel);
  padding-top: 2px;
}
.itemtable .ref {
  font-family: var(--data);
  font-size: 11px;
  color: var(--ink);
  padding-top: 2px;
}
.itemtable .nm { line-height: 1.35; }
.itemtable .mfr {
  grid-column: 3;
  font-size: 11.5px;
  color: var(--steel);
}
.items-foot {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--steel);
  line-height: 1.5;
}

/* ── Export hierarchy block (stands in for a screenshot in the export row) ── */
.tree {
  font-family: var(--data);
  font-size: 12.5px;
  line-height: 1.85;
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--lever);
  color: var(--steel);
  overflow-x: auto;
  white-space: pre;
}
.t-root { color: var(--ink); font-weight: 500 }
.t-enc, .t-bp { color: var(--ink) }
.t-ref { color: var(--lever) }

/* ── Features ──────────────────────────────────────────────────────────── */
.features {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px var(--gut) 20px;
}
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
  align-items: center;
  padding: 66px 0;
  border-bottom: 1px solid var(--hair);
}
.feature:last-child { border-bottom: none; }
.feature.flip .feature-text { order: 2; }
.feature.flip .feature-shot { order: 1; }
/* :not(.kicker) matters — `.feature-text > p` (0,1,1) outranks `.kicker` (0,1,0),
   so without it every kicker rendered steel grey instead of the accent. */
.feature-text > p:not(.kicker) { margin-top: 16px; color: var(--steel); }

.ticks { list-style: none; margin-top: 20px; }
.ticks li {
  position: relative;
  padding: 7px 0 7px 27px;
  font-size: 15.5px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 15px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--lever);
  border-bottom: 2px solid var(--lever);
  transform: rotate(-45deg);
}

/* Cap the height so no single row dominates: the BOM shot is portrait and the
   layout shot is a wide strip, and every capability here carries equal weight. */
.feature-shot img {
  max-width: 100%;
  max-height: 560px;
  width: auto;
  border: 1px solid var(--ink);
  background: var(--white);
  box-shadow: 12px 12px 0 rgba(20, 25, 28, .07);
}
.feature-shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--steel);
  max-width: 48ch;
}
/* The export tree stands in for a screenshot in its row. */
.feature-shot .tree { margin-top: 0; }

/* ── Team band ─────────────────────────────────────────────────────────── */
.team { background: var(--gunmetal); color: var(--ral); }
.team-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 86px var(--gut);
}
.team h2 { color: #fff; max-width: 15ch; }
.team-lede { margin-top: 18px; color: #9AA5AB; max-width: 54ch; font-size: 18px; }
.team-cols {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}
.team-cols h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  padding-top: 15px;
  border-top: 1px solid #3B464D;
  line-height: 1.25;
}
.team-cols p { margin-top: 10px; font-size: 14.5px; color: #9AA5AB; }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.pricing {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 86px var(--gut) 72px;
}
.plans {
  margin-top: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 880px;
}
.plan {
  background: var(--white);
  border: 1px solid var(--ink);
  padding: 32px 32px 28px;
}
.plan-pro { border-color: var(--lever); box-shadow: 12px 12px 0 rgba(232, 85, 29, .13); }
.plan-name { font-size: 22px; font-weight: 700; }
.plan-for { color: var(--steel); font-size: 14.5px; margin-top: 3px; }
.price { margin-top: 20px; font-size: 38px; font-weight: 700; }
.price-per {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  color: var(--steel);
  letter-spacing: 0;
}
.price-alt { font-size: 10.5px; color: var(--steel); margin-top: 4px; }
.plan .ticks { margin-top: 22px; }
.plan .ticks li { font-size: 15px; padding-top: 6px; padding-bottom: 6px; }
.trial-note { margin-top: 28px; color: var(--steel); font-size: 15px; }

/* ── Beta ──────────────────────────────────────────────────────────────── */
.beta { border-top: 1px solid var(--hair); background: var(--ral-deep); }
.beta-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px var(--gut);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 32px;
  align-items: start;
}
.beta-tag {
  font-size: 11px;
  color: var(--lever);
  border: 1.5px solid var(--lever);
  padding: 5px 0 4px;
  text-align: center;
}
.beta h2 { font-size: clamp(21px, 2.2vw, 26px); }
.beta p { margin-top: 12px; color: var(--steel); font-size: 15px; max-width: 74ch; }
.beta strong { color: var(--ink); font-weight: 600; }

/* ── Footer title block ────────────────────────────────────────────────── */
.titleblock { border-top: 1px solid var(--ink); background: var(--white); }
.tb-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}
.tb-cell {
  padding: 17px 20px 19px;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tb-cell:first-child { border-left: 1px solid var(--hair); }
.tb-label { font-size: 9.5px; color: var(--steel); }
.tb-value { font-size: 13.5px; }
.tb-links a { color: var(--lever-deep); text-decoration: none; }
.tb-links a:hover { text-decoration: underline; }
.tb-note .tb-value { color: var(--steel); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .plate-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* Once the item list sits under the render it has the full content width, and
     a single column of six rows leaves most of each row empty. Two columns keep
     the reference and the part name next to each other where they belong. */
  .itemtable { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
  .itemtable li:nth-child(2) { border-top: 1px solid var(--hair); }
  .items-foot { max-width: 62ch; }
  .plate { padding-bottom: 52px; }
  .features { padding-top: 8px; }
}

@media (max-width: 900px) {
  .hero { padding-top: 52px; }
  .hero-foot { grid-template-columns: 1fr; margin-top: 30px; padding-top: 26px; }
  /* minmax(0,…): the export row's figure holds a wide <pre>, and a bare 1fr
     track takes its min-content width and bleeds the page sideways. */
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 48px 0; }
  .feature.flip .feature-text { order: 1; }
  .feature.flip .feature-shot { order: 2; }
  .team-cols { grid-template-columns: 1fr; gap: 28px; }
  .plans { grid-template-columns: 1fr; }
  .specs > div { grid-template-columns: 1fr; gap: 6px; }
  .beta-inner { grid-template-columns: 1fr; gap: 18px; }
  .beta-tag { width: 92px; }
  .tb-grid { grid-template-columns: 1fr 1fr; }
  .tb-cell { border-left: none !important; border-right: none; border-bottom: 1px solid var(--hair); }
  .tb-cell:last-child { border-bottom: none; }
}

@media (max-width: 620px) {
  :root { --gut: 18px; }
  body { font-size: 16px; }
  .navlink { display: none; }
  .topnav { gap: 10px; }
  .chip { display: none; }
  .btn { padding: 10px 14px; font-size: 14px; }
  .hero { padding-top: 40px; padding-bottom: 30px; }
  .lede { font-size: 17px; }
  .plate { padding-bottom: 56px; }
  .plate-grid { gap: 22px; }
  .itemtable { grid-template-columns: 1fr; gap: 0; }
  .itemtable li:nth-child(2) { border-top: none; }
  .team-inner { padding: 60px var(--gut); }
  .pricing { padding: 60px var(--gut) 52px; }
  .plan { padding: 26px 22px; }
  .tb-grid { grid-template-columns: 1fr; }

  /* The wordmark was wrapping onto a second line and doubling the bar height. */
  .wordmark { font-size: 14px; gap: 7px; white-space: nowrap; }
  .mark { width: 16px; height: 16px; }

  /* Balloons stay: hiding them left the item list numbering pointing at nothing.
     Smaller, but still a legible target. */
  .balloons button { width: 21px; height: 21px; font-size: 10px; border-width: 1.2px; }

  .drawing figcaption { display: block; }
  .cap-meta { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.06em; }
  .fine { letter-spacing: 0.05em; }

  /* Screenshots are dense; give them the full viewport width rather than losing
     another 36px to the gutter, and drop the offset shadow that ate into it. */
  .feature-shot picture { display: block; margin: 0 calc(var(--gut) * -1); }
  .feature-shot img {
    width: 100%;
    max-height: none;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
  }
  .feature-shot figcaption { margin-top: 10px; }
}

/* Small phones: the wordmark plus two bordered buttons no longer fit on one
   line, so Log in drops its border and becomes a plain link. */
@media (max-width: 460px) {
  .topnav .btn-ghost { border-color: transparent; padding-left: 2px; padding-right: 2px; }
  .topnav .btn-ghost:hover { background: transparent; color: var(--lever-deep); }
}

@media (max-width: 400px) {
  .topnav { gap: 8px; }
  .wordmark { font-size: 13px; }
  .btn-solid { padding: 9px 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ══ Manual ════════════════════════════════════════════════════════════════
   Long-form reading, so: one narrow column, generous leading, and headings
   that stay out of the way. The landing page is a pitch and can be dense;
   this is a document someone reads at a bench with one hand free.          */

.doc {
  max-width: 47rem;
  margin: 0 auto;
  padding: 0 var(--gut) 6rem;
}
.doc-head { padding: 4.5rem 0 2.5rem; }
.doc-head h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0.4rem 0 1.2rem;
}
.doc-head .lede { max-width: 40rem; }

.doc-toc {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 3.5rem;
}
.doc-toc h2 {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 0.8rem;
}
.doc-toc ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2rem; }
.doc-toc li { margin: 0.3rem 0; break-inside: avoid; }
.doc-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.doc-toc a:hover { border-bottom-color: var(--lever); color: var(--lever-deep); }

.doc-sec { margin-bottom: 3.2rem; scroll-margin-top: 5rem; }
.doc-sec h2 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--ink);
}
.doc-sec h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 1.8rem 0 0.5rem;
  color: var(--ink);
}
.doc-sec p { margin: 0 0 0.95rem; line-height: 1.65; color: #2b3438; }
.doc-sec code {
  font-family: var(--data);
  font-size: 0.88em;
  background: var(--ral-deep);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.doc-sec strong { font-weight: 600; }
.doc-sec .itemtable { width: 100%; margin-top: 0.5rem; }
.doc-sec .itemtable td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--hair); }
.doc-sec .itemtable td:first-child { width: 12rem; }
kbd {
  font-family: var(--data);
  font-size: 0.8rem;
  background: var(--white);
  border: 1px solid var(--hair);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0.1em 0.4em;
}

@media (max-width: 640px) {
  .doc-toc ol { columns: 1; }
}