/* Esse — page-specific layer on top of assets/100k31d.css.
   assets/100k31d.css is a verbatim copy of the studio stylesheet
   (100k31d.co/assets/100k31d.css); Esse deploys from its own repo, so the
   system file is vendored rather than linked. Never edit it here — re-copy it. */

/* ---------- palette ----------

   The whole neutral ramp, both schemes, is the app's own — lifted from the
   UIColor set the Bait Buster extension defines, so the page and the product
   are literally the same colours:

     esseBg      light #EFEDF5   dark #1A1B1E   → --paper
     esseSurface light #E0DFE7   dark #2C2E33   → --paper-sunk / --paper-raised
     essePrimary light #2D3748   dark #EDEDED   → --ink
     esseSecondary light #4A5568                → --accent
     esseDim     light #8C8C8C   dark #666666   → --faint

   This deliberately overrides --paper, --ink, --muted, --line and --slab,
   which the studio guide keeps fixed across every 100k31d page. The page
   still uses the system's type scale, spacing, radii, and every class name;
   only the hues move, from the family's warm paper to the app's cool slate. */

:root {
  --paper: #efedf5;
  --paper-raised: #f9f8fc;
  --paper-sunk: #e0dfe7;
  --slab: #1a1b1e;

  --ink: #232a38;
  --muted: #667085;
  --faint: #8c8c8c;

  --line: rgba(35, 42, 56, 0.14);
  --line-strong: rgba(35, 42, 56, 0.26);

  --accent: #4a5568;
  --on-accent: #f4f3f8;

  --shadow: 0 22px 60px rgba(35, 42, 56, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1b1e;
    --paper-raised: #2c2e33;
    --paper-sunk: #141518;
    --slab: #141518;

    --ink: #ededed;
    --muted: #9ea1a6;
    --faint: #666666;

    --line: rgba(206, 208, 210, 0.13);
    --line-strong: rgba(206, 208, 210, 0.26);

    /* Lighter than the app's secondary so it clears --muted — at #9aa8bb the
       two sat within a hair of each other and an eyebrow read as body copy. */
    --accent: #b4c2d6;

    /* A light accent needs dark text on it. The system only sets --on-accent
       for the light scheme, which would leave .btn.primary near-white on
       near-white here. */
    --on-accent: #1a1b1e;

    --shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
  }
}

/* The slab is the app's dark background, so the type on it is the app's dark
   primary rather than the family's warm off-white. */
.closing {
  color: #ededed;
}

.closing-note {
  color: rgba(237, 237, 237, 0.6);
}

/* ---------- the phone trio ---------- */

/* demo.png is a cut-out with a live alpha channel: three devices, dark bezels,
   bright screens, nothing behind them. It must stay that way. No .shot, no
   well, no background, no border-radius — a padded surface behind it would
   both box the transparency and clip the bezels, and a solid fill would only
   be right in one of the two colour schemes. The only grounding is a
   drop-shadow, which follows the alpha instead of a bounding box. Capped at
   the file's own 641px so it is never upscaled. */
.esse-shots {
  width: 100%;
  max-width: 641px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 26px 44px rgba(35, 42, 56, 0.18));
}

@media (prefers-color-scheme: dark) {
  .esse-shots {
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.5));
  }
}

/* Two stores means the closing slab carries a second, quiet button. .btn.quiet
   paints itself --ink, which is the page's near-black — invisible on the slab. */
.closing .btn.quiet {
  border-color: rgba(237, 237, 237, 0.28);
  color: #ededed;
}

.closing .btn.quiet:hover,
.closing .btn.quiet:focus-visible {
  border-color: rgba(237, 237, 237, 0.6);
}

/* ---------- disclosure: the legal sections, opened in place ---------- */

/* Esse keeps Privacy, Terms, and FAQ on the one page rather than on their own
   routes, so the .legal-body vocabulary lives inside a toggle. The toggle
   itself is product-only; everything it reveals is the system's. */
.hidden {
  display: none;
}

.disclosure {
  border-top: 1px solid var(--line);
}

/* Nothing below the last row draws its own hairline, so it closes the stack. */
.disclosure:last-of-type {
  border-bottom: 1px solid var(--line);
}

.disclosure-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.disclosure-title {
  margin: 0;
  font-size: var(--fs-subtitle);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  transition: color 160ms ease;
}

.disclosure-toggle:hover .disclosure-title,
.disclosure-toggle:focus-visible .disclosure-title {
  color: var(--accent);
}

.disclosure-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.disclosure-toggle:hover .disclosure-mark,
.disclosure-toggle:focus-visible .disclosure-mark {
  border-color: var(--accent);
  color: var(--accent);
}

.disclosure-body {
  max-width: var(--max-text);
  padding-bottom: 44px;
}

.disclosure-body .legal-date {
  margin-bottom: 24px;
}

/* The disclosure title is already an h3, so everything the toggle reveals sits
   a level lower than it would on a standalone legal page. These carry the sizes
   the system gives .legal-body h2/h3 — same scale, two levels down — plus the
   weight and tracking the base rules only reach as far as h3 for. */
.disclosure-body h4,
.disclosure-body h5 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.04;
}

.disclosure-body h4 {
  margin: 0 0 12px;
  font-size: 21px;
  letter-spacing: -0.03em;
}

.disclosure-body h5 {
  margin: 26px 0 10px;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.disclosure-body section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* ---------- Arabic privacy page ---------- */

/* The system indents lists with a physical padding-left, which lands on the
   wrong side under dir="rtl". */
[dir='rtl'] .legal-body ul {
  padding-left: 0;
  padding-right: 20px;
}