/* Iono: the page is the bench the radio sits on. Background, lettering and accents come
   from the panel design files (backdrop #d6d3cd, Barlow Condensed legends, orange shift ink). */

/* Barlow and Barlow Condensed (SIL OFL 1.1, fonts/OFL.txt), served by the site itself. */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/BarlowCondensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/BarlowCondensed-Bold.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Barlow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/Barlow-Italic.woff2") format("woff2"); }

:root {
  --bench: #d6d3cd;
  --bench-hi: #e2dfda;
  --rule: #bdb9b2;
  --ink: #1f2023;
  --muted: #55585d;
  --quiet: #7a7d82;
  --shift: #c2651a;
  --shift-deep: #9a4f12;
  --metal: #2c2e32;
  --legend: #e8eaed;
  --chassis: #35383c;
  --chassis-text: #b9bdc3;
  --lcd: radial-gradient(130% 150% at 28% 18%, #ffcf7a 0%, #f7a23a 50%, #db7a1d 100%);
  --lcd-ink: #2a1403;
  --neg: radial-gradient(130% 150% at 28% 18%, #3d2108 0%, #1c0d03 70%);
  --neg-ink: #ffb247;

  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bench);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--shift-deep); text-underline-offset: 0.18em; }
a:hover { color: var(--shift); }
:focus-visible { outline: 2px solid var(--shift); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px;
  font: 600 1rem var(--condensed); text-decoration: none;
}
.skip:focus { top: 12px; }

h1, h2, h3 { font-family: var(--condensed); font-weight: 600; margin: 0; text-wrap: balance; color: var(--ink); }
p { margin: 0 0 1em; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 820px; }

/* ---------------------------------------------------------------- top bar */

/* anchors land below the pinned bar */
html { scroll-padding-top: 88px; }
@media (max-width: 980px) { html { scroll-padding-top: 112px; } }

.bar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(214, 211, 205, 0.92); border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.bar-in {
  max-width: 1320px; margin: 0 auto; padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.logo {
  font: 700 26px/1 var(--condensed);
  letter-spacing: 0.34em;
  color: var(--ink);
  text-decoration: none;
}
.logo:hover { color: var(--ink); }

.langs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.langs a, .langs span {
  display: inline-block; padding: 4px 9px; border-radius: 5px;
  font: 600 14px/1.2 var(--condensed); letter-spacing: 0.12em; text-decoration: none; color: var(--muted);
}
.langs a:hover { color: var(--ink); background: rgba(0, 0, 0, 0.05); }
.langs span[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--shift); }

/* ---------------------------------------------------------------- hero */

.hero { padding: 48px 0 24px; }
.legend {
  margin: 0 0 18px;
  font: 600 13px/1.2 var(--condensed); letter-spacing: 0.2em; color: var(--quiet);
}
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: 13em;
}
.lead { margin: 24px 0 30px; color: var(--muted); max-width: 36em; }


/* App Store placeholder: not a link until the app is published. */
.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 14px;
  background: #000; color: #fff;
  border-radius: 10px;
}
.store-lamp {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #ff9e45; box-shadow: 0 0 8px rgba(255, 158, 69, 0.8);
}
.store-text { display: flex; flex-direction: column; line-height: 1.05; }
.store-soon { font: 400 12px/1.1 var(--text); }
.store-where { font: 500 21px/1.1 var(--text); letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- rows */

.row { padding: 96px 0; border-top: 1px solid var(--rule); }
.row h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; max-width: 17em; }
.intro { margin: 18px 0 0; max-width: 36em; color: var(--muted); }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px; align-items: center;
}
.split.flip > figure { order: -1; }

/* pieces of the real panel, cut from captures of the app */
.shot img {
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 24px 48px -18px rgba(0, 0, 0, 0.45);
}
.shot figcaption {
  margin-top: 12px; color: var(--quiet);
  font: 500 1rem/1.4 var(--condensed); letter-spacing: 0.03em;
}

.silk {
  display: block; margin-bottom: 6px;
  font: 600 13px/1 var(--condensed); letter-spacing: 0.16em; color: var(--shift);
}

.chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 9px 15px 8px; border-radius: 6px;
  font: 600 15px/1 var(--condensed); letter-spacing: 0.1em; color: var(--legend);
  background: linear-gradient(180deg, #3a3d42, #1b1c1e);
  box-shadow: 0 2px 0 #0b0b0c, 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


.licence h2 { display: flex; align-items: baseline; gap: 14px; }
.licence h2::before {
  content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; translate: 0 -0.15em;
  background: radial-gradient(circle at 40% 35%, #ff9e8f, #ff3b2f 55%, #c42419);
  box-shadow: 0 0 10px rgba(255, 59, 47, 0.55);
}
.licence p { margin-top: 18px; max-width: 40em; }

.get-in { display: flex; align-items: center; gap: 48px; }
.get-icon { width: 160px; height: 160px; border-radius: 36px; flex: none; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.5); }
.get p { color: var(--muted); margin: 14px 0 24px; max-width: 34em; }

/* ---------------------------------------------------------------- top bar menu */

.menu { display: flex; gap: 6px 22px; margin-left: auto; margin-right: 12px; }
.menu a {
  font: 600 16px/1.2 var(--condensed); letter-spacing: 0.04em;
  color: var(--muted); text-decoration: none;
}
.menu a:hover { color: var(--ink); }
.menu a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--shift); }

/* ---------------------------------------------------------------- the live panel */

.rig { max-width: 1368px; margin: 44px auto 0; padding: 0 24px; }
.rig-stage {
  position: relative; aspect-ratio: 2560 / 1120; overflow: hidden;
  border-radius: 1.25% / 2.86%;
  box-shadow: 0 2px 0 #151617, 0 34px 60px -26px rgba(0, 0, 0, 0.55);
  background: var(--chassis);
}
.rig-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.45s ease;
}
.rig-face.on { opacity: 1; }
/* over the auxiliary screen of the capture, measured on the 2560 x 1120 files */
.rig-aux {
  position: absolute; left: 19.6875%; top: 67.5%; width: 49.6875%; height: 26.7857%;
  border-radius: 2px; opacity: 0; transition: opacity 0.6s ease;
}
.rig-aux.live { opacity: 1; }

