/*
   Wlodarski Software — site styles

   Two decisions worth knowing before changing anything here.

   1. No web fonts. The system stack is used deliberately, not to save a request: SayIt
      itself ships with the system face for the same reason, and a company whose product
      sends nothing anywhere should not hand every visitor to a font CDN. It also means no
      FOUT, no layout shift and no blocking request on the critical path.

   2. Colours are the product's own. The ink is the app icon's background, the blue is the
      app's primary — already measured at 5.10:1 as text on white. Nothing here was picked
      to look nice in isolation.
*/

/* ---------------------------------------------------------------- tokens */

:root {
    color-scheme: light dark;

    --ink: #111318;
    --ink-soft: #3D424D;
    --muted: #6B7280;
    --paper: #F7F8FA;
    --surface: #FFFFFF;
    --hairline: #E4E6EB;
    --hairline-strong: #CDD1D9;
    --accent: #2A63D8;
    --accent-soft: rgba(42, 99, 216, 0.08);

    --shadow-lift: 0 1px 2px rgba(17, 19, 24, 0.04), 0 8px 24px rgba(17, 19, 24, 0.06);
    --shadow-deep: 0 2px 8px rgba(17, 19, 24, 0.06), 0 24px 64px rgba(17, 19, 24, 0.12);

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Cascadia Mono", monospace;

    --shell: min(1240px, 100% - 2 * var(--gutter));
    --gutter: 24px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 560ms;

    --header-h: 68px;
}

@media (min-width: 800px) {
    :root {
        --gutter: 48px;
        --header-h: 76px;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #ECEEF2;
        --ink-soft: #B9BFCA;
        --muted: #939AA6;
        --paper: #0A0C11;
        --surface: #131720;
        --hairline: #232833;
        --hairline-strong: #333A48;
        --accent: #8AA9FF;
        --accent-soft: rgba(138, 169, 255, 0.12);

        --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.36);
        --shadow-deep: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.5);
    }
}

:root[data-theme="dark"] {
    --ink: #ECEEF2;
    --ink-soft: #B9BFCA;
    --muted: #939AA6;
    --paper: #0A0C11;
    --surface: #131720;
    --hairline: #232833;
    --hairline-strong: #333A48;
    --accent: #8AA9FF;
    --accent-soft: rgba(138, 169, 255, 0.12);

    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.36);
    --shadow-deep: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------- reset */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.022em;
    text-wrap: balance;
    line-height: 1.08;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- type scale */

.display {
    font-size: clamp(2.75rem, 9vw, 6.5rem);
    letter-spacing: -0.038em;
    font-weight: 600;
    line-height: 0.98;
}

.h2 {
    font-size: clamp(2rem, 5.2vw, 3.5rem);
    letter-spacing: -0.03em;
}

.h3 {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    letter-spacing: -0.022em;
}

.lead {
    font-size: clamp(1.1rem, 1.9vw, 1.375rem);
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 400;
    letter-spacing: -0.012em;
    text-wrap: pretty;
}

.body { color: var(--ink-soft); text-wrap: pretty; }

.eyebrow {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
}

.measure { max-width: 34em; }
.measure-tight { max-width: 26em; }

/* ---------------------------------------------------------------- layout */

.shell {
    width: var(--shell);
    margin-inline: auto;
}

main > section {
    padding-block: clamp(80px, 12vw, 168px);
}

/*
   Sections share one ground and are separated by rhythm, not by boxes. Where a boundary
   genuinely helps the eye, it is a hairline that stops short of the edges rather than a
   change of background — a stack of tinted bands is what makes a page read as a template.
*/
.rule {
    width: var(--shell);
    margin-inline: auto;
    height: 1px;
    background: var(--hairline);
    border: 0;
}

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

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}

.header[data-scrolled="true"] {
    border-bottom-color: var(--hairline);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.header__inner {
    width: var(--shell);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.018em;
    font-size: 0.98rem;
    white-space: nowrap;
}

.brand__mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: none;
}

.nav {
    margin-left: auto;
    display: none;
    align-items: center;
    gap: 28px;
}

@media (min-width: 800px) {
    .nav { display: flex; }
}

.nav a {
    font-size: 0.94rem;
    color: var(--ink-soft);
    position: relative;
    padding-block: 4px;
    transition: color 200ms var(--ease);
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms var(--ease);
}

.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

/* language switch */

.lang {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

@media (min-width: 800px) {
    .lang { margin-left: 0; }
}

.lang a {
    padding: 5px 11px;
    border-radius: 999px;
    color: var(--muted);
    transition: color 240ms var(--ease), background-color 240ms var(--ease);
}

.lang a:hover { color: var(--ink); }

.lang a[aria-current="true"] {
    color: var(--surface);
    background: var(--ink);
}

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

.hero {
    padding-top: clamp(64px, 11vw, 132px);
    padding-bottom: clamp(56px, 9vw, 120px);
}

.hero__title span {
    display: block;
    overflow: hidden;
}

.hero__title i {
    display: block;
    font-style: normal;
    transform: translateY(105%);
    transition: transform 900ms var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}

.is-ready .hero__title i { transform: translateY(0); }

.hero__lead {
    margin-top: clamp(28px, 4vw, 44px);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--ease) 380ms, transform 700ms var(--ease) 380ms;
}

