/* =========================================================================
   StylistaUK — marketing site
   -------------------------------------------------------------------------
   Plain CSS on purpose. The cPanel deploy rsyncs public/ straight to
   public_html and there is no Node on the server, so anything behind a build
   step would mean remembering to compile before every push. One file, no
   pipeline, no way to ship a stale bundle.

   The palette mirrors the Flutter app's tokens exactly (lib/core/theme/
   app_colors.dart) so the site and the app read as one product.

   DESIGN NOTE. The logo is four ribbons -- violet, magenta, white, gold --
   flowing in an S. That ribbon, not a field of purple, is the brand here:
   the page stays white and colour arrives as drawn curves, hairlines and
   very low-alpha auras. One deep-violet section near the bottom is the only
   place the brand takes the whole ground, and it is there to stop all that
   white reading as unfinished rather than deliberate.
   ========================================================================= */

:root {
    /* Brand — identical values to AppColors */
    --violet: #390373;
    --purple: #8A17D7;
    --pink: #FC3D92;
    --gold: #F6B222;

    --ink: #111318;
    --muted: #666875;
    --line: #E4E5EA;
    --line-soft: #F2F2F5;
    --wash: #FAFAFB;
    --white: #FFFFFF;

    /* The hero card's gradient, lifted straight from HeroBanner so the
       mockup on this page and the real screen are the same two colours. */
    --banner-a: #2E0459;
    --banner-b: #6A18C4;

    --shadow-sm: 0 1px 2px rgba(17, 19, 24, .04), 0 2px 8px rgba(17, 19, 24, .04);
    --shadow-md: 0 4px 12px rgba(17, 19, 24, .05), 0 12px 32px rgba(17, 19, 24, .07);
    --shadow-lg: 0 18px 48px rgba(57, 3, 115, .14), 0 4px 12px rgba(17, 19, 24, .05);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;

    --gut: clamp(20px, 5vw, 32px);
    --max: 1180px;

    --ease: cubic-bezier(.22, 1, .36, 1);
}

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

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

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Held by the splash so the page underneath cannot be scrolled while it
   plays, then released by site.js. */
body.is-locked { overflow: hidden; height: 100vh; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, .display {
    font-family: Syne, Inter, sans-serif;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.04;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 3.95rem); }
h2 { font-size: clamp(2.05rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing: -.02em; }

p { margin: 0; }

/* The one gradient-text treatment on the site, reserved for the two or
   three words a headline actually turns on. Used more than that and it
   stops being emphasis. */
.grad {
    background: linear-gradient(104deg, var(--violet) 4%, var(--purple) 42%, var(--pink) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 10vw, 130px); position: relative; }
.section--wash { background: var(--wash); }
.section--tight { padding-block: clamp(56px, 7vw, 86px); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--violet);
    background: rgba(138, 23, 215, .07);
    border: 1px solid rgba(138, 23, 215, .14);
    border-radius: 100px;
    padding: 7px 15px 7px 12px;
}
.eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 3px rgba(252, 61, 146, .18);
}

.lede {
    font-size: clamp(1.03rem, 1.5vw, 1.19rem);
    color: var(--muted);
    line-height: 1.68;
    max-width: 56ch;
}

/* Gold hairline. The trust colour does the punctuation on this site —
   rules, ticks, stars, step numbers — and nothing else.
   `display:block` is load-bearing: this is a <span>, so without it width and
   height are ignored and the rule silently collapses to 0x0 in every normal
   flow context. */
.rule { display: block; width: 54px; height: 3px; border-radius: 3px; background: var(--gold); }

.section-head { max-width: 680px; }
.section-head .rule { margin: 22px 0 24px; }
.section-head--mid { max-width: 860px; margin-inline: auto; text-align: center; }
.section-head--mid .rule { margin-inline: auto; }

/* ============================ buttons ================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: Inter, sans-serif;
    font-size: .97rem;
    font-weight: 600;
    letter-spacing: -.01em;
    padding: 14px 26px;
    border-radius: 100px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease),
                background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* Pink is action. Exactly one of these is visible per viewport — the moment
   there are two, neither is the thing to do next. */
