:root {
  --bg: #0b0d10;
  --card: #161a20;
  --text: #f3f4f6;
  --text-dim: #9aa1ac;
  --accent: #c73e3e;
  --border: #262b33;
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

h1,
h2 {
  line-height: 1.2;
  margin: 0 0 12px;
}

p {
  color: var(--text-dim);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header */

.site-header {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-size: 1.25rem;
  font-weight: 700;
}

.brand span {
  color: var(--accent);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-nav a {
  color: var(--text-dim);
  font-size: 0.95rem;
  font-weight: 600;
}

.header-nav a:hover {
  color: var(--text);
}

.header-nav .contact-btn {
  color: var(--text);
  background: var(--accent);
  padding: 8px 16px;
  border-radius: 8px;
}

.header-nav .contact-btn:hover {
  color: var(--text);
  opacity: 0.9;
}

/* Hero */

.hero {
  padding: 96px 0 48px;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
}

.hero p {
  font-size: 1.1rem;
}

/* Products */

.product {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}

.product-alt {
  background: var(--card);
}

.product-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.product-inner--solo {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.product-inner--solo .example-links {
  justify-content: center;
}

.product-inner--solo .feature-list {
  text-align: left;
}

.product-inner--stacked {
  grid-template-columns: 1fr;
}

.product-inner--stacked .product-media {
  order: -1;
}

.product-inner--stacked .product-info {
  order: 0;
}

.product-media {
  order: 2;
  display: flex;
  justify-content: center;
}

.product-info {
  order: 1;
}

.product-alt .product-media {
  order: 1;
}

.product-alt .product-info {
  order: 2;
}

.product-num {
  display: block;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.product-info h2 {
  font-size: 1.75rem;
}

.product-info > p {
  font-size: 1.05rem;
  margin-bottom: 24px;
}

.feature-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 4px;
}

.feature-list li {
  padding: 8px 0 8px 24px;
  position: relative;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.example-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.example-links a {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
}

.example-links a:hover {
  text-decoration: underline;
}

/* Screenshot placeholders */

.media-placeholder {
  width: 100%;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.media-placeholder--card {
  max-width: 360px;
  aspect-ratio: 8 / 5;
}

.media-placeholder--wide {
  aspect-ratio: 16 / 9;
}

/* Phone frame — built at a real (slightly wider than iPhone-narrow) device
   resolution, 420x844, then visually scaled down as one unit so the
   embedded app renders at a realistic mobile viewport instead of a
   squished 160px-wide one. */

.phone-frame-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.phone-frame-wrap {
  --phone-scale: 0.62;
  position: relative;
  width: calc(420px * var(--phone-scale));
  height: calc(844px * var(--phone-scale));
  border-radius: calc(46px * var(--phone-scale));
  overflow: hidden;
}

@media (min-width: 420px) {
  .phone-frame-wrap {
    --phone-scale: 0.75;
  }
}

@media (min-width: 600px) {
  .phone-frame-wrap {
    --phone-scale: 0.85;
  }
}

@media (min-width: 801px) {
  .phone-frame-wrap {
    --phone-scale: 0.58;
  }
}

@media (min-width: 1000px) {
  .phone-frame-wrap {
    --phone-scale: 0.62;
  }
}

.phone-frame {
  width: 420px;
  height: 844px;
  transform: scale(var(--phone-scale));
  transform-origin: top left;
  box-sizing: border-box;
  background: #000;
  border: 3px solid var(--border);
  border-radius: 46px;
  padding: 14px;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--card);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Landscape phone frame — same device chrome, turned on its side, for
   content that's meant to be viewed that way (e.g. a member card image,
   revealed behind the same "show preview" button as the other previews —
   but as a plain image rather than an iframe, so the frame's own screen
   background stays consistent instead of depending on some external
   page's background).

   On mobile the phone itself stays upright (portrait) — that's how a phone
   actually sits on a mobile page — and the card image turns 90° inside the
   screen instead, like you'd turn the phone to look at it: the image box
   is sized landscape and then rotated to fit the portrait screen. From the
   tablet breakpoint up there's room to just draw the whole phone turned on
   its side, so the frame goes landscape and the image sits unrotated. */

.phone-frame-wrap--landscape {
  --phone-scale: 0.62;
  width: calc(420px * var(--phone-scale));
  height: calc(650px * var(--phone-scale));
  border-radius: calc(46px * var(--phone-scale));
}

@media (min-width: 420px) {
  .phone-frame-wrap--landscape {
    --phone-scale: 0.75;
  }
}

@media (min-width: 600px) {
  .phone-frame-wrap--landscape {
    --phone-scale: 0.85;
  }
}

@media (min-width: 801px) {
  .phone-frame-wrap--landscape {
    --phone-scale: 0.4;
    width: calc(844px * var(--phone-scale));
    height: calc(420px * var(--phone-scale));
    border-radius: calc(30px * var(--phone-scale));
  }
}

@media (min-width: 1000px) {
  .phone-frame-wrap--landscape {
    --phone-scale: 0.48;
  }
}

.phone-frame-wrap--landscape .phone-frame {
  width: 420px;
  height: 650px;
  border-radius: 46px;
}

@media (min-width: 801px) {
  .phone-frame-wrap--landscape .phone-frame {
    width: 844px;
    height: 420px;
    border-radius: 30px;
  }
}

.phone-frame-wrap--landscape .phone-screen {
  border-radius: 34px;
  padding: 20px;
  background: #15171b;
}

@media (min-width: 801px) {
  .phone-frame-wrap--landscape .phone-screen {
    border-radius: 18px;
    padding: 24px;
  }
}

.phone-frame-wrap--landscape .card-frame {
  flex-shrink: 0;
  width: 546px;
  height: 344px;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

@media (max-width: 800px) {
  .phone-frame-wrap--landscape .card-frame {
    transform: rotate(90deg);
  }
}

.phone-frame-wrap--landscape .card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phone-frame-wrap--landscape:has(.image-preview-btn) .card-frame {
  visibility: hidden;
}

.phone-preview-btn,
.group-preview-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(2px);
  border: 0;
  border-radius: inherit;
  padding: 12px 16px;
  margin: 0;
  cursor: pointer;
}

.phone-preview-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phone-preview-icon::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent var(--text);
  transform: translateX(2px);
}

/* Preview group — several frames (e.g. a PC + a phone) where clicking the
   overlay button on either screen reveals both at once. Each button sits
   inside its own screen, matching that screen's own rounded corners. */

.preview-group-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

/* This section pairs a PC frame with a phone frame side by side, which
   needs more room than the standard container gives other (text) sections. */

#overlay .container {
  max-width: 1120px;
}

/* PC frame — built at a real desktop resolution (1920x1080, the size the
   overlay is actually designed for), then visually scaled down as one unit
   so the embedded page renders its real desktop layout instead of a
   squished mobile one. */

.pc-frame-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pc-frame-scale {
  --pc-scale: 0.16;
  position: relative;
  width: calc(1920px * var(--pc-scale));
  height: calc(1080px * var(--pc-scale));
  border-radius: calc(24px * var(--pc-scale));
  overflow: hidden;
}

.preview-group-media .phone-frame-wrap {
  --phone-scale: 0.48;
}

@media (min-width: 400px) {
  .pc-frame-scale {
    --pc-scale: 0.2;
  }

  .preview-group-media .phone-frame-wrap {
    --phone-scale: 0.52;
  }
}

@media (min-width: 600px) {
  .pc-frame-scale {
    --pc-scale: 0.26;
  }

  .preview-group-media .phone-frame-wrap {
    --phone-scale: 0.58;
  }
}

@media (min-width: 800px) {
  .pc-frame-scale {
    --pc-scale: 0.35;
  }

  .preview-group-media .phone-frame-wrap {
    --phone-scale: 0.66;
  }
}

@media (min-width: 1000px) {
  .pc-frame-scale {
    --pc-scale: 0.39;
  }

  .preview-group-media .phone-frame-wrap {
    --phone-scale: 0.62;
  }
}

.pc-frame {
  width: 1920px;
  aspect-ratio: 16 / 9;
  transform: scale(var(--pc-scale));
  transform-origin: top left;
  box-sizing: border-box;
  background: #000;
  border: 10px solid var(--border);
  border-radius: 24px;
  padding: 20px;
}

.pc-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
}

.pc-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.pc-stand {
  width: 64px;
  height: 30px;
  background: var(--border);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
}

.pc-base {
  width: 140px;
  height: 10px;
  background: var(--border);
  border-radius: 4px;
}

@media (max-width: 800px) {
  .product-inner {
    grid-template-columns: 1fr;
  }

  .product-media,
  .product-alt .product-media {
    order: -1;
  }

  .product-info,
  .product-alt .product-info {
    order: 0;
  }
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.email-link {
  color: var(--accent);
  font-weight: 600;
}

.legal-nav {
  display: flex;
  gap: 16px;
}

.legal-nav a {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.legal-nav a:hover {
  color: var(--text);
}

/* Legal pages */

.legal {
  padding: 64px 0 96px;
}

.legal h1 {
  font-size: 1.75rem;
}

.legal p {
  margin: 0 0 12px;
}