/* skipops.app marketing page.
   Brand tokens: skipops-mobile design/tokens.ts (Nocturne ramps) — keep in sync.
   Light-first (the trade works in daylight); ink bands for weight; one blurple action colour. */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  /* backgrounds */
  --bg: #e4e7f5;
  --surface: #f3f5fe;
  --raised: #fbfcff;
  --sunken: #cfd3e5;
  /* ink set (dark bands + footer, from the dark theme) */
  --ink-bg: #161826;
  --ink-surface: #232532;
  --ink-text: #e9e9ed;
  --ink-soft: #cfd3e5;
  --ink-muted: #9397ab;
  --ink-link: #b5abfc;
  --ink-action: #796cbf;
  /* text on light */
  --text: #161826;
  --soft: #3f424d;
  --muted: #595d6c;
  /* borders */
  --hairline: rgba(22, 24, 38, 0.16);
  --border-strong: #9397ab;
  --focus: #796cbf;
  /* action — one job: the thing to do next */
  --action: #5d5294;
  --action-hover: #675ca3;
  --action-pressed: #423a6a;
  --action-text: #796cbf;
  --action-tint: #e7e5fe;
  --on-action: #f5f4ff;
  /* state */
  --done: #2e7d4f;
  --done-tint: #d9f0e2;
  --on-done-tint: #14432a;
  --problem: #b3261e;
  /* waste materials (stable everywhere) */
  --w-gen: #5c6672;
  --w-gen-tint: #e2e5ea;
  --w-wood: #8a5a2b;
  --w-wood-tint: #f0e4d5;
  --w-metal: #46708e;
  --w-metal-tint: #dde8f0;
  /* type */
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* motion: tokens.ts standard easing */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  /* radii: cards+buttons 8, photos 14, sheets 20, chips pill */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-sheet: 20px;
  /* elevation: hairline edge + soft ink shadow, never stacked heavy */
  --e1: 0 1px 2px rgba(22, 24, 38, 0.06), 0 2px 8px rgba(22, 24, 38, 0.10);
  --e2: 0 2px 4px rgba(22, 24, 38, 0.08), 0 6px 18px rgba(22, 24, 38, 0.16);
  --e3: 0 4px 8px rgba(22, 24, 38, 0.10), 0 16px 40px rgba(22, 24, 38, 0.22);
  --wrap: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--action-tint); color: var(--text); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }

/* ---------- type ---------- */
h1, h2 { font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.8vw, 3.7rem); }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.3rem); margin-bottom: 14px; }
h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
p { max-width: 62ch; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--soft); }
.figure { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  text-decoration: none; cursor: pointer; border: 0;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease);
}
.btn { background: var(--action); color: var(--on-action); }
.btn:hover { background: var(--action-hover); }
.btn:active { background: var(--action-pressed); transform: scale(0.985); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); min-height: 52px; }
.btn-ghost:hover { background: var(--surface); }
.btn-ghost:active { transform: scale(0.985); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.mark {
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em;
  text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.mark i {
  /* the app icon's skip, drawn as a mask so it takes the text colour it sits on */
  width: 31px; height: 16px; background: var(--action);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='176 340 672 351'%3E%3Cpath d='M192 340h640a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-20l-88 264a33 33 0 0 1-28 23H460l152-287h-48L410 691h-82a33 33 0 0 1-28-23l-88-264h-20a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='176 340 672 351'%3E%3Cpath d='M192 340h640a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-20l-88 264a33 33 0 0 1-28 23H460l152-287h-48L410 691h-82a33 33 0 0 1-28-23l-88-264h-20a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav .btn { min-height: 46px; padding: 0 20px; font-size: 0.95rem; }

/* ---------- hero ---------- */
.hero .wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding-top: clamp(44px, 7vh, 92px); padding-bottom: clamp(44px, 7vh, 84px);
}
.hero .lede { margin-top: 18px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* hero load-in: one orchestrated stagger, ease-out, fixed duration */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-load] { animation: rise 0.7s var(--ease) both; }
  .hero [data-load='2'] { animation-delay: 90ms; }
  .hero [data-load='3'] { animation-delay: 180ms; }
  .hero [data-load='4'] { animation-delay: 300ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- sections ---------- */
section { padding-block: clamp(56px, 9vh, 104px); }
main > section + section { border-top: 1px solid var(--hairline); }
main > section.ink + section, main > section + section.ink { border-top: 0; }

/* real app screens: the phone is a dark bezel round a 390x844 screenshot */
.shot { margin: 0; width: 100%; max-width: 260px; background: var(--ink-bg); border-radius: 30px; padding: 8px; box-shadow: var(--e3); }
.shot img { width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 23px; background: var(--bg); }
.hero-phone { justify-self: center; width: min(310px, 100%); }
.hero-phone .shot { max-width: none; }
/* the home page hero is the phone tour. Wide screens: headline and buttons on the left, the
   film on the right, all above the fold. Narrow: headline, film, buttons, centred. */
.hero-tour .wrap {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); grid-template-areas: 'head film' 'cta film';
  align-content: center; row-gap: 0; padding-top: clamp(24px, 4vh, 48px); padding-bottom: clamp(32px, 5vh, 56px);
}
.hero-tour h1 { grid-area: head; align-self: end; }
.hero-tour .hero-cta { grid-area: cta; align-self: start; }
.hero-tour .tour { grid-area: film; width: 100%; max-width: min(100%, 680px, calc(100svh - 140px)); margin: 0 auto; }
@media (max-width: 860px) {
  .hero-tour .wrap { grid-template-areas: 'head' 'film' 'cta'; text-align: center; }
  .hero-tour h1 { max-width: 20ch; margin: 0 auto 8px; }
  .hero-tour .tour { max-width: min(100%, 560px); text-align: left; }
  .hero-tour .hero-cta { justify-content: center; margin-top: 8px; }
}
.hero-price { margin-top: 18px; font-size: 0.95rem; color: var(--muted); }
.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--action-text); margin-bottom: 10px; }
.sub { color: var(--soft); }

