/*
  Garlic Media landing page.
  Built on the Garlic Media design system (Sky and cream, October 2026):
  a sky ground, navy for everything people read, cream paper, one butter highlight per frame.
  The hand-made feel comes from three things only: the handwritten display face,
  cut-paper illustrations and crayon marks. No drop shadows, no gradients.
*/

/* Shantell Sans is cut down to the one setting the page uses (weight 700, informality 60, bounce 25),
   which takes it from 153 KB to 57 KB. README says how to cut it again for other settings. */
@font-face {
  font-family: "Shantell Sans";
  src: url("fonts/shantell-sans.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Palette */
  --sky: #7cc4ff;
  --navy: #06213f;
  --cream: #fff7ea;
  --butter: #ffe7b8;

  /* Semantic tokens, Day theme */
  --surface: var(--sky);
  --surface-raised: var(--cream);
  --ink: var(--navy);
  --ink-muted: #1e3f66;
  --primary: var(--navy);
  --on-primary: var(--cream);
  --primary-hover: #0e3260;
  --accent: var(--butter);
  --on-accent: var(--navy);
  --line: #2f5c8a;
  --line-soft: #06213f2e;
  --focus-ring: var(--navy);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Corners */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Type */
  --font-display: "Shantell Sans", ui-rounded, "Chalkboard SE", "Comic Sans MS", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --hand: "INFM" 60, "BNCE" 25;

  /* Motion: quick and soft */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --wrap: 1160px;
  --gutter: var(--space-4);
  --section-y: var(--space-8);

  /* Paper grain, drawn once and tiled */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .13 0 0 0 0 .25 0 0 0 -1.6 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  /* The same grain, lighter, so cream cards read as paper rather than flat screen boxes */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .13 0 0 0 0 .25 0 0 0 -1.6 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");

  color-scheme: light;
}

@media (min-width: 720px) {
  :root {
    --gutter: var(--space-6);
  }
}

/* Night tokens for navy bands and the featured package. Same palette, swapped roles. */
.night {
  --surface: var(--navy);
  --surface-raised: #0e3260;
  --ink: var(--cream);
  --ink-muted: #b9cfe6;
  --primary: var(--sky);
  --on-primary: var(--navy);
  --primary-hover: var(--cream);
  --line: #6f95c4;
  --line-soft: #fff7ea29;
  --focus-ring: var(--butter);
  background-color: var(--surface);
  color: var(--ink);
}

/* Day tokens again, for cream paper that sits inside a navy band. */
.day {
  --surface: var(--sky);
  --surface-raised: var(--cream);
  --ink: var(--navy);
  --ink-muted: #1e3f66;
  --primary: var(--navy);
  --on-primary: var(--cream);
  --primary-hover: #0e3260;
  --line: #2f5c8a;
  --line-soft: #06213f2e;
  --focus-ring: var(--navy);
  color: var(--ink);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  margin: 0;
  background-color: var(--surface);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.mark,
.swipe,
.tape,
.step-arrow {
  max-width: none;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

/* Fewer paragraphs ending on a single word */
p {
  text-wrap: pretty;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Cursor ---------- */
/* The garlic is the cursor, upright like the logo: navy everywhere, butter over anything you can click.
   The click lands on the tip of the sprout (10, 2). Mouse and trackpad only.
   High-contrast mode keeps the system cursor. */

button,
summary {
  cursor: pointer;
}

@media (any-pointer: fine) and (forced-colors: none) {
  html {
    cursor: url("cursor.png") 10 2, auto;
    cursor: -webkit-image-set(url("cursor.png") 1x, url("cursor@2x.png") 2x) 10 2, auto;
    cursor: image-set(url("cursor.png") 1x, url("cursor@2x.png") 2x) 10 2, auto;
  }

  a,
  button,
  summary,
  select {
    cursor: url("cursor-pointer.png") 10 2, pointer;
    cursor: -webkit-image-set(url("cursor-pointer.png") 1x, url("cursor-pointer@2x.png") 2x) 10 2, pointer;
    cursor: image-set(url("cursor-pointer.png") 1x, url("cursor-pointer@2x.png") 2x) 10 2, pointer;
  }

  input[type="email"],
  input[type="text"],
  textarea {
    cursor: text;
  }

  button:disabled {
    cursor: progress;
  }
}

/* ---------- Scrollbar ---------- */
/* A navy pill on the sky ground. Chrome, Edge and Safari draw the pill; Firefox takes the two colours. */

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background-color: #7cc4ff;
  }

  ::-webkit-scrollbar-thumb {
    min-height: 56px;
    border: 4px solid #7cc4ff;
    border-radius: 999px;
    background-color: #06213f;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #2f5c8a;
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: #06213f;
  }
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: #06213f #7cc4ff;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -200px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

/* ---------- Layout ---------- */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: 720px;
  margin-bottom: var(--space-7);
}

.section-head .body-l {
  max-width: 56ch;
  color: var(--ink-muted);
}

/* ---------- Type ---------- */

.display-xl,
.display-l,
.display-m,
.display-s {
  font-family: var(--font-display);
  font-variation-settings: var(--hand);
  text-wrap: balance;
}

.display-xl {
  font-weight: 700;
  font-size: clamp(48px, 6.6vw, 72px);
  line-height: 1.06;
}

.display-l {
  font-weight: 700;
  font-size: clamp(38px, 4.8vw, 52px);
  line-height: 1.12;
}

.display-m {
  font-weight: 600;
  font-size: 36px;
  line-height: 42px;
}

.display-s {
  font-weight: 600;
  font-size: 26px;
  line-height: 32px;
}

.heading-1 {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.heading-2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.heading-3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
}

.body-l {
  font-size: 18px;
  line-height: 28px;
}

.small {
  font-size: 14px;
  line-height: 20px;
}

.label {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.02em;
}

.caption {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

.muted {
  color: var(--ink-muted);
}

/* ---------- Buttons, badges, stickers ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  font: 600 15px/20px var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform 200ms var(--ease-out);
}

.btn:hover .icon-nudge {
  transform: translateX(3px);
}

.btn-primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
}

.btn-secondary {
  background-color: var(--cream);
  color: var(--navy);
}

.btn-secondary:hover {
  box-shadow: inset 0 0 0 2px var(--navy);
}

.btn-ghost {
  background-color: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.btn-ghost:hover {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font: 600 13px/16px var(--font-sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-cream {
  background-color: var(--cream);
  color: var(--navy);
}

.badge-accent {
  background-color: var(--accent);
  color: var(--on-accent);
}

.badge-strong {
  background-color: var(--primary);
  color: var(--on-primary);
}

/* Marks content that is a stand-in until the real thing is supplied.
   Remove the element once the real content is in. */
.sample-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font: 600 12px/16px var(--font-sans);
  letter-spacing: 0.02em;
}

/* ---------- Header ---------- */
/* One navy bar. From 1024px wide it holds the logo, the section links and both buttons.
   Narrower than that, the links and buttons fold into a menu behind a button, and the menu
   hangs from the bar as a navy panel. site.js opens and closes it. */

.site-header {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
  z-index: 50;
  margin-top: var(--space-3);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: 32px;
  background-color: var(--navy);
  color: var(--cream);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--cream);
}

.nav-logo svg {
  width: auto;
  height: 24px;
}

.nav-links {
  padding: 0;
  list-style: none;
}

.nav-links a {
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.nav-links a:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--butter);
}

