/* ==========================================================================
   2G PRODUCT PAGE STYLESHEET (static/2g.css)
   Clean, Swiss / Scandinavian hyperminimalist design language.
   Matches WX & WHORL pedigree with subtle horizontal paper tint strips
   and authentic early-2000s handheld mobile LCD sampler screen.
   ========================================================================== */

:root {
  --two-g-paper: #f6f4ee;
  --two-g-paper-warm: #edf0e5; /* Ultra-subtle sage warm paper tint */
  --two-g-ink: #252520;
  --two-g-muted: #747064;
  --two-g-quiet: #8b8578;
  --two-g-border: rgba(37, 37, 32, 0.08);

  /* 2G Brand Theme: Authentic Plugin Handset LCD Olive Palette */
  --two-g-lcd-green: #b6c777;
  --two-g-lcd-green-bright: #c4d586;
  --two-g-lcd-ink: #28301d;

  /* Olive Retro LCD Canvas */
  --lcd-bg: #b6c777;
  --lcd-ink: #28301d;
  --lcd-dim: rgba(40, 48, 29, 0.22);
}

/* Base page override */
body.two-g-page {
  background-color: var(--two-g-paper);
  color: var(--two-g-ink);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Bitmap Title & Hero Layout
   -------------------------------------------------------------------------- */
body.two-g-page .whorl-hero-section,
.two-g-hero-section {
  background: var(--two-g-paper) !important;
  padding-top: clamp(20px, 3.5vw, 40px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.two-g-hero-section .whorl-hero-split {
  width: min(100% - 48px, 860px);
  padding: 36px 0 32px;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 44px);
  justify-content: center;
}

.two-g-hero-section .whorl-hero-right {
  justify-content: flex-start;
}

.two-g-bitmap-title {
  margin: 0 0 14px 0;
  user-select: none;
  line-height: 1;
}

.two-g-title-svg {
  height: clamp(38px, 5.2vw, 54px);
  width: auto;
  display: block;
  fill: currentColor;
}

.two-g-lead-copy {
  max-width: 32rem;
  margin: 18px 0 28px;
  color: var(--two-g-muted);
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: 300;
  line-height: 1.65;
}

body.two-g-page .whorl-hero-buy-btn,
body.two-g-page .two-g-hero-cta,
.two-g-hero-cta {
  background: var(--two-g-lcd-green) !important;
  color: var(--two-g-lcd-ink) !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(182, 199, 119, 0.35);
  transition: all 180ms ease;
}

body.two-g-page .whorl-hero-buy-btn:hover,
body.two-g-page .two-g-hero-cta:hover,
.two-g-hero-cta:hover {
  background: var(--two-g-lcd-green-bright) !important;
  color: #1e2515 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(182, 199, 119, 0.45);
}

body.two-g-page .whorl-hero-buy-btn .whorl-os-svg,
body.two-g-page .two-g-hero-cta .whorl-os-svg,
.two-g-hero-cta .whorl-os-svg {
  fill: var(--two-g-lcd-ink) !important;
}

body.two-g-page .whorl-hero-buy-btn .whorl-btn-text,
body.two-g-page .two-g-hero-cta .whorl-btn-text,
.two-g-hero-cta .whorl-btn-text {
  color: var(--two-g-lcd-ink) !important;
  font-weight: 600 !important;
}

.two-g-sticky-btn {
  appearance: none;
  border: none !important;
  background: var(--two-g-lcd-green) !important;
  color: var(--two-g-lcd-ink) !important;
  padding: 8px 18px !important;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0 2px 8px rgba(182, 199, 119, 0.25);
}

.two-g-sticky-btn:hover {
  background: var(--two-g-lcd-green-bright) !important;
  color: #1e2515 !important;
  opacity: 1 !important;
}

.two-g-hero-phone {
  position: relative;
  width: 100%;
  max-width: 310px; /* Reduced by 30% from 440px */
  margin: 0;
  display: block;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

.two-g-hero-img {
  width: 100%;
  max-width: 310px;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0;
}

.two-g-hero-img-off {
  display: block;
}

.two-g-hero-img-on {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
  pointer-events: none;
}

/* Light Off State (Nokia LCD backlight auto-sleep simulation) */
.two-g-hero-phone.is-light-off .two-g-hero-img-on {
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4-5px Tiny Feedback Blip Animation at Click Coordinates */
.two-g-phone-blip {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  margin-top: -2.5px;
  background: #28301d;
  pointer-events: none;
  z-index: 10;
  border-radius: 0;
  animation: two-g-blip-anim 280ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes two-g-blip-anim {
  0% {
    transform: scale(0.6);
    opacity: 0.95;
    background: #28301d;
  }
  45% {
    transform: scale(1.4);
    opacity: 0.85;
    background: #b6c777;
    box-shadow: 0 0 4px rgba(182, 199, 119, 0.8);
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Subtle Horizontal Tint Strips (Border-Free Swiss Formula)
   -------------------------------------------------------------------------- */
.two-g-strip {
  width: 100%;
  padding: clamp(24px, 3vw, 36px) 0;
  background-color: var(--two-g-paper);
  box-sizing: border-box;
}

.two-g-page .wx-content {
  width: min(100% - 48px, 860px);
}

.two-g-strip-warm {
  background-color: var(--two-g-paper-warm);
}

/* Feature 2-Column Split (Root Note Analysis, Small Speaker Simulation etc.) */
.two-g-feature-split {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 44px);
  max-width: 860px;
  margin: 0 auto;
}

.two-g-feature-split-reverse {
  grid-template-columns: 1fr auto;
}

.two-g-feature-left,
.two-g-feature-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.two-g-feature-right,
.two-g-feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.two-g-feature-right h2,
.two-g-feature-text h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--two-g-ink);
  margin: 0 0 14px;
}

.two-g-feature-right p,
.two-g-feature-text p {
  max-width: 34rem;
  margin: 0;
  color: var(--two-g-muted);
  font-size: clamp(15px, 1.35vw, 16.5px);
  font-weight: 300;
  line-height: 1.65;
}

.two-g-feature-right p + p,
.two-g-feature-text p + p {
  margin-top: 1rem;
}

.two-g-feature-right strong,
.two-g-feature-text strong {
  font-weight: 600;
  color: var(--two-g-ink);
}

/* Horizontal Handset Casing (Authentic 2D pixel-art handset casing from 2gprogramscreenshot.webp) */
.two-g-bezel-casing-horizontal {
  position: relative;
  width: 372px;
  max-width: 100%;
  aspect-ratio: 124 / 77;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The soft shadow lives on its own static layer. A filter on the casing itself would be re-run over the
   whole subtree, canvases included, every time the LCD repaints, which phones cannot keep up with. */
.two-g-bezel-casing-horizontal::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('screen-bezel-handset.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 14px rgba(37, 37, 32, 0.08));
  pointer-events: none;
  z-index: 0;
}

.two-g-bezel-casing-horizontal::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('screen-bezel-handset.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 5;
}

.two-g-screen-static {
  position: absolute;
  left: 11.29%;
  top: 2.597%;
  width: 77.42%;
  height: 94.805%;
  background: #858b70;
  overflow: hidden;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: block;
}

.two-g-screen-static-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@media (max-width: 768px) {
  .two-g-feature-split,
  .two-g-feature-split-reverse {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .two-g-feature-split-reverse .two-g-feature-media {
    order: -1;
  }
  .two-g-feature-right,
  .two-g-feature-text {
    align-items: center;
  }
  .two-g-feature-right p,
  .two-g-feature-text p {
    margin: 0 auto;
  }
  .two-g-feature-right p + p,
  .two-g-feature-text p + p {
    margin-top: 1rem;
  }
}

/* Centered Block Alignment & Strict Gap Normalization */
.two-g-page .wx-copy-block.wx-centered-block {
  margin: 0 auto !important;
  padding: 0 !important;
}

.wx-centered-block {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.wx-centered-block h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--two-g-ink);
  margin: 0 0 12px;
}

.wx-centered-block p {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--two-g-muted);
  font-size: clamp(15px, 1.35vw, 16.5px);
  font-weight: 300;
  line-height: 1.65;
}

.wx-centered-block p + p {
  margin-top: 1.1rem;
}

.wx-centered-block strong {
  font-weight: 600;
  color: var(--two-g-ink);
}

/* --------------------------------------------------------------------------
   Neural Synthesis Sampler Showcase (Handset Bezel Casing & LCD)
   -------------------------------------------------------------------------- */
.two-g-sampler-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.5vw, 32px);
  margin: 32px auto 0;
  max-width: 560px;
  position: relative;
  user-select: none;
}

.two-g-device-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Handset LCD Screen nested inside the horizontal handset casing */
.two-g-screen-frame {
  position: absolute;
  left: 11.29%;
  top: 2.597%;
  width: 77.42%;
  height: 94.805%;
  background: #858b70;
  overflow: hidden;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.two-g-screen-frame.is-playable {
  cursor: pointer;
}

#lcd-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

#lcd-texture {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  pointer-events: none;
}

/* Slide Navigation Arrows (Border-free, radius-free minimalist) */
.two-g-slide-nav {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--two-g-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity 160ms ease, transform 160ms ease;
  flex-shrink: 0;
  padding: 0;
}

.two-g-slide-nav:hover {
  opacity: 0.55;
  transform: scale(1.1);
}

.two-g-slide-nav:active {
  transform: scale(0.95);
}

/* Slide Dots (Square pixel style) */
.two-g-slide-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.slide-dot {
  appearance: none;
  width: 6px;
  height: 6px;
  border-radius: 0;
  border: none;
  padding: 0;
  background: rgba(37, 37, 32, 0.22);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.slide-dot:hover {
  background: rgba(37, 37, 32, 0.45);
}

.slide-dot.is-active {
  background: var(--two-g-ink);
  transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Edit Page Screenshot Placeholder (Loop Analysis)
   -------------------------------------------------------------------------- */
.two-g-screenshot-placeholder {
  max-width: 820px;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 44px auto 0;
  background: rgba(37, 37, 32, 0.03);
  border: 1px dashed rgba(37, 37, 32, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.placeholder-inner {
  text-align: center;
}

.placeholder-tag {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #8b8578;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Pricing Section (Hyperminimalist Columns)
   -------------------------------------------------------------------------- */
.two-g-pricing-grid {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: stretch;
}

/* Plan column: LCD-style spec readout, no card chrome */
.two-g-plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.two-g-plan-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--two-g-ink);
}

.two-g-plan-name {
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--two-g-ink);
  padding-bottom: 6px;
}

.two-g-plan-svg {
  height: 19px;
  width: auto;
  display: block;
  fill: currentColor;
}

/* The Sound Engine names are set in the 2G pixel font, 9 rows tall: 2 CSS px per pixel keeps them crisp. */
.two-g-plan-svg-engine {
  height: 18px;
}

.two-g-plan-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.two-g-plan-amount {
  font-size: clamp(36px, 4.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--two-g-ink);
}

.two-g-plan-period {
  font-size: 13px;
  font-weight: 300;
  color: var(--two-g-quiet);
}

/* Spec rows */
.two-g-plan-rows {
  margin: 0 0 28px 0;
  padding: 0;
}

.two-g-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(37, 37, 32, 0.08);
}

.two-g-plan-row dt {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--two-g-muted);
}

.two-g-plan-row dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--two-g-ink);
  font-variant-numeric: tabular-nums;
}