.btn--primary {
    background: var(--pink);
    color: #fff;
    box-shadow: 0 6px 18px rgba(252, 61, 146, .3);
}
.btn--primary:hover { background: #F02480; box-shadow: 0 12px 28px rgba(252, 61, 146, .36); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--violet); color: var(--violet); background: rgba(138, 23, 215, .04); }

.btn--light { background: #fff; color: var(--violet); }
.btn--light:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* App store badges, drawn rather than imported so they inherit the page's
   radius and type instead of arriving as two foreign PNGs. */
.store {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px 11px 17px;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.store:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.store b { display: block; font-size: .95rem; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.store span { display: block; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; opacity: .62; line-height: 1.5; }
.store--soon { pointer-events: none; }
.store--soon:hover { transform: none; box-shadow: none; }

/* ============================== nav ==================================== */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 70;
    padding-block: 16px;
    transition: background-color .35s ease, box-shadow .35s ease,
                border-color .35s ease, padding .35s ease;
    border-bottom: 1px solid transparent;
}
/* Frosts only once the hero's white has scrolled away, so it is invisible
   over the hero and legible over everything after it. */
.nav.is-stuck {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: var(--line);
    padding-block: 10px;
}
.nav__bar { display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 34px; height: 34px; }
.brand__word {
    font-family: Cinzel, Georgia, serif;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: .055em;
    color: var(--violet);
    line-height: 1;
}
.brand__word i { font-style: normal; color: var(--pink); }

.nav__links { display: flex; gap: 26px; margin-inline: auto; }
.nav__links a {
    font-size: .93rem;
    font-weight: 500;
    color: var(--muted);
    position: relative;
    padding-block: 4px;
    transition: color .22s ease;
}
.nav__links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .34s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { flex: none; padding: 10px 20px; font-size: .9rem; }

.nav__burger {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    padding: 0;
    place-items: center;
}
.nav__burger span {
    display: block;
    width: 17px; height: 1.8px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .3s var(--ease), opacity .2s ease;
}
.nav__burger span + span { margin-top: 4px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

.drawer {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 69;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 88px var(--gut) 28px;
    display: grid;
    gap: 4px;
    transform: translateY(-101%);
    transition: transform .42s var(--ease);
    box-shadow: var(--shadow-md);
}
.drawer.is-open { transform: translateY(0); }
.drawer a { padding: 13px 0; font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
.drawer .btn { margin-top: 18px; }

/* ============================= splash ================================== */

/* Plays once per tab (site.js gates it on sessionStorage) and is removed
   from the DOM afterwards. The hero underneath is fully composed the whole
   time — the splash lifts off it rather than cutting to it, so the two read
   as one continuous move instead of two separate events. */
.splash {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--white);
    /* Curved wipe: the clip travels upward on a shallow arc, echoing the
       ribbon rather than a flat blind. */
    clip-path: ellipse(150% 150% at 50% 50%);
    transition: clip-path 1s var(--ease), opacity .6s ease .25s;
}
.splash.is-done { clip-path: ellipse(150% 0% at 50% -22%); opacity: 0; pointer-events: none; }

.splash__stage { position: relative; display: grid; justify-items: center; width: min(340px, 78vw); }

.splash__mark-wrap { position: relative; width: 128px; height: 128px; display: grid; place-items: center; }

.splash__ribbons { position: absolute; inset: -22px; width: calc(100% + 44px); height: calc(100% + 44px); overflow: visible; }
.splash__ribbons path {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    opacity: 0;
}
.splash.is-playing .splash__ribbons path { animation: ribbon-draw 1.5s var(--ease) forwards; }
.rib--violet { stroke: var(--purple); animation-delay: .04s; }
.rib--pink   { stroke: var(--pink);   animation-delay: .16s; }
/* The logo's white strand. On a white ground it has to be drawn as the
   palest neutral or the ribbon simply loses a lane. */
.rib--white  { stroke: var(--line);   animation-delay: .28s; }
.rib--gold   { stroke: var(--gold);   animation-delay: .4s; }

@keyframes ribbon-draw {
    0%   { stroke-dashoffset: 300; opacity: 0; }
    14%  { opacity: 1; }
    70%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset: 0;   opacity: .22; }
}

.splash__mark {
    width: 128px; height: 128px;
    opacity: 0;
    transform: scale(.92);
}
.splash.is-playing .splash__mark { animation: mark-in .9s var(--ease) .5s forwards; }
@keyframes mark-in {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Gold sweep across the mark. Masked to the mark's own box so it reads as
   light moving over the ribbons rather than a bar crossing the screen. */
.splash__shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
}
.splash__shine::after {
    content: "";
    position: absolute;
    top: -40%; left: -60%;
    width: 46%; height: 180%;
    transform: rotate(16deg) translateX(0);
    background: linear-gradient(90deg,
        rgba(246, 178, 34, 0) 0%,
        rgba(255, 255, 255, .85) 42%,
        rgba(246, 178, 34, .55) 58%,
        rgba(246, 178, 34, 0) 100%);
    opacity: 0;
}
.splash.is-playing .splash__shine::after { animation: shine 1.15s var(--ease) .78s forwards; }
@keyframes shine {
    0%   { opacity: 0;  transform: rotate(16deg) translateX(0); }
    22%  { opacity: 1; }
    100% { opacity: 0;  transform: rotate(16deg) translateX(420px); }
}

.splash__word {
    margin-top: 26px;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(1.6rem, 5.2vw, 2.1rem);
    font-weight: 700;
    color: var(--violet);
    line-height: 1;
    white-space: nowrap;
    /* Starts wide and open, then closes to the lockup's real spacing. The
       letterform settling is the beat that makes it read as a logo
       assembling rather than text fading in. */
    letter-spacing: .62em;
    text-indent: .62em;
    opacity: 0;
}
.splash.is-playing .splash__word { animation: word-set 1.05s var(--ease) 1.08s forwards; }
@keyframes word-set {
    0%   { opacity: 0; letter-spacing: .62em; text-indent: .62em; transform: translateY(9px); }
    30%  { opacity: 1; }
    100% { opacity: 1; letter-spacing: .14em; text-indent: .14em; transform: translateY(0); }
}
.splash__word i { font-style: normal; color: var(--pink); opacity: 0; }
.splash.is-playing .splash__word i { animation: uk-in .5s var(--ease) 1.62s forwards; }
@keyframes uk-in { to { opacity: 1; } }

.splash__rule {
    margin-top: 20px;
    width: 92px; height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transform: scaleX(0);
}
.splash.is-playing .splash__rule { animation: rule-draw .7s var(--ease) 1.52s forwards; }
@keyframes rule-draw { to { transform: scaleX(1); } }

.splash__tag {
    margin-top: 16px;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    opacity: 0;
}
.splash.is-playing .splash__tag { animation: tag-in .7s var(--ease) 1.68s forwards; }
@keyframes tag-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.splash.is-leaving .splash__stage { transition: transform .9s var(--ease), opacity .55s ease; transform: scale(1.045); opacity: 0; }

.splash__skip {
    position: absolute;
    bottom: 34px; left: 50%;
    transform: translateX(-50%);
    background: none; border: 0; padding: 8px 14px;
    font-family: inherit; font-size: .74rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
    cursor: pointer; opacity: 0;
    transition: opacity .4s ease, color .2s ease;
}
.splash.is-playing .splash__skip { animation: tag-in .5s ease 1.1s forwards; }
.splash__skip:hover { color: var(--violet); }

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

.hero { position: relative; padding: clamp(118px, 15vw, 172px) 0 clamp(64px, 8vw, 104px); overflow: hidden; }

/* Two very low-alpha auras and one huge drawn ribbon. Together they stop the
   hero being a white rectangle without putting a single saturated fill on
   the page. */
.hero__aura {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.hero__aura--a { width: 620px; height: 620px; top: -220px; right: -180px;
    background: radial-gradient(circle, rgba(138, 23, 215, .16), transparent 68%); }
.hero__aura--b { width: 520px; height: 520px; bottom: -220px; left: -200px;
    background: radial-gradient(circle, rgba(252, 61, 146, .13), transparent 68%); }

.hero__ribbon {
    position: absolute;
    top: 0; left: 50%;
    width: 1500px; height: 900px;
    transform: translateX(-46%);
    pointer-events: none;
    z-index: 0;
    opacity: .5;
}
.hero__ribbon path { fill: none; stroke-width: 1.4; stroke-linecap: round; }

.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(32px, 5vw, 68px);
    align-items: center;
}

.hero h1 { margin: 24px 0 0; }
.hero .lede { margin-top: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__note { margin: 18px 0 28px; font-size: .82rem; color: var(--muted); }

ul.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    /* The divider is its own breathing room, not a line sitting flush
       against the text above and below it — 28px clear on each side. */
    margin-top: 0;
    padding-top: 28px;
    border-top: 1px solid var(--line-soft);
}
.hero__trust li { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--muted); }
.hero__trust svg { width: 16px; height: 16px; flex: none; stroke: var(--gold); fill: none; stroke-width: 2.3; }

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

/* ======================== phone mockup ================================= */

/* Rebuilt from the Flutter widgets rather than screenshotted, so it stays
   crisp at any density and can be edited when the app's screen changes.
   Values track lib/features/home/: the banner gradient, the pink Book Now
   pill, the white initials tile with violet ink, gold stars, gold prices
   (ThemeContext.money is gold), and the real catalogue in
   home/models/provider_listing.dart. */

.stage { position: relative; display: grid; place-items: center; }

.phone {
    position: relative;
    width: 300px;
    max-width: 100%;
    border-radius: 46px;
    padding: 10px;
    background: linear-gradient(160deg, #23252E, #0C0D12 60%);
    box-shadow: var(--shadow-lg), 0 2px 0 rgba(255, 255, 255, .22) inset;
    z-index: 2;
}
.phone__screen {
    position: relative;
    border-radius: 37px;
    background: #fff;
    overflow: hidden;
    height: 616px;
    font-size: 11px;
    line-height: 1.4;
}
.phone__notch {
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 92px; height: 22px;
    border-radius: 100px;
    background: #0C0D12;
    z-index: 5;
}
.app { padding: 40px 12px 14px; height: 100%; overflow: hidden; }

.app__top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.app__loc { display: flex; align-items: center; gap: 5px; margin-right: auto; }
.app__loc svg { width: 14px; height: 14px; fill: var(--violet); flex: none; }
.app__loc small { display: block; font-size: 8.5px; color: var(--muted); line-height: 1.1; }
.app__loc b { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; }
.app__bell {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--line-soft);
    display: grid; place-items: center; flex: none;
}
.app__bell svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.app__bell::after {
    content: ""; position: absolute;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--pink); border: 1.5px solid #fff;
    transform: translate(9px, -9px);
}

.app__search {
    display: flex; align-items: center; gap: 7px;
    background: var(--line-soft);
    border-radius: 11px;
    padding: 9px 11px;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 13px;
}
.app__search svg { width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }

/* HeroBanner — same two-stop gradient, same pink radial behind the art,
   same faded mark bottom-right at 22%. */
.app__banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 14px;
    background: linear-gradient(135deg, var(--banner-a), var(--banner-b));
    box-shadow: 0 8px 18px rgba(57, 3, 115, .22);
    margin-bottom: 15px;
}
.app__banner::before {
    content: "";
    position: absolute;
    top: -34px; right: -42px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 61, 146, .3), transparent 68%);
}
.app__banner img {
    position: absolute;
    right: -18px; bottom: -20px;
    width: 118px; opacity: .22;
}
.app__banner h4 {
    position: relative;
    margin: 0 0 5px;
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #FAFAFB;
    max-width: 132px;
}
.app__banner p { position: relative; font-size: 9.5px; color: rgba(255, 255, 255, .82); max-width: 120px; line-height: 1.35; }
.app__banner span {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    background: var(--pink);
    color: #FAFAFB;
    font-size: 10px; font-weight: 600;
    padding: 6px 15px;
    border-radius: 100px;
}