.nav-actions {
  display: flex;
  gap: var(--space-2);
}

.nav .btn {
  min-height: 48px;
  border-radius: var(--radius-pill);
}

.nav :focus-visible {
  outline-color: var(--butter);
}

/* The menu button: cream like "Book a call", bars when closed, a cross when open */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--cream);
  color: var(--navy);
  transition: box-shadow 200ms var(--ease-out);
}

.nav-toggle:hover {
  box-shadow: inset 0 0 0 2px var(--navy);
}

.nav-toggle .icon {
  width: 24px;
  height: 24px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-open,
.nav-toggle[aria-expanded="false"] .nav-toggle-close {
  display: none;
}

@media (max-width: 1023.98px) {
  .nav-menu {
    display: none;
  }

  /* Open, the bar squares off its bottom corners and the panel carries on below it */
  .nav.is-open {
    border-radius: 32px 32px 0 0;
  }

  .nav.is-open .nav-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    display: grid;
    gap: var(--space-5);
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) var(--space-5) var(--space-5);
    border-radius: 0 0 32px 32px;
    background-color: var(--navy);
    animation: nav-unroll 220ms var(--ease-out);
  }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-top: 1.5px solid var(--line-soft);
    font: 600 18px/24px var(--font-sans);
  }

  .nav-actions {
    flex-wrap: wrap;
  }

  .nav-actions .btn {
    flex: 1 1 0;
    padding-inline: var(--space-4);
  }
}

