/* Self-hosted copies of the Google Fonts the site uses (latin and latin-ext;
   the browser fetches a file only when the page uses its characters). */
/* Caveat, latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin-ext-29385594.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Caveat, latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin-18bea307.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat, latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin-ext-29385594.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Caveat, latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin-18bea307.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-ext-108d5090.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-2c9bacf0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-ext-24397a3e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-3a2668b9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-243e24a8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-57d289a0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-521e24d1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-1dc044f4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-521e24d1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-1dc044f4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-521e24d1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-1dc044f4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight, latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext-fdac46ab.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight, latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-35babd43.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight, latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext-fdac46ab.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight, latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-35babd43.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight, latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext-fdac46ab.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight, latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-35babd43.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display rules below must never beat the hidden attribute. */
[hidden] { display: none !important; }

/* Ask Mango, the almanac. A printed book of answers: warm paper, engraved
   plates, a serif with a soft edge, and Mango's own orange ink drawn over
   the page the way it draws over your screen. */

:root {
  --paper: #f3ede1;
  --paper-2: #ece4d4;
  --paper-3: #e3d9c5;
  --card: #f8f4ec;
  --ink: #1d1b16;
  --ink-2: #4b463c;
  --ink-3: #6c6558; /* 4.5:1 or better on every paper tone */
  --rule: rgba(29, 27, 22, 0.16);
  --rule-2: rgba(29, 27, 22, 0.3);
  --mango: #f28c12;
  --mango-ink: #e07a00;
  --mango-text: #b85f00;
  --leaf: #2f5a34;
  --night: #172119;
  --night-2: #1f2c21;
  --cream: #efe6d2;

  --display: 'Inter Tight', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --hand: 'Caveat', 'Segoe Print', cursive;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--paper);
  /* Paper grain: fine noise, multiplied into the paper colour. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: rgba(242, 140, 18, 0.28); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
}
.skip:focus { top: 12px; }

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--mango-ink); outline-offset: 3px; }

/* ---------- type ---------- */

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

h2 {
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

h3 { font-size: 25px; line-height: 1.15; letter-spacing: -0.025em; }
em { font-style: normal; }

.kicker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 22px;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.plateNo {
  padding: 3px 0;
  border-bottom: 1px solid var(--ink-2);
  color: var(--ink);
}

.sectionHead { margin-bottom: clamp(40px, 6vw, 72px); }
.sectionLede { max-width: 34em; margin: 22px 0 0; color: var(--ink-2); font-size: 18px; }

kbd {
  display: inline-block;
  padding: 0 7px 1px;
  border: 1px solid var(--rule-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--card);
  font: 500 0.82em/1.5 var(--mono);
  color: var(--ink);
  vertical-align: 0.06em;
}

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px 15px 20px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font: 600 16px/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 6px 18px -8px rgba(29, 27, 22, 0.55);
  transition: transform 220ms var(--ease), background 200ms ease, box-shadow 220ms var(--ease);
}