.app__head { display: flex; align-items: baseline; margin-bottom: 8px; }
.app__head b { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.app__head a { margin-left: auto; font-size: 9.5px; font-weight: 600; color: var(--purple); }

.app__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 15px; }
.app__cat { display: grid; justify-items: center; gap: 5px; text-align: center; }
.app__cat i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.app__cat i svg { width: 17px; height: 17px; }
.app__cat small { font-size: 7.6px; color: var(--muted); line-height: 1.2; font-weight: 500; }

.app__card {
    display: flex; gap: 9px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 9px;
    margin-bottom: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.app__thumb {
    width: 50px; height: 50px; flex: none;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    display: grid; place-items: center;
    font-size: 14px; font-weight: 800; letter-spacing: .5px;
    color: var(--violet);
}
.app__card-body { min-width: 0; flex: 1; }
.app__card-top { display: flex; align-items: flex-start; gap: 6px; }
.app__card-top b { font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; }
.app__heart { margin-left: auto; width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.8; flex: none; }
.app__meta { display: flex; align-items: center; gap: 3px; font-size: 9px; color: var(--muted); margin-top: 2px; }
.app__meta svg { width: 10px; height: 10px; flex: none; }
.app__meta b { color: var(--ink); font-weight: 600; }
.app__meta i { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--muted); margin-inline: 3px; flex: none; }
.app__card-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.app__chip {
    background: rgba(138, 23, 215, .08);
    color: var(--violet);
    font-size: 8.4px; font-weight: 600;
    padding: 3px 7px;
    border-radius: 7px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.app__price { margin-left: auto; font-size: 9px; color: var(--muted); white-space: nowrap; }
.app__price b { font-size: 11.5px; font-weight: 700; color: var(--gold); }

/* Floating glass cards. They drift on a slow loop so the hero is never
   completely still, but at 10px over 7s — enough to feel alive, not enough
   to pull the eye off the headline. */
.float {
    position: absolute;
    z-index: 3;
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 11px 15px 11px 12px;
    box-shadow: var(--shadow-md);
    animation: drift 7s ease-in-out infinite;
}
.float b { display: block; font-size: .8rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.float small { display: block; font-size: .68rem; color: var(--muted); line-height: 1.4; }
.float i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.float i svg { width: 16px; height: 16px; }
.float { width: 232px; }
/* Offsets are px, not %: as a percentage of the ~480px stage these landed
   80px over the screen and covered the search bar and a provider's price.
   The intended overlap is the bezel only, about 25px. */
.float--a { top: 9%; left: -112px; animation-delay: 0s; }
.float--b { bottom: 14%; right: -112px; animation-delay: 3.5s; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Ring behind the phone, picking the gold out of the logo. */
.stage::before {
    content: "";
    position: absolute;
    width: 430px; height: 430px;
    border-radius: 50%;
    border: 1px dashed rgba(246, 178, 34, .4);
    z-index: 0;
}
.stage::after {
    content: "";
    position: absolute;
    width: 330px; height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 23, 215, .1), transparent 70%);
    z-index: 0;
}

/* ========================== scroll reveal ============================== */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.reveal[data-d="4"] { transition-delay: .36s; }

/* ========================== proof strip ================================ */

.proof { border-block: 1px solid var(--line); background: var(--wash); }
.proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof__item { padding: 30px 26px; border-left: 1px solid var(--line); }
.proof__item:first-child { border-left: 0; padding-left: 0; }
.proof__item b { display: block; font-family: Syne, sans-serif; font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; }
.proof__item span { display: block; margin-top: 4px; font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* ========================== how it works =============================== */

.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 54px); margin-top: 60px; }

