/*
  www.metricatik.com, the landing page (src/site).

  One stylesheet for index.html (Persian, right to left), written mobile first: the base rules are
  the phone layout and the @media (min-width) blocks add the wider ones. Sides are logical
  properties (inline-start = right in this page).

  The product pictures are real screens of the app with sample data, captured at the size they are
  drawn here (README, "Images"); they are drawn 1:1 and never stretched.

  Nothing loads from another host: the font sits in ../fonts and every icon is inline SVG.
*/

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
         url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy-950: #020b22;
    --navy-900: #030f2e;
    --navy-850: #071a47;
    --navy: #002c69;
    --green: #03c25d;
    --green-ink: #087a42;
    --green-soft: #e5f8ee;
    --blue-ink: #2f5bd6;
    --blue-soft: #edf3ff;
    --violet-ink: #5a46e0;
    --violet-soft: #f1eeff;
    --orange-ink: #c2410c;
    --orange-soft: #fff1eb;

    --bg: #f7f8fd;
    --bg-2: #eff1f9;
    --app-bg: #f4f5fb;
    --ink: #111a35;
    --ink-2: #444e6c;
    --muted: #646d87;
    --border: #e4e7f2;
    --border-strong: #d3d8e8;

    /* The button gradient keeps white text at 4.5:1 or more at its lightest end. */
    --grad: linear-gradient(135deg, #3e6ef2 0%, #5f51ec 55%, #7e44df 100%);
    --grad-text-dark: linear-gradient(100deg, #9cbcff 0%, #c2b4ff 50%, #5fe4a6 100%);

    --shadow-xs: 0 1px 2px rgba(17, 26, 53, .06);
    --shadow-sm: 0 1px 2px rgba(17, 26, 53, .05), 0 10px 24px -14px rgba(17, 26, 53, .16);
    --shadow: 0 2px 6px rgba(17, 26, 53, .04), 0 24px 48px -24px rgba(17, 26, 53, .3);
    --shadow-shot: 0 2px 6px rgba(17, 26, 53, .05), 0 30px 60px -30px rgba(17, 26, 53, .38);

    --radius-sm: 12px;
    --radius: 14px;
    --radius-lg: 20px;
    --header-h: 58px;
    --gutter: 16px;
    --container: 1120px;
    --font: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 640px) {
    :root {
        --gutter: 24px;
        --header-h: 62px;
    }
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: .94rem;
    line-height: 1.85;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-x: clip;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 800;
    line-height: 1.45;
    text-wrap: balance;
}

p, ul, ol, figure {
    margin: 0;
}

p {
    text-wrap: pretty;
}

ul, ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid #5e7cff;
    outline-offset: 3px;
    border-radius: 6px;
}

::selection {
    background: #d9d2ff;
    color: var(--ink);
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    inset-inline-start: 12px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    box-shadow: var(--shadow);
}

.skip-link:focus {
    top: 12px;
}

.i {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.grad-text {
    background: var(--grad-text-dark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ico {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--violet-soft);
    color: var(--violet-ink);
}

.ico .i {
    width: 19px;
    height: 19px;
}

.ico-green  { background: var(--green-soft);  color: var(--green-ink); }
.ico-blue   { background: var(--blue-soft);   color: var(--blue-ink); }
.ico-violet { background: var(--violet-soft); color: var(--violet-ink); }
.ico-grad   { background: var(--grad);        color: #fff; }
.ico-glass  { background: rgba(255, 255, 255, .1); color: #c9d6ff; border: 1px solid rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------------ buttons */

.btn {
    --btn-h: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--btn-h);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 750;
    font-size: .92rem;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}

.btn .i {
    width: 1.15em;
    height: 1.15em;
}

/* The arrow points the way Persian reads: to the left. */
.i-arrow {
    transform: scaleX(-1);
}

.btn-lg {
    --btn-h: 48px;
    padding: 0 22px;
    border-radius: 13px;
    font-size: .98rem;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    color: #fff;
    background: var(--grad);
    box-shadow: 0 12px 28px -12px rgba(95, 81, 236, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -14px rgba(95, 81, 236, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.btn-glass {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .26);
}

.btn-glass:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .4);
}

.btn-ghost {
    color: var(--ink);
    background: #fff;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    border-color: #b9c1d8;
    box-shadow: var(--shadow-sm);
}

.btn-white {
    color: var(--navy);
    background: #fff;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .55);
}

.btn-white:hover {
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ header */

/* Over the dark hero the header is transparent with white text; once the page moves it turns
   frosted white with dark text. Without the script it stays dark and readable. */
.site-header {
    --h-fg: #fff;
    --h-fg-2: rgba(232, 236, 255, .85);
    --h-hover: rgba(255, 255, 255, .1);
    --h-line: rgba(255, 255, 255, .26);
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 100;
    background: rgba(3, 15, 46, .94);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: background-color .3s var(--ease), border-color .3s, box-shadow .3s;
}

.js .site-header:not(.is-scrolled):not(.menu-open) {
    background: transparent;
    border-bottom-color: transparent;
}

.site-header.is-scrolled,
.site-header.menu-open {
    --h-fg: var(--ink);
    --h-fg-2: var(--ink-2);
    --h-hover: var(--bg-2);
    --h-line: var(--border-strong);
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--border);
    box-shadow: 0 12px 30px -22px rgba(17, 26, 53, .4);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
}

.header-bar {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-inline-end: auto;
    border-radius: 8px;
}

.brand-logo {
    width: 104px;
    height: auto;
}

.brand-logo-light,
.site-header.is-scrolled .brand-logo-dark,
.site-header.menu-open .brand-logo-dark {
    display: none;
}

.site-header.is-scrolled .brand-logo-light,
.site-header.menu-open .brand-logo-light {
    display: block;
}

.main-nav {
    display: none;
}

.main-nav a {
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--h-fg-2);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color .2s, background-color .2s;
}

.main-nav a:hover {
    color: var(--h-fg);
    background: var(--h-hover);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--h-line);
    border-radius: 10px;
    color: var(--h-fg);
    font-weight: 700;
    font-size: .88rem;
    transition: background-color .2s, border-color .2s;
}

.h-login .i {
    width: 16px;
    height: 16px;
    transform: scaleX(-1);
}

.h-login:hover {
    background: var(--h-hover);
}

.header-cta {
    display: none;
    --btn-h: 38px;
    padding: 0 15px;
    font-size: .88rem;
    white-space: nowrap;
}

.menu-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--h-line);
    border-radius: 10px;
    color: var(--h-fg);
}

.menu-toggle .i {
    width: 20px;
    height: 20px;
}

.menu-toggle .i-shut,
.menu-open .menu-toggle .i-open {
    display: none;
}

.menu-open .menu-toggle .i-shut {
    display: block;
}

/* Without the script the menu opens through its anchor (:target); with it, through .menu-open. */
.mobile-menu {
    display: none;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 8px var(--gutter) 20px;
    background: #fff;
    border-top: 1px solid var(--border);
}

.mobile-menu:target,
.menu-open .mobile-menu {
    display: block;
}

.m-nav {
    display: grid;
    gap: 2px;
}

.m-nav a {
    display: block;
    padding: 12px 8px;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 650;
}

.m-nav a:hover {
    background: var(--bg-2);
}

.m-actions {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

@media (max-width: 379px) {
    .h-login {
        width: 38px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }
}

@media (min-width: 640px) {
    .brand-logo {
        width: 116px;
    }

    .header-cta {
        display: inline-flex;
    }
}

@media (min-width: 1100px) {
    .main-nav {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-inline: auto;
    }

    .brand {
        margin-inline-end: 0;
    }

    .menu-toggle,
    .mobile-menu,
    .mobile-menu:target {
        display: none;
    }
}

/* ------------------------------------------------------------------ sections */

.section {
    padding-block: 48px;
}

.section-head {
    max-width: 700px;
    margin-inline: auto;
    margin-bottom: 24px;
    text-align: center;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--violet-soft);
    color: var(--violet-ink);
    font-size: .8rem;
    font-weight: 750;
    line-height: 1.7;
}

h2 {
    font-size: clamp(1.35rem, 1.08rem + 1.15vw, 1.9rem);
    letter-spacing: -.01em;
}

.section-lead {
    margin-top: 10px;
    color: var(--ink-2);
    font-size: clamp(.94rem, .9rem + .15vw, 1.02rem);
    line-height: 1.95;
}