@keyframes nav-unroll {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0);
  }
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-5);
  }

  .nav-links {
    display: flex;
    gap: var(--space-6);
    margin-inline: auto;
  }

  .nav-links a {
    display: inline-block;
    padding-block: var(--space-2);
    font: 600 15px/20px var(--font-sans);
  }
}

/* ---------- Opener (top of the page) ---------- */
/* The results open the page, so their heading is the page's h1: first a line on what
   Garlic Media makes, then the hook. */

.opener-title {
  display: grid;
  gap: var(--space-3);
  font-weight: inherit;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 700 15px/20px var(--font-sans);
  letter-spacing: 0.01em;
}

.eyebrow svg {
  width: 19px;
  height: 18px;
  flex: none;
}

/* ---------- Hero ---------- */

.hero-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero-copy {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.hero-title {
  display: grid;
  gap: var(--space-4);
  font-weight: inherit;
}

.hero-hook {
  display: block;
}

.hero-kicker {
  display: block;
  max-width: 24ch;
}

.hero-lead {
  max-width: 50ch;
  color: var(--ink-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-art {
  width: min(100%, 340px);
  justify-self: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--space-7);
  }

  .hero-art {
    width: min(100%, 440px);
    justify-self: end;
  }
}

/* A crayon underline drawn behind one word */
.marked {
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}

.marked .mark {
  position: absolute;
  left: -4%;
  bottom: 0.02em;
  z-index: -1;
  width: 108%;
  height: 0.42em;
  overflow: visible;
}

.mark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 15;
  stroke-linecap: round;
}

/* ---------- Results ---------- */

.results {
  padding-top: var(--space-7);
}

.result-list {
  display: grid;
  gap: var(--space-8);
}

.result {
  display: grid;
  gap: var(--space-6);
}

.result-pair {
  display: grid;
  gap: var(--space-3);
  align-items: center;
}

.shot {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  background-image: var(--paper);
}

.shot figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-inline: var(--space-1);
}

.shot figcaption span:last-child {
  color: var(--ink-muted);
}

/* A strip of butter tape holding a paper piece to the page */
.tape {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 1;
  width: 92px;
  height: 28px;
  transform: translateX(-50%) rotate(-4deg);
  pointer-events: none;
}

.shot-after .tape,
.work-grid li:nth-child(even) .tape {
  transform: translateX(-50%) rotate(3deg);
}

/* Taped screenshots sit a little crooked, the way they would on a real wall */
.shot-before {
  rotate: -1deg;
}

.shot-after {
  rotate: 0.6deg;
}

/* The profile screenshot itself, cropped to the profile, on Instagram's own dark ground.
   Locked: the image takes no pointer events, so a right-click or long-press lands on the card behind it
   and the browser offers no "Save image" or "Copy image", and it can't be dragged or selected.
   (Nothing stops a screenshot; this only takes away the easy ways.) */
.shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background-color: #0d1014;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.shot-img {
  position: relative;
}

/* Butter crayon underline below the follower count. Each one is placed in % of its
   screenshot with --x, --y, --w and --h, so it stays put at every width. */
.swipe {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  overflow: visible;
  pointer-events: none;
}

