/* Public signup site. Deliberately standalone rather than reusing the app's design-system.css: that file is
   built around an authenticated shell (sidebar, topbar, data tables) and none of it applies here. The brand
   tokens are kept identical so the handover from signup into the product does not look like two products.
   Updated 2026-09-26 to the brand sheet's own colours, when the site became the company's rather than one
   product's: deep navy, solution teal, and the paper the logo is drawn on. They are the logo's values to the
   digit, so the mark in the header and the page around it read as one thing rather than two. */

:root {
    --brand-primary: #0F2A4A;   /* deep navy — headings and primary buttons */
    --brand-accent: #14B8A6;    /* solution teal — the mark's tick, and the small live details */
    --accent-ink: #0B7A6E;      /* the teal darkened: the bright one is unreadable as text on paper */
    --accent-wash: #EAFBF8;
    --gradient-brand: linear-gradient(135deg, #0F2A4A 0%, #163A63 100%);

    --ink: #0F2A4A;
    --ink-soft: #5B7290;
    --line: #E3E7EC;
    --surface: #ffffff;
    --ground: #F6F7F4;

    --ok: #15803d;
    --bad: #b91c1c;

    --radius: 12px;
    --shadow: 0 1px 2px rgba(16,16,24,.04), 0 8px 24px rgba(16,16,24,.06);
}

/* Dark: the visitor's own choice from the header's button (data-theme on <html>, js/theme.js), or — with no
   choice made — their device's setting. The tokens are written twice because CSS has no way to say "this
   media query OR this attribute" in one rule; keep the two blocks identical. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f2f2f7;
    --ink-soft: #a1a1ad;
    --line: #1B3A61;
    --surface: #102B4C;
    --ground: #0B1F38;
    --brand-primary: #2DD4BF;
    --brand-accent: #14B8A6;
    --accent-ink: #5EEAD4;
    --accent-wash: rgba(20,184,166,.12);
    --ok: #4ade80;
    --bad: #f87171;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ink: #f2f2f7;
        --ink-soft: #a1a1ad;
        --line: #1B3A61;
        --surface: #102B4C;
        --ground: #0B1F38;
        --brand-primary: #2DD4BF;
        --brand-accent: #14B8A6;
        --accent-ink: #5EEAD4;
        --accent-wash: rgba(20,184,166,.12);
        --ok: #4ade80;
        --bad: #f87171;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Tajawal", system-ui, "Segoe UI", sans-serif;
    background: var(--ground);
    color: var(--ink);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 5vw, 3rem);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand {
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.brand-logo { width: 28px; height: 28px; flex-shrink: 0; }

.brand-mark {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* The navy gradient is navy text: on the dark header the company's name disappeared, leaving the mark alone. */
:root[data-theme="dark"] .brand-mark { background-image: linear-gradient(135deg, #f2f2f7 0%, #5EEAD4 100%); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-mark { background-image: linear-gradient(135deg, #f2f2f7 0%, #5EEAD4 100%); }
}

/* The theme button in the header: a moon in the light theme (go dark), a sun in the dark one (go light). */
.theme-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}
.theme-btn:hover, .theme-btn:focus-visible { color: var(--ink); background: var(--ground); }
.theme-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.theme-btn .icon-sun { display: none; }
:root[data-theme="dark"] .theme-btn .icon-sun { display: block; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-btn .icon-moon { display: none; }
}

.btn-nav {
    text-decoration: none;
    font-weight: 500;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    border-radius: 999px;
    padding: .4rem 1.1rem;
}

main { flex: 1; padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 5vw, 3rem); }

.site-footer {
    padding: 1rem clamp(1rem, 5vw, 3rem);
    color: var(--ink-soft);
    font-size: .875rem;
    border-top: 1px solid var(--line);
}

/* ---- signup ---- */

.signup-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1040px;
    margin-inline: auto;
}

@media (min-width: 900px) {
    .signup-wrap { grid-template-columns: 1fr 1fr; align-items: start; gap: 3rem; }
}

