/* =========================================================================
   ImageNotion — freestyle design system
   A light, editorial, minimal-colour theme. One accent per surface.
   ========================================================================= */

:root {
  /* Ink & paper — clean, cool light theme with a faint green tint.
     Even sections use the lighter surface; odd (.section--alt) a soft
     green-grey. Cards are clean white. */
  --ink: #12211b;          /* cool near-black, faint green */
  --ink-2: #3a4a43;        /* slate-green ink */
  --muted: #6d817a;        /* muted slate-green */
  --line: #dde5e1;         /* cool separator */
  --line-2: #c6d2cc;       /* stronger cool separator */
  --paper: #f3f7f5;        /* cool paper (page + even sections) */
  --paper-2: #e7efeb;      /* soft green-grey (odd .section--alt) */
  --paper-3: #eef4f1;      /* soft cool panel */
  --card: #ffffff;         /* clean white card */
  --cork-tan: #cbd8d2;     /* neutral surface tone */

  /* Brand accents */
  --house: #3d5afe;
  --anywhere: #13a05b;
  --anywhere-soft: #e7f6ee;
  --mailboard: #ec9a1e;
  --mailboard-soft: #f8ecdd;   /* app kPrimaryLightColor */
  --mailboard-deep: #c56600;   /* app kPrimaryColor (burnt cork-orange) */
  --awaberry: #c56600;         /* awaBerry brand orange = app kPrimaryColor. Green is
                                  reserved for Anywhere AI so the two sites read apart. */
  --awaberry-soft: #f8ecdd;    /* app kPrimaryLightColor */
  --awaberry-warm: #e07820;    /* the warm dot on the logo */

  /* Active accent (overridden per product via body theme classes) */
  --accent: var(--awaberry);
  --accent-soft: var(--awaberry-soft);
  --accent-ink: #2c2218;

  --radius: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06), 0 2px 8px rgba(20, 22, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.08), 0 2px 6px rgba(20, 22, 26, 0.04);
  --shadow-lg: 0 24px 60px rgba(20, 22, 26, 0.14);

  --container: 1180px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Inter Tight", var(--font);
}

body.theme-anywhere {
  --accent: var(--anywhere);
  --accent-soft: var(--anywhere-soft);
}
body.theme-mailboard {
  --accent: var(--mailboard);
  --accent-soft: var(--mailboard-soft);
}
body.theme-awaberry {
  --accent: var(--awaberry);
  --accent-soft: var(--awaberry-soft);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 .5em; color: var(--ink); }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }

/* ------------------------------------------------------------- utilities */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font); font-weight: 700; font-size: .76rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }
.lead { font-size: 1.22rem; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }
.section { padding: 92px 0; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--paper-2); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lead { color: rgba(255,255,255,.74); }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; }
h2.xl { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3.lg { font-size: 1.5rem; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font); font-weight: 650; font-size: .98rem;
  padding: .82rem 1.4rem; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--on-ink { background: #fff; color: var(--ink); }
.btn--on-ink:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--ghost-ink { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.btn--ghost-ink:hover { border-color: #fff; transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row, .btn-row.center { justify-content: center; align-items: center; }
.store-icons { display: inline-flex; align-items: center; gap: .5rem; color: inherit; }
.store-icons svg { width: 18px; height: 18px; }
.link-arrow { font-weight: 650; color: var(--accent); display: inline-flex; align-items: center; gap: .35rem; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .15s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(243,247,245,.85); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__row { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .96rem; color: var(--ink-2);
}
.nav__link:hover, .nav__item:hover .nav__link, .nav__link.is-active { color: var(--ink); background: var(--paper-2); }
.nav__caret { width: 14px; height: 14px; opacity: .5; }
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 290px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .18s ease;
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; }
.nav__menu a:hover { background: var(--paper-2); }
.nav__menu strong { font-weight: 650; font-size: .96rem; }
.nav__menu span { font-size: .82rem; color: var(--muted); }
.nav__menu a:hover strong { color: var(--accent); }
.nav__item[data-theme="anywhere"] .nav__menu a:hover strong { color: var(--anywhere); }
.nav__item[data-theme="mailboard"] .nav__menu a:hover strong { color: var(--accent); }

.header-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.login-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 9px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-2); font-weight: 600; font-size: .85rem; background: #fff;
  transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.login-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.login-pill .berry { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.login-pill--anywhere:hover { border-color: var(--anywhere); }
.login-pill--mailboard:hover { border-color: var(--accent); }
.login-pill .berry--anywhere { background: var(--anywhere); }
.login-pill .berry--mailboard { background: var(--accent); }
.login-pill small { display: block; font-weight: 500; font-size: .68rem; color: var(--muted); line-height: 1; margin-bottom: 2px; }

.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); align-items: center; justify-content: center; transition: color .15s ease, transform .15s ease; }
.burger:hover { color: var(--accent); transform: translateY(-2px); }
.burger svg { width: 22px; height: 22px; }

/* settings icon + popup (language + appearance) */
.settings { position: relative; display: flex; }
.settings__btn {
  width: 42px; height: 42px; border-radius: 12px;
  border: 0; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.settings__btn:hover { color: var(--accent); transform: translateY(-2px); }
.settings__btn svg { width: 20px; height: 20px; }
.settings__popup {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  width: 250px; padding: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: grid; gap: 16px;
}
.settings__popup[hidden] { display: none; }
.settings__group { display: grid; gap: 8px; }
.settings__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.settings__select {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
}
.settings__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.settings__seg-btn {
  padding: 9px 6px; border-radius: 10px; border: 1.5px solid var(--line-2);
  background: var(--paper); color: var(--ink-2);
  font: inherit; font-weight: 650; font-size: .84rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.settings__seg-btn:hover { border-color: var(--accent); color: var(--ink); }
.settings__seg-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* open-app button — the brand-orange primary "app" box on the header */
.open-app {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: linear-gradient(155deg, #e07820 0%, #c56600 55%, #9c4f00 100%);
  color: #fff; font-weight: 650; font-size: .9rem;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.open-app:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.open-app .berry { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.open-app svg { width: 17px; height: 17px; }
/* the secondary "Web app" box — outlined, opens the web app in a new tab */
.open-app--ghost {
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line-2);
}
.open-app--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- mobile */
.mobile-panel {
  position: fixed; inset: 0; z-index: 200; background: #fff; padding: 22px;
  transform: translateX(100%); transition: transform .26s ease; overflow-y: auto;
}
body.menu-open .mobile-panel { transform: translateX(0); }
body.menu-open { overflow: hidden; }
.mobile-panel__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-panel__close { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 1.4rem; }
.mobile-group { border-top: 1px solid var(--line); padding: 14px 0; }
.mobile-group > a { font-family: var(--display); font-weight: 800; font-size: 1.25rem; display: block; margin-bottom: 8px; }
.mobile-group__children { display: grid; gap: 2px; }
.mobile-group__children a { padding: 8px 0; color: var(--ink-2); font-weight: 550; }
.mobile-logins { display: grid; gap: 10px; margin-top: 18px; }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding: 70px 0 40px; }
/* 3-zone layout: headline (head) + image (art) + supporting text (body).
   Desktop keeps head/body stacked beside the image; mobile puts the image
   between the headline and the body text. */
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  column-gap: 56px; row-gap: 0; align-items: center;
  grid-template-areas: "head art" "body art";
}
.hero__head { grid-area: head; }
.hero__body { grid-area: body; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.hero .accent { color: var(--accent); }
.hero__art { position: relative; grid-area: art; }

/* hero: a dark cork board with the Mailboard AI logo centred and coloured
   sticky notes that pop in one every 2s, looping. */
.hero--cork { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 71px); }
.hero--cork .hero__grid { align-items: center; column-gap: 72px; row-gap: 0; }
.hero-board {
  position: relative;
  width: 100%;
  min-height: min(66vh, 560px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .45);
  box-shadow: var(--shadow-lg), inset 0 0 120px rgba(0, 0, 0, .5);
  background: radial-gradient(120% 120% at 50% -10%, #6a4728 0%, #452e1a 55%, #2c1d10 100%);
  display: grid;
  place-items: center;
}
/* real cork grain: coarse granule patches (::before) + fine speckle (::after),
   both grayscale fractal noise with boosted contrast, blended onto the brown */
.hero-board::before,
.hero-board::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: overlay;
}
.hero-board::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2' intercept='-0.5'/><feFuncG type='linear' slope='2' intercept='-0.5'/><feFuncB type='linear' slope='2' intercept='-0.5'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>");
  background-size: 340px 340px;
  opacity: .5;
}
.hero-board::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.6' intercept='-0.8'/><feFuncG type='linear' slope='2.6' intercept='-0.8'/><feFuncB type='linear' slope='2.6' intercept='-0.8'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23c)'/></svg>");
  background-size: 200px 200px;
  opacity: .8;
}
.hero-board__logo {
  position: relative; z-index: 1;
  width: min(48%, 260px); height: auto;
  filter: brightness(1.9) saturate(1.05) drop-shadow(0 2px 12px rgba(0, 0, 0, .5));
  opacity: .96;
}
/* outer = position + rotation (static); inner card = the animated sticky note.
   Splitting them lets one shared "fall" keyframe serve every note. */
.hero-note {
  position: absolute; z-index: 2;
  width: clamp(120px, 21%, 178px);
}
.hero-note__card {
  display: block; position: relative;
  padding: 13px 15px 14px;
  border-radius: 8px;
  font-family: var(--font); font-weight: 700; font-size: .95rem; line-height: 1.25;
  color: #2a1f10;
  background: var(--note-bg, #ffd75a);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .45);
  opacity: 0;
  transform-origin: 50% -30px; /* swing/fall from around the pin */
  animation: noteFall 8s infinite both;
}
.hero-note__card::before { /* pin */
  content: ""; position: absolute; top: -8px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), transparent 45%), #b23a2c;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}
.hero-note--1 { top: 8%;  left: 5%;   transform: rotate(-4deg); --note-bg: #ffd75a; }
.hero-note--2 { top: 11%; right: 5%;  transform: rotate(3deg);  --note-bg: #f6a8c6; }
.hero-note--3 { bottom: 11%; left: 8%; transform: rotate(3deg);  --note-bg: #a7d879; }
.hero-note--4 { bottom: 8%; right: 7%; transform: rotate(-3deg); --note-bg: #8ec9f0; }
/* desktop: each note loops on its own (appear → hold ~3s → fall) — no full reset */
.hero-note--1 .hero-note__card { animation-delay: 0s; }
.hero-note--2 .hero-note__card { animation-delay: 2s; }
.hero-note--3 .hero-note__card { animation-delay: 4s; }
.hero-note--4 .hero-note__card { animation-delay: 6s; }
@keyframes noteFall {
  0%   { opacity: 0; transform: translateY(-6px) scale(.55); }
  6%   { opacity: 1; transform: translateY(0) scale(1.06); }
  9%   { transform: translateY(0) rotate(0) scale(1); }
  44%  { opacity: 1; transform: translateY(0) rotate(0) scale(1); }   /* ~3s displayed */
  48%  { opacity: 1; transform: translateY(6%) rotate(6deg) scale(1); }
  56%  { opacity: 0; transform: translateY(230%) rotate(16deg) scale(.92); } /* fall + fade */
  100% { opacity: 0; transform: translateY(230%) rotate(16deg) scale(.92); }
}
/* mobile: one sticker at a time — longer cycle, non-overlapping slots */
@keyframes noteFallM {
  0%   { opacity: 0; transform: translateY(-8px) scale(.6); }
  2.2% { opacity: 1; transform: translateY(0) scale(1.06); }
  4%   { transform: translateY(0) rotate(0) scale(1); }
  20%  { opacity: 1; transform: translateY(0) rotate(0) scale(1); }   /* ~3s displayed */
  24%  { opacity: 1; transform: translateY(5%) rotate(6deg) scale(1); }
  30%  { opacity: 0; transform: translateY(260%) rotate(16deg) scale(.9); } /* fall + fade */
  100% { opacity: 0; transform: translateY(260%) rotate(16deg) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-note__card { animation: none; opacity: 1; }
}

/* board-shot crossfade — real product frames, reused in "The idea" */
.shot-seq {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 580;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: #19110a;
}
.shot-seq__item { position: absolute; inset: 0; }
.shot-seq__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-seq__item:nth-child(n+2) { opacity: 0; }
.shot-seq__item:nth-child(2) { animation: shotSeq 16s infinite; }
.shot-seq__item:nth-child(3) { animation: shotSeq 16s infinite 8s; }
@keyframes shotSeq {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  42%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .shot-seq__item { animation: none !important; } }
/* let the shot fill the height of the text column beside it (desktop) */
.split--fill { align-items: stretch; }
.split--fill .split__media { display: flex; }
.split--fill .shot-seq { aspect-ratio: auto; height: 100%; min-height: 340px; }

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.badge { display: inline-flex; align-items: center; gap: .5rem; padding: 8px 14px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* dotted backdrop */
.dotfield { position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 26px 26px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 75%);
}

/* ------------------------------------------------------- product splits  */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.product-card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; overflow: hidden; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--card-accent, var(--house)); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.product-card--anywhere { --card-accent: var(--anywhere); }
.product-card--mailboard { --card-accent: var(--accent); }
.product-card__kicker { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--card-accent); }
.product-card h3 { font-size: 1.8rem; margin-top: 8px; }
.product-card__art { margin: 8px -12px 18px; }
.product-card .btn-row { margin-top: auto; padding-top: 18px; }

/* --------------------------------------------------------------- feature */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  transition: transform .16s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.section--alt .feature { background: #fff; }
.feature__icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.18rem; margin-bottom: 6px; }
.feature p { font-size: .98rem; color: var(--ink-2); margin: 0; }

/* ------------------------------------------------ "why it's different" stickers
   The feature boxes read like sticky notes pinned to the cork board: each sits
   at a slight, varied tilt, carries a push-pin ("needle") in alternating red /
   yellow, and takes a slightly different tint of the same warm palette.
   The tilt uses the independent `rotate` property so it never fights the
   `.reveal` scroll-in transform (which animates `transform`). */
.grid--stickers { row-gap: 40px; }
.grid--stickers .feature {
  position: relative;
  border-radius: 5px;
  border-color: rgba(44, 34, 24, .08);
  box-shadow: var(--shadow-md);
  --pin: #e53935;            /* red needle (default) */
  --pin-hi: #ff8a80;
}
/* alternate red and yellow needles across the boxes */
.grid--stickers .feature:nth-child(2n) { --pin: #f6b60c; --pin-hi: #ffe082; }

/* each sticker a slightly different tint within the same warm palette (light) */
.grid--stickers .feature:nth-child(6n+1) { background: #fbf9f5; }
.grid--stickers .feature:nth-child(6n+2) { background: #f8ecdd; }
.grid--stickers .feature:nth-child(6n+3) { background: #f4ead6; }
.grid--stickers .feature:nth-child(6n+4) { background: #efe3cc; }
.grid--stickers .feature:nth-child(6n+5) { background: #f7efe0; }
.grid--stickers .feature:nth-child(6n)   { background: #f1e7d2; }

/* varied tilt so they read like hand-stuck notes */
.grid--stickers .feature:nth-child(3n+1) { rotate: -1.4deg; }
.grid--stickers .feature:nth-child(3n+2) { rotate:  0.8deg; }
.grid--stickers .feature:nth-child(3n)   { rotate:  1.6deg; }
.grid--stickers .feature:hover { rotate: 0deg; }

/* the push-pin head */
.grid--stickers .feature::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  width: 16px; height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pin-hi) 0 22%, var(--pin) 62%);
  box-shadow: 0 2px 4px rgba(20, 22, 26, .35);
  z-index: 2;
}
/* the thin metal shaft under the pin head */
.grid--stickers .feature::after {
  content: "";
  position: absolute;
  top: 1px; left: 50%;
  width: 2px; height: 9px;
  transform: translateX(-50%) rotate(9deg);
  background: linear-gradient(#e7e2d8, #9c968a);
  z-index: 1;
}

/* dark mode: keep the sticky-note tints in the warm ebony family */
html.dark .grid--stickers .feature:nth-child(6n+1) { background: #31230f; }
html.dark .grid--stickers .feature:nth-child(6n+2) { background: #2a1d12; }
html.dark .grid--stickers .feature:nth-child(6n+3) { background: #362615; }
html.dark .grid--stickers .feature:nth-child(6n+4) { background: #241a10; }
html.dark .grid--stickers .feature:nth-child(6n+5) { background: #2f2113; }
html.dark .grid--stickers .feature:nth-child(6n)   { background: #281c11; }

/* download page: official store badges */
.store-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; min-height: 120px; }
.store-badge { height: 46px; width: auto; }
.store-soon { font-size: .85rem; font-weight: 600; color: var(--muted); }
/* Scannable store link (iOS / Android only — see download/index.njk). The white
   plate is not decoration: a QR drawn on this site's dark background is
   unreadable to most scanners. Hidden on phones, where the reader is already on
   the device the app is for and can simply tap the badge. */
.store-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.store-qr .qr { width: 112px; height: 112px; background: #fff; padding: 6px; border-radius: 10px; display: block; }
.store-qr__hint { font-size: .75rem; color: var(--muted); }
@media (max-width: 640px) { .store-qr { display: none; } }
.store-badge-link { display: inline-flex; transition: transform .16s ease; }
.store-badge-link:hover { transform: translateY(-2px); }
.store-web { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 46px; padding: 0 22px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); font-weight: 600; transition: transform .16s ease; }
.store-web:hover { transform: translateY(-2px); }
.store-web svg { width: 30px; height: 30px; flex: none; }

/* split media row */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 56px; row-gap: 0; align-items: center;
  grid-template-areas: "head media" "body media";
}
.split--media-left { grid-template-areas: "media head" "media body"; }
.split__head { grid-area: head; }
.split__body { grid-area: body; }
.split__media { grid-area: media; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.split__media.bare { background: none; border: none; padding: 0; }
.checks { list-style: none; display: grid; gap: 12px; margin: 18px 0 0; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; color: var(--ink-2); }
.checks svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 1px; }

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; }
.step__n { font-family: var(--display); font-weight: 800; font-size: 1rem; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.step h3 { font-size: 1.15rem; }
.step p { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* connect "How it works": small video (left) + bigger stacked steps (right) */
.connect-how {
  display: grid;
  grid-template-columns: 1fr 1.618fr; /* small video, bigger steps (golden cut) */
  gap: 40px;
  align-items: center;
  margin-top: 8px;
}
.connect-how__media { min-width: 0; }
.connect-how__steps { display: grid; gap: 18px; } /* each step on its own line */
@media (max-width: 860px) {
  .connect-how { grid-template-columns: 1fr; gap: 26px; }
}

/* pricing */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; }
.plan--featured { border: 1.5px solid var(--accent); box-shadow: var(--shadow-md); position: relative; }
.plan__tag { position: absolute; top: -13px; left: 30px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); }
.plan h3 { font-size: 1.3rem; margin-bottom: 2px; }
.plan__price { font-family: var(--display); font-weight: 800; font-size: 2.4rem; margin: 10px 0 2px; }
.plan__price small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.plan__sub { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.plan .checks { margin-bottom: 24px; }
.plan .checks li { font-size: .95rem; }
.plan .btn { margin-top: auto; justify-content: center; }

/* big CTA */
.cta { border-radius: var(--radius-lg); background: var(--ink); color: #fff; padding: 64px; text-align: center; position: relative; overflow: hidden; }
.cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.cta .lead { color: rgba(255,255,255,.74); margin-inline: auto; }
.cta__glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); opacity: .5; }
.cta__glow--1 { background: var(--anywhere); top: -180px; left: -80px; }
.cta__glow--2 { background: var(--accent); bottom: -200px; right: -60px; }
.cta__inner { position: relative; z-index: 1; }

/* prose (legal) */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.4rem; margin-top: 2em; }
.prose h3 { font-size: 1.12rem; margin-top: 1.6em; }
.prose h4 { font-size: 1rem; margin-top: 1.2em; color: var(--ink); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); font-weight: 600; }

/* logos / stat band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat { text-align: center; }
.stat__n { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--ink); }
.stat__l { color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 70px 0 30px; }
.site-footer h4 { color: #fff; font-family: var(--font); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer a { color: rgba(255,255,255,.7); display: block; padding: 5px 0; }
.site-footer a:hover { color: #fff; }
.footer-brand img { height: 34px; margin-bottom: 16px; filter: brightness(1.8) saturate(1.1); }
.footer-brand p { max-width: 34ch; font-size: .95rem; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.footer-bottom a { display: inline; }
.footer-version { text-align: right; font-size: .68rem; color: rgba(255,255,255,.4); margin-top: 8px; letter-spacing: .02em; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* --------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .nav, .header-cta .open-app { display: none; }
  .burger { display: flex; }
  .hero__grid, .split, .products { grid-template-columns: 1fr; gap: 34px; }
  /* stacked: headline on top (full width), then image, then the body text */
  .hero__grid { grid-template-areas: "head" "art" "body"; row-gap: 28px; }
  .split, .split--media-left { grid-template-areas: "head" "media" "body"; row-gap: 28px; }
  .hero--cork .hero__grid { row-gap: 28px; }
  .hero-board { min-height: 0; height: 46svh; }
  .hero-note__card { font-size: .85rem; padding: 10px 12px 11px; }
  /* the board shot uses most of the screen height below the text */
  .split--fill .shot-seq { height: 84svh; min-height: 0; }
  .grid--3, .grid--4, .steps, .plan-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta { padding: 44px 24px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .grid--3, .grid--4, .steps, .plan-grid, .grid--2, .stats, .footer-grid { grid-template-columns: 1fr; }
  /* tighter hero; drop the badges */
  .hero--cork { min-height: calc(100svh - 71px); padding: 16px 0 26px; }
  .hero--cork .hero__grid { row-gap: 26px; }
  .hero--cork .badge-row { display: none; }
  /* single-column track; also hard-cap the text to the viewport so a long
     line (the lead is 60ch) can never widen the column past the screen */
  .hero--cork .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--cork .hero__grid > * { max-width: calc(100vw - 48px); min-width: 0; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); overflow-wrap: break-word; }
  .hero .lead { font-size: 1.06rem; max-width: calc(100vw - 48px); }

  /* --- mobile hero board: much taller, logo near the golden-ratio line,
     one readable sticker at a time, centred below the logo --- */
  .hero-board { height: 74svh; display: block; }
  .hero-board__logo {
    position: absolute; top: 30%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(66%, 300px);
  }
  /* stickers fill the whole lower board — from just under the logo down to the
     bottom edge — instead of a small note floating mid-board (MAW-17) */
  .hero-note {
    top: 42%; left: 16px; right: 16px; bottom: 18px;
    width: auto;
    transform: none;
  }
  .hero-note__card {
    width: 100%; height: 100%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.3rem, 6.4vw, 1.7rem); line-height: 1.32;
    padding: 20px 22px;
    text-align: center;
    animation-name: noteFallM; animation-duration: 18s;
  }
  .hero-note--1 .hero-note__card { animation-delay: 0s; }
  .hero-note--2 .hero-note__card { animation-delay: 4.5s; }
  .hero-note--3 .hero-note__card { animation-delay: 9s; }
  .hero-note--4 .hero-note__card { animation-delay: 13.5s; }
}
@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  /* stickers overlap in one slot, so only keep the first when animation is off */
  .hero-note:not(.hero-note--1) { display: none; }
}

/* =========================================================================
   Mailboard AI additions — cork / ebony flavour, video placeholder,
   image berries, and the user-manual layout.
   ========================================================================= */

/* --- deep-ink / green surface tokens --- */
:root {
  --ebony: #0f1a15;
  --ebony-2: #16261f;
  --cork: #c7e6d5;
  --cork-soft: #e7f6ee;
  /* subtle green speckle used on alt sections + hero dotfield */
  --cork-dot-1: rgba(19, 160, 91, .16);
  --cork-dot-2: rgba(45, 90, 74, .12);
}

/* --- header / footer logo sizing for the PNG wordmark --- */
.brand img { height: 30px; width: auto; }

/* --- header login pills now use image berries --- */
.login-pill img.berry { width: 18px; height: 18px; border-radius: 0; object-fit: contain; }

/* --- warm cards in light mode (app surfaceBox, not pure white) --- */
:root:not(.dark) .feature,
:root:not(.dark) .product-card,
:root:not(.dark) .plan,
:root:not(.dark) .step,
:root:not(.dark) .nav__menu,
:root:not(.dark) .login-pill,
:root:not(.dark) .subpagelink,
:root:not(.dark) .section-block,
:root:not(.dark) .manual-sidebar,
:root:not(.dark) .theme-toggle,
:root:not(.dark) .section--alt .feature { background: var(--card); }

/* odd sections (.section--alt) read as a real cork board: cork-tan tint with
   the app's two-tone speckle texture overlaid */
:root:not(.dark) .section--alt {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(var(--cork-dot-1) 1.1px, transparent 1.5px),
    radial-gradient(var(--cork-dot-2) 1.1px, transparent 1.5px);
  background-size: 14px 14px, 14px 14px;
  background-position: 0 0, 7px 7px;
}

/* --- cork-tinted hero backdrop on the homepage --- */
.hero--cork {
  background:
    radial-gradient(120% 90% at 85% -10%, var(--cork) 0%, rgba(210,180,140,0) 55%),
    radial-gradient(90% 80% at -10% 0%, var(--cork-soft) 0%, rgba(243,227,201,0) 60%);
}
.hero--cork .dotfield {
  background-image:
    radial-gradient(var(--cork-dot-1) 1px, transparent 1.4px),
    radial-gradient(var(--cork-dot-2) 1px, transparent 1.4px);
  background-size: 13px 13px, 13px 13px;
  background-position: 0 0, 6px 6px;
  opacity: .6;
}

/* --- ebony section (dark cork-board band) --- */
.section--ebony {
  background:
    radial-gradient(140% 120% at 50% -20%, var(--ebony-2) 0%, var(--ebony) 60%);
  color: rgba(255,255,255,.82);
}
.section--ebony h1, .section--ebony h2, .section--ebony h3 { color: #fff; }
.section--ebony .lead { color: rgba(255,255,255,.74); }

/* --- product video + feature highlights --- */
.video-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  column-gap: 56px; row-gap: 8px;
  align-items: center;
  padding-top: 48px;
  grid-template-areas: "media head" "media body";
}
.video-split__head { grid-area: head; }
.video-split__body { grid-area: body; }
.video-split__media { grid-area: media; display: flex; justify-content: center; }
/* solo variant (videoboard): video + one free-form text column (no head/body split) */
.video-split--solo { grid-template-areas: "media body"; }
.video-split--solo .video-split__features { grid-area: body; }
.video-phone {
  display: block;
  /* never taller than the visible space — width follows from the phone ratio */
  height: min(72vh, 640px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 1170 / 2532;
  border-radius: 32px;
  border: 1px solid var(--line);
  background: #19110a;
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

/* device toggle (top-right of the section) */
.video-toggle {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow-sm);
}
.video-toggle__btn {
  width: 42px; height: 34px; border: none; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.video-toggle__btn svg { width: 20px; height: 20px; }
.video-toggle__btn:hover { color: var(--ink); }
.video-toggle__btn.is-active { background: var(--accent); color: #fff; }

/* fullscreen desktop walkthrough */
.video-desktop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10,7,4,.92);
  backdrop-filter: blur(4px);
}
.video-desktop[hidden] { display: none; }
body.video-fullscreen { overflow: hidden; }
.video-desktop__media {
  display: block;
  height: 100%; width: auto;
  max-width: 100%; max-height: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  background: #19110a;
}
.video-desktop__toggle {
  position: fixed; top: 18px; right: 18px; z-index: 201;
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; backdrop-filter: blur(6px);
}
.video-desktop__toggle .video-toggle__btn { color: rgba(255,255,255,.8); }
.video-desktop__toggle .video-toggle__btn:hover { color: #fff; }
.video-desktop__toggle .video-toggle__btn.is-active { background: var(--accent); color: #fff; }

.vfeatures { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 22px; }
.vfeatures li { display: flex; gap: 16px; align-items: flex-start; }
.vfeatures__icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.vfeatures__icon svg { width: 22px; height: 22px; }
.vfeatures h3 { margin: 2px 0 4px; font-size: 1.12rem; }
.vfeatures p { margin: 0; color: var(--muted); }

@media (max-width: 860px) {
  /* heading first, then the video, then the feature list below */
  .video-split { grid-template-columns: 1fr; column-gap: 0; row-gap: 26px; justify-items: center; padding-top: 0; grid-template-areas: "head" "media" "body"; }
  .video-split__head, .video-split__body { width: 100%; }
  .video-phone { height: min(82vh, 760px); }
  /* no desktop walkthrough on mobile — hide the device toggle entirely */
  .video-toggle { display: none; }
}

/* ------------------------------------------------------- user manual */
/* breadcrumb sits above the page's help text (full width in the content column) */
.manual-crumb { color: var(--muted); font-weight: 600; font-size: .92rem; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.manual-crumb a { color: var(--accent); }
.manual-crumb span { opacity: .6; }

.manual-layout { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; }

.manual-sidebar {
  position: sticky; top: 90px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
}
.manual-sidebar__toggle {
  width: 100%; background: none; border: none; padding: 0; font-family: inherit;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
}
.manual-sidebar__caret { width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.manual-sidebar.is-open .manual-sidebar__caret { transform: rotate(180deg); }
.manual-sidebar__nav { margin-top: 12px; }
/* desktop: full table of contents always visible on the left (as before) */
@media (min-width: 981px) {
  .manual-sidebar__nav { display: block; }
  .manual-sidebar__toggle { cursor: default; }
  .manual-sidebar__caret { display: none; }
}
.manual-sidebar__group { margin-bottom: 4px; }
.manual-sidebar__link { display: block; padding: 8px 10px; border-radius: 9px; font-weight: 650; font-size: .95rem; color: var(--ink-2); }
.manual-sidebar__link:hover { background: var(--paper-2); color: var(--ink); }
.manual-sidebar__link.is-active { background: var(--accent-soft); color: var(--ink); }
.manual-sidebar__children { display: grid; padding: 2px 0 6px 10px; margin-left: 6px; border-left: 1px solid var(--line); }
.manual-sidebar__sublink { padding: 6px 10px; border-radius: 8px; font-size: .9rem; color: var(--muted); }
.manual-sidebar__sublink:hover { background: var(--paper-2); color: var(--ink-2); }
.manual-sidebar__sublink.is-active { color: var(--accent); font-weight: 650; }

/* manual content: reuse the prose look, style the doc-template sections */
.manual-content { max-width: 800px; }
.manual-content header h1 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 6px; }
.manual-content h2 { font-size: 1.35rem; margin: 0 0 .6em; }
.manual-content h3 { font-size: 1.08rem; margin: 1.4em 0 .4em; }
.manual-content p, .manual-content li { color: var(--ink-2); }
.manual-content code { background: var(--paper-3); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.manual-content a { color: var(--accent); font-weight: 600; }
.section-block {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; margin-bottom: 22px;
}
.summary-section { background: var(--accent-soft); border-color: #f0dcb4; }
.section-block ul, .section-block ol { padding-left: 1.2em; }
.section-block li { margin-bottom: 6px; }
.section-block ul { list-style: disc; }
.section-block ol { list-style: decimal; }
.section-block ul ul { list-style: circle; margin-top: 6px; }
.scenario-executions h3 { border-top: 1px solid var(--line); padding-top: 16px; }
.scenario-executions h3:first-of-type { border-top: none; padding-top: 0; }

.subpagelinks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.subpagelink { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; transition: transform .16s ease, box-shadow .2s ease; }
.subpagelink:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.subpagelink a { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.subpagelink a:hover { color: var(--accent); }
.subpagelink p { margin: 6px 0 0; font-size: .92rem; color: var(--muted); }
.additionalPageLinks:empty { display: none; }

@media (max-width: 980px) {
  .manual-layout { grid-template-columns: 1fr; gap: 28px; }
  .manual-sidebar { position: static; }
  /* collapsed by default on mobile; the toggle button expands it */
  .manual-sidebar__nav { display: none; }
  .manual-sidebar.is-open .manual-sidebar__nav { display: block; }
}
@media (max-width: 620px) {
  .subpagelinks { grid-template-columns: 1fr; }
}

/* --- dark-mode toggle button --- */
/* language switcher (EN / DE) */
.lang-switch {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line-2); border-radius: 12px; overflow: hidden;
}
.lang-switch__opt {
  padding: 7px 9px; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); line-height: 1;
}
.lang-switch__opt:hover { color: var(--ink); }
.lang-switch__opt.is-active { background: var(--accent); color: #fff; }
.mobile-lang { display: flex; gap: 18px; margin-top: 14px; }
.mobile-lang a { font-weight: 650; color: var(--ink-2); }
.mobile-lang a[aria-current] { color: var(--accent); }

.theme-toggle {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1.5px solid var(--line-2); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: flex; }
html.dark .theme-toggle__sun { display: flex; }
html.dark .theme-toggle__moon { display: none; }

/* =========================================================================
   DARK MODE — deep slate-green.
   Cool ink surfaces with a green accent, matching the Anywhere AI brand.
   ========================================================================= */
html.dark {
  --ink: #eaf2ee;
  --ink-2: #bcccc5;
  --muted: #8aa39a;
  --line: rgba(220,235,228,.12);
  --line-2: rgba(220,235,228,.22);
  --paper: #0e1613;
  --paper-2: #131e19;
  --paper-3: #18261f;
  --card: #18261f;          /* dark card surface (was white) — fixes tables,
                               the enterprise band and the Web app button */

  --accent: var(--awaberry);
  --accent-soft: #33200c;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
}
/* `body.theme-anywhere` re-declares --accent-soft (to the light tint) and, being
   a closer ancestor than `html.dark`, would otherwise win — keeping soft-accent
   surfaces light in dark mode. Re-assert the dark tint at body level so the
   comparison tables and soft-accent chips read correctly in dark mode. */
html.dark body { --accent-soft: #33200c; }

/* deep slate background with a faint green wash */
html.dark body {
  background-color: var(--paper);
  background-image: linear-gradient(180deg, #10201a 0%, #0e1613 60%);
  background-attachment: fixed;
}

/* panels & cards become deep slate instead of white */
html.dark .feature,
html.dark .product-card,
html.dark .plan,
html.dark .step,
html.dark .nav__menu,
html.dark .login-pill,
html.dark .subpagelink,
html.dark .section-block,
html.dark .manual-sidebar,
html.dark .theme-toggle,
html.dark .settings__btn,
html.dark .settings__popup,
html.dark .settings__select,
html.dark .settings__seg-btn {
  background: #18261f;
  border-color: var(--line);
}
html.dark .settings__select,
html.dark .settings__seg-btn { color: rgba(255,255,255,.82); }
html.dark .settings__seg-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
html.dark .section--alt .feature { background: #1c2c24; }
html.dark .summary-section { background: #33200c; border-color: rgba(197,102,0,.30); }

/* translucent header */
html.dark .site-header {
  background: rgba(14,22,19,.82);
  border-bottom-color: var(--line);
}

/* sturdy dark surfaces that previously relied on --ink being dark */
html.dark .site-footer { background: #0a110e; }
html.dark .cta,
html.dark .section--ink { background: linear-gradient(160deg, #16261f 0%, #0c1310 100%); }
html.dark .vfeatures__icon {
  background: rgba(255,255,255,.06);
}
html.dark .mobile-panel { background: #0e1613; }

/* keep the "on ink" button readable (it sits on a light pill) */
.btn--on-ink { color: #0e1613; }

/* soft warm glow on the homepage hero */
html.dark .hero--cork {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(224,120,32,.16) 0%, rgba(224,120,32,0) 55%),
    radial-gradient(90% 80% at -10% 0%, rgba(224,120,32,.08) 0%, rgba(224,120,32,0) 60%);
}
html.dark .hero--cork .dotfield {
  background-image: radial-gradient(rgba(232,180,120,.30) 1px, transparent 1px);
  opacity: .28;
}
html.dark .mobile-group__children a { color: var(--ink-2); }

/* =========================================================================
   Anywhere AI additions — looping hero + landscape section videos.
   ========================================================================= */

/* homepage hero video (endless, muted, autoplaying) sitting in the art column.
   Videos are portrait 9:16 — never cropped. On desktop the video fills the
   available height (capped) and its width follows the 9:16 ratio; it's centred
   in the art column. On mobile it goes full width. */
.hero-video {
  display: block;
  width: auto;
  height: min(64vh, 520px);
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #0e1613;
  box-shadow: var(--shadow-lg);
}
/* desktop: on the homepage make the hero video large and prominent (fills most
   of the hero height); interior page heroes keep the moderate size above. */
@media (min-width: 981px) {
  .hero--cork .hero-video { height: min(88vh, 880px); }
}

/* a soft accent glow behind the hero video */
.hero__art { position: relative; }
.hero__art::before {
  content: ""; position: absolute; inset: -8% -6% -12% -6%; z-index: -1;
  background: radial-gradient(60% 60% at 60% 30%, var(--accent-soft) 0%, transparent 70%);
  filter: blur(6px);
}
html.dark .hero__art::before {
  background: radial-gradient(60% 60% at 60% 30%, rgba(224,120,32,.20) 0%, transparent 70%);
}

/* portrait (9:16) video section: the video column is sized to the video, which
   stretches to the full height of the text box beside it — never cropped. */
.video-split--wide {
  grid-template-columns: minmax(260px, 360px) 1fr;
  align-items: stretch;
  padding-top: 0;
}
.video-split--wide.video-split--flip {
  grid-template-areas: "head media" "body media";
}
.video-split--wide .video-split__media { align-items: center; }

/* the video: 9:16, shown at the full height of the adjacent box (capped),
   width follows from the ratio, and it's never cropped. */
.video-frame {
  display: block;
  width: auto;
  height: 100%;
  max-height: min(74vh, 640px);
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #0e1613;
  box-shadow: var(--shadow-md);
}
/* when a video sits in a plain .split (remote/technology pages), give it a
   sensible standalone height rather than stretching to a grid row. */
.split__media .video-frame { height: min(72vh, 600px); max-height: none; }

/* --- mobile: videos go full width --- */
@media (max-width: 860px) {
  .video-split--wide { grid-template-columns: 1fr; align-items: stretch; }
  .video-split--wide.video-split--flip { grid-template-areas: "head" "media" "body"; }
}
@media (max-width: 620px) {
  .video-frame,
  .split__media .video-frame,
  .hero-video {
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: var(--radius);
  }
}

/* =========================================================================
   Home "See it in action" showcase: full-width headline on top, then a
   golden-ratio split below — landscape video (larger, left) + highlights (right).
   On mobile it stacks: headline, full-width video, then the highlights.
   ========================================================================= */
.showcase {
  display: grid;
  grid-template-columns: 1.618fr 1fr; /* golden cut — video is the bigger part */
  grid-template-areas:
    "head head"
    "media body";
  column-gap: 56px;
  row-gap: 30px;
  align-items: center;
}
.showcase__head { grid-area: head; }
.showcase__media { grid-area: media; min-width: 0; position: relative; }
.showcase__body { grid-area: body; }
/* expand-to-fullscreen button (desktop only) */
.showcase__expand {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  background: rgba(10,7,4,.55); color: #fff; cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.showcase__expand svg { width: 20px; height: 20px; }
.showcase__expand:hover { background: var(--accent); border-color: transparent; }
.showcase__media:hover .showcase__expand,
.showcase__expand:focus-visible { opacity: 1; }
/* video fills the full width of its (larger) column, height follows the ratio */
.showcase__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #0e1613;
  box-shadow: var(--shadow-md);
}
.showcase .vfeatures { margin-top: 0; }

@media (max-width: 860px) {
  /* headline, then full-width video, then the highlights below */
  .showcase {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "body";
    column-gap: 0;
    row-gap: 24px;
  }
  .showcase__expand { display: none; } /* fullscreen expand is a desktop affordance */
}

/* FAQ accordion (support FAQ page + home teaser) */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--card, transparent); margin-bottom: 1rem; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); transition: transform .2s; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-body { padding: 0 1.25rem 1.2rem; color: var(--muted, inherit); }
.faq-item .faq-body a { color: var(--accent); }

/* four-up plan grid (Connect / Basic / Standard / Premium) */
.plan-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .plan-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plan-grid--4 { grid-template-columns: 1fr; } }

/* =========================================================================
   Plans — feature comparison table (Private / Commercial)
   ========================================================================= */
.ptable-head { text-align: center; margin: 48px 0 18px; }
.ptable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.ptable { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 620px; }
.ptable thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ink); color: #fff;
  padding: 14px 16px; text-align: center; font-family: var(--display); font-size: 1.05rem;
  vertical-align: top;
}
.ptable thead th:first-child { text-align: left; width: 40%; background: var(--ink); }
.ptable__price { display: block; font-family: var(--font); font-weight: 600; font-size: .82rem; color: rgba(255,255,255,.7); margin-top: 4px; }
.ptable td { padding: 11px 16px; border-top: 1px solid var(--line); text-align: center; color: var(--ink-2); }
.ptable td:first-child { text-align: left; color: var(--ink); font-weight: 500; }
.ptable tbody tr:hover td { background: var(--paper-2); }
.ptable small { color: var(--muted); font-size: .82em; }

.ptable__product td { background: var(--accent-soft); border-top: 2px solid var(--accent); padding-top: 14px; padding-bottom: 14px; }
.ptable__product a { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--accent); }
.ptable__product:hover td { background: var(--accent-soft); }
.ptable__group td { background: var(--paper-3); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; }
.ptable__group:hover td { background: var(--paper-3); }

.ptable .chk { display: inline-flex; color: var(--accent); }
.ptable .chk svg { width: 20px; height: 20px; }
.ptable .dash { color: var(--muted); }

html.dark .ptable thead th,
html.dark .ptable thead th:first-child { background: #0a110e; }
html.dark .ptable__product a { color: #34d17f; }
html.dark .ptable__group td { background: #12201a; }

/* enterprise contact band */
.enterprise {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  margin-top: 40px; padding: 28px 32px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.enterprise h3 { margin: 6px 0 6px; }
.enterprise p { margin: 0; max-width: 60ch; }
@media (max-width: 620px) {
  .enterprise { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   awaBerry hero — full-width top media with a centred slogan overlaid at the
   bottom, styled after www.awaberry.com's original landing hero.
   Used on the homepage and on the "Why awaBerry" landing pages.
   ========================================================================= */
.berry-hero {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: #0f1a15;   /* fallback behind let-boxed video */
  line-height: 0;
  /* Floor the height so the overlaid caption always has room — even while the
     video is still loading, or if its source is missing. Without this the
     media collapses to 0 and the slogan gets clipped. */
  min-height: clamp(440px, 62vh, 680px);
}
.berry-hero__media {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: cover;
}
/* Dark scrim so the white slogan stays readable over any frame. */
.berry-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,14,11,.72) 0%, rgba(8,14,11,.28) 34%, rgba(8,14,11,0) 60%);
  pointer-events: none;
}
.berry-hero__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 76px);
  transform: translateX(-50%);
  width: min(92%, 1000px);
  text-align: center;
  line-height: 1.15;
  z-index: 1;
}
.berry-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font); font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; opacity: .9; margin-bottom: .7rem;
}
.berry-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.berry-hero__title .accent { color: #ffbc6b; }   /* warm amber pops on the dark scrim */
.berry-hero__byline {
  margin: .7rem auto 0;
  max-width: 70ch;
  color: #fff;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.berry-hero__ctas { margin-top: 1.4rem; }
.berry-hero__ctas .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.berry-hero__ctas .btn--ghost:hover { border-color: #fff; }
@media (max-width: 640px) {
  .berry-hero__media { min-height: 62vh; }
  .berry-hero::after {
    background: linear-gradient(to top, rgba(8,14,11,.8) 0%, rgba(8,14,11,.4) 44%, rgba(8,14,11,.1) 75%);
  }
}

/* YouTube facade — thumbnail + play icon, swapped for the real player on click. */
.yt-embed {
  position: relative; aspect-ratio: 16 / 9;
  max-width: 900px; margin: 32px auto 0;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #000; box-shadow: var(--shadow-lg);
}
.yt-embed__btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: #000; display: block;
}
.yt-embed__thumb {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .92; transition: opacity .2s ease, transform .35s ease;
}
.yt-embed__btn:hover .yt-embed__thumb { opacity: 1; transform: scale(1.02); }
.yt-embed__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: transform .15s ease;
}
.yt-embed__btn:hover .yt-embed__play { transform: translate(-50%, -50%) scale(1.06); }
.yt-embed__play svg { width: 30px; height: 30px; margin-left: 4px; }
.yt-embed__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Rotating video showcase under the "Why awaBerry" cards on the home page:
   one slide at a time (headline, video, "Read more"), auto-advancing with dots. */
.why-rotator { max-width: 860px; margin: 48px auto 0; }
.why-rotator__track { position: relative; }
.why-slide { display: none; text-align: center; }
.why-slide.is-active { display: block; animation: whyFade .5s ease; }
@keyframes whyFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.why-slide__head h3 { font-size: clamp(1.3rem, 3.2vw, 2rem); margin: 0 0 18px; }
.why-slide__media {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: #000; aspect-ratio: 16 / 9;
}
.why-slide__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-slide__more { margin-top: 20px; font-size: 1.02rem; }
.why-rotator__dots { display: flex; gap: 10px; justify-content: center; margin-top: 24px; }
.why-rotator__dot {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
  background: var(--line-2); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.why-rotator__dot:hover { background: var(--muted); }
.why-rotator__dot.is-active { background: var(--accent); transform: scale(1.3); }

/* A little berry dot to echo the logo, for eyebrows/badges. */
.berry-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--awaberry); box-shadow: 0 0 0 3px var(--awaberry-soft); display: inline-block; }
.berry-dot--warm { background: var(--awaberry-warm); box-shadow: none; }

/* Use-case cards on the "Why awaBerry" hub (image on top, copy below). */
.usecard {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease;
}
.usecard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.usecard > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.usecard__body { padding: 24px 26px 28px; }
.usecard__body h3 { margin: .45rem 0 .5rem; }
.usecard__body .link-arrow { margin-top: .4rem; }
.usecard--plain { justify-content: center; background: var(--paper-3); border-style: dashed; }