/* one idea per section: a screen and a claim, alternating sides */
.features { background: var(--surface); }
.features .wrap { display: grid; }
.feature {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 6vw, 96px); align-items: center;
  padding-block: clamp(36px, 6vw, 64px); border-top: 1px solid var(--hairline);
}
.feature:first-child { border-top: 0; padding-top: 0; }
.feature:nth-child(even) { grid-template-columns: minmax(0, 1fr) 240px; }
.feature:nth-child(even) .shot { order: 2; }
.feature .shot { max-width: 240px; justify-self: center; }
.feature-copy h2 { margin-bottom: 10px; }
.feature-copy p { color: var(--soft); font-size: 1.08rem; }
/* feature clips (30 Oct): the real app looping in a phone; the film's own background is
   --surface, so the clip sits on the section with no visible box */
.feature .clip { margin: 0; width: 100%; max-width: 300px; justify-self: center; }
.feature:nth-child(even) .clip { order: 2; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 540 / 1036; background: var(--surface); }
.feature:has(.clip) { grid-template-columns: 300px minmax(0, 1fr); }
.feature:nth-child(even):has(.clip) { grid-template-columns: minmax(0, 1fr) 300px; }
.feature-taps {
  display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--action-tint); color: var(--action); font: 500 0.8rem var(--font-mono); letter-spacing: 0.02em;
}
.feature-wide, .feature-wide:has(.clip) { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; }
.feature-wide .feature-copy { max-width: 62ch; }
.feature-wide .clip { max-width: 620px; order: 0 !important; }
.feature-wide .clip video { aspect-ratio: 1000 / 980; }
.clip-labels {
  display: flex; justify-content: space-around; width: 100%; max-width: 620px; margin-top: -14px;
  font: 500 0.78rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.planned {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px);
  padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--hairline);
}
.planned:has(> :only-child) { grid-template-columns: minmax(0, 62ch); }
.planned-item h3 { font-size: 1.25rem; margin: 10px 0 8px; }
.planned-item p:not(.soon-tag) { color: var(--soft); }
.planned .soon-tag { margin: 0; }
.also {
  list-style: none; margin: 0; padding: clamp(28px, 4vw, 44px) 0 0; border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; color: var(--soft);
}
.also b { color: var(--text); }

.soon {
  padding-top: 28px; border-top: 1px solid var(--hairline);
  color: var(--soft); max-width: 70ch;
}
.soon-tag {
  display: inline-block; margin-right: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--action-tint); color: var(--action); font-size: 0.8rem; font-weight: 700;
}