.section-lead a {
    color: var(--violet-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    unicode-bidi: isolate;
}

@media (min-width: 900px) {
    .section {
        padding-block: 64px;
    }

    .section-head {
        margin-bottom: 32px;
    }
}

/* A list of points with a green check. */
.ticks {
    display: grid;
    gap: 8px;
}

.ticks li {
    position: relative;
    padding-inline-start: 28px;
    color: var(--ink-2);
    line-height: 1.75;
}

.ticks li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .22em;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087a42' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.ticks b {
    color: var(--ink);
    font-weight: 800;
}

/* ------------------------------------------------------------------ hero */

/* The copy is centred over the product picture. On a phone the picture is the app's phone screen;
   from 900px it is the desktop dashboard in a window, with the phone in front of its corner. The
   dark background stops a little above the picture's lower edge (--hero-tail), so the picture
   sits across the boundary into the page. */
.hero {
    --hero-tail: 120px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(var(--header-h) + 24px);
    color: #fff;
    background:
        radial-gradient(60% 45% at 85% 0%, rgba(110, 156, 255, .32), transparent 70%),
        radial-gradient(50% 40% at 10% 25%, rgba(155, 111, 243, .3), transparent 70%),
        linear-gradient(180deg, var(--navy-900) 0%, var(--navy-850) 100%);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}

.hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: -1;
    height: var(--hero-tail);
    background: var(--bg);
}

.hero-copy {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #e4e9ff;
    font-size: clamp(.74rem, .66rem + .4vw, .82rem);
    font-weight: 650;
    line-height: 1.6;
    text-wrap: balance;
}

.hero-badge .dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(3, 194, 93, .2);
}

.hero h1 {
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
    line-height: 1.38;
    letter-spacing: -.015em;
}

h1 .grad-text,
h2 .grad-text {
    white-space: nowrap;
}

.hero-lead {
    max-width: 640px;
    margin: 14px auto 0;
    color: rgba(228, 233, 255, .88);
    font-size: clamp(.96rem, .92rem + .2vw, 1.06rem);
    line-height: 1.95;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.hero-cta .btn {
    flex: 1 1 200px;
}

/* Four of the product's distinctive abilities, each a link to its tab. */
.hero-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 920px;
    margin: 18px auto 0;
}

.hero-highlights a {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #e9edff;
    font-size: .8rem;
    font-weight: 650;
    line-height: 1.6;
    text-align: start;
    transition: background-color .2s, border-color .2s;
}

.hero-highlights a:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
}

.hero-highlights .i {
    width: 16px;
    height: 16px;
    color: #9cbcff;
}

.hero-visual {
    position: relative;
    max-width: 1000px;
    margin: 28px auto 0;
    padding-bottom: 8px;
}

.window {
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-shot);
}

.window-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding-inline: 12px;
    border-bottom: 1px solid var(--border);
    background: #f6f7fb;
    direction: ltr;
}

.window-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dfe2ec;
}

.window-bar span {
    margin-inline: auto;
    padding: 0 12px;
    border-radius: 6px;
    background: #fff;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.6;
    letter-spacing: .01em;
    transform: translateX(-17px);
}

.hero-window {
    display: none;
}