/* The connector draws itself as the section scrolls into view (site.js sets
   --draw from 0 to 1), which is the ribbon motif doing navigation rather
   than decoration. */
.steps__line { position: absolute; top: 30px; left: 6%; width: 88%; height: 60px; pointer-events: none; }
.steps__line path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: calc(1400 - 1400 * var(--draw, 0));
    opacity: .55;
}

.step { position: relative; }
.step__n {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: Syne, sans-serif;
    font-size: 1.32rem; font-weight: 800;
    color: var(--violet);
    box-shadow: var(--shadow-sm);
    z-index: 1;
}
.step__n::after {
    content: "";
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    opacity: .35;
}
.step h3 { margin: 24px 0 10px; }
.step p { color: var(--muted); font-size: .97rem; }

/* ============================ audience tabs ============================ */

.tabs { display: inline-flex; gap: 5px; padding: 5px; background: var(--line-soft); border-radius: 100px; margin-top: 30px; }
.tab {
    border: 0; background: transparent; cursor: pointer;
    font-family: Inter, sans-serif; font-size: .93rem; font-weight: 600;
    color: var(--muted);
    padding: 11px 24px; border-radius: 100px;
    transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.tab[aria-selected="true"] { background: #fff; color: var(--violet); box-shadow: var(--shadow-sm); }

.panel { display: none; }
.panel.is-active { display: block; animation: panel-in .55s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 76px); align-items: center; margin-top: 52px; }
.split--flip .split__media { order: -1; }

ul.ticks { display: grid; gap: 17px; margin-top: 44px; }
.ticks li { display: flex; gap: 13px; align-items: flex-start; }
.ticks b { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 3px; }
.ticks span { display: block; font-size: .93rem; color: var(--muted); line-height: 1.6; }
.ticks i {
    width: 25px; height: 25px; flex: none; margin-top: 2px;
    border-radius: 50%;
    background: rgba(246, 178, 34, .16);
    display: grid; place-items: center;
}
.ticks i svg { width: 13px; height: 13px; fill: none; stroke: #C98A00; stroke-width: 2.8; }

/* ============================ categories =============================== */

.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.cat {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--line-soft);
    display: block;
    isolation: isolate;
}
.cat img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease), filter .6s ease;
}
.cat:hover img { transform: scale(1.07); }
.cat::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26, 2, 52, .84) 0%, rgba(26, 2, 52, .3) 38%, transparent 66%);
    transition: opacity .5s ease;
}
.cat__label { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; color: #fff; }
.cat__label b { display: block; font-family: Syne, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.cat__label span { display: block; margin-top: 3px; font-size: .8rem; opacity: .8; }
.cat__dot { position: absolute; top: 16px; right: 16px; z-index: 1; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }

/* ============================= safety ================================== */

/* The page's one dark section. Everything above and below is white, which is
   what makes this land — and it lands on the thing most worth remembering,
   which is that the money is held rather than handed over. */
.safety {
    position: relative;
    overflow: hidden;
    background: linear-gradient(142deg, #1C0238 0%, var(--violet) 46%, #5A0FA8 100%);
    color: #fff;
}
.safety::before {
    content: "";
    position: absolute;
    width: 760px; height: 760px;
    top: -340px; right: -240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 61, 146, .26), transparent 66%);
    filter: blur(50px);
}
.safety::after {
    content: "";
    position: absolute;
    width: 560px; height: 560px;
    bottom: -300px; left: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 178, 34, .17), transparent 68%);
    filter: blur(50px);
}
.safety .wrap { position: relative; z-index: 1; }
.safety .lede { color: rgba(255, 255, 255, .76); }
.safety .eyebrow { color: var(--gold); background: rgba(246, 178, 34, .11); border-color: rgba(246, 178, 34, .26); }
.safety .eyebrow::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(246, 178, 34, .2); }

