/* Layout: two loud colours take turns, chapter by chapter: ultramarine, black, yellow, pink.
   The product itself sits on a cut yellow stage on the first screen. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #1423b8;
  --blue-2: #1220a6;
  --black: #000000;
  --yellow: #f7dd47;
  --pink: #e9479f;
  --ink: #ffffff;
  --ink-dark: #000000;
  --soft: #c9cff5;
  --accent: #1fc27a;
  --field: #fffbe6;
  --font: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-lead: clamp(1.375rem, 1.1rem + 1vw, 2.125rem);
  --step-head: clamp(2.75rem, 1.3rem + 5.4vw, 7rem);
  --m: clamp(16px, 2.8vw, 40px);
  --pad: clamp(72px, 9vw, 136px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { accent-color: var(--accent); scrollbar-color: var(--yellow) var(--blue); scroll-behavior: smooth; }
body { margin: 0; background: var(--blue); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.04em; line-height: 0.92; text-wrap: balance; }
h2 { font-size: var(--step-head); }
:focus-visible { outline: 3px solid var(--focus, var(--yellow)); outline-offset: 3px; }
/* A yellow ring disappears on yellow and fades on pink: those chapters ring in black. */
.how, .prompts, .agents, .contact, .example { --focus: var(--ink-dark); }
::selection { background: var(--yellow); color: var(--ink-dark); }

.wrap { padding-left: max(var(--m), env(safe-area-inset-left, 0px)); padding-right: max(var(--m), env(safe-area-inset-right, 0px)); }
.ch { padding-block: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--yellow); color: var(--ink-dark); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 16px; }