.phone {
    position: relative;
    padding: 6px;
    border-radius: 30px;
    background: #0d1430;
    box-shadow: 0 30px 60px -20px rgba(3, 15, 46, .7), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.phone img {
    width: 100%;
    border-radius: 26px;
}

.hero-phone {
    width: min(72vw, 272px);
    margin-inline: auto;
}

.float {
    display: none;
}

@media (min-width: 640px) {
    .hero-cta .btn {
        flex: 0 0 auto;
    }

    .hero-highlights a {
        padding: 5px 13px;
        font-size: .84rem;
    }
}

@media (min-width: 900px) {
    .hero {
        --hero-tail: clamp(110px, 13vw, 190px);
        padding-top: calc(var(--header-h) + 36px);
    }

    .hero-visual {
        margin-top: 36px;
        padding-bottom: 28px;
    }

    /* The dashboard is 880 CSS pixels wide; the window is as wide as it and only shrinks on a
       narrower screen, leaving room on the left for the phone. */
    .hero-window {
        display: block;
        width: min(902px, 100% - 80px);
        margin-inline: auto;
        border-color: rgba(255, 255, 255, .16);
        box-shadow: 0 40px 90px -30px rgba(3, 15, 46, .75), 0 0 0 1px rgba(255, 255, 255, .04);
    }

    .hero-window picture {
        display: block;
        padding: 10px;
        background: var(--app-bg);
    }

    .hero-window img {
        width: 100%;
        border-radius: 5px;
    }

    .hero-phone {
        position: absolute;
        bottom: 0;
        inset-inline-end: 0;
        width: clamp(150px, 17%, 176px);
        margin: 0;
        padding: 4px;
        border-radius: 24px;
    }

    .hero-phone img {
        border-radius: 20px;
    }
}

@media (min-width: 1100px) {
    .hero-highlights {
        margin-inline: -80px;
    }

    .float {
        position: absolute;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 252px;
        padding: 10px 13px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255, 255, 255, .97);
        color: var(--ink);
        text-align: start;
        box-shadow: 0 24px 50px -20px rgba(3, 15, 46, .6), var(--shadow-xs);
    }

    .float small {
        display: block;
        color: var(--muted);
        font-size: .7rem;
        font-weight: 700;
        line-height: 1.6;
    }

    .float b {
        display: block;
        font-size: .82rem;
        font-weight: 750;
        line-height: 1.7;
    }

    .float .ico {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .float .ico .i {
        width: 18px;
        height: 18px;
    }

    .float-ai {
        top: 63%;
        inset-inline-start: 0;
    }
}

/* ------------------------------------------------------------------ features */

/* Ten tabs, one panel shown at a time (with the script). From 900px the tabs are a strip of ten
   buttons and the panel holds the copy and a desktop picture of the app. Below 900px the tabs are
   a row of chips, the panel is a text card (the pictures are neither drawn nor downloaded) that
   can be swiped, with arrows and dots under it. Without the script every panel is shown, one
   after another, and the tabs are links to them. */
.features {
    padding-top: 32px;
}

.features .container {
    max-width: calc(1200px + var(--gutter) * 2);
}

.ftab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 14px;
}

.ftab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}

.ftab .i {
    width: 16px;
    height: 16px;
    color: var(--violet-ink);
}

.ftab:hover {
    border-color: var(--border-strong);
    color: var(--ink);
}

.ftab.is-active {
    border-color: transparent;
    background: var(--grad);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(95, 81, 236, .8);
}

.ftab.is-active .i {
    color: #fff;
}

.fpanels {
    display: grid;
    gap: 16px;
}

.fpanel {
    display: grid;
    gap: 22px;
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.fpanel:focus {
    outline: none;
}

.fp-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fp-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--violet-soft);
    color: var(--violet-ink);
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.7;
}

.fpanel h3 {
    font-size: clamp(1.14rem, 1.02rem + .4vw, 1.34rem);
    line-height: 1.45;
    letter-spacing: -.005em;
}

.fp-lead {
    margin-top: 8px;
    color: var(--ink-2);
    font-size: .9rem;
    line-height: 1.85;
}

.fp-copy > .ticks,
.tick-groups {
    margin-top: 16px;
}

.fpanel .ticks li {
    font-size: .86rem;
}

.tick-groups {
    display: grid;
    gap: 14px;
}

.tg-title {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 800;
}

.fp-aside {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--ink-2);
    font-size: .82rem;
    line-height: 1.85;
}

.fp-aside .i {
    width: 18px;
    height: 18px;
    margin-top: .25em;
    color: var(--blue-ink);
}

.fp-aside b {
    color: var(--ink);
}

.fp-cta {
    margin-top: 18px;
}

.fp-note {
    margin-top: 8px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.8;
}

/* A desktop picture of the app in a small window, drawn 1:1 (620 CSS pixels) on the app's own
   background. On a phone it is not drawn, and its <picture> source is a 1x1 GIF so the file is
   not downloaded. */
.shot {
    display: none;
}

/* The arrows and dots exist only with the script, below 900px. */
.fnav {
    display: none;
}

.js .ftabs.is-tabs .fpanel:not(.is-active) {
    display: none;
}

.js .ftabs.is-tabs .fpanels {
    overflow-anchor: none;
}

/* A new panel slides in from the side of the tab it replaces: "next" lies to the left in this
   right-to-left page, "previous" to the right. */
.js .ftabs .fpanel.from-next {
    animation: panel-from-next .35s var(--ease);
}

