/* Layout concept: the site is a drawing set. Each page is a sheet with a title block for a footer; sections are ruled
   like drawing panels, figures carry sheet-style references, and the three provenance labels have their own colours. */
@font-face { font-family: "Idyra Sans"; src: url("assets/fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Idyra Sans"; src: url("assets/fonts/InstrumentSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* Instrument Sans lacks ± ≈ ≤ ≥ and the fractions; Work Sans supplies them (declared last, so it wins in its range) */
@font-face { font-family: "Idyra Sans"; src: url("assets/fonts/WorkSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; unicode-range: U+00B1-00B3, U+00BC-00BE, U+2248, U+2264-2265; }
@font-face { font-family: "Idyra Sans"; src: url("assets/fonts/WorkSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; unicode-range: U+00B1-00B3, U+00BC-00BE, U+2248, U+2264-2265; }

:root {
  --paper: #f8f6f2;        /* Idyra warm white (brand palette from the first idyra.ai build) */
  --paper-2: #efebe5;
  --sheet: #fdfcfa;
  --ink: #191714;          /* Idyra ink, oklch(.205 .006 73) */
  --ink-2: #3d3a36;
  --muted: #5f5a54;
  --line: #e2ddd5;
  --line-strong: #c9c3ba;
  --accent: #ef8d68;       /* Idyra terracotta, oklch(.739 .13 41), fills */
  --accent-ink: #a94524;   /* text-safe terracotta */
  --accent-on: #201612;
  --mark: #a73e25;         /* the "dimensional doorway" mark */
  --measured: #2a72b0;
  --measured-dot: #8fd0ff;
  --ai: #6a4fbd;
  --ai-dot: #c9b0ff;
  --confirm: #7f520c;
  --confirm-bg: #f8eacb;
  --wa: #0b7643;
  --wa-hover: #096238;
  --wa-on: #ffffff;
  --band: #191714;         /* brand ink band */
  --band-2: #23201d;       /* oklch(.239 .007 74) */
  --band-ink: #f4efe6;     /* oklch(.952 .01 78) */
  --band-muted: #b7b2aa;   /* oklch(.765 .013 78) */
  --band-line: #3d3a36;
  --shadow: 0 1px 2px rgb(25 23 20 / .05), 0 24px 80px rgb(25 23 20 / .14);
  --focus: #a94524;
  --rendered-dot: #ef8d68;

  --display: "Idyra Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --body: "Idyra Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs: .78rem; --t-sm: .875rem; --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.625rem;
  --t-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  --t-3xl: clamp(2.3rem, 1.5rem + 3.6vw, 4rem);
  --gutter: 16px;
  --wrap: 1180px;
  --radius: 10px;
  --radius-sm: 6px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191714; --paper-2: #23201d; --sheet: #26231f; --ink: #f4efe6; --ink-2: #d6d0c6; --muted: #b7b2aa;
    --line: #3a3632; --line-strong: #4d4843; --accent: #ef8d68; --accent-ink: #f3a384; --accent-on: #201612; --mark: #ef8d68;
    --measured: #7fc2f4; --ai: #bba3ff; --confirm: #f0c877; --confirm-bg: #3a2c12; --focus: #ef8d68;
    --band: #0f0e0c; --band-2: #1c1a17; --band-ink: #f4efe6; --band-muted: #b7b2aa; --band-line: #34302c;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 24px 80px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #191714; --paper-2: #23201d; --sheet: #26231f; --ink: #f4efe6; --ink-2: #d6d0c6; --muted: #b7b2aa;
  --line: #3a3632; --line-strong: #4d4843; --accent: #ef8d68; --accent-ink: #f3a384; --accent-on: #201612; --mark: #ef8d68;
  --measured: #7fc2f4; --ai: #bba3ff; --confirm: #f0c877; --confirm-bg: #3a2c12; --focus: #ef8d68;
  --band: #0f0e0c; --band-2: #1c1a17; --band-ink: #f4efe6; --band-muted: #b7b2aa; --band-line: #34302c;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 24px 80px rgb(0 0 0 / .4);
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 28px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: var(--t-md); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.band :focus-visible { outline-color: var(--accent); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; background: var(--ink); color: var(--paper); padding: .5rem .8rem; border-radius: var(--radius-sm); z-index: 50; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: 0; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* preview ribbon (removed by the deploy build) */
.ribbon { background: var(--confirm-bg); color: var(--confirm); font-size: var(--t-xs); border-bottom: 1px solid var(--line); }
.ribbon .wrap { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding-block: .45rem; }
.ribbon strong { letter-spacing: .04em; text-transform: uppercase; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { height: 30px; width: auto; }
.brand svg > g:first-of-type { color: var(--mark); }
.nav { display: flex; gap: .15rem; margin-left: auto; min-width: 0; }
.nav a { text-decoration: none; font-size: var(--t-sm); padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--ink-2); white-space: nowrap; }
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.top .btn { flex: none; }
@media (max-width: 1019px) {
  .top-in { flex-wrap: wrap; gap: .25rem 1rem; padding-block: .5rem; }
  .nav { order: 3; flex-basis: 100%; margin-left: calc(-1 * .5rem); flex-wrap: wrap; row-gap: .1rem; }
  .nav a { padding: .35rem .5rem; }
  .top .btn { margin-left: auto; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.05rem; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: var(--t-sm); text-decoration: none; cursor: pointer; line-height: 1.2; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-wa { background: var(--wa); color: var(--wa-on); }
.btn-wa:hover { background: var(--wa-hover); color: var(--wa-on); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); color: var(--paper); }
.btn-line { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.btn-small { min-height: 38px; padding: .45rem .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* sheet furniture */
.eyebrow { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; }
.eyebrow b { color: var(--accent-ink); font-weight: 600; }
.ref { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: .05rem .35rem; white-space: nowrap; }
.dim { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .5rem; color: var(--muted); font-family: var(--mono); font-size: var(--t-xs); }
.dim::before, .dim::after { content: ""; width: 1px; height: 12px; background: var(--line-strong); }
.dim .dim-line { height: 1px; background: var(--line-strong); }
.dim-label { white-space: nowrap; }

/* provenance pills */
.pill { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 700; line-height: 1.25; padding: .28rem .6rem; border-radius: 999px; background: rgb(12 13 15 / .78); color: #fff; max-width: 100%; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--accent); }
.pill--ai::before { background: var(--ai-dot); }
.pill--measured::before { background: var(--measured-dot); }
.pill--static { background: var(--sheet); color: var(--ink); border: 1px solid var(--line-strong); }
.pill-t { min-width: 0; }

/* sections */
.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.section-head { display: grid; gap: .8rem; max-width: 46rem; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.section-head h2 { font-size: var(--t-2xl); }
.section-head > p:not(.eyebrow) { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.5; }
.lead { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.5; max-width: 42rem; }
.prose { max-width: 42rem; display: grid; gap: 1rem; color: var(--ink-2); }
.prose h3 { color: var(--ink); font-size: var(--t-lg); margin-top: .6rem; }
.prose ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.band { background: var(--band); color: var(--band-ink); border-top: 0; }
.band .section-head > p:not(.eyebrow), .band .lead { color: var(--band-muted); }
.band .eyebrow b { color: var(--accent); }
.band .btn-line { color: var(--band-ink); border-color: var(--band-muted); }
.band .btn-line:hover { color: var(--band-ink); border-color: var(--band-ink); }
.band { border-block: 1px solid var(--line-strong); }
.band .eyebrow { color: var(--band-muted); }
.band .ref { color: var(--band-muted); border-color: var(--band-line); }
.fine { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.band .fine { color: var(--band-muted); }

/* hero */
.hero { padding-block: clamp(1.6rem, 1rem + 2.5vw, 3.2rem) clamp(2.4rem, 1.5rem + 3vw, 4rem); }
.hero-grid { display: grid; gap: clamp(1.2rem, .8rem + 1.5vw, 2rem); grid-template-areas: "head" "body" "vis"; }
.hero-head { grid-area: head; } .hero-vis { grid-area: vis; min-width: 0; } .hero-body { grid-area: body; }
.hero h1 { font-size: var(--t-3xl); letter-spacing: -.03em; max-width: 15ch; }
.hero .lead { margin-top: 1rem; }
.hero-body .lead { margin-top: 0; }
.hero .btn-row { margin-top: 1.4rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.4rem; font-size: var(--t-sm); color: var(--muted); }
@media (min-width: 1020px) { .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head vis" "body vis"; align-items: start; column-gap: clamp(2rem, 1rem + 3vw, 3.5rem); } .hero-vis { align-self: center; } }

/* compare slider */
.compare { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 9; max-width: 100%; box-shadow: var(--shadow); touch-action: pan-y; user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .c-top { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare .c-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .25); transform: translateX(-1px); pointer-events: none; }
.compare .c-knob { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #17181b; transform: translate(-50%, -50%); display: grid; place-items: center; box-shadow: 0 2px 10px rgb(0 0 0 / .3); }
.compare .c-knob svg { width: 20px; height: 20px; }
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare input[type="range"]:focus-visible ~ .c-handle .c-knob { outline: 3px solid var(--accent); outline-offset: 2px; }
.compare .c-tag { position: absolute; top: .7rem; }
.compare .c-tag--l { left: .7rem; }
.compare .c-tag--r { right: .7rem; }
.compare-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-top: .7rem; font-size: var(--t-sm); color: var(--muted); }
.compare-labels { display: grid; gap: .7rem 1rem; margin-top: .8rem; }
.compare-labels > div { display: grid; gap: .3rem; justify-items: start; min-width: 0; }
.compare-labels .k { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.compare-labels .pill, .fig figcaption .pill { background: var(--sheet); color: var(--ink); border: 1px solid var(--line-strong); }
.band .fig figcaption .pill { background: var(--band-2); color: var(--band-ink); border-color: var(--band-line); }
@media (min-width: 560px) { .compare-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; max-width: 760px; }
@media (max-width: 559px) { .cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fig figcaption .pill { justify-self: start; }

/* proof strip */
.proof { display: grid; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--sheet); overflow: hidden; }
.proof > div { padding: 1.1rem 1.2rem; display: grid; gap: .25rem; align-content: start; border-top: 1px solid var(--line); }
.proof > div:first-child { border-top: 0; }
.proof .big { font-family: var(--display); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.proof .what { font-size: var(--t-sm); color: var(--ink-2); }
@media (min-width: 720px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } .proof > div { border-top: 0; border-left: 1px solid var(--line); } .proof > div:first-child { border-left: 0; } }

/* point grids */
.points { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.points > article { background: var(--sheet); padding: 1.4rem 1.3rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.points h3 { font-size: var(--t-lg); }
.points p { color: var(--ink-2); }
@media (min-width: 820px) { .points { grid-template-columns: repeat(3, minmax(0, 1fr)); } .points.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.band .points { background: var(--band-line); border-color: var(--band-line); }
.band .points > article { background: var(--band-2); }
.band .points p { color: var(--band-muted); }

/* steps: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .2rem 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.band .steps > li { border-top-color: var(--band-line); }
.steps > li::before { content: counter(step); grid-row: span 2; font-family: var(--mono); font-size: var(--t-sm); width: 2.1rem; height: 2.1rem; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); }
.band .steps > li::before { color: var(--accent); }
.steps h3 { font-size: var(--t-lg); }
.steps p { color: var(--ink-2); }
.steps:not(.row) > li > p { max-width: 68ch; }
.band .steps p { color: var(--band-muted); }
@media (min-width: 900px) { .steps.row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .steps.row > li { grid-template-columns: 1fr; align-content: start; } .steps.row > li::before { grid-row: auto; margin-bottom: .6rem; } }

/* figures */
.fig { margin: 0; display: grid; gap: .55rem; min-width: 0; align-content: start; }
.fig-bar strong { min-width: 0; }
.switch { flex: none; }
.points .ref, .label-card .pill { justify-self: start; }
.label-card .pill { background: var(--sheet); color: var(--ink); border: 1px solid var(--line-strong); }
.compare-labels .pill, .fig figcaption .pill, .twin-bar .pill { border-radius: var(--radius-sm); }
.fig-media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 9; max-width: 100%; }
.fig-media img, .fig-media video { width: 100%; height: 100%; object-fit: cover; }
.fig-media .pill { position: absolute; left: .6rem; top: .6rem; }
.fig figcaption { display: grid; gap: .3rem; font-size: var(--t-sm); color: var(--muted); }
.fig figcaption strong { color: var(--ink); font-size: var(--t-md); }
.band .fig figcaption strong { color: var(--band-ink); }
.band .fig figcaption { color: var(--band-muted); }
.fig-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; }

.gallery { display: grid; gap: clamp(1.2rem, .8rem + 1.5vw, 2rem); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gallery.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* as-per-plan switch */
.switch { display: inline-flex; align-items: center; gap: .55rem; background: none; border: 0; padding: .3rem 0; cursor: pointer; font-size: var(--t-sm); font-weight: 700; color: var(--ink); min-height: 36px; }
.band .switch { color: var(--band-ink); }
.switch-track { width: 36px; height: 20px; border-radius: 999px; background: var(--muted); position: relative; transition: background .2s var(--ease); flex: none; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.switch[aria-checked="true"] .switch-track { background: var(--accent); }
.switch[aria-checked="true"] .switch-track::after { transform: translateX(16px); }
.state { font-size: var(--t-xs); font-family: var(--mono); color: var(--muted); }

/* twin */
.twin { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--band-2); aspect-ratio: 16 / 10; max-width: 100%; }
.twin img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.twin iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0e0f11; }
.twin .twin-cta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; text-align: center; padding: 1rem; background: linear-gradient(180deg, transparent 30%, rgb(10 11 13 / .6)); }
.twin .twin-cta .fine { color: #e4e6e1; }
.twin-bar { display: grid; gap: .4rem; justify-items: start; margin-bottom: .7rem; }
.twin-bar .pill { background: var(--sheet); color: var(--ink); border: 1px solid var(--line-strong); }
.twin img { object-position: left bottom; }
.twin .twin-cta .fine { background: rgb(10 11 13 / .78); color: #eef0ec; padding: .3rem .7rem; border-radius: var(--radius-sm); }
@media (max-width: 699px) { .twin { aspect-ratio: 4 / 5; } }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); min-width: 560px; }
th, td { text-align: left; padding: .7rem .9rem; border-top: 1px solid var(--line); vertical-align: top; }
thead th { border-top: 0; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--paper-2); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* packages */
.plans { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
.plan--lead { border-color: var(--ink); box-shadow: var(--shadow); }
.plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; }
.plan h3 { font-size: var(--t-xl); }
.price { font-family: var(--display); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.price small { font-size: var(--t-sm); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.plan li { padding-left: 1.3rem; position: relative; color: var(--ink-2); }
.plan li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 1px; background: var(--accent-ink); }
.plan .founding { background: var(--confirm-bg); color: var(--confirm); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: var(--t-sm); }
.tag { display: inline-block; font-family: var(--mono); font-size: var(--t-xs); border: 1px solid var(--line-strong); border-radius: 4px; padding: .05rem .4rem; color: var(--muted); white-space: nowrap; }
.tag--pilot { border-color: var(--confirm); color: var(--confirm); }

/* labels explainer */
.labels { display: grid; gap: 1rem; }
@media (min-width: 900px) { .labels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.label-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); padding: 1.2rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.label-card p { color: var(--ink-2); font-size: var(--t-sm); }
.definition { font-family: var(--display); font-size: var(--t-lg); line-height: 1.5; padding: 1.1rem 1.3rem; border-left: 3px solid var(--accent); background: var(--sheet); border-radius: 0 var(--radius) var(--radius) 0; max-width: 52rem; }

/* calculator */
.calc { display: grid; gap: 1rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.3rem; max-width: 40rem; }
.calc label { font-weight: 700; font-size: var(--t-sm); }
.calc-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.calc input { width: 12rem; max-width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--muted); border-radius: var(--radius-sm); background: var(--paper); font-variant-numeric: tabular-nums; }
.calc output { font-family: var(--display); font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }

/* contact */
.phone { font-family: var(--display); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.01em; user-select: all; font-variant-numeric: tabular-nums; }
.contact-card { display: grid; gap: 1rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: clamp(1.2rem, 1rem + 1vw, 2rem); max-width: 40rem; }
.copy-note { font-size: var(--t-sm); color: var(--muted); min-height: 1.4em; }

/* language tabs */
.langs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.langs button { border: 1px solid var(--band-line); background: transparent; color: var(--band-ink); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; font-size: var(--t-sm); min-height: 36px; }
.langs button[aria-selected="true"] { background: var(--band-ink); color: var(--band); }

/* footer: a drawing title block */
.titleblock { border-top: 1px solid var(--line-strong); background: var(--sheet); margin-top: 0; }
.tb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.tb > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .8rem .9rem; display: grid; gap: .25rem; align-content: start; min-width: 0; }
.tb .k { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tb .v { font-size: var(--t-sm); color: var(--ink-2); }
.tb .v a { color: var(--ink); }
.tb .wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .tb { grid-template-columns: 1.4fr 1fr 1fr 1fr .9fr; } .tb .wide { grid-column: auto; } .tb .span2 { grid-column: span 2; } .tb > div:nth-child(5) { grid-row: span 2; } }
.foot-nav { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: .15rem 1rem; }
.foot-nav a { font-size: var(--t-sm); }

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

/* tables stack into label/value rows on phones, so no column (prices, notes) is hidden */
@media (max-width: 599px) {
  table.stack { min-width: 0; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; padding: .75rem .9rem; border-top: 1px solid var(--line); }
  table.stack tr:first-child { border-top: 0; }
  table.stack td { border: 0; padding: 0; }
  table.stack td:first-child { font-weight: 700; color: var(--ink); }
  table.stack td:not(:first-child):not(.num) { grid-column: 1 / -1; color: var(--muted); }
  table.stack td.num { grid-column: 2; grid-row: 1; text-align: right; }
}

/* home hero as a brand band (the first idyra.ai build's dark, cinematic opener) */
.hero.band { border-top: 0; }
.hero.band .hero-meta, .hero.band .compare-cap, .hero.band .compare-labels .k { color: var(--band-muted); }
.hero.band .compare-labels .pill { background: var(--band-2); color: var(--band-ink); border-color: var(--band-line); }
.hero.band .lead { color: var(--band-muted); }
.hero.band .compare { box-shadow: 0 24px 80px rgb(0 0 0 / .45); }

/* FAQ */
.faq { display: grid; gap: 0; max-width: 52rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0; font-weight: 700; font-size: var(--t-lg); position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: .85rem; font-family: var(--mono); font-size: 1.3rem; color: var(--accent-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding: 0 0 1.1rem; color: var(--ink-2); max-width: 68ch; }

/* lead offer */
.offer { display: grid; gap: 1rem; align-items: center; background: var(--band); color: var(--band-ink); border-radius: var(--radius); padding: clamp(1.2rem, 1rem + 1.5vw, 2rem); }
.offer p { color: var(--band-muted); }
.offer .eyebrow { color: var(--band-muted); } .offer .eyebrow b { color: var(--accent); }
@media (min-width: 820px) { .offer { grid-template-columns: minmax(0, 1fr) auto; } }
.plan .btn { justify-self: start; }

/* brief builder: composes a WhatsApp message in the browser; nothing is sent from the page */
.brief { display: grid; gap: 1.2rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: clamp(1.2rem, 1rem + 1vw, 2rem); max-width: 52rem; }
.brief fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; min-width: 0; }
.brief legend { font-weight: 700; margin-bottom: .45rem; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .85rem; border: 1px solid var(--muted); border-radius: 999px; font-size: var(--t-sm); cursor: pointer; background: var(--paper); }
.chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.brief .field { display: grid; gap: .35rem; }
.brief .field label { font-weight: 700; font-size: var(--t-sm); }
.brief input[type="text"] { min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--muted); border-radius: var(--radius-sm); background: var(--paper); max-width: 26rem; width: 100%; }
.brief-out { font-family: var(--mono); font-size: var(--t-sm); white-space: pre-wrap; background: var(--paper-2); border-radius: var(--radius-sm); padding: .8rem .9rem; color: var(--ink-2); margin: 0; }
.twin-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem 1.4rem; }
.twin-steps li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: baseline; font-size: var(--t-sm); color: var(--ink-2); }
.twin-steps b { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-ink); letter-spacing: .06em; }
@media (min-width: 820px) { .twin-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }