/* anonymail.app — the scrolling pages: /features (static, templates/features.html) and /pricing (rendered per request by
   the web app, repo /root/anonymail-app src/views/pricing.ts, from the plans in Admin → Plans). Owner 2026-10-15:
   "always very good looking, lot of movement and tech/modern feel like the website itself".
   The landing's language (site.css: its tokens, faces, labels, figure corner marks and buttons): the flat graphite
   ground, off-white type, Archivo Black upper case for headings, IBM Plex Mono for every annotation, hairline rules,
   mail blue #4DA3FF only for routes, the current page and the one primary action's focus. Figures are line drawings on
   canvas (assets/pages.js), numbered like the landing's Fig. 01.
   Motion (assets/pages.js): html.motion is set only when scripts run and motion is welcome; without it everything is
   simply shown (no script, prefers-reduced-motion). No inline styles anywhere (CSP style-src 'self'); the script sets
   custom properties through the CSSOM only. Phones from 360 px: one column, no horizontal scroll. */

:root { --raise: #1a1d20; --raise-2: #1f2326; --rule-2: #3c4246; --wrap: 1240px; --ease: cubic-bezier(.2, .7, .2, 1); --progress: 0; }
html.page { scroll-padding-top: 88px; }
.page body { overflow-x: clip; }
/* the skip link: off screen upwards until focused (never sideways: a page in Arabic would scroll to it) */
.skip { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 40; padding: 8px 12px; background: var(--fg); color: var(--bg); border-radius: 8px; translate: 0 -300%; }
.skip:focus { translate: 0 0; }

/* ---- the header: the landing's (lockup at (pad, pad), page links at the other end), sticky, with a scroll hairline ---- */
.phead {
  position: sticky; top: 0; z-index: 10; /* under the footer (20): the language list may open over it */
  padding: var(--pad-t) var(--pad-r) clamp(12px, 1.4vw, 20px) var(--pad-l);
  background: rgba(21, 23, 25, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.phead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0; transition: opacity 200ms; }
.phead.is-stuck::after { opacity: 1; }
.phead__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform-origin: 0 50%; scale: var(--progress) 1; z-index: 1; }
:dir(rtl) .phead__progress { transform-origin: 100% 50%; }
.phead .lhead { max-width: calc(var(--wrap) - var(--pad-l) - var(--pad-r)); margin: 0 auto; }

/* ---- layout ---- */
.pmain { display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad-l) var(--pad-r); }
.page .label { margin-bottom: 14px; }
.idx { color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* the hero: text and the hero figure side by side on desktop, the first screen */
.phero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 4vw, 72px);
  min-height: min(calc(100svh - 80px), 860px); padding-block: clamp(28px, 6vh, 72px) clamp(36px, 7vh, 88px); }
.phero--short { min-height: 0; padding-bottom: clamp(24px, 4vh, 48px); }
.ptitle {
  margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.96;
  font-size: clamp(34px, min(5vw, 8vh), 84px); color: var(--fg); text-wrap: balance; font-feature-settings: "kern";
}
.ptitle .ln { display: block; }
.plede { margin: clamp(16px, 2.6vh, 28px) 0 0; max-width: 34em; font-size: clamp(15px, 0.4vw + 10px, 19px); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.pnote { margin: 18px 0 0; display: flex; align-items: center; gap: 10px; font: 400 clamp(11px, 0.72vw, 12.5px)/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.pnote::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.pactions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 8px 20px;
  border: 1px solid var(--fg); border-radius: 10px; background: var(--fg); color: var(--bg); text-align: center;
  font: 600 14px/1.3 var(--font); text-decoration: none; transition: background-color 150ms, color 150ms, translate 150ms;
}
.pbtn:hover { background: #fff; translate: 0 -1px; }
.pbtn--ghost { background: transparent; color: var(--fg); border-color: var(--rule-2); }
.pbtn--ghost:hover { background: var(--foot-hover); border-color: var(--fg-3); }
.pbtn__arrow { transition: translate 200ms var(--ease); }
.pbtn:hover .pbtn__arrow { translate: 3px 0; }
:dir(rtl) .pbtn__arrow { scale: -1 1; }
:dir(rtl) .pbtn:hover .pbtn__arrow { translate: -3px 0; }
.page .lbtn { min-height: 44px; }

/* ---- figures: the landing's figure box (corner marks, Fig. label, mono readout) around a canvas ---- */
.pfig { position: relative; width: 100%; aspect-ratio: 4 / 3; translate: 0 calc(var(--py, 0) * 1px); }
.pfig--hero { aspect-ratio: 1 / 0.86; }
.pfig--wide { aspect-ratio: 16 / 9; }
.pfig canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pfig .figure__label { position: absolute; left: 14px; top: 0; translate: 0 -50%; margin: 0; white-space: nowrap; }
.pfig .figure__readout { position: absolute; right: 14px; top: 100%; translate: 0 -50%; margin: 0; display: flex; gap: 1.6em; white-space: nowrap; }
.pfig .figure__readout div { display: flex; gap: 0.7em; }
.pfig .figure__readout dd { margin: 0; color: var(--fg-2); }
.pfig .meta { background: var(--bg); padding-inline: 6px; }
:dir(rtl) .pfig .figure__label { left: auto; right: 14px; }
:dir(rtl) .pfig .figure__readout { right: auto; left: 14px; }

/* ---- the spec strip: a few true facts in large type ---- */
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--rule); }
.spec__cell { padding: clamp(18px, 2.4vw, 32px) clamp(14px, 1.6vw, 24px); border-inline-start: 1px solid var(--rule); min-width: 0; }
.spec__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
.spec__big { display: block; margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: -0.04em; line-height: 1; font-size: clamp(24px, 2.4vw, 40px); white-space: nowrap; color: var(--fg); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.spec__big--sm { font-size: clamp(16px, 1.5vw, 24px); letter-spacing: -0.02em; text-transform: none; font-family: var(--mono); }
.spec__cap { display: block; margin-top: 10px; font: 400 12px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }

/* ---- the feature sections: an index rule, then text beside a figure (alternating sides on desktop) ---- */
.feat { padding-block: clamp(56px, 11vh, 132px) 0; }
.feat__rule { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(24px, 4vh, 44px); font: 400 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.feat__rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule) 0 100%); transform-origin: 0 50%; }
:dir(rtl) .feat__rule::after { transform-origin: 100% 50%; }
.feat__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.feat--flip .feat__text { order: 2; }
.feat h2 {
  margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.98;
  font-size: clamp(28px, min(3.4vw, 6.4vh), 56px); color: var(--fg); text-wrap: balance;
}
.feat__lede { margin: 18px 0 0; max-width: 32em; font-size: clamp(15px, 0.3vw + 11px, 18px); line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.facts { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 34em; }
.facts li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.facts li:last-child { border-bottom: 1px solid var(--rule); }
.facts li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 7px; height: 7px; border: 1px solid var(--fg-3); }
:dir(rtl) .facts li { padding: 11px 26px 11px 0; }
:dir(rtl) .facts li::before { left: auto; right: 2px; }
.facts code, .mono { font-family: var(--mono); font-size: 0.92em; color: var(--fg); overflow-wrap: anywhere; }
.facts code { white-space: nowrap; }
.feat .pactions { margin-top: 22px; }

/* ---- the closing call: big type, the preview note, the actions ---- */
.pcta { padding-block: clamp(80px, 16vh, 180px) clamp(56px, 10vh, 120px); text-align: start; }
.pcta .ptitle { font-size: clamp(32px, min(6vw, 10vh), 104px); }

/* ---- pricing (src/views/pricing.ts in the app) ---- */
/* The cards: one column per plan up to 4 (5 from 1280 px), two from 1099 px down, one on phones (owner 2026-10-15:
   "add support for more plans": 1–4 paid plans + Free must still look right). The full facts are in .compare below. */
.plans { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); padding-block: 8px clamp(40px, 8vh, 96px); }
.plans--1 { --cols: 1; max-width: 560px; }
.plans--2 { --cols: 2; max-width: 980px; }
.plans--4 { --cols: 4; }
.plans--5, .plans--6 { --cols: 3; }
@media (min-width: 1280px) { .plans--5 { --cols: 5; } }
@media (max-width: 1099.98px) { .plans:not(.plans--1) { --cols: 2; } }
@media (max-width: 639.98px) { .plans:not(.plans--1) { --cols: 1; } }
.plans--4 .plan, .plans--5 .plan { padding: clamp(18px, 1.5vw, 24px); }
.plans--4 .plan__amount, .plans--5 .plan__amount { font-size: clamp(34px, 3vw, 52px); }
.plans--5 .plan__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.plans--5 .plan__row dd { text-align: start; }
.plan {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2vw, 30px);
  background: var(--raise); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
}
.plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(77, 163, 255, 0.7), transparent); scale: 0 1; transition: scale 900ms var(--ease) 200ms; }
.plan.is-in::before, html:not(.motion) .plan::before { scale: 1 1; }
.plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan__name { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(22px, 2vw, 30px); line-height: 1; overflow-wrap: anywhere; }
.plan__idx { font: 400 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--fg-3); }
.plan__price { margin: 22px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.plan__amount { font-family: var(--display); font-size: clamp(40px, 4.4vw, 64px); line-height: 0.9; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.plan__per { font: 400 13px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--fg-3); }
.durs { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.durs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.durs__len { font-size: 14.5px; color: var(--fg); }
.durs__price { font: 500 15px/1.3 var(--font); color: var(--fg); font-variant-numeric: tabular-nums; text-align: end; }
.durs__sub { grid-column: 1 / -1; font: 400 12px/1.4 var(--mono); color: var(--fg-3); }
.durs__save { color: var(--accent); }
.plan__rows { margin: 20px 0 0; display: grid; gap: 0; }
.plan__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--rule); }
.plan__row dt { color: var(--fg-3); font-size: 13.5px; line-height: 1.45; }
.plan__row dd { margin: 0; color: var(--fg); font-size: 14px; line-height: 1.45; text-align: end; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plan__fair { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }
.plan__foot { margin-top: auto; padding-top: 22px; }
.plan__foot p { margin: 0; font: 400 12px/1.6 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.plan__foot .pbtn { width: 100%; }
.pricing-every { margin: 0 0 clamp(40px, 7vh, 80px); max-width: 60em; font-size: 13.5px; line-height: 1.6; color: var(--fg-3); }
.pbox { margin: 0 0 clamp(40px, 7vh, 80px); padding: clamp(20px, 2.4vw, 32px); border: 1px dashed var(--rule-2); border-radius: 14px; max-width: 760px; }
.pbox h2 { margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.pbox p { margin: 10px 0 0; color: var(--fg-2); line-height: 1.6; }

/* the comparison table: every shown plan, every fact; scrolls inside itself on a narrow screen (the page never does),
   the facts' names held at the start */
.compare { padding-bottom: clamp(40px, 7vh, 80px); }
.compare__wrap { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--rule); border-radius: 14px; background: var(--raise); }
.compare__wrap:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.compare__table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.compare__table th, .compare__table td { padding: 12px 16px; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: top; min-width: 150px; }
.compare__table tr:last-child > * { border-bottom: 0; }
.compare__table thead th { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; font-size: 16px; color: var(--fg); }
.compare__table thead th:first-child { font: 400 11px/1.4 var(--mono); letter-spacing: 0.1em; color: var(--fg-3); }
.compare__table tbody th { font-weight: 400; color: var(--fg-3); }
.compare__table td { color: var(--fg); }
.compare__table th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--raise); min-width: 160px; max-width: 220px; }
.compare__sub { display: block; font: 400 12px/1.4 var(--mono); color: var(--fg-3); }
:is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(el), :lang(ru), :lang(uk)) .compare__table thead th { font-family: var(--font); font-weight: 800; letter-spacing: 0; }

/* the FAQ: plain <details> (works without script) */
.faq { padding-block: clamp(48px, 9vh, 110px) clamp(56px, 10vh, 120px); }
.faq__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer;
  font-size: clamp(15.5px, 0.3vw + 12px, 18px); line-height: 1.4; color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; background: linear-gradient(var(--fg-2), var(--fg-2)) center / 100% 1px no-repeat, linear-gradient(var(--fg-2), var(--fg-2)) center / 1px 100% no-repeat; transition: rotate 200ms var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: #fff; }
.faq__a { margin: 0; padding: 0 0 20px; max-width: 46em; color: var(--fg-2); line-height: 1.65; }
.faq__a a { color: var(--fg); }

/* ---- the footer: the shared one, full width (assets/footer.css .foot--page) ---- */
.page .foot--page { --foot-pad-x: var(--pad-l); --foot-max: calc(var(--wrap) - var(--pad-l) - var(--pad-r)); margin-top: 0; }

/* ---- motion (html.motion: set by assets/pages.js when scripts run and motion is welcome) ---- */
.motion [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity 800ms var(--ease), translate 900ms var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.motion [data-reveal].is-in { opacity: 1; translate: 0 0; }
.motion .ptitle[data-reveal] { opacity: 1; translate: none; }
.motion .ptitle[data-reveal] .ln { overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.motion .ptitle[data-reveal] .ln > span { display: block; translate: 0 108%; transition: translate 1000ms var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.motion .ptitle[data-reveal].is-in .ln > span { translate: 0 0; }
.motion .feat__rule::after { scale: 0 1; transition: scale 1200ms var(--ease) 150ms; }
.motion .feat__rule.is-in::after { scale: 1 1; }
.motion .facts li { opacity: 0; translate: 0 10px; transition: opacity 600ms var(--ease), translate 700ms var(--ease); }
.motion .is-in .facts li, .motion .facts.is-in li { opacity: 1; translate: 0 0; }
.motion .is-in .facts li:nth-child(2), .motion .facts.is-in li:nth-child(2) { transition-delay: 80ms; }
.motion .is-in .facts li:nth-child(3), .motion .facts.is-in li:nth-child(3) { transition-delay: 160ms; }
.motion .is-in .facts li:nth-child(4), .motion .facts.is-in li:nth-child(4) { transition-delay: 240ms; }
.motion .is-in .facts li:nth-child(5), .motion .facts.is-in li:nth-child(5) { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal], .motion .facts li, .motion .ptitle[data-reveal] .ln > span { opacity: 1; translate: none; transition: none; }
  .motion .feat__rule::after { scale: 1 1; transition: none; }
  .pfig { translate: none; }
  .pbtn, .pbtn__arrow, .plan::before, .faq summary::after { transition: none; }
}

/* ---- narrower screens ---- */
@media (max-width: 999.98px) {
  .phero, .feat__grid { grid-template-columns: minmax(0, 1fr); }
  .phero { min-height: 0; }
  .feat--flip .feat__text { order: 0; }
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec__cell:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .spec__cell:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .pfig--hero { max-width: 640px; }
}
@media (max-width: 767.98px) {
  .phead { padding-bottom: 12px; }
  .ptitle { font-size: clamp(30px, 9vw, 44px); }
  .feat h2 { font-size: clamp(26px, 7.4vw, 36px); }
  .pcta .ptitle { font-size: clamp(32px, 10vw, 52px); }
  .pfig { aspect-ratio: 1 / 0.9; }
  .pfig--hero { aspect-ratio: 1 / 0.95; }
  .plan__row { grid-template-columns: minmax(0, 1fr); }
  .plan__row dd { text-align: start; }
  .lnav__a { padding-inline: 6px; }
}
@media (max-width: 420px) {
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec__cell { border-inline-start: 0; padding-inline-start: 0; }
  .spec__cell:nth-child(n + 2) { border-top: 1px solid var(--rule); }
}

/* Scripts without upper case or with joined letters: no tracking, the system face for the display type (site.css). */
:is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh-Hans)) :is(.ptitle, .feat h2, .plan__name, .spec__big) { font-family: var(--font); font-weight: 800; letter-spacing: 0; line-height: 1.15; }
:is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh-Hans)) :is(.pnote, .feat__rule, .spec__cap, .plan__foot p, .pbox h2) { letter-spacing: 0; }
:lang(el) :is(.ptitle, .feat h2, .plan__name), :lang(ru) :is(.ptitle, .feat h2, .plan__name), :lang(uk) :is(.ptitle, .feat h2, .plan__name) { font-family: var(--font); font-weight: 800; letter-spacing: -0.02em; }