.button:hover { transform: translateY(-1px); background: #2b2820; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 10px 24px -10px rgba(29, 27, 22, 0.6); }
.button:active { transform: translateY(1px); }
.button.small { padding: 10px 16px; font-size: 14px; }
.button.large { padding: 19px 30px 19px 26px; font-size: 18px; }
/* The other system's download, beside this system's. */
.button.alt { background: transparent; color: var(--ink); box-shadow: none; }
.button.alt:hover { background: rgba(29, 27, 22, 0.06); }
.button[hidden] { display: none; }

.buttonIcon { width: 15px; height: 15px; fill: currentColor; flex: none; }

.textLink {
  border: 0;
  padding: 2px 0;
  background: none;
  font: 500 15px var(--body);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 4px;
  cursor: pointer;
}
.textLink:hover { color: var(--ink); text-decoration-color: var(--mango-ink); }

/* ---------- running head + nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(243, 237, 225, 0.86);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.nav.scrolled { border-bottom-color: var(--rule); }

.navInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

.brand img { width: 132px; height: auto; }

.navLinks { display: flex; gap: 26px; }
.navLinks a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
}
.navLinks a:hover { color: var(--ink); }
.navLinks a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  background: var(--mango-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
.navLinks a:hover::after { transform: scaleX(1); }

.navEnd { display: flex; align-items: center; gap: 20px; }

/* ---------- Mango's ink ---------- */

.ink {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--mango-ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ink path {
  stroke-dasharray: var(--length, 1000);
  stroke-dashoffset: var(--length, 1000);
  transition: stroke-dashoffset 1100ms cubic-bezier(0.6, 0, 0.3, 1);
}
.inked .ink path { stroke-dashoffset: 0; }
.ink .inkThin { stroke-width: 1.4; stroke: var(--ink-3); stroke-dasharray: 4 5; stroke-dashoffset: 0; }

.inkNote {
  position: absolute;
  margin: 0;
  font: 700 26px/1.02 var(--hand);
  color: var(--mango-ink);
  transform: rotate(-4deg);
  opacity: 0;
  /* The mask reaches past the box: handwriting overhangs its letters. */
  clip-path: inset(-0.4em 100% -0.4em -0.4em);
  transition: opacity 200ms ease, clip-path 900ms steps(18, end);
  pointer-events: none;
}
.inked .inkNote,
.inkNote.inked { opacity: 1; clip-path: inset(-0.4em -0.4em -0.4em -0.4em); }

/* ---------- I. hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 90px);
}

.heroTitle {
  font-size: clamp(44px, 5.1vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 600;
}
.heroTitle em { color: var(--ink); }

.inkTarget { position: relative; white-space: nowrap; }
.inkUnder { left: -2%; bottom: -0.12em; width: 104%; height: 0.3em; stroke-width: 4; }

.lede {
  max-width: 26em;
  margin: 30px 0 34px;
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.6;
  color: var(--ink-2);
}

.ctaRow { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ctaRow.center { justify-content: center; }
.fine { margin: 18px 0 0; font: 400 12.5px var(--mono); color: var(--ink-3); letter-spacing: 0.02em; }

/* The hero's screen: the landing film (16:9), its poster until it is played. */
.heroPlate {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  padding: 8px;
  background: #fffdf8;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 4px rgba(60, 40, 15, 0.05), 0 40px 80px -40px rgba(60, 40, 15, 0.45);
}
.heroPlate video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; background: #000; }

.plateCaption {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font: 400 13.5px/1.45 var(--body);
  color: var(--ink-3);
  text-align: center;
}

/* ---------- placeholders (FPO = for position only, as in print) ---------- */

.fpo {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 24px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(29, 27, 22, 0.035) 11px 12px),
    var(--paper-2);
  border: 1px solid var(--rule);
}

.fpoTag {
  position: absolute;
  left: 14px;
  top: 12px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fpoHint { max-width: 30em; font-size: 14px; color: var(--ink-3); }

/* ---------- the film ---------- */

/* The seal sits in the poster's corner (clear of her face and the wordmark) until the film is played;
   anywhere on the poster plays it. */
.film:not(.isPlaying) video { cursor: pointer; }
/* A clean play button, as on YouTube: a dark see-through pill in the top corner, clear of her face and the wordmark. */
.filmPlay { position: absolute; left: clamp(16px, 2.4vw, 28px); top: clamp(16px, 2.4vw, 28px); display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 0; border-radius: 14px; background: rgba(15, 15, 15, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 600 15px/1 var(--body); cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.filmPlay:hover { background: rgba(15, 15, 15, 0.86); transform: scale(1.03); }
.filmPlayIcon { display: grid; place-items: center; width: 40px; height: 28px; border-radius: 8px; background: #ff0033; }
.filmPlayIcon svg { width: 27px; height: 27px; fill: #fff; margin-left: 2px; }
.filmPlayTime { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .filmPlay { padding: 6px 12px 6px 6px; gap: 8px; font-size: 13.5px; border-radius: 12px; } .filmPlayIcon { width: 34px; height: 24px; } .filmPlayIcon svg { width: 23px; height: 23px; } .filmPlayTime { padding-left: 8px; } }
.film.isPlaying .filmPlay { display: none; }

/* The play button, as a wax seal. */
.seal {
  display: grid;
  place-items: center;
  width: clamp(76px, 9vw, 108px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7a63a, var(--mango) 55%, #c56a05);
  box-shadow: 0 0 0 6px rgba(242, 140, 18, 0.16), 0 12px 24px -8px rgba(150, 80, 0, 0.6), inset 0 -3px 6px rgba(120, 50, 0, 0.35), inset 0 2px 3px rgba(255, 230, 190, 0.5);
  cursor: pointer;
  transition: transform 300ms var(--ease);
}
.seal:hover { transform: scale(1.05) rotate(-4deg); }
.seal svg { width: 38%; fill: #fff8ec; margin-left: 6%; filter: drop-shadow(0 1px 0 rgba(120, 50, 0, 0.4)); }

/* ---------- works in ---------- */

.worksIn {
  padding: 26px 0 30px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}

.worksInLabel { margin: 0 auto 14px; font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.tickerTrack {
  display: flex;
  width: max-content;
  will-change: transform; /* main.js moves it */
}

.tickerTrack span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 56px;
  font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--display);
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}

.tickerTrack img {
  width: auto;
  height: clamp(30px, 3vw, 40px);
  max-width: 48px;
  object-fit: contain;
  flex: none;
}


/* ---------- III. what it does ---------- */

.what { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(60px, 8vw, 110px); }

.varieties { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }

.variety {
  display: grid;
  grid-template-columns: 70px minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--rule-2);
}

.varietyNo {
  align-self: start;
  font: 600 40px/1 var(--display);
  letter-spacing: -0.04em;
  color: var(--ink);
}
.varietyNo span { display: block; margin-bottom: 6px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.varietyPlate { position: relative; display: grid; place-items: center; min-height: 170px; }
.varietyPlate img { max-height: 210px; width: auto; transition: transform 600ms var(--ease); }
.variety:hover .varietyPlate img { transform: rotate(-3deg) scale(1.04); }

.sketchPlate img { max-height: 170px; }

/* A working demo per variety: plays muted while on screen, sound on request. */
.varietyClip {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  background: var(--paper-3);
  box-shadow: 0 22px 50px -32px rgba(29, 27, 22, 0.55);
}
.varietyClip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clipSound {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 10px; border: 0; border-radius: 999px;
  background: rgba(22, 25, 30, 0.82); color: #fff;
  font: 600 13px var(--body); cursor: pointer;
  backdrop-filter: blur(8px);
  transition: opacity 200ms;
}
.clipSound svg { width: 16px; height: 16px; fill: currentColor; }
.clipSound:hover { background: #16191e; }
/* Muted shows a crossed-out speaker, sound on shows the waves. */
.clipSound .soundWaves,
.clipSound[aria-pressed="true"] .soundMute { display: none; }
.clipSound[aria-pressed="true"] .soundWaves { display: inline; }
.sketchCurve { left: 4%; right: 4%; bottom: -6px; width: 92%; height: 60%; stroke-width: 2.6; }

.varietyText h3 { margin-bottom: 12px; }
.varietyText p { margin: 0; color: var(--ink-2); font-size: 16.5px; }

.ask {
  display: inline-block;
  margin-top: 16px !important;
  font: 700 24px/1.15 var(--hand) !important;
  color: var(--mango-text) !important;
  transform: rotate(-1.5deg);
}


/* Proofreader's marks: what was heard, then what was written. */
.proof { margin-top: 18px; display: grid; gap: 10px; }
.proofSaid {
  padding-left: 14px;
  border-left: 2px solid var(--rule-2);
  font: italic 400 15px/1.5 var(--body) !important;
  color: var(--ink-3) !important;
}
.proofSaid s { text-decoration-color: var(--mango-ink); text-decoration-thickness: 2px; }
.proofWrote {
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  font: 500 15.5px/1.5 var(--body) !important;
  color: var(--ink) !important;
  box-shadow: 3px 3px 0 var(--paper-3);
}

/* ---------- IV. method ---------- */

.method {
  padding: clamp(80px, 10vw, 130px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.methodInner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px clamp(32px, 6vw, 90px);
  align-items: center;
}
.methodInner .sectionHead { margin-bottom: 0; }

.keys {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 30px 0 50px;
}

.key {
  --press: 0;
  display: block;
  width: clamp(120px, 15vw, 168px);
  aspect-ratio: 1.08;
  padding: 7px 7px 15px;
  border-radius: 18px;
  background: linear-gradient(#d8cdb6, #c3b699);
  box-shadow: 0 calc(16px - var(--press) * 12px) calc(30px - var(--press) * 16px) -10px rgba(60, 40, 15, 0.45), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  transform: translateY(calc(var(--press) * 7px));
  transition: transform 120ms ease, box-shadow 120ms ease, padding 120ms ease;
  cursor: pointer;
}

.keyFace {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, #fbf7ef, #ece3d1);
  box-shadow: inset 0 -2px 4px rgba(120, 100, 60, 0.18), inset 0 1px 0 #fff;
  font: 500 clamp(20px, 2.2vw, 26px)/1 var(--body);
  color: var(--ink);
}

/* The Mac name sits low on the cap, as on a Mac keyboard. */
.keyFace { flex-direction: column; justify-content: space-between; }
.keyMac { align-self: flex-end; display: flex; align-items: baseline; gap: 5px; font: 500 clamp(12px, 1.15vw, 15px)/1 var(--body); color: var(--ink-3); }
.keyMac span { font-size: 1.15em; }
.key.down { --press: 1; padding-bottom: 8px; }
.key.down .keyFace { color: var(--mango-text); }
.keyPlus { font: 300 40px var(--display); color: var(--ink-3); }
.keysNote { left: 50%; bottom: 0; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; font-size: 28px; }

.steps {
  grid-column: 1 / -1;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}

.steps li { padding: 28px 28px 0 0; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--rule-2); }
.stepNo { display: block; margin-bottom: 12px; font: 600 30px/1 var(--display); letter-spacing: -0.03em; color: var(--mango-text); }
.steps h3 { font-size: 24px; margin-bottom: 8px; }
.steps p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* ---------- V. the Orchard (night) ---------- */

.orchard {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 11vw, 150px) 0 clamp(80px, 10vw, 130px);
  background: var(--night);
  color: var(--cream);
}

.orchardScene {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(70vw, 760px);
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.orchardScene img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.25) brightness(0.8) contrast(1.05); }

.orchardInner { position: relative; }
.onDark h2 { color: var(--cream); }
.onDark .kicker { color: rgba(239, 230, 210, 0.66); }
.onDark .plateNo { color: var(--cream); border-color: rgba(239, 230, 210, 0.66); }
.onDark .sectionLede { color: rgba(239, 230, 210, 0.78); }

.ripening {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(239, 230, 210, 0.3);
}

.ripening li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 36px 18px 0;
  text-align: center;
  opacity: 0.18;
  transform: translateY(10px);
  transition: opacity 700ms ease, transform 700ms var(--ease);
}
.ripening li + li { border-left: 1px solid rgba(239, 230, 210, 0.16); }
.ripening li.lit { opacity: 1; transform: none; }

.ripening img { height: clamp(90px, 12vw, 150px); width: auto; margin-bottom: 14px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.4)); }
.ripening b { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mango); }
.ripening span { font: 400 15px/1.45 var(--body); color: rgba(239, 230, 210, 0.85); max-width: 15em; }

.tags { margin-top: clamp(70px, 9vw, 110px); }
.tagsLabel { margin: 0 0 22px; font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(239, 230, 210, 0.66); }
.tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }

/* Each job as a paper crate tag, strung on its hole. */
.tag {
  position: relative;
  padding: 13px 18px 13px 34px;
  background: var(--cream);
  color: var(--ink);
  font: 500 15px/1.35 var(--body);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6);
}
.tag::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--night);
}
.tag:nth-child(odd) { transform: rotate(-0.8deg); }
.tag:nth-child(even) { transform: rotate(0.9deg); }
.tag:nth-child(3n) { background: #f4d9a8; }

.tagsFoot { margin: 26px 0 0; font-size: 15px; color: rgba(239, 230, 210, 0.66); }

/* ---------- VI. privacy ---------- */

.privacy {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  padding-top: clamp(90px, 11vw, 150px);
  padding-bottom: clamp(70px, 9vw, 120px);
}

.privacyPlate { display: grid; place-items: center; }
.privacyPlate img { width: min(100%, 360px); }
.privacyText h2 { margin-bottom: 40px; }

.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.facts div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
.facts dt { font: 600 19px/1.3 var(--display); letter-spacing: -0.02em; }
.facts dd { margin: 0; color: var(--ink-2); font-size: 16px; }

/* ---------- VIII. pricing ---------- */

.pricing { padding-bottom: clamp(80px, 10vw, 130px); }
.pricingHead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

.currency { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule) inset; }
.currency button {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 13px var(--body);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.currency button[aria-pressed='true'] { background: #fffdf8; color: var(--ink); box-shadow: 0 1px 2px rgba(29, 27, 22, 0.12), 0 4px 12px -6px rgba(29, 27, 22, 0.25); }

.crates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: start; }

/* Each plan as a soft card: name, price, one button, then what it includes. */
.crate {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 30px;
  border-radius: 22px;
  background: #fffdf8;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(60, 40, 15, 0.05), 0 18px 40px -28px rgba(60, 40, 15, 0.35);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.crate:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(60, 40, 15, 0.05), 0 28px 56px -30px rgba(60, 40, 15, 0.45); }
.crate.featured { border: 1.5px solid var(--mango); box-shadow: 0 0 0 4px rgba(242, 140, 18, 0.1), 0 24px 54px -30px rgba(184, 95, 0, 0.5); }

.crateBadge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mango);
  color: #fffdf8;
  font: 700 11px/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(184, 95, 0, 0.7);
}

.crateName { margin: 0 0 6px; font: 600 22px/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.crateTagline { margin: 0; font: 400 15px var(--body); color: var(--ink-3); }

.cratePrice { display: flex; align-items: baseline; gap: 6px; margin: 26px 0 4px; }
.cratePrice b { font: 700 46px/1 var(--display); letter-spacing: -0.045em; color: var(--ink); }
.cratePer { font-size: 14px; color: var(--ink-3); }
.crateNote { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.crateChip { align-self: flex-start; margin: 16px 0 22px; padding: 5px 11px; border-radius: 999px; background: var(--paper-2); font: 500 12.5px var(--body); color: var(--ink-2); }
.crate.featured .crateChip { background: rgba(242, 140, 18, 0.12); color: var(--mango-text); }

.crate .button { justify-content: center; width: 100%; padding: 14px 20px; }
.crate:not(.featured) .button { background: transparent; color: var(--ink); box-shadow: none; border-color: var(--rule-2); }
.crate:not(.featured) .button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.crateListHead { margin: 26px 0 14px; padding-top: 22px; border-top: 1px solid var(--rule); font: 600 11.5px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.crateList { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.crateList li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); }
.crateCheck { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); }
.crateCheck svg { width: 11px; height: 11px; fill: currentColor; }
.crate.featured .crateCheck { background: rgba(242, 140, 18, 0.14); color: var(--mango-text); }

/* The Starter pack: one wide card under the plans, dashed like a coupon. */
.packCrate { display: grid; grid-template-columns: 1.2fr auto 1fr 1fr; gap: clamp(18px, 3vw, 40px); align-items: center; margin-top: clamp(16px, 2vw, 24px); border: 1.5px dashed var(--rule-2); }
.packCrate .cratePrice { margin: 0 0 4px; }
.packCrate .cratePrice b { font-size: 40px; }
.packCrate .crateList { gap: 10px; }
.packKicker { margin: 0 0 8px; font: 600 11.5px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mango-text); }
.packAction { display: grid; gap: 10px; }
.packAction .crateNote { text-align: center; }
.footnote { margin: 26px 0 0; font-size: 14px; color: var(--ink-3); max-width: 52em; }