.is-ready .hero__lead { opacity: 1; transform: none; }

.hero__actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--ease) 500ms, transform 700ms var(--ease) 500ms;
}

.is-ready .hero__actions { opacity: 1; transform: none; }

/*
   A hairline that draws itself across the page once, under the hero. It is the only purely
   decorative motion on the site, and it earns its place by marking where the page starts.
*/
.hero__line {
    margin-top: clamp(64px, 10vw, 120px);
    height: 1px;
    background: var(--hairline-strong);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1400ms var(--ease) 300ms;
}

.is-ready .hero__line { transform: scaleX(1); }

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: -0.008em;
    border: 1px solid transparent;
    transition: transform 240ms var(--ease), background-color 240ms var(--ease),
                border-color 240ms var(--ease), color 240ms var(--ease);
    will-change: transform;
}

.btn--primary {
    background: var(--ink);
    color: var(--paper);
}

.btn--primary:hover {
    transform: translateY(-2px);
    background: var(--accent);
}

.btn--ghost {
    border-color: var(--hairline-strong);
    color: var(--ink);
}

.btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--ink);
}

.btn__arrow { transition: transform 300ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------------------------------------------------------------- reveal */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
}

[data-reveal].in {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------- product feature */

.feature {
    display: grid;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
}

@media (min-width: 900px) {
    .feature { grid-template-columns: 1fr 0.85fr; }
}

.feature__body > * + * { margin-top: 24px; }

.feature__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 28px;
}

.tag {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--surface);
}

/* ---------------------------------------------------------------- phone */

.phone {
    position: relative;
    width: min(300px, 74vw);
    margin-inline: auto;
    aspect-ratio: 9 / 19.3;
    border-radius: 42px;
    padding: 9px;
    background: var(--ink);
    box-shadow: var(--shadow-deep);
}

.phone::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.phone__screen {
    position: relative;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    background: var(--surface);
}

.phone__screen img,
.phone__screen .shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
   Placeholder for a screenshot we do not have yet.

   Deliberately not a drawing of the app. Inventing a screen would put a picture of
   software that does not exist in front of someone deciding whether to install the real
   thing — and it would be the one part of this page that is a lie.
*/
.shot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--accent-soft) 0 10px,
            transparent 10px 20px
        ),
        var(--surface);
    border: 1px dashed var(--hairline-strong);
    border-radius: 34px;
    opacity: 0;
    transition: opacity 500ms var(--ease);
}

.shot__label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.shot__name {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.shot[data-active="true"] { opacity: 1; }

/* ---------------------------------------------------------------- scroll story */

.story { padding-block: 0; }

.story__inner {
    display: grid;
    gap: 0;
}

@media (min-width: 900px) {
    .story__inner { grid-template-columns: 0.9fr 1fr; }
}

.story__stage {
    position: sticky;
    top: var(--header-h);
    height: 52vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

@media (min-width: 900px) {
    .story__stage {
        top: 0;
        height: 100vh;
        order: 2;
    }
}

.story__steps { position: relative; }

.step {
    min-height: 74vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 40px;
}

@media (min-width: 900px) {
    .step { min-height: 100vh; }
}

.step__num {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 18px;
}

.step__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    letter-spacing: -0.03em;
    font-weight: 600;
    line-height: 1.06;
}

.step__body {
    margin-top: 18px;
    color: var(--ink-soft);
    max-width: 30em;
    text-wrap: pretty;
}

/* The step that is level with the phone carries full weight; the others recede. */
.step { transition: opacity 500ms var(--ease); }

@media (min-width: 900px) {
    .step { opacity: 0.32; }
    .step[data-active="true"] { opacity: 1; }
}

/* ---------------------------------------------------------------- stats */

.stats {
    display: grid;
    gap: 1px;
    background: var(--hairline);
    border-block: 1px solid var(--hairline);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 800px) {
    .stats { grid-template-columns: repeat(4, 1fr); }
}

.stat {
    background: var(--paper);
    padding: clamp(28px, 4vw, 48px) clamp(16px, 2vw, 28px);
}

.stat__value {
    font-family: var(--mono);
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--ink);
}

.stat__label {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--muted);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------- marquee */

.marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    padding-block: 8px;
}