.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--accent); color: var(--ink-dark); font: 600 var(--step-body)/1 var(--font); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, background-color .15s; }
.btn:hover { background: #19a868; }
.btn:active { transform: translateY(1px); }
.link, main p a:not([class]), main td a:not([class]) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

/* Hero: headline upper left, the product on a cut stage */
.hero { position: relative; overflow: hidden; min-height: min(100svh, 940px); padding-top: 28px; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mark { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.04em; text-decoration: none; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: var(--step-small); }
.nav ul a { text-decoration: none; }
.nav ul a:hover { text-decoration: underline; }
.hero-text { margin-top: clamp(72px, 9vw, 120px); max-width: 44rem; display: grid; gap: 24px; justify-items: start; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(3.25rem, 6vw, 6rem); }
.hero-text p { max-width: 40ch; color: var(--soft); }
/* The stage starts at 38% of the width; the small print under the button stays left of its edge. */
.hero-text .def { font-size: var(--step-small); max-width: min(52ch, calc(38vw - var(--m) - 24px)); }
.stage { position: absolute; left: 38%; right: 0; top: 46%; bottom: 0; background: var(--yellow); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 22%); padding: 56px 0 0 56px; z-index: 1; }
.stage figure { margin: 0; width: min(760px, 100%); }
.stage figcaption { color: var(--ink-dark); font-size: var(--step-small); padding: 10px 0; }
.stage.tall img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* The tall screen is cropped at the fold, so its caption (which names the demo) goes on top. */
.stage.tall figure { display: flex; flex-direction: column; }
.stage.tall figcaption { order: -1; padding: 0 0 10px; max-width: 60ch; }

/* Black: the rent */
.rent { background: var(--black); }
.points, .facts { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.points li { display: grid; gap: 10px; align-content: start; }
.points b { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--yellow); }
.points p { max-width: 30ch; }

/* The rent calculator, on black: your numbers in, a year's rent out */
.calc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 28px; margin-top: clamp(56px, 6vw, 88px); padding-top: 28px; box-shadow: inset 0 3px 0 var(--yellow); }
.calc h3 { grid-column: 1 / -1; font-size: var(--step-lead); letter-spacing: -0.03em; line-height: 1; color: var(--yellow); }
.calc-fields { grid-column: 1 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: start; }
.calc .field label { font-weight: 400; font-size: var(--step-small); }
.calc .field input { width: 100%; font: 600 var(--step-body)/1.4 var(--font); color: var(--ink-dark); background: var(--field); border: 3px solid var(--yellow); border-radius: 0; padding: 10px 12px; min-height: 52px; }
.calc .field { align-content: start; }
.calc .hint { font-size: var(--step-small); color: #b8b8b8; }
.calc .field input:focus { outline: none; background: #fff; box-shadow: 0 0 0 3px var(--accent); }
.calc-out { grid-column: 8 / span 5; display: grid; gap: 14px; align-content: start; }
.calc-out p { max-width: 40ch; }
.calc-result { font-size: var(--step-lead); line-height: 1.2; font-variant-numeric: tabular-nums; }
.calc-result b { color: var(--yellow); font-weight: 600; white-space: nowrap; }

/* Yellow: the switch */
.how { background: var(--yellow); color: var(--ink-dark); }
.how .grid { row-gap: 40px; }
.how h2, .steps { grid-column: 1 / -1; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.steps li { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: baseline; padding-block: 22px; }
.steps li + li { box-shadow: inset 0 3px 0 var(--ink-dark); }
.steps b { font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }

/* Blue: the B&B booking site case study */
.case .grid { row-gap: 24px; align-items: end; }
.case h2 { grid-column: 1 / span 6; }
.case .lead { grid-column: 7 / span 6; font-size: var(--step-lead); line-height: 1.3; max-width: 32ch; }
.shot { margin: clamp(36px, 4vw, 56px) 0 0; background: var(--blue-2); padding: 10px; }
.shot figcaption { font-size: var(--step-small); color: var(--soft); padding: 10px 4px 2px; }
.facts li { max-width: 36ch; }
.facts b { display: block; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 6px; }
.links { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-top: 40px; }

/* Black: the trades template, text beside a tall screenshot */
.trades { background: var(--black); }
.trades .grid { row-gap: 40px; align-items: start; }
.trades .text { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; }
.trades h2 { font-size: clamp(2.75rem, 1.4rem + 3.8vw, 5.25rem); }
.trades .lead { font-size: var(--step-lead); line-height: 1.3; }
.trades .facts { grid-template-columns: 1fr; margin-top: 16px; }
.trades .facts b { color: var(--yellow); }
.trades .links { margin-top: 8px; }
.trades .shot { grid-column: 7 / span 6; margin: 0; background: #161616; position: sticky; top: 24px; }
.trades .shot figcaption { color: #b8b8b8; }

/* Blue: the trades template on an industry page, where the hero already shows its screen */
.trades.bare { background: var(--blue); }
.trades.bare .grid { row-gap: 24px; align-items: end; }
.trades.bare h2 { grid-column: 1 / span 6; }
.trades.bare .lead { grid-column: 7 / span 6; max-width: 32ch; }
.trades.bare .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.trades.bare .facts b { color: var(--ink); }
.trades.bare .links { margin-top: 40px; }

/* The other industry pages for the same template, under the template's links */
.siblings { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font-size: var(--step-small); color: var(--soft); }
.siblings a { text-decoration: none; }
.siblings span { color: var(--ink); }
.siblings a:hover { text-decoration: underline; }

/* Black: what the owner sets up for this business, read like a settings sheet */
.setup { background: var(--black); }
.setup h2, .prompts h2 { font-size: clamp(2.75rem, 1.4rem + 3.8vw, 5.25rem); max-width: 16ch; }
.setup .grid { row-gap: 24px; }
.setup h2, .setup .lead { grid-column: 1 / -1; }
.setup .lead { font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; }
.spec { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; }
.spec li { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: baseline; padding-block: 18px; box-shadow: inset 0 1px 0 #4a4a4a; }
.spec li:first-child { box-shadow: inset 0 3px 0 var(--yellow); }
.spec b { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--yellow); }
.spec p { max-width: 52ch; }
/* On /for-hosts/ and /for-trades/ the chapter is the whole feature list: heading beside its lead, then two columns
   of short entries, so it doesn't repeat the label-and-text rows of "How switching works" right above it */
.setup.features .grid { align-items: end; }
.setup.features h2 { grid-column: 1 / span 6; }
.setup.features .lead { grid-column: 7 / span 6; max-width: 34ch; }
.setup.features .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
.setup.features .spec li { grid-template-columns: 1fr; gap: 8px; align-content: start; padding-block: 20px 32px; }
.setup.features .spec li:nth-child(2) { box-shadow: inset 0 3px 0 var(--yellow); }

/* Pink: what to ask Caffeine's AI in the chat of your copy */
.prompts { background: var(--pink); color: var(--ink-dark); }
.prompts .grid { row-gap: 32px; margin-top: clamp(32px, 4vw, 56px); }
.prompts .lead { grid-column: 1 / span 5; font-size: var(--step-lead); line-height: 1.3; }
.prompts .text { grid-column: 7 / span 6; display: grid; gap: 24px; align-content: start; }
.asks { list-style: none; margin: 0; padding: 0; display: grid; }
.asks li { padding-block: 18px; box-shadow: inset 0 3px 0 var(--ink-dark); font-weight: 600; max-width: 46ch; }

/* "How a remix works": a shorter hero without a product screen, a link under the steps, and what stays the owner's on blue */
.hero.remix { min-height: 0; padding-bottom: var(--pad); }
.how .more { grid-column: 1 / -1; margin-top: 8px; }
.prompts .ask-lead { grid-column: 1 / span 6; font-size: var(--step-lead); line-height: 1.3; }
#ask h2 { margin-bottom: 40px; }
.yours .grid { row-gap: 24px; }
.yours h2, .yours .lead { grid-column: 1 / -1; }
.yours .lead { font-size: var(--step-lead); line-height: 1.3; max-width: 32ch; }
.yours .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yours .facts b { color: var(--yellow); }

/* "What booking platforms charge hosts": a reference page. Smaller headings (they are the hosts' own questions),
   tables that turn into one block per row on phones, and the platforms on blue, one after another */
.hero.ref { min-height: 0; padding-bottom: var(--pad); }
.hero .checked { font-size: var(--step-small); }
.ref h2 { font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4.75rem); max-width: 24ch; }
.ref > .lead, .ref section > .lead { font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; margin-top: 24px; }
.compare { background: var(--black); }
.table { margin-top: clamp(40px, 5vw, 64px); }
.table table { width: 100%; border-collapse: collapse; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; vertical-align: top; padding: 16px 16px 18px 0; }
.table thead th { font-weight: 400; padding-top: 0; }
.table tbody tr { box-shadow: inset 0 1px 0 #4a4a4a; }
.table tbody tr:first-child { box-shadow: inset 0 3px 0 var(--yellow); }
.table tbody th { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--yellow); }
.table.dark tbody th { width: 16%; }
.table.dark td:nth-child(3) { color: var(--ink); font-weight: 600; }
.table.dark td { color: #dcdcdc; }
.table.light tbody tr { box-shadow: inset 0 1px 0 var(--ink-dark); }
.table.light tbody tr:first-child { box-shadow: inset 0 3px 0 var(--ink-dark); }
.table.light tbody th { color: var(--ink-dark); font-size: var(--step-body); }
.table.light td { font-size: var(--step-body); }
.table.light td:nth-child(3) { font-weight: 600; }
.platforms section + section { margin-top: var(--pad); }
.platforms .spec li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.platforms .spec li:first-child { box-shadow: inset 0 3px 0 var(--yellow); }
.example { background: var(--yellow); color: var(--ink-dark); }
.example .note { margin-top: 24px; max-width: 60ch; }
.ref.rent .calc { margin-top: clamp(40px, 5vw, 64px); }
.faq.ref-faq { background: var(--blue); }

/* Pink: assistants */
.agents { background: var(--pink); color: var(--ink-dark); }
.agents .grid { row-gap: 40px; align-items: start; }
.agents h2 { grid-column: 1 / span 7; }
.agents .text { grid-column: 8 / span 5; display: grid; gap: 16px; }
.agents .text p:first-child { font-size: var(--step-lead); line-height: 1.3; margin-bottom: 8px; }

/* Black: questions */
.faq { background: var(--black); }
.faq .grid { row-gap: 40px; }
.faq h2 { grid-column: 1 / span 4; }
.qa { grid-column: 6 / span 7; display: grid; gap: 40px; }
.qa h3 { font-size: var(--step-lead); letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px; color: var(--yellow); }
.qa p { max-width: 52ch; }

/* Yellow: the templates and how to reach us (no form) */
.contact { background: var(--yellow); color: var(--ink-dark); }
.start { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 40px; margin-top: clamp(36px, 4vw, 56px); }
.templates { grid-column: 1 / span 7; list-style: none; margin: 0; padding: 0; display: grid; }
.templates li { display: grid; gap: 10px; padding-block: 22px 28px; box-shadow: inset 0 3px 0 var(--ink-dark); }
.templates b { font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.templates .links { margin-top: 8px; }
.contact .btn { background: var(--ink-dark); color: #fff; }
.contact .btn:hover { background: var(--blue); }
.contact aside { grid-column: 9 / span 4; display: grid; gap: 14px; align-content: start; padding-top: 22px; box-shadow: inset 0 3px 0 var(--ink-dark); }
.contact .ask { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.reach { margin: 0; display: grid; gap: 8px; }
.reach div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.reach dt { font-weight: 600; min-width: 4.5em; }
.reach dd { margin: 0; }
.field { display: grid; gap: 6px; }
.note { font-size: var(--step-small); }
.copy { font: inherit; color: inherit; background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* Blue: the name */
.foot { padding-block: 48px 28px; }
.name { font-size: clamp(3.5rem, 15vw, 18rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.85; }
.foot .row { display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-top: 24px; font-size: var(--step-small); color: var(--soft); }
.foot nav { display: flex; gap: 12px 24px; flex-wrap: wrap; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot .industries { margin-top: 16px; font-size: var(--step-small); color: var(--soft); }
.reach-line { margin-top: 12px; font-size: var(--step-small); color: var(--soft); }

/* 404 */
.lost { min-height: 100svh; display: grid; align-content: center; gap: 24px; justify-items: start; }

/* The one authored moment: the stage opens from its cut corner */
.js .stage { clip-path: polygon(14% 0, 14% 0, 14% 100%, 0 100%, 0 22%); animation: open 1.1s .2s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes open { to { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 22%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .stage { animation: none; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 22%); }
}

@media (max-width: 520px) {
  .calc-fields { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav ul li:not(.keep) { display: none; }
  .hero { min-height: 0; }
  .hero-text { margin-top: 48px; }
  .hero-text .def { max-width: 52ch; }
  .hero h1 { font-size: 11vw; }
  .hero.ref h1 { font-size: 8.5vw; }
  .stage { position: relative; left: auto; top: auto; margin: 40px calc(-1 * max(var(--m), env(safe-area-inset-right, 0px))) 0 calc(-1 * max(var(--m), env(safe-area-inset-left, 0px))); padding: 40px 0 0 16px; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px); }
  .js .stage { animation: none; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px); }
  .stage figure { width: 640px; max-width: none; }
  .points, .facts { grid-template-columns: 1fr; gap: 24px; }
  .yours .facts { grid-template-columns: 1fr; }
  .calc-fields, .calc-out { grid-column: 1 / -1; }
  .prompts .ask-lead, .yours .facts, .case h2, .case .lead, .trades.bare h2, .trades.bare .lead, .prompts .lead, .prompts .text, .trades .text, .trades .shot, .agents h2, .agents .text, .faq h2, .qa, .templates, .contact aside { grid-column: 1 / -1; }
  .steps li, .spec li { grid-template-columns: 1fr; gap: 6px; }
  .setup.features h2, .setup.features .lead { grid-column: 1 / -1; }
  .setup.features .spec { grid-template-columns: 1fr; }
  .setup.features .spec li { padding-block: 18px; }
  .setup.features .spec li:nth-child(2) { box-shadow: inset 0 1px 0 #4a4a4a; }
  .trades.bare .facts { grid-template-columns: 1fr; }
  .table table, .table tbody, .table tr, .table th, .table td { display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table tbody tr { padding-block: 16px 20px; }
  .table tbody th, .table td { padding: 0; }
  .table.dark tbody th { width: auto; }
  .table td { margin-top: 10px; }
  .table td::before { content: attr(data-label); display: block; font-size: var(--step-small); font-weight: 400; opacity: 0.7; }
  /* The worked example is short figures: column name and amount on one line, the amounts lined up */
  .table.light td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: baseline; margin-top: 8px; }
  .table.light td::before { opacity: 0.75; }
  .table td.empty { display: none; }
  .stage figcaption, .stage.tall figcaption { max-width: calc(100vw - 32px); }
  /* On phones the whole screen fits, and the cut corner would clip a caption on top */
  .stage.tall figcaption { order: 0; padding: 10px 0; }
  .trades .shot { max-width: 480px; position: static; }
}