/* Platinum Tech - site styles
   White dominant, charcoal text, blue to teal gradient used only as accent. */

:root {
  --white: #ffffff;
  --tint: #f4f9fb;
  --tint-2: #eef5f8;
  --ink: #21272d;
  --ink-2: #4b5560;
  --ink-3: #6c7883;
  --line: #e3e8ec;
  --line-2: #cfd8de;
  --blue: #1877cf;
  --blue-ink: #0f5da5;
  --teal: #12a48d;
  --teal-ink: #0b7a68;
  --grad: linear-gradient(97deg, #1877cf 0%, #12a48d 100%);
  --grad-soft: linear-gradient(97deg, rgba(24, 119, 207, 0.09) 0%, rgba(18, 164, 141, 0.09) 100%);
  --focus: #0f5da5;
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 26px;
  --shadow-s: 0 1px 2px rgba(33, 39, 45, 0.06), 0 2px 10px rgba(33, 39, 45, 0.04);
  --shadow: 0 2px 6px rgba(33, 39, 45, 0.05), 0 18px 44px rgba(33, 39, 45, 0.07);
  --maxw: 1140px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --font-display: "Satoshi", "General Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, sans-serif;
  --font-body: "General Sans", "Satoshi", ui-sans-serif, system-ui, "Segoe UI", Helvetica, sans-serif;
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
  --step-1: clamp(1.14rem, 1.08rem + 0.3vw, 1.32rem);
  --step-2: clamp(1.35rem, 1.24rem + 0.55vw, 1.72rem);
  --step-3: clamp(1.62rem, 1.42rem + 1vw, 2.3rem);
  --step-4: clamp(1.8rem, 1.55rem + 1.2vw, 2.5rem);
  --step-5: clamp(2.25rem, 1.75rem + 2.6vw, 3.5rem);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.021em;
  margin: 0 0 0.6em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15rem; }
li { margin-bottom: 0.4em; }
li:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 0.6rem;
  top: -6rem;
  z-index: 200;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  transition: top 0.16s ease;
}
.skip:focus { top: 0.6rem; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow { max-width: 780px; }

.section { padding-block: clamp(3rem, 7vw, 5.6rem); }
.section--tint { background: var(--tint); }
.section--top { padding-top: clamp(2rem, 4vw, 3rem); }
.section + .section--tint, .section--tint + .section { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 0.9rem;
}

.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); color: var(--ink-3); }
.center { text-align: center; margin-inline: auto; }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rule {
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: var(--grad);
}
.rule--short { width: 72px; }

[hidden] { display: none !important; }
main:focus { outline: none; }

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; padding: 0.4rem 0; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand img { width: 42px; height: 42px; }
.brand__name {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}
.brand__tag { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-ink); font-weight: 600; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
.nav li { position: relative; margin: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 0.45rem;
  border-radius: var(--radius-s);
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 500;
}
.nav a:hover { background: var(--tint); color: var(--ink); text-decoration: none; }

/* Desktop More menu. The button matches a tab exactly so the bar still reads as
   one row of equals, and the panel is a plain list under it. */
.nav__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 0.45rem;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}
.nav__more-btn:hover { background: var(--tint); color: var(--ink); }
.nav__more-btn[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__chev { width: 14px; height: 14px; transition: transform 0.16s ease; }
.nav__more-btn[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__more-btn[aria-expanded="true"] { background: var(--tint); color: var(--ink); }
.nav__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  display: block;
  min-width: 12rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(33, 39, 45, 0.13);
}
.nav__menu[hidden] { display: none; }
.nav__menu li { width: 100%; }
.nav__menu a { display: flex; width: 100%; padding: 0 0.6rem; font-size: 0.9rem; }
.nav__chev { flex: 0 0 auto; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.top__actions { display: flex; align-items: center; gap: 0.5rem; }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--white);
}
.lang:hover { border-color: var(--blue); color: var(--blue-ink); text-decoration: none; }
.lang svg { width: 15px; height: 15px; }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.7rem;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.burger span { display: block; width: 17px; height: 2px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: var(--ink);
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--white); }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0.5rem 0 1rem; }
.mobile-nav li { margin: 0; }
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: 1rem; width: 100%; }
.mobile-nav .btn--primary { color: var(--white); border-bottom: 1px solid transparent; }
.mobile-nav .btn--ghost { color: var(--ink); }

