/* WonderFonT interface. Tokens from docs/wonderfont/design/DIRECTION.md.
   Logical properties only (margin-inline, inset-inline...) so dir="rtl" flips
   the whole page. A physical side appears only inside an explicit [dir] rule. */

:root {
  --wf-ground: #FFFFFF;   /* owner 09-23: the warm beige went; white ground, paper stays for cards and inputs */
  --wf-paper: #FFFDF8;
  --wf-ink: #141414;
  --wf-ink-2: #4D4840;
  --wf-line: #DDD5C6;
  --wf-line-strong: #857C6E; /* field borders: 4.0:1 on paper, 3.7:1 on ground (WCAG 1.4.11) */
  --wf-cobalt: #1F3FD1;
  --wf-tangerine: #F26A1B;
  --wf-lemon: #EEF21F;
  --wf-mint: #86E2B6;
  --wf-lilac: #C8A6F2;
  --wf-rose: #F5A8B8;
  --wf-red: #C8232A;
  --wf-maroon: #7A1424;
  --wf-focus: var(--wf-cobalt);

  --wf-s1: 4px; --wf-s2: 8px; --wf-s3: 12px; --wf-s4: 16px; --wf-s5: 24px;
  --wf-s6: 32px; --wf-s7: 48px; --wf-s8: 64px; --wf-s9: 96px;
  --wf-gutter: clamp(16px, 4vw, 48px);
  --wf-max: 1440px;
  --wf-read: 38rem;

  --wf-t-xs: .8125rem;
  --wf-t-sm: .9375rem;
  --wf-t-base: 1.0625rem;
  --wf-t-md: 1.25rem;
  --wf-t-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --wf-t-xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --wf-t-display: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
  --wf-lh: 1.5;

  --wf-r-s: 8px; --wf-r-m: 14px; --wf-r-l: 24px; --wf-r-pill: 999px;
  --wf-edge: 0 0 0 6px var(--wf-paper), 0 14px 28px -16px rgb(20 20 20 / .35);
  --wf-ease: cubic-bezier(.2, .7, .2, 1);
  --wf-dur: 220ms;
  --wf-tap: 44px;

  --wf-font: "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
}
:lang(he) { --wf-lh: 1.6; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.wf {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--wf-ground);
  color: var(--wf-ink);
  font-family: var(--wf-font);
  font-size: var(--wf-t-base);
  line-height: var(--wf-lh);
  overflow-wrap: break-word;
}
.wf img, .wf svg, .wf video { max-inline-size: 100%; block-size: auto; }
.wf h1, .wf h2, .wf h3 { line-height: 1.15; margin-block: 0 var(--wf-s4); text-wrap: balance; }
.wf h1 { font-size: var(--wf-t-xl); font-weight: 800; letter-spacing: -.02em; }
.wf h2 { font-size: var(--wf-t-lg); font-weight: 750; }
.wf h3 { font-size: var(--wf-t-md); font-weight: 700; }
.wf p { margin-block: 0 var(--wf-s4); max-inline-size: var(--wf-read); }
.wf a { color: inherit; text-underline-offset: .2em; }
.wf :focus-visible { outline: 3px solid var(--wf-focus); outline-offset: 3px; border-radius: var(--wf-r-s); }
.wf-muted { color: var(--wf-ink-2); }
.wf-vh {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.wf-wrap {
  inline-size: 100%;
  max-inline-size: var(--wf-max);
  margin-inline: auto;
  padding-inline: var(--wf-gutter);
}

/* Skip link */
.wf-skip {
  position: absolute; inset-block-start: var(--wf-s2); inset-inline-start: var(--wf-s2);
  z-index: 10; padding: var(--wf-s3) var(--wf-s4);
  background: var(--wf-ink); color: var(--wf-paper); border-radius: var(--wf-r-s);
  transform: translateY(-200%);
}
.wf-skip:focus { transform: none; }

/* Header */
.wf-header { padding-block: var(--wf-s4); }
.wf-header__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--wf-s2) var(--wf-s5);
}
.wf-logo {
  display: inline-flex; align-items: center; gap: var(--wf-s2);
  min-block-size: var(--wf-tap); text-decoration: none;
  margin-inline-end: auto;
}
.wf-logo__mark { inline-size: 32px; block-size: 32px; }
.wf-logo__word { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.wf-header__end { display: flex; align-items: center; gap: var(--wf-s2); }
.wf-nav {
  display: flex; align-items: center; gap: var(--wf-s1) var(--wf-s4);
  order: 3; flex-basis: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.wf-nav__a {
  display: inline-flex; align-items: center; min-block-size: var(--wf-tap);
  padding-inline: var(--wf-s2); text-decoration: none; font-weight: 600;
  border-radius: var(--wf-r-s); white-space: nowrap;
}
.wf-nav__a:hover { text-decoration: underline; }
.wf-nav__a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }
.wf-nav__search { min-inline-size: var(--wf-tap); justify-content: center; margin-inline-start: auto; }
.wf-lang {
  display: inline-flex; align-items: center; min-block-size: var(--wf-tap);
  padding-inline: var(--wf-s3); font-weight: 600; text-decoration: none;
  border-radius: var(--wf-r-pill);
}
.wf-lang:hover { background: var(--wf-paper); }
@media (min-width: 768px) {
  .wf-nav { order: 0; flex-basis: auto; overflow: visible; }
  .wf-nav__search { margin-inline-start: 0; }
  .wf-logo { margin-inline-end: var(--wf-s5); }
  .wf-header__end { margin-inline-start: auto; }
}

/* Main and footer */
.wf-main { flex: 1; padding-block: var(--wf-s6) var(--wf-s9); }
.wf-main:focus { outline: none; }
.wf-footer { border-block-start: 1px solid var(--wf-line); padding-block: var(--wf-s6); font-size: var(--wf-t-sm); }
.wf-footer__in { display: flex; flex-wrap: wrap; gap: var(--wf-s4); align-items: center; justify-content: space-between; }
.wf-footer__by { margin: 0; color: var(--wf-ink-2); }
.wf-footer__nav { display: flex; flex-wrap: wrap; gap: var(--wf-s2) var(--wf-s4); }
.wf-footer__nav a { display: inline-flex; align-items: center; min-block-size: var(--wf-tap); }

/* Buttons. A bare <button> inside main (checkout, confirm) gets the primary look
   and the 44 px target too. */
.wf-btn, .wf-main button:not([class]) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wf-s2);
  min-block-size: var(--wf-tap); padding-inline: var(--wf-s5);
  border: 2px solid var(--wf-ink); border-radius: var(--wf-r-pill);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none;
  cursor: pointer;
  transition: transform var(--wf-dur) var(--wf-ease), background-color var(--wf-dur) var(--wf-ease);
}
.wf-btn.wf-btn--primary, .wf-main button:not([class]) { background: var(--wf-ink); color: var(--wf-paper); }
.wf-btn.wf-btn--primary:hover, .wf-main button:not([class]):hover { background: #2B2B2B; }
.wf-btn.wf-btn--secondary { background: var(--wf-paper); color: var(--wf-ink); }
.wf-btn.wf-btn--secondary:hover { background: var(--wf-ground); }
.wf-btn.wf-btn--quiet { border-color: transparent; background: transparent; color: var(--wf-ink); padding-inline: var(--wf-s3); }
.wf-btn.wf-btn--quiet:hover { background: var(--wf-paper); }
.wf-btn:active { transform: translateY(1px); }
.wf-btn[disabled], .wf-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Forms */
.wf-form { display: grid; gap: var(--wf-s4); max-inline-size: 30rem; }
.wf-field { display: grid; gap: var(--wf-s1); }
.wf-label { font-weight: 600; }
.wf-input {
  inline-size: 100%; min-block-size: var(--wf-tap);
  padding: var(--wf-s2) var(--wf-s3);
  border: 2px solid var(--wf-line-strong); border-radius: var(--wf-r-m);
  background: var(--wf-paper); color: var(--wf-ink);
  font: inherit;
}
.wf-input:hover { border-color: var(--wf-ink-2); }
.wf-input:focus-visible { border-color: var(--wf-focus); outline-offset: 1px; }
.wf-input[dir="ltr"] { text-align: start; }
[dir="rtl"] .wf-input[dir="ltr"] { text-align: right; }
.wf-hint { margin: 0; font-size: var(--wf-t-sm); color: var(--wf-ink-2); }
.wf-error { margin: 0; font-size: var(--wf-t-sm); color: var(--wf-red); font-weight: 600; }
.wf-error::before { content: "! "; }
.wf-field--error .wf-input { border-color: var(--wf-red); }

/* Dialog: the element itself has no padding, so a click whose target is the
   <dialog> is a click on the backdrop and closes it. */
.wf-dialog {
  inline-size: min(28rem, 100% - 2 * var(--wf-s4));
  max-block-size: calc(100% - 2 * var(--wf-s4));
  padding: 0; border: 0; border-radius: var(--wf-r-l);
  background: var(--wf-paper); color: var(--wf-ink);
  box-shadow: 0 30px 60px -20px rgb(20 20 20 / .45);
}
.wf-dialog::backdrop { background: rgb(20 20 20 / .45); }
.wf-dialog__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wf-s3);
  padding: var(--wf-s4) var(--wf-s5) 0;
}
.wf-dialog__title { margin: 0; }
.wf-dialog__x {
  inline-size: var(--wf-tap); block-size: var(--wf-tap); flex: none;
  border: 0; border-radius: var(--wf-r-pill); background: transparent;
  font-size: 1.75rem; line-height: 1; color: inherit; cursor: pointer;
}
.wf-dialog__x:hover { background: var(--wf-ground); }
.wf-dialog__body { padding: var(--wf-s4) var(--wf-s5) var(--wf-s5); }

/* States and notices */
.wf-state {
  display: grid; justify-items: center; text-align: center; gap: var(--wf-s2);
  padding: var(--wf-s8) var(--wf-s5); margin-block: var(--wf-s6);
  border: 2px dashed var(--wf-line); border-radius: var(--wf-r-l);
}
.wf-state__title { margin: 0; font-size: var(--wf-t-lg); }
.wf-state__text { margin: 0; color: var(--wf-ink-2); }
.wf-state__action { margin-block-start: var(--wf-s4); display: flex; flex-wrap: wrap; gap: var(--wf-s3); justify-content: center; }
.wf-state--error { border-style: solid; border-color: var(--wf-red); background: var(--wf-paper); }
.wf-notice {
  padding: var(--wf-s3) var(--wf-s4); border-radius: var(--wf-r-m);
  border-inline-start: 6px solid var(--wf-cobalt); background: var(--wf-paper);
  max-inline-size: none;
}
.wf-notice--success { border-inline-start-color: #1E8A55; }
.wf-notice--error { border-inline-start-color: var(--wf-red); font-weight: 600; }

/* Cards */
.wf-card {
  display: block; padding: var(--wf-s5);
  background: var(--wf-paper); border: 2px solid var(--wf-line); border-radius: var(--wf-r-l);
  text-decoration: none; color: inherit;
  transition: transform var(--wf-dur) var(--wf-ease), border-color var(--wf-dur) var(--wf-ease);
}
a.wf-card:hover { border-color: var(--wf-ink); transform: translateY(-2px); }
.wf-card__title { margin: 0 0 var(--wf-s2); }
.wf-card__meta { margin: 0 0 var(--wf-s3); color: var(--wf-ink-2); font-size: var(--wf-t-sm); }
.wf-card[data-tone] { border-color: transparent; }

/* Price: the amount is a <bdi>, it never reorders inside Hebrew */
.wf-price { display: inline-flex; align-items: baseline; gap: var(--wf-s1); flex-wrap: wrap; }
.wf-price__n { font-size: var(--wf-t-xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wf-price__per { color: var(--wf-ink-2); }

/* Tones: a sticker or card color with its readable ink */
[data-tone="cobalt"] { --tone: var(--wf-cobalt); --tone-ink: var(--wf-paper); }
[data-tone="tangerine"] { --tone: var(--wf-tangerine); --tone-ink: var(--wf-ink); }
[data-tone="lemon"] { --tone: var(--wf-lemon); --tone-ink: var(--wf-ink); }
[data-tone="mint"] { --tone: var(--wf-mint); --tone-ink: var(--wf-ink); }
[data-tone="lilac"] { --tone: var(--wf-lilac); --tone-ink: var(--wf-ink); }
[data-tone="rose"] { --tone: var(--wf-rose); --tone-ink: var(--wf-maroon); }
[data-tone="red"] { --tone: var(--wf-red); --tone-ink: var(--wf-paper); }
[data-tone="paper"] { --tone: var(--wf-paper); --tone-ink: var(--wf-ink); }
[data-tone] { background: var(--tone); color: var(--tone-ink); }

/* Sticker: the family's identity piece. Shapes in HOME.md. */
.wf-sticker {
  position: relative; display: grid; place-items: center;
  padding: var(--wf-s5); box-shadow: var(--wf-edge);
  border-radius: var(--wf-r-l); overflow: hidden;
  transition: transform var(--wf-dur) var(--wf-ease);
}
.wf-sticker--blob { border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; }
.wf-sticker--pill { border-radius: var(--wf-r-pill); }
.wf-sticker--arch { border-radius: 999px 999px var(--wf-r-m) var(--wf-r-m); }
.wf-sticker--burst {
  box-shadow: none;
  clip-path: polygon(50% 0, 61% 12%, 77% 5%, 80% 21%, 96% 23%, 90% 38%, 100% 50%, 90% 62%, 96% 77%, 80% 79%, 77% 95%, 61% 88%, 50% 100%, 39% 88%, 23% 95%, 20% 79%, 4% 77%, 10% 62%, 0 50%, 10% 38%, 4% 23%, 20% 21%, 23% 5%, 39% 12%);
}
.wf-sticker--poster { border-radius: var(--wf-r-s); }
.wf-piece { display: grid; gap: var(--wf-s3); text-decoration: none; color: inherit; }
.wf-piece:hover .wf-sticker, .wf-piece:focus-visible .wf-sticker { transform: translateY(-2px) rotate(-1.5deg); }
[dir="rtl"] .wf-piece:hover .wf-sticker, [dir="rtl"] .wf-piece:focus-visible .wf-sticker { transform: translateY(-2px) rotate(1.5deg); }
.wf-piece__cap { display: grid; gap: 0; font-size: var(--wf-t-sm); }
.wf-piece__name { font-weight: 700; }
.wf-arrow { inline-size: 20px; block-size: 20px; }
[dir="rtl"] .wf-arrow { transform: scaleX(-1); }
.wf-badge {
  display: inline-flex; align-items: center; padding: var(--wf-s1) var(--wf-s3);
  border-radius: var(--wf-r-pill); background: var(--wf-red); color: var(--wf-paper);
  font-weight: 800; font-size: var(--wf-t-sm);
}

/* Pause motion */
.wf-pause {
  display: inline-flex; align-items: center; gap: var(--wf-s2);
  min-block-size: var(--wf-tap); padding-inline: var(--wf-s4);
  border: 2px solid var(--wf-line); border-radius: var(--wf-r-pill);
  background: var(--wf-paper); color: var(--wf-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.wf-pause__icon { inline-size: 10px; block-size: 12px; border-inline: 3px solid currentColor; }
.wf-pause[aria-pressed="true"] { border-color: var(--wf-ink); }
.wf-pause[aria-pressed="true"] .wf-pause__icon {
  border: 0; inline-size: 0; block-size: 0;
  border-block: 6px solid transparent; border-inline-start: 10px solid currentColor;
}

/* Motion off: the visitor paused it, the tab is hidden, or the system asks */
[data-motion="paused"] *, [data-hidden] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .wf-piece:hover .wf-sticker, .wf-piece:focus-visible .wf-sticker { transform: none; }
}

/* Page helpers other modules can lean on */
.wf-lede { font-size: var(--wf-t-md); color: var(--wf-ink-2); }
.wf-display { font-size: var(--wf-t-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.wf-stack { display: grid; gap: var(--wf-s5); }
.wf-row { display: flex; flex-wrap: wrap; gap: var(--wf-s3); align-items: center; }
.wf-grid { display: grid; gap: var(--wf-s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.wf-check { display: inline-flex; gap: var(--wf-s2); align-items: center; min-block-size: var(--wf-tap); }

/* Account area: account, billing, sites, earn, developers, downloads */
.wf-subnav { display: flex; flex-wrap: wrap; gap: 0 var(--wf-s2); margin-block-end: var(--wf-s6); }
.wf-subnav a {
  display: inline-flex; align-items: center; min-block-size: var(--wf-tap);
  padding-inline: var(--wf-s2); border-radius: var(--wf-r-s);
}
.wf-subnav a[aria-current] { font-weight: 700; text-decoration-thickness: 3px; }
.wf-list, .wf-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--wf-s4); }
.wf-links { gap: var(--wf-s2); }
.wf-links a { display: inline-flex; align-items: center; min-block-size: var(--wf-tap); }
.wf-roles { display: grid; gap: var(--wf-s4); }
.wf-specimen, .wf-sample { margin: 0; overflow-wrap: anywhere; font-size: 2rem; line-height: 1.2; }
.wf-sample { font-size: 1.75rem; line-height: 1.3; }
.wf-kpis { display: flex; flex-wrap: wrap; gap: var(--wf-s4); list-style: none; padding: 0; }
.wf-kpis li { min-inline-size: 10rem; }
.wf-kpis b { display: block; font-size: var(--wf-t-lg); }
.wf-bill-dl, .wf-cert {
  display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr);
  gap: var(--wf-s2) var(--wf-s4); margin: 0;
}
.wf-bill-dl dd, .wf-cert dd { margin: 0; }
.wf-bill-best { font-weight: 700; }

/* Tables scroll inside their own box; the page never does */
.wf-table-wrap, .wf-scroll, .wf-bill-scroll { overflow-x: auto; max-inline-size: 100%; }
.wf-table, .wf-bill-table { border-collapse: collapse; inline-size: 100%; }
:is(.wf-table, .wf-bill-table) :is(th, td) {
  padding-block: var(--wf-s2); padding-inline: var(--wf-s3);
  border-block-end: 1px solid var(--wf-line); text-align: start; vertical-align: top;
}

/* Code: a <pre> scrolls, an inline <code> block wraps anywhere (hosts, keys, CSS) */
.wf-code {
  display: block; padding: var(--wf-s3) var(--wf-s4);
  background: var(--wf-paper); border: 1px solid var(--wf-line); border-radius: var(--wf-r-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--wf-t-sm);
  line-height: 1.5; text-align: start; overflow-x: auto;
}
code.wf-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.wf-code code { font: inherit; }