/* ==========================================================================
   Roomtone landing — roomtone.webkodingtheme.com
   Same identity as the theme's "Roomtone" preset (Oxide): Archivo for
   display + body, Space Mono for labels, tape-black / bone / REC red.
   Shared by index, docs, support, privacy and terms.
   ========================================================================== */

:root {
  --ink: #131110;          /* tape black — page background */
  --ink-2: #1e1b19;        /* raised panels */
  --ink-3: #0b0a09;        /* footer */
  --bone: #ece6dc;         /* text */
  --muted: #a39a8e;        /* secondary text (7.0:1 on --ink) */
  --rec: #e8472c;          /* REC red — buttons, the needle */
  --rec-ink: #f0664a;      /* red used as text (5.2:1 on --ink) */
  --line: #37312c;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;

  /* spacing scale (px): 4 8 12 16 20 24 32 40 48 64 96 128 */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem;
  --s7: 2rem; --s8: 2.5rem; --s9: 3rem; --s10: 4rem; --s11: 6rem; --s12: 8rem;

  --page: 82.5rem;
  --gutter: 1.25rem;
  --radius: 1.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 1.0625rem/1.6 var(--font-display);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rec-ink); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--s4); top: var(--s4); z-index: 10; transform: translateY(-200%);
  padding: var(--s3) var(--s5); border-radius: 999px;
  background: var(--bone); color: var(--ink); font-weight: 700; text-decoration: none;
}
.skip:focus { transform: none; }

.wrap { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---- type ---------------------------------------------------------------- */
.label {
  margin: 0;
  font: 400 .75rem/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rec-ink);
}

.display {
  margin: 0;
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.h2 { font-size: clamp(2.25rem, 6vw, 4.5rem); }

.lede { margin: 0; max-width: 34rem; font-size: 1.25rem; line-height: 1.5; color: var(--muted); }
.lede strong { color: var(--bone); font-weight: 600; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 3.25rem; padding: 0 var(--s7);
  border: 1px solid var(--bone); border-radius: 999px;
  font: 700 .8125rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--bone); background: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--bone); color: var(--ink); }
.btn--rec { background: var(--rec); border-color: var(--rec); color: var(--ink); }
.btn--rec:hover { background: var(--bone); border-color: var(--bone); }
.btn svg { width: .875rem; height: .875rem; }

/* ---- header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: rgba(19, 17, 16, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: 4.5rem; }

.mark { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.mark__dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 4px rgba(232, 71, 44, .2); animation: rec 2.4s ease-in-out infinite; }
.mark__name { font-weight: 900; font-size: 1.375rem; letter-spacing: -.02em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: var(--s7); }
.nav a:not(.btn) { font: 400 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--bone); }
.nav .btn { min-height: 2.75rem; padding: 0 var(--s6); white-space: nowrap; }

@keyframes rec { 50% { opacity: .35; } }

/* ---- dial (the tick ruler motif from the theme's hero) ------------------- */
.dial {
  position: relative; height: 3rem;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 2.5rem) bottom / 100% 1.5rem no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px .5rem) bottom / 100% .75rem no-repeat;
}
.dial__needle {
  position: absolute; bottom: 0; left: 72%; width: 2px; height: 100%; background: var(--rec);
  animation: needle 1.6s var(--ease) .6s both;
}
.dial__needle::before { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
@keyframes needle { from { left: 6%; } }

/* ---- sections ------------------------------------------------------------ */
.section { padding-block: var(--s11); }
.section--panel { background: var(--ink-2); }
.section--bone { background: var(--bone); color: var(--ink); }
.section--bone .label { color: #a8301b; }
.section--bone .lede { color: #5c554d; }

.section-head { display: grid; gap: var(--s5); margin-bottom: var(--s10); max-width: 48rem; }

/* ---- hero ---------------------------------------------------------------- */
.hero { padding-block: var(--s10) var(--s9); overflow: hidden; }
.hero__top { display: grid; gap: var(--s5); }
/* one line at every width: 8 heavy caps need ~6.4em of room */
.hero__title { font-size: clamp(3rem, 13.4vw, 12.75rem); white-space: nowrap; overflow-wrap: normal; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s7); padding-bottom: var(--s5); font: 400 .75rem/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s10); align-items: start; margin-top: var(--s9); }
.hero__copy { display: grid; gap: var(--s7); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
.hero__status { margin: 0; font: 400 .75rem/1.6 var(--font-mono); letter-spacing: .08em; color: var(--muted); }
.hero__status b { color: var(--rec-ink); font-weight: 400; }

.hero__shots { position: relative; }
.hero__desktop { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.hero__phone {
  position: absolute; right: -1rem; bottom: -3rem; width: 26%;
  border-radius: 1.5rem; border: 6px solid var(--ink-3);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .95);
}

/* staggered page-load reveal (CSS only) */
.reveal { animation: rise .9s var(--ease) both; }
.reveal:nth-child(2) { animation-delay: .12s; }
.reveal:nth-child(3) { animation-delay: .24s; }
.reveal:nth-child(4) { animation-delay: .36s; }
.d1 { animation-delay: .15s; } .d2 { animation-delay: .35s; } .d3 { animation-delay: .55s; }
@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } }

/* ---- facts strip --------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.facts > div { display: grid; gap: var(--s2); padding: var(--s7) var(--s6); border-inline-start: 1px solid var(--line); }
.facts > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.facts b { font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em; text-transform: uppercase; }
.facts span { font: 400 .75rem/1.5 var(--font-mono); letter-spacing: .06em; color: var(--muted); }

/* ---- highlights (alternating rows) --------------------------------------- */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s10); align-items: center; }
.feature + .feature { margin-top: var(--s11); }
.feature--flip .feature__copy { order: 2; }
.feature__copy { display: grid; gap: var(--s5); }
.feature__num { font: 400 .75rem/1 var(--font-mono); letter-spacing: .16em; color: var(--muted); }
.feature__title { font-size: clamp(2rem, 4vw, 3.25rem); }
.feature__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.feature__list li { position: relative; padding-inline-start: 2.25rem; color: var(--muted); }
.feature__list li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--rec-ink); }
.feature__list em { font-style: normal; font-family: var(--font-mono); font-size: .875em; color: var(--bone); }
.feature__media img { border-radius: var(--radius); border: 1px solid var(--line); }

/* ---- screens gallery ----------------------------------------------------- */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.screen { margin: 0; display: grid; gap: var(--s4); }
.screen img { border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.screen figcaption { font: 400 .75rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); margin-top: var(--s10); }
.phones img { border-radius: 1.75rem; border: 6px solid var(--ink-3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); aspect-ratio: 390 / 844; object-fit: cover; object-position: top; width: 100%; }
.phones .phone--mid { transform: translateY(var(--s9)); }

/* ---- everything included (bone section) ---------------------------------- */
.included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.included > div { display: grid; gap: var(--s3); align-content: start; padding: var(--s7) var(--s6) var(--s7) 0; border-bottom: 1px solid #c9c0b3; }
.included > div:nth-child(3n + 2), .included > div:nth-child(3n + 3) { padding-inline-start: var(--s6); border-inline-start: 1px solid #c9c0b3; }
.included h3 { margin: 0; font-size: 1.125rem; font-weight: 800; }
.included p { margin: 0; font-size: .9375rem; color: #5c554d; }

/* ---- faq ----------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s10); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  min-height: 4rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--font-mono); color: var(--rec-ink); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--s6); color: var(--muted); max-width: 40rem; }

/* ---- cta ----------------------------------------------------------------- */
.cta { display: grid; gap: var(--s7); justify-items: start; }
.cta__title { font-size: clamp(3rem, 11vw, 9rem); }

/* ---- footer -------------------------------------------------------------- */
.site-footer { background: var(--ink-3); border-top: 1px solid var(--line); padding-block: var(--s9); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s6); font: 400 .75rem/1.6 var(--font-mono); letter-spacing: .06em; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s6); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--bone); }