.top__actions .top__cta { display: none; }
.lang__full { display: none; }
.lang__short { font-weight: 700; letter-spacing: 0.04em; }

@media (min-width: 30rem) {
  .lang__full { display: inline; }
  .lang__short { display: none; }
}

@media (min-width: 46rem) {
  .top__actions .top__cta { display: inline-flex; }
}

@media (min-width: 62rem) {
  .nav { display: block; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
}

/* Measured budget for the top bar. The wordmark needs 170px unsqueezed and the
   actions block needs 280px with the quote button in it, which leaves 658px for
   tabs inside the 1140px container. With five top level tabs plus the More menu
   the row measures 493px in English and 542px in Spanish, so both fit with room
   to spare. The tab sizing below is deliberately compact and is not loosened at
   wider viewports, because loosening it pushed Spanish back over the limit. */
@media (min-width: 62rem) and (max-width: 77.99rem) {
  .nav a, .nav__more-btn { padding: 0 0.35rem; }
  .nav__menu a { padding: 0 0.6rem; }
}

/* Between 992px and 1055px the Spanish bar is still about 50px short of holding
   the quote button as well, so that one duplicate control steps aside there. It
   is already in the hero, in the mobile menu, and in the footer, and it returns
   at 1056px. Every navigation item stays reachable at every width. */
@media (min-width: 62rem) and (max-width: 65.99rem) {
  .top__actions .top__cta { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(18, 122, 165, 0.22); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(18, 122, 165, 0.28); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-ink); }
.btn--quiet { background: transparent; color: var(--blue-ink); padding-inline: 0.2rem; min-height: 44px; }
.btn--quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.btn-row--center { justify-content: center; }

.link-arrow { font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.link-arrow::after { content: "\2192"; transition: transform 0.16s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.2rem, 5vw, 4.4rem) clamp(2.6rem, 6vw, 4.8rem); position: relative; overflow: hidden; }
.top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--grad);
  background-size: 220% 100%;
  animation: slide 16s linear infinite;
}
@keyframes slide { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) { .top::after { animation: none; } }

.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.4rem); align-items: center; }
.hero h1 { margin-bottom: 0.5em; }
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tint);
  font-size: var(--step--1);
  color: var(--ink-2);
  font-weight: 500;
}
.hero__figure { position: relative; justify-self: center; max-width: 420px; }
.hero__figure img { border-radius: 50%; }
.hero__figure figcaption {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card h3 { margin-bottom: 0.2rem; font-size: var(--step-1); }
.card p { color: var(--ink-2); }
.card__cta { margin-top: auto; padding-top: 0.5rem; }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
@media (prefers-reduced-motion: reduce) { .card--lift:hover { transform: none; } }

.card--device { position: relative; overflow: hidden; }
.card--device::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.card--device:hover::before, .card--device:focus-within::before { opacity: 1; }

.step { display: flex; gap: 1rem; }
.step__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
  background: var(--grad);
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: 0 0 auto;
}
.step h3 { font-size: var(--step-1); margin-bottom: 0.25rem; }
.step p { color: var(--ink-2); margin: 0; }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.checks li { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; color: var(--ink-2); }
.checks li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--grad);
}

.split { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } }
.split--sticky > :first-child { position: static; }
@media (min-width: 56rem) {
  .split--sticky > :first-child { position: sticky; top: 96px; }
}

.panel {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.3rem, 3vw, 2.2rem);
}
.panel--plain { background: var(--white); }

.quote-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  border-radius: 0;
  padding: 1.3rem 1.5rem;
}
.quote-card blockquote { margin: 0; color: var(--ink); font-size: var(--step-0); }
.quote-card cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: var(--step--1); color: var(--ink-3); }

.pull {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  border-top: 3px solid;
  border-image: var(--grad) 1;
  padding-top: 1.4rem;
  margin: 2.2rem 0;
}