.swipe path {
  fill: none;
  stroke: var(--butter);
  stroke-width: 3.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.result-arrow {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
}

.result-arrow svg {
  width: 56px;
  height: 64px;
  overflow: visible;
}

.crayon-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quote {
  position: relative;
  display: grid;
  gap: var(--space-4);
  max-width: 64ch;
  padding-left: 52px;
}

/* A big handwritten quote mark instead of the small typed ones */
.quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -6px;
  font: 700 76px/1 var(--font-display);
  font-variation-settings: var(--hand);
  color: var(--navy);
}

.quote blockquote p {
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.45;
  text-wrap: pretty;
}

.quote blockquote strong {
  font-weight: 800;
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-muted);
}

.quote figcaption b {
  color: var(--ink);
  font-weight: 700;
}

.quote-pic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background-color: var(--cream);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

@media (min-width: 820px) {
  .result-pair {
    grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
    gap: var(--space-2);
  }

  .result-arrow svg {
    width: 104px;
    height: 56px;
  }

  .result-arrow .arrow-down {
    display: none;
  }
}

@media (max-width: 819.98px) {
  .result-arrow .arrow-right {
    display: none;
  }
}

/* ---------- What you get ---------- */

.panel {
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  background-image: var(--paper);
}

.panel .section-head {
  margin-bottom: var(--space-7);
}

.steps {
  display: grid;
  gap: var(--space-7);
}

.step {
  position: relative;
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.step-art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--sky);
}

.step-art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.step-num {
  color: var(--ink-muted);
}

.step p:last-child {
  max-width: 32ch;
  color: var(--ink-muted);
}

/* Crayon arrows that walk from one step to the next */
.step-arrow {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.step-arrow.to-next {
  display: none;
}

.step-arrow.to-below {
  left: 50%;
  bottom: calc(-1 * var(--space-7) + 2px);
  width: 40px;
  height: 44px;
  transform: translateX(-50%);
}

.step:last-child .step-arrow {
  display: none;
}

.steps-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
}

@media (min-width: 640px) {
  .panel {
    padding: var(--space-8) var(--space-7);
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-8);
  }

  .step-arrow.to-below {
    display: none;
  }

  .step:nth-child(odd) .step-arrow.to-next {
    display: block;
    top: 18%;
    right: calc(-1 * var(--space-8) + 6px);
    width: calc(var(--space-8) - 12px);
    height: 48px;
  }
}

@media (min-width: 1080px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .step .step-arrow.to-next {
    display: block;
    top: 17%;
    right: calc(-1 * var(--space-7) + 2px);
    width: calc(var(--space-7) - 4px);
    height: 40px;
  }

  .step:last-child .step-arrow.to-next {
    display: none;
  }
}

/* ---------- Work ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.work-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  background-image: var(--paper);
  text-decoration: none;
}

.work-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.work-thumb > svg,
.work-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms var(--ease-out);
}

.work-card:hover .work-thumb > svg,
.work-card:hover .work-thumb > img {
  transform: scale(1.03);
}

/* Navy stickers with a cream cut edge, so they read on any thumbnail */
.work-platform {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  box-shadow: 0 0 0 2px var(--cream);
}

.work-play {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--navy);
  color: var(--cream);
  box-shadow: 0 0 0 2px var(--cream);
}

.work-play .icon {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

.work-meta {
  display: grid;
  gap: var(--space-1);
  padding: 0 var(--space-1) var(--space-1);
}

.work-views {
  font-weight: 800;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.work-views small {
  margin-left: var(--space-1);
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
}

.work-link {
  justify-self: start;
  margin-top: var(--space-1);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}

.work-link .icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--space-1);
  vertical-align: -2px;
}

.work-card:hover .work-link {
  text-decoration-color: var(--navy);
}

@media (max-width: 1079.98px) {
  .work-link {
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

@media (min-width: 760px) {
  .work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .work-grid {
    gap: var(--space-5);
  }
}

/* ---------- Packages ---------- */

.plans {
  display: grid;
  gap: var(--space-4);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  background-image: var(--paper);
  color: var(--ink);
}

.plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.plan-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--sky);
  color: var(--navy);
}