/* ---------- IX. FAQ ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 90px);
  padding-bottom: clamp(90px, 11vw, 150px);
}
.faq .sectionHead { margin-bottom: 0; }
.faq .sectionLede a { color: var(--ink); text-decoration-color: var(--mango-ink); text-underline-offset: 3px; }

.faqList { border-top: 1px solid var(--ink); }
.faqItem { border-bottom: 1px solid var(--rule-2); }
.faqItem summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 21px 0;
  font: 500 19px/1.3 var(--display);
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary::after {
  content: '+';
  flex: none;
  font: 300 26px/1 var(--display);
  color: var(--mango-text);
  transition: transform 300ms var(--ease);
}
.faqItem[open] summary::after { transform: rotate(45deg); }
.faqItem p { margin: -4px 0 22px; max-width: 38em; color: var(--ink-2); font-size: 16.5px; }

/* ---------- finale + colophon ---------- */

.finale {
  position: relative;
  overflow: hidden;
  padding: clamp(100px, 12vw, 170px) 0 clamp(90px, 10vw, 140px);
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  text-align: center;
}

.finaleLeaf {
  position: absolute;
  right: -110px;
  top: -70px;
  width: clamp(220px, 26vw, 360px);
  opacity: 0.9;
  transform: rotate(18deg);
  pointer-events: none;
}