.rig-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 22px; }
.rig-switch { display: none; }
.js .rig-switch {
  display: inline-flex; flex: none; padding: 4px; gap: 2px; border-radius: 12px;
  background: linear-gradient(180deg, #2b2d31, #1b1c1f);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rig-switch button {
  appearance: none; border: 0; cursor: pointer; border-radius: 9px;
  padding: 9px 18px 8px; background: transparent; color: #8d9196;
  font: 600 16px/1 var(--condensed); letter-spacing: 0.12em;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.rig-switch button:hover { color: var(--legend); }
.rig-switch button[aria-checked="true"] {
  color: #ff9e45;
  background: linear-gradient(180deg, #3d4045, #26282c);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 4px rgba(0, 0, 0, 0.5);
}
.rig[data-mode="poc"] .rig-switch button[aria-checked="true"] { color: #ff6a55; }
.rig-switch button:focus-visible { outline-offset: 1px; }
.rig-caption {
  flex: 1 1 22em; color: var(--muted);
  font: 500 1.0625rem/1.4 var(--condensed); letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- three positions */

.positions {
  list-style: none; margin: 52px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 36px;
}
.lcd {
  margin-bottom: 26px; border-radius: 10px; background: #0d0d0e;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 20px 34px -20px rgba(0, 0, 0, 0.6);
}
.positions h3 { font-size: 1.6rem; line-height: 1.1; margin-bottom: 10px; }
.positions p { margin: 0 0 8px; font-size: 1.0625rem; }
.positions .note { color: var(--muted); font: 500 1.0625rem/1.35 var(--condensed); letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- the operator: the one dark band, the colour of the chassis */

.row.oper {
  border-top: 0; color: var(--legend);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, rgba(0, 0, 0, 0.03) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, #3d4045 0%, #35383c 30%, #2c2e32 100%);
}
.oper h2 { color: #f2f3f5; }
.oper .intro { color: var(--chassis-text); }
.oper-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.oper-points { margin: 40px 0 0; display: grid; gap: 26px; }
.oper-points dt { font: 600 1.3rem/1.2 var(--condensed); color: #f2f3f5; margin-bottom: 6px; }
.oper-points dd { margin: 0; color: var(--chassis-text); font-size: 1.0625rem; }

.console { padding: 14px; border-radius: 16px; background: #0b0b0c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 26px 50px -24px rgba(0, 0, 0, 0.8); }
.console-glass { border-radius: 8px; padding: 26px 26px 22px; background: var(--neg); }
.console ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.console li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.console .who { font: 600 12px/1.2 var(--condensed); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 178, 71, 0.55); }
.console .said { font: 500 1.2rem/1.35 var(--condensed); letter-spacing: 0.02em; color: var(--neg-ink); text-shadow: 0 0 12px rgba(255, 158, 69, 0.35); }
.console .you .said { color: #f6e7d2; text-shadow: none; }
.console .you:not(:first-child) { margin-top: 10px; }
.console figcaption { padding: 12px 6px 0; color: #80858b; font: 500 0.95rem/1.3 var(--condensed); letter-spacing: 0.04em; }
.console.typing li { opacity: 0; translate: 0 4px; }
.console.run li { animation: said 0.35s ease forwards; animation-delay: calc(var(--i) * 0.8s); }
@keyframes said { to { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------------- Mac and iPhone */

.desk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: end; margin-top: 52px; }
.desk-mac img { border-radius: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 28px 50px -22px rgba(0, 0, 0, 0.5); }
.desk-mac figcaption { margin-top: 28px; max-width: 38em; }
.desk-mac h3 { font-size: 1.6rem; line-height: 1.1; margin-bottom: 10px; }
.desk-mac p { color: var(--muted); margin: 0; }
.phone { position: relative; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, 0.32)); }
/* over the waterfall of the iPhone capture, measured on the 804 x 1748 file */
.phone-aux {
  position: absolute; left: 5.473%; top: 47.14%; width: 89.05%; height: 10.47%;
  border-radius: 2px; opacity: 0; transition: opacity 0.6s ease;
}
.phone-aux.live { opacity: 1; }
.desk-phone figcaption { margin-top: 18px; color: var(--quiet); font: 500 1rem/1.4 var(--condensed); letter-spacing: 0.03em; }

/* ---------------------------------------------------------------- comparison */

.versus { width: 100%; margin-top: 48px; border-collapse: collapse; font-size: 0.95rem; line-height: 1.42; }
.versus th, .versus td { padding: 14px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.versus thead th { border-top: 0; font: 600 1.15rem/1.2 var(--condensed); letter-spacing: 0.02em; color: var(--muted); padding-bottom: 14px; }
.versus thead td { border-top: 0; }
.versus tbody th { width: 15%; font: 600 1.1rem/1.3 var(--condensed); letter-spacing: 0.02em; }
.versus td { color: var(--muted); }
.versus .us { background: var(--bench-hi); color: var(--ink); width: 22%; }
.versus thead .us { color: var(--ink); border-radius: 10px 10px 0 0; padding-top: 14px; }
.versus tbody tr:last-child .us { border-radius: 0 0 10px 10px; }
.versus tbody tr:last-child td, .versus tbody tr:last-child th { font-weight: 500; }

/* ---------------------------------------------------------------- prices */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; max-width: 980px; }
.plan { padding: 34px 34px 30px; border-radius: 16px; }
.plan.free { background: var(--bench-hi); box-shadow: inset 0 0 0 1px var(--rule); }
.plan.pro {
  color: var(--legend);
  background: linear-gradient(180deg, #45484d 0%, #35383c 35%, #2c2e32 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 0 #151617, 0 26px 44px -24px rgba(0, 0, 0, 0.6);
}
.plan h3 { font-size: 1.5rem; letter-spacing: 0.04em; }
.plan.pro h3 { color: #f2f3f5; }
.plan-price { margin: 14px 0 4px; font: 700 clamp(2.6rem, 5vw, 3.4rem)/1 var(--condensed); letter-spacing: 0.01em; }
.plan.pro .plan-price {
  display: inline-block; padding: 8px 18px 6px; border-radius: 8px;
  background: var(--lcd); color: var(--lcd-ink);
  box-shadow: 0 0 0 4px #0b0b0c, inset 0 0 18px rgba(120, 50, 0, 0.25);
  margin-top: 18px;
}
.plan-note { margin: 10px 0 0; color: var(--muted); font: 500 1.0625rem/1.3 var(--condensed); letter-spacing: 0.03em; }
.plan.pro .plan-note { color: var(--chassis-text); }
.plan ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.plan li { position: relative; padding-left: 26px; font-size: 1.0625rem; line-height: 1.45; }
.plan li::before {
  content: ""; position: absolute; left: 3px; top: 0.42em; width: 6px; height: 11px;
  border-right: 2px solid var(--shift); border-bottom: 2px solid var(--shift); rotate: 45deg;
}
.plan.pro li::before { border-color: var(--neg-ink); }
.plans-foot { margin-top: 22px; max-width: 46em; color: var(--quiet); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); }
.foot-in {
  max-width: 1180px; margin: 0 auto; padding: 36px 24px 44px;
  display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: center;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-nav a { color: var(--muted); text-decoration: none; font: 500 1.0625rem var(--condensed); letter-spacing: 0.04em; }
.foot-nav a:hover, .foot-nav a[aria-current] { color: var(--ink); }
.legal { grid-column: 1 / -1; margin: 0; color: var(--quiet); font-size: 0.875rem; }

/* ---------------------------------------------------------------- documents */

.doc-main { padding: 72px 24px 104px; }
.doc-in { max-width: 42em; margin: 0 auto; }
.doc-in h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.05; }
.updated { color: var(--quiet); font: 500 1rem var(--condensed); letter-spacing: 0.04em; margin-top: 10px; }
.doc-in section { margin-top: 44px; }
.doc-in h2 { font-size: 1.6rem; line-height: 1.15; margin-bottom: 12px; }
.doc-in .lead { margin: 22px 0 18px; }
.mail { font: 600 1.25rem var(--condensed); letter-spacing: 0.02em; }
.faq details {
  border-radius: 8px; margin-top: 10px;
  background: var(--bench-hi); box-shadow: inset 0 0 0 1px var(--rule);
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative;
  font: 600 1.2rem/1.3 var(--condensed);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--shift); border-bottom: 2px solid var(--shift); rotate: 45deg;
  transition: rotate 0.2s ease;
}
.faq details[open] summary::after { rotate: 225deg; margin-top: -2px; }
.faq details p { padding: 0 20px 18px; margin: 0; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 980px) {
  .versus, .versus tbody, .versus tr, .versus th, .versus td { display: block; width: auto; }
  .versus thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .versus tbody tr { padding: 18px 0; border-top: 1px solid var(--rule); }
  .versus tbody th, .versus td { border-top: 0; padding: 4px 0; }
  .versus tbody th { font-size: 1.25rem; margin-bottom: 8px; }
  .versus td::before {
    content: attr(data-col); display: block;
    font: 600 0.9rem/1.3 var(--condensed); letter-spacing: 0.04em; color: var(--quiet);
  }
  .versus .us { padding: 10px 14px; border-radius: 10px; margin: 0 0 8px; }
  .versus tbody tr:last-child .us { border-radius: 10px; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split.flip > figure { order: 0; }
  .positions { grid-template-columns: 1fr; max-width: 560px; }
  .oper-in { grid-template-columns: 1fr; gap: 48px; }
  .desk { grid-template-columns: 1fr; gap: 48px; }
  .desk-phone { max-width: 280px; }
  /* the menu stays: under the logo, a row that scrolls sideways if it must */
  .bar-in { flex-wrap: wrap; row-gap: 10px; padding-top: 14px; padding-bottom: 12px; }
  .menu { order: 3; flex-basis: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; gap: 18px; padding-bottom: 2px; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; font-size: 15px; }
}

@media (max-width: 760px) {
  .rig { padding: 0 16px; margin-top: 32px; }
  .rack { padding: 0 16px; margin-top: 32px; gap: 4px; }
  .plans { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .wrap, .foot-in, .bar-in { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: 28px; }
  .row { padding: 72px 0; }
  .doc-main { padding: 48px 16px 80px; }
  .get-in { flex-direction: column; align-items: flex-start; gap: 28px; }
  .get-icon { width: 112px; height: 112px; border-radius: 26px; }
  .foot-in { grid-template-columns: 1fr; }
}

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

/* ---------------------------------------------------------------- modules (coming soon) */

.soon {
  display: inline-block; margin: 0 0 16px; padding: 4px 10px 3px; border-radius: 4px;
  border: 1px solid var(--shift); color: var(--shift-deep);
  font: 700 13px/1.2 var(--condensed); letter-spacing: 0.2em;
}
/* the units stacked like a real rack, as wide as the panel at the top of the page */
.rack {
  list-style: none; max-width: 1368px; margin: 44px auto 0; padding: 0 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.rack img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28)); }
.rack-notes {
  margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px 36px;
}
.rack-notes dt { font: 600 15px/1.2 var(--condensed); letter-spacing: 0.16em; text-transform: uppercase; color: var(--shift); }
.rack-notes dd { margin: 6px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }

.versus-src { margin-top: 16px; color: var(--quiet); font: 500 0.95rem/1.4 var(--condensed); letter-spacing: 0.02em; }
.rack a { display: block; }
.rack-notes a { color: inherit; text-decoration: none; }
.rack-notes a:hover { color: var(--shift-deep); }
.rack-go { margin-top: 36px; }
.go {
  display: inline-block; padding: 12px 22px 11px; border-radius: 4px; text-decoration: none;
  font: 700 16px/1 var(--condensed); letter-spacing: 0.14em; text-transform: uppercase;
  color: #f8f1e2; background: #b8361f;
}
.go:hover { color: #f8f1e2; background: #7d2414; }

.trial { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 26px; max-width: 36em; }
.trial-lcd {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 8px;
  font: 700 40px/1 var(--condensed); color: var(--lcd-ink); background: var(--lcd);
  box-shadow: 0 0 0 4px #1b1c1f, 0 0 0 5px #3d4045, inset 0 0 18px rgba(120, 50, 0, 0.25);
}
.trial strong { display: block; font: 700 1.6rem/1.1 var(--condensed); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.trial span span, .trial > span:last-child { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.prices .trial { margin: 32px 0 0; }

/* Control guide (/guida/): a wider column than the legal pages, the panel
   with numbered pins, then one card per control with its photo. */
.g-in { max-width: 1100px; margin: 0 auto; }
.g-in > h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.05; }
.g-in section { margin-top: 48px; }
.g-in h2 { font-size: 1.7rem; line-height: 1.15; margin-bottom: 12px; }
.g-in p, .g-in li, .g-in dd { max-width: 42em; }
.g-panel { position: relative; margin: 20px 0 0; border-radius: 14px; overflow: hidden; background: var(--metal); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); }
.g-panel img { display: block; width: 100%; height: auto; }
.g-pin {
  position: absolute; translate: -50% -50%;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--shift); color: #fff; text-decoration: none;
  font: 700 0.95rem/1 var(--condensed);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.g-pin:hover, .g-pin:focus-visible { background: var(--shift-deep); outline: none; scale: 1.15; }
.g-first ol { padding-left: 1.3em; }
.g-first li { margin: 8px 0; }
.g-modes, .g-gloss { margin: 0; display: grid; gap: 14px; }
.g-modes div, .g-gloss div { background: var(--bench-hi); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; }
.g-modes dt, .g-gloss dt { font: 700 1.15rem var(--condensed); letter-spacing: 0.04em; color: var(--shift-deep); }
.g-modes dd, .g-gloss dd { margin: 4px 0 0; }
.g-group { margin-top: 28px; }
.g-group-h { font: 600 1.05rem var(--condensed); letter-spacing: 0.08em; text-transform: uppercase; color: var(--quiet); border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.g-ctl {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 90px;
}
.g-ctl:target .g-shot { box-shadow: 0 0 0 3px var(--shift), 0 10px 24px rgba(0, 0, 0, 0.25); }
.g-shot { margin: 0; background: var(--metal); border-radius: 10px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); }
.g-shot img { display: block; max-width: 100%; height: auto; }
.g-text h3 { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; font: 700 1.4rem var(--condensed); letter-spacing: 0.03em; }
.g-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--shift); color: #fff; font-size: 0.95rem; }
.g-text p { margin: 0 0 10px; }
.g-hold strong, .g-tip strong { font: 600 0.95rem var(--condensed); letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }
.g-hold strong { color: var(--shift-deep); }
.g-tip { background: var(--bench-hi); border-left: 3px solid var(--shift); padding: 8px 12px; border-radius: 0 8px 8px 0; }
.g-tip strong { color: var(--ink); }
.g-iphone-in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; }
.g-iphone-in img { width: 100%; height: auto; border-radius: 28px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); }
.g-cta { text-align: center; padding: 36px 0 0; }
.g-cta p { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  .g-ctl { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .g-iphone-in { grid-template-columns: minmax(0, 1fr); }
  .g-iphone-in img { max-width: 220px; margin: 0 auto; }
  .g-pin { width: 20px; height: 20px; font-size: 0.75rem; }
}