/* ============================================================
   Emily Williams — Signature Programme
   Brand system replicated from emilywilliams.com (Showit)
   ============================================================ */

/* ---- Fonts (self-hosted Showit woffs, per spec) ---- */
@font-face { font-family: 'Editors Note Light';  src: url('https://static.showit.co/file/g9ce4nGNRNGgjXCXAkCosw/shared/editor_snote-light.woff') format('woff');  font-display: swap; }
@font-face { font-family: 'Editors Note Regular'; src: url('https://static.showit.co/file/TvhrrI7NQuaBtkycz2Vf9Q/shared/editors_note-regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Neue Swiss Regular';  src: url('https://static.showit.co/file/E3nTxSilS3G1Ioh4QscHoA/shared/neueswiss-regular.woff') format('woff');  font-display: swap; }
@font-face { font-family: 'Neue Swiss Medium';   src: url('https://static.showit.co/file/Nd7xDO0NQQix43LL8fkNbg/shared/neueswiss-medium.woff') format('woff');   font-display: swap; }
@font-face { font-family: 'Neue Swiss Semibold'; src: url('https://static.showit.co/file/jWTbaNw1SF-2OO_R30YDww/shared/neueswiss-semibold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Neue Swiss Bold';     src: url('https://static.showit.co/file/pBqxwXJLSbC9uk_GG0rgog/shared/neueswiss-bold.woff') format('woff');     font-display: swap; }
@font-face { font-family: 'Aperitif Serif Italic'; src: url('https://static.showit.co/file/cDJ6-EilsIeRmTbTcf2A3Q/shared/aperitifserif-italic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Chic Societe Script'; src: url('https://static.showit.co/file/Jmg9m0ObRte7TbO4pWwW-A/shared/chicsocietescript.woff') format('woff'); font-display: swap; }

/* ---- Font stacks ---- */
/* serif display  : 'Editors Note Light', Georgia, 'Times New Roman', serif
   sans           : 'Neue Swiss …', 'Helvetica Neue', Helvetica, Arial, sans-serif
   mono           : 'IBM Plex Mono', 'Courier New', monospace                    */

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #000000;
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Layout primitives
   ============================================================ */

.section { padding: 150px 0; }

.section--black { background: #000000; color: #FFFFFF; }
.section--white { background: #FFFFFF; color: #000000; }

/* Signature arched cap: white panel cutting up into the black section above */
.arch {
  position: relative;
  z-index: 2;
  border-radius: 70px 70px 0 0;
  margin-top: -120px;
}

/* Black sections that sit under an arch get extra room so the
   overlap never eats their content */
.pre-arch { padding-bottom: 270px; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.center { text-align: center; }

/* ============================================================
   Type system
   ============================================================ */

.eyebrow {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 32px;
  text-transform: uppercase;
  color: #D39816;
  margin-bottom: 32px;
}

.title {
  font-family: 'Editors Note Light', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.title--display { font-size: clamp(64px, 10vw, 150px); }
.title--section { font-size: clamp(48px, 6.5vw, 94px); }

/* Live-site idiom: lowercase connector words set in the italic accent face.
   The face is italic by design — keep font-style normal to avoid a synthetic
   double slant. */
.accent {
  font-family: 'Aperitif Serif Italic', Georgia, 'Times New Roman', serif;
  font-style: normal;
}

a { color: inherit; }

/* Gold in-paragraph links */
.section--white a:not(.btn-primary),
.programme-intro a { color: #D39816; }

/* ============================================================
   Buttons (verbatim from her CSS + hover/reset affordances)
   ============================================================ */

.btn-primary {
  display: inline-block;
  padding: 10px 14px;
  border: 0;
  background: #D39816;
  border-radius: 10px;
  color: #000000;
  font-family: 'Neue Swiss Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
  transition-duration: .5s;
  transition-property: opacity;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary:hover { opacity: .8; }

.btn-secondary {
  display: inline-block;
  padding: 10px 14px;
  border: 2px solid currentColor;
  background: transparent;
  border-radius: 10px;
  font-family: 'Neue Swiss Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition-duration: .5s;
  transition-property: border-color, opacity;
}

.btn-small { font-size: 14px; }

/* ============================================================
   1. Hero
   ============================================================ */

.hero { padding-top: 0; padding-bottom: 100px; }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px 0;
}

.nav-logo { display: block; transition: opacity .5s; }

.nav-logo img {
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

.nav-logo:hover { opacity: .7; }

.hero-content {
  text-align: center;
  padding-top: 110px;
}

.hero-content .title { margin-bottom: 44px; }

.hero-sub {
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.5;
  color: #FFFFFF;
  max-width: 680px;
  margin: 0 auto 52px;
}

.portrait {
  width: 446px;
  max-width: 100%;
  aspect-ratio: 446 / 548;
  border-radius: 20px;
  background: #C5C4C2;
  overflow: hidden;
  margin: 110px auto 0;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

/* ============================================================
   The programme (offer + intro)
   ============================================================ */

.programme-intro {
  font-family: 'Neue Swiss Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.5;
  margin-top: 56px;
}

.programme-intro p + p { margin-top: 32px; }

.offer-list {
  max-width: 820px;
  margin: 100px auto 0;
  display: flex;
  flex-direction: column;
  gap: 84px;
  text-align: left;
}

.offer-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 28px;
}

.offer-item .num {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 20px;
  color: #D39816;
  padding-top: 10px;
}

.offer-item h3 {
  font-family: 'Editors Note Light', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.offer-item p {
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: #FFFFFF;
}

.cta-kicker {
  font-family: 'Editors Note Light', Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  margin-top: 96px;
}

.cta-kicker + .section-cta { margin-top: 28px; }

.invest-stack {
  list-style: none;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.invest-stack li {
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  padding-left: 40px;
  position: relative;
}

.invest-stack li + li { margin-top: 18px; }

.invest-stack li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: #D39816;
}

.invest-stack .gold {
  color: #D39816;
  font-family: 'Neue Swiss Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.bonus-label {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #D39816;
  margin: 48px 0 24px;
}

.invest-note {
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #C5C4C2;
}

.investment + .invest-note { margin-top: 22px; }

.investment {
  margin-top: 110px;
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.5;
}

.investment .gold {
  color: #D39816;
  font-family: 'Neue Swiss Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.section-cta { margin-top: 52px; }

/* ============================================================
   Press strip — her homepage "as seen in" pattern, static
   ============================================================ */

.press-strip {
  background: #000000;
  color: #FFFFFF;
  padding: 0 0 40px;
}

.press-label {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C5C4C2;
  margin-bottom: 28px;
}

.press-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 72px;
}

.press-logos img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Wordmark proportions vary wildly — normalize perceived size per logo */
.press-logos img[alt="Inc."] { height: 34px; }
.press-logos img[alt="Money"] { height: 36px; }
.press-logos img[alt="Success"] { height: 40px; }
.press-logos img[alt="Huffington Post"] { height: 36px; }

/* ============================================================
   Mirror
   ============================================================ */

.mirror-line {
  font-family: 'Editors Note Light', Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.15;
  max-width: 900px;
  margin: 0 auto;
}

.mirror-copy {
  font-family: 'Neue Swiss Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 21px;
  line-height: 1.6;
  margin-top: 48px;
}

.mirror-copy p + p { margin-top: 28px; }

/* ============================================================
   Testimonials — sideways scroll
   ============================================================ */

/* One testimonial per view — full-width slides, snap-centered, so nothing
   ever clips mid-sentence at the edge */
.testi-scroll {
  display: flex;
  margin-top: 40px;
  gap: 96px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.testi-scroll::-webkit-scrollbar { display: none; }

.testi-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  text-align: center;
  margin: 0;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #C5C4C2;
  margin: 0 auto 28px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #000000;
}

.avatar--photo {
  background: none;
  overflow: hidden;
}

.avatar--photo {
  overflow: hidden;
}

.avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Face-zoom crops for near-square source photos */

.testi-card blockquote {
  max-width: 880px;
  margin: 0 auto;
}

.testi-card blockquote p {
  font-family: 'Editors Note Light', Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.2;
}

.attrib {
  margin-top: 32px;
  font-family: 'Neue Swiss Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.testi-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

.arrow-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #D39816;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: opacity .5s;
}

.arrow-btn:hover { opacity: .8; }

.arrow-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}

.arrow-btn--next::after { transform: translate(-70%, -50%) rotate(-45deg); }
.arrow-btn--prev::after { transform: translate(-30%, -50%) rotate(135deg); }

/* ============================================================
   About Emily
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1040px;
  margin: 88px auto 0;
}

.about-grid .portrait {
  width: 100%;
  margin: 0;
}

.about-copy {
  font-family: 'Neue Swiss Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.5;
}

.about-copy p + p { margin-top: 32px; }

/* ============================================================
   Methodology — copied from Emily's Showit preview
   (three parts: venn / dark pattern / why-all-three)
   ============================================================ */

.method-grid {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 80px;
  align-items: center;
}

.method-grid--b { grid-template-columns: 400px 1fr; gap: 96px; }
.method-grid--c { grid-template-columns: 1fr 460px; gap: 96px; }

.method-title {
  font-size: clamp(44px, 4.8vw, 68px);
  line-height: 1.05;
  margin-bottom: 40px;
}

.method-title--caps { font-size: clamp(34px, 3.6vw, 52px); }

.method-text p {
  font-family: 'Neue Swiss Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  max-width: 560px;
}

.method-text p + p { margin-top: 28px; }

/* Venn — three overlapping circles, like the Showit original */
.venn {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 560 / 500;
}

.circle {
  position: absolute;
  width: 51%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle span {
  font-family: 'Neue Swiss Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000000;
}

.circle--desire { left: 0;   top: 0;   background: #E7E1DA; }
.circle--belief { left: 49%; top: 2%;  background: #F1EEE9; }
.circle--action { left: 22%; top: 38%; background: #F6EFE8; }

.venn-note {
  position: absolute;
  left: -8%;
  bottom: 4%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.venn-note .script {
  font-family: 'Chic Societe Script', 'Aperitif Serif Italic', Georgia, serif;
  font-size: 44px;
  line-height: 1;
  transform: rotate(-9deg);
  white-space: nowrap;
}

.venn-arrow { margin-bottom: 14px; }

/* Dark pattern band */
.pattern-title {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.05;
  margin-bottom: 44px;
}

.pattern p {
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  max-width: 640px;
  color: #FFFFFF;
}

.pattern p + p { margin-top: 24px; }

/* Photos — square-cornered like the originals */
.photo-ph {
  background: #C5C4C2;
  width: 100%;
  overflow: hidden;
}

.photo-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-ph--laptop { aspect-ratio: 4 / 7; }
.photo-ph--tall   { aspect-ratio: 1 / 2; }

/* ============================================================
   FAQ
   ============================================================ */

.faq-list {
  max-width: 820px;
  margin: 88px auto 0;
  text-align: left;
}

.faq-list details {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 30px 0;
}

.faq-list details:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }

.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: 'Editors Note Light', Georgia, 'Times New Roman', serif;
  font-size: 26px;
  line-height: 1.2;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 22px;
  color: #D39816;
}

.faq-list details[open] summary::after { content: '\2013'; }

.faq-list details p {
  margin-top: 20px;
  max-width: 680px;
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #FFFFFF;
}

/* ============================================================
   VSL frame (lives in the hero)
   ============================================================ */

.video-frame {
  position: relative;
  max-width: 880px;
  margin: 90px auto 0;
  aspect-ratio: 16 / 9;
  background: #111;
  border: 1px solid #C5C4C2;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #D39816;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: opacity .5s;
}

.play:hover { opacity: .8; }

.play::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #000;
}

.video-caption {
  margin-top: 30px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #D39816;
  text-align: center;
}

/* ============================================================
   Final CTA
   ============================================================ */

/* On white sections the gold fill reads muddy — flip to black */
.section--white .btn-primary {
  background: #000000;
  color: #FFFFFF;
}

.final-sub {
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.5;
  margin-top: 48px;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: #000000;
  color: #FFFFFF;
  padding: 150px 0 60px;
  overflow: hidden;
}

.tagline {
  font-family: 'Editors Note Light', Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.3;
}

/* Near edge-to-edge of the viewport like the live site — breaks out of the
   container, centered; the footer's overflow:hidden crops any spill */
.wordmark {
  font-family: 'Editors Note Regular', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(48px, 11vw, 160px);
  letter-spacing: 0.01em;
  line-height: 1;
  margin-top: 56px;
  white-space: nowrap;
  width: max-content;
  margin-left: 50%;
  transform: translateX(-50%);
}

.legal {
  margin-top: 64px;
  font-family: 'Neue Swiss Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(159, 157, 154, 0.5);
}

.legal a {
  color: #D39816;
  text-decoration: none;
}

/* ============================================================
   Mobile — single breakpoint per spec
   ============================================================ */

@media (max-width: 768px) {

  .section { padding: 90px 0; }
  .hero { padding-top: 0; }
  .pre-arch { padding-bottom: 165px; }

  .arch {
    border-radius: 30px 30px 0 0;
    margin-top: -60px;
  }

  .container { padding: 0 24px; }

  .eyebrow { font-size: 14px; margin-bottom: 24px; }

  .nav { padding: 24px 0; }
  .nav-logo img { height: 36px; }

  .hero-content { padding-top: 70px; }
  .hero-content .title { margin-bottom: 32px; }

  .hero-sub,
  .programme-intro,
  .investment,
  .final-sub {
    font-size: 16px;
    line-height: 1.4;
  }

  .hero-sub { margin-bottom: 40px; }

  .btn-primary,
  .btn-secondary { font-size: 14px; }

  .programme-intro { margin-top: 40px; }
  .programme-intro p + p { margin-top: 24px; }

  .offer-list { margin-top: 64px; gap: 56px; }

  .offer-item {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .offer-item .num { padding-top: 0; }
  .offer-item h3 { font-size: 28px; margin-bottom: 14px; }
  .offer-item p { font-size: 16px; line-height: 1.4; }

  .press-strip { padding-bottom: 24px; }
  .press-logos { gap: 20px 36px; }
  .press-logos img { height: 22px; }

  .cta-kicker { margin-top: 56px; }
  .cta-kicker + .section-cta { margin-top: 20px; }
  .invest-stack li { padding-left: 30px; }
  .invest-stack li + li { margin-top: 12px; }
  .bonus-label { margin: 36px 0 18px; }
  .invest-note { font-size: 14px; }
  .investment + .invest-note { margin-top: 16px; }

  .investment { margin-top: 72px; }
  .section-cta { margin-top: 40px; }

  .mirror-copy { font-size: 16px; line-height: 1.5; margin-top: 32px; }
  .mirror-copy p + p { margin-top: 20px; }

  .testi-scroll { margin-top: 24px; gap: 48px; }
  .avatar { width: 64px; height: 64px; margin-bottom: 24px; font-size: 12px; }
  .attrib { margin-top: 24px; font-size: 13px; }
  .testi-nav { margin-top: 44px; }
  .arrow-btn { width: 48px; height: 48px; }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 56px;
  }
  .about-grid .portrait { max-width: 340px; margin: 0 auto; }
  .about-copy { font-size: 16px; line-height: 1.4; }
  .about-copy p + p { margin-top: 24px; }

  .method-grid,
  .method-grid--b,
  .method-grid--c {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .method-grid--b .photo-ph { order: 2; }
  .method-title { margin-bottom: 28px; }
  .method-text p { font-size: 16px; line-height: 1.5; }
  .method-text p + p { margin-top: 22px; }
  .venn { margin: 0 auto; max-width: 420px; }
  .circle span { font-size: 13px; }
  .venn-note { left: 0; bottom: 2%; gap: 8px; }
  .venn-note .script { font-size: 30px; }
  .venn-arrow { width: 64px; height: 36px; margin-bottom: 10px; }
  .pattern-title { margin-bottom: 30px; }
  .pattern p { font-size: 18px; }
  .pattern p + p { margin-top: 18px; }
  .photo-ph--laptop { aspect-ratio: 4 / 5; }
  .photo-ph--tall { aspect-ratio: 4 / 5; max-width: 420px; margin: 0 auto; }

  .faq-list { margin-top: 56px; }
  .faq-list details { padding: 22px 0; }
  .faq-list summary { font-size: 20px; }
  .faq-list details p { font-size: 16px; line-height: 1.4; }

  .press-logos img[alt="Inc."] { height: 25px; }
  .press-logos img[alt="Money"] { height: 26px; }
  .press-logos img[alt="Success"] { height: 29px; }
  .press-logos img[alt="Huffington Post"] { height: 26px; }

  .video-frame { margin-top: 56px; }
  .play { width: 64px; height: 64px; }
  .play::after { border-width: 10px 0 10px 16px; }
  .video-caption { margin-top: 22px; font-size: 11px; }

  .final-sub { margin-top: 32px; }

  .footer { padding: 100px 0 40px; }
  .wordmark { margin-top: 40px; }
  .legal { margin-top: 44px; font-size: 10px; }
}