.finaleInner { position: relative; }
.finale h2 { font-size: clamp(54px, 9vw, 128px); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 44px; }
.finale h2 em { color: var(--mango-text); }
.finale h2 { letter-spacing: -0.055em; }
.finaleNote { position: static; display: inline-block; margin-top: 26px; font-size: 26px; }

/* ---------- footer ---------- */

.colophon { border-top: 1px solid var(--ink); padding: 56px 0 40px; }
.footGrid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.footBrand img { width: 124px; }
.footBrand p { max-width: 22em; margin: 16px 0 0; font-size: 14.5px; color: var(--ink-2); }
.footCol { display: grid; align-content: start; gap: 11px; }
.footCol h2 { margin: 0 0 6px; font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.footCol a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; width: fit-content; }
.footCol a:hover,
.footCol a[aria-current='page'] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mango-ink); text-underline-offset: 3px; }
.colophonText { margin: 48px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font: 400 13.5px/1.6 var(--body); color: var(--ink-3); }
.colophonText b { font-weight: 600; color: var(--ink-2); }
.navLinks a[aria-current='page'] { color: var(--ink); }
.navLinks a[aria-current='page']::after { transform: scaleX(1); }

/* ---------- home: pricing in brief ---------- */

.priceBand {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 32px 60px;
  align-items: end;
  margin-bottom: clamp(90px, 11vw, 140px);
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}
.priceBandSide p { margin: 0 0 24px; font-size: 18px; color: var(--ink-2); max-width: 26em; }

/* ---------- inner pages ---------- */

.pageHero { padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(36px, 5vw, 56px); }
.pageHero h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.05em; }
.pageHero .sectionLede { font-size: 19px; }
.updated { margin: 22px 0 0; font: 400 12.5px var(--mono); color: var(--ink-3); letter-spacing: 0.02em; }

/* Policies: a contents column that follows you, and the text. */
.legalLayout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 90px);
  padding-top: 34px;
  padding-bottom: clamp(90px, 10vw, 130px);
  border-top: 1px solid var(--ink);
}
.toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 9px; }
.toc p { margin: 0 0 6px; font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.toc a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); }

.legal { max-width: 680px; }
.legal section { padding-bottom: 14px; }
.legal section + section { padding-top: 26px; border-top: 1px solid var(--rule); }
.legal h2 { font-size: 25px; letter-spacing: -0.03em; margin: 0 0 14px; }
.legal h3 { font-size: 18px; letter-spacing: -0.015em; margin: 22px 0 8px; }
.legal p,
.legal li { color: var(--ink-2); font-size: 16.5px; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal li::marker { color: var(--mango-ink); }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration-color: var(--mango-ink); text-underline-offset: 3px; }

.callout {
  margin: 0 0 30px;
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--mango);
  font-size: 16.5px;
  color: var(--ink);
}
.callout p { margin: 0; color: var(--ink); }
.callout p + p { margin-top: 8px; color: var(--ink-2); }

