/*
  WordMe website. Brand (board of 2026-10-28): deep navy ink, a blue-to-violet gradient, white rounded cards on a light
  lavender ground with soft glows. Type scale shared with the desktop app (12/14/16/20) and larger display sizes.
  Logical properties (inline-start/end) so the Hebrew pages mirror without extra rules.
*/
:root {
    color-scheme: light dark;
    --ink: #1b1f3b;
    --ink-2: #4a4f6b;
    --muted: #5b6078;
    --line: #e4e1f2;
    --ground: #f6f5fc;
    --card: #ffffff;
    --blue: #2f80ff;
    --violet: #a55bff;
    --button-a: #2563eb;
    --button-b: #7c3aed;
    --mark: #e8efff;
    --mark-ink: #1d4ed8;
    --typo: #e5484d;
    --focus: #5b6cff;
    --bad: #b3261e;
    --band: #1b1f3b;
    --band-ink: #eceaf7;
    --shadow: 0 18px 50px rgba(60, 50, 140, 0.10), 0 2px 6px rgba(60, 50, 140, 0.05);
    --radius: 18px;
    --gradient: linear-gradient(120deg, var(--blue), var(--violet));
    --button-gradient: linear-gradient(90deg, var(--button-a), var(--button-b));
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #eceaf7; --ink-2: #c9c7dc; --muted: #a9a7bf; --line: #34324a; --ground: #13121c; --card: #1f1e2c;
        --mark: #26305a; --mark-ink: #a9c1ff; --typo: #ff8a8f; --focus: #9aa6ff; --bad: #ff8a80; --band: #0d0c14;
        --shadow: none;
    }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font: 16px/1.6 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--mark-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, .button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px;
}

.skip { position: absolute; inset-inline-start: -999px; top: 0; }
.skip:focus { inset-inline-start: 1rem; top: 1rem; z-index: 10; background: var(--card); padding: 0.5rem 1rem; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-header { position: relative; z-index: 2; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; }
.brand svg { width: 2rem; height: 2rem; flex: none; }
.brand .ai { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.95rem; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.site-nav .lang { font-weight: 600; }
.site-nav form { margin: 0; }
/* Language menu (no script: details/summary). */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
    font-weight: 600; padding: 0.3rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { border-color: var(--ink-2); }
.lang-menu summary:focus-visible { outline: 2px solid #5b5bf0; outline-offset: 2px; }
.lang-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 20; margin: 0; padding: 0.35rem;
    list-style: none; min-width: 9rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(27, 31, 59, 0.12); }
.lang-menu li a { display: block; padding: 0.45rem 0.7rem; border-radius: 8px; }
.lang-menu li a:hover { background: var(--line); text-decoration: none; }
.lang-menu li a[aria-current="true"] { font-weight: 700; }
@media (max-width: 760px) { .site-nav .optional { display: none; } .site-nav { gap: 0.9rem; } }

/* Buttons */
.button, button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer;
    padding: 0.8rem 1.4rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
    min-height: 44px;
}
.button.primary, button.primary { background: var(--button-gradient); color: #fff; border-color: transparent; box-shadow: 0 8px 24px rgba(91, 76, 240, 0.30); }
.button.primary:hover, button.primary:hover { filter: brightness(1.07); }
.button.large { padding: 1rem 1.7rem; font-size: 1.08rem; border-radius: 14px; }
.button[aria-disabled="true"] { opacity: 0.55; cursor: default; box-shadow: none; }
.link-button { background: none; border: none; padding: 0; min-height: 0; font-weight: 400; color: var(--mark-ink); text-decoration: underline; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 2.5rem 0 4.5rem; }
.hero::before, .hero::after {
    content: ""; position: absolute; z-index: 0; width: 38rem; height: 38rem; border-radius: 50%; filter: blur(90px); opacity: 0.28; pointer-events: none;
}
/* Kept clear of the hero's bottom edge, which would otherwise cut the glow in a straight line. */
.hero::before { background: #7aa7ff; top: -22rem; inset-inline-start: -14rem; }
.hero::after { background: #c49bff; top: -18rem; inset-inline-end: -16rem; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; } }

.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-2);
    background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.85rem; }
.eyebrow .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gradient); }
.hero h1 {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(2.6rem, 6.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; margin: 1.1rem 0 1.1rem;
}
.hero h1 .accent { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Hebrew headings: Segoe UI has Hebrew letters only up to Bold, and Segoe UI Variable has none, so the heavier
   display weight made the browser take letters from other fonts one by one (a mixed, uneven headline). Hebrew
   headings use Bold from one font, without the tight letter spacing that suits Latin display type. */
:lang(he) .hero h1, :lang(he) .section-head h2, :lang(he) .plan .price, :lang(he) .step .n {
    font-family: "Segoe UI", "Arial Hebrew", Arial, system-ui, sans-serif; font-weight: 700; letter-spacing: 0;
}
:lang(he) .hero h1 { line-height: 1.1; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 34rem; margin: 0 0 2rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.fineprint { font-size: 0.9rem; color: var(--muted); margin-top: 1rem; }
kbd { font: 600 0.92em "Segoe UI", system-ui, sans-serif; padding: 0.08rem 0.45rem; border-radius: 6px; border: 1px solid var(--line);
    border-bottom-width: 2px; background: var(--card); color: var(--ink); white-space: nowrap; }

/* The before/after card in the hero */
.demo { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 1.25rem 1.4rem 1.4rem; overflow: hidden; }
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.9rem; }
.demo-head .who { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--ink); }
.demo-head .who svg { width: 1.25rem; height: 1.25rem; }
.pill { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.15rem 0.65rem; font-weight: 600; font-size: 0.8rem;
    background: var(--mark); color: var(--mark-ink); white-space: nowrap; }
.demo-stage { position: relative; min-height: 10.5rem; }
.demo-text { margin: 0; font-size: 1.12rem; line-height: 1.65; }
.demo-text.rough { color: var(--ink-2); }
.demo-text .typo, .ba .typo { text-decoration: underline wavy var(--typo); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.demo-text .better, .ba .better { background: var(--mark); color: var(--mark-ink); border-radius: 5px; padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); font-size: 0.85rem; color: var(--muted); }
.demo-dots { display: flex; gap: 0.4rem; }
.demo-dots span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line); }
.demo-dots span.on { background: var(--gradient); }