/* Info (i) Hover Tooltip */
.two-g-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
  outline: none;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--two-g-quiet);
  transition: color 160ms ease, opacity 160ms ease;
}

.info-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

.two-g-info-wrap:hover .info-icon,
.two-g-info-wrap:focus-visible .info-icon {
  color: var(--two-g-ink);
}

.info-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  padding: 10px 14px;
  background: var(--two-g-ink);
  color: #f6f4ee;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 100;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.two-g-info-wrap:hover .info-tooltip,
.two-g-info-wrap:focus-visible .info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Base Tier Button */
.two-g-tier-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: auto;
  border-radius: 0;
  border: none !important;
  transition: all 180ms ease;
}

/* Tier 1: Free Button */
.two-g-tier-btn-free {
  border: none !important;
  background: var(--two-g-ink);
  color: #f6f4ee;
  font-weight: 600;
}

.two-g-tier-btn-free:hover {
  background: #111110;
  transform: translateY(-1px);
}

.two-g-tier-btn-free:active {
  transform: translateY(0);
}

/* Tier 2: 2G Studio Button — Authentic Plugin LCD Green CTA */
.two-g-tier-btn-studio {
  border: none !important;
  background: var(--two-g-lcd-green);
  color: var(--two-g-lcd-ink);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(182, 199, 119, 0.35);
}