/* ---- inner pages (docs, support, legal) ---------------------------------- */
.page { padding-block: var(--s10) var(--s11); }
.page__head { display: grid; gap: var(--s5); padding-bottom: var(--s8); margin-bottom: var(--s8); border-bottom: 1px solid var(--line); }
.page__title { font-size: clamp(3rem, 9vw, 6rem); }
.prose { max-width: 48rem; }
.prose h2 { margin: var(--s10) 0 var(--s4); padding-top: var(--s5); border-top: 1px solid var(--bone); font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }
.prose h3 { margin: var(--s7) 0 var(--s2); font-size: 1.125rem; }
.prose p, .prose li { color: var(--bone); }
.prose .muted { color: var(--muted); }
.prose a { color: var(--rec-ink); }
.prose code { padding: .1rem .35rem; border: 1px solid var(--line); border-radius: 4px; font: .875rem var(--font-mono); }
.prose table { width: 100%; margin: var(--s4) 0; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.prose th { font: 400 .75rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prose details { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.prose summary { cursor: pointer; font-weight: 700; }
.toc ol { columns: 2; padding-inline-start: var(--s5); }
.table-scroll { overflow-x: auto; }

/* support form */
.form { display: grid; gap: var(--s5); padding: var(--s7); border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); max-width: 48rem; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.form label { display: grid; gap: var(--s2); font: 400 .75rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 3.25rem; padding: var(--s3) var(--s4);
  border: 1px solid #5a524b; border-radius: .75rem; background: var(--ink);
  color: var(--bone); font: 400 1rem/1.4 var(--font-display); letter-spacing: 0; text-transform: none;
}
.form textarea { min-height: 10rem; resize: vertical; }
.form input[type=file] { padding: var(--s3); }
.form .hint { margin: 0; font-size: .875rem; color: var(--muted); }
.form button { justify-self: start; cursor: pointer; }
.hp { position: absolute; left: -9999px; }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-bottom: var(--s8); max-width: 48rem; }
.promises div { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.promises strong { font-weight: 900; text-transform: uppercase; }
.promises span { font-size: .9375rem; color: var(--muted); }
.notice { padding: var(--s6); border: 1px solid var(--rec); border-radius: var(--radius); max-width: 48rem; }

/* ---- responsive (last) --------------------------------------------------- */
@media (max-width: 989px) {
  .nav a:not(.btn) { display: none; }
  .hero__body, .feature, .faq { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .feature--flip .feature__copy { order: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screens .screen:last-child { grid-column: 1 / -1; }
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .included > div:nth-child(3n + 2), .included > div:nth-child(3n + 3) { padding-inline-start: 0; border-inline-start: 0; }
  .included > div:nth-child(2n) { padding-inline-start: var(--s6); border-inline-start: 1px solid #c9c0b3; }
  .hero__phone { right: 0; }
}

@media (max-width: 749px) {
  .section { padding-block: var(--s10); }
  .facts, .screens, .included, .promises, .form .row { grid-template-columns: minmax(0, 1fr); }
  .facts > div, .facts > div:nth-child(n) { border-inline-start: 0; padding-inline: 0; border-top: 1px solid var(--line); }
  .facts > div:first-child { border-top: 0; }
  .screens .screen:last-child { grid-column: auto; }
  .included > div:nth-child(n) { padding-inline-start: 0; border-inline-start: 0; }
  .phones { gap: var(--s3); }
  .phones img { border-width: 3px; border-radius: 1rem; }
  .hero__phone { width: 32%; border-width: 3px; border-radius: 1rem; bottom: -2rem; }
  .toc ol { columns: 1; }
  .form { padding: var(--s5); }
  .nav .btn { padding: 0 var(--s4); font-size: .6875rem; }
}

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