/* ==========================================================================
   Match Mindset marketing site.
   Palette and type scale mirror the iOS app: carbon black, electric lime.
   Dark only. There is no light palette and no prefers-color-scheme branch;
   the app is a dark app, and the site is the same app.
   ========================================================================== */

:root {
    /* Tell the browser there is no light rendering to fall back to, so form
       controls, scrollbars and the canvas behind the page all come up dark. */
    color-scheme: dark;

    /* The app's own carbon, sampled from its background. */
    --ink:            #101111;

    --on-dark:        #FFFFFF;
    --on-dark-muted:  #C3C8BA;
    --line-dark:      rgba(255, 255, 255, 0.14);
    --card-dark:      rgba(255, 255, 255, 0.055);

    /* ElectricLime, straight out of the app's asset catalogue: the dark value
       the app shows on every button. Black on it is the app's OnLime pairing,
       which is what the screenshots use. */
    --lime:           #C6FF3D;
    --on-lime:        #0C0F05;

    /* The two bands that alternate with the carbon ones. Both are dark, just
       separable, so the page still has a rhythm without ever going light. */
    --surface:            #1C1E17;
    --surface-alt:        #141610;
    --card-surface:       rgba(255, 255, 255, 0.055);
    --on-surface:         #FFFFFF;
    --on-surface-muted:   #C3C8BA;
    --accent-ink:         var(--lime);
    --on-accent:          var(--on-lime);
    --line:               rgba(255, 255, 255, 0.14);
    --shadow-card:        0 2px 4px rgba(0, 0, 0, 0.30),
                          0 14px 34px -14px rgba(0, 0, 0, 0.60);

    /* Geometry */
    --radius-sm:  10px;
    --radius:     18px;
    --radius-lg:  28px;
    --measure:    68ch;
    --gutter:     clamp(1.25rem, 5vw, 3rem);
    --section-y:  clamp(4.5rem, 10vw, 8.5rem);

    --shadow-lift: 0 24px 60px -20px rgba(0, 0, 0, 0.72);
}

/* --------------------------------------------------------------- Reset -- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--on-surface);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
}

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

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

p { margin: 0; text-wrap: pretty; }

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

a { color: inherit; }

/* ------------------------------------------------------- Accessibility -- */

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100%;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--lime);
    color: var(--on-lime);
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.skip-link:focus { top: 1rem; }

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

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

/* ------------------------------------------------------------- Layout -- */

.wrap {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section--surface     { background: var(--surface);     color: var(--on-surface); }
.section--surface-alt { background: var(--surface-alt); color: var(--on-surface); }
.section--dark        { background: var(--ink);         color: var(--on-dark); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.section--surface .eyebrow,
.section--surface-alt .eyebrow { color: var(--accent-ink); }
.section--dark .eyebrow { color: var(--lime); }

h2 { font-size: clamp(1.95rem, 4.4vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.014em; }

.lede {
    margin-top: 1.25rem;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    max-width: var(--measure);
}
.section--surface .lede,
.section--surface-alt .lede { color: var(--on-surface-muted); }
.section--dark .lede { color: var(--on-dark-muted); }
.section-head--center .lede { margin-inline: auto; }

/* ------------------------------------------------------------ Buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 650;
    font-size: 1rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                transform 0.18s ease;
}
.btn--ghost-dark {
    border-color: var(--line-dark);
    color: var(--on-dark);
}
.btn--ghost-dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
}
.btn--solid { background: var(--lime); color: var(--on-lime); }
.btn--solid:hover { background: #D4FF66; transform: translateY(-2px); }

/* Pre-launch stand-in for the App Store badge. Deliberately not a link and
   not styled like one: nothing on this site should look clickable until the
   listing exists. Swap the whole element for Apple's badge at launch. */
.coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 48px;
    padding: 0.6875rem 1.375rem;
    border-radius: 999px;
    border: 1.5px dashed var(--line-dark);
    color: var(--on-dark);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.coming-soon svg { flex: none; width: 19px; height: 19px; color: var(--lime); }
.coming-soon--sm { min-height: 40px; padding: 0.4375rem 0.9375rem; font-size: 0.8125rem; }
.coming-soon--sm svg { width: 16px; height: 16px; }

/* The label is one flex item rather than a bare text node beside the logo: a
   bare text node becomes an anonymous flex item, so the flex `gap` would land
   in the middle of the sentence as well as after the mark. */
.coming-soon__label { white-space: nowrap; }

/* The tail is dropped once the sentence would wrap. The header pill never
   carries it at all, since there is no room beside four nav items, so this
   only affects the hero and the CTA. */
@media (max-width: 360px) {
    .coming-soon__tail { display: none; }
}

/* --------------------------------------------------------------- Nav --- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(16, 17, 17, 0.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    color: var(--on-dark);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line-dark); }

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 0.625rem;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    text-decoration: none;
    margin-right: auto;
}
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand span { white-space: nowrap; }

.nav-list { display: flex; align-items: center; gap: 0.25rem; }
.nav-list a {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.875rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--on-dark-muted);
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease;
}
.nav-list a:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.08); }

@media (max-width: 860px) { .nav-list { display: none; } }

/* Footer links sit flush with the wordmark once the row wraps. */
@media (max-width: 720px) {
    .site-footer nav ul { margin-inline-start: -0.75rem; }
}

@media (max-width: 400px) {
    .site-header .wrap { gap: 0.75rem; }
    .brand { font-size: 1rem; }
}

/* --------------------------------------------------------------- Hero -- */

.hero {
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--on-dark);
    overflow: hidden;
    padding-block: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;
    opacity: 0.30;
}

.hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(198, 255, 61, 0.14) 0%, rgba(198, 255, 61, 0) 58%),
        linear-gradient(180deg, rgba(16, 17, 17, 0.66) 0%, rgba(16, 17, 17, 0.90) 46%, var(--ink) 88%);
}

