/* admode.ai in Admode's Claude design (Hugo, 2026-11-04: "you only take the design from the other companies ... and
   make it like a claude design"). The layout of each part is a competitor's, named over its block (Admode Lab
   plans/site-redo-2026-11-04/BRIEF.md): Atria's top, short reviews, step cards, results and foot; Foreplay's before and
   after, feature rows and pricing cards; Higgsfield's ad gallery and cookie notice; Segwise's ticks. The surfaces are
   Claude's, by the site's rules (.claude/rules/site-and-app-design.md): flat cards with a 1px line, big frames with
   Railway's edge, the plain blue 8px button, blue only for on, green only for done and winning, no glows, gradients,
   glass, patterns or tiny capitals. Colour comes from the ads. The pages' rules allow no style attributes, so every
   look is a class here. */

@font-face { font-family: "Instrument Sans"; src: url("/assets/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Gabarito"; src: url("/assets/gabarito.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: dark;
  /* Admode's greys, with Claude's steps over them. */
  --page: #151515;
  --deep: #111111;
  --card: #1B1B1B;
  --card-2: #202020;
  --menu: #2C2C2C;
  --box: #20201F;
  /* Claude's fills: control 10%, its press 15%, hover 7.5%, field 5%. */
  --raised: rgba(255, 255, 255, 0.1);
  --raised-2: rgba(255, 255, 255, 0.15);
  --hover: rgba(255, 255, 255, 0.075);
  --fill: rgba(255, 255, 255, 0.05);
  /* Claude's lines, and the 10% edge round a big frame. */
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.12);
  --edge: rgba(255, 255, 255, 0.1);
  --text: rgba(255, 255, 255, 0.93);
  --text-2: rgba(255, 255, 255, 0.6);
  --faint: rgba(255, 255, 255, 0.4);
  /* Admode's blue for on, and green for done and winning, each with its text and its soft fill. */
  --blue: #2A79D7;
  --blue-hover: #3584E0;
  --blue-text: #6AABF1;
  --green: #5DBE8A;
  --green-soft: rgba(93, 190, 138, 0.13);
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --logo: "Gabarito", "Instrument Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Claude's curves and five times. */
  --out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --snap: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 60ms;
  --t-snap: 120ms;
  --t-base: 200ms;
  --t-slow: 300ms;
  --t-long: 450ms;
  /* Claude's corners: controls 8, cards 11, pop-ups 12, the composer 14; big frames 10 (Railway's edge). */
  --r: 8px;
  --r-card: 11px;
  --r-pop: 12px;
  --r-box: 14px;
  --r-frame: 10px;
  --shadow-menu: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  --ring: 0 0 0 1px var(--blue), 0 0 6px 1px rgba(23, 87, 172, 0.6);
  --w: 1240px;
  --gut: 32px;
  --top: 64px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 16px); }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--w); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); }