.js .ftabs .fpanel.from-prev {
    animation: panel-from-prev .35s var(--ease);
}

@keyframes panel-from-next {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }
}

@keyframes panel-from-prev {
    from {
        opacity: 0;
        transform: translateX(28px);
    }
}

/* ---- phone and small tablet */

@media (max-width: 899px) {
    .js .ftabs.is-tabs .ftab-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-inline: calc(var(--gutter) * -1);
        margin-bottom: 12px;
        padding: 4px var(--gutter) 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .js .ftabs.is-tabs .ftab-list::-webkit-scrollbar {
        display: none;
    }

    .js .ftabs.is-tabs .fpanels {
        touch-action: pan-y;
    }

    .js .ftabs.is-tabs .fnav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
    }

    .fnav-btn {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--border-strong);
        border-radius: 50%;
        background: #fff;
        color: var(--ink);
        box-shadow: var(--shadow-xs);
    }

    .fnav-btn .i {
        width: 16px;
        height: 16px;
    }

    /* "Previous" points right (towards the start of the row), "next" points left. */
    .fnav-next .i {
        transform: scaleX(-1);
    }

    .fnav-btn:disabled {
        opacity: .4;
        cursor: default;
    }

    .fdots {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .fdots span {
        width: 7px;
        height: 7px;
        border-radius: 99px;
        background: #cfd4e6;
        transition: width .25s var(--ease), background-color .25s;
    }

    .fdots span.is-active {
        width: 22px;
        background: var(--violet-ink);
    }
}

/* ---- tablet and up */

@media (min-width: 640px) {
    .tick-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .fp-copy > .ticks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 20px;
    }

    .fpanel {
        padding: 22px;
    }
}

@media (min-width: 900px) {
    .features {
        padding-top: 40px;
    }

    .fpanel {
        padding: 24px;
        gap: 24px;
    }

    .fp-lead {
        max-width: 680px;
    }

    .shot {
        display: block;
        justify-self: center;
        width: fit-content;
        max-width: 100%;
        overflow: hidden;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        background: var(--app-bg);
        box-shadow: var(--shadow-shot);
    }

    .shot-body {
        padding: 10px;
    }

    .shot img {
        width: 620px;
        max-width: 100%;
        border-radius: 5px;
    }

    /* The tabs: a strip of ten buttons, an icon over a label. */
    .js .ftabs.is-tabs .ftab-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        margin-bottom: 12px;
        padding: 5px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--bg-2);
    }

    .js .ftabs.is-tabs .ftab {
        position: relative;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        min-height: 56px;
        padding: 6px 4px 9px;
        border: 1px solid transparent;
        border-radius: 13px;
        background: transparent;
        box-shadow: none;
        color: var(--ink-2);
        font-size: .8rem;
        text-align: center;
        white-space: normal;
    }

    .js .ftabs.is-tabs .ftab .i {
        width: 18px;
        height: 18px;
    }

    .js .ftabs.is-tabs .ftab:hover {
        background: rgba(255, 255, 255, .7);
        color: var(--ink);
    }

    .js .ftabs.is-tabs .ftab.is-active {
        border-color: var(--border);
        background: #fff;
        color: var(--ink);
        box-shadow: 0 10px 24px -16px rgba(17, 26, 53, .35);
    }

    .js .ftabs.is-tabs .ftab.is-active .i {
        color: var(--violet-ink);
    }

    /* A short bar under every tab, in the button gradient on the active one. */
    .js .ftabs.is-tabs .ftab::after {
        content: "";
        position: absolute;
        bottom: 4px;
        inset-inline-start: calc(50% - 10px);
        width: 20px;
        height: 3px;
        border-radius: 3px;
    }

    .js .ftabs.is-tabs .ftab.is-active::after {
        background: var(--grad);
    }
}

/* ---- desktop: ten tabs in one row and the copy beside the picture */

