/*
 * Flipism static pages — shared stylesheet.
 *
 * Tokens come straight from DESIGN.md. The page deliberately reuses the
 * product's node-path grammar instead of generic legal-document styling:
 * every list item starts with a node, adjacent items are joined by a
 * continuous line, and there are no card borders, separators, or shadows.
 */

:root {
  --canvas: #ffffff;
  --soft-surface: #f7f9fc;
  --ink: #263248;
  --muted-ink: #667085;
  --path: #c2c8d4;
  --primary: #4361ee;
  --violet: #9458df;
  --cyan: #0eb4ce;
  --amber: #ffb020;
  --coral: #ff477e;
  --mint: #06d6a0;
  --focus-inner: #ffffff;
  --focus-outer: #111722;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --rounded-control: 12px;
  --rounded-pill: 999px;

  --measure: 46rem;
  --node-size: 12px;
  --node-column: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #161b24;
    --soft-surface: #1d232f;
    --ink: #e7ecf4;
    --muted-ink: #9aa5b8;
    --path: #39424f;
    --primary: #8ba3ff;
  }
}

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

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

body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", "Noto Sans", "PingFang SC", "Microsoft YaHei", Arial,
    sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.shell {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

/* ---------- Masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-sm) 0 var(--space-xl);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.brand img {
  width: 34px;
  height: 34px;
  display: block;
}

/* Language switch: a pill pair, not a dropdown. Two languages only. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--soft-surface);
  border-radius: var(--rounded-pill);
  padding: var(--space-xs);
}

.lang-switch a,
.lang-switch span {
  display: inline-block;
  min-height: 32px;
  padding: 5px 14px;
  border-radius: var(--rounded-pill);
  font-size: 0.875rem;
  line-height: 22px;
  text-decoration: none;
  color: var(--muted-ink);
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
  color: var(--ink);
}

.lang-switch [aria-current="true"] {
  background: var(--canvas);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Type ---------- */

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: var(--space-xl) 0 var(--space-sm);
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-xs);
}

p {
  margin: 0 0 var(--space-md);
}

a {
  color: var(--primary);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

.lede {
  font-size: 1.125rem;
  color: var(--muted-ink);
  margin-bottom: var(--space-lg);
}

.meta {
  color: var(--muted-ink);
  font-size: 0.875rem;
  margin: 0 0 var(--space-xl);
}

strong {
  font-weight: 600;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.875em;
  background: var(--soft-surface);
  border-radius: 6px;
  padding: 1px 6px;
}

/* ---------- Node path list ---------- */

.node-path {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.node-path > li {
  position: relative;
  padding: 0 0 var(--space-md) var(--node-column);
  min-height: 44px;
}

/* The node. */
.node-path > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  background: var(--primary);
}

/* The path connecting this node to the next one. Round cap via radius. */
.node-path > li::after {
  content: "";
  position: absolute;
  left: calc(var(--node-size) / 2 - 1.5px);
  top: calc(0.55em + var(--node-size));
  bottom: -0.2em;
  width: 3px;
  border-radius: var(--rounded-pill);
  background: var(--path);
}

.node-path > li:last-child {
  padding-bottom: 0;
}

.node-path > li:last-child::after {
  display: none;
}

/* Mode colors cycle across nodes; the path line stays neutral. */
.node-path > li:nth-child(4n + 2)::before {
  background: var(--violet);
}

.node-path > li:nth-child(4n + 3)::before {
  background: var(--cyan);
}

.node-path > li:nth-child(4n + 4)::before {
  background: var(--amber);
}

.node-path p {
  margin: 0 0 var(--space-xs);
}

.node-path p:last-child {
  margin-bottom: 0;
}

.node-title {
  font-weight: 600;
}

/* ---------- Plain prose list ---------- */

.plain-list {
  margin: 0 0 var(--space-md);
  padding-left: 1.25rem;
}

.plain-list li {
  margin-bottom: var(--space-xs);
}

/* ---------- Soft group ---------- */
/* DESIGN.md: soft surface is for temporary grouping, not a card grid. */

.soft-group {
  background: var(--soft-surface);
  border-radius: var(--rounded-control);
  padding: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.soft-group > :last-child {
  margin-bottom: 0;
}

/* ---------- Actions ---------- */

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-lg);
  border-radius: var(--rounded-control);
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.action:hover,
.action:focus-visible {
  filter: brightness(1.06);
}

.action--quiet {
  background: var(--soft-surface);
  color: var(--ink);
}

/* ---------- Data table ---------- */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-lg);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.9375rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
}