/* Animated: the rough text, then a sweep, then the polished text. Without JavaScript or with reduced motion,
   every example is shown as a still before/after pair. */
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texts { position: relative; }
.demo[data-animated] .demo-stage { position: relative; transition: height 0.3s ease; }
/* Only the current example, and only one of its two versions, is displayed at all; the fade is decoration on top, so
   a paused animation (a background tab, a print) can never show two texts over each other. */
.demo[data-animated] .demo-pair { display: none; position: absolute; inset: 0; }
.demo[data-animated] .demo-pair.on { display: block; animation: fade-in 0.35s ease both; }
.demo[data-animated] .polished { display: none; }
.demo[data-animated] .demo-pair.done .rough { display: none; }
.demo[data-animated] .demo-pair.done .polished { display: block; animation: fade-in 0.45s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.demo[data-animated] .sweep { position: absolute; inset: -0.4rem -0.8rem; pointer-events: none; opacity: 0; border-radius: 12px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.18), rgba(37, 99, 235, 0.18), transparent); }
.demo[data-animated] .demo-pair.sweeping .sweep { animation: sweep 0.7s ease-in-out; }
[dir="rtl"] .demo[data-animated] .demo-pair.sweeping .sweep { animation-name: sweep-rtl; }
@keyframes sweep { 0% { opacity: 0; transform: translateX(-40%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(40%); } }
@keyframes sweep-rtl { 0% { opacity: 0; transform: translateX(40%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(-40%); } }
.demo:not([data-animated]) .demo-pair + .demo-pair { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--line); }
.demo:not([data-animated]) .polished { margin-top: 0.6rem; }
.demo:not([data-animated]) .demo-dots { display: none; }
.demo-controls { display: inline-flex; align-items: center; gap: 0.75rem; }
.demo-pause { min-height: 32px; padding: 0.3rem 0.8rem; font-size: 0.85rem; font-weight: 600; border-radius: 999px; }
.ba p { white-space: normal; }

/* Sections */
section.block { padding: 4.5rem 0; }
section.block.tight { padding-top: 1rem; }
.section-head { max-width: 40rem; margin: 0 0 2.5rem; }
.section-head h2 { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 0.75rem; }
.section-head p { color: var(--ink-2); font-size: 1.1rem; margin: 0; }

.uses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 760px) { .uses { grid-template-columns: 1fr; } }
.use { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.use h3 { margin: 0 0 0.2rem; font-size: 1.2rem; display: flex; align-items: center; gap: 0.6rem; }
.use h3 .num { width: 1.9rem; height: 1.9rem; border-radius: 10px; background: var(--gradient); color: #fff; display: inline-grid; place-items: center; font-size: 0.95rem; }
.use > p { margin: 0 0 1rem; color: var(--ink-2); }
.ba { display: grid; gap: 0.5rem; font-size: 0.97rem; }
.ba p { margin: 0; padding: 0.7rem 0.9rem; border-radius: 12px; }
.ba .before { background: var(--ground); color: var(--muted); }
.ba .after { background: var(--mark); color: var(--ink); }
.ba .after .better { background: var(--card); }
.ba .tag { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.15rem; color: var(--muted); }
.ba .after .tag { color: var(--mark-ink); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.step .n { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { margin: 0.6rem 0 0.35rem; font-size: 1.15rem; }
.step p { margin: 0; color: var(--ink-2); }
.styles-line { margin-top: 1.5rem; color: var(--ink-2); }

.langs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.langs span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.95rem; font-weight: 600; }

/* Privacy band */
.band { background: var(--band); color: var(--band-ink); border-radius: 28px; padding: 3rem; position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; width: 30rem; height: 30rem; inset-inline-end: -10rem; top: -14rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(165, 91, 255, 0.45), transparent 65%); pointer-events: none; }
.band h2 { color: #fff; }
.band .section-head p { color: #c9c7dc; }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; z-index: 1; }
@media (max-width: 900px) { .promises { grid-template-columns: 1fr; } .band { padding: 2rem 1.4rem; } }
.promises h3 { color: #fff; margin: 0 0 0.35rem; font-size: 1.1rem; }
.promises p { margin: 0; color: #c9c7dc; }
.band a { color: #c7bdff; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 52rem; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; }
.plan.featured { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--gradient) border-box; box-shadow: var(--shadow); }
.plan h3 { margin: 0; font-size: 1.2rem; }
.plan .price { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.4rem 0; }
.plan .price small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.plan ul { padding-inline-start: 1.2rem; margin: 0.5rem 0 1.5rem; color: var(--ink-2); flex: 1; }
.plan li { margin: 0.3rem 0; }

.final { text-align: center; padding: 4rem 1.25rem 5rem; }
.final h2 { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; margin: 0 0 1.5rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; font-size: 0.92rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer a { color: var(--muted); }

/* Account, sign-in, download and legal pages: one narrow column of cards. */
main.narrow { max-width: 36rem; margin: 2rem auto 4rem; padding: 0 1.25rem; }
main.page { max-width: 46rem; margin: 2rem auto 4rem; padding: 0 1.25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1.25rem; }
.card h1, main.page h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 1rem; letter-spacing: -0.015em; }
.actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.muted { color: var(--muted); font-size: 0.95rem; }
.error { color: var(--bad); }
label { display: block; font-weight: 600; margin: 0.9rem 0 0.25rem; }
input[type=email], input[type=password] { width: 100%; padding: 0.65rem 0.8rem; font: inherit; color: inherit; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; }
ul.devices { list-style: none; padding: 0; margin: 0.5rem 0 0; }
ul.devices li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }

/* Download page */
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 1.5rem 0; }
@media (max-width: 640px) { .platforms { grid-template-columns: 1fr; } }
.platform { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.platform.current { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--gradient) border-box; box-shadow: var(--shadow); }
.platform h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.platform .detected { display: none; }
.platform.current .detected { display: inline-flex; }
ol.setup { padding-inline-start: 1.3rem; }
ol.setup li { margin: 0.5rem 0; }
.note { background: var(--mark); color: var(--ink); border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.95rem; }

/* Legal pages */
.legal h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal .updated { color: var(--muted); }

/* Admin pages: a wider column, tables and figures. Same cards and colours as the account pages. */
main.admin { max-width: 72rem; margin: 1.5rem auto 4rem; padding: 0 1.25rem; }
main.admin h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1rem; letter-spacing: -0.015em; }
main.admin h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
main.admin .card { padding: 1.4rem 1.5rem; }
main.admin .card + .card { margin-top: 1rem; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.admin-nav a { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.admin-nav a[aria-current="page"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.figure { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; }
.figure strong { display: block; font-size: 1.7rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.figure span { color: var(--muted); font-size: 0.92rem; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
table.data th, table.data td { text-align: start; padding: 0.5rem 0.6rem; border-top: 1px solid var(--line); vertical-align: top; }
table.data th { color: var(--muted); font-weight: 600; border-top: none; white-space: nowrap; }
table.data td.num, table.data th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.off td { color: var(--muted); }
.tag { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; background: var(--mark); color: var(--mark-ink); white-space: nowrap; }
.tag.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.admin-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.admin-form label { margin: 0; font-size: 0.9rem; }
.admin-form input, .admin-form select { display: block; margin-top: 0.25rem; padding: 0.55rem 0.7rem; font: inherit; color: inherit; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; min-height: 44px; }
.admin-form button, main.admin form button { min-height: 44px; padding: 0.55rem 1rem; }
button.danger { color: var(--bad); border-color: currentColor; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.split > .card + .card { margin-top: 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hebrew text keeps its natural spacing in every heading (the tight Latin spacing above joins Hebrew letters). */
:lang(he) h1, :lang(he) h2, :lang(he) h3 { letter-spacing: 0; }

/* Admin prompt editor */
textarea.prompt, pre.prompt { display: block; width: 100%; margin: 0.25rem 0 0.75rem; padding: 0.7rem 0.8rem; font: 0.92rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: inherit; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; }
textarea.prompt { resize: vertical; }
pre.prompt { white-space: pre-wrap; color: var(--ink-2); max-height: 22rem; overflow: auto; }