.aside-note {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--teal-ink);
  font-size: var(--step-0);
}

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
caption { text-align: left; padding: 1rem 1.1rem 0; color: var(--ink-3); font-size: var(--step--1); }
th, td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; background: var(--tint); }
tbody tr:last-child td { border-bottom: 0; }
td.price { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; white-space: nowrap; }
.tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: var(--tint-2);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

/* ---------- details / faq ---------- */
.faq-group { border-top: 1px solid var(--line); }
details.qa { border-bottom: 1px solid var(--line); }
details.qa summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  min-height: 56px;
  padding: 0.9rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
  list-style: none;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--teal-ink);
  line-height: 1;
  flex: 0 0 auto;
}
details.qa[open] summary::after { content: "\2013"; }
details.qa .qa__body { padding: 0 0 1.2rem; color: var(--ink-2); max-width: 74ch; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.4rem; }
.field > label, .fieldset > legend {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.field .help, .fieldset .help { font-size: var(--step--1); color: var(--ink-3); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
}
textarea { min-height: 118px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--blue); }
::placeholder { color: #97a2ac; }

.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.choices { display: grid; gap: 0.5rem; }
@media (min-width: 34rem) { .choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  cursor: pointer;
  background: var(--white);
  font-size: 0.98rem;
}
.choice:hover { border-color: var(--blue); }
.choice input { width: 20px; height: 20px; margin: 0.15rem 0 0; accent-color: var(--blue); flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--blue); background: var(--tint); box-shadow: inset 0 0 0 1px var(--blue); }

.req { color: var(--blue-ink); font-weight: 600; }
.error-text { color: #a3252f; font-size: var(--step--1); font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #a3252f; }
.form-alert {
  border: 1px solid #e7c3c6;
  background: #fdf5f5;
  color: #7d1d25;
  border-radius: var(--radius-s);
  padding: 0.8rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.steps-bar { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; margin-bottom: 1.4rem; }
.steps-bar ol { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; list-style: none; margin: 0; padding: 0; }
.steps-bar li { display: flex; align-items: center; gap: 0.4rem; font-size: var(--step--1); color: var(--ink-3); font-weight: 600; margin: 0; }
.steps-bar li[aria-current="step"] { color: var(--ink); }
.steps-bar li span.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.steps-bar li[aria-current="step"] span.dot { background: var(--grad); }
.steps-bar li.done span.dot { background: var(--teal); }
.progress { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--grad); width: 25%; transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .progress > i { transition: none; } }

.form-step { display: none; }
.form-step.is-active { display: grid; gap: 1.15rem; }
.form-nav { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: space-between; margin-top: 0.4rem; }

/* The confirmation panel after a quote request is written to the back office.
   Only the form script reveals it, and only once a PT-IN- reference exists. */
.form-done { display: grid; gap: 1rem; }
.form-done[hidden] { display: none; }
.ref-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--tint);
}
.ref-line strong {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--step-2);
  letter-spacing: 0.03em;
  color: var(--blue-ink);
  /* Long enough to read out over the phone, so it has to wrap rather than clip. */
  word-break: break-all;
}
.field--check { display: grid; gap: 0.4rem; }
.field--check .help { margin: 0; }