.guards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 50px; }
.guard {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--r-md);
    padding: 26px;
    transition: background-color .35s ease, transform .35s var(--ease), border-color .35s ease;
}
.guard:hover { background: rgba(255, 255, 255, .11); border-color: rgba(246, 178, 34, .4); transform: translateY(-3px); }
.guard i { width: 38px; height: 38px; border-radius: 11px; background: rgba(246, 178, 34, .16); display: grid; place-items: center; margin-bottom: 16px; }
.guard i svg { width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 2; }
.guard b { display: block; font-size: 1.04rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 7px; }
.guard p { font-size: .92rem; color: rgba(255, 255, 255, .7); line-height: 1.62; }

/* ============================== earn =================================== */

.earn__media { position: relative; }
.earn__photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.earn__stat {
    position: absolute;
    /* Inset equally on both sides it touches, so the gap to the bottom
       edge matches the gap to the right edge rather than the card
       overhanging the photo on one side only. */
    right: 20px; bottom: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 17px 21px;
    box-shadow: var(--shadow-md);
    min-width: 168px;
}
.earn__stat small { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.earn__stat b { display: block; margin-top: 4px; font-family: Syne, sans-serif; font-size: 1.92rem; font-weight: 800; letter-spacing: -.03em; color: var(--violet); }
.earn__stat span { display: block; font-size: .78rem; color: var(--muted); }

.rates { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.rate { flex: 1 1 150px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 19px; background: #fff; }
.rate b { display: block; font-family: Syne, sans-serif; font-size: 1.72rem; font-weight: 800; letter-spacing: -.03em; color: var(--violet); }
.rate span { display: block; margin-top: 2px; font-size: .83rem; color: var(--muted); line-height: 1.5; }

/* =============================== faq =================================== */

.faq { max-width: 820px; margin: 52px auto 0; }
.faq details {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; gap: 18px;
    padding: 22px 2px;
    font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
    transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violet); }
.faq summary::after {
    content: "";
    margin-left: auto; flex: none;
    width: 11px; height: 11px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq p { padding: 0 44px 24px 2px; color: var(--muted); font-size: .97rem; }

/* ============================ final cta ================================ */

.final { position: relative; text-align: center; overflow: hidden; }
.final__ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.final__ribbon path { fill: none; stroke-width: 1.3; }
.final .wrap { position: relative; z-index: 1; }
.final__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; }
.final img.mark { width: 64px; height: 64px; margin: 0 auto 26px; }

/* ============================== footer ================================= */

.foot { background: var(--wash); border-top: 1px solid var(--line); padding-block: 56px 32px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.foot__about p { margin-top: 16px; font-size: .9rem; color: var(--muted); max-width: 34ch; }
.foot h4 { font-family: Inter, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
.foot ul { display: grid; gap: 11px; }
.foot a { font-size: .9rem; color: var(--muted); transition: color .2s ease; }
.foot a:hover { color: var(--violet); }
.foot__base {
    display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
    margin-top: 44px; padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: .82rem; color: var(--muted);
}
.foot__base nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }

/* ============================ inner pages ============================== */

.doc { padding: clamp(130px, 14vw, 170px) 0 clamp(70px, 9vw, 110px); }
.doc__body { max-width: 72ch; margin-top: 34px; }
.doc__body p + p { margin-top: 18px; }
.doc__body h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 42px 0 14px; }
.doc__body ul { margin: 16px 0 0 20px; display: grid; gap: 10px; color: var(--muted); }

/* ============================ responsive =============================== */

@media (max-width: 1020px) {
    .hero__grid, .split { grid-template-columns: 1fr; }
    .split--flip .split__media { order: 0; }
    .split__media, .stage { justify-self: center; }
    .cats { grid-template-columns: repeat(2, 1fr); }
    .proof__grid { grid-template-columns: repeat(2, 1fr); }
    .proof__item:nth-child(3) { border-left: 0; padding-left: 0; }
    .proof__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .foot__grid { grid-template-columns: 1fr 1fr; }
    .foot__about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .nav__links { display: none; }
    .nav__cta { display: none; }
    .nav__burger { display: grid; margin-left: auto; }
    .steps { grid-template-columns: 1fr; gap: 34px; }
    .steps__line { display: none; }
    .guards { grid-template-columns: 1fr; }
    .earn__stat { right: 50%; transform: translateX(50%); bottom: -22px; }
    .rates { gap: 10px; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .hero { padding-top: 104px; }
    .float { width: auto; max-width: 62vw; }
    .float--a { left: -6px; top: 4%; }
    .float--b { right: -6px; bottom: 9%; }
    .float small { display: none; }
    .cats { grid-template-columns: 1fr; gap: 14px; }
    .cat { aspect-ratio: 4 / 3; }
    .proof__grid { grid-template-columns: 1fr; }
    .proof__item { border-left: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
    .proof__item:last-child { border-bottom: 0; }
    .foot__grid { grid-template-columns: 1fr; gap: 30px; }
    .foot__base nav { margin-left: 0; }
    .hero__actions .btn, .hero__actions .store { flex: 1 1 100%; }
    .tabs { width: 100%; }
    .tab { flex: 1; padding-inline: 10px; }
    .faq p { padding-right: 8px; }
}

/* ========================== reduced motion ============================= */

/* The splash still runs, because it is the page's loading state and simply
   removing it would leave a bare white screen — but it collapses to a short
   fade with no drawing, sweeping or letter-spacing movement. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .18s !important;
    }
    .reveal { opacity: 1; transform: none; }
    .float { animation: none; }
    .splash__ribbons path { opacity: .22; stroke-dashoffset: 0; }
    .splash__mark, .splash__word, .splash__tag { opacity: 1; }
    .splash__word { letter-spacing: .14em; text-indent: .14em; }
    .splash__word i { opacity: 1; }
    .splash__rule { transform: scaleX(1); }
    .steps__line path { stroke-dashoffset: 0; }
}

@media print {
    .nav, .splash, .drawer, .float { display: none !important; }
}

/* ===================== phone: provider dashboard ======================= */

/* Tracks lib/features/dashboard/presentation/provider_dashboard_screen.dart:
   the gradient avatar tile, the three stat cards with their violet / pink /
   gold tints, and the Upcoming Bookings list. */

.app__greet { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.app__avatar {
    width: 34px; height: 34px; flex: none;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--violet), var(--purple));
    display: grid; place-items: center;
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .4px;
}
.app__greet small { display: block; font-size: 8.5px; color: var(--muted); line-height: 1.2; }
.app__greet b { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; }

.app__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 15px; }
.app__stat {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 9px 7px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.app__stat i { width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; margin-bottom: 6px; }
.app__stat i svg { width: 11px; height: 11px; }
.app__stat b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.app__stat small { display: block; font-size: 7.4px; color: var(--muted); line-height: 1.25; margin-top: 1px; }

.app__job {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.app__job-top { display: flex; align-items: center; gap: 6px; }
.app__job-top b { font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; }
.app__status {
    margin-left: auto; flex: none;
    font-size: 7.8px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 7px; border-radius: 100px; text-transform: uppercase;
}
.app__status--ok { background: rgba(52, 199, 89, .14); color: #1E8E3E; }
.app__status--soon { background: rgba(246, 178, 34, .18); color: #A96F00; }
.app__job-meta { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--muted); margin-top: 5px; }
.app__job-meta svg { width: 10px; height: 10px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
.app__job-foot { display: flex; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 9px; color: var(--muted); }
.app__job-foot b { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gold); }

/* Anchor targets must clear the fixed header, or every in-page link lands
   with its heading hidden behind the nav. */
[id] { scroll-margin-top: 96px; }

/* ===================== phone: floating nav bar ========================= */

/* AppShell's _FloatingNavBar: a white bar inset 16px from the screen edges,
   radius 26, lifted on a soft shadow, with the active tab marked by a brand
   tint behind its icon. Content scrolls under it, which is why the screen
   fades out behind it rather than stopping dead. */
.app__nav {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    height: 46px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(17, 19, 24, .13);
    z-index: 4;
}
.app__nav span {
    display: grid;
    justify-items: center;
    gap: 2px;
    font-size: 7px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .01em;
}
.app__nav svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.9; }
.app__nav .on { color: var(--violet); }
.app__nav .on svg { stroke: var(--violet); }
.app__nav .on::before {
    content: "";
    position: absolute;
    width: 38px; height: 30px;
    border-radius: 11px;
    background: rgba(138, 23, 215, .09);
    transform: translateY(-3px);
}
.app__nav .on > * { position: relative; }

/* The last card must not sit flush under the bar. */
.app { padding-bottom: 66px; }

/* Content scrolling away under the bar, as it does in the app. */
.phone__screen::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 74px;
    background: linear-gradient(to top, #fff 38%, rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 3;
}

/* ============================== contact form ============================ */

.form { display: grid; gap: 18px; margin-top: 34px; max-width: 640px; }
.form label { display: grid; gap: 8px; font-weight: 600; font-size: 14px; }
.form input[type=text],
.form input[type=email],
.form select,
.form textarea {
    width: 100%; padding: 13px 15px;
    border: 1px solid var(--line); border-radius: 12px;
    font: inherit; font-size: 15px; font-weight: 400; color: var(--ink);
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(138, 23, 215, .1);
}
.form textarea { resize: vertical; line-height: 1.65; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .btn { justify-self: start; }

/* Off-screen rather than display:none — a bot that skips hidden inputs
   still fills this one in, which is the whole point of it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note {
    padding: 16px 18px; border-radius: 14px; margin-bottom: 24px;
    font-size: 14.5px; line-height: 1.6; border: 1px solid;
}
.note b { display: block; margin-bottom: 3px; }
.note--ok { background: #ECFBF1; border-color: #BCE8CB; color: #106630; }
.note--bad { background: #FDECEC; border-color: #F3C3C3; color: #B3261E; }

@media (max-width: 640px) {
    .form__pair { grid-template-columns: 1fr; }
}