.signup-intro h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 .75rem; text-wrap: balance; }
.signup-intro p { color: var(--ink-soft); max-width: 42ch; }

.signup-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.signup-points li { position: relative; padding-inline-start: 1.75rem; color: var(--ink-soft); }
.signup-points li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--ok);
    font-weight: 700;
}

.signup-card, .notice-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 3vw, 2rem);
}

.signup-card h2 { margin: 0 0 1.25rem; font-size: 1.125rem; }

.field { display: block; margin-bottom: 1rem; }
.field > span:first-child { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .35rem; }
.field em { font-style: normal; color: var(--ink-soft); font-weight: 400; }

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=password] {
    width: 100%;
    padding: .6rem .75rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.field input:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
    border-color: var(--brand-primary);
}

.field-row { display: grid; gap: 1rem; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }

.subdomain-row { display: flex; align-items: stretch; }
.subdomain-row input { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.subdomain-suffix {
    display: flex;
    align-items: center;
    padding: 0 .7rem;
    font-size: .85rem;
    direction: ltr;
    color: var(--ink-soft);
    background: var(--ground);
    border: 1px solid var(--line);
    border-inline-start: 0;
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
}

.hint { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: .3rem; }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--bad); }

.check { display: flex; align-items: start; gap: .5rem; margin: 1.25rem 0; font-size: .9rem; }
.check input { margin-top: .45rem; }