.sr { position: absolute; left: -9999px; top: 0; }
.sr:focus { left: 16px; top: 12px; z-index: 200; padding: 8px 12px; border-radius: var(--r); background: var(--menu); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
img.fade { opacity: 0; transition: opacity 500ms var(--out); }
img.fade.loaded { opacity: 1; }
/* A card shows no empty grey box while its picture comes: the picture fades in on the page itself (Hugo, 2026-11-06:
   "so it dont load with a grey thing"). Once in, the picture covers the whole card. */
.tile:has(> img.fade) { background: transparent; }
/* A status mark is the logo's knob: a small flat rounded square, blue when on. */
.knob { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2.4px; background: var(--blue); }
.knob.off { background: var(--faint); }

/* ---------- Atria's top line: one piece of news and its link ---------- */
.news { background: var(--deep); border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 13.5px; }
.news a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 8px var(--gut); text-align: center; }
.news .tag { flex: none; padding: 2px 9px; border-radius: 6px; background: var(--raised); color: var(--text); font-size: 12px; font-weight: 600; }
.news u { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.news a:hover u { text-decoration-color: var(--text-2); }

/* ---------- The bar (claude.com's: plain links, Log in as a link, one blue button) ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--page); border-bottom: 1px solid transparent; transition: border-color var(--t-base) var(--out); }
.top.scrolled { border-bottom-color: var(--line-2); }
.top-in { display: flex; align-items: center; gap: 32px; height: var(--top); }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 700 21px/1 var(--logo); letter-spacing: -0.02em; }
.logo svg { width: 29px; height: 17px; }
.top-nav { display: flex; gap: 2px; }
.top-nav a { padding: 8px 12px; border-radius: var(--r); color: var(--text-2); font-size: 15px; transition: color var(--t-fast), background var(--t-fast); }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--text); background: var(--hover); }
.top-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.top-acts .link { padding: 8px 12px; border-radius: var(--r); color: var(--text-2); font-size: 15px; }
.top-acts .link:hover { color: var(--text); background: var(--hover); }
.menu-btn { display: none; place-items: center; width: 40px; height: 40px; border-radius: var(--r); }
.menu-btn:hover { background: var(--hover); }
.menu-btn .close { display: none; }
.top.open .menu-btn .open { display: none; }
.top.open .menu-btn .close { display: block; }
.menu { display: none; }

/* ---------- Buttons: the app's plain rectangle with 8px corners; a press adds one layer of white, never shrinks ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--r);
  background: var(--raised); color: var(--text); font: 600 15px/1 var(--ui); white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast) var(--out), color var(--t-fast) var(--out), box-shadow var(--t-fast) var(--out); }
.btn:hover { background: var(--raised-2); }
.btn:active { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.075); }
/* The main button is Claude's primary, near-white with the page's dark words (Hugo, 2026-11-04: "more like claude design
   its to much blue"; Admode Lab feature-studies/claude-design-2026-11-02: --cds-fill-primary #EFEFEF, its hover #D7D7D7,
   --cds-on-primary #191919). Blue stays for the logo's switch and what's on. */
.btn.primary { background: #EFEFEF; color: #191919; font-weight: 500; }
.btn.primary:hover { background: #D7D7D7; }
.btn.primary:active { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn.xs { height: 30px; padding: 0 10px; border-radius: 7px; font-size: 13px; }
.btn.lg { height: 50px; padding: 0 24px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.arrow-link svg { transition: transform var(--t-base) var(--out); }
.arrow-link:hover svg { transform: translateX(3px); }

/* ---------- Type: Segwise's sizes (68px top, 48px sections, three lines centred) in Claude's serif ---------- */
/* Every title in the home page's type (Hugo, 2026-11-04, on "Build your next ads on what's winning"): Instrument Sans at
   600, its marked words in Claude's serif, italic, never blue. */
.h1 { font: 600 clamp(36px, 4.2vw, 60px)/1.08 var(--ui); letter-spacing: -0.03em; text-wrap: balance; }
.h2 { font: 600 clamp(28px, 2.9vw, 42px)/1.15 var(--ui); letter-spacing: -0.025em; text-wrap: balance; }
.h3 { font: 600 clamp(22px, 2vw, 30px)/1.2 var(--ui); letter-spacing: -0.02em; text-wrap: balance; }
.h1 em, .h2 em, .h3 em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.01em; color: inherit; }
.lede { color: var(--text-2); font-size: 19px; line-height: 1.55; text-wrap: pretty; }
/* Segwise's pill over each title ("The cost of guessing"), in Claude's grey and in sentence case. */
.pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 12px; border-radius: 999px; background: var(--raised); color: var(--text);
  font-size: 13.5px; font-weight: 600; }
.label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--text-2); font-size: 15px; font-weight: 500; }
.sw { position: relative; flex: none; width: 24px; height: 14px; border-radius: 7px; background: #3A3A3A; transition: background var(--t-slow) var(--out) 250ms; }
.sw i { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 3px; background: #9A9A9A;
  transition: transform var(--t-long) cubic-bezier(0.34, 1.3, 0.64, 1) 250ms, background var(--t-slow) var(--out) 250ms; }
.in .sw, .sw.on { background: var(--blue); }
.in .sw i, .sw.on i { transform: translateX(10px); background: #FFFFFF; }

/* ---------- Sections ---------- */
.sec { padding-top: 150px; }
.sec-tight { padding-top: 24px; }
.sec-head { max-width: 860px; margin: 0 auto 56px; text-align: center; }
.sec-head .lede { max-width: 700px; margin: 20px auto 0; }
.btns.center { justify-content: center; margin-top: 32px; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-2); font-size: 14px; }
.ticks span { display: inline-flex; align-items: center; gap: 7px; }
.ticks svg { color: var(--green); }

/* ---------- The product: Admode's Home as the app draws it, in a big frame with Railway's edge ---------- */
.app { position: absolute; left: 50%; top: 0; z-index: 2; width: min(780px, 62%); transform: translateX(-50%); overflow: hidden; border-radius: var(--r-frame); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge), 0 30px 80px rgba(0, 0, 0, 0.5); text-align: left; }
.app-bar { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.app-logo { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; font: 700 16px/1 var(--logo); }
.app-logo svg { width: 22px; height: 13px; }
.app-tab { padding: 6px 10px; border-radius: var(--r); color: var(--text-2); }
.app-tab.on { background: var(--raised); color: var(--text); }
.app-body { padding: 26px 26px 28px; }
.app-title { font: 450 26px/1.2 var(--serif); text-align: center; }
.app-title em { font-style: normal; color: var(--blue-text); }
.app-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 18px auto 22px; padding: 10px 10px 10px 16px;
  border-radius: var(--r-box); background: var(--box); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: var(--text-2); font-size: 14.5px; }
.app-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-card { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: var(--r-card); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.app-card img { width: 100%; aspect-ratio: 1 / 1.08; border-radius: 8px; object-fit: cover; }
.app-card b { font-size: 14px; font-weight: 600; }
.app-card .make { align-self: flex-start; padding: 6px 11px; border-radius: 6px; background: var(--raised); font-size: 12.5px; font-weight: 600; }
.why { display: flex; align-items: flex-start; gap: 7px; padding: 7px 9px; border-radius: var(--r); background: var(--fill); color: var(--text); font-size: 12.5px; font-weight: 600;
  line-height: 1.35; }
.why svg { flex: none; margin-top: 1px; color: var(--text-2); }
.send { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: var(--r); background: var(--blue); color: #FFFFFF; }

/* ---------- Segwise's "Trusted by": a line, then each mark in its own box ---------- */
.s-trust { padding-top: 56px; text-align: center; }
.s-trust > p { color: var(--text-2); font-size: 14px; font-weight: 600; }
.s-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.s-logos span { display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 24px; border-radius: var(--r-pop); background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 17px; font-weight: 600; }
.s-logos svg { width: 22px; height: 22px; color: var(--text); }

/* ---------- Segwise's cost of guessing: one card, its tinted head, three leaks, the answer ---------- */
.leaks { max-width: 1020px; margin: 0 auto; overflow: hidden; border-radius: var(--r-pop); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; }
.leaks-head { padding: 16px 24px; border-bottom: 1px solid var(--line); background: rgba(229, 132, 143, 0.1); color: #EFA0A9; font-size: 16px; font-weight: 600; }
.leak { display: flex; align-items: flex-start; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.leak > svg { flex: none; margin-top: 2px; color: #EFA0A9; }
.leak b { display: block; font-size: 17px; font-weight: 600; }
.leak p { margin-top: 4px; color: var(--text-2); font-size: 16px; }
.leaks-answer { padding: 20px 24px; color: var(--text-2); font-size: 16px; text-align: center; }
.leaks-answer b { color: var(--text); }

/* ---------- Segwise's loop: four cards, the number and name in a pill, a title, a line, an arrow ---------- */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.loop-card { position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 24px 24px 64px; border-radius: 16px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--t-base) var(--out), background var(--t-fast); }
.loop-card:hover { background: var(--card-2); transform: translateY(-2px); }
.tagpill { display: inline-flex; align-self: flex-start; overflow: hidden; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 600; }
.tagpill i { padding: 5px 10px; border-right: 1px solid var(--line-2); color: var(--text-2); font-style: normal; }
.tagpill { padding-right: 12px; gap: 10px; align-items: center; }
.loop-card h3 { margin-top: 24px; font: 600 20px/1.3 var(--ui); }
.loop-card p { margin-top: 12px; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.go { position: absolute; right: 20px; bottom: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-2); }

/* ---------- Segwise's three tall ads, each with "Why this ad" at its foot ---------- */
.tall3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.tall { position: relative; }
.tall .tile { width: 100%; border-radius: 14px; }
.why-ad { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; border-radius: 10px; background: rgba(20, 20, 20, 0.9); box-shadow: inset 0 0 0 1px var(--line-2); }
.why-ad summary { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
.why-ad summary::-webkit-details-marker { display: none; }
.why-ad p { padding: 0 14px 14px; color: var(--text-2); font-size: 14px; line-height: 1.5; }

/* ---------- Segwise's creative analytics: the question box, then each ad with its numbers and marks ---------- */
.board { overflow: hidden; border-radius: var(--r-frame); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.board-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px; padding: 8px 8px 8px 14px; border-radius: var(--r-box); background: var(--box);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: var(--text-2); font-size: 15px; }
.board-ask > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.board-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 12px; color: var(--text-2); font-size: 13.5px; }
.board-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; }
.win { overflow: hidden; border-radius: var(--r-card); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.win-pic { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; }
.win-pic img { width: 100%; height: 100%; object-fit: cover; }
.win-pic .mark { position: absolute; top: 8px; left: 8px; }
.mark.new { padding: 4px 9px; border-radius: 6px; background: var(--blue); color: #FFFFFF; font-size: 12.5px; font-weight: 600; }
.win-data { padding: 12px 14px 14px; font-size: 13.5px; }
.win-data > b { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.win-data p { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.win-data p b { color: var(--text); }
.win-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.win-tags span { padding: 4px 8px; border-radius: 6px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 12px; }
.board-note { margin-top: 24px; color: var(--text-2); font-size: 16px; text-align: center; }
.board-note b { color: var(--text); }

/* ---------- Segwise's strategy agent: its window, two ideas with their reasons, what close brands run ---------- */
.agent { max-width: 980px; margin: 0 auto; overflow: hidden; border-radius: var(--r-frame); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.agent-bar { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.agent-bar > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.agent-bar svg { width: 22px; height: 13px; }
.agent-body { display: grid; gap: 16px; padding: 24px; }
.you { justify-self: end; max-width: 82%; padding: 10px 16px; border-radius: 16px; background: var(--menu); font-size: 15.5px; }
.reply { font: 400 17px/1.55 var(--serif); }
.agent-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.agent-idea { padding: 16px; border-radius: var(--r-card); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.agent-idea-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agent-idea-top b { font-size: 15.5px; font-weight: 600; }
.agent-idea p { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.agent-sub { color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.agent-ads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.agent-ads figure { position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 9 / 13; }
.agent-ads img { width: 100%; height: 100%; object-fit: cover; }
.agent-ads figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(17, 17, 17, 0.86); font-size: 12px; font-weight: 600; }

/* ---------- Segwise's generator: the title, the request, then the ads it made ---------- */
.maker { overflow: hidden; padding: 28px; border-radius: var(--r-frame); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); text-align: center; }
.maker-title { font: 450 26px/1.2 var(--serif); }
.maker-line { margin-top: 6px; color: var(--text-2); font-size: 15px; }
.maker-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 820px; margin: 20px auto 24px; padding: 8px 8px 8px 16px; border-radius: var(--r-box);
  background: var(--box); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: var(--text-2); font-size: 15px; text-align: left; }
.maker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.maker-grid figure { overflow: hidden; border-radius: var(--r-card); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.maker-grid img { width: 100%; aspect-ratio: 9 / 13; object-fit: cover; }
.maker-grid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
.maker-grid figcaption .up { order: 2; }

/* ---------- Segwise's six small cards ---------- */
.six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.six-card { padding: 22px 24px; border-radius: var(--r-pop); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.six-card b { font-size: 16.5px; font-weight: 600; }
.six-card p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* ---------- Segwise's four kinds of buyer ---------- */
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.four-card { padding: 24px; border-radius: var(--r-pop); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.four-card > svg { color: var(--text-2); }
.four-card b { display: block; margin-top: 18px; font-size: 17px; font-weight: 600; }
.four-card p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* Shared marks. */
.up { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 9px; border-radius: 6px; background: var(--green-soft); color: var(--green);
  font: 600 12.5px/1.3 var(--ui); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2); font-size: 13px; font-weight: 500; }
.chip b { color: var(--text); font-weight: 600; }

/* ---------- How it works keeps the feature rows: words on one side, the product in a big frame on the other ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: 80px; align-items: center; }
.feature + .feature { margin-top: 150px; }
.feature.flip .feature-words { order: 2; }
.feature-words .h3 { margin-bottom: 18px; }
.feature-words > p { color: var(--text-2); font-size: 17.5px; line-height: 1.55; }
.points { display: grid; gap: 14px; margin: 28px 0 32px; padding: 0; list-style: none; }
.points li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.points svg { flex: none; color: var(--text-2); }
.feature .btns { align-items: center; gap: 20px; }
.frame { overflow: hidden; border-radius: var(--r-frame); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--text-2);
  font-size: 13.5px; }
.frame-bar b { color: var(--text); font-weight: 600; }
.frame-body { padding: 18px; }
.won { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; }
.won > img { width: 100%; aspect-ratio: 9 / 13; border-radius: var(--r-card); object-fit: cover; }
.won-list { display: flex; flex-direction: column; font-size: 14px; }
.won-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.won-row:first-child { border-top: 0; padding-top: 2px; }
.won-row b { color: var(--text); }
.next-test { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 10px 10px 10px 12px; border-radius: var(--r); background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 600; }
.next-test span { padding: 6px 10px; border-radius: 6px; background: var(--blue); color: #FFFFFF; font-size: 12px; white-space: nowrap; }


/* ---------- Higgsfield's gallery: a title and a line, the kinds as tabs, a wall of ads, one button to all ---------- */
.gal-head { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; margin-bottom: 26px; }
.gal-head .lede { max-width: 560px; margin-top: 14px; font-size: 17px; }
.seg { position: relative; display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; border-radius: 10px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line);
  overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg > button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 7px; color: var(--text-2);
  font-size: 14px; font-weight: 600; white-space: nowrap; transition: color var(--t-fast); }
.seg > button:hover { color: var(--text); }
.seg > button[aria-selected="true"], .seg > button[aria-pressed="true"] { color: var(--text); }
.seg:not(.glide) > button[aria-selected="true"], .seg:not(.glide) > button[aria-pressed="true"] { background: var(--raised-2); }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 0; z-index: 0; border-radius: 7px; background: var(--raised-2);
  transition: transform var(--t-base) var(--snap), width var(--t-base) var(--snap); }
.save { margin-left: 2px; padding: 2px 7px; border-radius: 5px; background: var(--green-soft); color: var(--green); font-size: 12px; }
.wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; border-radius: var(--r-card); background: var(--card-2); cursor: pointer;
  transition: transform var(--t-base) var(--out); }
.tile:hover { transform: scale(1.03); }
.tile:active { transform: scale(0.98); transition-duration: var(--t-snap); }
.tile[hidden], .tile.cut { display: none; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A film lies over its picture once it plays (it comes first in the card, so without this the picture would hide it). */
.tile video { z-index: 1; opacity: 0; transition: opacity var(--t-slow) var(--out); }
.tile.playing video { opacity: 1; }
.tile-label { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 4px 8px; border-radius: 6px; background: rgba(17, 17, 17, 0.86); font-size: 11.5px; font-weight: 600; }
.play { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; color: var(--page); }
.play svg { fill: currentColor; stroke: none; }
.wall-foot { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- Atria's comparison cards: Admode's ringed in blue as the pick, the others plain ---------- */
.vs { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 14px; align-items: stretch; }
.vs-card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-pop); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.vs-card.us { box-shadow: inset 0 0 0 1.5px var(--blue); }
.vs-card h3 { display: flex; align-items: center; gap: 10px; font: 600 19px/1.2 var(--ui); }
.vs-card h3 svg { width: 27px; height: 16px; }
.vs-big { margin-top: 18px; font: 500 32px/1.1 var(--serif); letter-spacing: -0.02em; }
.vs-big small { display: block; margin-top: 6px; color: var(--text-2); font: 500 14px/1.4 var(--ui); letter-spacing: 0; }
.vs-card ul { display: grid; gap: 12px; margin-top: 22px; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
.vs-card li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.vs-card.us li { color: var(--text); }
.vs-card li svg { flex: none; margin-top: 2px; }
.vs-card .yes { color: var(--green); }
.vs-card .no { color: var(--faint); }
.vs-card .btn { margin-top: 28px; }


/* ---------- Segwise's last call: a band across the page, the title, a line with the trial, two buttons ---------- */
.band { margin-top: 150px; padding: 96px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); text-align: center; }
.band .h2 { max-width: 820px; margin: 0 auto; }
.band .lede { max-width: 640px; margin: 18px auto 0; }
.band + .foot { margin-top: 0; }
/* Segwise's three big numbers. */
.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.stat { padding: 30px 24px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.stat > b { display: block; color: var(--green); font: 450 60px/1 var(--serif); letter-spacing: -0.03em; }
.stat > b small { font-size: 0.5em; letter-spacing: 0; }
.stat > span { display: block; margin-top: 14px; font-size: 17px; font-weight: 600; }
.stat p { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }

/* ---------- Questions (claude.com's: a centred title, then a list with a line between each and "+" to open) ---------- */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-size: 17px; font-weight: 500; list-style: none; cursor: pointer;
  transition: color var(--t-fast); }
.faq summary:hover { color: #FFFFFF; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--text-2); transition: transform var(--t-base) var(--snap); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .ans { padding: 0 4px 24px; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.faq .ans a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* ---------- The foot (Atria's: the deep shade and the columns; its wordmark across the page went, Hugo, 2026-11-04) ---------- */
.foot { margin-top: 144px; padding: 72px 0 40px; overflow: hidden; background: var(--deep); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand p { max-width: 300px; margin-top: 16px; color: var(--text-2); font-size: 14.5px; }
.foot-brand .btn { margin-top: 22px; }
.foot h4 { margin-bottom: 14px; color: var(--text); font-size: 14px; font-weight: 600; }
.foot ul { display: grid; gap: 10px; padding: 0; list-style: none; font-size: 14.5px; }
.foot ul a { color: var(--text-2); transition: color var(--t-fast); }
.foot ul a:hover { color: var(--text); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--faint);
  font-size: 13px; }

/* ---------- Pages under the bar: a centred head (Foreplay's) ---------- */
.page-head { padding-top: 88px; text-align: center; }
.page-head .label { justify-content: center; }
.page-head .h1 { max-width: 920px; margin: 0 auto; }
.page-head .lede { max-width: 640px; margin: 16px auto 0; color: var(--text-2); font: 400 18px/1.5 var(--ui); }
.page-head .btns { justify-content: center; margin-top: 32px; }
.page-head .ticks { justify-content: center; margin-top: 20px; }

/* ---------- Team (pages/team.html): who founded and leads Admode, and nothing else, no photo (Hugo, 2026-11-06, for
   Google for Startups: "just say what google wants to know nothign else"). Anthropic's leadership page
   (anthropic.com/company/leadership), his pick of three (Linear's and Cal.com's were the others): the title on the
   left, each group under its own heading, each person a block of the grid's four columns between two thin lines, the
   role in grey over the name, the line under them in the serif, at the block's foot. ---------- */
.lead-head { padding-top: 104px; }
.lead-title { font: 600 clamp(36px, 4.2vw, 56px)/1.08 var(--ui); letter-spacing: -0.03em; }
.lead-title em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.01em; }
.lead-group { padding-top: 96px; }
.lead-group-title { font: 600 26px/1.2 var(--ui); letter-spacing: -0.015em; }
.lead-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.lead-person { display: flex; flex-direction: column; min-height: 220px; padding: 20px 0 24px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.lead-role { color: var(--text-2); font-size: 15px; line-height: 1.4; }
.lead-name { margin-top: 6px; font: 600 19px/1.3 var(--ui); }
.lead-line { margin-top: auto; font: 400 17px/1.5 var(--serif); }
@media (max-width: 720px) {
  .lead-head { padding-top: 72px; }
  .lead-group { padding-top: 64px; }
  .lead-grid { grid-template-columns: 1fr; }
  .lead-person { min-height: 180px; }
}

/* ---------- Formats (pages/formats.html and parts/workflows.html): every kind of ad, big and as in a feed, each with its
   name and one line under it; then what's around the ad and what it's written from, drawn as the app shows them. Each
   part's reason: Admode Lab plans/site-redo-2026-11-04/PAGES-2026-11-04.md ---------- */
.fm-top { padding-top: 88px; text-align: center; }
.fm-sub { margin-top: 16px; color: var(--text-2); font-size: 18px; }
/* The reason on a line of its own, so the title never breaks inside it. */
.fm-top .pg-title em { display: block; }
/* The kinds as Claude's segmented control, each a jump to its group. */
.fm-jump { display: flex; justify-content: center; margin-top: 30px; }
.fm-jump .seg > a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 7px; color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: color var(--t-fast) var(--out), background var(--t-fast) var(--out); }
.fm-jump .seg > a:hover { color: var(--text); background: var(--hover); }
.wf-group { padding-top: 96px; scroll-margin-top: 16px; }
/* Each group's name, its one line right under it, next to its ads. */
.wf-group-head { margin-bottom: 22px; }
.wf-group-head h2 { font: 600 clamp(26px, 2.4vw, 34px)/1.15 var(--ui); letter-spacing: -0.02em; }
.wf-group-head p { margin-top: 6px; color: var(--text-2); font-size: 16px; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 14px; }
/* A card is the ad itself, as a feed shows it, with its name and one line under it: no box around it. */
.wf-pic { width: 100%; border-radius: 12px; }
.wf-pic.tile { aspect-ratio: 9 / 16; }
.wf-text { padding: 12px 2px 0; }
.wf-text h3 { font: 600 16px/1.3 var(--ui); }
.wf-text p { margin-top: 4px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
/* Two ads in one card: a winner over its new version, or an ad before and after its edit. */
.wf-two { display: flex; flex-direction: column; gap: 2px; padding: 0; }
.wf-two > span { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.wf-pic.wf-two img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.wf-pic.wf-two img.face { object-position: center 30%; }
.wf-pic.wf-two img.caption { object-position: center 64%; }
.wf-two b { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(17, 17, 17, 0.86); color: #FFFFFF; font-size: 11.5px; font-weight: 600; }
/* What's around the ad and what it's written from, drawn in the app's greys at the ads' size. */
.wf-pic.ui { position: relative; display: flex; flex-direction: column; gap: 10px; aspect-ratio: 9 / 16; padding: 16px; overflow: hidden; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2); }
.wf-pic.ui.wf-two { padding: 0; }
.ui-line { display: block; height: 7px; border-radius: 4px; background: var(--raised); }
.ui-line.w80 { width: 80%; } .ui-line.w60 { width: 60%; }
.ui-post-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.ui-post-top i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--raised-2); }
.ui-post-top span { margin-left: auto; color: var(--faint); font-weight: 400; }
.ui-copy { font-size: 13.5px; line-height: 1.45; }
.ui-post-pic, .ui-page-pic { flex: 1; min-height: 0; width: 100%; border-radius: 8px; object-fit: cover; }
.ui-post-pic { object-position: center 25%; }
.ui-page-pic { object-position: 88% 84%; }
.ui-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 12px; }
.ui-post-foot b { flex: none; padding: 5px 10px; border-radius: 6px; background: var(--raised-2); color: var(--text); font-weight: 600; }
.ui-page-bar { display: flex; gap: 5px; }
.ui-page-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--raised-2); }
.ui-page-title { margin-top: 4px; font: 500 21px/1.2 var(--serif); }
.ui-page-btn { align-self: flex-start; padding: 7px 12px; border-radius: 7px; background: #EFEFEF; color: #191919; font-size: 12.5px; font-weight: 600; }
.ui-label { display: flex; justify-content: space-between; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.ui-label span { color: var(--faint); font-weight: 400; }
.ui-say { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; background: var(--fill); font: 400 14px/1.3 var(--serif); }
.ui-say b { flex: none; color: var(--text-2); font: 600 12px/1 var(--ui); }
.ui-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ui-tags span { padding: 4px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font-size: 12px; }
.ui-ad { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; }
.ui-ad img { width: 30px; height: 38px; border-radius: 5px; object-fit: cover; }
.ui-ad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-ad b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-state { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ui-state span { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--fill); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.ui-state .win { background: var(--green-soft); color: var(--green); }
.ui-state .tired { background: rgba(229, 83, 75, 0.13); color: #EE8A84; }
.ui-idea { margin-top: auto; padding: 12px; border-radius: 10px; background: #232323; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.ui-why { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.ui-why b { display: block; color: var(--text); font-size: 11.5px; }
.ui-next { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.fm-sec { max-width: calc(980px + 2 * var(--gut)); padding-top: 120px; }

/* Pricing's switches: Monthly or Yearly, and Agency's brands. */
.period-row { display: flex; justify-content: center; margin-top: 30px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); background: var(--raised); }
.stepper button:hover { background: var(--raised-2); }
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stepper output { min-width: 22px; text-align: center; }

/* Connect (Atria's MCP page): the link, then each AI's steps. */
.url { display: flex; align-items: center; gap: 10px; max-width: 660px; margin: 32px auto 0; padding: 8px 8px 8px 18px; border-radius: var(--r-box); background: var(--box);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); text-align: left; }
.url code { flex: 1; min-width: 0; overflow: hidden; color: var(--text); font: 500 15px/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.guide { max-width: 800px; margin: 0 auto; }
.seg-row { display: flex; justify-content: center; margin-bottom: 28px; }
.extra { margin-top: 18px; padding: 20px 22px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-2); }
.extra b { font-weight: 600; }
.extra p { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.cmd { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 14px; border-radius: var(--r); background: var(--deep); box-shadow: inset 0 0 0 1px var(--line-2); }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; color: var(--text); font: 13.5px/1.5 var(--mono); white-space: nowrap; scrollbar-width: none; }
.cmd code.over { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }

/* Tutorials: the app's own films (site.py, film_cards). */
.film-group { padding-top: 64px; }
.film-group h2 { font: 500 28px/1.2 var(--serif); letter-spacing: -0.015em; }
.film-lede { margin-top: 6px; color: var(--text-2); }
.films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.film { display: flex; flex-direction: column; padding: 0; border-radius: var(--r-pop); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; text-align: left;
  transition: transform var(--t-base) var(--out); }
.film:hover { transform: scale(1.03); }
.film:active { transform: scale(0.98); transition-duration: var(--t-snap); }
.poster { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--deep); }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster-play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--r);
  background: rgba(17, 17, 17, 0.86); font-size: 13px; }
.poster-play .dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #FFFFFF; color: var(--page); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.film-text { display: grid; gap: 4px; padding: 14px 16px 18px; }
.film-text b { font-weight: 600; }
.film-text span { color: var(--text-2); font-size: 14px; line-height: 1.5; }

/* Support: the form, with Claude's fields, and the ways to help next to it. */
.support-sec { padding-top: 48px; }
.support { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.card { border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.card.panel { display: block; padding: 24px; }
a.card.panel { transition: transform var(--t-base) var(--out); }
a.card.panel:hover { transform: scale(1.02); }
.card.panel h3 { font: 600 17px/1.35 var(--ui); }
.card.panel p { margin-top: 6px; color: var(--text-2); font-size: 15px; }
.support-side { display: grid; gap: 16px; }
.form-field { display: grid; gap: 8px; margin-bottom: 18px; }
.form-field label { color: var(--text); font-size: 14.5px; font-weight: 500; }
.form-field input, .form-field textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text); font: inherit; font-size: 15px; line-height: 1.5; transition: box-shadow var(--t-fast) var(--out); resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--faint); }
.form-field input:focus, .form-field textarea:focus { outline: none; box-shadow: var(--ring); }
.form-files { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.file-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-list { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); background: var(--fill); font-size: 14px; }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { color: var(--text-2); }
.file-x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
.file-x:hover { background: var(--hover); }
.form-note { color: var(--text-2); font-size: 13.5px; }
.form-error { margin-bottom: 14px; padding: 10px 12px; border-radius: var(--r); background: rgba(220, 60, 61, 0.12); color: #F28B8C; font-size: 14px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Contact us and Enterprise in Claude's dialog (site.js): the fields as Support's, two side by side where they pair, and
   Enterprise's choices as Admode's 8px controls, the one picked ringed in blue (the rule: something picked takes a blue
   ring round all of it). */
.dlg.wide .dlg-box { width: min(100%, 600px); }
.dlg-form h2 { padding-right: 36px; }
.dlg-form > p { margin: 8px 0 20px; }
.form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 560px) { .form-pair { grid-template-columns: minmax(0, 1fr); } }
.opts-field { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.opts-field legend { margin-bottom: 8px; padding: 0; color: var(--text); font-size: 14.5px; font-weight: 500; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-2); font-size: 14px; transition: box-shadow var(--t-fast) var(--out), color var(--t-fast) var(--out); }
.opt:hover span { color: var(--text); }
.opt input:checked + span { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--text); }
.opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.pr-more { margin-top: 14px; color: var(--text-2); font-size: 14px; }
.plain-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* The legal pages and the support page's own sections: their words stay as they are, in Claude's reading look. */
.doc-head { padding-top: 80px; padding-bottom: 40px; }
.doc-head h1 { max-width: 820px; font: 600 clamp(34px, 4vw, 52px)/1.08 var(--ui); letter-spacing: -0.03em; }
.doc-head .lede { margin-top: 18px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 28px; margin-bottom: 16px; padding: 0 11px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); color: var(--text-2); font-size: 13px; font-weight: 500; }
.eyebrow .switch { display: none; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: var(--text-2); font-size: 14px; }
.facts a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 40px; }
.toc { position: sticky; top: calc(var(--top) + 24px); max-height: calc(100vh - var(--top) - 48px); overflow: auto; font-size: 14px; scrollbar-width: none; }
.toc h2 { margin-bottom: 12px; color: var(--text); font: 600 14px/1.3 var(--ui); }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 5px 10px; border-radius: var(--r); color: var(--text-2); line-height: 1.4; transition: color var(--t-fast) var(--out), background var(--t-fast) var(--out); }
.toc a:hover { color: var(--text); background: var(--hover); }
.prose { max-width: 760px; color: var(--text); font-size: 16px; line-height: 1.7; }
.prose > * + * { margin-top: 18px; }
.prose section + section { margin-top: 48px; }
.prose h2 { font: 500 28px/1.2 var(--serif); letter-spacing: -0.01em; scroll-margin-top: calc(var(--top) + 16px); }
.prose h3 { margin-top: 28px; font: 600 17px/1.35 var(--ui); }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose p, .prose li { color: rgba(255, 255, 255, 0.8); }
.prose ul, .prose ol { padding-left: 20px; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--text-2); }
.prose strong { color: var(--text); font-weight: 600; }
.prose code { padding: 1px 5px; border-radius: 5px; background: var(--fill); font: 0.9em var(--mono); }
.table-wrap { overflow-x: auto; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.prose th, .prose td { padding: 12px 14px; border-top: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.prose thead th { border-top: 0; color: var(--text); font-weight: 600; }
.prose td { color: rgba(255, 255, 255, 0.8); }
.card.short { padding: 22px 24px; }
.card.short h2, .card.short h3 { font: 600 17px/1.35 var(--ui); }
.facts-list, .check-list { display: grid; gap: 8px; padding: 0; list-style: none; }
.check { display: inline-flex; align-items: center; vertical-align: -2px; margin-right: 6px; color: var(--green); }
.inline-lede { color: var(--text-2); }
.prose dl { display: grid; grid-template-columns: minmax(140px, 0.4fr) minmax(0, 1fr); gap: 10px 20px; }
.prose dt { color: var(--text-2); }
.prose dd { margin: 0; }
/* "In short": its ticks are the list's marks, never a dot and a tick together. */
.card.short ul { padding-left: 0; list-style: none; }
.card.short li { position: relative; padding-left: 22px; }
.card.short li > .check { position: absolute; left: 0; top: 0.42em; margin: 0; }

/* The legal pages are Claude's own legal page (anthropic.com/legal, measured at 1440 on 2026-11-08) in Admode's greys
   (Hugo, 2026-11-08: "take a look at claude terms page and then copy the design and then make it for admode so it suits
   the new wbesite desing"):
   - the title and one button in the middle;
   - the sections numbered down the left, 200px, with a line over each;
   - the words in the serif in a 632px column, each section's title numbered, as the pages' own references count them;
   - the page's facts on the right, 200px.
   Under 1180px the sections fold into a bar that stays under the top, says where you are and opens the list, and the
   facts go above the words. "Save as PDF" prints the page without the site around it. */
.legal-head { display: flex; flex-direction: column; align-items: center; padding-top: 72px; padding-bottom: 80px; text-align: center; }
.legal-head .eyebrow { margin-bottom: 22px; }
.legal-head h1 { max-width: 640px; font: 600 clamp(34px, 4vw, 52px)/1.08 var(--ui); letter-spacing: -0.03em; text-wrap: balance; }
.legal-head .btn { margin-top: 30px; }
.legal { display: grid; grid-template-columns: 200px minmax(0, 632px) 200px; justify-content: space-between; align-items: start; padding-bottom: 96px; }
.legal-toc { grid-column: 1; grid-row: 1; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; border-top: 1px solid var(--line-2); }
.legal-toc li.annex { counter-increment: none; }
.legal-toc a { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 12px 0; color: var(--text-2); font-size: 13px; line-height: 20px;
  transition: color var(--t-fast) var(--out); }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--faint); font-family: var(--mono); font-size: 12.5px; }
.legal-toc li.annex a::before { content: ""; }
.legal-toc a:hover, .legal-toc a[aria-current="true"] { color: var(--text); }
.legal-text { grid-column: 2; grid-row: 1; max-width: none; font: 400 16.5px/1.6 var(--serif); counter-reset: section; }
.legal-text p, .legal-text li { color: rgba(255, 255, 255, 0.82); }
.legal-text .legal-lead { color: var(--text); font-weight: 600; }
.legal-text > * + * { margin-top: 20px; }
.legal-text > .legal-lead + .card { margin-top: 32px; }
.legal-text section + section { margin-top: 52px; }
.legal-text h2 { font: 600 21px/1.27 var(--ui); letter-spacing: -0.01em; }
.legal-text > section:not([id^="annex"]) > h2::before { counter-increment: section; content: counter(section) ". "; }
.legal-text section > * + * { margin-top: 16px; }
.legal-text h2 + * { margin-top: 18px; }
.legal-text section[id], .legal-text [id="versions"] { scroll-margin-top: 12px; }
.legal-text h3 { font: 600 16px/1.4 var(--ui); }
.legal-text section > h3 { margin-top: 30px; }
.legal-text h3 + * { margin-top: 10px; }
.legal-text .card, .legal-text table { font-family: var(--ui); }
.legal-text .card.short { font-size: 15px; line-height: 1.6; }
.legal-text .card.short li + li { margin-top: 10px; }
.legal-meta { grid-column: 3; grid-row: 1; font-size: 13px; line-height: 20px; }
.legal-meta dl { margin: 0; }
.legal-meta dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; min-height: 45px; padding: 8px 0;
  border-top: 1px solid var(--line-2); }
.legal-meta dt { color: var(--text-2); }
.legal-meta dd { margin: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.legal-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 12px; }
.btn.legal-history { width: 100%; height: 30px; margin-top: 10px; gap: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-2); font-size: 13px; font-weight: 500; }
.btn.legal-history:hover { background: var(--hover); color: var(--text); }
.legal-bar { display: none; }
@media (max-width: 1180px) {
  .legal-bar { position: sticky; top: var(--top); z-index: 40; display: block; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
    background: var(--page); }
  .legal-bar-btn { display: flex; align-items: center; gap: 16px; width: 100%; height: 52px; padding: 0; border: 0; background: none; color: var(--text);
    font: 500 14px/1 var(--ui); text-align: left; cursor: pointer; }
  .legal-bar-btn .legal-n { min-width: 18px; color: var(--faint); font: 12.5px var(--mono); }
  .legal-bar-btn .legal-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .legal-bar-btn svg { flex: none; margin-left: auto; color: var(--text-2); transition: transform var(--t-base) var(--out); }
  .legal-bar-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .legal { grid-template-columns: minmax(0, 1fr); max-width: calc(632px + 2 * var(--gut)); }
  .legal-toc { position: fixed; top: calc(var(--top) + 53px); left: 0; right: 0; z-index: 39; display: none; max-height: calc(100vh - var(--top) - 53px);
    overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut) 12px; border-bottom: 1px solid var(--line-2); background: var(--page); }
  .legal-toc.open { display: block; animation: menu-in var(--t-slow) var(--snap); }
  .legal-toc li:first-child { border-top: 0; }
  .legal-toc a { padding: 14px 0; font-size: 14px; }
  .legal-meta { grid-column: 1; margin-bottom: 48px; }
  .legal-meta dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); column-gap: 20px; }
  .legal-meta dl > div { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; }
  .legal-text { grid-column: 1; grid-row: 2; }
  .legal-text section[id], .legal-text [id="versions"] { scroll-margin-top: 64px; }
  .legal-head { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 720px) {
  .legal-head { align-items: flex-start; padding-top: 40px; padding-bottom: 36px; text-align: left; }
  .legal-head .btn { width: 100%; }
  .legal-meta dl { display: block; }
  .legal-meta dl > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .legal-text { font-size: 16px; }
}
@media print {
  body { background: #FFFFFF; color: #000000; }
  body > :not(main), .legal-bar, .legal-toc, .legal-head .btn, .legal-head .eyebrow, .legal-history { display: none !important; }
  .legal-head { padding: 0 0 12px; align-items: flex-start; text-align: left; }
  .legal-head h1 { color: #000000; font-size: 28px; }
  .legal { display: flex; flex-direction: column; padding: 0; }
  .legal-meta { order: -1; margin-bottom: 20px; color: #000000; }
  .legal-meta dl > div { display: inline-flex; gap: 6px; min-height: 0; margin-right: 18px; padding: 0; border: 0; }
  .legal-chip { height: auto; padding: 0; background: none; box-shadow: none; }
  .legal-meta, .legal-meta *, .legal-text, .legal-text * { color: #000000 !important; }
  .legal-text .card, .table-wrap { background: none; box-shadow: inset 0 0 0 1px #BBBBBB; }
  .legal-text section { break-inside: auto; }
  .legal-text h2 { break-after: avoid; }
}
mark.todo { padding: 0 4px; border-radius: 4px; background: rgba(220, 60, 61, 0.18); color: #F28B8C; }
.rise { animation: rise var(--t-slow) var(--out) both; }
/* Arcads' "Page Not Found": in the middle of the screen, a drawn page with a mark, the title, two short lines and one
   button home; here two quiet links beside it. */
.missing-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 62vh; padding-top: 56px; text-align: center; }
.missing-page .miss-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 14px; background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
.missing-page .lede { max-width: 420px; margin: 14px auto 0; font-size: 17px; }
.missing-page .btns { justify-content: center; margin-top: 28px; }
.missing-page .miss-links { display: flex; gap: 18px; margin-top: 18px; color: var(--text-2); font-size: 14.5px; }
.missing-page .miss-links a:hover { color: var(--text); }

/* ---------- Pop-ups: Claude's dialog (fades and grows from 95% over the page dimmed to black 50%) ---------- */
.dlg { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.5); animation: fade var(--t-base) var(--out) both; }
.dlg-box { position: relative; width: min(100%, 460px); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border-radius: var(--r-pop); background: var(--card);
  box-shadow: var(--shadow-menu); animation: grow var(--t-base) var(--out) both; }
.dlg-box h2 { font: 500 22px/1.25 var(--serif); }
.dlg-box p { margin-top: 8px; color: var(--text-2); }
.dlg-box .btns { justify-content: flex-end; margin-top: 22px; }
.dlg.media .dlg-box { width: auto; max-width: min(92vw, 1100px); padding: 0; background: #000000; overflow: hidden; animation-duration: 250ms; }
.dlg.media video, .dlg.media img { display: block; max-width: min(92vw, 1100px); max-height: calc(100vh - 80px); width: auto; height: auto; }
/* A tall film or picture is as high as the screen allows, and on a phone no higher than its 9:16 shape at the screen's
   width: no black bars above and below a film, and a picture never stretched (D216). */
.dlg.media.tall video, .dlg.media.tall img { height: min(calc(100vh - 80px), 860px, calc(92vw * 16 / 9)); max-width: 92vw; object-fit: contain; }
.dlg-x { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); background: rgba(17, 17, 17, 0.86);
  color: var(--text); transition: background var(--t-fast) var(--out); }
.dlg-x:hover { background: var(--menu); }
.dlg.out { animation: fade-out var(--t-base) var(--out) both; }
.dlg.out .dlg-box { animation: shrink var(--t-base) var(--out) both; }
.copied { color: var(--green) !important; }

/* ---------- Motion: Claude's (a reveal fades in over 300 ms and rises 4px; words arrive one by one) ---------- */
.pre { opacity: 0; transform: translateY(4px); }
.pre.in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--out), transform var(--t-slow) var(--out); transition-delay: var(--d, 0ms); }
.w { animation: word var(--t-slow) var(--out) both; }
/* The top's answer: the line word by word, then its ideas and the check one after another. */
.shot.wait .later { opacity: 0; }
.shot.run .later { animation: rise var(--t-slow) var(--out) both; }
.shot.run .d1 { animation-delay: 380ms; } .shot.run .d2 { animation-delay: 500ms; } .shot.run .d3 { animation-delay: 620ms; }
.shot.run .d4 { animation-delay: 780ms; } .shot.run .d5 { animation-delay: 950ms; } .shot.run .d6 { animation-delay: 1100ms; }
@keyframes word { from { opacity: 0.12; } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes grow { from { opacity: 0; transform: scale(0.95); } }
@keyframes shrink { to { opacity: 0; transform: scale(0.95); } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes menu-in { from { clip-path: inset(0 0 100% 0); } }

/* ---------- Narrower screens: the same order and the same content, stacked ---------- */
@media (max-width: 1180px) {
  .note.n1 { right: -10px; }
  .note.n2 { left: -10px; }
  .note.n3 { right: -8px; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature { gap: 56px; }
}
@media (max-width: 980px) {
  :root { --gut: 24px; }
  .top-nav, .top-acts .link { display: none; }
  .menu-btn { display: grid; }
  /* The menu on a phone covers the page as claude.com's does, with a line between its rows, instead of pushing the page
     down under its links; it opens from the bar down in 300 ms and the page stays still behind it (D215). */
  .top.open .menu { position: fixed; inset: var(--top) 0 0; display: flex; flex-direction: column; padding: 8px var(--gut) 24px;
    overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line-2); background: var(--page);
    animation: menu-in var(--t-slow) var(--snap); }
  .menu a { padding: 19px 4px; font-size: 17px; }
  .menu a + a { border-top: 1px solid var(--line-2); }
  html:has(.top.open) { overflow: hidden; }
  .hero { padding-top: 36px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-media { width: 100%; max-width: 560px; margin: 0 auto; }
  .step-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature.flip .feature-words { order: 0; }
  .feature + .feature { margin-top: 110px; }
  .vs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; max-height: none; }
  .support { grid-template-columns: minmax(0, 1fr); }
  .films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes3, .costs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) {
  :root { --gut: 16px; }
  .news a { gap: 8px; font-size: 13px; }
  .news .long { display: none; }
  .works { gap: 10px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .sec, .end { padding-top: 112px; }
  .lede { font-size: 17px; }
  .hero-sub { font-size: 18px; }
  .start { padding: 20px; border-radius: 20px; }
  .note { max-width: 190px; padding: 9px 11px; font-size: 12px; }
  .note b { font-size: 13px; }
  .note.n1 { right: -6px; top: 33%; }
  .note.n2 { left: -6px; top: 60%; }
  .note.n3 { right: -6px; bottom: 20px; }
  .note .ok { width: 26px; height: 26px; }
  .a1 { right: 12%; top: 26%; width: 54px; height: 42px; }
  .photo-play { top: 12px; bottom: auto; left: 12px; }
  .stand-text { font-size: 18px; }
  .adrow { margin-top: 52px; }
  .adrow img { width: 132px; height: 235px; }
  .step-card { padding: 24px; }
  .drawing { margin-bottom: 24px; }
  .chat-body { padding: 20px 14px 4px; }
  .reply { font-size: 15.5px; }
  .idea { grid-template-columns: 42px minmax(0, 1fr); }
  .idea .kind { display: none; }
  .idea img { width: 42px; height: 52px; }
  .feature .btns { flex-direction: column; align-items: stretch; }
  .feature .btns .arrow-link { justify-content: center; padding: 8px; }
  .words2 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 10px; }
  .said p { padding: 10px 11px; font-size: 14px; }
  .won { grid-template-columns: 112px minmax(0, 1fr); }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .composer.big { padding: 8px 8px 8px 10px; font-size: 15px; }
  .composer.big .btn { padding: 0 14px; font-size: 14px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-legal { flex-direction: column; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .compare th, .compare td { padding: 12px; font-size: 14px; }
  .films { grid-template-columns: minmax(0, 1fr); }
  .wf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
}
@media (max-width: 380px) {
  .h1 { font-size: 40px; }
  .composer.big .ph { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
    transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .shot.wait .later { opacity: 1; }
}

/* ---------- The Segwise copies on narrower screens: the same order and content, stacked ---------- */
@media (max-width: 1180px) {
  .app { width: min(720px, 66%); }
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .app { position: relative; left: auto; width: 100%; transform: none; }
  .six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 720px) {
  .sec { padding-top: 112px; }
  .s-logos span { height: 52px; padding: 0 16px; font-size: 15px; }
  .app-bar .app-tab:nth-child(n+4) { display: none; }
  .app-body { padding: 18px 14px; }
  .app-title { font-size: 21px; }
  .app-box { font-size: 13px; }
  .app-cards { grid-template-columns: minmax(0, 1fr); }
  .app-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; }
  .app-card img { grid-row: 1 / span 3; grid-column: 1; height: 100%; aspect-ratio: auto; }
  .app-card .why, .app-card b, .app-card .make { grid-column: 2; }
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop-card { min-height: 0; }
  .tall3 { gap: 8px; }
  .why-ad { left: 6px; right: 6px; bottom: 6px; }
  .why-ad summary { height: 34px; gap: 5px; font-size: 12px; }
  .why-ad summary svg { display: none; }
  .why-ad p { padding: 0 8px 10px; font-size: 12px; }
  .board-ask { font-size: 13px; }
  .board-ask > span:first-child svg { display: none; }
  .board-grid { gap: 8px; padding: 0 10px 10px; }
  .win-data { padding: 10px; font-size: 12.5px; }
  .win-tags span { font-size: 11px; }
  .agent-body { padding: 16px; }
  .agent-ideas { grid-template-columns: minmax(0, 1fr); }
  .agent-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maker { padding: 18px 14px; }
  .maker-box { flex-direction: column; align-items: stretch; text-align: left; }
  .maker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .six, .four { grid-template-columns: minmax(0, 1fr); }
  .stat > b { font-size: 50px; }
  .band { padding: 72px 0; }
}

/* ==========================================================================================================================
   What moves on the competitors' pages, in Claude's colours and type (Hugo, 2026-11-04: "copy the compitors more what
   they have going on ... jsut claude themed"). Hugo asked for their life, so their glows and slides come with it.
   ========================================================================================================================== */
.btn.white { background: #F4F2EE; color: #141413; }
.btn.white:hover { background: #FFFFFF; }

/* The home page's top (Hugo, 2026-11-04). His line, "Build your next ads on what's winning", as he loves it, with Arcads'
   words round it: a tag, the title whose last words are a serif, one short line (Arcads' is 77 letters). Then the ads
   where MakeUGC puts them ("place the videos like makeUGC but have it like arcards"), measured on makeugc.ai at
   1440 x 900: one button, a line of proof under it, then six 9:16 ads in a row across the first screen (two across on a
   phone). The ads are Arcads' cards: films playing, no labels, upright and level as MakeUGC has them (5 Nov). The
   motion is neither's: MakeUGC's top doesn't move in at all (only a logo marquee), and Arcads' intro spreads a cluster
   of cards round the words, which Hugo turned down (checked on both sites, 5 Nov). The feel is Claude's ("have a aniamtion like claude"), from Admode Lab
   feature-studies/claude-design-2026-11-02: its badge, its primary button (#EFEFEF, #D7D7D7 under the pointer, #191919
   text), its greys, flat cards with an 11px corner and a hairline, the title's words arriving one by one (a 4px rise over
   450 ms), and each ad coming in left to right as Claude's cards grow in, with its picture already in it: never a grey
   box first (Hugo, 2026-11-06: "the first images ... so it dont load with a grey thing"). A card whose picture isn't
   there yet holds its coming in until it is (site.js, .wait). No blue, blur, glow or drop shadow. */
.mu-hero { padding: 88px 0 56px; text-align: center; }
.a-tag { display: inline-flex; align-items: center; height: 30px; margin-bottom: 22px; padding: 0 12px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); color: var(--text-2); font-size: 14px; font-weight: 500; }
.a-title { max-width: 820px; margin: 0 auto; font: 600 clamp(38px, 4.1vw, 60px)/1.08 var(--ui); letter-spacing: -0.03em; text-wrap: balance; }
.a-title em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.015em; }
.mu-lede { max-width: 780px; margin: 18px auto 0; color: var(--text-2); font-size: 19px; line-height: 1.5; text-wrap: balance; }
.mu-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 30px; }
.mu-cta .btn { height: 44px; padding: 0 22px; }
.btn.light { background: #EFEFEF; color: #191919; font-weight: 500; }
.btn.light:hover { background: #D7D7D7; }
.btn.light:active { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1); }
.mu-works { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13.5px; }
.mu-marks { display: inline-flex; align-items: center; gap: 6px; }
.mu-marks svg { width: 16px; height: 16px; color: var(--text); }
/* MakeUGC's row (makeugc.ai on 5 Nov, Hugo: "just have it like makeUGC have it"): six upright cards in one line, tops
   level, 187 x 332 at 1440 wide, 14px apart, 20px corners; two across on a phone. */
.mu-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; max-width: 1192px; margin: 56px auto 0; }
.mu-ad { border-radius: 20px; background: #1F1F1F; animation: card-in var(--t-slow) var(--out) var(--d) both; }
.mu-ad.wait { animation-play-state: paused; }
.mu-ad::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); pointer-events: none; }
/* When each ad comes in, left to right. */
.mu-ad:nth-child(1) { --d: 300ms; }
.mu-ad:nth-child(2) { --d: 360ms; }
.mu-ad:nth-child(3) { --d: 420ms; }
.mu-ad:nth-child(4) { --d: 480ms; }
.mu-ad:nth-child(5) { --d: 540ms; }
.mu-ad:nth-child(6) { --d: 600ms; }
.a-rise { animation: a-up var(--t-long) var(--out) both; }
.a-rise.d2 { animation-delay: 420ms; }
.a-rise.d3 { animation-delay: 520ms; }
/* The big line rises whole without the script; with it, word by word, as Claude's words arrive. */
.a-title[data-words-in] { animation: a-up var(--t-long) var(--out) 100ms both; }
.a-title.split { animation: none; }
.a-title .hw { display: inline-block; animation: a-up var(--t-long) var(--out) both; }
@keyframes a-up { from { opacity: 0; transform: translateY(4px); } }
@keyframes card-in { from { opacity: 0; scale: 0.95; } }
/* Atria's part right under its top (parts/know.html), copied from tryatria.com at 1440 x 900: the title in two halves,
   40px over the cards; three cards 400px tall, 8px apart, 24px corners and a hairline; a 288px picture area with a round
   number chip and one small piece of the product in its middle; one 18px sentence under it; the first card half as wide
   again as the others and lit, the rest grey, and the card under the pointer takes its place (300 ms); then, 8px under,
   a bar about two thirds as wide with one big figure and a line. Claude's parts in place of Atria's colours: flat
   panels, the pieces as its popover cards (a faint ring and a soft shadow), its badge for the numbers, its serif for the
   figure and the quotes, green only for what's working. The pieces' rows arrive one after another as the card shows. */
.know { padding-top: 120px; }
.know-title { max-width: 1176px; margin: 0 auto 40px; font: 600 clamp(28px, 2.9vw, 42px)/1.15 var(--ui); letter-spacing: -0.025em; text-align: center;
  text-wrap: balance; }
.know-title em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.01em; }
.know-cards { display: flex; gap: 8px; }
.know-card { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; height: 400px; overflow: hidden; border-radius: 22px; background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: flex-grow var(--t-slow) var(--out); outline-offset: 3px; }
.know-card.on { flex-grow: 1.5; }
/* The site's reveal sets its own transition; keep the widening quick and undelayed beside it. */
.know-card.in { transition: flex-grow var(--t-slow) var(--out) 0ms, opacity var(--t-slow) var(--out) var(--d, 0ms), transform var(--t-slow) var(--out) var(--d, 0ms); }
.know-stage { position: relative; display: grid; flex: none; place-items: center; height: 288px; overflow: hidden; background: #202020; }
.know-num { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); color: var(--text-2); font-size: 13px; font-weight: 500; }
.know-say { flex: 1; padding: 22px 24px; color: var(--text-2); font-size: 17px; line-height: 1.45; transition: background var(--t-slow) var(--out), color var(--t-slow) var(--out); }
.know-card.on .know-say { background: rgba(255, 255, 255, 0.05); color: var(--text); font-weight: 500; }
/* The pieces: Claude's popover card. */
.kp { border-radius: 10px; background: #2B2B2B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35); text-align: left; }
.kp-ad { width: 124px; padding: 5px 5px 6px; }
.kp-ad img { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 6px; border-radius: 6px; object-fit: cover; }
.kp-ad p, .kp-next p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 3px; font-size: 11px; }
.kp-ad span, .kp-next p > span { color: var(--faint); }
.kp-ad b { font: 500 11px/1.3 var(--mono); }
.kp-ad b.up { padding: 1px 5px; border-radius: 4px; background: var(--green-soft); color: var(--green); }
/* Atria's stack starts near the top and fades away under the picture area's edge. */
.kp-stack { display: grid; align-self: start; gap: 6px; width: 200px; margin-top: 52px; }
.kp-q { padding: 10px 12px 9px; text-align: center; }
.kp-q p { font: italic 400 13px/1.35 var(--serif); }
.kp-q i { display: block; margin-top: 4px; color: var(--faint); font-size: 11px; font-style: normal; }
.kp-face { display: grid; place-items: center; width: 22px; height: 22px; margin: 0 auto 6px; border-radius: 50%; background: var(--raised); font-size: 11px; font-weight: 600; }
.kp-stack .kp-q:nth-child(2) { opacity: 0.5; }
.kp-stack .kp-q:nth-child(3) { opacity: 0.22; }
.kp-next { width: 230px; padding: 10px 10px 12px; }
.kp-next p { justify-content: flex-start; gap: 10px; padding: 5px 2px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--text); font-size: 12px; }
.kp-next p > span { flex: none; width: 40px; }
.kp-next .kp-head { justify-content: space-between; padding-top: 0; border-top: 0; font-size: 13px; }
.kp-next .kp-head span { width: auto; padding: 1px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); color: var(--text-2); font-size: 11px; }
.kp-next .kp-tags { flex-wrap: wrap; gap: 4px; padding-top: 8px; }
.kp-next .kp-tags span { width: auto; padding: 2px 7px; border-radius: 5px; background: var(--raised); color: var(--text-2); font-size: 10.5px; }
.kp-next .kp-tags span:last-child { background: var(--green-soft); color: var(--green); }
.know-stat { display: flex; align-items: center; gap: 18px; width: 69%; height: 92px; margin-top: 8px; padding: 0 28px; border-radius: 22px; background: var(--green-soft); }
.know-stat b { color: var(--green); font: italic 400 46px/1 var(--serif); letter-spacing: -0.02em; }
.know-stat span { font-size: 17px; }
.know-card.in .k1, .know-card.in .k2, .know-card.in .k3, .know-card.in .k4 { animation: a-up var(--t-slow) var(--out) both; }
.know-card.in .k1 { animation-delay: calc(var(--d, 0ms) + 250ms); }
.know-card.in .k2 { animation-delay: calc(var(--d, 0ms) + 370ms); }
.know-card.in .k3 { animation-delay: calc(var(--d, 0ms) + 490ms); }
.know-card.in .k4 { animation-delay: calc(var(--d, 0ms) + 610ms); }
/* Atria on a phone: the cards stacked, every one lit, the bar full width. */
@media (max-width: 980px) {
  .know-cards { flex-direction: column; }
  .know-card, .know-card.on { flex: none; height: auto; }
  .know-stage { height: 280px; }
  .know-say { background: rgba(255, 255, 255, 0.05); color: var(--text); font-weight: 500; }
  .know-stat { width: 100%; }
}
@media (max-width: 720px) {
  .know { padding-top: 80px; }
  .know-title { margin-bottom: 28px; }
  .know-say { padding: 18px 20px; font-size: 16px; }
  .know-stat { height: auto; padding: 18px 20px; gap: 14px; }
  .know-stat b { font-size: 36px; }
  .know-stat span { font-size: 15px; }
}
/* ---------- The home page's parts after the three cards, each copied from a competitor's (named in each part's file):
   MakeUGC's three steps, every kind, what already works, results and questions; Atria's comparison; MakeUGC's last
   call. Shared: a small outlined label (Claude's badge), the title in two halves like the top's, one grey line, flat
   cards with Claude's hairline, Claude's buttons. ---------- */
.u-sec { padding-top: 140px; }
.u-head { max-width: 1120px; margin: 0 auto 48px; text-align: center; }
.u-pill { display: inline-flex; align-items: center; height: 28px; margin-bottom: 16px; padding: 0 11px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); color: var(--text-2); font-size: 13px; font-weight: 500; }
.u-title { font: 600 clamp(28px, 2.9vw, 42px)/1.15 var(--ui); letter-spacing: -0.025em; text-wrap: balance; }
.u-title em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.01em; }
.u-sub { max-width: 620px; margin: 14px auto 0; color: var(--text-2); font-size: 17px; line-height: 1.5; text-wrap: balance; }
.u-sub a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.u-headbtn { margin-top: 22px; }
.u-card { border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.u-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.u-chips span { padding: 4px 10px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.u-chips span.on { background: var(--raised-2); color: var(--text); }
/* Claude's secondary button: white at 15%, 22% under the pointer. */
.btn.soft { background: rgba(255, 255, 255, 0.15); font-weight: 500; }
.btn.soft:hover { background: rgba(255, 255, 255, 0.216); }

/* MakeUGC's three steps. */
.st3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st3-card { display: flex; flex-direction: column; padding: 18px 18px 22px; }
.st3-name { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.st3-name span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #EFEFEF; color: #191919; font-size: 12.5px; font-weight: 600; }
.st3-piece { display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 204px; margin: 16px 0 18px; padding: 16px; border-radius: 12px; background: #202020;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.st3-text { padding: 0 2px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.pc-label { color: var(--faint); font-size: 12px; }
.pc-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 6px 0 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line); font: 12.5px/1 var(--mono); }
.pc-field span { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.pc-field b { padding: 6px 10px; border-radius: 6px; background: #EFEFEF; color: #191919; font: 600 12px/1 var(--ui); }
.pc-marks { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-2); font-size: 12.5px; }
.pc-marks svg { width: 16px; height: 16px; color: var(--text); }
.pc-box { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 128px; padding: 12px 10px 10px 14px; border-radius: var(--r-box); background: var(--box);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-size: 14px; line-height: 1.45; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; }
.pc-foot span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--text-2); font-size: 20px; line-height: 1; }
.pc-foot b, .pc-foot a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r); background: #EFEFEF; color: #191919; }
/* A drawn prompt box's send button starts the free trial, as Pricing's buttons do (Hugo, 2026-11-05). */
[data-send] { transition: background var(--t-snap) var(--out); }
[data-send]:hover { background: #D7D7D7; }
[data-send]:active { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1); }
.st3-result { flex-direction: row; align-items: center; gap: 16px; }
.st3-result img { flex: none; width: 96px; aspect-ratio: 9 / 16; border-radius: 8px; object-fit: cover; }
.st3-result ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.st3-result li { display: flex; align-items: flex-start; gap: 7px; line-height: 1.35; }
.st3-result svg { flex: none; margin-top: 2px; color: var(--green); }