@media (min-width: 1024px) {
    .js .ftabs.is-tabs .ftab-list {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    /* The copy keeps at least 340px; below about 1160px the picture gives way and shrinks a
       little (a 2x screen still draws it from the 1240px file). */
    .fpanel {
        grid-template-columns: minmax(340px, 1fr) minmax(0, max-content);
        align-items: center;
        gap: 24px;
        padding: 24px;
    }

    .fp-copy > .ticks,
    .tick-groups {
        grid-template-columns: none;
    }

    .fp-lead {
        max-width: none;
    }

    .tick-groups {
        gap: 12px;
    }

    .fpanel .ticks {
        gap: 5px;
    }

    .fpanel .ticks li {
        line-height: 1.7;
    }

    .fp-cta {
        margin-top: 16px;
    }
}

@media (min-width: 1160px) {
    .fpanel {
        gap: 28px;
    }
}

@media (min-width: 1400px) {
    .fpanel {
        gap: 36px;
        padding: 28px 32px 28px 28px;
    }
}

/* "And also": smaller abilities that need no tab. */
.also {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 24px;
    text-align: center;
}

.also-title {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 750;
}

.also-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.also-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.6;
}

.also-list .i {
    width: 16px;
    height: 16px;
    color: var(--green-ink);
}

/* ------------------------------------------------------------------ AI */

.ai {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(55% 60% at 100% 0%, rgba(155, 111, 243, .35), transparent 70%),
        radial-gradient(50% 60% at 0% 100%, rgba(110, 156, 255, .3), transparent 70%),
        var(--navy-900);
}

.ai .eyebrow {
    background: rgba(255, 255, 255, .1);
    color: #d6dcff;
}

.ai .section-lead {
    color: rgba(228, 233, 255, .86);
}

.ai-grid {
    display: grid;
    gap: 12px;
}

.ai-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .05);
}

.ai-card h3 {
    margin-top: 4px;
    font-size: 1.02rem;
}

.ai-card p {
    color: rgba(228, 233, 255, .82);
    font-size: .88rem;
    line-height: 1.9;
}

.ai-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    color: #b9c9ff;
    font-size: .86rem;
    font-weight: 700;
}

.ai-link .i {
    width: 16px;
    height: 16px;
}

.ai-link:hover {
    color: #fff;
}

.mcp {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px dashed rgba(255, 255, 255, .22);
    border-radius: var(--radius);
    color: rgba(228, 233, 255, .88);
    font-size: .88rem;
    line-height: 1.9;
}

.mcp b {
    color: #fff;
}

@media (min-width: 640px) {
    .ai-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .ai-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .mcp {
        justify-content: center;
        margin-top: 16px;
    }
}

/* ------------------------------------------------------------------ for whom */

.audience-grid {
    display: grid;
    gap: 12px;
}

.aud-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.aud-card h3 {
    margin-top: 4px;
    font-size: 1.04rem;
}

.aud-card > p:not(.aud-links) {
    color: var(--ink-2);
    font-size: .88rem;
    line-height: 1.9;
}

.aud-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}

.aud-links a {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--violet-ink);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.8;
    transition: background-color .2s;
}

.aud-links a:hover {
    background: var(--violet-soft);
}

@media (min-width: 860px) {
    .audience-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .aud-card {
        padding: 24px 22px;
    }
}

/* ------------------------------------------------------------------ steps */

.steps-section {
    padding-top: 0;
}

.steps {
    display: grid;
    gap: 12px;
}

.step {
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.step-n {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    border-radius: 11px;
    background: var(--grad);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 12px 24px -12px rgba(95, 81, 236, .8);
}

.step h3 {
    font-size: 1.02rem;
}

.step p {
    margin-top: 6px;
    color: var(--ink-2);
    font-size: .88rem;
    line-height: 1.9;
}

.center-cta {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 24px;
    text-align: center;
}

.cta-note {
    color: var(--muted);
    font-size: .84rem;
}

@media (min-width: 720px) {
    .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .step {
        padding: 22px 20px;
    }
}

/* ------------------------------------------------------------------ plans */

.plans {
    background: #fff;
    border-block: 1px solid var(--border);
}

.plan-grid {
    display: grid;
    gap: 12px;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.plan h3 {
    font-size: 1.06rem;
}

.plan-desc {
    margin-top: 4px;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.85;
}

.price {
    display: grid;
    gap: 0;
    margin-top: 12px;
}

.price .amount {
    font-size: 1.55rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.price .unit {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
}

.plan-pages {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--bg-2);
    font-size: .86rem;
    font-weight: 700;
}

.plan-pages .i {
    width: 18px;
    height: 18px;
    color: var(--violet-ink);
}

.plan-save {
    margin-top: 8px;
    color: var(--green-ink);
    font-size: .8rem;
    font-weight: 700;
}

.plan-save span {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--green-soft);
    white-space: nowrap;
}

.plan .btn {
    margin-top: auto;
}

.plan-pages,
.plan-save {
    margin-bottom: 18px;
}

.plan-pages + .plan-save {
    margin-top: -10px;
}

.plan-trial {
    background: linear-gradient(180deg, #f5f3ff 0%, #fff 70%);
}

.plan-pop {
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--grad) border-box;
    box-shadow: 0 30px 60px -30px rgba(95, 81, 236, .55);
}

.plan-flag {
    position: absolute;
    top: -12px;
    inset-inline-start: 20px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--grad);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.9;
}