.providers { width: 100%; margin: 6px 0 18px; border-collapse: collapse; font-size: 15px; }
.providers th,
.providers td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.providers th { font: 500 11.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--ink); }
.providers td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.providers td { color: var(--ink-2); }

/* Contact */
.contactGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  padding-bottom: clamp(56px, 7vw, 90px);
}
.contactCard { padding: 26px 24px; background: var(--card); border: 1px solid var(--rule-2); box-shadow: 0 24px 50px -40px rgba(60, 40, 15, 0.6); }
.contactCard h2 { font-size: 22px; letter-spacing: -0.025em; margin: 0 0 8px; }
.contactCard p { margin: 0 0 16px; color: var(--ink-2); font-size: 15.5px; }
.contactCard a.big { font: 600 18px var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration-color: var(--mango-ink); text-underline-offset: 4px; }
.business { padding-top: 30px; padding-bottom: clamp(90px, 10vw, 130px); border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 6vw, 90px); }
.business h2 { font-size: clamp(30px, 3.6vw, 44px); }
.business dl { margin: 0; border-top: 1px solid var(--rule-2); }
.business dl div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule-2); }
.business dt { font: 500 12px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.business dd { margin: 0; font-size: 16.5px; color: var(--ink); }

/* Pricing page */
.pricingTop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.pricingPlans { padding-bottom: 20px; }
.compare { padding-top: clamp(80px, 10vw, 120px); }
.compareTable { width: 100%; border-collapse: collapse; font-size: 16px; }
.compareTable th,
.compareTable td { padding: 16px 12px; border-bottom: 1px solid var(--rule-2); text-align: center; }
.compareTable th:first-child,
.compareTable td:first-child { text-align: left; padding-left: 0; }
.compareTable thead th { font: 600 22px var(--display); letter-spacing: -0.03em; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.compareTable thead th span span { display: inline; margin: 0; font: inherit; color: inherit; }
.compareTable thead th > span { display: block; font: 400 13px var(--body); letter-spacing: 0; color: var(--ink-3); margin-top: 2px; }
.compareTable tbody td:first-child { color: var(--ink); font-weight: 500; }
.compareTable tbody td { color: var(--ink-2); }
.compareTable .group td { padding-top: 30px; font: 500 11.5px var(--mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3) !important; border-bottom-color: var(--ink); }
.compareTable .featuredCol { background: rgba(242, 140, 18, 0.07); }
.yes { display: inline-block; width: 10px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--mango); transform: rotate(28deg); }
.tableScroll { overflow-x: auto; }

.explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(80px, 10vw, 120px); border-top: 1px solid var(--ink); }
.explain div { padding: 26px 28px 0 0; }
.explain div + div { padding-left: 28px; border-left: 1px solid var(--rule-2); }
.explain h3 { font-size: 22px; margin-bottom: 10px; }
.explain p { margin: 0; color: var(--ink-2); font-size: 16px; }
.explain .stepNo { font-size: 26px; }

.billing { padding-top: clamp(80px, 10vw, 120px); }

/* ---------- Mango's pointer, the guest ---------- */

.guest {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  width: 30px;
  height: 30px;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 0 5px rgba(242, 140, 18, 0.55)) drop-shadow(0 3px 4px rgba(60, 30, 0, 0.3));
}
.guest svg { width: 100%; height: 100%; overflow: visible; }
.guest path { fill: #ffb328; stroke: #c96d00; stroke-width: 1.1; stroke-linejoin: round; }

/* ---------- Mac dialog ---------- */

.macDialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(29, 27, 22, 0.6);
}
.macDialog::backdrop { background: rgba(29, 27, 22, 0.4); backdrop-filter: blur(2px); }
.macForm { position: relative; padding: 32px; }
.macForm h3 { font-size: 28px; margin-bottom: 10px; }
.macForm p { margin: 0 0 20px; color: var(--ink-2); }
.macForm .kicker { margin-bottom: 14px; }
.macRow { display: flex; gap: 10px; }
.macRow input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  background: #fffdf8;
  font: 15px var(--body);
  color: var(--ink);
}
.macRow input:focus { outline: none; border-color: var(--mango-ink); box-shadow: 0 0 0 3px rgba(242, 140, 18, 0.18); }
.close { position: absolute; right: 14px; top: 10px; border: 0; background: none; font: 300 28px var(--display); color: var(--ink-3); cursor: pointer; }
.macDone { margin: 14px 0 0 !important; font: 700 24px var(--hand); color: var(--mango-text) !important; }

/* ---------- sign in (a modal on every page, website/signin.js) ---------- */

.signInDialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(29, 27, 22, 0.3), 0 18px 36px -18px rgba(29, 27, 22, 0.2);
}
.signInDialog[open] { animation: signInIn 220ms var(--ease); }
.signInDialog::backdrop { background: rgba(29, 27, 22, 0.28); backdrop-filter: blur(6px); }
@keyframes signInIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.signInDialog [hidden] { display: none !important; }
.signInCard { padding: 28px 30px 26px; }
.signInTop { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.signInTop h2 { flex: 1; margin: 0; font-size: 26px; letter-spacing: -0.03em; }
.signInBack,
.signInClose { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font: 400 18px var(--body); cursor: pointer; }
.signInBack:hover,
.signInClose:hover { background: var(--paper-2); color: var(--ink); }
.signInBack { margin-left: -8px; }
.signInBack svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.signInLead { margin: 0 0 20px; color: var(--ink-2); font-size: 15.5px; }
.signInLead b { color: var(--ink); font-weight: 600; word-break: break-all; }
.signInForm { display: grid; gap: 10px; }
.signInForm label { font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.signInDialog .field { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 10px; background: #fffdf8; font: 400 16px var(--body); color: var(--ink); }
.signInDialog .field:focus { outline: none; border-color: var(--mango-ink); box-shadow: 0 0 0 3px rgba(242, 140, 18, 0.18); }
.signInDialog .field.code { height: 60px; font: 500 26px var(--mono); letter-spacing: 0.5em; text-align: center; padding-left: calc(14px + 0.5em); }
.signInDialog .button { justify-content: center; width: 100%; }
.signInDialog .button.primary { background: var(--mango); border-color: var(--mango); color: var(--ink); }
.signInDialog .button.primary:hover { background: #f6a03a; }
.signInDialog .button.ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); box-shadow: none; }
.signInDialog .button.ghost:hover { background: var(--paper-2); }
.signInDialog .button:disabled { opacity: 0.55; cursor: progress; transform: none; }
.signInDialog .googleButton svg { width: 18px; height: 18px; flex: none; }
.signInDivider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font: 500 12px var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.signInDivider::before,
.signInDivider::after { content: ""; flex: 1; height: 1px; background: var(--rule-2); }
.signInDialog .formError { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid #a3281f; border-radius: 6px; background: rgba(163, 40, 31, 0.07); font-size: 15px; color: #7d1f18; }
.signInDialog .formNote { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-3); }
.signInDialog .formNote a { color: var(--ink-2); text-underline-offset: 3px; }
.signInDialog .linkButton { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms ease, transform 900ms var(--ease); }
.reveal.shown { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */

@media (max-width: 1180px) {
  .heroNote,
  .heroArrow { display: none; }
}

@media (max-width: 1080px) {
  .navLinks { gap: 18px; }
  .variety { grid-template-columns: 56px minmax(0, 0.8fr) minmax(0, 1.4fr); }
}

@media (max-width: 900px) {
  .navLinks { display: none; }
  .hero { grid-template-columns: 1fr; }
  .heroPlate { margin-top: 10px; }
  .heroNote { left: -34%; }
  .methodInner,
  .privacy,
  .faq { grid-template-columns: 1fr; }
  .privacyPlate img { width: min(60%, 260px); }
  .crates { grid-template-columns: 1fr; max-width: 520px; }
  .packCrate { grid-template-columns: 1fr; max-width: 520px; align-items: start; gap: 18px; }
  .polaroid { width: min(60%, 240px); }
  .ripening { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ripening li:nth-child(3) { border-left: 0; }
  .ripening li:nth-child(n + 3) { padding-top: 40px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hideSmall { display: none; }
  .navEnd { gap: 14px; }
  .navEnd > * { white-space: nowrap; }
  .brand img { width: 112px; }
  .heroNote { display: none; }
  .heroArrow { display: none; }
  .variety { grid-template-columns: 1fr; gap: 16px; }
  .varietyNo { display: flex; align-items: baseline; gap: 10px; font-size: 32px; }
  .varietyClip { grid-column: auto; }
  .varietyPlate { min-height: 0; justify-items: start; }
  .varietyPlate img { max-height: 150px; }
  .steps { grid-template-columns: 1fr; }
  .steps li,
  .steps li + li { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--rule-2); }
  .keys { gap: 12px; }
  .key { width: min(112px, 36vw); }
  .keysNote { font-size: 23px; white-space: normal; width: max-content; max-width: 100%; text-align: center; }
  .facts div { grid-template-columns: 1fr; gap: 6px; }
  .finaleLeaf { width: 150px; right: -60px; top: -50px; opacity: 0.55; }
  .ctaRow { gap: 16px; }
}

@media (max-width: 900px) {
  .footGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; }
  .footCol a { overflow-wrap: anywhere; }
  .footBrand { grid-column: 1 / -1; }
  .priceBand,
  .legalLayout,
  .business { grid-template-columns: 1fr; }
  .toc { position: static; grid-template-columns: 1fr 1fr; }
  .toc p { grid-column: 1 / -1; }
  .contactGrid,
  .explain { grid-template-columns: 1fr; }
  .explain div,
  .explain div + div { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--rule-2); }
}

@media (max-width: 640px) {
  .business dl div { grid-template-columns: 1fr; gap: 4px; }
  .compareTable { font-size: 14px; min-width: 560px; }
}

@media (max-width: 380px) {
  .navEnd { gap: 12px; }
  .navEnd .button { padding-left: 14px; padding-right: 14px; }
  .brand img { width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tool.target { background: #fff3dc; }
  .reveal,
  .ripening li { opacity: 1; transform: none; transition: none; }
  .ink path { transition: none; stroke-dashoffset: 0; }
  .inkNote { opacity: 1; clip-path: none; transition: none; }
}

/* The maker line under every page. */
.colophonBar { margin: 48px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; }
.colophonBar .colophonText { margin: 0; padding: 0; border: 0; }
.colophonMaker { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.colophonMaker a { color: var(--ink-2); text-decoration-color: var(--mango-ink); text-underline-offset: 3px; }
.colophonMaker a:hover { color: var(--ink); }

/* ---------- Softer shapes: rounded cards and pill buttons everywhere ---------- */
.button { border-radius: 999px; }
.proofWrote { border-radius: 12px; box-shadow: 0 8px 18px -12px rgba(60, 40, 15, 0.35); }
.callout { border-radius: 14px; }
.contactCard { border-radius: 20px; background: #fffdf8; border-color: var(--rule); box-shadow: 0 1px 2px rgba(60, 40, 15, 0.05), 0 18px 40px -30px rgba(60, 40, 15, 0.35); }
.macDialog { border-radius: 22px; border-color: var(--rule-2); }
.macRow input { border-radius: 999px; padding-left: 16px; }

/* ---------- busy buttons (busy.js): a spinner in place of the icon ---------- */
.isBusy { pointer-events: none; }
.button.isBusy, .linkButton.isBusy { opacity: 0.88; transform: none; }
.busySpinner { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; animation: busySpin 0.7s linear infinite; }
.isBusy > .busySpinner + svg, .isBusy > .busySpinner + .ico { display: none; }
.linkButton.isBusy .busySpinner { margin-right: 0.35em; }
@keyframes busySpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busySpinner { animation-duration: 1.6s; } }

/* ---------- Comparison pages (compare.html and the *-alternative pages) ---------- */
.vsIntro { padding-bottom: 10px; }
.vsIntro .callout { max-width: 760px; margin-bottom: 0; }
.vsIntro .callout a { color: var(--ink); text-decoration-color: var(--mango-ink); text-underline-offset: 3px; }
.compare.vs { padding-top: clamp(64px, 8vw, 100px); }
.compareTable.wide { min-width: 980px; }
.compareTable.wide thead th { font-size: 18px; vertical-align: bottom; }
.compareTable.wide td:first-child { width: 190px; }
.compareTable td small { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.compareTable tbody td { vertical-align: middle; line-height: 1.4; }
.no { display: inline-block; width: 12px; height: 1.5px; background: var(--ink-3); vertical-align: middle; }
.vsLegend { margin: 16px 0 0; font-size: 14px; color: var(--ink-3); max-width: 46em; }
.vsLegend .yes, .vsLegend .no { margin-right: 6px; }
.vsSection { padding-top: clamp(80px, 10vw, 120px); }
.rivals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.rival { display: flex; flex-direction: column; padding: 26px 24px; background: #fffdf8; border: 1px solid var(--rule); border-radius: 20px; box-shadow: 0 1px 2px rgba(60, 40, 15, 0.05), 0 18px 40px -30px rgba(60, 40, 15, 0.35); }
.rival h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.025em; }
.rival .rivalKind { margin: 0 0 12px; font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rival p { margin: 0 0 12px; color: var(--ink-2); font-size: 15.5px; }
.rival .pick { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink); }
.rival .pick b { color: var(--mango-text); font-weight: 600; }
.rival a.more { margin-top: 14px; font: 600 15px var(--display); color: var(--ink); text-decoration-color: var(--mango-ink); text-underline-offset: 4px; }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.picks .rival ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: 15.5px; }
.picks .rival li + li { margin-top: 8px; }
.picks .rival.ours { border: 1.5px solid var(--mango); }
.vsLinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vsLinks a { display: block; padding: 18px 18px 16px; border: 1px solid var(--rule-2); border-radius: 16px; color: var(--ink); text-decoration: none; transition: border-color 200ms var(--ease), transform 200ms var(--ease); }
.vsLinks a:hover { border-color: var(--mango); transform: translateY(-1px); }
.vsLinks b { display: block; font: 600 17px var(--display); letter-spacing: -0.02em; }
.vsLinks span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.vsLinks a[aria-current='page'] { display: none; }
.vsSources { margin: 0; padding-left: 1.1em; color: var(--ink-3); font-size: 14px; }
.vsSources li + li { margin-top: 4px; }
.vsSources a { color: var(--ink-2); text-decoration-color: var(--rule-2); text-underline-offset: 3px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .rivals, .picks { grid-template-columns: 1fr; }
  .vsLinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .compareTable.wide { min-width: 860px; }
  .vsLinks { grid-template-columns: 1fr; }
}