/* Inner pages in the homepage's labs.google language: huge tight headings, pill labels, white rounded
   cards with a tinted house panel, big coloured house shapes instead of beige bands, and a centred
   closing call to action. Everything is scoped to body.labs-skin and only restyles existing markup. */

.labs-skin {
  --labs-card-bg: #fff;
  --labs-note-bg: #fff4d6;
  --labs-amber-bg: linear-gradient(135deg, #fff8e1, #ffecb3);   --labs-amber-accent: #8a4f00;
  --labs-coral-bg: linear-gradient(135deg, #fbe9e7, #ffccbc);   --labs-coral-accent: #9a2d0c;
  --labs-mint-bg: linear-gradient(135deg, #e0f2f1, #b2dfdb);    --labs-mint-accent: #005a4f;
  --labs-indigo-bg: linear-gradient(135deg, #e8eaf6, #c5cae9);  --labs-indigo-accent: #283593;
  --labs-violet-bg: linear-gradient(135deg, #f3e5f5, #e1bee7);  --labs-violet-accent: #6a1b9a;
  --labs-cyan-bg: linear-gradient(135deg, #e0f7fa, #b2ebf2);    --labs-cyan-accent: #005c6b;
  /* House silhouettes as masks, drawn like the homepage shapes: filled with a thick round stroke. */
  --labs-mask-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'%3E%3Cpath d='M180 30 L330 158 V330 H30 V158 Z' fill='%23000' stroke='%23000' stroke-width='40' stroke-linejoin='round'/%3E%3C/svg%3E");
  --labs-mask-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'%3E%3Cpath d='M30 330 V180 A150 150 0 0 1 330 180 V330 Z' fill='%23000' stroke='%23000' stroke-width='40' stroke-linejoin='round'/%3E%3C/svg%3E");
  --labs-mask-twin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'%3E%3Cpath d='M30 330 V150 L105 72 L180 150 L255 72 L330 150 V330 Z' fill='%23000' stroke='%23000' stroke-width='40' stroke-linejoin='round'/%3E%3C/svg%3E");
  --labs-mask-tower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'%3E%3Cpath d='M92 330 V100 H118 V62 H148 V34 L180 8 L212 34 V62 H242 V100 H268 V330 Z M98 108 H166 V170 H98 Z M194 108 H262 V170 H194 Z M98 180 H166 V242 H98 Z M194 180 H262 V242 H194 Z M98 252 H166 V314 H98 Z M194 252 H262 V314 H194 Z' fill='%23000' fill-rule='evenodd' stroke='%23000' stroke-width='40' stroke-linejoin='round'/%3E%3C/svg%3E");
  --labs-mask-chimney: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'%3E%3Cpath d='M180 40 L244 95 V44 H296 V140 L330 170 V330 H30 V170 Z' fill='%23000' stroke='%23000' stroke-width='40' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Italian landmarks (Delapouite, game-icons.net, CC BY 3.0), since the pilot starts in Italy. */
  --labs-mask-pisa: url("/assets/illustrations/pisa-tower.svg");
  --labs-mask-colosseum: url("/assets/illustrations/coliseum.svg");
  --labs-card-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 40px -26px rgba(0, 0, 0, .35);
  background-color: var(--labs-page-bg, var(--bg-primary));
}
:root[data-theme="dark"] .labs-skin {
  --labs-card-bg: #1c1c1e;
  --labs-note-bg: #2d2400;
  --labs-amber-bg: linear-gradient(135deg, #2d2000, #423000);   --labs-amber-accent: #ffd54f;
  --labs-coral-bg: linear-gradient(135deg, #33120a, #4e1c10);   --labs-coral-accent: #ff8a65;
  --labs-mint-bg: linear-gradient(135deg, #042723, #093c36);    --labs-mint-accent: #4db6ac;
  --labs-indigo-bg: linear-gradient(135deg, #101432, #1a204c);  --labs-indigo-accent: #9fa8da;
  --labs-violet-bg: linear-gradient(135deg, #240a2f, #3a134a);  --labs-violet-accent: #ce93d8;
  --labs-cyan-bg: linear-gradient(135deg, #002329, #003842);    --labs-cyan-accent: #4dd0e1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .labs-skin {
    --labs-card-bg: #1c1c1e;
    --labs-note-bg: #2d2400;
    --labs-amber-bg: linear-gradient(135deg, #2d2000, #423000);   --labs-amber-accent: #ffd54f;
    --labs-coral-bg: linear-gradient(135deg, #33120a, #4e1c10);   --labs-coral-accent: #ff8a65;
    --labs-mint-bg: linear-gradient(135deg, #042723, #093c36);    --labs-mint-accent: #4db6ac;
    --labs-indigo-bg: linear-gradient(135deg, #101432, #1a204c);  --labs-indigo-accent: #9fa8da;
    --labs-violet-bg: linear-gradient(135deg, #240a2f, #3a134a);  --labs-violet-accent: #ce93d8;
    --labs-cyan-bg: linear-gradient(135deg, #002329, #003842);    --labs-cyan-accent: #4dd0e1;
  }
}
/* The old warm band at the top of the page gives way to the header's glow. */
.labs-skin.seo-page { background-image: none; }

/* ---------- Pill labels ---------- */
.labs-skin .seo-eyebrow, .labs-skin .eyebrow, .labs-skin .pricing-eyebrow {
  display: inline-flex; align-items: center; width: fit-content; margin: 0 0 22px; padding: 6px 14px;
  border: 1px solid var(--separator-opaque); border-radius: 999px;
  color: var(--label-primary); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.labs-skin .agency-section--ink .eyebrow { border-color: rgba(255, 255, 255, .3); color: #fff; }

/* ---------- Headings ---------- */
.labs-skin .seo-hero h1, .labs-skin .agency-hero h1, .labs-skin .pricing-hero h1 { max-width: 15ch; font-size: clamp(46px, 7.4vw, 104px); letter-spacing: -.05em; line-height: .98; }
.labs-skin .seo-prose h2, .labs-skin .section-heading h2, .labs-skin .founding-grid h2, .labs-skin .walkthrough h2, .labs-skin .walkthrough__intro h2, .labs-skin .terms-grid h2 {
  font-size: clamp(36px, 5.6vw, 68px); letter-spacing: -.045em; line-height: 1.02; text-wrap: balance;
}
.labs-skin .seo-lede, .labs-skin .agency-lede, .labs-skin .pricing-lede { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.55; }
.labs-skin .seo-prose p, .labs-skin .seo-prose li { font-size: 18px; line-height: 1.7; }
/* Legal pages set their type inline; these bring it in line with the rest of the site. Their links were the
   system blue (3.5:1 on the cream page) and the "Last updated" line too faint on black, so both are
   brought up to readable contrast. */
.labs-skin main[style] a { color: var(--label-primary) !important; text-decoration: underline; text-underline-offset: 3px; }
.labs-skin main[style] > p[style] { color: var(--label-secondary) !important; }
.labs-skin main > h1 { font-size: clamp(44px, 6vw, 80px) !important; letter-spacing: -.05em !important; line-height: 1 !important; }
.labs-skin main > div > h2 { font-size: 26px !important; letter-spacing: -.02em !important; }

/* styles.css forces every h1 to 32-36px and h2 to 25-27px with !important on narrow screens (a leftover from
   the old app); the page and section headings reassert their fluid sizes. */
.labs-skin .seo-hero h1, .labs-skin .agency-hero h1, .labs-skin .pricing-hero h1 { font-size: clamp(40px, 7.4vw, 104px) !important; }
.labs-skin .seo-prose h2, .labs-skin .section-heading h2, .labs-skin .founding-grid h2, .labs-skin .walkthrough h2, .labs-skin .walkthrough__intro h2, .labs-skin .terms-grid h2 { font-size: clamp(32px, 5.6vw, 68px) !important; }
.labs-skin .seo-cta h2 { font-size: clamp(36px, 7vw, 88px) !important; }

/* ---------- Heroes: page background with big coloured houses instead of the warm gradient ---------- */
.labs-skin .seo-hero, .labs-skin .agency-hero, .labs-skin .pricing-hero { position: relative; isolation: isolate; overflow: clip; background: none; }
.labs-skin .seo-hero__inner { padding-block: 112px 104px; }
.labs-skin .seo-hero::before, .labs-skin .seo-hero::after, .labs-skin .agency-hero::before, .labs-skin .pricing-hero::before, .labs-skin .pricing-hero::after,
.labs-skin .seo-section--quiet::before, .labs-skin .agency-section--quiet::before, .labs-skin .pricing-section--quiet::before,
.labs-skin .seo-cta::before, .labs-skin .seo-cta::after {
  content: ""; position: absolute; z-index: -1; aspect-ratio: 1; pointer-events: none;
  -webkit-mask: var(--shape) center / contain no-repeat; mask: var(--shape) center / contain no-repeat;
  --fx: 4.5rem; --fy: 6rem; --fr: 14deg; background: var(--fill); rotate: var(--r, 0deg); animation: labs-float-path 17s ease-in-out infinite, labs-float-turn 13s ease-in-out infinite;
}
.labs-skin .seo-hero::before, .labs-skin .agency-hero::before { --shape: var(--labs-mask-house); --fill: var(--labs-yellow); --r: 14deg; top: -120px; right: max(-280px, calc(50% - 960px)); width: 480px; }
.labs-skin .seo-hero::after { --shape: var(--labs-mask-arch); --fill: var(--labs-blue); --r: -10deg; bottom: -170px; right: max(-60px, calc(50% - 470px)); width: 300px; animation-delay: -6s; }
.labs-skin .pricing-hero::before { --shape: var(--labs-mask-twin); --fill: var(--labs-green); --r: -16deg; top: 60px; left: max(-260px, calc(50% - 900px)); width: 420px; }
.labs-skin .pricing-hero::after { --shape: var(--labs-mask-chimney); --fill: var(--labs-pink); --r: 12deg; top: 180px; right: max(-240px, calc(50% - 880px)); width: 380px; animation-delay: -5s; }

/* ---------- Sections: no beige bands; the quiet ones get a house peeking in from the edge ---------- */
.labs-skin .seo-section, .labs-skin .agency-section, .labs-skin .pricing-section { position: relative; isolation: isolate; overflow-x: clip; padding-block: 112px; }
.labs-skin .seo-section--quiet, .labs-skin .agency-section--quiet, .labs-skin .pricing-section--quiet { background: none; }
.labs-skin .seo-section--quiet::before, .labs-skin .agency-section--quiet::before, .labs-skin .pricing-section--quiet::before { top: 40px; right: max(-300px, calc(50% - 930px)); width: 460px; }
/* Pricing's quiet section has text in its right column, so its house leans in from the left instead. */
.labs-skin .pricing-section--quiet::before { top: auto; right: auto; bottom: -40px; left: max(-300px, calc(50% - 940px)); width: 380px; }
.labs-skin main > section:nth-of-type(6n+1)::before { --shape: var(--labs-mask-twin); --fill: var(--labs-pink); --r: -12deg; }
/* The Tower of Pisa sways from its base, as if still deciding how far to lean. */
.labs-skin main > section:nth-of-type(6n+2)::before { --shape: var(--labs-mask-pisa); --fill: var(--labs-green); --r: 0deg; transform-origin: 50% 100%; animation-name: labs-lean; animation-duration: 6s; }
.labs-skin main > section:nth-of-type(6n+3)::before { --shape: var(--labs-mask-tower); --fill: var(--labs-blue); --r: 16deg; }
.labs-skin main > section:nth-of-type(6n+4)::before { --shape: var(--labs-mask-chimney); --fill: var(--labs-orange); --r: -6deg; }
.labs-skin main > section:nth-of-type(6n+5)::before { --shape: var(--labs-mask-colosseum); --fill: var(--labs-blue); --r: -4deg; }
.labs-skin main > section:nth-of-type(6n)::before { --shape: var(--labs-mask-arch); --fill: var(--labs-green); --r: 8deg; }
/* The hero keeps its own colours whatever its position. */
.labs-skin main > section.seo-hero::before, .labs-skin main > section.agency-hero::before { --shape: var(--labs-mask-house); --fill: var(--labs-yellow); --r: 14deg; }
.labs-skin main > section.pricing-hero::before { --shape: var(--labs-mask-twin); --fill: var(--labs-green); --r: -16deg; }
/* The dark section borrows the homepage hero's near-black with its warm glow. */
.labs-skin .agency-section--ink { background: radial-gradient(1200px 620px at 50% 115%, #3a2414, transparent 62%), #0e0e10; }

/* ---------- Cards: white, rounded, soft shadow, with a tinted house panel on top ---------- */
.labs-skin .seo-card, .labs-skin .outcome-grid article, .labs-skin .capability-card, .labs-skin .plan-card, .labs-skin .state-legend, .labs-skin .form-card, .labs-skin .walkthrough__steps li {
  border: 0; border-radius: 28px; background: var(--labs-card-bg); box-shadow: var(--labs-card-shadow);
}
.labs-skin .seo-card, .labs-skin .outcome-grid article { position: relative; padding: 14px 14px 28px; }
.labs-skin .seo-card > *, .labs-skin .outcome-grid article > * { margin-inline: 14px; }
.labs-skin .seo-card::before, .labs-skin .outcome-grid article::before { content: ""; display: block; height: 128px; margin-bottom: 22px; border-radius: 20px; background: var(--tone-bg); }
.labs-skin .seo-card::after, .labs-skin .outcome-grid article::after {
  content: ""; position: absolute; top: 46px; left: 50%; width: 64px; height: 64px; transform: translateX(-50%);
  background: var(--tone-accent); -webkit-mask: var(--shape) center / contain no-repeat; mask: var(--shape) center / contain no-repeat; transition: transform .8s var(--labs-ease);
}
.labs-skin .seo-card:hover::after, .labs-skin .outcome-grid article:hover::after { transform: translateX(-50%) rotate(-8deg) scale(1.1); }
.labs-skin .seo-card:nth-child(6n+1), .labs-skin .outcome-grid article:nth-child(6n+1) { --tone-bg: var(--labs-amber-bg); --tone-accent: var(--labs-amber-accent); --shape: var(--labs-mask-house); }
.labs-skin .seo-card:nth-child(6n+2), .labs-skin .outcome-grid article:nth-child(6n+2) { --tone-bg: var(--labs-coral-bg); --tone-accent: var(--labs-coral-accent); --shape: var(--labs-mask-arch); }
.labs-skin .seo-card:nth-child(6n+3), .labs-skin .outcome-grid article:nth-child(6n+3) { --tone-bg: var(--labs-mint-bg); --tone-accent: var(--labs-mint-accent); --shape: var(--labs-mask-twin); }
.labs-skin .seo-card:nth-child(6n+4), .labs-skin .outcome-grid article:nth-child(6n+4) { --tone-bg: var(--labs-indigo-bg); --tone-accent: var(--labs-indigo-accent); --shape: var(--labs-mask-tower); }
.labs-skin .seo-card:nth-child(6n+5), .labs-skin .outcome-grid article:nth-child(6n+5) { --tone-bg: var(--labs-violet-bg); --tone-accent: var(--labs-violet-accent); --shape: var(--labs-mask-chimney); }
.labs-skin .seo-card:nth-child(6n), .labs-skin .outcome-grid article:nth-child(6n) { --tone-bg: var(--labs-cyan-bg); --tone-accent: var(--labs-cyan-accent); --shape: var(--labs-mask-house); }
.labs-skin .seo-card h3, .labs-skin .outcome-grid h3 { font-size: 22px; letter-spacing: -.02em; }
/* Links inside cards otherwise fall back to the system blue, which is too light on white. */
.labs-skin .seo-card a { color: var(--label-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.labs-skin .outcome-grid article > span { display: block; margin-bottom: 8px; }
.labs-skin .outcome-grid h3 { margin-top: 0; }
.labs-skin .seo-grid, .labs-skin .outcome-grid, .labs-skin .capability-grid { gap: 20px; }
.labs-skin .capability-card, .labs-skin .plan-card, .labs-skin .state-legend, .labs-skin .form-card { padding: 30px; }
.labs-skin .plan-card--featured { box-shadow: 0 0 0 3px var(--labs-yellow), var(--labs-card-shadow); }
.labs-skin .walkthrough__steps li { border-radius: 20px; }
.labs-skin .walkthrough__media video { border: 0; border-radius: 28px; box-shadow: var(--labs-card-shadow); }

/* ---------- Callouts ---------- */
.labs-skin .seo-note, .labs-skin .no-guarantee { padding: 24px 28px; border: 0; border-radius: 22px; background: var(--labs-note-bg); }

/* ---------- FAQ: rounded cards that open with a turning plus ---------- */
.labs-skin .seo-faq details { padding: 0 28px; border: 0; border-radius: 22px; background: var(--labs-card-bg); box-shadow: var(--labs-card-shadow); }
.labs-skin .seo-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; font-size: 19px; letter-spacing: -.01em; list-style: none; }
.labs-skin .seo-faq summary::-webkit-details-marker { display: none; }
.labs-skin .seo-faq summary::after { content: "+"; display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--label-primary) 8%, transparent); font-size: 22px; font-weight: 400; transition: transform .5s var(--labs-ease), background .3s; }
.labs-skin .seo-faq details[open] summary::after { background: var(--labs-yellow); color: #1d1d1f; transform: rotate(45deg); }
.labs-skin .seo-faq details p { padding-bottom: 26px; }

/* ---------- Closing call to action: big, centred, with houses at the sides ---------- */
.labs-skin .seo-cta { position: relative; isolation: isolate; overflow-x: clip; padding-block: 128px; }
.labs-skin .seo-cta__box { padding: 0; border-radius: 0; background: none; }
.labs-skin .seo-cta h2 { max-width: 14ch; margin-inline: auto; font-size: clamp(40px, 7vw, 88px); letter-spacing: -.05em; line-height: 1; text-wrap: balance; }
.labs-skin .seo-cta::before { --shape: var(--labs-mask-colosseum); --fill: var(--labs-pink); --r: -4deg; bottom: 40px; left: max(-160px, calc(50% - 800px)); width: 300px; }
.labs-skin .seo-cta::after { --shape: var(--labs-mask-tower); --fill: var(--labs-green); --r: 12deg; top: 50px; right: max(-140px, calc(50% - 780px)); width: 260px; animation-delay: -4s; }

/* ---------- Buttons: dark pills that turn yellow on hover; secondary ones are soft and turn pink ---------- */
.labs-skin .seo-button, .labs-skin .button, .labs-skin .pricing-button {
  min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--label-primary); color: var(--bg-primary);
  font-size: 16px; font-weight: 700; transition: background .4s var(--labs-ease), color .4s var(--labs-ease);
}
.labs-skin .seo-button:hover, .labs-skin .button:hover, .labs-skin .pricing-button:hover { filter: none; background: var(--labs-yellow); color: #1d1d1f; }
.labs-skin .seo-button--secondary, .labs-skin .button--secondary { background: color-mix(in srgb, var(--label-primary) 8%, transparent); color: var(--label-primary); }
.labs-skin .seo-button--secondary:hover, .labs-skin .button--secondary:hover { background: var(--labs-pink); color: #1d1d1f; }
.labs-skin .agency-section--ink .button { background: #fff; color: #111; }

@keyframes labs-lean { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }

/* ---------- Small screens: the typography and cards stay, the edge houses step back ---------- */
@media (max-width: 850px) {
  .labs-skin .seo-hero__inner { padding-block: 72px 64px; }
  .labs-skin .seo-section, .labs-skin .agency-section, .labs-skin .pricing-section, .labs-skin .seo-cta { padding-block: 72px; }
  .labs-skin .seo-hero::after, .labs-skin .pricing-hero::before, .labs-skin .seo-cta::before,
  .labs-skin .seo-section--quiet::before, .labs-skin .agency-section--quiet::before, .labs-skin .pricing-section--quiet::before { display: none; }
  .labs-skin .seo-hero::before, .labs-skin .agency-hero::before { top: -70px; right: -120px; width: 240px; }
  .labs-skin .pricing-hero::after { top: -40px; right: -110px; width: 220px; }
  .labs-skin .seo-cta::after { top: -40px; right: -90px; width: 170px; }
  .labs-skin .seo-faq details { padding-inline: 20px; }
  /* On phones the tinted panel on top of each card becomes a slim band, so cards stay compact. */
  .labs-skin .seo-card::before, .labs-skin .outcome-grid article::before { height: 64px; margin-bottom: 18px; border-radius: 16px; }
  .labs-skin .seo-card::after, .labs-skin .outcome-grid article::after { top: 30px; width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Stronger than the per-section shape rules, which set their own animation (Pisa's lean). */
  .labs-skin main > section::before, .labs-skin .seo-cta::after { animation: none !important; }
  .labs-skin .seo-hero::before, .labs-skin .seo-hero::after, .labs-skin .agency-hero::before, .labs-skin .pricing-hero::before, .labs-skin .pricing-hero::after,
  .labs-skin .seo-section--quiet::before, .labs-skin .agency-section--quiet::before, .labs-skin .pricing-section--quiet::before,
  .labs-skin .seo-cta::before, .labs-skin .seo-cta::after { animation: none; }
  .labs-skin .seo-card::after, .labs-skin .outcome-grid article::after, .labs-skin .seo-faq summary::after { transition: none; }
}

/* =====================================================================================================
   The homepage's language, carried to every inner page: plain centred text instead of boxes and cards,
   Google Sans at regular and medium weights at the homepage's sizes, plain labels instead of pills, and
   big floating houses half off the edge on every screen size. Later rules here override the ones above.
   ===================================================================================================== */

/* Labels: plain small capitals, as over the homepage hero, not outlined pills. */
.labs-skin :is(.seo-eyebrow, .eyebrow, .pricing-eyebrow) {
  padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--label-secondary); font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: .1em;
}
.labs-skin .agency-section--ink .eyebrow { color: rgba(255, 255, 255, .72); }

/* Type sizes from the homepage: the hero, section headings, lede, and body copy. */
.labs-skin :is(.seo-hero, .agency-hero, .pricing-hero) h1 { font-size: clamp(38px, 7.2vw, 104px) !important; line-height: 1.02; }
.labs-skin :is(.seo-prose, .section-heading, .founding-grid, .walkthrough, .walkthrough__intro, .terms-grid) h2 { font-size: clamp(34px, 6.4vw, 76px) !important; line-height: 1.04; }
.labs-skin .seo-cta h2 { font-size: clamp(36px, 7vw, 88px) !important; }
.labs-skin :is(.seo-lede, .agency-lede, .pricing-lede) { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.6; }
.labs-skin :is(.seo-prose p, .seo-prose li) { font-size: 17px; line-height: 1.65; }
.labs-skin :is(h3, h4) { font-size: 20px; line-height: 1.25; }

/* ---------- Centred single-column pages (guides, FAQ, resources) ---------- */
.labs-skin .seo-hero__inner { text-align: center; }
.labs-skin .seo-hero__inner > * { margin-inline: auto; }
.labs-skin .seo-hero h1 { max-width: 16ch; }
.labs-skin .seo-lede { max-width: 700px; }
.labs-skin .seo-actions { justify-content: center; }
.labs-skin .seo-prose { max-width: 780px; margin-inline: auto; text-align: center; }
.labs-skin .seo-prose > :is(h2, p) { margin-inline: auto; }
.labs-skin .seo-prose h2 { max-width: 16ch; }
/* Lists and questions read left to right inside the centred column. */
.labs-skin .seo-prose :is(ul, ol) { width: fit-content; max-width: 640px; margin-inline: auto; text-align: left; }
.labs-skin .seo-faq { text-align: left; }

/* Agency and pricing section headings sit centred too, unless they share a row with other content. */
.labs-skin .section-heading:not(.section-heading--split, .application-intro) { max-width: 860px; margin-inline: auto; text-align: center; }
.labs-skin .section-heading:not(.section-heading--split, .application-intro) > * { margin-inline: auto; }

/* ---------- No boxes around text: cards become plain centred blocks, as in the Tana list ---------- */
.labs-skin :is(.seo-card, .outcome-grid article, .capability-card, .plan-card, .state-legend, .walkthrough__steps li) {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.labs-skin :is(.seo-card, .outcome-grid article)::before, .labs-skin :is(.seo-card, .outcome-grid article)::after { content: none; }
.labs-skin :is(.seo-card, .outcome-grid article) > * { margin-inline: 0; }
.labs-skin :is(.seo-card, .outcome-grid article, .capability-card) { text-align: center; }
.labs-skin :is(.seo-card, .outcome-grid article, .capability-card) h3 { margin: 0 0 10px; font-size: 20px; }
.labs-skin :is(.seo-card, .outcome-grid article, .capability-card) p { max-width: 380px; margin-inline: auto; color: var(--label-secondary); font-size: 16px; line-height: 1.55; }
.labs-skin :is(.seo-grid, .outcome-grid, .capability-grid) { gap: 48px 64px; }
.labs-skin .seo-card a { font-weight: 500; }
.labs-skin .plan-card--featured { box-shadow: none; }
.labs-skin .plan-grid { gap: 48px; }

/* Notes and caveats: the same words as plain centred text, no tinted panel. */
.labs-skin :is(.seo-note, .no-guarantee) { max-width: 700px; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--label-secondary); text-align: center; }
.labs-skin .founding-copy .no-guarantee { margin-inline: 0; text-align: left; }

/* FAQ: open and close as before, with no card or rule around each question. */
.labs-skin .seo-faq details { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.labs-skin .seo-faq details + details { margin-top: 4px; }
.labs-skin .seo-faq summary { font-size: 20px; font-weight: 500; }
.labs-skin .seo-faq details p { color: var(--label-secondary); }

/* ---------- Big floating houses, half off the edge, on every screen ---------- */
.labs-skin :is(.seo-hero, .agency-hero)::before { --size: clamp(260px, 36vw, 560px); width: var(--size); top: 3%; right: calc(var(--size) * -.52); bottom: auto; left: auto; }
.labs-skin .seo-hero::after { --size: clamp(200px, 26vw, 400px); width: var(--size); top: auto; right: auto; bottom: -6%; left: calc(var(--size) * -.42); }
.labs-skin .pricing-hero::before { --size: clamp(240px, 34vw, 520px); width: var(--size); top: 6%; right: auto; bottom: auto; left: calc(var(--size) * -.45); }
.labs-skin .pricing-hero::after { --size: clamp(220px, 30vw, 460px); width: var(--size); top: 24%; right: calc(var(--size) * -.45); bottom: auto; left: auto; }
.labs-skin :is(.seo-section--quiet, .agency-section--quiet)::before { --size: clamp(260px, 36vw, 540px); width: var(--size); top: -2%; right: calc(var(--size) * -.55); bottom: auto; left: auto; }
.labs-skin .pricing-section--quiet::before { --size: clamp(240px, 30vw, 460px); width: var(--size); top: auto; right: auto; bottom: -24%; left: calc(var(--size) * -.55); }
.labs-skin .seo-cta::before { --size: clamp(200px, 26vw, 400px); width: var(--size); top: auto; right: auto; bottom: 8%; left: calc(var(--size) * -.42); }
.labs-skin .seo-cta::after { --size: clamp(180px, 22vw, 340px); width: var(--size); top: 6%; right: calc(var(--size) * -.4); bottom: auto; left: auto; }
@media (max-width: 850px) {
  .labs-skin :is(.seo-hero, .agency-hero, .pricing-hero)::before, .labs-skin :is(.seo-hero, .pricing-hero)::after,
  .labs-skin :is(.seo-section--quiet, .agency-section--quiet, .pricing-section--quiet)::before,
  .labs-skin .seo-cta::before, .labs-skin .seo-cta::after { display: block; }
  /* On phones the houses are smaller and further out, so they frame the text rather than sit behind it. */
  .labs-skin :is(.seo-hero, .agency-hero, .pricing-hero, .seo-section--quiet, .agency-section--quiet, .pricing-section--quiet, .seo-cta)::before,
  .labs-skin :is(.seo-hero, .pricing-hero, .seo-cta)::after { --size: clamp(150px, 42vw, 240px); }
  .labs-skin :is(.seo-hero, .agency-hero)::before { top: 0; right: calc(var(--size) * -.6); }
  .labs-skin .seo-hero::after { bottom: -4%; left: calc(var(--size) * -.6); }
  .labs-skin .pricing-hero::before { left: calc(var(--size) * -.6); }
  .labs-skin .pricing-hero::after { right: calc(var(--size) * -.6); }
  .labs-skin :is(.seo-section--quiet, .agency-section--quiet)::before { top: -60px; right: calc(var(--size) * -.62); }
  .labs-skin .pricing-section--quiet::before { left: calc(var(--size) * -.62); }
  .labs-skin .seo-cta::before { left: calc(var(--size) * -.6); }
  .labs-skin .seo-cta::after { right: calc(var(--size) * -.6); }
}

/* No decorative rules between blocks of text, as on the homepage; spacing does the separating. The form's
   step track keeps its bars, since they show progress. */
.labs-skin :is(.transcript section, .walkthrough ol, .walkthrough li, .agency-details, .plan-option + .plan-option) { border: 0; }
.labs-skin .transcript section { padding-block: 28px; }

/* Headings that share a row with other content (agency and pricing two-column blocks) stay a size smaller,
   so they don't break onto six or seven lines. */
.labs-skin :is(.founding-grid, .walkthrough__intro, .section-heading--split, .application-intro, .terms-grid, .onboarding-grid) h2 { font-size: clamp(32px, 4.4vw, 56px) !important; }
/* The agency hero shares its row with the legend card above 900px, so its title stays a size smaller there:
   at the full hero size it ran to five lines and split "rent- / to-own". */
@media (min-width: 901px) { .labs-skin .agency-hero h1 { font-size: clamp(44px, 4.8vw, 68px) !important; max-width: none; } }
/* On phones the agency hero is a single column, so it centres like every other hero. */
@media (max-width: 850px) {
  .labs-skin .agency-hero__copy { text-align: center; }
  .labs-skin .agency-hero__copy > * { margin-inline: auto; }
  .labs-skin .agency-hero .button-row { justify-content: center; }
}

/* ---------- Pricing: the plans turn on the homepage's wheel, as white cards like its carousel ---------- */
.labs-skin .plan-wheel { margin-top: 40px; }
.labs-skin .plan-wheel .labs-wheel__track > li { display: flex; }
.labs-skin .plan-wheel .plan-card {
  flex: 1; padding: 28px 26px 26px; border: 0; border-radius: 26px; background: var(--labs-card-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 40px -24px rgba(0, 0, 0, .35); text-align: left;
}
.labs-skin .plan-wheel .plan-card--featured { box-shadow: 0 0 0 2px var(--labs-yellow), 0 18px 40px -24px rgba(0, 0, 0, .35); }
.labs-skin .plan-wheel .plan-card h3 { font-size: clamp(22px, 2vw, 28px); }
.labs-skin .plan-wheel .plan-card ul { margin: 22px 0; font-size: 15px; }
.labs-skin .plan-wheel .plan-price span { font-weight: 500; }
.labs-skin .pricing-section .labs-wheel__controls { margin-top: 8px; }
@media (max-width: 700px) { .labs-skin .plan-wheel .plan-card { padding: 22px 18px 18px; } .labs-skin .plan-wheel .pricing-button { font-size: 14px; } }
/* Carousel cards on inner pages keep the carousel's title size over the generic inner-page h3. */
.labs-skin .labs-card__title { font-size: 26px; }
@media (max-width: 700px) { .labs-skin .labs-card__title { font-size: 16px; } }