/* Shared parts of every product landing. Colours and fonts come from tokens.css;
   each page sets only --accent. One-off visuals stay inline in the page. */

/* ---------- base ---------- */

body { margin: 0; background: var(--ground); }
a { color: var(--accent); }
a:hover { color: color-mix(in srgb, var(--accent) 65%, black); }
.page { background: var(--ground); color: var(--ink); font-family: var(--font-body); min-height: 100vh; }

/* ---------- platform bar (dark strip on top of every product) ---------- */

.platform-bar { background: var(--ink); color: #C9CED7; font-size: 13px; }
.platform-bar__inner { max-width: var(--container); margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.platform-bar__brand { font-family: var(--font-mono); letter-spacing: 0.04em; color: #C9CED7; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.platform-bar__links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.platform-bar__link { color: #E6E8EC; text-decoration: none; }
.platform-bar__signin { color: #FFFFFF; text-decoration: none; font-weight: 600; }

/* ---------- product nav ---------- */

.product-nav { max-width: var(--container); margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.product-nav__brand { display: flex; align-items: center; gap: 12px; }
.product-nav__links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.product-nav__link { color: var(--ink-2); text-decoration: none; }

/* ---------- hero ---------- */

.hero { max-width: var(--container); margin: 0 auto; padding: 48px 24px 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 56px; align-items: center; }
.hero--compact { padding-bottom: 80px; }
.hero__title { margin: 0; font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 700; }
.hero__title--compact { font-size: clamp(40px, 5vw, 64px); line-height: 1.03; }
.hero__lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 540px; }
.hero__lead--narrow { max-width: 500px; }
.hero__facts { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }

/* ---------- buttons ---------- */

.btn { text-decoration: none; padding: 12px 18px; border-radius: var(--radius-button); font-weight: 600; min-height: var(--tap); box-sizing: border-box; display: inline-flex; gap: 10px; align-items: center; }
.btn--lg { padding: 14px 22px; font-size: 16px; min-height: 48px; }
.btn--block { display: block; text-align: center; padding: 14px; }
.btn--accent { color: #FFFFFF; background: var(--accent); }
.btn--accent:hover { color: #FFFFFF; filter: brightness(0.92); }
.btn--secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.btn--secondary:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- sections ---------- */

.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section { max-width: var(--container); margin: 0 auto; padding: 88px 24px; }
.section--80 { padding: 80px 24px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 48px; align-items: center; }
.section-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: end; }
.section-intro { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }

/* ---------- type ---------- */

.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.eyebrow--muted { font-size: 12px; color: var(--muted); }
.h2 { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; }
.h2--xl { font-size: 44px; line-height: 1.08; }
.h2--sm { font-size: 34px; }
.h2--xs { font-size: 32px; }
.h3 { margin: 0; font-size: 20px; }
.display-22 { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.display-20 { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.text { margin: 0; color: var(--ink-2); line-height: 1.55; }
.text-sm { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.small { font-size: 13px; color: var(--muted); }
.caption { font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }
.medium { font-weight: 500; }
.strong { font-weight: 600; }
.label { font-weight: 600; font-size: 16px; }
.label--18 { font-size: 18px; }
.label--14 { font-size: 14px; }
.mono { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.mono--accent { color: var(--accent); }
.mono--12 { font-size: 12px; }
.mono--11 { font-size: 11px; }

/* ---------- cards and icons ---------- */

.icon-tile { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent); }
.icon-tile--44 { width: 44px; height: 44px; border-radius: 12px; }
.icon-tile--dark { background: var(--ink); }
.faq-card > h3, .faq-card > p { margin: 0; }
.faq-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.debug-link { text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-button); padding: 12px 16px; font-weight: 600; }

/* ---------- pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.plan--pro { border: 2px solid var(--accent); }
.plan__price { font-family: var(--font-display); font-size: 44px; font-weight: 700; }
.plan__period { font-size: 18px; color: var(--muted); font-weight: 500; }
.plan__features { color: var(--ink-2); line-height: 1.8; }
.plan__alt { margin-top: -10px; font-size: 15px; color: var(--muted); }
.plan__price--text { font-size: 34px; }
.plans--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plans--3 .plan { padding: 24px; }

/* ---------- connect your AI ---------- */

.ai-block, .cta-block { background: var(--ink); color: #FFFFFF; border-radius: var(--radius-hero); padding: 40px; }
.ai-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; align-items: center; }
.cta-block { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.ai-block__eyebrow { display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #A9B0BD; }
.ai-block__text { margin: 0; color: #C9CED7; line-height: 1.55; }
.mcp-url { font-family: var(--font-mono); font-size: 13px; color: #E6E8EC; background: var(--code-bg); border: 1px solid #2B313C; border-radius: var(--radius-button); padding: 12px 14px; overflow-wrap: anywhere; }
.bubble { padding: 12px 14px; font-size: 15px; }
.bubble--user { align-self: flex-end; max-width: 85%; background: var(--surface); color: var(--ink); border-radius: 14px 14px 4px 14px; }
.bubble--ai { align-self: flex-start; max-width: 88%; background: #2B313C; border-radius: 14px 14px 14px 4px; line-height: 1.5; }

/* ---------- family strip and footer ---------- */

.family { max-width: var(--container); margin: 0 auto; padding: 0 24px 64px; display: flex; flex-direction: column; gap: 20px; }
.family--row { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.family__chip { text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-chip); padding: 8px 16px 8px 8px; display: inline-flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; min-height: var(--tap); box-sizing: border-box; }
.family__dot { width: 28px; height: 28px; border-radius: var(--radius-chip); display: inline-flex; align-items: center; justify-content: center; }
.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner { max-width: var(--container); margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 14px; color: var(--muted); }

/* ---------- element tiles: the logo of every product ----------
   A tile takes its colour from --el; set it inline to the product token,
   for example style="--el: var(--ltp)". Sizes follow the design handoff. */

.element { --el: var(--accent); box-sizing: border-box; display: inline-flex; flex-direction: column; justify-content: space-between; flex: none; background: var(--el); color: #FFFFFF; text-decoration: none; letter-spacing: 0; }
a.element:hover { color: #FFFFFF; }
.element__num { font-family: var(--font-mono); line-height: 1; }
.element__sym { font-family: var(--font-display); font-weight: 700; line-height: 1; }
.element__way { font-size: 11px; font-weight: 600; line-height: 1.1; }
.element--bar { width: 22px; height: 24px; border-radius: 5px; padding: 2px 3px; }
.element--bar .element__num { font-size: 7px; }
.element--bar .element__sym { font-size: 11px; }
.element--nav { width: 44px; height: 48px; border-radius: 9px; padding: 4px 6px; }
.element--nav .element__num { font-size: 9px; }
.element--nav .element__sym { font-size: 21px; }
.element--card { width: 84px; height: 92px; border-radius: 10px; padding: 7px 8px; }
.element--card .element__num { font-size: 10px; }
.element--card .element__sym { font-size: 26px; }
.element--series { width: 96px; height: 100px; border-radius: 12px; padding: 8px 10px; }
.element--series .element__num { font-size: 11px; }
.element--series .element__sym { font-size: 30px; }
.element--series .element__way { font-size: 12px; font-weight: 400; opacity: 0.9; }
.element--chip { width: 44px; height: 46px; border-radius: 8px; padding: 4px 5px; background: #FFFFFF; color: var(--el); }
.element--chip .element__num { font-size: 8px; }
.element--chip .element__sym { font-size: 18px; }
.element--outline { background: var(--surface); border: 2px dashed var(--el); color: var(--el); }
a.element--chip:hover, a.element--outline:hover { color: var(--el); }
/* The current product in a strip; --ring is the background behind the strip. */
.element--current { box-shadow: 0 0 0 3px var(--ring, var(--ground)), 0 0 0 5px var(--ink); }
.element-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.platform-bar__brands { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.product-nav__name { display: flex; flex-direction: column; }
.product-nav__name .display-22 { line-height: 1.1; }
.product-nav__way { font-size: 12px; font-weight: 600; color: var(--newaiway); }

/* ---------- life moment: full-width photo band under the nav ----------
   The photo is an <img> (real alt text); the gradients darken the left side for the
   text and add a glow in the product colour (--accent) from the bottom. */

.moment { position: relative; width: calc(100% - 48px); max-width: 1392px; margin: 0 auto; height: 560px; border-radius: 24px; overflow: hidden; background: #1A1D24; color: #FFFFFF; }
.moment__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.moment__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,17,22,0.78) 0%, rgba(14,17,22,0.42) 42%, rgba(14,17,22,0) 72%), linear-gradient(0deg, color-mix(in srgb, var(--accent) 40%, transparent) 0%, rgba(0,0,0,0) 38%); }
.moment__body { position: absolute; left: clamp(20px, 4vw, 56px); right: 20px; bottom: clamp(24px, 4vw, 56px); max-width: 600px; display: flex; flex-direction: column; gap: 20px; }
.moment__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: rgba(255,255,255,0.85); }
.moment__line { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.02em; }
.moment__note { font-size: 14px; color: rgba(255,255,255,0.85); }
.moment__credit { position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: rgba(255,255,255,0.7); }
.element--moment { width: 52px; height: 58px; border-radius: 10px; padding: 5px 7px; box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
.element--moment .element__num { font-size: 9px; }
.element--moment .element__sym { font-size: 22px; }
/* The smaller band on the way pages: no button, no glow. */
.moment--way { height: 380px; margin-top: 8px; }
.moment--way .moment__shade { background: linear-gradient(90deg, rgba(14,17,22,0.75) 0%, rgba(14,17,22,0.2) 55%, rgba(14,17,22,0) 80%); }
.moment--way .moment__body { bottom: 40px; max-width: 620px; gap: 12px; }
.moment--way .moment__line { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: 0; }
.product-card--photo { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.product-card__photo { height: 180px; width: 100%; object-fit: cover; object-position: center 40%; display: block; background: #1A1D24; }
.product-card__body { padding: 0 22px 22px; display: flex; gap: 16px; align-items: flex-start; margin-top: -35px; }
.product-card__body .element--card64 { box-shadow: 0 0 0 4px var(--surface); }
.product-card__text { padding-top: 61px; }

/* ---------- "why it is a new AI way" (old way vs new AI way) ---------- */

.newway { --nw-ground: #EEF0FB; --nw-line: #D6D4FA; --nw-ink: #312E81; --nw-title: #1E1B4B; --ring: var(--nw-ground); background: var(--nw-ground); border-top: 1px solid var(--nw-line); }
.newway__inner { max-width: var(--container); margin: 0 auto; padding: 72px 24px; display: flex; flex-direction: column; gap: 28px; }
.newway__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; align-items: end; }
.newway__pill { align-self: flex-start; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px 6px 6px; border-radius: var(--radius-chip); background: var(--surface); border: 1px solid var(--nw-line); color: var(--nw-ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.newway__pill:hover { color: var(--nw-ink); }
.newway__pill-icon { width: 24px; height: 24px; border-radius: 6px; background: var(--newaiway); display: inline-flex; align-items: center; justify-content: center; }
.newway__title { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 1.08; color: var(--nw-title); }
.newway__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--nw-ink); }
.newway__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.newway__row--head { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.newway__row--head :last-child { color: var(--newaiway); }
.newway__old, .newway__new { background: var(--surface); border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.newway__old { color: var(--muted); }
.newway__new { border-left: 4px solid var(--accent); font-weight: 600; }
.newway__label { font-size: 13px; font-weight: 600; color: var(--nw-ink); }
.newway__more { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--newaiway); }

/* ---------- final call to action (accent band before the footer) ---------- */

.final-cta { max-width: var(--container); margin: 0 auto; padding: 0 24px 72px; }
.final-cta__box { background: var(--accent); color: #FFFFFF; border-radius: 24px; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.final-cta__top { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.final-cta__text { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.final-cta__title { margin: 0; font-family: var(--font-display); font-size: 38px; line-height: 1.1; }
.final-cta__note { font-size: 16px; opacity: 0.92; }
.final-cta__elements { border-top: 1px solid rgba(255,255,255,0.3); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.final-cta__label { font-size: 14px; margin-right: 6px; }
.final-cta__more, .final-cta__more:hover { color: #FFFFFF; font-size: 14px; font-weight: 600; margin-left: 6px; }
.btn--white, .btn--white:hover { background: #FFFFFF; color: var(--ink); }
.btn--ghost, .btn--ghost:hover { color: #FFFFFF; border: 1px solid rgba(255,255,255,0.6); }

/* ---------- Debug series strip (elements 8–11) ---------- */

.series { max-width: var(--container); margin: 0 auto; padding: 0 24px 64px; display: flex; flex-direction: column; gap: 16px; }
.series__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.series__more { font-weight: 600; font-size: 15px; }
.ai-block__note { font-size: 13px; color: #A9B0BD; }
.site-footer__inner a.muted { color: var(--muted); }

/* ---------- platform site (newaiway.com) ---------- */

.platform-bar__title { font-family: var(--font-mono); letter-spacing: 0.04em; }
.way-board { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 48px -32px rgba(14,17,22,0.35); }
.way-board__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.way-board__badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-chip); background: #EEF0FB; color: #312E81; }
.way-board__facts { border-top: 1px dashed var(--line-strong); padding-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.way-board__fact { border: 1px solid var(--line); border-radius: var(--radius-chip); padding: 6px 12px; }
.element--hero { width: 38px; height: 42px; border-radius: 8px; padding: 4px 6px; }
.element--hero .element__num { font-size: 9px; }
.element--hero .element__sym { font-size: 17px; }
.way-tile, .way-tile:hover { text-decoration: none; color: #FFFFFF; border-radius: 12px; padding: 10px 12px; min-height: 124px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; background: var(--el); }
.way-tile__top { display: flex; justify-content: space-between; gap: 6px; font-family: var(--font-mono); font-size: 11px; opacity: 0.85; overflow-wrap: anywhere; }
.way-tile__sym { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; }
.way-tile__way { font-size: 14px; font-weight: 600; }
.step__num { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.product-card { text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; display: flex; gap: 16px; align-items: flex-start; }
.product-card:hover { color: var(--ink); border-color: var(--el); }
.element--card64 { width: 64px; height: 70px; border-radius: 12px; padding: 6px 8px; }
.element--card64 .element__num { font-size: 10px; }
.element--card64 .element__sym { font-size: 26px; }
.product-card__way { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--el); }
.product-card__try { font-size: 14px; font-weight: 600; color: var(--el); }
.cta-band { background: var(--accent); color: #FFFFFF; }
.cta-band__inner { max-width: var(--container); margin: 0 auto; padding: 80px 24px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; }
.cta-band__note { font-size: 15px; color: #E0E7FF; }
.mcp-code { background: var(--code-bg); border: 1px solid #2B313C; border-radius: 14px; padding: 20px; font-family: var(--font-mono); font-size: 14px; line-height: 1.8; color: #E6E8EC; overflow-wrap: anywhere; }
.mcp-code__comment { color: #A9B0BD; }

/* ---------- way pages (newaiway.com/way/<slug>/) ---------- */

.way-tabs-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.way-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 8px; }
.way-tab { min-height: 56px; border-radius: 12px; display: flex; gap: 10px; align-items: center; padding: 8px 12px; text-decoration: none; border: 1px solid transparent; }
.way-tab[aria-current="page"] { background: #EEF0FB; border: 2px solid var(--newaiway); }
.way-tab__name { display: block; font-size: 11px; color: var(--muted); }
.way-tab__way { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.element--tab { width: 36px; height: 40px; border-radius: 8px; padding: 3px 5px; }
.element--tab .element__num { font-size: 8px; }
.element--tab .element__sym { font-size: 16px; }
.way-url { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 10px 4px 0; }
.way-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-hero); padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 48px -32px rgba(14,17,22,0.35); }
.element--way { width: 76px; height: 84px; border-radius: 14px; padding: 7px 9px; }
.element--way .element__num { font-size: 11px; }
.element--way .element__sym { font-size: 32px; }
.way-card__list { border-top: 1px solid #EEF0F3; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.way-card__link { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.way-card__icon { width: 28px; height: 28px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.caps-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.step-card__num { width: 36px; height: 36px; border-radius: var(--radius-chip); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #FFFFFF; background: var(--accent); }
.step-card__text { font-size: 16px; font-weight: 600; line-height: 1.4; }
.mono-white { font-family: var(--font-mono); color: #FFFFFF; }

/* ---------- periodic table (newaiway.com/periodic/) ---------- */

.pt { max-width: 1360px; margin: 0 auto; padding: 32px 24px 88px; display: flex; flex-direction: column; gap: 32px; }
.pt__title { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; }
.pt__body { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
/* The table keeps its shape and scrolls sideways inside its own box on narrow screens. */
.pt__table { box-sizing: border-box; flex: 0 1 884px; min-width: 0; overflow-x: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; }
.pt__row { display: grid; grid-template-columns: repeat(7, 116px); gap: 10px; }
.pt__legend { grid-column: span 6; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding-left: 16px; font-size: 13px; color: var(--ink-2); }
.pt__swatch { width: 14px; height: 14px; border-radius: 4px; box-sizing: border-box; }
.pt-el { width: 116px; height: 128px; box-sizing: border-box; border-radius: 12px; padding: 10px; cursor: pointer; font: inherit; text-align: left; display: flex; flex-direction: column; justify-content: space-between; color: #FFFFFF; background: var(--el); border: none; }
.pt-el--debug { height: 112px; color: var(--el); background: var(--surface); border: 2px dashed var(--el); }
.pt-el[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--ink); }
.pt-el__top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; opacity: 0.85; }
.pt-el__sym { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; }
.pt-el--debug .pt-el__sym { font-size: 34px; }
.pt-el__name { font-size: 11px; opacity: 0.9; }
.pt-el__way { font-size: 13px; font-weight: 600; }
.pt__debug { display: flex; gap: 10px; align-items: stretch; margin-top: 18px; }
.pt__debug-note { width: 242px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-right: 8px; border-right: 2px dashed #93C5FD; }
.pt__reactions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.pt-reaction { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; gap: 8px; align-items: center; }
.pt-reaction__part { min-width: 34px; height: 34px; padding: 0 4px; box-sizing: border-box; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; background: var(--el); color: #FFFFFF; }
.pt-reaction__op { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--muted); }
.pt-reaction__text { font-size: 13px; color: var(--ink-2); margin-left: 6px; line-height: 1.35; }
.pt-detail { box-sizing: border-box; flex: 1 1 340px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-hero); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.pt-detail[hidden] { display: none; }
.pt-detail__tile { width: 132px; height: 148px; flex: none; box-sizing: border-box; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; color: #FFFFFF; background: var(--el); }
.pt-detail__way { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.05; color: var(--el); }
.pt-detail__section { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #EEF0F3; padding-top: 14px; }
.pt-detail__prop { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pt-detail__open, .pt-detail__open:hover { margin-top: auto; text-decoration: none; text-align: center; color: #FFFFFF; padding: 14px; border-radius: var(--radius-button); font-weight: 600; background: var(--el); }

/* ---------- legal and help pages ---------- */

.legal { max-width: 760px; margin: 0 auto; padding: 48px 24px 88px; display: flex; flex-direction: column; gap: 14px; line-height: 1.6; color: var(--ink-2); }
.legal h1 { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 5vw, 52px); line-height: 1.05; color: var(--ink); }
.legal h2 { margin: 28px 0 0; font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.legal p, .legal ul { margin: 0; }
.legal ul { padding-left: 22px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal code { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
.legal__table-wrap { overflow-x: auto; }
/* Draft markers: remove them when the text is approved. */
.draft-banner { background: #FEF3C7; color: #713F12; border: 1px solid #FCD34D; border-radius: var(--radius-button); padding: 14px 16px; font-size: 14px; }
.legal-new { background: #E0E7FF; color: inherit; padding: 0 2px; border-radius: 3px; }
.legal-review { display: block; background: #FEF3C7; color: #713F12; border-left: 4px solid #F59E0B; border-radius: 6px; padding: 8px 12px; font-size: 14px; }

/* ---------- layout helpers ---------- */

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; }
.inline-row { display: inline-flex; gap: 8px; align-items: center; }
.wrap { display: flex; flex-wrap: wrap; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-22 { gap: 22px; } .gap-24 { gap: 24px; }
.gap-32 { gap: 32px; } .gap-36 { gap: 36px; } .gap-40 { gap: 40px; }
.grid-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid-260 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.grid-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.grid-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.measure-620 { max-width: 620px; }
.no-shrink { flex: none; }
.mt-2 { margin-top: 2px; }
.fill { flex: 1; min-width: 0; }

/* ---------- phones ----------
   minmax(340px) and minmax(320px) grids would overflow a 360px screen. */
@media (max-width: 420px) {
    .hero, .split, .section-head, .grid-320, .plans, .ai-block, .newway__head { grid-template-columns: minmax(0, 1fr); }
    .ai-block, .cta-block, .final-cta__box { padding: 28px 20px; }
    .h2, .h2--xl, .newway__title, .final-cta__title { font-size: 32px; }
    .moment { width: calc(100% - 32px); height: 520px; }
    .moment--way { height: 340px; }
}