.photo-drop {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-align: center;
  background: var(--tint);
}
.photo-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; justify-content: center; }
.photo-list figure { margin: 0; width: 84px; }
.photo-list img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line-2); }
.photo-list figcaption { font-size: 0.7rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  /* A file input still picks up the width from the form rules, and an absolutely
     positioned element that wide pushes the document sideways. */
  width: 1px !important; height: 1px !important; max-width: 1px !important;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.summary-list { margin: 0; display: grid; gap: 0.5rem; }
.summary-list div { display: grid; gap: 0.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.summary-list dt { font-size: var(--step--1); color: var(--ink-3); font-weight: 600; }
.summary-list dd { margin: 0; color: var(--ink); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--white); padding-block: clamp(2.4rem, 5vw, 3.6rem) 1.6rem; }
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 44rem) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 68rem) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 0.9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.15rem; }
.foot a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 40px; }
.foot a:hover { color: var(--blue-ink); }
.foot__brand img { width: 168px; height: auto; margin-bottom: 1rem; }
.foot__brand p { color: var(--ink-2); font-size: 0.95rem; max-width: 38ch; }
.foot dl { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.foot dt { font-weight: 600; color: var(--ink); margin-top: 0.7rem; }
.foot dd { margin: 0; }
.foot__hours { font-size: 0.95rem; color: var(--ink-2); }
.foot__hours div { display: flex; justify-content: space-between; gap: 1.2rem; max-width: 280px; padding: 0.15rem 0; }
.foot__hours-note { color: var(--ink-3); font-size: 0.85rem; }
.foot__legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-3); display: grid; gap: 0.6rem; }
.foot__legal p { margin: 0; max-width: 92ch; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- misc ---------- */
.map-embed { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }

.toc { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
.toc a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 500; border-bottom: 1px solid var(--line); }
.toc a:hover { color: var(--blue-ink); }

.policy-section { padding-top: 1.6rem; margin-bottom: 2.6rem; scroll-margin-top: 96px; }
.policy-section h2 { font-size: var(--step-3); }
.policy-section p, .policy-section li { color: var(--ink-2); }
.back-to-top { font-size: var(--step--1); font-weight: 600; }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.badge {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
}

/* ---------- review proof ---------- */
.proof {
  margin-top: 2rem;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: minmax(220px, 300px) 1fr;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.proof__score {
  text-align: center;
  padding: 1.2rem 1rem;
  border-radius: var(--radius);
  background: var(--grad-soft);
}
.proof__rating {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.proof__of { font-size: var(--step-1); font-weight: 500; color: var(--ink-3); margin-left: 0.35rem; }
.proof__count { margin: 0.7rem 0 0; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.proof__body { display: grid; gap: 1.1rem; }
.proof__lede { margin: 0; color: var(--ink-2); font-size: var(--step-1); max-width: 54ch; }
.proof__note { margin: 0; }
.proof .btn-row { margin: 0; }

.stars { display: flex; justify-content: center; gap: 0.28rem; margin-top: 0.9rem; }
.stars__star { width: 26px; height: 26px; fill: #f0b429; }
.stars--sm .stars__star { width: 18px; height: 18px; }

/* Chips slide in once from the left in a short stagger, then hold still. */
.chipline {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  overflow: hidden;
}
.chipline__item {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
}

@media (max-width: 56rem) {
  .proof { grid-template-columns: 1fr; }
}

/* ---------- motion ---------- */
/* Cross document view transition: a short cross fade between pages in
   browsers that support it. Anything else navigates normally. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.16s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.22s ease both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* Reveal variants. Opacity, transform, and clip-path only, so scrolling never
   triggers layout work and nothing jumps. */
.reveal--wipe { clip-path: inset(0 0 42% 0); transition: opacity 0.55s ease, transform 0.55s ease, clip-path 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal--wipe.is-in { clip-path: inset(0 0 0 0); }

.is-in .stars__star { animation: star-pop 0.34s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(var(--i) * 70ms + 90ms); }
@keyframes star-pop {
  from { opacity: 0; transform: scale(0.72) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

.chipline.is-in .chipline__item { animation: chip-slide 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes chip-slide {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}

/* Header settles into a soft shadow once the page scrolls. Colour and shadow
   only, never height or padding, so the layout stays put. */
.top { transition: box-shadow 0.24s ease, background-color 0.24s ease; }
.top.is-scrolled { box-shadow: 0 6px 22px rgba(33, 39, 45, 0.07); background: rgba(255, 255, 255, 0.97); }

/* Tactile feedback, interactive elements only. */
.btn { transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--ghost:hover, .btn--quiet:hover { transform: translateY(-1px); }
.card--lift { transition: transform 0.2s ease, box-shadow 0.24s ease, border-color 0.2s ease; }
.card--lift:active { transform: translateY(0); }
.nav a { transition: background-color 0.16s ease, color 0.16s ease; }
.top__cta:focus-visible, .btn:focus-visible { transform: none; }
.link-arrow { transition: color 0.16s ease; }
.link-arrow:hover { color: var(--blue-ink); }
.chipline__item, .tag { transition: border-color 0.16s ease, color 0.16s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal--wipe { clip-path: none; transition: none; }
  .is-in .stars__star, .chipline.is-in .chipline__item { animation: none; opacity: 1; transform: none; }
  .top { transition: none; }
  .btn, .card--lift, .nav a, .link-arrow, .nav__chev { transition: none; }
  .btn:active, .btn--primary:hover, .btn--ghost:hover, .btn--quiet:hover, .card--lift:active { transform: none; }
}
.no-js .chipline__item, .no-js .stars__star { opacity: 1; transform: none; }

/* ---------- footer meta ---------- */
.foot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin-top: 0.4rem; }
.foot__powered { color: var(--ink-3); }
.foot__powered a { color: var(--ink-2); font-weight: 600; }
.foot__powered a:hover { color: var(--blue-ink); }
.foot__admin { color: var(--ink-3); border-bottom: 1px dotted var(--line-2); }
.foot__admin:hover { color: var(--blue-ink); border-bottom-color: var(--blue); }

/* ===========================================================================
   Kiosk intake, paper form, live catalog, item detail, chat widget.
   =========================================================================== */

.pair { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fieldset--tight { margin-top: 0.6rem; }
.choice--wide { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0; }
.btn--tiny { min-height: 36px; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.field--inline { display: flex; align-items: center; gap: 0.5rem; }
.field--inline label { font-weight: 600; font-size: var(--step--1); }
.note--quiet { margin: 0.6rem 0; padding: 0.6rem 0.8rem; border-radius: var(--radius-s); background: var(--tint-2); border: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-2); }
.pill { display: inline-block; margin: 0.4rem 0; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--tint-2); border: 1px solid var(--line-2); font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.pill--warn { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }

.kiosk__head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.kiosk__form { margin-top: 1.6rem; display: grid; gap: 1.4rem; }
.kiosk__form .fieldset legend { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; }
.kiosk__done { margin-top: 1.6rem; display: grid; gap: 0.8rem; }
.kiosk__ref { display: grid; gap: 0.2rem; margin: 0.4rem 0; }
.kiosk__ref strong { font-family: var(--font-display); font-size: var(--step-4); letter-spacing: 0.02em; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.kiosk__staff { margin-top: 1.4rem; color: var(--ink-3); }
/* Text like fields only. This used to read `.kiosk input`, which has the same
   specificity as `.choice input` and comes later, so every radio and checkbox on
   the kiosk was stretched to the full width of its label and the page scrolled
   sideways. */
.kiosk input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.kiosk select,
.kiosk textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--white);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.kiosk textarea { min-height: 92px; resize: vertical; }
.kiosk input:focus-visible, .kiosk select:focus-visible, .kiosk textarea:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24, 119, 207, 0.16); }
.kiosk .photo-list ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.kiosk .photo-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: var(--step--1); }

/* paper form */
.paper-intro { display: grid; gap: 0.8rem; }
.paper {
  max-width: 8.5in;
  margin: 1.6rem auto 0;
  padding: 0.5in;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #111;
}
.paper__head { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid #111; padding-bottom: 0.5rem; flex-wrap: wrap; }
.paper__head .small { margin: 0; }
.paper__meta { display: grid; gap: 0.3rem; min-width: 14rem; }
.paper h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.07em; margin: 1rem 0 0.5rem; }
.paper__grid { display: grid; gap: 0.7rem 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paper__line { display: grid; gap: 0.15rem; font-size: 0.8rem; }
.paper__line--wide { grid-column: 1 / -1; }
.paper__line i { display: block; height: 1.15rem; border-bottom: 1px solid #666; }
.paper__box { border: 1px solid #666; border-radius: 6px; height: 2.6rem; padding: 0.2rem 0.4rem; font-size: 0.75rem; color: #444; }
.paper__consent { font-size: 0.8rem; margin: 0.4rem 0; }
.paper__foot { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid #999; font-size: 0.7rem; color: #444; }

/* live catalog */
.shop-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.4rem 0 0.6rem; }
.shop-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-top: 0.6rem; }
.shop-card {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-s);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.shop-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.shop-card__media { display: block; background: var(--tint); aspect-ratio: 1 / 1; }
.shop-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-card__blank { display: grid; place-items: center; height: 100%; padding: 1rem; text-align: center; font-size: var(--step--1); color: var(--ink-3); }
.shop-card__body { display: grid; gap: 0.25rem; padding: 0.9rem 1rem 1.1rem; }
.shop-card__title { font-family: var(--font-display); font-weight: 700; }
.shop-card__spec { font-size: var(--step--1); color: var(--ink-3); }
.shop-card__price { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--blue-ink); }
.shop-card__cta { font-size: var(--step--1); font-weight: 700; color: var(--teal-ink); }
.shop-empty { margin: 1.2rem 0; padding: 1.2rem; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--tint); color: var(--ink-2); }

/* item detail */
.item-layout { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.item-buy { grid-column: 2; }
.item-gallery { display: grid; gap: 0.6rem; }
.item-gallery__main { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.item-gallery__main img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.item-gallery__thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.item-thumb { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; overflow: hidden; cursor: pointer; width: 68px; height: 68px; }
.item-thumb.is-on { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(24, 119, 207, 0.2); }
.item-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.item-gallery--none { padding: 2rem; border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; background: var(--tint); }
.item-info h1 { font-size: var(--step-4); }
.item-price { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; color: var(--blue-ink); margin: 0.4rem 0; }
.item-was { font-size: var(--step-1); color: var(--ink-3); text-decoration: line-through; font-weight: 500; }
.item-sub { font-size: var(--step-1); margin-top: 1.2rem; }
.spec-list { display: grid; gap: 0.3rem; margin: 0.5rem 0 0; }
.spec-list > div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.spec-list dt { font-weight: 600; color: var(--ink-3); }
.spec-list dd { margin: 0; }
.item-copy { margin-top: 1rem; }
.reserve { display: grid; gap: 0.9rem; }
/* Same reason as the kiosk rule above. */
.reserve input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.reserve select,
.reserve textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  font: inherit;
  background: var(--white);
  color: var(--ink);
}
.reserve textarea { min-height: 72px; resize: vertical; }
.ship-fields { display: grid; gap: 0.8rem; }
.totals { display: grid; gap: 0.3rem; margin: 0.4rem 0 0; }
.totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; font-weight: 600; }
.totals__sum { border-bottom: 0; font-size: var(--step-1); }
.totals__sum dd { color: var(--blue-ink); font-weight: 700; }

/* chat widget */
.chat { position: fixed; right: clamp(0.8rem, 2vw, 1.4rem); bottom: clamp(0.8rem, 2vw, 1.4rem); z-index: 70; display: grid; justify-items: end; gap: 0.6rem; }
.chat__launch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.chat__launch svg { width: 20px; height: 20px; }
.chat__launch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.chat__panel {
  width: min(24rem, calc(100vw - 1.6rem));
  max-height: min(34rem, calc(100vh - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* iOS reports a 100vh that is taller than the part of the page you can see, so
   the panel measured against vh alone can put its own footer under the browser
   chrome. dvh is the visible height. The vh line above stays as the fallback. */
@supports (height: 100dvh) {
  .chat__panel { max-height: min(34rem, calc(100dvh - 6rem)); }
}
.chat__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.chat__head strong { font-family: var(--font-display); line-height: 1.2; }
.chat__head .icon-btn { margin-left: auto; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink-2); }
/* The "this is a robot" disclosure used to be a full sentence in a block of its
   own between the header and the conversation. On a 375px phone it wrapped to
   three lines and took about 70px off a conversation that only had 80px to begin
   with. It says the same true thing as a badge under the title, at no cost in
   height, and the room it gave back goes to .chat__log below. The badge sits
   under the title rather than beside it because "Asistente de Platinum Tech" plus
   "Asistente automatico" cannot share a 320px line with the close button. */
.chat__titles { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; }
.chat__badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tint);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  white-space: nowrap;
}
/* The conversation is the only part that may take the leftover room, and it
   needs a floor. A scroll container's automatic minimum size is zero, so the log
   used to be the one item in this column that could shrink, and every sibling
   above it grew at its expense: with six chips on a 320px screen the log was
   26px tall with 90px of content in it, which cut the last message in half right
   where the chips begin. That is what read as chips layered over the message.

   The floor was raised from clamp(3rem, 18vh, 5rem) when the disclosure block
   came out of this column. The log was pinned to its floor at every phone size we
   test, so freeing room above it did nothing until the floor moved with it. */
.chat__log {
  flex: 1 1 auto;
  min-height: clamp(3.5rem, 20vh, 7.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.45rem;
  align-content: start;
}
.chat__line { margin: 0; padding: 0.5rem 0.7rem; border-radius: 12px; font-size: 0.9rem; max-width: 92%; }
.chat__line--bot { background: var(--tint); border: 1px solid var(--line); }
.chat__line--you { background: var(--grad-soft); border: 1px solid #bfdbfe; justify-self: end; }
.chat__line--staff { background: #ecfdf5; border: 1px solid #a7f3d0; }
/* Suggestions stay in normal flow, never positioned, and they are capped so a
   long list can never take the conversation's room. If the cap is reached the
   chip list scrolls on its own. */
.chat__chips {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.9rem 0.6rem;
  max-height: min(8rem, 30vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chat__chips[hidden] { display: none; }
.chat__chips .chip { font-size: 0.8rem; }
/* The composer and the actions under it keep their size on every screen. They
   were being pushed past the panel edge and clipped: on a 320px screen the foot
   ended 73px below the bottom of the panel, which put the intake link out of
   reach. */
.chat__form { display: flex; flex: 0 0 auto; gap: 0.4rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--line); }
.chat__form input { flex: 1; min-height: 42px; padding: 0.45rem 0.6rem; border: 1px solid var(--line-2); border-radius: var(--radius-s); font: inherit; }
.chat__foot { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.9rem 0.8rem; }
.chat__foot [hidden] { display: none; }
.chat__contact { display: grid; gap: 0.45rem; padding: 0.7rem; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--tint); }
.chat__contact input { min-height: 42px; padding: 0.45rem 0.6rem; border: 1px solid var(--line-2); border-radius: var(--radius-s); font: inherit; }
.chat__contact strong { font-size: 0.9rem; }
.chat__contact .choice--wide { font-size: 0.82rem; }

@media (max-width: 46rem) {
  .pair, .paper__grid { grid-template-columns: 1fr; }
  .item-layout { grid-template-columns: 1fr; }
  .item-buy { grid-column: 1; }
  .chat__launch span { display: none; }
  .chat__launch { width: 52px; height: 52px; justify-content: center; padding: 0; }
}

@media print {
  .top, .foot, .paper-intro, .chat, .skip, .mobile-nav { display: none !important; }
  .paper { border: 0; margin: 0; padding: 0.25in; max-width: none; border-radius: 0; }
  .section { padding: 0 !important; }
  body { background: #fff; }
}

.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  min-height: 38px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.chip:hover { border-color: var(--blue); color: var(--blue-ink); }
.chip.is-on { background: var(--grad-soft); border-color: var(--blue); color: var(--blue-ink); }
.chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------ feature state
   Blocks whose visibility is decided by the feature_states table. The coming
   soon note is what ships in the HTML, so the honest version is what a visitor
   sees even if the script never runs. src/js/features.js swaps in the live
   block when the owner turns the feature on. */
.feature-state {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  background: var(--tint);
}
.feature-state h2 { font-size: var(--step-1); margin: 0 0 0.4rem; }
.feature-state h3 { font-size: var(--step-1); margin: 0 0 0.4rem; }
.feature-state p { margin: 0; color: var(--ink-2); }
.feature-state__live { margin-top: 0.2rem; }
.feature-state__live .btn-row { margin-top: 1rem; }
[data-feature][hidden] { display: none !important; }