.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 940px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 3.5rem;
    }
}

.hero__title {
    font-size: clamp(2.35rem, 5.4vw, 3.6rem);
    letter-spacing: -0.035em;
    line-height: 1.03;
}
.hero__title .accent { display: block; color: var(--lime); }

.hero__sub {
    margin-top: 1.5rem;
    max-width: 34rem;
    font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
    line-height: 1.55;
    color: var(--on-dark-muted);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2.25rem;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1.75rem;
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}
.hero__meta li { display: flex; align-items: center; gap: 0.5rem; }
.hero__meta svg { flex: none; width: 17px; height: 17px; color: var(--lime); }

/* Device art */

.device {
    position: relative;
    margin-inline: auto;
    width: min(280px, 72vw);
    padding: 9px;
    border-radius: 44px;
    background: linear-gradient(160deg, #4A5140 0%, #14160F 50%, #333A28 100%);
    box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.device img { width: 100%; border-radius: 36px; display: block; }
.hero__device {
    position: relative;
    display: flex;
    justify-content: center;
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.hero__device::before {
    content: "";
    position: absolute;
    inset: 10% -6% -4%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(198, 255, 61, 0.24), rgba(198, 255, 61, 0) 70%);
    filter: blur(10px);
    z-index: -1;
}

/* Two phones, the app's own two-up lockup: the screen it locks beside the
   shield you actually hit. Both are positioned against this wrapper rather
   than against the column, so the overlap is the same at every width and the
   pair stays centred. Its aspect ratio stands in for the height the absolute
   children no longer contribute: 1.40 wide by 2.175 tall, in units of one
   phone's width. */
.devices {
    --dev-w: min(300px, 74vw);
    position: relative;
    width: calc(var(--dev-w) * 1.40);
    aspect-ratio: 1.40 / 2.175;
}
.device--lg {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--dev-w);
    margin-inline: 0;
}
.device--behind {
    position: absolute;
    left: 0;
    top: 7%;
    z-index: -1;
    width: calc(var(--dev-w) * 0.72);
    padding: 7px;
    border-radius: 34px;
    transform: rotate(-8deg);
    opacity: 0.92;
}
.device--behind img { border-radius: 27px; }

@media (max-width: 600px) {
    .hero { padding-block: clamp(2.25rem, 7vw, 6.5rem) 0; }
    .hero__sub { margin-top: 1.125rem; }
    .hero__actions { margin-top: 1.75rem; gap: 0.75rem; }
    .hero__meta { margin-top: 1.5rem; gap: 0.625rem 1.25rem; }
    .hero__device { padding-bottom: 2rem; }
    .devices { --dev-w: min(252px, 60vw); }
}

/* --------------------------------------------------------- How it works */

.steps { display: grid; gap: clamp(2rem, 4vw, 2.5rem); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.step { display: flex; flex-direction: column; gap: 1.5rem; }

.step__shot {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--line);
}
.step__shot img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% var(--shot-y, 40%);
}

.step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-ink);
    color: var(--on-accent);
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.step h3 { margin-top: 0.875rem; }
.step p { margin-top: 0.5rem; color: var(--on-surface-muted); }

/* ----------------------------------------------------------- Features -- */

.features { display: grid; gap: 1.25rem; }
@media (min-width: 660px)  { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(4, 1fr); } }