.btn-primary, .btn-secondary {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: .7rem 1.25rem;
    font: inherit;
    font-weight: 700;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary { background: var(--gradient-brand); color: #fff; }
.btn-secondary { background: transparent; color: var(--brand-primary); border: 1px solid var(--line); }
.btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.fine { font-size: .8rem; color: var(--ink-soft); margin-top: .75rem; text-align: center; }

.alert-error {
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    color: var(--bad);
    border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

/* ---- notice screens (check email / verify result) ---- */

.notice-card { max-width: 520px; margin-inline: auto; text-align: center; }
.notice-icon { font-size: 2.5rem; line-height: 1; }
.notice-card h1 { font-size: 1.5rem; margin: .75rem 0 .5rem; }
.notice-card p { color: var(--ink-soft); }
.notice-card .btn-primary, .notice-card .btn-secondary { margin-top: 1.25rem; }

.trial-badge {
    display: inline-block;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--brand-primary);
    border-radius: 999px;
    padding: .3rem 1rem;
    font-size: .9rem;
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ==== header/footer additions ==== */

.site-header nav { display: flex; align-items: center; gap: 1.25rem; }
.nav-link { text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.nav-link:hover { color: var(--ink); }
/* Nothing wraps inside an item, at any width: "ابدأ مجاناً" or "تواصل معنا" broken over two lines makes a
   header two rows tall for the sake of one word. */
.nav-link, .btn-nav, .lang-btn, .brand-mark { white-space: nowrap; }

/* Narrow: the brand on one row, the links on the next. On one row they were wider than a 375px screen, which
   dragged the whole page sideways (scrollWidth 440 at 375) — every visitor on a phone could pan off the page.
   700px, not a phone width: with the theme button one row needs about 650px in Arabic, a little more in English. */
@media (max-width: 700px) {
    .site-header { flex-wrap: wrap; row-gap: .6rem; }
    .site-header nav { width: 100%; justify-content: space-between; gap: .5rem; }
    .btn-nav { padding: .35rem .85rem; }
}

/* The footer in three columns — the company and its address, the site's pages, the ways to reach us — with the
   copyright centred underneath. It used to be one flex row with space-between, which pushed the copyright and
   the address to one edge and the WhatsApp number alone to the other, with the whole width empty between. */
.site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "addr links contact" "copy copy copy";
    gap: 1.25rem 2.5rem;
    align-items: start;
    padding-block: 2rem 1.25rem;
    padding-inline: max(1rem, calc((100% - 1180px) / 2 + 1rem));
}
.site-footer .national-address { grid-area: addr; font-size: .85rem; }
.footer-links { grid-area: links; display: flex; flex-direction: column; gap: .55rem; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* The number and the address, beside the links. Each carries dir="ltr" in the markup, which is what keeps
   a Saudi number from being reordered into a different number by the page's right-to-left direction. */
.footer-contact { grid-area: contact; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.footer-contact a { color: var(--ink-soft); text-decoration: none; font-variant-numeric: tabular-nums; }
.footer-contact a:hover { color: var(--ink); }
.footer-copy { grid-area: copy; text-align: center; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .8rem; }

@media (max-width: 700px) {
    .site-footer { grid-template-columns: 1fr; grid-template-areas: "addr" "links" "contact" "copy"; text-align: center; }
    .site-footer .national-address { align-items: center; }
    .footer-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; }
    .footer-contact { align-items: center; }
}

/* The company's national address (_NationalAddress): the name on its own line, the address under it. In the
   footer it takes a row of its own, below the copyright, the numbers and the links. */
.national-address { font-style: normal; display: flex; flex-direction: column; gap: .1rem; color: var(--ink-soft); line-height: 1.6; }
.national-address .na-name { color: var(--ink); font-weight: 600; }

.contact-channels .contact-address-heading { margin: 1.5rem 0 .5rem; font-size: 1rem; }
.contact-channels .national-address { font-size: .9rem; }

/* The header's WhatsApp button on every page — WhatsApp's own green, as on the home page (whose css/home.css
   restyles it to the dark bar there). Narrow screens keep the icon and drop the words. */
.site-header .btn-wa-nav {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #25D366; color: #06301A;
    font-weight: 700; text-decoration: none; white-space: nowrap;
    border-radius: 999px; padding: .4rem 1rem;
}
.site-header .btn-wa-nav:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.btn-wa-nav .wa-ico { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 900px) {
    .site-header .btn-wa-nav { padding: .4rem; }
    .site-header .btn-wa-nav span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ==== hero ==== */

/* One column now. The second used to hold an illustrative trial balance, which belonged on a page about one
   accounting system. This page is about the company, and the products speak for themselves below it. */
.hero {
    max-width: 1080px;
    margin-inline: auto;
}

.eyebrow {
    margin: 0 0 .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--accent-ink);
}

.hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.3;
    text-wrap: balance;
}

.lede { color: var(--ink-soft); font-size: 1.08rem; max-width: 54ch; margin: 0 0 1.75rem; }

.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-actions .btn-primary, .hero-actions .btn-secondary { width: auto; padding-inline: 1.75rem; }
.hero .fine { text-align: start; }

/* The 3D column (js/hero-3d.js): beside the text from 900px, under it below that. A teal glow sits behind the
   canvas so the cards float on something; it fades in only once WebGL has drawn, and the whole column goes when
   the browser has no WebGL, leaving the one-column hero this page had before. */
.hero--3d { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .hero--3d { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; } }
.hero-visual { position: relative; min-width: 0; }
.hero-visual::before {
    content: "";
    position: absolute;
    inset: 12% 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 184, 166, .22), transparent);
    filter: blur(14px);
    opacity: 0;
    transition: opacity .8s ease;
}
.hero-visual--on::before { opacity: 1; }
.hero-visual--off { display: none; }
.hero-canvas { position: relative; display: block; width: 100%; height: 300px; }
@media (min-width: 900px) { .hero-canvas { height: 440px; } }

/* ==== modules: what is inside the ERP ==== */

.modules { max-width: 1080px; margin: 4.5rem auto 0; }
.module-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.module {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.module b { font-size: 1.05rem; }
.module > span:last-child { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.module-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: .35rem;
    border-radius: 12px;
    background: var(--accent-wash);
    color: var(--accent-ink);
}

/* A tile that opens its area's page: the whole card is the link, and it lifts a little under the pointer. */
.module:has(.module-link) { padding: 0; }
.module-link {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1.25rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius);
    transition: transform .15s ease, box-shadow .15s ease;
}
.module:has(.module-link) { transition: border-color .15s ease; }
.module:has(.module-link:hover), .module:has(.module-link:focus-visible) { border-color: var(--brand-accent); }
.module-link:hover { transform: translateY(-2px); }
.module-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.module-desc { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.module-more { margin-top: auto; padding-top: .5rem; color: var(--accent-ink); font-weight: 700; font-size: .9rem; }
.modules--page { margin-top: 2rem; }

/* ==== a system's page (/Systems/{slug}) ==== */

.crumbs { max-width: 1080px; margin: 0 auto 1.25rem; display: flex; gap: .5rem; font-size: .9rem; color: var(--ink-soft); }
.crumbs a { color: var(--accent-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.system-hero { max-width: 1080px; margin-inline: auto; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .system-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.system-hero h1 { margin: .5rem 0 1rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.3; text-wrap: balance; }
.module-icon--lg { width: 60px; height: 60px; border-radius: 16px; }
.system-shot { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
/* Wide screenshots fill the frame; a tall one (the QR menu on a phone, a printed invoice) stops at 560px and
   sits in the middle of it rather than running a thousand pixels down the page. */
.system-shot img { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; margin-inline: auto; }
/* No screenshot yet: the area's mark on a soft teal field, the same size a screenshot would take. */
.system-shot--mark {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    color: var(--accent-ink);
    background: radial-gradient(circle at 50% 45%, var(--accent-wash), var(--surface) 70%);
}
.system-features, .system-others { max-width: 1080px; margin: 4rem auto 0; }
.system-features h2, .system-others h2 { font-size: 1.6rem; margin: 0 0 1.25rem; }
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-grid li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    line-height: 1.7;
}
.system-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.system-chips a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
}
.system-chips a svg { color: var(--accent-ink); }
.system-chips a:hover, .system-chips a:focus-visible { border-color: var(--brand-accent); color: var(--accent-ink); }

/* ==== claims, products ==== */

.claims, .products-section, .included, .faq, .cta-strip, .plans, .page-head {
    max-width: 1080px;
    margin-inline: auto;
}

/* Three sentences about the work, laid on a rule under the hero. Not a row of numbers: the counts a site
   like this usually shows are the ones nobody can check. */
.claims {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 860px) { .claims { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

.claim { display: flex; gap: .75rem; align-items: flex-start; }
.claim-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--brand-accent);
    margin-top: .65rem;
    flex-shrink: 0;
}
.claim b { display: block; font-size: 1rem; }
.claim span { color: var(--ink-soft); font-size: .92rem; }

/* The e-invoicing marks (_ComplianceBadges): two dark tiles, side by side, one under the other on a phone. Dark
   in both themes — the Authority's logo is its light version, made for a dark ground. */
.badges {
    max-width: 1080px;
    margin: 2rem auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: .9rem 1.25rem;
}
.badge-tile {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 64px;
    padding: .7rem 1.35rem;
    border-radius: 12px;
    color: #f3f4f6;
}
.badge-tile--phase2 { background: #3b3e44; }
.badge-tile--zatca { background: #000; }
.badge-tile--zatca img { display: block; height: 44px; width: auto; }
.badge-mark { flex-shrink: 0; }
.badge-text { font-size: 1.05rem; font-weight: 500; line-height: 1.4; }
.badge-art { display: block; height: 64px; width: auto; max-width: 100%; border-radius: 12px; }
@media (max-width: 560px) {
    .badge-tile { min-height: 56px; padding: .6rem 1rem; }
    .badge-text { font-size: .95rem; }
    .badge-tile--zatca img { height: 36px; }
}

.products-section { margin-top: 4.5rem; }
.section-head { margin-bottom: 2rem; }
.section-head h2 { font-size: 1.85rem; margin: 0 0 .4rem; }
.section-head p { color: var(--ink-soft); margin: 0; }
.section-head .eyebrow { color: var(--accent-ink); margin-bottom: .5rem; }

/* A line under a band of cards, before its buttons — how the thing above is sold (the mobile app band). */
.section-note { color: var(--ink-soft); margin: 1.5rem 0 1rem; max-width: 70ch; }

/* One card per product, and the grid takes a third without being told: a company that sells two things
   today sells three next year, and this page should not need rewriting for that. */
.products { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 860px) { .products { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } }

.product {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product:hover {
    transform: translateY(-4px);
    border-color: #CBD5E1;
    box-shadow: 0 14px 40px rgba(15, 42, 74, .09);
}

.product-tag {
    align-self: flex-start;
    font-size: .72rem;
    letter-spacing: .12em;
    color: var(--accent-ink);
    background: var(--accent-wash);
    border-radius: 999px;
    padding: .22rem .85rem;
    margin-bottom: 1rem;
}

.product h3 { margin: 0 0 .5rem; font-size: 1.45rem; }
.product-sub { color: var(--ink-soft); margin: 0 0 1.25rem; }

.product-points { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .95rem; }
.product-points li { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; }
.tick { color: var(--accent-ink); font-weight: 700; flex-shrink: 0; }

/* Pinned to the bottom so two cards of different lengths still line their buttons up. */
.product-actions { margin-top: auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.product-actions .btn-primary, .product-actions .btn-secondary { width: auto; padding-inline: 1.5rem; }

/* ==== pricing ==== */

.page-head { text-align: center; margin-bottom: 2.5rem; }
.page-head h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 .75rem; text-wrap: balance; }
.page-head p { color: var(--ink-soft); margin: 0 0 .75rem; }

.plans { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.plan-featured { border-color: var(--brand-primary); box-shadow: var(--shadow); }

.plan-tag {
    position: absolute;
    inset-block-start: -.7rem;
    inset-inline-start: 1.5rem;
    background: var(--gradient-brand);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .2rem .8rem;
}

.plan h2 { margin: 0 0 1rem; font-size: 1.15rem; }

.price { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.price .amount { font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.price .currency { color: var(--ink-soft); font-size: .9rem; }

.price-year { margin: .25rem 0 1.25rem; color: var(--ink-soft); font-size: .875rem; }
.save { color: var(--ok); font-weight: 700; }

.plan-limits, .plan-extras { list-style: none; padding: 0; margin: 1.5rem 0 0; }

.plan-limits li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .925rem;
}

.plan-limits li span { color: var(--ink-soft); }
.plan-limits li strong { font-variant-numeric: tabular-nums; }

.plan-extras { margin-top: 1rem; display: grid; gap: .4rem; }
.plan-extras li { position: relative; padding-inline-start: 1.5rem; font-size: .925rem; color: var(--ink-soft); }
.plan-extras li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--ok); font-weight: 700; }

/* ==== included / faq / cta ==== */

.included { margin-top: 4rem; }
.included ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
@media (min-width: 760px) { .included ul { grid-template-columns: repeat(2, 1fr); gap: .6rem 2rem; } }
.included li { position: relative; padding-inline-start: 1.6rem; color: var(--ink-soft); }
.included li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--ok); font-weight: 700; }

.faq { margin-top: 4rem; }

.faq details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .85rem 1.1rem;
    margin-bottom: .6rem;
}

.faq summary { cursor: pointer; font-weight: 500; }
.faq summary::marker { color: var(--brand-primary); }
.faq details p { margin: .75rem 0 0; color: var(--ink-soft); }

.cta-strip {
    margin-top: 4.5rem;
    background: var(--brand-primary);
    color: #fff;
    border: 0;
    border-radius: 22px;
    padding: 3rem 2rem;
    text-align: center;
}

.cta-strip h2 { margin: 0 0 .5rem; font-size: 1.75rem; }
.cta-strip p { margin: 0 0 1.5rem; color: #B9CBE0; }
.cta-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.cta-strip .btn-primary { width: auto; padding-inline: 2rem; background: var(--brand-accent); color: #06231F; }
.cta-strip .btn-secondary { width: auto; padding-inline: 2rem; background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }

/* ==================================================================
   Added with the site completion pass: language switch, contact page,
   legal documents, and the small shared bits those needed.
   Logical properties throughout (inline-start/end, not left/right) so
   one rule serves both the RTL and LTR renderings of every page.
   ================================================================== */

/* ---- skip link ---- */
/* Visible only once focused. A keyboard user should not have to tab through
   the whole header on every page to reach the content. */
.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--brand-primary);
    border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus { inset-inline-start: 0; }

/* ---- language switcher ---- */
.lang-form { display: inline; margin: 0; }

.lang-btn {
    background: none;
    border: 0;
    padding: .45rem .6rem;
    font: inherit;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 8px;
}

.lang-btn:hover, .lang-btn:focus-visible { color: var(--ink); background: var(--ground); }

/* ---- contact ---- */
.contact-wrap {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    max-width: 62rem;
    margin: 0 auto 4rem;
    padding: 0 1.25rem;
}

@media (max-width: 800px) {
    .contact-wrap { grid-template-columns: 1fr; }
}

.contact-channels {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.contact-channels h2 { margin: 0 0 1rem; font-size: 1.1rem; }

.channel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.channel-label {
    display: block;
    font-size: .8rem;
    color: var(--ink-soft);
    margin-bottom: .15rem;
}

.channel-value { font-weight: 500; color: var(--ink); text-decoration: none; word-break: break-word; }
a.channel-value:hover { color: var(--brand-primary); text-decoration: underline; }

.contact-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
}

.contact-card h2 { margin: 0 0 .35rem; font-size: 1.25rem; }

.contact-card textarea,
.contact-card select {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .6rem .7rem;
}

.contact-card textarea { resize: vertical; min-height: 7rem; }

.contact-card textarea:focus-visible,
.contact-card select:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

/* ---- honeypot ---- */
/* Off-canvas rather than display:none — some bots skip fields that are not
   rendered, and the point is that they DO fill this one. */
.hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- field errors ---- */
.field-error { display: block; color: var(--bad); font-size: .82rem; }
.field-error:empty { display: none; }
.field-validation-error { color: var(--bad); }

/* ---- reference number ---- */
.reference {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-size: .9rem;
}

.reference code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    letter-spacing: .08em;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .2rem .5rem;
}

/* ---- legal documents ---- */
.legal {
    max-width: 48rem;
    margin: 0 auto 4rem;
    padding: 0 1.25rem;
    line-height: 1.85;
}

.legal h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .35rem; }

.legal h2 {
    font-size: 1.15rem;
    margin: 2.25rem 0 .6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.legal h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; color: var(--ink); }
.legal p, .legal li { color: var(--ink-soft); }
.legal strong { color: var(--ink); }
.legal ul { padding-inline-start: 1.25rem; display: grid; gap: .4rem; }

.legal-meta { font-size: .85rem; color: var(--ink-soft); margin: 0 0 1.5rem; }

/* The unreviewed-draft banner. Deliberately loud: this text is not yet
   binding, and anyone reading it — or about to publish it — must know that
   before they reach clause 1. */
.legal-draft {
    background: color-mix(in srgb, var(--bad) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line));
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0 0 2rem;
}

.legal-draft strong { display: block; color: var(--bad); margin-bottom: .35rem; }
.legal-draft p { margin: 0; font-size: .9rem; }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .9rem;
}

.legal-table th, .legal-table td {
    border: 1px solid var(--line);
    padding: .6rem .7rem;
    text-align: start;
    vertical-align: top;
}

.legal-table th { background: var(--ground); color: var(--ink); font-weight: 600; }
.legal-table td { color: var(--ink-soft); }

/* A table cannot wrap below a phone's width without becoming unreadable, so
   it scrolls inside its own box instead of forcing the page sideways. */
@media (max-width: 640px) {
    .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* The blog: the list reuses the system tiles; an article reads like the legal pages, with room for a table. */
.blog-date { font-size: .82rem; color: var(--ink-soft); }
.blog-post table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.blog-post th, .blog-post td { border: 1px solid var(--line); padding: .5rem .65rem; text-align: start; color: var(--ink-soft); }
.blog-post th { background: var(--accent-wash); color: var(--ink); }
.blog-post a { color: var(--accent-ink); }