.plan-icon .icon {
  width: 22px;
  height: 22px;
}

.plan-head {
  display: grid;
  gap: var(--space-2);
}

.plan-head p {
  color: var(--ink-muted);
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: 1.5px solid var(--line-soft);
}

.price-amount {
  font-weight: 800;
  font-size: clamp(40px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.price-per {
  color: var(--ink-muted);
  font-weight: 500;
}

.plan-list {
  display: grid;
  gap: var(--space-3);
}

.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.plan-list .icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--ink);
}

.plan-list-title {
  color: var(--ink-muted);
}

.plan .btn {
  margin-top: auto;
}

.plan.night .plan-icon {
  background-color: var(--sky);
}

.plan-top .badge {
  rotate: 3deg;
}

.consult {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--accent);
  background-image: var(--paper);
  color: var(--on-accent);
}

.consult-who {
  display: flex;
  align-items: center;
}

.consult-who > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px solid var(--butter);
  border-radius: var(--radius-pill);
}

.consult-who > span:first-child {
  background-color: var(--navy);
  color: var(--cream);
}

.consult-who > span:first-child svg {
  width: 24px;
  height: 24px;
}

.consult-who > span + span {
  margin-left: -12px;
  background-color: var(--cream);
  color: var(--navy);
}

.consult-who .icon {
  width: 20px;
  height: 20px;
}

.consult-copy {
  display: grid;
  gap: var(--space-1);
}

.consult-copy p {
  color: #1e3f66;
}

@media (min-width: 820px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .plan {
    padding: var(--space-7) var(--space-6);
  }

  .consult {
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-top: var(--space-5);
    padding: var(--space-5) var(--space-6);
  }
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  gap: var(--space-6);
}

.faq-head {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: start;
}

.faq-head p {
  max-width: 34ch;
  color: var(--ink-muted);
}

.faq-head a {
  color: var(--ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.faq-list {
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  background-image: var(--paper);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  list-style: none;
}

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

.faq-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--sky);
  color: var(--navy);
  flex: none;
  transition: transform 200ms var(--ease-out);
}

.faq-toggle .icon {
  width: 18px;
  height: 18px;
}

.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  max-width: 62ch;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--ink-muted);
}

@media (min-width: 960px) {
  .faq-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    align-items: start;
  }

  .faq-head {
    position: sticky;
    top: 120px;
  }
}

/* ---------- Book a call ---------- */
/* Straight on the sky: heading and paragraph, then the calendar. Calendly draws its box in cream with
   navy text (colours in site.js) and leaves the frame around the box transparent, so around the box the
   page itself shows through, grain and all. Nothing is laid over or behind the frame: a background or
   grain layer there would show as a second, slightly different rectangle. */

/* A touch smaller on phones, so "Let's talk about" stays on one line */
#book .display-l {
  font-size: clamp(34px, 4.8vw, 52px);
}

/* Calendly keeps its own margin above its box, so the gap here is small. The heading is centred over
   the calendar, which Calendly centres too. */
.book-grid {
  display: grid;
  gap: var(--space-5);
}