.marquee__track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: drift 64s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.chip {
    flex: none;
    padding: 11px 20px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.94rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- tiers */

.tiers {
    display: grid;
    gap: 24px;
}

@media (min-width: 800px) {
    .tiers { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.tier {
    border: 1px solid var(--hairline);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 44px);
    background: var(--surface);
    transition: transform 300ms var(--ease), border-color 300ms var(--ease),
                box-shadow 300ms var(--ease);
}

.tier:hover {
    transform: translateY(-3px);
    border-color: var(--hairline-strong);
    box-shadow: var(--shadow-lift);
}

.tier__name {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.tier__note {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.tier__list {
    margin-top: 28px;
    display: grid;
    gap: 14px;
}

.tier__list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    color: var(--ink-soft);
    font-size: 0.98rem;
}

.tier__list svg { margin-top: 5px; color: var(--accent); }

/* ---------------------------------------------------------------- flow */

.flow {
    display: grid;
    gap: 20px;
    counter-reset: flow;
}

@media (min-width: 760px) {
    .flow { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

.flow__item {
    padding: 28px 24px;
    border-top: 2px solid var(--ink);
    background: transparent;
}

.flow__step {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.flow__title {
    margin-top: 14px;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.018em;
}

.flow__body {
    margin-top: 10px;
    font-size: 0.94rem;
    color: var(--muted);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------- statement */

.statement {
    font-size: clamp(1.6rem, 4.4vw, 3rem);
    letter-spacing: -0.032em;
    line-height: 1.14;
    font-weight: 500;
    max-width: 18em;
    text-wrap: balance;
}

.statement em {
    font-style: normal;
    color: var(--muted);
}

/* ---------------------------------------------------------------- cta */

.cta {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 28px;
}

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

.footer {
    border-top: 1px solid var(--hairline);
    padding-block: clamp(48px, 7vw, 88px);
    margin-top: clamp(60px, 9vw, 120px);
}

.footer__inner {
    display: grid;
    gap: 40px;
}

@media (min-width: 760px) {
    .footer__inner {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 32px;
    }
}

.footer__col h2 {
    font-size: 0.75rem;
    font-family: var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 16px;
}

.footer__col li + li { margin-top: 10px; }

.footer__col a {
    color: var(--ink-soft);
    font-size: 0.96rem;
    transition: color 200ms var(--ease);
}

.footer__col a:hover { color: var(--accent); }

.footer__bottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    font-size: 0.86rem;
    color: var(--muted);
}

/* ---------------------------------------------------------------- document pages */

.doc {
    padding-block: clamp(56px, 8vw, 104px);
}

.doc__head {
    padding-bottom: clamp(32px, 5vw, 56px);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: clamp(40px, 6vw, 64px);
}

.doc__meta {
    margin-top: 20px;
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--muted);
    display: grid;
    gap: 4px;
}

.prose {
    max-width: 40em;
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--ink-soft);
}

.prose > * + * { margin-top: 1.1em; }

.prose h2 {
    margin-top: 2.4em;
    font-size: 1.4rem;
    letter-spacing: -0.022em;
    color: var(--ink);
}

.prose h3 {
    margin-top: 2em;
    font-size: 1.1rem;
    letter-spacing: -0.018em;
    color: var(--ink);
}

.prose strong { color: var(--ink); font-weight: 600; }

.prose ul {
    list-style: disc;
    padding-left: 1.3em;
}

.prose li + li { margin-top: 0.5em; }

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.prose th, .prose td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.prose th { color: var(--ink); font-weight: 600; }

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.prose code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: var(--accent-soft);
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--ink);
}

.callout {
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 20px;
    color: var(--ink);
}

/* ---------------------------------------------------------------- todo marker */

/*
   Visible on purpose. A placeholder that looks finished is a placeholder that ships.
*/
.todo {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    padding: 3px 8px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .todo {
        color: #FDE68A;
        background: rgba(253, 230, 138, 0.1);
        border-color: rgba(253, 230, 138, 0.3);
    }
}

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

/*
   Everything above degrades to "visible, still, complete". No content lives behind an
   animation, so switching them all off costs nothing but the choreography.
*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal],
    .hero__lead,
    .hero__actions {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__title i { transform: none !important; }
    .hero__line { transform: scaleX(1) !important; }
    .marquee__track { animation: none !important; }
    .step { opacity: 1 !important; }

    .story__stage {
        position: static;
        height: auto;
        padding-block: 32px;
    }
}

/* ---------------------------------------------------------------- small utilities */

/*
   Named rather than inlined. An inline style is a second place for a decision to live,
   and the first duplicate attribute silently wins over the one somebody meant.
*/
.feature__cta { margin-top: 36px; }
.stance__body { margin-top: 40px; }
.footer__blurb { margin-top: 16px; font-size: 0.94rem; max-width: 26em; }
.section-lead { margin-top: 40px; }

/* ---------------------------------------------------------------- story shots */

/*
   Every screen in the stage is stacked in the same place and crossfaded. Opacity only —
   nothing here moves, resizes or reflows, so switching screens costs one composited layer
   and never a layout pass.
*/
.phone__screen [data-shot] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 480ms var(--ease);
}

.phone__screen [data-shot][data-active="true"] { opacity: 1; }

.phone__screen img[data-shot] { object-fit: cover; }

/* The first screen is painted before any script runs, so the frame is never empty. */
.no-js .phone__screen [data-shot="0"] { opacity: 1; }

/* ---------------------------------------------------------------- hero, product */

.hero--product .hero__title { max-width: 14em; }

.hero__aside {
    margin-top: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--ease) 620ms, transform 700ms var(--ease) 620ms;
}

.is-ready .hero__aside { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .hero__aside { opacity: 1 !important; transform: none !important; }
}