th {
  font-weight: 600;
  color: var(--muted-ink);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr + tr td {
  border-top: 1px solid var(--path);
}

/* ---------- Footer ---------- */

.page-footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  color: var(--muted-ink);
  font-size: 0.875rem;
}

.page-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

@media (min-width: 40rem) {
  .shell {
    padding: var(--space-xl) var(--space-lg) 64px;
  }
}

/* ---------- Product landing page ---------- */

.landing {
  --landing-width: 78rem;
}

.landing .shell {
  max-width: var(--landing-width);
  overflow: clip;
}

.landing .masthead {
  padding-bottom: clamp(36px, 5vw, 72px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  min-height: min(780px, calc(100vh - 130px));
}

.hero-copy {
  min-width: 0;
  max-width: 39rem;
  position: relative;
  z-index: 3;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing h1 {
  max-width: 11ch;
  margin: 0 0 var(--space-lg);
  font-size: clamp(3.2rem, 2.2rem + 3.5vw, 5.75rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.landing .lede {
  max-width: 34rem;
  margin-bottom: var(--space-lg);
  color: var(--muted-ink);
  font-size: clamp(1.06rem, 1rem + 0.25vw, 1.2rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.action.action--primary {
  min-height: 50px;
  padding: 0 22px;
  gap: 10px;
  background: var(--primary);
  box-shadow: 0 12px 30px rgb(67 97 238 / 22%);
  transition: transform 160ms ease, filter 160ms ease;
}

.action.action--primary:hover {
  transform: translateY(-2px);
}

.web-app-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action.action--primary:focus-visible,
.beta-links a:focus-visible {
  outline: 3px solid var(--focus-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-outer);
}

.action-note,
.beta-note {
  color: var(--muted-ink);
  font-size: 0.8rem;
}

.beta-links {
  display: flex;
  gap: var(--space-sm);
  max-width: 28rem;
}

.beta-links a {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  min-height: 64px;
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--path);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.beta-links a:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.platform-logo {
  width: 25px;
  height: 25px;
  fill: currentColor;
  flex: none;
}

.platform-logo--android { color: #3ddc84; }
.platform-logo--apple { color: var(--ink); }

.platform-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.platform-copy strong {
  line-height: 1.25;
}

.platform-copy small {
  color: var(--muted-ink);
  font-size: 0.72rem;
  line-height: 1.35;
}

.platform-copy .access-note {
  margin-top: 2px;
  font-size: 0.66rem;
}

.external-mark {
  align-self: start;
  color: var(--muted-ink);
}

.product-stage {
  position: relative;
  min-width: 0;
  height: clamp(540px, 52vw, 690px);
  margin: 0;
}

.product-stage::before {
  content: "";
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  left: 6%;
  top: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 74%, rgb(255 71 126 / 24%), transparent 34%),
    radial-gradient(circle at 70% 72%, rgb(6 214 160 / 23%), transparent 32%),
    radial-gradient(circle at 60% 20%, rgb(67 97 238 / 19%), transparent 42%),
    var(--soft-surface);
}

.stage-path {
  position: absolute;
  width: 45%;
  height: 36%;
  left: 6%;
  top: 9%;
  border-top: 3px solid var(--path);
  border-radius: 50%;
  transform: rotate(-18deg);
  opacity: 0.75;
}

.device {
  position: absolute;
  overflow: hidden;
  border: clamp(5px, 0.55vw, 8px) solid #2d374d;
  border-radius: clamp(25px, 3.1vw, 42px);
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 18%),
    inset 0 0 0 1px rgb(255 255 255 / 12%),
    0 24px 60px rgb(20 27 42 / 28%);
}

.device::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 1.2%;
  left: 50%;
  width: 28%;
  height: 2.4%;
  border-radius: 999px;
  background: #111722;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
}

.device--wheel {
  z-index: 3;
  width: clamp(205px, 20.5vw, 270px);
  left: 32%;
  top: 3%;
}

.device--explore {
  z-index: 1;
  width: clamp(154px, 15.3vw, 204px);
  left: 3%;
  top: 20%;
  transform: rotate(-7deg);
}

.device--dice {
  z-index: 2;
  width: clamp(149px, 14.9vw, 195px);
  right: 3%;
  top: 26%;
  transform: rotate(7deg);
}

.modes {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 8vw, 110px);
  align-items: start;
  padding: clamp(68px, 9vw, 112px) 0;
}

.section-heading h2,
.journey-copy h2,
.closing-cta h2 {
  margin: 0 0 var(--space-md);
  font-size: clamp(2rem, 1.45rem + 2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section-heading > p:last-child,
.journey-copy > p:last-child {
  color: var(--muted-ink);
  text-wrap: pretty;
}

.mode-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mode-list li {
  position: relative;
  display: grid;
  grid-template-columns: 22px 8rem minmax(0, 1fr);
  align-items: center;
  min-height: 62px;
  gap: 12px;
}

.mode-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 38px;
  bottom: -24px;
  width: 3px;
  border-radius: 3px;
  background: var(--path);
}

.mode-list small { color: var(--muted-ink); }
.mode-node { width: 17px; height: 17px; border-radius: 50%; z-index: 1; }
.mode-node--violet { background: var(--violet); }
.mode-node--cyan { background: var(--cyan); }
.mode-node--coral { background: var(--coral); }
.mode-node--amber { background: var(--amber); }
.mode-node--primary { background: var(--primary); }

.decision-journey {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas: "screen copy" "screen steps";
  align-items: center;
  gap: 10px clamp(48px, 9vw, 120px);
  padding: clamp(58px, 8vw, 100px);
  border-radius: 40px;
  background: var(--soft-surface);
}

.saved-screen {
  grid-area: screen;
  position: relative;
  height: clamp(500px, 52vw, 660px);
  margin: 0;
}

.device--saved {
  width: min(100%, 300px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.journey-copy { grid-area: copy; }
.reuse-path { grid-area: steps; list-style: none; margin: 10px 0 0; padding: 0; }
.reuse-path li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 15px 0; }
.reuse-path li > span { color: var(--primary); font-size: 0.75rem; font-weight: 700; }
.reuse-path strong { display: block; }
.reuse-path p { margin: 2px 0 0; color: var(--muted-ink); font-size: 0.92rem; }

.trust-line {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  padding: clamp(56px, 7vw, 88px) 0;
  border-bottom: 1px solid var(--path);
}

.trust-line p { margin: 0; color: var(--muted-ink); }
.trust-line strong { color: var(--ink); }

.closing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: clamp(56px, 7vw, 88px) 0;
}

.closing-cta h2 { max-width: 16ch; margin-bottom: 0; }
.closing-cta .action { flex: none; }

.landing .page-footer {
  margin-top: 0;
  border-top: 1px solid var(--path);
}

@media (max-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .hero-copy { max-width: 44rem; }
  .product-stage { width: min(100%, 650px); margin: 0 auto; }
}

@media (max-width: 46rem) {
  .modes { grid-template-columns: minmax(0, 1fr); padding: 68px 0; }
  .decision-journey {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "screen" "steps";
    padding: 34px 20px;
    border-radius: 28px;
  }
  .saved-screen { height: 590px; }
  .trust-line { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 35rem) {
  .landing .masthead { flex-wrap: nowrap; padding-bottom: 36px; }
  .lang-switch a, .lang-switch span { padding-inline: 10px; }
  .landing h1 { font-size: clamp(2.85rem, 14vw, 4.15rem); }
  .beta-links { width: 100%; }
  .beta-links a { padding-inline: 11px; }
  .product-stage { height: 510px; margin-top: 8px; }
  .device--wheel { width: 184px; left: 26%; }
  .device--explore { width: 120px; left: 5%; top: 23%; }
  .device--dice { width: 118px; right: 5%; top: 28%; }
  .mode-list li { grid-template-columns: 22px 6.2rem minmax(0, 1fr); }
  .saved-screen { height: 520px; }
  .device--saved { width: 220px; }
  .closing-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 22rem) {
  .beta-links { flex-direction: column; }
  .beta-links a { width: 100%; min-height: 76px; }
  .product-stage { transform: scale(0.9); transform-origin: top center; margin-bottom: -50px; }
  .mode-list li { grid-template-columns: 22px minmax(0, 1fr); }
  .mode-list small { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .action.action--primary,
  .beta-links a { transition: none; }
}

/* ---------- Isolated Paddle Sandbox checkout spike ---------- */

.sandbox-pricing .masthead {
  padding-bottom: var(--space-lg);
}

.sandbox-pricing .eyebrow {
  color: var(--coral);
}

.sandbox-pricing .action {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.sandbox-pricing .action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sandbox-billing-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 0;
}

.sandbox-billing-toggle legend {
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.sandbox-billing-toggle [aria-pressed="true"] {
  background: var(--primary);
  color: #ffffff;
}

.sandbox-tier-list .action {
  margin-top: var(--space-sm);
}