.feature {
    padding: 1.75rem;
    border-radius: var(--radius);
    background: var(--card-dark);
    border: 1px solid var(--line-dark);
}
.feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    background: rgba(198, 255, 61, 0.16);
    color: var(--lime);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature p { margin-top: 0.625rem; color: var(--on-dark-muted); font-size: 0.9875rem; }

/* -------------------------------------------------------------- Split -- */

.split { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split--flip .split__media { order: -1; }
}

.split__body h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }

.checklist { margin-top: 1.75rem; display: grid; gap: 0.875rem; }
.checklist li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 0.75rem;
    align-items: start;
    line-height: 1.55;
}
.checklist svg { width: 22px; height: 22px; margin-top: 2px; }
.section--dark .checklist svg { color: var(--lime); }
.section--surface .checklist svg,
.section--surface-alt .checklist svg { color: var(--accent-ink); }
.section--dark .checklist li { color: var(--on-dark-muted); }
.section--surface .checklist li,
.section--surface-alt .checklist li { color: var(--on-surface-muted); }
.checklist strong { color: inherit; }
.section--dark .checklist strong { color: var(--on-dark); }
.section--surface .checklist strong,
.section--surface-alt .checklist strong { color: var(--on-surface); }

/* ------------------------------------------------------------ Pricing -- */

.plans {
    display: grid;
    gap: 1.25rem;
    max-width: 46rem;
    margin-inline: auto;
}
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, 1fr); } }

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    border-radius: var(--radius);
    background: var(--card-surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}
.plan--featured { border-color: var(--accent-ink); border-width: 2px; }

.plan__tag {
    position: absolute;
    top: -0.75rem;
    left: 1.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--accent-ink);
    color: var(--on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.plan p { margin-top: 0.75rem; color: var(--on-surface-muted); font-size: 0.9875rem; }

.plan p.plan__price {
    margin-top: 0.625rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--on-surface);
}
.plan p.plan__price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--on-surface-muted);
    letter-spacing: 0;
}

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

.faq { max-width: 48rem; margin-inline: auto; }

.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.375rem 0;
    font-weight: 650;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--accent-ink);
    border-bottom: 2px solid var(--accent-ink);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { padding-bottom: 1.5rem; color: var(--on-surface-muted); max-width: 60ch; }

/* ---------------------------------------------------------------- CTA -- */

.cta {
    position: relative;
    isolation: isolate;
    text-align: center;
    background: var(--ink);
    color: var(--on-dark);
    overflow: hidden;
}
.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(90% 120% at 50% 100%, rgba(198, 255, 61, 0.20) 0%, rgba(198, 255, 61, 0) 62%);
}
.cta h2 { font-size: clamp(2rem, 5vw, 3.25rem); }
.cta .lede { margin-inline: auto; }
.cta__actions { display: flex; justify-content: center; margin-top: 2.25rem; }
.cta__fine { margin-top: 1.5rem; font-size: 0.875rem; color: var(--on-dark-muted); }

/* ------------------------------------------------------------- Footer -- */

.site-footer {
    background: #0A0B0A;
    color: var(--on-dark-muted);
    padding-block: 3.5rem 2.5rem;
    font-size: 0.9375rem;
}
.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-footer .brand { color: var(--on-dark); margin-right: 0; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.site-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--on-dark-muted);
}
.site-footer nav a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    padding-top: 1.75rem;
    font-size: 0.875rem;
}

/* -------------------------------------------------------------- Prose -- */

.prose { max-width: 44rem; margin-inline: auto; }
.prose h1 { font-size: clamp(2.1rem, 5vw, 2.9rem); margin-bottom: 0.625rem; }
.prose h2 { font-size: 1.375rem; margin-top: 2.75rem; margin-bottom: 0.75rem; }
.prose p { margin-bottom: 1.125rem; color: var(--on-surface-muted); }
.prose ul { margin-bottom: 1.125rem; display: grid; gap: 0.5rem; }
.prose ul li {
    display: grid;
    grid-template-columns: 0.5rem 1fr;
    gap: 0.75rem;
    color: var(--on-surface-muted);
}
.prose ul li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 0.72em;
    border-radius: 50%;
    background: var(--accent-ink);
}
.prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.prose > p:first-of-type {
    margin-bottom: 2.25rem;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--accent-ink);
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.prose__end {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    font-weight: 650;
    color: var(--on-surface);
}

/* ------------------------------------------------------------ Reveals -- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .device--behind { transform: rotate(-8deg); }
}

/* --------------------------------------------------- Forced colors ---- */

@media (forced-colors: active) {
    .feature, .plan, .step__shot, .device, .coming-soon { border: 1px solid CanvasText; }
    .faq summary::after { border-color: CanvasText; }
}