.no-js .hero__aside { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- privacy block */

.privacy-grid {
    display: grid;
    gap: 28px;
    margin-top: 48px;
}

@media (min-width: 760px) {
    .privacy-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.privacy-item h3 {
    font-size: 1.05rem;
    letter-spacing: -0.018em;
    margin-bottom: 10px;
}

.privacy-item p {
    color: var(--muted);
    font-size: 0.96rem;
    text-wrap: pretty;
}

.doc__title { margin-top: 16px; }
.doc__back { margin-top: 64px; }

/* ---------------------------------------------------------------- second product */

/*
   A wide row rather than a card beside SayIt.

   Two equal cards would say the two products are equally far along, and one of them is
   in beta with no screenshots yet. The row is quieter without being an afterthought —
   the hierarchy is a fact about the products, not a layout accident.
*/
.product-row {
    display: grid;
    gap: 28px;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: var(--surface);
    transition: transform 300ms var(--ease), border-color 300ms var(--ease),
                box-shadow 300ms var(--ease);
}

.product-row:hover {
    transform: translateY(-3px);
    border-color: var(--hairline-strong);
    box-shadow: var(--shadow-lift);
}

@media (min-width: 860px) {
    .product-row {
        grid-template-columns: 1fr 1.35fr;
        gap: 48px;
        align-items: start;
    }
}

.product-row__name {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.026em;
}

.product-row__tagline {
    margin-top: 12px;
    font-size: 1.05rem;
    color: var(--accent);
    letter-spacing: -0.012em;
}

.product-row__body > * + * { margin-top: 20px; }

.product-row__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 500;
    border-bottom: 1px solid var(--hairline-strong);
    padding-bottom: 3px;
    transition: color 240ms var(--ease), border-color 240ms var(--ease);
}

.product-row__link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------- story on narrow screens */

/*
   The phone has to fit its stage, and the stage has to be opaque.

   What went wrong: the phone is sized by width (300px) and its 9:19.3 ratio then makes it
   about 640px tall, while the stage was 52vh — roughly 400px on a phone. The picture spilled
   out of its own box, and because the stage sits above the steps in the stacking order it
   painted straight over the text. The stage being transparent finished the job: the text
   scrolled *behind* the screenshot instead of being cleanly hidden by it.

   Two fixes, both necessary. The phone is now sized by height so it can never exceed the
   stage, and the stage paints the page background so anything passing under it disappears
   rather than showing through.

   The container also becomes a block. A sticky element can only travel inside its own
   containing block, and as a grid item in a one-column layout that box is a single row —
   which is not something you can see going wrong, only something you can see failing to
   work.
*/
@media (max-width: 899px) {
    .story__inner { display: block; }

    .story__stage {
        position: sticky;
        top: var(--header-h);
        z-index: 2;
        height: 48vh;
        padding-block: 10px 16px;
        background: var(--paper);
    }

    .story__stage .phone {
        height: 100%;
        width: auto;
        max-width: 72vw;
        padding: 6px;
        border-radius: 30px;
    }

    .story__stage .phone__screen { border-radius: 25px; }

    /* The speaker slot is drawn at a fixed size and stops reading as one once the device
       is this small. */
    .story__stage .phone::after { display: none; }

    /* Short enough that a step's text lands in the band below the stage rather than under
       it, tall enough that only one step is ever the obvious subject. */
    .step {
        min-height: 56vh;
        padding-block: 20px;
    }

    .step__body { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .story__stage {
        position: static;
        height: auto;
        background: transparent;
    }

    .story__stage .phone {
        height: auto;
        width: min(300px, 74vw);
    }
}

/* ============================================================================
   Wlodarski Software — 2026 portfolio redesign
   A restrained product-studio layer on top of the original semantic structure.
   ========================================================================== */

:root {
    color-scheme: dark;
    --ink: #f4f4ef;
    --ink-soft: #c5c7c1;
    --muted: #858a84;
    --paper: #080a09;
    --surface: #101310;
    --surface-2: #151914;
    --hairline: rgba(255,255,255,.095);
    --hairline-strong: rgba(255,255,255,.18);
    --accent: #b6ff60;
    --accent-2: #79a8ff;
    --accent-soft: rgba(182,255,96,.10);
    --shadow-lift: 0 22px 70px rgba(0,0,0,.28);
    --shadow-deep: 0 38px 120px rgba(0,0,0,.5);
    --shell: min(1320px, 100% - 2 * var(--gutter));
    --gutter: 22px;
    --header-h: 76px;
    --radius: 28px;
}

@media (min-width: 800px) { :root { --gutter: 48px; --header-h: 88px; } }

html { background: var(--paper); }
body {
    background:
        radial-gradient(900px 500px at var(--mx, 75%) var(--my, 5%), rgba(182,255,96,.07), transparent 62%),
        radial-gradient(720px 520px at 15% 32%, rgba(121,168,255,.055), transparent 68%),
        var(--paper);
    color: var(--ink);
    font-size: 16px;
    letter-spacing: -.008em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 65%);
    mask-image: linear-gradient(to bottom, black, transparent 65%);
}

::selection { background: var(--accent); color: #071006; }

.display {
    font-size: clamp(3.3rem, 9.2vw, 8.7rem);
    line-height: .88;
    letter-spacing: -.065em;
    font-weight: 620;
}

.h2 {
    font-size: clamp(2.45rem, 5.3vw, 5rem);
    line-height: .96;
    letter-spacing: -.052em;
    font-weight: 590;
}

.h3 { letter-spacing: -.035em; }
.lead { color: #b8bcb5; line-height: 1.55; }
.body { color: #989e97; }
.eyebrow {
    color: #9aa199;
    font-size: .68rem;
    letter-spacing: .18em;
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: currentColor;
    opacity: .55;
}

main > section { padding-block: clamp(92px, 11vw, 172px); }
.rule { background: linear-gradient(90deg, transparent, var(--hairline-strong) 12%, var(--hairline-strong) 88%, transparent); }

.header {
    height: var(--header-h);
    background: linear-gradient(to bottom, rgba(8,10,9,.88), rgba(8,10,9,.56));
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
.header[data-scrolled="true"] { background: rgba(8,10,9,.82); border-bottom-color: var(--hairline); }
.header__inner { gap: 26px; }
.brand { font-size: .9rem; letter-spacing: -.02em; }
.brand__mark { width: 28px; height: 28px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.nav { gap: 32px; }
.nav a { color: #9ea39d; font-size: .87rem; }
.nav a:hover { color: #f7f7f2; }
.lang { border-color: var(--hairline); background: rgba(255,255,255,.035); padding: 4px; }
.lang a { padding: 5px 8px; border-radius: 999px; color: #7e847d; }
.lang a[aria-current="true"], .lang a[aria-current="page"] { color: var(--ink); background: rgba(255,255,255,.08); }

.hero {
    position: relative;
    min-height: calc(100svh - var(--header-h));
    display: grid;
    align-items: center;
    padding-top: clamp(64px, 8vw, 110px);
    overflow: clip;
}
.hero::after {
    content: "";
    position: absolute;
    width: min(64vw, 920px);
    aspect-ratio: 1;
    right: -28vw;
    top: 0;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%;
    box-shadow: inset 0 0 120px rgba(182,255,96,.025), 0 0 160px rgba(182,255,96,.018);
    pointer-events: none;
}
.hero .shell { position: relative; z-index: 1; }
.hero__title { max-width: 11.4em; }
.hero__title span { overflow: visible; }
.hero__title i { font-style: normal; }
.hero__title span:last-child i { color: #aeb5ad; }
.hero__lead { margin-top: clamp(30px, 4vw, 52px); max-width: 31em; }
.hero__actions { margin-top: 34px; gap: 12px; display: flex; flex-wrap: wrap; }
.hero__line { margin-top: clamp(64px, 8vw, 100px); background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.08) 18%, rgba(255,255,255,.03)); }
.hero__aside { color: #8b928a; gap: 12px; }
.hero__aside span { border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 11px; background: rgba(255,255,255,.025); }

.btn {
    min-height: 48px;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: .9rem;
    font-weight: 570;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #091008; box-shadow: 0 8px 34px rgba(182,255,96,.12); }
.btn--primary:hover { background: #c8ff87; box-shadow: 0 12px 42px rgba(182,255,96,.2); }
.btn--ghost { border-color: var(--hairline-strong); background: rgba(255,255,255,.025); color: #e7e9e3; }
.btn--ghost:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.06); }
.btn__arrow { transition: transform .28s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Home: product presentation becomes a portfolio scene rather than a card list. */
body[data-page="home"] #products { position: relative; }
body[data-page="home"] #products::before {
    content: "SELECTED / PRODUCTS";
    position: absolute;
    top: 64px;
    right: max(var(--gutter), calc((100vw - 1320px)/2));
    color: rgba(255,255,255,.16);
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .16em;
}
.feature {
    gap: clamp(52px, 8vw, 112px);
    align-items: center;
}
.feature__body { position: relative; z-index: 2; }
.feature__meta { gap: 8px; }
.tag, .chip {
    border: 1px solid var(--hairline);
    background: rgba(255,255,255,.025);
    color: #a9afa8;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: .72rem;
    letter-spacing: .02em;
}

.phone {
    position: relative;
    padding: 8px;
    background: linear-gradient(150deg, #2d312d, #101210 48%, #242824);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 38px 100px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone::before {
    content: "";
    position: absolute;
    inset: -14% -36%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(182,255,96,.11), transparent 62%);
    filter: blur(18px);
}
.phone__screen { background: #0f1110; }

.product-row {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 5vw, 64px);
    border-color: var(--hairline);
    border-radius: var(--radius);
    background:
        radial-gradient(720px 320px at 95% 0%, rgba(121,168,255,.085), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.product-row::after {
    content: "02";
    position: absolute;
    right: 28px;
    bottom: -24px;
    font-size: clamp(6rem, 16vw, 13rem);
    line-height: 1;
    font-weight: 650;
    letter-spacing: -.08em;
    color: rgba(255,255,255,.025);
    pointer-events: none;
}
.product-row:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.18); box-shadow: var(--shadow-lift); }
.product-row__name { font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.048em; }
.product-row__tagline { color: var(--accent-2); }

.statement {
    max-width: 13em;
    font-size: clamp(2.7rem, 6.2vw, 6.2rem);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 560;
}
.statement em { color: var(--accent); font-style: normal; }

.cta { position: relative; }
.cta .h2 { max-width: 12em; }
.cta::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 0;
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: .8;
    color: rgba(255,255,255,.05);
}

/* Product pages */
.hero--product { min-height: min(860px, calc(100svh - var(--header-h))); }
.hero--product::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 54vw;
    max-width: 820px;
    height: 320px;
    background: radial-gradient(ellipse, rgba(182,255,96,.065), transparent 72%);
    transform: translateX(-12%);
    filter: blur(28px);
    pointer-events: none;
}
body[data-page="trakio"] .hero--product::before { background: radial-gradient(ellipse, rgba(121,168,255,.11), transparent 72%); }
body[data-page="trakio"] { --accent: #88b0ff; --accent-soft: rgba(136,176,255,.11); }
body[data-page="trakio"] .statement em { color: var(--accent); }

.story { position: relative; }
.story__inner { gap: clamp(52px, 8vw, 120px); }
.story__stage { top: calc(var(--header-h) + 20px); }
.story__stage::before {
    content: "LIVE / PRODUCT";
    position: absolute;
    top: 4px;
    left: 0;
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .17em;
    color: rgba(255,255,255,.22);
}
.step { border-top-color: var(--hairline); }
.step[data-active="true"] { opacity: 1; }
.step__num { color: var(--accent); font-size: .68rem; }
.step__title { font-size: clamp(1.9rem, 3.6vw, 3.6rem); letter-spacing: -.045em; }
.step__body { color: #969c95; font-size: 1rem; }

.stats {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.stat { padding: clamp(30px, 5vw, 58px) 0; border-color: var(--hairline); }
.stat__value { font-size: clamp(2.7rem, 6vw, 5.8rem); letter-spacing: -.06em; color: #f0f2ec; }
.stat__label { color: #858b84; }

.tiers { gap: 14px; }
.tier {
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    border-color: var(--hairline);
    padding: clamp(28px, 4vw, 42px);
}
.tier:hover { border-color: rgba(255,255,255,.18); transform: translateY(-3px); }
.tier__name { font-size: 1.25rem; }
.tier__list li::before { color: var(--accent); }

.privacy-grid { gap: 14px; }
.privacy-item {
    padding: 26px;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: rgba(255,255,255,.02);
}
.privacy-item h3 { font-size: 1rem; }
.privacy-item p { color: #848a83; }

/* Policy / document pages inherit the same brand but prioritise reading. */
.doc { max-width: 900px; }
.doc__head { padding-bottom: 34px; border-bottom: 1px solid var(--hairline); }
.doc__title { font-size: clamp(2.7rem, 7vw, 5.8rem); letter-spacing: -.055em; }
.prose { color: #aeb3ad; }
.prose h2, .prose h3 { color: #f0f2ec; }
.prose a { color: var(--accent); }
.prose table { border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.prose th, .prose td { border-color: var(--hairline); }
.prose code { background: var(--accent-soft); }
.callout { border-left-color: var(--accent); background: rgba(255,255,255,.02); padding: 18px 20px; border-radius: 0 14px 14px 0; }

.footer {
    border-top: 1px solid var(--hairline);
    background: #060706;
}
.footer__inner { padding-top: 72px; }
.footer a { color: #a4aaa3; }
.footer a:hover { color: var(--accent); }
.footer__bottom { color: #696f69; }

[data-reveal] {
    transform: translateY(34px);
    filter: blur(7px);
    transition: opacity 800ms var(--ease), transform 900ms var(--ease), filter 800ms var(--ease);
}
[data-reveal].in { filter: blur(0); }

@media (hover:hover) and (pointer:fine) {
    .phone { transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
    .feature:hover .phone { transform: translateY(-8px) rotate(.6deg); box-shadow: 0 50px 120px rgba(0,0,0,.6); }
}

@media (max-width: 899px) {
    body::before { background-size: 48px 48px; opacity: .14; }
    .hero { min-height: auto; padding-block: 92px 78px; }
    .hero::after { right: -55vw; width: 115vw; top: 4%; }
    .display { font-size: clamp(3.15rem, 15vw, 5.8rem); }
    .hero__lead { max-width: 25em; }
    .feature { gap: 56px; }
    .feature > div:last-child { display: flex; justify-content: center; }
    .feature .phone { width: min(300px, 72vw); transform: rotate(1.5deg); }
    .product-row { border-radius: 22px; }
    .statement { font-size: clamp(2.65rem, 11vw, 4.3rem); }
    .story__stage { background: linear-gradient(to bottom, #080a09 82%, rgba(8,10,9,.94)); }
    .privacy-item { padding: 22px; }
}

@media (max-width: 560px) {
    .brand span { max-width: 130px; white-space: normal; line-height: 1.05; }
    .hero__actions .btn { width: 100%; }
    .lang { flex: none; }
    .cta::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { filter: none !important; }
}

/* ==========================================================================
   Theme switch + equal product showcases
   ========================================================================== */

.theme-toggle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 0;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    color: var(--ink-soft);
    font: inherit;
    cursor: pointer;
    transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease), color .28s var(--ease);
}
.theme-toggle:hover {
    transform: translateY(-1px) rotate(4deg);
    border-color: var(--hairline-strong);
    color: var(--ink);
}
.theme-toggle__sun,
.theme-toggle__moon {
    position: absolute;
    line-height: 1;
    font-size: 1rem;
    transition: opacity .26s var(--ease), transform .34s var(--ease);
}
:root[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: scale(1) rotate(0deg); }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: scale(.65) rotate(-35deg); }
:root[data-theme="light"] .theme-toggle__sun { opacity: 0; transform: scale(.65) rotate(35deg); }
:root[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: scale(1) rotate(0deg); }

.product-divider {
    width: 100%;
    height: 1px;
    margin-block: clamp(76px, 10vw, 138px);
    background: linear-gradient(90deg, transparent, var(--hairline-strong) 14%, var(--hairline-strong) 86%, transparent);
}

.feature--trakio {
    --accent: var(--accent-2);
}
.feature--trakio .phone::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 62%);
}
.feature--trakio .btn--primary {
    background: var(--accent-2);
    color: #07101f;
    box-shadow: 0 8px 34px rgba(121,168,255,.14);
}
.feature--trakio .btn--primary:hover {
    background: #9fbdff;
    box-shadow: 0 12px 42px rgba(121,168,255,.22);
}

/* A deliberately designed light palette — not an inverted dark theme. */
:root[data-theme="light"] {
    color-scheme: light;
    --ink: #121511;
    --ink-soft: #3f463f;
    --muted: #727a72;
    --paper: #f3f5ef;
    --surface: #ffffff;
    --surface-2: #eaeee6;
    --hairline: rgba(18,21,17,.105);
    --hairline-strong: rgba(18,21,17,.19);
    --accent: #5d930e;
    --accent-2: #3568c9;
    --accent-soft: rgba(93,147,14,.10);
    --shadow-lift: 0 22px 70px rgba(31,40,26,.10);
    --shadow-deep: 0 38px 120px rgba(31,40,26,.16);
}

:root[data-theme="light"] body {
    background:
        radial-gradient(900px 500px at var(--mx, 75%) var(--my, 5%), rgba(116,171,45,.105), transparent 62%),
        radial-gradient(720px 520px at 15% 32%, rgba(69,113,205,.07), transparent 68%),
        var(--paper);
}
:root[data-theme="light"] body::before {
    opacity: .38;
    background-image:
        linear-gradient(rgba(18,21,17,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,21,17,.045) 1px, transparent 1px);
}
:root[data-theme="light"] ::selection { background: #b8e778; color: #14200b; }
:root[data-theme="light"] .lead { color: #414841; }
:root[data-theme="light"] .body { color: #596159; }
:root[data-theme="light"] .eyebrow { color: #6e776e; }

:root[data-theme="light"] .header {
    background: linear-gradient(to bottom, rgba(243,245,239,.91), rgba(243,245,239,.68));
}
:root[data-theme="light"] .header[data-scrolled="true"] {
    background: rgba(243,245,239,.88);
}
:root[data-theme="light"] .brand__mark { box-shadow: 0 0 0 1px rgba(18,21,17,.08); }
:root[data-theme="light"] .nav a { color: #737b73; }
:root[data-theme="light"] .nav a:hover,
:root[data-theme="light"] .nav a[aria-current="page"] { color: var(--ink); }
:root[data-theme="light"] .lang {
    background: rgba(255,255,255,.48);
}
:root[data-theme="light"] .lang a { color: #7a8279; }
:root[data-theme="light"] .lang a[aria-current="true"],
:root[data-theme="light"] .lang a[aria-current="page"] {
    color: var(--ink);
    background: rgba(18,21,17,.075);
}

:root[data-theme="light"] .hero::after {
    border-color: rgba(18,21,17,.08);
    box-shadow: inset 0 0 120px rgba(110,166,38,.06), 0 0 160px rgba(110,166,38,.035);
}
:root[data-theme="light"] .hero__title span:last-child i { color: #5f675f; }
:root[data-theme="light"] .hero__line {
    background: linear-gradient(90deg, var(--accent), rgba(18,21,17,.14) 18%, rgba(18,21,17,.04));
}
:root[data-theme="light"] .hero__aside { color: #687168; }
:root[data-theme="light"] .hero__aside span,
:root[data-theme="light"] .tag,
:root[data-theme="light"] .chip {
    background: rgba(255,255,255,.45);
}
:root[data-theme="light"] .tag,
:root[data-theme="light"] .chip { color: #596159; }

:root[data-theme="light"] .btn--primary {
    background: #76aa2f;
    color: #0f1908;
    box-shadow: 0 8px 34px rgba(93,147,14,.16);
}
:root[data-theme="light"] .btn--primary:hover { background: #84b93c; }
:root[data-theme="light"] .btn--ghost {
    border-color: var(--hairline-strong);
    background: rgba(255,255,255,.46);
    color: #242a24;
}
:root[data-theme="light"] .btn--ghost:hover {
    border-color: rgba(18,21,17,.29);
    background: rgba(255,255,255,.76);
}
:root[data-theme="light"] .feature--trakio .btn--primary {
    background: #557fd6;
    color: #fff;
    box-shadow: 0 8px 34px rgba(53,104,201,.16);
}
:root[data-theme="light"] .feature--trakio .btn--primary:hover { background: #638bdd; }

:root[data-theme="light"] body[data-page="home"] #products::before,
:root[data-theme="light"] .story__stage::before { color: rgba(18,21,17,.25); }
:root[data-theme="light"] .phone {
    background: linear-gradient(150deg, #505650, #171a17 48%, #353a35);
    border-color: rgba(18,21,17,.18);
    box-shadow: 0 38px 100px rgba(29,38,25,.18), inset 0 0 0 1px rgba(255,255,255,.18);
}
:root[data-theme="light"] .phone::before {
    background: radial-gradient(circle, rgba(107,163,36,.14), transparent 62%);
}
:root[data-theme="light"] .feature--trakio .phone::before {
    background: radial-gradient(circle, rgba(53,104,201,.14), transparent 62%);
}
:root[data-theme="light"] .statement em { color: #5d930e; }
:root[data-theme="light"] .cta::after { color: rgba(18,21,17,.055); }

:root[data-theme="light"] .step__body,
:root[data-theme="light"] .stat__label,
:root[data-theme="light"] .privacy-item p { color: #626a62; }
:root[data-theme="light"] .stat__value,
:root[data-theme="light"] .prose h2,
:root[data-theme="light"] .prose h3 { color: #171b17; }
:root[data-theme="light"] .tier,
:root[data-theme="light"] .privacy-item,
:root[data-theme="light"] .callout {
    background: rgba(255,255,255,.48);
}
:root[data-theme="light"] .tier:hover { border-color: rgba(18,21,17,.2); }
:root[data-theme="light"] .prose { color: #474e47; }
:root[data-theme="light"] .footer { background: #e9ede5; }
:root[data-theme="light"] .footer a { color: #5f675f; }
:root[data-theme="light"] .footer__bottom { color: #7b837a; }

@media (hover:hover) and (pointer:fine) {
    :root[data-theme="light"] .feature:hover .phone {
        box-shadow: 0 50px 120px rgba(29,38,25,.22);
    }
}

@media (max-width: 899px) {
    :root[data-theme="light"] .story__stage {
        background: linear-gradient(to bottom, #f3f5ef 82%, rgba(243,245,239,.94));
    }
}

@media (max-width: 720px) {
    .header__inner { gap: 10px; }
    .nav { display: none; }
    .lang { margin-left: auto; }
    .theme-toggle { width: 36px; height: 36px; flex-basis: 36px; }
}

/* ========================================================================== 
   Home product scroll stories
   ========================================================================== */

.product-showcase {
    margin-top: clamp(44px, 6vw, 76px);
}

.product-showcase__intro {
    display: grid;
    gap: clamp(30px, 6vw, 88px);
    align-items: end;
    padding-bottom: clamp(46px, 6vw, 76px);
    border-bottom: 1px solid var(--hairline);
}

@media (min-width: 900px) {
    .product-showcase__intro {
        grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
    }
}

.product-showcase__intro .h2 { margin-top: 12px; }
.product-showcase__intro .lead { margin-top: 24px; }
.product-showcase__aside > * + * { margin-top: 22px; }
.product-showcase__aside .feature__cta { margin-top: 32px; }

.story--product { margin-top: 0; }
.story--product .story__inner { position: relative; }
.story--product .story__stage {
    isolation: isolate;
}
.story--product .story__stage::before {
    content: "";
    position: absolute;
    width: min(44vw, 560px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 11%, transparent), transparent 66%);
    filter: blur(8px);
    pointer-events: none;
    z-index: -1;
}
.feature--trakio .story__stage::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 66%);
}

@media (min-width: 900px) {
    .story--product .story__inner { grid-template-columns: minmax(0, .88fr) minmax(380px, 1fr); }
    .story--product .story__stage { order: 2; height: 100vh; }
    .story--product .step { min-height: 76vh; padding-block: 64px; }
    .story--product .story__steps { padding-block: 12vh; }
    .story--product .phone { width: min(310px, 23vw); }
}

@media (max-width: 899px) {
    .product-showcase__intro { padding-bottom: 34px; }
    .story--product .story__stage {
        height: 48svh;
        min-height: 330px;
        background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 96%, transparent) 84%, color-mix(in srgb, var(--paper) 86%, transparent));
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .story--product .story__stage .phone {
        width: auto;
        height: min(42svh, 410px);
        max-width: 72vw;
    }
    .story--product .step { min-height: 58svh; }
}

@media (prefers-reduced-motion: reduce) {
    .story--product .phone__screen [data-shot] { transition: none; }
}

/* Trakio detail now uses the same sticky product story language as SayIt. */
.story--trakio-detail { --accent: var(--accent-2); }
.story--trakio-detail .story__stage::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 66%);
}
.story--trakio-detail .step .feature__meta { margin-top: 26px; }
@media (min-width: 900px) {
    .story--trakio-detail .step { min-height: 100vh; }
}