/* MakeUGC's every kind: one big card, then three small. */
.kd-big { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 40px; padding: 36px 40px 36px 44px; overflow: hidden; }
.kd-text h3 { font: 600 28px/1.15 var(--ui); letter-spacing: -0.02em; }
.kd-text p { margin-top: 12px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.kd-text .u-chips { margin: 18px 0 22px; }
.kd-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 0 0; }
.kd-shot { border-radius: 12px; }
.kd-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.kd-small { padding: 12px 12px 22px; }
.kd-thumbs { display: flex; justify-content: center; gap: 8px; height: 150px; margin-bottom: 18px; padding-top: 16px; overflow: hidden; border-radius: 12px; background: #202020; }
/* Each a live ad that opens whole with its sound on a click. */
.kd-thumbs .tile { flex: none; width: 76px; border-radius: 8px; }
.kd-thumbs .tile:nth-child(2) { margin-top: 12px; }
.kd-small h3 { padding: 0 8px; font-size: 16px; font-weight: 600; }
.kd-small p { margin-top: 6px; padding: 0 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }

/* MakeUGC's start from what works: two big cards. */
.wk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wk-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; }
.wk-card h3 { font: 600 22px/1.2 var(--ui); letter-spacing: -0.015em; }
.wk-card > p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.wk-tabs { margin: 18px 0 16px; }
.wk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-bottom: 22px; }
.wk-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 8px; object-fit: cover; }
/* Each library ad with its brand and how long it has run, as the Library's own cards say it. */
.wk-ad { position: relative; margin: 0; }
.wk-ad img { display: block; }
.wk-ad figcaption { margin-top: 6px; font-size: 12px; line-height: 1.35; }
.wk-ad figcaption b { display: block; overflow: hidden; color: var(--text); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.wk-ad figcaption span { color: var(--text-2); }
.wk-brand { display: grid; place-items: center; width: 100%; aspect-ratio: 536 / 336; margin-bottom: 22px; border-radius: 12px; background: #202020; }
.wk-kp { width: min(92%, 380px); padding: 8px 16px; }
.wk-row { display: flex; align-items: center; gap: 8px; min-height: 42px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13.5px; }
.wk-row:first-child { border-top: 0; }
.wk-row > span { flex: none; width: 66px; color: var(--faint); font-size: 12.5px; }
.wk-sw { width: 22px; height: 22px; border-radius: 6px; }
.wk-sw.s1 { background: #F4EFE6; }
.wk-sw.s2 { background: #2F4A3A; }
.wk-sw.s3 { background: #C97B5A; }
.wk-sw.s4 { background: #101010; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.wk-aa { font: 600 18px/1 var(--ui); }
.wk-aa.serif { font: italic 400 19px/1 var(--serif); }
.wk-row img { width: 26px; height: auto; aspect-ratio: 9 / 16; border-radius: 4px; object-fit: cover; }


/* Atria's comparison: the title on the left, Admode's lit card, two "vs." cards stepping down. */
.vs2-title { max-width: 1040px; font: 600 clamp(30px, 3.6vw, 52px)/1.12 var(--ui); letter-spacing: -0.03em; text-wrap: balance; }
.vs2-title em { display: block; font: 400 1.06em/1.1 var(--serif); font-style: italic; letter-spacing: -0.01em; }
.vs2-cards { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: start; gap: 20px; margin-top: 44px; }
.vs2-card { padding: 28px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.vs2-us { background: #232323; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.vs2-a { margin-top: 128px; }
.vs2-b { margin-top: 184px; }
.vs2-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; font: 700 28px/1 var(--logo); letter-spacing: -0.02em; }
.vs2-logo svg { width: 40px; height: 24px; }
.vs2-card ul { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.vs2-card li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; }
.vs2-card li .knob { margin-top: 7px; }
.vs2-card h3 { margin-bottom: 24px; font-size: 19px; font-weight: 600; }
.vs2-no li { color: var(--text-2); }
.vs2-no svg { flex: none; box-sizing: content-box; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--raised); color: var(--text-2); }

/* MakeUGC's questions: the title on the left, the questions on the right. */
.faq2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); align-items: start; gap: 56px; }
.faq2-side { position: sticky; top: calc(var(--top) + 32px); }
.faq2-side .u-sub { margin-left: 0; }
.faq2-list { display: grid; gap: 8px; }
.faq2-list details { border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.faq2-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; }
.faq2-list summary::-webkit-details-marker { display: none; }
.faq2-list summary svg { flex: none; color: var(--text-2); transition: transform var(--t-base) var(--out); }
.faq2-list details[open] summary svg { transform: rotate(45deg); }
.faq2-list details p { padding: 0 20px 18px; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.faq2-list details a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* MakeUGC's last call: one wide band, the words on the left, three ads on the right. */
.last { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: 24px; min-height: 360px; padding-left: 56px; overflow: hidden;
  border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.last-words p { max-width: 420px; margin: 14px 0 26px; color: var(--text-2); font-size: 16.5px; line-height: 1.5; }
.last-words .last-note { margin: 14px 0 0; color: var(--faint); font-size: 13px; }
/* MakeUGC's three in its last call: upright, 133 x 237, 10px apart, 14px corners, the middle one 16px higher. */
.last-ads { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 40px 0 0; }
.last-ad { flex: none; width: 133px; border-radius: 14px; }
.last-ad:nth-child(1), .last-ad:nth-child(3) { translate: 0 16px; }

@media (max-width: 980px) {
  .u-sec { padding-top: 104px; }
  .st3, .kd-row, .wk { grid-template-columns: minmax(0, 1fr); }
  .st3, .kd-row { max-width: 560px; margin-left: auto; margin-right: auto; }
  .kd-big { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
  .vs2-cards { grid-template-columns: minmax(0, 1fr); }
  .vs2-a, .vs2-b { margin-top: 0; }
  .faq2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq2-side { position: static; }
  .last { grid-template-columns: minmax(0, 1fr); padding: 40px 28px 0; }
  .last-ads { padding: 12px 0 0; }
}
@media (max-width: 720px) {
  .u-sec { padding-top: 84px; }
  .u-head { margin-bottom: 32px; }
  .u-sub { font-size: 16px; }
  .kd-text h3 { font-size: 24px; }
  .wk-card { padding: 20px; }
  .wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk-grid .wk-ad:nth-child(n+7) { display: none; }
  .vs2-card { padding: 22px; }
  .faq2-list summary { padding: 16px; font-size: 15.5px; }
  .faq2-list details p { padding: 0 16px 16px; }
  .last-ad { width: 104px; }
}
/* ---------- The other pages' tops (Atria's and MakeUGC's): a small label, the title in two halves, one line, one
   button ---------- */
.pg-head { padding-top: 88px; text-align: center; }
.pg-title { max-width: 1000px; margin: 0 auto; font: 600 clamp(36px, 4.2vw, 60px)/1.08 var(--ui); letter-spacing: -0.03em; text-wrap: balance; }
.pg-title em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.015em; }
.pg-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
@media (max-width: 720px) { .pg-head { padding-top: 56px; } }
/* ---------- How it works (pages/how.html): the principle's three parts as three chapters, one ad going through them,
   then where it runs, what it never does and the one ask. Each part's reason: Admode Lab
   plans/site-redo-2026-11-04/PAGES-2026-11-04.md ---------- */
.hw-top { padding-top: 88px; text-align: center; }
/* The three chapters at a glance, as a stepper: a number in Claude's outlined ring, a hairline to the next. */
.hw-toc { display: flex; justify-content: center; margin: 36px 0 0; padding: 0; list-style: none; }
.hw-toc li { display: flex; align-items: center; }
.hw-toc li + li::before { content: ""; width: 36px; height: 1px; margin: 0 4px; background: var(--line-2); }
.hw-toc a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; color: var(--text-2); font-size: 15px; font-weight: 500;
  transition: color var(--t-fast) var(--out), background var(--t-fast) var(--out); }
.hw-toc a:hover { color: var(--text); background: var(--hover); }
.hw-toc a span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); color: var(--text);
  font: 500 15px/1 var(--serif); }
/* A chapter: its number big in the serif, as a book's, then its title and one line; the picture under them. */
.hw-step, .hw-sec { max-width: calc(1080px + 2 * var(--gut)); padding-top: 128px; }
.hw-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; margin-bottom: 28px; }
.hw-num { font: 400 64px/0.82 var(--serif); color: var(--faint); }
.hw-title, .hw-sec-title { font: 600 clamp(28px, 2.6vw, 38px)/1.15 var(--ui); letter-spacing: -0.025em; text-wrap: balance; }
.hw-title em, .hw-sec-title em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.01em; }
.hw-line { max-width: 700px; margin-top: 8px; color: var(--text-2); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.hw-frame { padding: 28px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
/* 1: three inputs, drawn lines into one idea, its reason first. */
.hw-ins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hw-in { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.hw-in-name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.hw-in-name svg { flex: none; color: var(--text-2); }
.hw-in-foot { margin-top: auto; color: var(--faint); font-size: 12.5px; }
.hw-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hw-thumbs figure { position: relative; }
.hw-thumbs img { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 8px; object-fit: cover; }
.hw-thumbs figcaption { position: absolute; left: 5px; bottom: 5px; padding: 2px 6px; border-radius: 5px; background: rgba(17, 17, 17, 0.8); color: #FFFFFF; font-size: 11px; font-weight: 500; }
.hw-says, .hw-tried { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hw-says li, .hw-tried li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: var(--fill); }
/* Buyers' own words in the serif, as quotes are; how many said it on the right. */
.hw-says q { font: 400 15px/1.35 var(--serif); }
.hw-says b { flex: none; color: var(--text-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hw-tried li { font-size: 14px; }
.hw-tried span { flex: none; color: var(--faint); font-size: 12.5px; }
.hw-tried span.no { padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.hw-join { width: 100%; height: 56px; }
.hw-join path, .hw-arrow path { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hw-idea { max-width: 560px; margin: 0 auto; padding: 18px 20px; border-radius: 14px; background: #232323; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.hw-why { color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.hw-why b { display: block; margin-bottom: 3px; color: var(--text); font-size: 12.5px; font-weight: 600; }
.hw-what { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.hw-what span { flex: none; color: var(--faint); font-size: 12.5px; font-weight: 500; }
/* 2: the structure and the member's ad on it, then the check. */
.hw-build { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 32px; }
.hw-pair { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; gap: 10px; max-width: 540px; }
/* Each ad at its own shape (the structure square, the new ad 4:5), so neither is cut; their captions line up below. */
.hw-pair { align-items: end; }
.hw-pair .hw-arrow { align-self: center; }
.hw-ad img { width: 100%; height: auto; border-radius: 12px; }
.hw-ad.mine img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24); }
.hw-ad figcaption { margin-top: 10px; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.hw-ad figcaption b { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.hw-arrow { width: 52px; height: 24px; margin-bottom: 40px; }
.hw-check { padding: 22px; border-radius: 14px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.hw-check-top { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.hw-check ul { display: grid; gap: 12px; margin: 18px 0; padding: 0; list-style: none; }
.hw-check li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.hw-check li svg { flex: none; color: var(--green); }
.hw-check-foot { padding-top: 16px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px; line-height: 1.5; }
/* 3: the member's own results as the app lists them, then one idea, theirs to take or leave. */
.hw-next { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 28px; }
.hw-report-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 8px 10px; font-size: 15px; }
.hw-report-top b { font-weight: 600; }
.hw-report-top span { color: var(--faint); font-size: 12.5px; }
.hw-rows { display: grid; gap: 4px; }
.hw-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 76px; align-items: center; gap: 14px; padding: 8px; border-radius: 12px; }
.hw-row:first-child { background: var(--fill); }
.hw-row img { width: 42px; height: 52px; border-radius: 6px; object-fit: cover; }
.hw-row p { min-width: 0; font-size: 14.5px; font-weight: 500; }
.hw-row p span { display: block; color: var(--faint); font-size: 12.5px; font-weight: 400; }
.hw-row b { font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hw-row em { justify-self: end; padding: 3px 9px; border-radius: 6px; background: var(--fill); color: var(--text-2); font-size: 12.5px; font-style: normal; font-weight: 500; }
.hw-row em.win { background: var(--green-soft); color: var(--green); }
.hw-row em.tired { background: rgba(229, 83, 75, 0.13); color: #EE8A84; }
.hw-idea-next { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: start; gap: 16px; max-width: none; margin: 0; }
.hw-idea-next img { width: 84px; height: auto; aspect-ratio: 4 / 5; border-radius: 8px; object-fit: cover; }
.hw-pick-row { display: flex; gap: 8px; margin-top: 14px; }
.hw-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 7px; background: #EFEFEF; color: #191919; font-size: 13px; font-weight: 500; }
.hw-btn.soft { background: rgba(255, 255, 255, 0.15); color: var(--text); }
/* Where it runs: three places in a row, a drawn chevron between them, Admode's own lit. */
.hw-sec-title { margin-bottom: 32px; text-align: center; }
.hw-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.hw-flow li { position: relative; padding: 20px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hw-flow li + li::before { content: ""; position: absolute; left: -19px; top: calc(50% - 5px); width: 8px; height: 8px; border-top: 1.5px solid var(--faint); border-right: 1.5px solid var(--faint);
  transform: rotate(45deg); }
.hw-flow li.us { background: #222222; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.hw-flow-name { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.hw-flow-name > svg { flex: none; color: var(--text-2); }
.hw-logo { width: 27px; height: 16px; }
.hw-marks { display: inline-flex; gap: 4px; }
.hw-marks svg { width: 16px; height: 16px; }
.hw-flow li > p + p { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
/* What it never does: three lines in one quiet card, an x before each. */
.hw-nevers { max-width: 720px; margin: 0 auto; padding: 0; list-style: none; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hw-nevers li { display: flex; gap: 14px; padding: 18px 22px; }
.hw-nevers li + li { border-top: 1px solid var(--line); }
.hw-nevers svg { flex: none; margin-top: 4px; color: var(--faint); }
.hw-nevers p { color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.hw-nevers b { color: var(--text); font-weight: 600; }
/* The one ask: the home page's prompt box on one line, then the button and the way to connect. */
.hw-end { text-align: center; }
.hw-box { display: flex; align-items: center; gap: 12px; max-width: 560px; min-height: 58px; margin: 0 auto; padding: 10px 10px 10px 14px; border-radius: var(--r-box); background: var(--box);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-size: 16px; text-align: left; }
.hw-box > svg { flex: none; color: var(--text-2); }
.hw-box span { flex: 1; min-width: 0; }
.hw-box b, .hw-box a { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: var(--r); background: #EFEFEF; color: #191919; }
.hw-end-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 28px; }
@media (max-width: 980px) {
  .hw-ins { grid-template-columns: minmax(0, 1fr); }
  .hw-join { display: none; }
  .hw-idea { margin-top: 14px; }
  .hw-build, .hw-next { grid-template-columns: minmax(0, 1fr); }
  .hw-pair { margin: 0 auto; }
}
@media (max-width: 720px) {
  .hw-top { padding-top: 56px; }
  .hw-toc { flex-direction: column; align-items: center; gap: 2px; margin-top: 28px; }
  .hw-toc li + li::before { display: none; }
  .hw-step, .hw-sec { padding-top: 88px; }
  .hw-head { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
  .hw-num { font-size: 48px; }
  .hw-line { font-size: 16px; }
  .hw-frame { padding: 14px; }
  .hw-in { padding: 14px; }
  .hw-arrow { width: 36px; margin-bottom: 52px; }
  .hw-pair { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 6px; }
  .hw-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .hw-row b { display: none; }
  .hw-idea-next { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .hw-idea-next img { width: 64px; }
  .hw-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hw-flow li + li::before { display: none; }
  .hw-nevers li { padding: 16px; }
  .hw-box { font-size: 15px; }
}
/* ---------- Connect (pages/docs.html): from nothing to the first ad. The link at the top, each AI's steps next to the
   form they fill, the first ask and the three ads it brings back, then the fixes. Each part's reason: Admode Lab
   plans/site-redo-2026-11-04/PAGES-2026-11-04.md ---------- */
.cn-top { padding-top: 88px; text-align: center; }
.cn-sub { max-width: 560px; margin: 16px auto 0; color: var(--text-2); font-size: 18px; line-height: 1.5; text-wrap: balance; }
.cn-link { max-width: 660px; margin: 36px auto 0; text-align: left; }
.cn-label { margin: 0 0 8px 4px; color: var(--faint); font-size: 13px; font-weight: 500; }
.cn-link .url { margin: 0; }
.cn-sec { max-width: calc(1000px + 2 * var(--gut)); padding-top: 112px; }
.cn-h2 { margin-bottom: 24px; font: 600 clamp(28px, 2.6vw, 38px)/1.15 var(--ui); letter-spacing: -0.025em; text-align: center; text-wrap: balance; }
.cn-h2 em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.01em; }
.cn-sec .guide { max-width: none; }
.cn-guide { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 40px; margin-top: 8px; }
/* Steps on a line, each number in Claude's outlined ring in the serif, as on How it works and Pricing. */
.cn-steps { position: relative; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.cn-steps::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 30px; width: 1px; background: var(--line-2); }
.cn-steps li { position: relative; padding-left: 50px; }
.cn-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 31px; height: 31px;
  border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); color: var(--text); font: 500 15px/1 var(--serif); }
.cn-steps b { display: block; font-size: 16.5px; font-weight: 600; }
.cn-steps p { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.75; }
/* The words to click, as keys, so they match what's on the screen. */
kbd { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--raised); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); color: var(--text);
  font: 500 13.5px/1.6 var(--ui); white-space: nowrap; }
.cn-panels .extra { margin-top: 28px; }
/* The form they fill, drawn as Claude's dialog with the right words in it. */
.cn-form { position: sticky; top: calc(var(--top) + 24px); padding: 20px; border-radius: var(--r-pop); background: var(--card); box-shadow: var(--shadow-menu); }
.cn-form-top { margin-bottom: 16px; font-size: 15px; font-weight: 600; }
.cn-field { display: grid; gap: 6px; margin-bottom: 12px; }
.cn-field span { color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.cn-field b { display: block; overflow: hidden; height: 38px; padding: 9px 12px; border-radius: var(--r); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 400 14px/20px var(--ui); text-overflow: ellipsis; white-space: nowrap; }
.cn-form-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cn-form-btns span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r); background: var(--raised); font-size: 13.5px; font-weight: 500; }
.cn-form-btns span.on { background: #EFEFEF; color: #191919; }
.cn-help { margin-top: 28px; color: var(--text-2); font-size: 14.5px; text-align: center; }
.cn-help a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
/* The first ask in the home page's prompt box, what happens next, and the three ads it brings back. */
.cn-first { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.cn-box { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 10px 10px 18px; border-radius: var(--r-box); background: var(--box);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-size: 16px; }
.cn-box span { flex: 1; min-width: 0; }
.cn-then { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: then; }
.cn-then li { position: relative; padding-left: 34px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.cn-then li::before { counter-increment: then; content: counter(then); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); color: var(--text); font: 500 12.5px/1 var(--serif); }
.cn-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cn-result figure { position: relative; }
.cn-result img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; object-fit: cover; }
.cn-result figcaption { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: rgba(17, 17, 17, 0.82);
  color: #FFFFFF; font-size: 11.5px; font-weight: 500; }
.cn-result figcaption svg { color: var(--green); }
.cn-more { margin: 44px 0 12px; text-align: center; }
.cn-asks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cn-ask { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text);
  font-size: 14.5px; transition: background var(--t-fast) var(--out); }
.cn-ask:hover { background: var(--hover); }
.cn-ask svg { flex: none; color: var(--text-2); }
/* The fixes: the problem on the left, what to do on the right. */
.cn-fixes { max-width: 820px; margin: 0 auto; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cn-fixes > div { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; padding: 18px 22px; }
.cn-fixes > div + div { border-top: 1px solid var(--line); }
.cn-fixes dt { font-size: 15.5px; font-weight: 600; }
.cn-fixes dd { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 980px) {
  .cn-guide, .cn-first { grid-template-columns: minmax(0, 1fr); }
  .cn-form { position: static; width: 100%; max-width: 420px; }
}
@media (max-width: 720px) {
  .cn-top { padding-top: 56px; }
  .cn-sub { font-size: 16px; }
  .cn-sec { padding-top: 80px; }
  .cn-box { font-size: 15px; }
  .cn-fixes > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px; }
}


/* ---------- Pricing (pages/pricing.html): decide, and feel safe deciding. The cards hold only what differs, one panel
   under both says what both do, then what the work costs today, when you pay, the last doubts in the open and both
   buttons. Each part's reason: Admode Lab plans/site-redo-2026-11-04/PAGES-2026-11-04.md ---------- */
.pr-head { padding-top: 88px; text-align: center; }
.pr-title { font: 600 clamp(36px, 4.2vw, 60px)/1.08 var(--ui); letter-spacing: -0.03em; text-wrap: balance; }
.pr-title em, .pr-h2 em { font: 400 1.06em/1 var(--serif); font-style: italic; letter-spacing: -0.015em; }
.pr-sub { max-width: 620px; margin: 16px auto 0; color: var(--text-2); font-size: 18px; line-height: 1.5; text-wrap: balance; }
.pr-main, .pr-sec { max-width: calc(980px + 2 * var(--gut)); }
.pr-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.pr-plan { display: flex; flex-direction: column; padding: 30px 28px 22px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pr-lead { background: #222222; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.pr-name { font-size: 20px; font-weight: 600; }
.pr-for { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.pr-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pr-price b { font: 600 46px/1 var(--ui); letter-spacing: -0.03em; }
.pr-price s { color: var(--faint); font-size: 22px; }
.pr-note { margin: 8px 0 22px; color: var(--text-2); font-size: 14px; }
.pr-trial { margin-top: 10px; color: var(--faint); font-size: 13px; text-align: center; }
/* What differs, as two plain rows under a hairline: the number on the right, what more costs under the name. */
.pr-counts { margin-top: 22px; border-top: 1px solid var(--line); }
.pr-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 0; }
.pr-count + .pr-count { border-top: 1px solid var(--line); }
.pr-count > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; }
.pr-count small { color: var(--faint); font-size: 12.5px; font-weight: 400; }
.pr-count output { font-size: 16px; font-weight: 600; }
/* What both do, once, in an outlined panel under both cards: the principle's three parts, numbered as on How it works. */
.pr-both { margin-top: 16px; padding: 24px 28px 28px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.pr-both-title { margin-bottom: 22px; color: var(--text-2); font-size: 14px; font-weight: 500; text-align: center; }
.pr-both-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-both-cols > div { padding: 0 24px; }
.pr-both-cols > div:first-child { padding-left: 0; }
.pr-both-cols > div:last-child { padding-right: 0; }
.pr-both-cols > div + div { border-left: 1px solid var(--line); }
.pr-both h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.pr-both h3 span { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
  font: 500 13px/1 var(--serif); }
.pr-both ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.pr-both li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.pr-both li svg { flex: none; margin-top: 2px; color: var(--green); }
/* "Every format" made real: one of the site's ads of each kind along the panel's foot. */
.pr-formats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.pr-format { border-radius: 10px; }
.pr-format b { position: absolute; left: 6px; bottom: 6px; z-index: 2; padding: 2px 7px; border-radius: 6px; background: rgba(17, 17, 17, 0.8); color: #FFFFFF;
  font-size: 11.5px; font-weight: 500; }
.pr-more { margin-top: 22px; color: var(--text-2); font-size: 14.5px; text-align: center; }
.pr-more a, .pr-src a, .pr-qa a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pr-sec { padding-top: 120px; }
.pr-h2 { margin-bottom: 28px; font: 600 clamp(28px, 2.6vw, 38px)/1.15 var(--ui); letter-spacing: -0.025em; text-align: center; text-wrap: balance; }
.pr-src { margin-top: 14px; color: var(--faint); font-size: 13px; text-align: center; }
/* What the work costs: a ledger, the amounts in the serif down one column, Admode's own in the last row, lit. */
.pr-ledger { max-width: 680px; margin: 0 auto; overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 26px; color: var(--text-2); font-size: 15.5px; }
.pr-row + .pr-row { border-top: 1px solid var(--line); }
.pr-row b { display: flex; align-items: baseline; gap: 6px; color: var(--text); font: 400 26px/1.1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
.pr-row small { color: var(--faint); font: 400 13px/1 var(--ui); letter-spacing: 0; }
.pr-row.pr-us { background: #222222; color: var(--text); font-weight: 600; }
.pr-row.pr-us + .pr-row, .pr-row + .pr-row.pr-us { border-top-color: var(--line-2); }
/* When you pay: three days on one line, today's mark on. */
.pr-days { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.pr-days::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--line-2); }
.pr-days li { position: relative; }
.pr-day { display: inline-flex; align-items: center; gap: 10px; height: 22px; padding-right: 12px; background: var(--page); color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.pr-day .knob { width: 10px; height: 10px; border-radius: 3px; }
.pr-days li.on .pr-day { color: var(--text); }
.pr-days b { display: block; margin-top: 16px; font-size: 17px; font-weight: 600; }
.pr-days li > p:last-child { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
/* The last doubts: open, two columns, a hairline over each. */
.pr-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; }
.pr-qa > div { padding: 22px 0; border-top: 1px solid var(--line); }
.pr-qa dt { font-size: 16px; font-weight: 600; }
.pr-qa dd { margin: 8px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
/* Both buttons at the bottom, in one lit card. */
.pr-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 20px; background: #222222;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.pr-go .pr-h2 { margin: 0; text-align: left; }
.pr-go p { margin-top: 8px; color: var(--text-2); font-size: 16px; }
.pr-go-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 980px) {
  .pr-plans, .pr-both { max-width: 560px; margin-left: auto; margin-right: auto; }
  .pr-plans { grid-template-columns: minmax(0, 1fr); }
  .pr-both-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pr-both-cols > div { padding: 0; }
  .pr-both-cols > div + div { padding-top: 22px; border-left: 0; border-top: 1px solid var(--line); }
  .pr-qa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pr-head { padding-top: 56px; }
  .pr-sub { font-size: 16px; }
  .pr-plan { padding: 24px 20px 18px; }
  .pr-price b { font-size: 40px; }
  .pr-both { padding: 22px 20px; }
  .pr-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-sec { padding-top: 88px; }
  .pr-row { padding: 16px 18px; font-size: 14.5px; }
  .pr-row b { font-size: 21px; }
  .pr-days { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pr-days::before { left: 5px; right: auto; top: 11px; bottom: 30px; width: 1px; height: auto; }
  .pr-days b, .pr-days li > p:last-child { margin-left: 20px; }
  .pr-days b { margin-top: 8px; }
  .pr-go { padding: 24px 20px; }
  .pr-go-btns { width: 100%; }
  .pr-go-btns .btn { flex: 1; }
}
@media (max-width: 980px) {
  .mu-hero { padding-top: 64px; }
  .mu-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; gap: 14px; margin-top: 44px; }
}
@media (max-width: 720px) {
  .mu-hero { padding: 44px 0 40px; }
  .a-tag { margin-bottom: 16px; }
  .a-title { font-size: 36px; line-height: 1.1; }
  .mu-lede { margin-top: 14px; font-size: 17px; }
  .mu-cta { margin-top: 24px; }
  .mu-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
}
@keyframes slide { to { transform: translateX(-50%); } }

/* Segwise's row of marks sliding by. */
.marks-row { margin-top: 64px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marks-track { display: flex; gap: 56px; width: max-content; padding: 26px 0; animation: slide 45s linear infinite; }
.marks-track span { display: inline-flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 19px; font-weight: 600; white-space: nowrap; }
.marks-track svg { width: 24px; height: 24px; color: var(--text); }

/* Foreplay's before and after: the pile falls in with gravity and settles; the loop circles Admode's mark. */
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ba-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 620px; padding: 32px; overflow: hidden; border-radius: 24px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ba-card.after { background: radial-gradient(60% 50% at 50% 38%, rgba(42, 121, 215, 0.3), transparent 72%), #121417; box-shadow: inset 0 0 0 1px rgba(106, 171, 241, 0.2); }
.ba-words { position: relative; z-index: 2; }
.ba-tag { display: inline-flex; margin-bottom: 14px; padding: 5px 11px; border-radius: 999px; background: var(--raised); font-size: 13px; font-weight: 600; }
.ba-tag.on { background: rgba(42, 121, 215, 0.2); color: var(--blue-text); }
.ba-card h3 { font: 450 28px/1.2 var(--serif); letter-spacing: -0.012em; }
.ba-card p { max-width: 460px; margin-top: 8px; color: var(--text-2); font-size: 16px; }
.pile { position: absolute; inset: 28px 26px 190px; }
.pile span { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 14px; background: #2A2A2A;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 32px rgba(0, 0, 0, 0.45); font-size: 15px; font-weight: 500; white-space: nowrap; transform: rotate(var(--r)); }
.pile span svg { color: #EFA0A9; }
.p1 { --r: -7deg; left: 3%; bottom: 0; }
.p2 { --r: 4deg; right: 2%; bottom: 4px; }
.p3 { --r: -3deg; left: 20%; bottom: 52px; }
.p4 { --r: 9deg; right: 9%; bottom: 60px; }
.p5 { --r: -11deg; left: 1%; bottom: 112px; }
.p6 { --r: 5deg; right: 4%; bottom: 122px; }
.p7 { --r: -4deg; left: 24%; bottom: 172px; }
.p8 { --r: 7deg; right: 16%; bottom: 228px; }
.js .ba-card.before:not(.in) .pile span { opacity: 0; }
.ba-card.before.in .pile span { animation: drop 1000ms cubic-bezier(0.45, 0, 0.75, 1) both; }
.ba-card.before.in .p1 { animation-delay: 100ms; } .ba-card.before.in .p2 { animation-delay: 350ms; } .ba-card.before.in .p3 { animation-delay: 600ms; }
.ba-card.before.in .p4 { animation-delay: 850ms; } .ba-card.before.in .p5 { animation-delay: 1100ms; } .ba-card.before.in .p6 { animation-delay: 1350ms; }
.ba-card.before.in .p7 { animation-delay: 1600ms; } .ba-card.before.in .p8 { animation-delay: 1850ms; }
@keyframes drop {
  0% { opacity: 0; transform: translateY(-560px) rotate(0deg); }
  8% { opacity: 1; }
  68% { transform: translateY(0) rotate(var(--r)); }
  80% { transform: translateY(-16px) rotate(calc(var(--r) * 1.2)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--r)); }
}
.orbit { position: absolute; left: 50%; top: 220px; width: 360px; height: 360px; transform: translate(-50%, -50%); }
.orbit::before, .orbit::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(106, 171, 241, 0.35); }
.orbit::after { inset: 72px; border-style: solid; border-color: rgba(106, 171, 241, 0.16); }
.orb { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 128px; height: 128px; transform: translate(-50%, -50%); border-radius: 36px;
  background: linear-gradient(160deg, #3D8FE8, #1C5AA8); box-shadow: 0 0 0 12px rgba(42, 121, 215, 0.12), 0 24px 70px rgba(42, 121, 215, 0.5); }
.orb svg { width: 70px; height: 42px; }
.orb svg rect:first-child { fill: rgba(255, 255, 255, 0.25); }
.ring { position: absolute; inset: 0; animation: spin 32s linear infinite; }
.ring i { position: absolute; width: 0; height: 0; }
.o1 { left: 50%; top: 0; } .o2 { left: 100%; top: 50%; } .o3 { left: 50%; top: 100%; } .o4 { left: 0; top: 50%; }
.ring span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #1D2735;
  box-shadow: inset 0 0 0 1px rgba(106, 171, 241, 0.32), 0 10px 26px rgba(0, 0, 0, 0.4); font-size: 14px; font-weight: 600; white-space: nowrap; translate: -50% -50%;
  animation: spin 32s linear infinite reverse; }
@keyframes spin { to { rotate: 360deg; } }

/* Segwise's ScrollStory: the steps scroll by, the product holds still and changes, Atria's line fills. */
.scroll-story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; }
.ss-steps { display: grid; }
.ss-step { min-height: 62vh; padding-top: 18vh; opacity: 0.35; transition: opacity var(--t-slow) var(--out); }
.ss-step:first-child { padding-top: 6vh; }
.ss-step.on { opacity: 1; }
.ss-n { color: var(--blue-text); font: 600 14px/1 var(--mono); }
.ss-step h3 { margin-top: 14px; font: 450 clamp(28px, 2.6vw, 38px)/1.15 var(--serif); letter-spacing: -0.012em; }
.ss-step p { margin-top: 14px; color: var(--text-2); font-size: 17.5px; line-height: 1.6; }
.ss-bar { display: block; width: 100%; max-width: 320px; height: 3px; margin-top: 24px; overflow: hidden; border-radius: 2px; background: var(--line-2); }
.ss-bar i { display: block; width: 0; height: 100%; background: var(--blue); transition: width 900ms var(--out); }
.ss-step.on .ss-bar i { width: 100%; }
.ss-pin { position: sticky; top: calc(var(--top) + 48px); height: 560px; align-self: start; margin-top: 6vh; }
.ss-pin::before { content: ""; position: absolute; inset: -10% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 121, 215, 0.24), transparent);
  filter: blur(30px); }
.ss-screen { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-frame); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge), 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 450ms var(--out), transform 450ms var(--out); pointer-events: none; }
.ss-screen.on { opacity: 1; transform: none; }
.ss-wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.ss-wins div { position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 9 / 10.3; }
.ss-wins img { width: 100%; height: 100%; object-fit: cover; }
.ss-wins p { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; background: rgba(17, 17, 17, 0.86);
  font-size: 12.5px; font-weight: 600; }
.ss-said { display: grid; gap: 10px; padding: 18px; }
.ss-said p { padding: 14px 16px; border-radius: var(--r-card); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); font: 400 18px/1.35 var(--serif); }
.ss-said p small { display: block; margin-top: 6px; color: var(--text-2); font: 600 12.5px/1.2 var(--ui); }
.ss-said p.top { box-shadow: inset 0 0 0 1.5px var(--blue); }
.ss-said p.top small { color: var(--blue-text); }
.ss-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.ss-ideas > div { display: flex; flex-direction: column; gap: 9px; padding: 10px; border-radius: var(--r-card); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.ss-ideas img { width: 100%; aspect-ratio: 1 / 1.15; border-radius: 8px; object-fit: cover; }
.ss-ideas b { font-size: 14.5px; font-weight: 600; }
.ss-won { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 18px; }
.ss-won > img { width: 100%; aspect-ratio: 9 / 14; border-radius: var(--r-card); object-fit: cover; }

/* Parker's marquee band: the promise in big words, sliding across. */
.say-row { margin-top: 150px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--deep); }
.say-track { display: flex; align-items: center; gap: 40px; width: max-content; padding: 34px 0; animation: slide 50s linear infinite; }
.say-track span { font: 450 clamp(34px, 4vw, 56px)/1 var(--serif); letter-spacing: -0.015em; white-space: nowrap; }
.say-track i { flex: none; width: 46px; height: 27px; border-radius: 14px; background: var(--blue); position: relative; }
.say-track i::after { content: ""; position: absolute; right: 3px; top: 3px; width: 21px; height: 21px; border-radius: 6px; background: #FFFFFF; }

/* Atria's last call: one big lit card, three lines, the button, its mark big on the side. */
.end { padding-top: 150px; }
.cta-card { position: relative; overflow: hidden; padding: 80px 72px; border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  background: radial-gradient(110% 140% at 90% 10%, #62AAF0 0%, #2A79D7 34%, #1B4E8E 66%, #12284A 100%); }
.cta-card .h2 { position: relative; z-index: 1; max-width: 700px; color: #FFFFFF; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.12; text-wrap: initial; }
.cta-card .h2 em { color: #D6E9FF; }
.cta-card .btns { position: relative; z-index: 1; margin-top: 36px; }
.cta-card .ticks { position: relative; z-index: 1; margin-top: 22px; color: rgba(255, 255, 255, 0.86); }
.cta-card .ticks svg { color: #FFFFFF; }
.cta-mark { position: absolute; right: -70px; top: 50%; width: 520px; height: 308px; transform: translateY(-50%) rotate(-16deg); }
.cta-knob { animation: knob 3.6s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }
@keyframes knob { 0%, 40% { transform: translateX(-11px); } 50%, 90% { transform: translateX(0); } 100% { transform: translateX(-11px); } }

@media (max-width: 980px) {
  .ba { grid-template-columns: minmax(0, 1fr); }
  .scroll-story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ss-pin { top: calc(var(--top) + 12px); z-index: 2; order: -1; height: 330px; margin: 0 0 24px; }
  .ss-step { min-height: 52vh; padding-top: 12vh; }
  .ss-wins { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .ss-wins div { aspect-ratio: 9 / 11; }
  .ss-said p { padding: 10px 12px; font-size: 15px; }
  .ss-said p:nth-child(n+4) { display: none; }
  .ss-ideas { gap: 8px; padding: 10px; }
  .ss-ideas .why { display: none; }
  .ss-won { grid-template-columns: 110px minmax(0, 1fr); padding: 12px; }
  .cta-card { padding: 56px 28px 200px; }
  .cta-mark { top: auto; bottom: -40px; right: -60px; width: 360px; height: 214px; transform: rotate(-16deg); }
}
@media (max-width: 720px) {
  .marks-track { gap: 36px; padding: 20px 0; }
  .marks-track span { font-size: 16px; }
  .ba-card { min-height: 560px; padding: 22px; }
  .pile { inset: 22px 14px 250px; }
  .pile span { padding: 10px 12px; font-size: 13px; }
  .p8 { display: none; }
  .orbit { width: 260px; height: 260px; top: 180px; }
  .orbit::after { inset: 52px; }
  .orb { width: 96px; height: 96px; border-radius: 27px; }
  .orb svg { width: 52px; height: 31px; }
  .ring span { padding: 7px 10px; font-size: 12px; }
  .ss-pin { height: 280px; }
  .ss-ideas b { font-size: 12px; }
  .ss-ideas .up { display: none; }
  .say-row { margin-top: 112px; }
  .say-track { padding: 24px 0; }
  .say-track i { width: 36px; height: 21px; }
  .say-track i::after { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .marks-track, .say-track, .ring, .ring span, .cta-knob, .mu-ad, .a-rise, .a-title, .a-title .hw,
  .know-card .k1, .know-card .k2, .know-card .k3, .know-card .k4 { animation: none !important; }
  .js .ba-card.before:not(.in) .pile span { opacity: 1; }
}