/* on every job */
.onjob { background: var(--bg); }
.onjob .wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.onjob-phone .shot { max-width: 280px; }
.onjob-copy p { color: var(--soft); margin-bottom: 14px; }

/* pays for itself: the ink band, the hard-truth moment */
.ink { background: var(--ink-bg); color: var(--ink-soft); }
.ink h2 { color: var(--ink-text); }
.sums p { color: var(--ink-soft); margin-bottom: 14px; }
.sums .verdict { color: var(--ink-text); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem); max-width: 54ch; }

/* price */
.price .wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.price-figure {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.04em;
  font-size: clamp(3.4rem, 7.5vw, 5.6rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.price-figure small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--muted); margin-top: 12px; letter-spacing: 0; }
.includes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 8px 0 32px; }
.includes li { display: flex; gap: 10px; align-items: flex-start; color: var(--soft); }
.includes svg { flex: none; margin-top: 2px; color: var(--done); }

/* form */
.get { background: var(--surface); }
.get .wrap { max-width: 620px; }
.get p.sub { color: var(--soft); margin-bottom: 30px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 7px; }
.field input {
  width: 100%; min-height: 56px; padding: 0 16px;
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font: inherit;
}
.field input::placeholder { color: var(--muted); }
.field input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--action-tint); }
.get .btn { width: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.92rem; color: var(--muted); margin-top: 14px; }
.form-error { display: none; color: var(--problem); font-weight: 600; margin-top: 14px; }
.form-error.show { display: block; }
.sorted {
  display: none; background: var(--done-tint); border: 1px solid rgba(46, 125, 79, 0.35);
  border-radius: var(--r-lg); padding: 34px; color: var(--on-done-tint);
}
.sorted.show { display: block; }
.sorted h3 { font-size: 1.4rem; }
.sorted p { color: var(--on-done-tint); }

/* footer */
footer { background: var(--ink-bg); color: var(--ink-muted); padding-block: 48px; }
footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
footer p, footer a { color: var(--ink-muted); font-size: 0.95rem; }
footer a { color: var(--ink-link); text-underline-offset: 3px; }
footer .mark { font-size: 1rem; margin-bottom: 8px; color: var(--ink-text); }
footer .mark i { background: var(--ink-action); }

/* ---------- scroll reveals (JS adds html.js; no JS = everything visible) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(18px); }
  html.js .reveal.in {
    opacity: 1; transform: none;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: var(--d, 0ms);
  }
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .feature:has(.clip), .feature:nth-child(even):has(.clip) { grid-template-columns: minmax(0, 1fr) 240px; }
  .feature .clip, .feature:nth-child(even) .clip { order: 2; max-width: 240px; }
  .feature-wide, .feature-wide:has(.clip) { grid-template-columns: 1fr; }
  .feature-wide .clip { max-width: 560px; }
  .feature, .feature:nth-child(even) { grid-template-columns: minmax(0, 1fr) 200px; gap: 28px; }
  .feature .shot, .feature:nth-child(even) .shot { order: 2; max-width: 200px; }
  .onjob .wrap { grid-template-columns: 1fr; }
  .onjob-phone .shot { margin: 0 auto; max-width: 240px; }
  .price .wrap { grid-template-columns: 1fr; }
  .includes { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
  .feature:has(.clip), .feature:nth-child(even):has(.clip) { grid-template-columns: 1fr; }
  .feature .clip, .feature:nth-child(even) .clip { max-width: 290px; }
  .feature-wide .clip { max-width: 100%; }
  .planned, .also { grid-template-columns: 1fr; }
  .feature .shot, .feature:nth-child(even) .shot { order: 2; max-width: 250px; }
}

/* "You're in" page (signup-done.html), 28 Oct: the turntable scene, then three steps */
.welcome { padding-block: 40px 72px; }
.welcome .wrap { max-width: 720px; }
.welcome h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; text-wrap: balance; }
.welcome-sub { color: var(--soft); font-size: 1.1rem; margin-top: 10px; }
.welcome-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 26px; }
.welcome-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.step-num {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--action); color: var(--on-action); font-weight: 800; font-variant-numeric: tabular-nums;
}
.step-body { min-width: 0; }
.step-body h3 { font-size: 1.25rem; line-height: 1.3; min-height: 40px; padding-top: 7px; margin-bottom: 4px; }
.step-body p { color: var(--soft); }
.get-row { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; margin-top: 8px; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 18px 8px 14px;
  background: var(--ink-bg); color: var(--ink-text); border-radius: 10px; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; line-height: 1.15;
}
.store:hover { background: var(--ink-surface); }
.store:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.store svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.store small { display: block; font-weight: 600; font-size: 0.72rem; color: var(--ink-soft); }
.scan { display: none; align-items: center; gap: 14px; }
.scan svg { width: 104px; height: 104px; flex: none; border-radius: var(--r-md); border: 1px solid var(--hairline); }
.scan p { font-size: 0.95rem; max-width: 18ch; }
@media (hover: hover) and (pointer: fine) and (min-width: 720px) { .scan { display: flex; } }