.book-copy {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.book-copy .body-l {
  max-width: 56ch;
  color: var(--ink-muted);
}

/* On phones Calendly fills its whole frame cream, so the corners are rounded here. */
.booking {
  position: relative;
  overflow: hidden;
  min-height: 660px;
  border-radius: var(--radius-lg);
}

/* Until the calendar has loaded (or if it can't), a cream paper card holds the button. */
.booking-fallback {
  display: grid;
  gap: var(--space-4);
  place-content: center;
  justify-items: center;
  min-height: 660px;
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  background-image: var(--paper);
  text-align: center;
}

.booking-fallback svg {
  width: 200px;
  height: auto;
  margin-bottom: var(--space-2);
}

.booking-fallback p {
  max-width: 36ch;
  color: var(--ink-muted);
}

/* Calendly needs a set height to draw into; with resize on, it then sets the height for each step.
   It loads before it is on screen but only draws once it is, and in between it briefly reports a
   height of a few pixels: the minimum keeps the space steady so the page doesn't jump. */
.booking-holder {
  display: none;
  height: 700px;
  min-height: 660px;
}

.booking.is-live .booking-fallback {
  display: none;
}

.booking.is-live .booking-holder {
  display: block;
}

.booking-holder iframe {
  display: block;
}

/* Parked: the calendar drawing in the background before the visitor gets to it (see site.js).
   Pinned inside the window so the browser lets it draw, at the width it will have on the page,
   and invisible and click-through. The card keeps its height meanwhile, so nothing moves. */
.booking-holder.is-parked {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: var(--parked-width, 100%);
  opacity: 0;
  pointer-events: none;
}


/* ---------- 100% human made badge ---------- */
/* Pinned to the bottom-right corner while the page scrolls. It is the last thing in <main> and sticks,
   so when the end of <main> comes up it stays there and never covers the footer.
   site.js fades it out as the section named in its data-hide-from comes up, and back in above it.
   It takes no room in the page, and taps go through it to whatever is underneath.
   The navy ring keeps the cream pill readable on cream cards as well as on the sky. */

.human-pin {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
  z-index: 40;
  height: 0;
  pointer-events: none;
}

.human-badge {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + var(--space-4));
  bottom: 0;
  padding: 6px var(--space-3) 6px 6px;
  box-shadow: 0 0 0 2px var(--navy);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}

.human-pin.is-faded .human-badge {
  opacity: 0;
  transform: translateY(var(--space-2));
}

.human-badge .dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background-color: var(--navy);
  color: var(--cream);
}

.human-badge .dot svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

@media (min-width: 720px) {
  .human-pin {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
  }

  .human-badge {
    right: calc(env(safe-area-inset-right, 0px) + var(--space-5));
  }
}

/* ---------- Footer, newsletter ---------- */

.site-footer {
  padding-block: var(--section-y) var(--space-6);
}

.footer-card {
  display: grid;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  background-image: var(--paper);
}

.newsletter {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: start;
}

.newsletter-art {
  width: 156px;
  height: auto;
  margin-bottom: var(--space-1);
}

.newsletter .body-l {
  max-width: 46ch;
  color: var(--ink-muted);
}

.signup {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: 520px;
}

.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.signup input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--cream);
  color: var(--navy);
  font: 400 16px/24px var(--font-sans);
}

.signup input[type="email"]::placeholder {
  color: #1e3f66;
  opacity: 0.7;
}

.signup input[type="email"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.signup .btn {
  flex: 0 0 auto;
}

@media (max-width: 479.98px) {
  .signup .btn {
    flex-basis: 100%;
  }
}

.signup-note {
  color: var(--ink-muted);
}

.signup-status {
  min-height: 20px;
  font-weight: 600;
}

.signup-status:empty {
  display: none;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-content: start;
}

.footer-links h2 {
  margin-bottom: var(--space-3);
}

.footer-links ul {
  display: grid;
  gap: var(--space-2);
}

.footer-links a {
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-6);
}

.footer-base .lockup {
  width: auto;
  height: 22px;
  color: var(--navy);
}

.footer-base p {
  color: var(--ink-muted);
}

.footer-base a {
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  .footer-card {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-8);
    padding: var(--space-8) var(--space-7);
  }
}

/* ---------- Simple pages (privacy, 404) ---------- */

.page {
  padding-block: var(--space-7) var(--section-y);
}

.page-card {
  display: grid;
  gap: var(--space-5);
  max-width: 760px;
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  background-image: var(--paper);
}

.page-card h2 {
  margin-top: var(--space-3);
}

.page-card p,
.page-card li {
  max-width: 64ch;
  color: var(--ink-muted);
}

.page-card ul {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.2em;
}

@media (min-width: 720px) {
  .page-card {
    padding: var(--space-8);
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .motion [data-pop] {
    transition: transform 260ms var(--ease-pop);
  }

  .motion [data-pop]:not(.is-in) {
    transform: scale(0.95) rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}