.two-g-tier-btn-studio:hover {
  background: var(--two-g-lcd-green-bright);
  color: #1e2515;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(182, 199, 119, 0.45);
}

.two-g-tier-btn-studio:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(182, 199, 119, 0.25);
}

/* Studio's sound engine: the LCD green warming into gold. Dark enough to read on the paper. */
#pricing { scroll-margin-top: 64px; }
.two-g-engine-studio {
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, #46621a 0%, #6f9420 40%, #b9841a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #46621a;
}

.two-g-pricing-footnote {
  max-width: 100%;
  margin: 18px 0 0;
  text-align: left;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--two-g-quiet);
}

@media (max-width: 640px) {
  .two-g-pricing-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* --------------------------------------------------------------------------
   Frequently Asked Questions (Understated Accordion)
   -------------------------------------------------------------------------- */
.two-g-faq-list {
  max-width: 640px;
  margin: 0 auto;
  border-top: 1px solid rgba(37, 37, 32, 0.08);
}

.two-g-faq-row {
  border-bottom: 1px solid rgba(37, 37, 32, 0.08);
  padding: 18px 0;
}

.faq-row-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-row-summary::-webkit-details-marker {
  display: none;
}

.faq-question {
  font-size: 15px;
  font-weight: 500;
  color: var(--two-g-ink);
  padding-right: 16px;
}

.faq-indicator {
  font-size: 18px;
  font-weight: 300;
  color: var(--two-g-quiet);
  transition: transform 180ms ease;
}

.two-g-faq-row[open] .faq-indicator {
  transform: rotate(45deg);
}

.faq-row-answer {
  padding-top: 12px;
}

.faq-row-answer p {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--two-g-muted);
}