/* The phone tour on "You're in" (29 Oct). The film is square and drawn on the page colour, so
   it has no frame of its own. The phone swaps sides on every turn; each line shows on the side
   it has just left, timed by tour.js. Container units keep the words in proportion to the film. */
.welcome .welcome-sub { margin-bottom: 18px; }
.tour { position: relative; margin: 0 auto 18px; aspect-ratio: 1; max-width: min(100%, 560px); container-type: inline-size; background: var(--bg); }
.tour-film {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain;
  /* feather the film's own edges into the page, so no browser's colour handling can draw a box */
  -webkit-mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.tour-loop { visibility: hidden; }
.tour.looping .tour-loop { visibility: visible; }
.tour.looping #tour-intro { visibility: hidden; }
.tour-line {
  position: absolute; top: 50%; width: 44%; margin: 0; transform: translateY(-50%);
  font-weight: 800; font-size: clamp(1.2rem, 6.6cqw, 2.5rem); line-height: 1.08; letter-spacing: -0.025em;
  color: var(--text); text-wrap: balance; pointer-events: none;
}
.tour-line[data-side="left"] { left: 4%; }
.tour-line[data-side="right"] { right: 4%; }
.tour-line em { font-style: normal; color: var(--action); }
/* the last line's plain instruction, which stays on with the endless last scene */
.tour-sub {
  display: block; margin-top: 0.8em; font-weight: 600; font-size: clamp(0.9rem, 3.2cqw, 1.2rem);
  line-height: 1.3; letter-spacing: 0; color: var(--soft);
}
/* the small label over each line, with a short rule that draws in from the left */
.tour-tag {
  display: block; width: fit-content; margin-bottom: 0.7em; padding-top: 0.75em; position: relative;
  font-weight: 700; font-size: clamp(0.78rem, 2.7cqw, 1rem);
  letter-spacing: 0.01em; line-height: 1.2; color: var(--action-text);
}
.tour-tag::before {
  content: ''; position: absolute; left: 0; top: 0; width: 2.4em; height: 3px; border-radius: 2px;
  background: var(--action-text); transform: scaleX(0); transform-origin: left;
}
/* tour.js wraps every word in a mask (.w) so it can rise in from below and lift out above */
.tour-line .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.02em 0.1em; margin: -0.04em -0.02em -0.1em; }
.tour-line .w > span { display: inline-block; transform: translateY(110%); }
.tour-line.on .w > span, .tour-line.on .tour-tag::before { transform: none; }
.tour-line.on .w > span { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 55ms); }
.tour-line.on .tour-tag::before { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.tour-line.out .w > span { transform: translateY(-110%); transition: transform 0.55s cubic-bezier(0.7, 0, 0.84, 0) calc(var(--i) * 35ms); }
.tour-line.out .tour-tag::before { transform: scaleX(0); transform-origin: right; transition: transform 0.45s cubic-bezier(0.7, 0, 0.84, 0); }
.tour-line.snap .w > span, .tour-line.snap .tour-tag::before { transition: none !important; }
.tour + .stores { justify-content: center; margin-bottom: 8px; }
.next { margin-top: 44px; }
.next > h2 { font-size: 1.5rem; line-height: 1.2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tour-line .w > span, .tour-line .tour-tag::before { transition: none !important; } }
/* home page: Get SkipOps goes to sign-up; the enquiry form folds away under "Rather talk first?" (29 Oct) */
.talk { margin-top: 28px; }
.talk summary { cursor: pointer; color: var(--action-text); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.talk summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.talk[open] summary { margin-bottom: 18px; }