.plan-all {
    margin-top: 18px;
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.plan-all h3 {
    margin-bottom: 12px;
    font-size: .98rem;
}

.ticks-cols li {
    font-size: .86rem;
}

.plans-note {
    max-width: 820px;
    margin: 14px auto 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.9;
    text-align: center;
}

@media (min-width: 640px) {
    .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ticks-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 24px;
    }
}

@media (min-width: 1100px) {
    .plan-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .plan-all {
        padding: 22px 26px;
    }

    .ticks-cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ FAQ */

.faq-wrap {
    display: grid;
    gap: 8px;
}

.faq-list {
    display: grid;
    gap: 8px;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.faq-item[open] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 11px 16px;
    font-weight: 750;
    line-height: 1.65;
    font-size: .92rem;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary .i {
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform .25s var(--ease);
}

.faq-item[open] summary .i {
    transform: rotate(180deg);
}

.faq-a {
    padding: 0 16px 16px;
    color: var(--ink-2);
    line-height: 1.95;
    font-size: .9rem;
}

@media (min-width: 960px) {
    .faq-wrap {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: 44px;
        align-items: start;
    }

    .faq-head {
        position: sticky;
        top: calc(var(--header-h) + 24px);
        margin: 0;
        text-align: start;
    }

    .faq-item summary {
        padding: 12px 18px;
    }

    .faq-a {
        padding: 0 18px 18px;
    }
}

/* ------------------------------------------------------------------ final call to action */

.final-cta {
    padding-block: 0 56px;
}

.final-box {
    position: relative;
    overflow: hidden;
    padding: 32px 20px;
    border-radius: var(--radius-lg);
    color: #fff;
    text-align: center;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(155, 111, 243, .55), transparent 70%),
        radial-gradient(60% 80% at 0% 100%, rgba(110, 156, 255, .4), transparent 70%),
        var(--navy-900);
    box-shadow: var(--shadow);
}

.final-box h2 {
    max-width: 720px;
    margin-inline: auto;
}

.final-box p {
    max-width: 620px;
    margin: 10px auto 0;
    color: rgba(228, 233, 255, .88);
    font-size: .96rem;
    line-height: 1.95;
}

.final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.final-actions .btn {
    flex: 1 1 200px;
}

@media (min-width: 640px) {
    .final-actions .btn {
        flex: 0 0 auto;
    }
}

@media (min-width: 900px) {
    .final-cta {
        padding-block: 0 72px;
    }

    .final-box {
        padding: 44px 40px;
    }
}

/* ------------------------------------------------------------------ footer */

.site-footer {
    padding-block: 40px 24px;
    color: rgba(228, 233, 255, .78);
    background: var(--navy-950);
    font-size: .86rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
}

.footer-brand {
    grid-column: 1 / -1;
}

.footer-brand p {
    max-width: 400px;
    margin-top: 12px;
    line-height: 1.95;
}

.footer-mail a {
    color: #fff;
    font-weight: 700;
    unicode-bidi: isolate;
}

.footer-mail a:hover {
    text-decoration: underline;
}

.footer-title {
    margin-bottom: 8px;
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
}

.footer-col ul {
    display: grid;
    gap: 2px;
}

.footer-col a {
    display: inline-block;
    padding-block: 4px;
    transition: color .2s;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    display: grid;
    gap: 6px;
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(228, 233, 255, .66);
    font-size: .78rem;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .footer-grid {
        grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        gap: 24px;
    }
}

/* ------------------------------------------------------------------ motion */

@media (hover: none) {
    .btn:hover {
        transform: none;
    }
}

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

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}