/* --------------------------------------------------------------------------
   Video frame: same width as the plans, with its own border
   -------------------------------------------------------------------------- */
.two-g-video-frame {
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.two-g-video-frame .wx-video-wrapper {
  border: 0;
}

/* --------------------------------------------------------------------------
   Checkout modal button: LCD green, hover only brightens slightly
   -------------------------------------------------------------------------- */
body.two-g-page .wx-checkout-submit {
  border-color: var(--two-g-lcd-green);
  background: var(--two-g-lcd-green);
  color: var(--two-g-lcd-ink);
}

body.two-g-page .wx-checkout-submit:hover,
body.two-g-page .wx-checkout-submit:focus-visible {
  border-color: var(--two-g-lcd-green-bright);
  background: var(--two-g-lcd-green-bright);
  color: var(--two-g-lcd-ink);
}

body.two-g-page .wx-checkout-submit:active {
  transform: none;
}

body.two-g-page .wx-checkout-submit:hover .wx-checkout-submit-arrow {
  transform: none;
}

/* Changelog: a quiet muted toggle; open, a plain console in the boot screen's colours. */
.two-g-console { margin: 0; }
.two-g-console summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: 12px; color: var(--two-g-quiet); letter-spacing: 0.02em;
}
.two-g-console summary::-webkit-details-marker { display: none; }
.two-g-console summary:hover { color: var(--two-g-ink); }
.two-g-console-log {
  margin: 12px 0 0; padding: 14px 16px;
  background: #1e1e1e; color: #b6c777;
  font: 12px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap; overflow-x: auto;
}
.two-g-console-log b { font-weight: 400; color: #8b8578; }
.two-g-console-log span { color: #6f8a3a; margin-right: 1.2em; }