/* Shared by the homepage (index.html) and the /for/ pages. */
/* ---------- Tokens ---------- */
:root {
  --ink: #161A2E;           /* deep indigo-charcoal: headings, never pure black */
  --text: #3A3D4F;          /* reading text */
  --paper: #FFFFFF;
  --fog: #F5F4F0;           /* warm stone: grey bands and art panels */
  --graphite: #575A6E;      /* secondary text: 6.3:1 on the stone band */
  --rule: #E3E1DB;
  --accent: #2346E8;        /* cobalt, the colour of a connection: primary buttons, the closing band, every link */
  --accent-soft: #DDE5FF;   /* pale fill: the AI side of every drawing, and the open tab */
  --accent-bright: #8FA8FF; /* the accent on deep surfaces */
  --deep: #111633;          /* midnight indigo for the dark bands */
  --art-bg: #E9EEFC;        /* the drawings' own ground: used for nothing else, so a drawing never reads as a hole in its card */
  --art-ink: #4B4F6B;
  --art-soft: #AEB2C6;

  /* the six hero strands: the reader's things, each in its own colour */
  --s0: #F07B2E; --s1: #23A067; --s2: #8458F2; --s3: #E4507F; --s4: #E3A400; --s5: #2B86E3;

  --radius: 24px;
  --radius-s: 16px;

  --display: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* headings and interface */
  --sans: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;            /* reading text and labels */

  --gutter: clamp(20px, 4.4vw, 72px);
  --band: clamp(80px, 11vw, 168px);
  --max: 1520px;
  --header-h: 72px;
}
.hero-dark { --s0: #F7B07A; --s1: #8FD8AE; --s2: #C3B1F5; --s3: #F7ABC0; --s4: #F2D268; --s5: #8CC8F7; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--accent-bright); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band--fog { background: var(--fog); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.display, .h2, .h3, .hero-sub, .wordmark, .switch-title, .switch-fix p:last-child, .picker-name, .offer-name, .offer-desc, .price, .promise-item h3, .faq summary { font-family: var(--display); }
/* Interface voice belongs to the display face: headings, nav and buttons share it */
.nav a, .btn, .more, .footer-col a, .skip { font-family: var(--display); }
.display {
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h2 {
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h3 {
  font-weight: 500;
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(1.15rem, 1.45vw, 1.4rem);
  line-height: 1.5;
  font-weight: 400;
  max-width: 38em;
}
/* Labels speak in the reading face, sentence case, in the accent: a signpost, not a spec sheet */
.label {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--accent);
}
.on-dark .label { color: var(--accent-bright); }

/* ---------- Links and buttons ---------- */
.arrow { width: 1em; height: 1em; flex: none; transition: transform .25s ease; }
.more {
  display: inline-flex; align-items: center; gap: .55em;
  font-weight: 500; font-size: 1rem;
  padding-block: 4px;
  color: var(--accent);
}
.more:hover .arrow { transform: translateX(4px); }
.on-dark .more { color: var(--accent-bright); }

.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em;
  min-height: 52px; padding: 0 9px 0 24px;
  font-weight: 500; font-size: 1rem; line-height: 1;
  background: var(--accent); color: var(--paper);
  border: 1px solid var(--accent); border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn .arrow { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light .arrow { background: rgba(22,26,46,.08); }
.btn--light:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(22,26,46,.28); }
.btn--ghost .arrow { background: rgba(22,26,46,.06); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ghost:hover .arrow { background: rgba(255,255,255,.14); }
.btn--small { min-height: 40px; padding: 0 6px 0 16px; font-size: .92rem; gap: 1em; }
.btn--small .arrow { width: 28px; height: 28px; padding: 7px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  color: var(--ink);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header.on-dark { color: #F7F5F0; }
.site-header.is-solid { background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 1px 0 rgba(22,26,46,.06); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.wordmark svg { width: 22px; height: 22px; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.nav a:not(.btn) { font-size: .95rem; padding: 6px 2px; border-radius: 6px; opacity: .82; transition: opacity .2s ease; }
.nav a:not(.btn):hover { opacity: 1; }
.site-header .btn { background: transparent; color: inherit; border-color: currentColor; }
.site-header .btn .arrow { background: rgba(127,127,127,.14); }
.site-header:not(.on-dark) .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.site-header.on-dark .btn:hover { background: #F7F5F0; color: var(--ink); border-color: #F7F5F0; }
.site-header.is-solid .btn { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.site-header.is-solid .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; }
.menu-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: background .2s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }

@media (max-width: 1020px) {
  .menu-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--paper); color: var(--ink);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 12px var(--gutter) 32px;
    overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
  }
  .nav a:not(.btn) { width: 100%; font-size: 1.5rem; font-weight: 400; padding-block: 18px; border-bottom: 1px solid var(--rule); border-radius: 0; opacity: 1; }
  .nav .btn { margin-top: 28px; width: 100%; min-height: 52px; background: var(--accent) !important; color: var(--paper) !important; border-color: var(--accent) !important; }
  .menu-open .nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .menu-open.site-header { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
  .menu-open .menu-toggle span { background: transparent; }
  .menu-open .menu-toggle span::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex; align-items: flex-end;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--fog) 100%);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero-dark .hero { background: var(--deep); color: #F7F5F0; }
.hero .wrap { padding-block: var(--header-h) clamp(40px, 6vw, 88px); }
.hero .display { font-size: clamp(2rem, 6vw, 5.6rem); text-wrap: wrap; }
/* ---------- Hero art: the reader's things, each in its own colour, weave together and leave as one connected line.
   Rules: the drawing is always the full content width, edge to edge; it fills all the height left between
   the header and the headline, never less than 26svh; and the space above it always equals the space below.
   Its geometry stretches to fill that box; line weights and the dots stay true size. ---------- */
.hero { --marker: 12px; --end: 28px; --art-gap: clamp(32px, 4.5vh, 52px); }
.hero .wrap { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.hero .wrap > * { flex: none; }
.hero .wrap > .hero-strands { flex: 1 0 auto; }
.hero-strands {
  display: block; overflow: visible;
  /* inset by half a dot each side, so the dots' outer edges land exactly on the edges of the space */
  width: calc(100% - var(--marker) / 2 - var(--end) / 2);
  height: calc(26svh - var(--marker));
  margin: calc(var(--art-gap) + var(--marker) / 2) calc(var(--end) / 2) calc(var(--art-gap) + var(--marker) / 2) calc(var(--marker) / 2);
}
@media (max-width: 860px) { .hero { --marker: 10px; --end: 24px; } }
.hero-strands path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.hs-strand { stroke-width: 2.2; }
.hs-strand:nth-child(1), .hs-marker:nth-child(8)  { stroke: var(--s0); }
.hs-strand:nth-child(2), .hs-marker:nth-child(9)  { stroke: var(--s1); }
.hs-strand:nth-child(3), .hs-marker:nth-child(10) { stroke: var(--s2); }
.hs-strand:nth-child(4), .hs-marker:nth-child(11) { stroke: var(--s3); }
.hs-strand:nth-child(5), .hs-marker:nth-child(12) { stroke: var(--s4); }
.hs-strand:nth-child(6), .hs-marker:nth-child(13) { stroke: var(--s5); }
.hs-line { stroke: var(--accent); stroke-width: 3; }
.hs-marker { stroke-width: var(--marker); }
.hs-end { stroke: var(--accent); stroke-width: var(--end); }
.hero-dark .hs-line, .hero-dark .hs-end { stroke: var(--accent-bright); }

/* Drawn once on load. The dash trick only lives inside the animation: at rest every line is plain and solid. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hsDraw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
  @keyframes hsShow { from { opacity: 0; } to { opacity: 1; } }
  .js .hs-marker { animation: hsShow .4s ease calc(.2s + var(--i) * 90ms) backwards; }
  .js .hs-strand { animation: hsDraw 1.5s cubic-bezier(.5,0,.3,1) calc(.5s + var(--i) * 110ms) backwards; }
  .js .hs-line { animation: hsDraw .8s cubic-bezier(.3,.6,.2,1) 2.35s backwards; }
  .js .hs-end { animation: hsShow .35s ease 3.05s backwards; }
}
.hero-sub {
  margin-top: clamp(18px, 2vw, 28px);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  font-weight: 400; letter-spacing: -0.01em;
  color: var(--graphite);
  text-wrap: balance;
}
.hero-sub b { font-weight: 400; color: var(--ink); }
.hero-dark .hero-sub { color: rgba(247,245,240,.7); }
.hero-dark .hero-sub b { color: #F7F5F0; }
.hero-foot {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 2.4vw, 32px);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end;
}
.hero-dark .hero-foot { border-top-color: rgba(255,255,255,.18); }
.hero-foot p { max-width: 34em; color: var(--text); font-size: clamp(1.02rem, 1.2vw, 1.18rem); }
.hero-dark .hero-foot p { color: rgba(247,245,240,.82); }
/* Cobalt hero: the page opens and closes on the connection colour. The strands keep their colours, lightened
   so they hold on the blue; the single line they become, and its end, turn white. */
.hero-cobalt .hero { background: var(--accent); color: #FFFFFF; }
.hero-cobalt .hero { --s0: #FFB27A; --s1: #7FE0AE; --s2: #D6C6FF; --s3: #FFB0C8; --s4: #FFD95C; --s5: #9FE0FF; }
.hero-cobalt .hs-line, .hero-cobalt .hs-end { stroke: #FFFFFF; }
.hero-cobalt .hero-sub { color: rgba(255,255,255,.78); }
.hero-cobalt .hero-sub b { color: #FFFFFF; }
.hero-cobalt .hero-foot { border-top-color: rgba(255,255,255,.28); }
.hero-cobalt .hero-foot p { color: rgba(255,255,255,.92); }
.hero-cobalt .hero .btn--light:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.hero-cobalt .hero .btn--light:hover .arrow { background: rgba(255,255,255,.16); }
.hero-cobalt .hero :focus-visible, .hero-cobalt .site-header.on-dark :focus-visible { outline-color: #FFFFFF; }
.hero-cobalt .site-header.on-dark .btn:hover { background: #FFFFFF; color: var(--accent); border-color: #FFFFFF; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* On the light hero the two buttons are the ordinary primary and secondary */
.hero:not(.on-dark) .btn--light { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.hero:not(.on-dark) .btn--light .arrow { background: rgba(255,255,255,.16); }
.hero:not(.on-dark) .btn--light:hover { background: var(--ink); border-color: var(--ink); }
.hero.on-dark .btn--ghost { color: #F7F5F0; border-color: rgba(255,255,255,.4); }
.hero.on-dark .btn--ghost .arrow { background: rgba(255,255,255,.1); }
.hero.on-dark .btn--ghost:hover { background: #F7F5F0; color: var(--ink); border-color: #F7F5F0; }
.hero.on-dark .btn--ghost:hover .arrow { background: rgba(22,26,46,.08); }
@media (max-width: 860px) {
  .hero-foot { grid-template-columns: 1fr; align-items: start; }
  .hero-actions .btn { flex: 1 1 220px; }
}

/* Headings and display text keep full ink; reading text is --text. On deep surfaces both follow the section. */
.display, .h2, .h3, .offer-name, .offer-desc, .price, .switch-fix p:last-child, .faq summary { color: var(--ink); }
.on-dark :is(.display, .h2, .h3) { color: inherit; }

/* ---------- Section heads ---------- */
.head { display: grid; gap: clamp(18px, 2vw, 28px); margin-bottom: clamp(44px, 5.5vw, 88px); max-width: 62rem; }
.head .lede { margin-top: 4px; }

/* ---------- Problem ---------- */
.problem { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gutter); }
.problem > .label { grid-column: 1 / span 3; align-self: start; padding-top: 1.35em; }
.problem-body { grid-column: 4 / span 9; }
.problem-body .h2 { max-width: 17em; }
.problem-cols { margin-top: clamp(36px, 4vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); max-width: 62rem; align-items: start; }
.problem-cols p + p { margin-top: 1em; }
.problem-name { font-style: normal; color: var(--ink); background: var(--accent-soft); padding: 0 .3em; border-radius: 6px; }
@media (max-width: 860px) {
  .problem > .label, .problem-body { grid-column: 1 / -1; }
  .problem > .label { padding-top: 0; }
  .problem-cols { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(20px, 2.2vw, 32px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .grid--4 { grid-template-columns: 1fr; } }

/* Every image-and-text block is a soft white card with its drawing on a stone panel */
/* Every image-and-text block is a white card whose drawing fills its top edge to edge, like a photo */
.card { --cpad: 24px; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); padding: 0 var(--cpad) 30px; overflow: hidden; }
.card-art { aspect-ratio: 4 / 3; background: var(--art-bg); margin: 0 calc(-1 * var(--cpad)) 24px; overflow: hidden; }
.card-art svg { width: 100%; height: 100%; }
.card .label { margin-bottom: 14px; }
.card p { margin-top: 12px; margin-bottom: 28px; }
.card .more { margin-top: auto; align-self: flex-start; }
/* Inside a card the eyebrow is a tag: it names a category, so it can't be mistaken for a sub-heading
   such as "The old way", and it steps back so the heading leads */
.card .label, .guide > .label, .case-who .label {
  display: inline-flex; align-self: flex-start; justify-self: start; width: max-content;
  padding: 5px 12px; border-radius: 999px; background: var(--fog);
  color: var(--ink); font-size: .8rem; font-weight: 600; line-height: 1.3;
}
/* A card's link is a proper button: a cobalt pill, like every other call to action on the page */
.card .more, .guide .more {
  min-height: 44px; padding: 0 6px 0 18px; gap: 14px;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  color: var(--paper); font-size: .95rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.card .more .arrow, .guide .more .arrow { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(255,255,255,.16); transition: background .2s ease, transform .25s ease; }
.card .more:hover, .guide:hover .more { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.card .more:hover .arrow, .guide:hover .more .arrow { background: rgba(255,255,255,.16); transform: translateX(3px); }

/* Drawings: soft lines, round ends, the reader's things in apricot and the AI side in pale blue */
.art-line { fill: none; stroke: var(--art-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art-soft { fill: none; stroke: var(--art-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art-accent { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art-doc, .art-box, .art-paper { stroke: var(--art-ink); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art-doc { fill: var(--paper); }   /* the reader's own things: plain white paper */
.art-box { fill: var(--accent-soft); stroke: var(--accent); }
.art-paper { fill: var(--paper); }
.art-row { fill: var(--paper); stroke: none; }
.art-dot { fill: var(--accent); stroke: none; }
.art-dot-soft { fill: var(--art-soft); stroke: none; }
/* The hub everything connects to: a solid cobalt tile with a white dot */
.art-hub { fill: var(--accent); stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.art-hub-dot { fill: var(--paper); stroke: none; }
.art-tag { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.art-text { font-family: var(--sans); font-size: 11px; font-weight: 700; fill: var(--graphite); }

/* ---------- Eyebrow marker: one blue dot per section ---------- */
.head > .label, .problem > .label, .how-head > .label, .promise-head > .label, .faq-head > .label, .about-body > .label, .closing-text > .label {
  display: flex; align-items: center; gap: 10px;
}
.head > .label::before, .problem > .label::before, .how-head > .label::before, .promise-head > .label::before, .faq-head > .label::before, .about-body > .label::before, .closing-text > .label::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent);
}
.closing-text > .label::before, .promise-head > .label::before { background: var(--accent-bright); }

/* Services: one panel visible at a time; nothing moves, only the content crossfades */
.js [data-switch] [hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.js .offer:not([hidden]) > * { animation: fadeIn .4s ease; }

/* ---------- Steps: a timeline. Numbered dots on one rail ---------- */
.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gutter); }
.how-head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: clamp(20px, 2.2vw, 32px); justify-items: start; }
.steps { grid-column: 7 / span 6; counter-reset: step; }
.step {
  --node: 44px;
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 36px);
  padding-bottom: clamp(40px, 4.4vw, 72px);
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step); grid-column: 1; grid-row: 1 / span 2; align-self: start;
  position: relative; z-index: 1;
  width: var(--node); height: var(--node); display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft);
  font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--accent);
}
.step::after { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: var(--node); bottom: 0; width: 2px; background: var(--rule); }
.step:last-child::after { display: none; }
.step:last-child::before { background: var(--accent); color: var(--paper); }
.step .h3 { grid-column: 2; font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: var(--node); letter-spacing: -0.02em; }
.step p { grid-column: 2; margin-top: 10px; max-width: 34em; }
@media (max-width: 860px) {
  .how-head, .steps { grid-column: 1 / -1; }
  .how-head { position: static; }
}

/* ---------- Services ---------- */
/* Picker: a segmented control on a stone track, the chosen tab lifted in white; the offer sits below it */
.picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; background: var(--fog); border-radius: 22px; }
.picker-tab {
  position: relative; text-align: left; display: grid; gap: 6px; align-content: start;
  padding: 18px clamp(16px, 1.8vw, 24px) 20px; border-radius: 16px;
  color: var(--graphite); transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.picker-tab .label { color: inherit; }
.picker-name { font-size: clamp(1.15rem, 1.5vw, 1.5rem); letter-spacing: -0.015em; line-height: 1.15; margin-top: 6px; font-weight: 500; }
.picker-from { font-size: .98rem; }
.picker-tab:hover { color: var(--ink); }
.picker-tab[aria-expanded="true"] { color: var(--ink); background: var(--paper); box-shadow: 0 1px 2px rgba(22,26,46,.06), 0 8px 24px -8px rgba(22,26,46,.14); }
html:not(.js) .picker { display: none; }

.offer {
  background: var(--fog); border-radius: var(--radius);
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gutter);
  padding: clamp(32px, 4.4vw, 72px) clamp(24px, 3vw, 48px);
}
html:not(.js) .offer + .offer { margin-top: 24px; }
.offer-main { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; }
.js .offer-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.offer-name { font-weight: 500; font-size: clamp(1.25rem, 1.5vw, 1.5rem); }
.offer-desc { margin-top: 0; font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.16; letter-spacing: -0.02em; max-width: 17em; text-wrap: balance; }
.price { margin-top: clamp(24px, 2.6vw, 40px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-weight: 500; font-size: clamp(1.25rem, 1.5vw, 1.5rem); letter-spacing: -0.01em; line-height: 1.2; }
.price small { font-family: var(--sans); font-size: .9rem; color: var(--graphite); font-weight: 600; letter-spacing: 0; }
.offer-main .btn { margin-top: clamp(28px, 3vw, 44px); min-width: min(100%, 320px); }
.offer-list { grid-column: 7 / span 6; }
.offer-list ul { margin-top: 6px; }
.offer-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding-block: clamp(16px, 1.6vw, 22px); }
.offer-list li + li { border-top: 1px solid var(--rule); }
.offer-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: .6em; }
.offer-list b { font-weight: 700; color: var(--ink); }
.offer-list span { grid-column: 2; max-width: 32em; }
@media (max-width: 860px) {
  .picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker-tab { padding-inline: 14px; }
  .offer { padding-inline: 20px; }
  .offer-main, .offer-list { grid-column: 1 / -1; }
  .offer-main .btn { width: 100%; }
}

/* ---------- Deep band + promises pullout ---------- */
.band--dark { background: var(--deep); color: #F7F5F0; }
.promise { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px var(--gutter); }
.promise-head { grid-column: 1 / span 5; display: grid; gap: clamp(18px, 2vw, 28px); align-content: start; }
.promise-head .lede { color: rgba(247,245,240,.8); }
.promise-grid { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.promise-item { background: rgba(255,255,255,.06); border-radius: 20px; padding: 26px 26px 30px; }
/* Each promise gets a drawing in the same line-art language as the rest of the page: white strokes, one cobalt-bright mark */
.promise-icon { width: 48px; height: 48px; margin-bottom: clamp(20px, 2.4vw, 32px); overflow: visible; }
.promise-icon .pi-line { fill: none; stroke: rgba(255,255,255,.88); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promise-icon .pi-soft { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.88); stroke-width: 1.8; stroke-linejoin: round; }
.promise-icon .pi-mark { fill: rgba(255,255,255,.45); }
.promise-icon .pi-dot { fill: var(--accent-bright); }
.promise-item h3 { font-weight: 400; font-size: clamp(1.4rem, 1.9vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.promise-item p { margin-top: 14px; color: rgba(247,245,240,.78); }
@media (max-width: 1020px) { .promise-head, .promise-grid { grid-column: 1 / -1; } }
@media (max-width: 560px) { .promise-grid { grid-template-columns: 1fr; } }

/* ---------- Use cases ---------- */
.cases { display: grid; gap: 20px; }
.case {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 3.6vw, 56px);
  padding: 0 clamp(28px, 3.2vw, 52px) 0 0; overflow: hidden;
  background: var(--paper); border-radius: var(--radius);
  align-items: center;
}
.case-art { grid-column: 1; align-self: stretch; min-height: 260px; background: var(--art-bg); }
.case-art svg { width: 100%; height: 100%; }
.case-body { grid-column: 2; padding-block: clamp(36px, 3.6vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px) clamp(24px, 3vw, 48px); }
.case-who { grid-column: 1 / -1; }
.case-who .h3 { margin-top: 14px; font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -0.02em; }
.case-col.before { color: var(--graphite); }
.case-col .label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.case-col.before .label { color: var(--graphite); }
.case-col .label i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--graphite); }
.case-col.after .label { color: var(--accent); }
.case-col.after .label i { background: var(--accent); border-color: var(--accent); }
@media (max-width: 1020px) { .case-art, .case-body { grid-column: 1 / -1; } .case { grid-template-columns: 1fr; padding: 0 24px 28px; } .case-art { margin-inline: -24px; aspect-ratio: auto; height: clamp(190px, 34vw, 280px); min-height: 0; } .case-body { padding-block: 28px 0; } }
@media (max-width: 560px) { .case-body { grid-template-columns: 1fr; } }
.footnote { margin-top: 28px; font-size: .9rem; color: var(--graphite); max-width: 44em; }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: min(820px, 90vh); }
.about-art { background: #E8E6E0; position: relative; min-height: 420px; overflow: hidden; }
.about-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 860px) { .about-art { aspect-ratio: 1 / 1; min-height: 0; } }
.about-body { padding: var(--band) var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 24px; max-width: 48rem; }
.about-body .btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* ---------- Guides ---------- */
.guide { --gpad: clamp(24px, 2.6vw, 40px); border-radius: var(--radius); padding: 0 var(--gpad) var(--gpad); overflow: hidden; display: flex; flex-direction: column; min-height: 300px; background: var(--paper); transition: box-shadow .25s ease, transform .25s ease; }
.guide:hover { box-shadow: 0 2px 4px rgba(22,26,46,.04), 0 18px 40px -16px rgba(22,26,46,.18); transform: translateY(-2px); }
.guide-art { aspect-ratio: 2 / 1; background: var(--art-bg); margin: 0 calc(-1 * var(--gpad)) var(--gpad); }
.guide-art svg { width: 100%; height: 100%; }
.guide .h3 { margin-top: 14px; font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -0.02em; max-width: 16em; }
.guide p { margin-top: 14px; max-width: 34em; }
.guide .more { margin-top: auto; align-self: flex-start; }
.guide p + .more { margin-top: 32px; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gutter); }
.faq-head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 20px; }
.faq-list { grid-column: 6 / span 7; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem); font-weight: 500; letter-spacing: -0.01em;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.plus { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--fog); transition: background .2s ease; }
.faq summary:hover .plus { background: var(--accent-soft); }
.plus::before, .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .25s ease; }
.plus::before { left: 9px; right: 9px; top: 15.25px; height: 1.5px; }
.plus::after { top: 9px; bottom: 9px; left: 15.25px; width: 1.5px; }
details[open] .plus::after { transform: scaleY(0); }
.faq details p { padding-bottom: 28px; max-width: 42em; }
@media (max-width: 860px) {
  .faq-head, .faq-list { grid-column: 1 / -1; }
  .faq-head { position: static; }
}

/* ---------- Closing CTA ---------- */
/* The page closes on one solid block of the connection colour */
.closing { background: var(--accent); color: #FFFFFF; }
.closing .label { color: #FFFFFF; }
.closing-text > .label::before { background: #FFFFFF !important; }
.closing .btn--light:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.closing .btn--light:hover .arrow { background: rgba(255,255,255,.16); }
.closing :focus-visible { outline-color: #FFFFFF; }
.closing .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gutter); align-items: end; }
.closing-text { grid-column: 1 / span 8; display: grid; gap: 24px; }
.closing-text p { color: rgba(255,255,255,.9); max-width: 36em; }
.closing-action { grid-column: 9 / span 4; display: grid; gap: 14px; justify-items: start; }
.closing-action .btn { width: 100%; min-height: 60px; padding-right: 12px; }
.closing-action small { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.78); padding-left: 4px; }
@media (max-width: 860px) { .closing-text, .closing-action { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: #F7F5F0; border-top: 1px solid rgba(255,255,255,.12); padding-block: clamp(48px, 5vw, 80px) 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 40px var(--gutter); }
.footer-grid p { color: rgba(247,245,240,.7); margin-top: 16px; max-width: 24em; font-size: .95rem; }
.footer-col h4 { font-family: var(--sans); font-size: .9rem; font-weight: 700; color: rgba(247,245,240,.55); margin-bottom: 16px; }
.footer-col li + li { margin-top: 10px; }
.footer-col a { color: rgba(247,245,240,.86); font-size: .97rem; transition: color .2s ease; }
.footer-col a:hover { color: var(--accent-bright); }
.footer-base { margin-top: clamp(48px, 5vw, 80px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: .85rem; color: rgba(247,245,240,.55); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .hero .reveal { transition-duration: 1.1s; }

/* ---------- Small screens: one block, one container. ---------- */
@media (max-width: 860px) {
  .grid--2 { gap: 16px; }
  .card-art { aspect-ratio: 3 / 2; }
  .cases { gap: 16px; }
  .footnote { margin-top: 32px; }

}

/* Two by two, or between phone and desktop, a card lies on its side with its drawing on the left */
@media (min-width: 561px) {
  .card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(24px, 2.6vw, 40px); align-content: center; padding: 0 clamp(24px, 2.6vw, 40px) 0 0; }
  .card > * { grid-column: 2; }
  .card-art { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; aspect-ratio: auto; min-height: 240px; margin: 0; }
  .card .label { margin-top: 28px; }
  .card .more { justify-self: start; margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .arrow, .btn, .more, .guide { transition: none; }
  .js .offer:not([hidden]) > * { animation: none; }
}

/* ==========================================================================
   Added for index2 and the /for/ pages
   ========================================================================== */

/* ---------- "Who I help" menu ---------- */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-size: .95rem; padding: 6px 2px; border-radius: 6px;
  opacity: .82; transition: opacity .2s ease;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { opacity: 1; }
.chev { width: 10px; height: 6px; transition: transform .25s ease; }
.nav-drop.is-open .chev { transform: rotate(180deg); }
.nav-drop-panel {
  position: absolute; top: calc(100% + 16px); left: -18px; z-index: 60;
  width: min(580px, calc(100vw - 2 * var(--gutter)));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  padding: 10px; border-radius: 20px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 4px rgba(22,26,46,.06), 0 24px 56px -18px rgba(22,26,46,.3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
/* a bridge across the gap, so the pointer can travel from the button to the panel */
.nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 1021px) {
  .nav-drop:hover .nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-drop:hover .nav-drop-btn { opacity: 1; }
}
.nav .nav-drop-panel a:not(.btn) {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px;
  opacity: 1; font-size: 1rem; line-height: 1.3;
  transition: background .2s ease;
}
.nav .nav-drop-panel a:not(.btn):hover { background: var(--fog); }
.nav-drop-panel b { font-weight: 500; color: var(--ink); }
.nav-drop-panel span { font-family: var(--sans); font-size: .88rem; color: var(--graphite); }
.nav-drop-panel a[aria-current="page"] { background: var(--accent-soft); }

@media (max-width: 1020px) {
  .nav-drop { width: 100%; }
  .nav-drop-btn {
    width: 100%; justify-content: space-between;
    font-size: 1.5rem; font-weight: 400; padding-block: 18px;
    border-bottom: 1px solid var(--rule); border-radius: 0; opacity: 1;
  }
  .chev { width: 14px; height: 8px; }
  .nav-drop-panel {
    position: static; width: auto; display: none;
    grid-template-columns: 1fr; gap: 0; padding: 4px 0 12px;
    background: transparent; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav-drop-panel::before { display: none; }
  .nav-drop.is-open .nav-drop-panel { display: grid; border-bottom: 1px solid var(--rule); }
  .nav .nav-drop-panel a:not(.btn) { width: 100%; font-size: 1.1rem; padding: 12px 0 12px 16px; border-bottom: 0; }
}

/* ---------- "If you…" cards: every reader finds the line about them ---------- */
.who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
@media (max-width: 1020px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .who-grid { grid-template-columns: 1fr; gap: 12px; } .who-card { min-height: 0; gap: 14px; } .who-card .more { margin-top: 10px; } }
.who-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  min-height: 260px; padding: clamp(24px, 2.4vw, 34px);
  background: var(--paper); border-radius: var(--radius);
  transition: box-shadow .25s ease, transform .25s ease;
}
.band:not(.band--fog) .who-card { background: var(--fog); }
.who-card:hover { box-shadow: 0 2px 4px rgba(22,26,46,.04), 0 18px 40px -16px rgba(22,26,46,.18); transform: translateY(-2px); }
.who-card > .label {
  display: inline-flex; padding: 5px 12px; border-radius: 999px; background: var(--fog);
  color: var(--ink); font-size: .8rem; font-weight: 600; line-height: 1.3;
}
.band:not(.band--fog) .who-card > .label { background: var(--paper); }
.who-if {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: clamp(1.35rem, 1.75vw, 1.7rem); line-height: 1.18; letter-spacing: -0.015em;
  text-wrap: balance;
}
.who-card .more {
  margin-top: auto;
  min-height: 44px; padding: 0 6px 0 18px; gap: 14px;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  color: var(--paper); font-size: .95rem;
  transition: background .2s ease, border-color .2s ease;
}
.who-card .more .arrow { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(255,255,255,.16); transition: transform .25s ease; }
.who-card:hover .more { background: var(--ink); border-color: var(--ink); }
.who-card:hover .more .arrow { transform: translateX(3px); }

/* ---------- Page hero: the /for/ pages open on cobalt, shorter than the homepage ---------- */
.hero--page { min-height: 0; display: block; }
.hero--page .wrap {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gutter);
  align-items: center;
  padding-block: calc(var(--header-h) + clamp(40px, 6vw, 96px)) clamp(56px, 7vw, 112px);
}
.page-hero-text { grid-column: 1 / span 7; display: grid; gap: clamp(20px, 2.2vw, 28px); justify-items: start; }
.hero--page .display { font-size: clamp(2.3rem, 4.6vw, 4.4rem); text-wrap: balance; }
.hero--page .label { color: #FFFFFF; display: flex; align-items: center; gap: 10px; }
.hero--page .label::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #FFFFFF; }
.page-hero-lede { font-size: clamp(1.08rem, 1.3vw, 1.25rem); color: rgba(255,255,255,.92); max-width: 34em; }
.hero--page .hero-actions { margin-top: 8px; }
.page-hero-art {
  grid-column: 8 / span 5; align-self: center; aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  padding: clamp(12px, 1.6vw, 24px); border-radius: var(--radius); background: var(--art-bg);
}
.page-hero-art svg { width: 100%; height: auto; }
@media (max-width: 1020px) {
  .page-hero-text, .page-hero-art { grid-column: 1 / -1; }
  .page-hero-art { aspect-ratio: 2 / 1; }
}

/* ---------- "Sound familiar?": the reader's week, in their own words ---------- */
.pains { margin-top: clamp(32px, 3.6vw, 56px); max-width: 52rem; }
.pains li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 20px;
  padding-block: clamp(18px, 1.8vw, 24px); border-top: 1px solid var(--rule);
  font-size: clamp(1.08rem, 1.3vw, 1.25rem);
}
.pains li:last-child { border-bottom: 1px solid var(--rule); }
.pains li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--graphite); margin-top: .5em; }

/* ---------- An example: the old way against the connected way, then the steps ---------- */
.compare { display: grid; gap: 20px; margin-top: 8px; padding: clamp(22px, 2.2vw, 30px); background: var(--paper); border-radius: var(--radius-s); }
.how-head .footnote { margin-top: 0; }
.steps--detail .step .h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.2; padding-top: 9px; }

/* ---------- The setup: one offer, shown whole ---------- */
.offer--single { margin-top: 0; }
.offer--single .offer-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-top: 8px; }
.offer--single .offer-desc { margin-top: 14px; font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
.offer-kicker { font-size: .85rem; font-weight: 600; color: var(--graphite); }
.offer-alt { margin-top: 20px; font-size: .95rem; color: var(--graphite); max-width: 28em; }
.offer-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* A link inside a lede: the accent, underlined */
.lede a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lede a:hover { color: var(--ink); }

/* FAQ on the stone band: the plus sits on white */
.band--fog .plus { background: var(--paper); }

/* Footer: a fifth column for the /for/ pages */
.footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* Help cards, side by side: the drawing always fills the full height of its card, and the text sits centred
   beside it, however much shorter it is than its neighbour's (the old centred tracks left gaps above and below the art) */
@media (min-width: 561px) {
  .card { grid-template-rows: 1fr auto auto auto 1fr; align-content: stretch; }
  .card-art { grid-row: 1 / -1; }
  .card > .label { grid-row: 2; }
  .card > .h3 { grid-row: 3; }
  .card > p:not(.label) { grid-row: 4; }
}

/* Card headings split into even lines, never one word left on its own */
.card .h3 { text-wrap: balance; }

/* ---------- "Working with me": the promises on cobalt, like the guide's closing page ---------- */
.band--cobalt { background: var(--accent); color: #FFFFFF; }
.band--cobalt .label { color: #FFFFFF; }
.band--cobalt .promise-head > .label::before { background: #FFFFFF; }
.band--cobalt .promise-head .lede { color: rgba(255,255,255,.92); }
.band--cobalt .promise-item { background: rgba(255,255,255,.1); }
.band--cobalt .promise-item p { color: rgba(255,255,255,.88); }
.band--cobalt .promise-icon .pi-soft { fill: rgba(255,255,255,.1); stroke: #FFFFFF; }
.band--cobalt .promise-icon .pi-line { stroke: #FFFFFF; }
.band--cobalt .promise-icon .pi-dot { fill: #FFFFFF; }
.band--cobalt .promise-icon .pi-mark { fill: rgba(255,255,255,.55); }
.band--cobalt :focus-visible { outline-color: #FFFFFF; }

/* ---------- Free guide: one guide, behind a newsletter sign-up ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.guide-offer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--paper); border-radius: var(--radius); overflow: hidden; }
.guide-cover { background: var(--art-bg); display: grid; place-items: center; padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 64px); }
.cover-sheet {
  width: min(100%, 300px); aspect-ratio: 210 / 297;
  display: flex; flex-direction: column; padding: 11% 10% 12%;
  background: var(--accent); border-radius: 10px; transform: rotate(-3deg);
  box-shadow: 0 2px 4px rgba(22,26,46,.1), 0 28px 50px -22px rgba(22,26,46,.55);
}
.cover-sheet svg { flex: 1; width: 100%; overflow: visible; margin-bottom: 14%; }
.cover-sheet path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.cover-sheet .cv-line { stroke: #FFFFFF; stroke-width: 1.8; }
.cover-kicker { display: flex; align-items: center; gap: 6px; font-size: .62rem; font-weight: 700; color: #FFFFFF; }
.cover-kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #FFFFFF; }
.cover-title { margin-top: 8px; font-family: var(--display); font-size: clamp(1rem, 1.55vw, 1.3rem); line-height: 1.08; letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
.guide-offer-body { display: grid; gap: clamp(18px, 1.8vw, 24px); align-content: center; justify-items: start; padding: clamp(36px, 4.4vw, 72px) clamp(24px, 4.4vw, 72px); }
.guide-offer-body > .label { display: flex; align-items: center; gap: 10px; }
.guide-offer-body > .label::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }
.guide-offer-body .h2 { max-width: 16em; }
.guide-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; width: 100%; max-width: 40rem; }
.guide-points li { position: relative; padding-left: 20px; font-size: 1rem; }
.guide-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.signup { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 36rem; margin-top: 6px; }
.signup[hidden] { display: none; }
.signup input {
  flex: 1 1 240px; min-height: 52px; padding: 0 22px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(22,26,46,.22); border-radius: 999px;
  transition: border-color .2s ease;
}
.signup input::placeholder { color: var(--graphite); }
.signup input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.signup .btn { flex: none; }
.signup-note { font-size: .92rem; color: var(--graphite); max-width: 36rem; text-wrap: pretty; }
.signup-done { font-weight: 600; color: var(--accent); }
@media (max-width: 860px) {
  .guide-offer { grid-template-columns: 1fr; }
  .guide-cover { padding-block: 40px; }
  .cover-sheet { width: 190px; }
  .guide-points { grid-template-columns: 1fr; }
  .signup .btn { width: 100%; }
}

/* Closing band: a quieter second way in, for anyone not ready to book */
.closing-alt { margin-top: 6px; padding-left: 4px; font-size: .95rem; font-weight: 600; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.closing-alt:hover { color: rgba(255,255,255,.8); }