/* The home page's Fluent 2 sections: the hero's room, the use cases, the reviews' wall, the pet to try, the providers
   and the tiles of Native. Fast. Powerful. Loaded on the home page only (base.tmpl), after style.css; it changes
   nothing on other pages. Pictures and films are referred to relative to this file (/assets/css/), so the same file
   works on the site and in a preview folder. */

:root {
    --lp-sans: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lp-serif: 'DM Serif Display', serif;
    --lp-ink: #2b2620;
    --lp-ink-soft: #6a6155;
    --lp-green: #3B6702;
    --lp-green-light: #559F3F;
    --lp-green-wash: rgba(59, 103, 2, 0.09);
    --lp-news: 16, 13, 36;                          /* Fluent 2's news tag: a dark midnight indigo, darker at the foot */
    --lp-news-light: 34, 28, 78;
    --lp-card: #ffffff;
    --lp-card-soft: #fbf6e8;
    --lp-hairline: #c7b48e47;                       /* the site's own divider (As seen on, reviews) */
    --lp-shadow: 0 1px 2px rgba(60, 40, 10, 0.06), 0 10px 30px rgba(60, 40, 10, 0.10);
    --lp-shadow-lift: 0 2px 4px rgba(40, 25, 5, 0.08), 0 26px 60px rgba(40, 25, 5, 0.22);
    --lp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --lp-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    /* The page's rhythm, the reviews section's own: 90 px, a hairline, 90 px, the title, 65 px to what it introduces */
    --lp-section-top: 90px;
    --lp-title-gap: 65px;
}

/* ---- Shared: every new section opens like the reviews do ---- */

.lp-section {
    background-color: #fdf2ca;
    padding: 0 20px var(--lp-section-top);
}

.lp-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--lp-section-top);
    text-align: center;
}

.lp-section-inner.has-divider {
    border-top: 1px solid var(--lp-hairline);
}

.lp-section h2 {
    margin: 0;
    font-size: 46px;
    color: #333;
    text-wrap: balance;
}

.section-lede {
    max-width: 640px;
    margin: 18px auto var(--lp-title-gap);
    font: 400 19px/1.55 var(--lp-sans);
    color: var(--lp-ink-soft);
    text-wrap: pretty;
}

.section-lede kbd,
.model-key {
    display: inline-block;
    min-width: 1.1em;
    padding: 1px 7px 2px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid rgba(60, 40, 10, 0.16);
    box-shadow: 0 1px 0 rgba(60, 40, 10, 0.14);
    font: 600 0.8em/1.5 var(--lp-sans);
    color: var(--lp-ink);
    text-align: center;
    vertical-align: 0.1em;
}

.section-lede kbd + kbd {
    margin-left: 3px;
}

/* The room under it looks the same as between the title and its line below (the title's own box is tight above its
   letters, loose under them) */
.section-eyebrow {
    margin: 0 0 22px;
}

/* A tag for Fluent 2's news: one of the site's own badges (the "Save" badge's shape and soft shadow) in a dark
   midnight indigo instead of the buttons' green. */
.eyebrow-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background-image: linear-gradient(to top, rgb(var(--lp-news)), rgb(var(--lp-news-light)));
    color: #FDF3CE;
    font: 600 13px/1 var(--lp-sans);
    box-shadow: 0 6px 16px rgba(14, 8, 30, 0.24);
}

.lp-focus:focus-visible,
.uc-more:focus-visible,
.uc-toggle:focus-visible,
.pet-pick:focus-visible,
.ps-row:focus-visible,
.ps-pill:focus-visible,
.ps-close:focus-visible,
.ps-pet:focus-visible {
    outline: 2px solid var(--lp-green-light);
    outline-offset: 3px;
}

/* The live page's own sections, brought to the same rhythm: 90 px between what a section ends with and the hairline
   under it (As seen on had 81, the reviews' wall 40, the app icons 85) */
.as-seen-on-content {
    padding-bottom: calc(var(--lp-section-top) - 1px);
}

@media (min-width: 769px) {
    .app-icons {
        padding-bottom: 55px;
    }

    /* The wall's cards cast their shadows into this room, so it is 10 px more than the page's 90 */
    .reviews {
        padding-bottom: 100px;
    }
}

/* So do the tiles of Native. Fast. Powerful: 10 px more under them too */
.lp-section.native-fast-powerful {
    padding-bottom: calc(var(--lp-section-top) + 10px);
}

/* ---- Hero: the 2026 room ---- */

/* The room: the old picture's own scene taken again (GPT Image 2.5 from the old picture, then once more with the old
   picture's green, plant and curtains; upscaled, its tone set to the old picture's): the evening sun in the middle
   window, everything behind the table out of focus. It is 119% of the hero's height: the laptop's display starts
   where the old picture's did, so the title and buttons keep their room above it, and ends above the fade at the
   hero's foot. The display shows one job Fluent really did, laid out as the old picture's two windows were: the dark
   Smart Panel with its answer and the light browser window whose form it filled in, as one pair in the middle, their
   seam on the centre line; the pet with its ideas in the corner. Captured from the staged app and put into the
   picture by tools/hero_screen.py and tools/hero_compose.py (the take: hero-gen/r8/take). */
.hero::before {
    /* A little warm shade over the picture's top, where the header's cream title and links stand on the curtains
       and the sky (it is gone a third of the way down) */
    --hero-shade: linear-gradient(to bottom, rgba(54, 28, 8, 0.28) 0%, rgba(54, 28, 8, 0.1) 12%, rgba(54, 28, 8, 0) 26%);
    background-image: var(--hero-shade), url('../hero-background-2026.webp');
    background-size: 100% 100%, cover;
    background-position: 0 0, center 20%;
    height: 119%;
}

/* A phone shows only the middle two thirds of the display: its own picture has the three drawn together there (and
   only the room around the laptop, a file a third the size). */
@media (max-width: 768px) {
    .hero::before {
        background-image: var(--hero-shade), url('../hero-background-2026-phone.webp');
    }
}

/* The title block stands on a line above the laptop: its foot (the row of faces) as far above the lid's top edge as
   the faces are below the buttons (22 px; the lid's soft edge reads 1 px lower), at every window size and whatever
   the title wraps to. The lid's top edge is 49.51% down the hero where the picture is as tall as its box, and lower
   where a very wide window makes the picture wider than that. style.css centred the block and moved it up by a
   fixed 131 px, which fitted the old picture's lid at one window height. --hero-h is the hero's height (style.css:
   100vh, at least 760 px on phones, 870 px on narrow ones, 780 px on a phone on its side); the vignette
   (.hero-screen) is sized by it too. */
.hero {
    --hero-h: 100vh;
}

.hero-content {
    align-self: flex-end;
    bottom: auto;
    margin-top: 0;
    margin-bottom: calc(var(--hero-h) - max(var(--hero-h) * 0.4951, var(--hero-h) * 0.238 + 10.936vw) + 22.8px);
}

@media (max-width: 768px) {
    .hero {
        --hero-h: max(100vh, 760px);
    }
}

@media (max-width: 389px) {
    .hero {
        --hero-h: max(100vh, 870px);
    }
}

@media (max-height: 500px) and (min-width: 769px) {
    .hero {
        --hero-h: max(100vh, 780px);
    }
}

/* On a phone the faces stand over their line of words, and style.css leaves 20 px under them: the block's foot is
   those words here, so that room goes. */
@media (max-width: 600px) {
    .hero-content .social-proof-container {
        margin-bottom: 0;
    }
}

/* The cream fade at the hero's foot, shorter than on other pages so it ends below the display, and it mustn't take
   the pointer from the display's button. */
.hero::after {
    height: 5%;
    background: linear-gradient(0deg, rgba(253, 242, 202, 1) 0%, rgba(253, 242, 202, 0) 100%);
    pointer-events: none;
}

/* The display's button (landing.js lays it over the display): "Watch a Demo" on hover, as the button above says it,
   the demo on click. Dark glass without a rim.
   Its layer, the hero's own box, also carries the room's vignette: the picture darkens away from the laptop, all
   round, so the display is the brightest thing in it and the eye rests there. An ellipse about the display's
   middle (74% down the hero), clear over the laptop and the title, then deepening evenly to half dark at the hero's
   sides and upper corners. Its width follows the window but is never less than the display needs to stay clear of
   it (the display is 0.686 of the hero's height wide): in an upright window, where the display fills the width,
   only the sky above the title darkens. It lies over the picture and under the cream fade at the hero's foot; a
   browser that can't read it shows the room as it is. */
.hero-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(ellipse max(52.8vw, calc(var(--hero-h) * 0.953)) 88% at 50% 73.8%,
        rgba(24, 12, 4, 0) 36%, rgba(24, 12, 4, 0.023) 43.1%, rgba(24, 12, 4, 0.061) 50.2%,
        rgba(24, 12, 4, 0.107) 57.3%, rgba(24, 12, 4, 0.161) 64.4%, rgba(24, 12, 4, 0.22) 71.6%,
        rgba(24, 12, 4, 0.283) 78.7%, rgba(24, 12, 4, 0.352) 85.8%, rgba(24, 12, 4, 0.424) 92.9%,
        rgba(24, 12, 4, 0.5) 100%);
}

/* No vignette on a phone: it sees no room beside the laptop, and its header's dark title stands on the sky */
@media (max-width: 768px) {
    .hero-screen {
        background-image: none;
    }
}

.hero-screen-play {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}

.hero-screen-play[hidden] {
    display: none;
}

.hero-screen-play-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px 11px 15px;
    border-radius: 999px;
    background: rgba(20, 16, 12, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: #FDF3CE;
    font: 600 15px/1 var(--lp-sans);
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.35s var(--lp-ease-out);
}

.hero-screen-play-pill .play-icon::before {
    font-size: 1em;
}

.hero-screen-play:hover .hero-screen-play-pill,
.hero-screen-play:focus-visible .hero-screen-play-pill {
    opacity: 1;
    transform: none;
}

.hero-screen-play:focus-visible {
    outline: none;
}

@media (hover: none) {
    .hero-screen-play {
        display: none;
    }
}

/* ---- Use cases: a storyline ---- */

/* Seven cases down the page: the film on one side, its headline and two lines on the other, the sides changing with
   every row. The films are the Help's own files in the Help's picture frame; landing.js plays one while it is fully
   in view. A film has no browser controls: one round button in its corner pauses and plays it. A row comes in from
   below as it scrolls into view (.fade-in), its words a moment after its film. */
.uc {
    overflow-x: clip;
}

.uc .section-lede {
    margin-bottom: 0;
}

.uc-story {
    display: grid;
    gap: 96px;
    max-width: 1160px;
    margin: var(--lp-title-gap) auto 0;
}

.uc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    text-align: left;
}

.uc-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
}

.uc-screen {
    position: relative;
    min-width: 0;
}

.uc-row:nth-child(even) .uc-screen {
    order: 2;
}

/* The row comes up into place (the site's .fade-in drops in from above, which reads as falling when you scroll down) */
.uc-row.fade-in {
    transform: translateY(28px);
    transition: opacity 0.6s ease-out, transform 0.7s var(--lp-ease-out);
}

.uc-row.fade-in.animate {
    transform: none;
}

.uc-row.fade-in .uc-copy {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease-out 0.14s, transform 0.65s var(--lp-ease-out) 0.14s;
}

.uc-row.fade-in.animate .uc-copy {
    opacity: 1;
    transform: none;
}

.uc-film {
    display: block;
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: auto 1800 / 1076;
    border: 8px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* The film's button: out of sight while the film plays, there when the pointer is over the film, when the button has
   the keyboard's focus, and whenever the film waits (paused by hand, at its end, or not started by the browser). */
.uc-toggle {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 16, 12, 0.58);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 6px 18px rgba(0, 0, 0, 0.22);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.uc-toggle[hidden] {
    display: none;
}

.uc-screen:hover .uc-toggle,
.uc-toggle:focus-visible,
.uc-screen.is-waiting .uc-toggle {
    opacity: 1;
}

.uc-toggle:hover {
    background: rgba(20, 16, 12, 0.74);
    transform: scale(1.06);
}

.uc-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.uc-toggle .icon-play,
.uc-screen.is-waiting .uc-toggle .icon-pause {
    display: none;
}

.uc-screen.is-waiting .uc-toggle .icon-play {
    display: block;
}

/* No pointer to hover with: the button stays in sight */
@media (hover: none) {
    .uc-toggle {
        opacity: 0.9;
    }
}

.uc-copy {
    max-width: 400px;
}

.uc-row:nth-child(even) .uc-copy {
    justify-self: end;
}

/* Where the case happens, in the site's own small label (as "As seen on") */
.uc-kicker {
    margin: 0 0 12px;
    font: 600 14px/1.2 var(--lp-sans);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a99b6e;
}

.uc-copy h3 {
    margin: 0 0 12px;
    font: 400 34px/1.12 var(--lp-serif);
    color: #333;
    text-wrap: balance;
}

.uc-copy p:last-child {
    margin: 0;
    font: 400 17px/1.55 var(--lp-sans);
    color: var(--lp-ink-soft);
    text-wrap: pretty;
}

.uc-more-line {
    margin: 64px 0 0;
    text-align: center;
}

.uc-more {
    font: 600 16px/1.4 var(--lp-sans);
    color: var(--lp-green);
    text-decoration: none;
}

.uc-more::after {
    content: ' →';
}

.uc-more:hover {
    text-decoration: underline;
}

/* ---- The pet, to try ---- */

/* One under another, centred: the scenes as a tab switch, the stage, the pets. The stage shows the pet's side of the
   screen up close (landing.js), 1080 px wide at most and no taller than leaves the stage and the pets in one look. */
/* The tab switch itself is the site's (style.css, shared with the plans' tabs); here are its place and its icons.
   It has the room the plans' switch has: 61 px from the letters above it (the subtitle's baseline) and 61 px to what
   stands under it. */
.pet-feature .section-lede {
    margin-bottom: 52.6px;
}

.pet-tabs {
    display: inline-flex;
    margin: 0 0 61px;
}

.pet-scene-tab {
    padding-left: 14px;
}

.pet-scene-tab svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pet-demo {
    --pet-h: clamp(400px, calc(100svh - 250px), 560px);
    width: min(100%, calc(var(--pet-h) * 1140 / 590));
    margin: 0 auto;
}

/* The Mac's screen. Inside, everything is placed in the take's points (1366 × 768) and the whole stage is scaled to
   the frame (landing.js sets --s and, on phones, shows the pet's corner only). */
.pet-frame {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    aspect-ratio: 1140 / 590;
    border-radius: 20px;
    overflow: hidden;
    background: #0c1a10;
    box-shadow: var(--lp-shadow-lift);
    isolation: isolate;
}

.pet-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1366px;
    height: 768px;
    transform-origin: 0 0;
    transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 0.8));
}

.ps-wall,
.ps-set {
    position: absolute;
    left: 0;
    top: 0;
    width: 1366px;
    height: 768px;
}

/* Only the scene's own set is there at all: the states show rows, fields and offers by their own rules, which would
   show through a set that was only hidden */
.ps-set {
    display: none;
}

.pet-demo[data-scene="shop"] .ps-set[data-set="shop"],
.pet-demo[data-scene="mail"] .ps-set[data-set="mail"],
.pet-demo[data-scene="write"] .ps-set[data-set="write"] {
    display: block;
}

/* A window: a picture placed by --x/--y/--w (points), 3 px a point; its shadow is drawn here */
.ps-window {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: block;
    width: var(--w);
    height: auto;
    border-radius: 16px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 24px 54px -8px rgba(0, 0, 0, 0.62), 0 7px 16px -4px rgba(0, 0, 0, 0.4);
}

/* The pet's own pieces, drawn here as the app draws them on a dark Mac (PetViews.swift, PetSurfaceLayout): rows and
   chips are 34 pt capsules, a card is 340 pt wide with 22 pt corners and 16 pt of padding, the type SF Pro 16. Their
   glass is the Smart Panel's dark fill over what lies behind it, blurred, with a hairline of light at its edge. The
   symbols are the app's SF Symbols (pet-demo/symbols.webp: one strip of 24 pt cells; --k picks one). */
.pet-stage {
    --ps-fill: rgba(21, 19, 20, 0.86);
    --ps-rim: inset 0 0 0 0.5px rgba(255, 255, 255, 0.17), inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
    --ps-text: rgba(255, 255, 255, 0.94);
    --ps-grey: #98989d;
    --ps-right: 31.5px;
}

.ps-sym {
    flex: none;
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 -4px;
    background: url('../pet-demo/symbols.webp') calc(var(--k) * -24px) 0 / 288px 24px no-repeat;
}

.ps-row,
.ps-chip,
.ps-pill,
.ps-field,
.ps-card,
.ps-voice {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    background: var(--ps-fill);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    color: var(--ps-text);
    font: 400 16px/19px var(--lp-sans);
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

.ps-row,
.ps-chip,
.ps-pill,
.ps-field {
    display: flex;
    align-items: center;
    height: 34px;
    border-radius: 17px;
    white-space: nowrap;
    box-shadow: var(--ps-rim), 0 5px 14px rgba(0, 0, 0, 0.3);
}

.ps-row,
.ps-chip,
.ps-pill {
    gap: 7px;
    padding: 0 15px 0 12px;
}

.ps-row,
.ps-chip,
.ps-field,
.ps-card,
.ps-voice,
.ps-actions {
    position: absolute;
    right: var(--ps-right);
}

.ps-row,
.ps-chip {
    top: var(--y);
}

/* The pet's surfaces come out of its head and go back into it, as the app's do (PetSurfaceLayout.headDrop) */
.ps-row,
.ps-chip,
.ps-field,
.ps-answer,
.ps-offer {
    --head-x: 1289px;
    --head-y: 616px;
    opacity: 0;
    transform: scale(0.25);
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.ps-row,
.ps-pill {
    cursor: pointer;
    transition: opacity 0.22s ease, transform 0.3s ease, visibility 0s linear 0.3s, background-color 0.18s ease, scale 0.2s var(--lp-spring);
}

.ps-pill {
    transition: background-color 0.18s ease, scale 0.2s var(--lp-spring);
}

.ps-row:hover,
.ps-pill:hover {
    background-color: rgba(44, 42, 43, 0.9);
}

.ps-row:active,
.ps-pill:active {
    scale: 0.96;
}

.pet-demo[data-state="ideas"] .ps-row {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.3s ease calc(var(--i) * 70ms), transform 0.5s var(--lp-spring) calc(var(--i) * 70ms), visibility 0s,
        background-color 0.18s ease, scale 0.2s var(--lp-spring);
}

.ps-chip.is-shown,
.ps-answer.is-shown,
.pet-demo[data-state="answer"] .ps-field,
.pet-demo[data-state="offer"] .ps-offer {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.28s ease, transform 0.55s var(--lp-spring), visibility 0s;
}

.pet-demo[data-state="answer"] .ps-field {
    transition-delay: 0.08s;
}

/* The pet at work: the app's spinning arc and its word, a little softer than a row's */
.ps-chip {
    color: rgba(255, 255, 255, 0.78);
}

.ps-spin {
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
}

.ps-spin::before {
    content: '';
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    border: 1.5px solid var(--ps-grey);
    border-left-color: transparent;
    border-radius: 50%;
    animation: lp-spin 0.8s linear infinite;
}

@keyframes lp-spin {
    to { transform: rotate(360deg); }
}

/* The bar under a card, to go on in: the model that answers, the field, dictation, and the ways on to the Smart
   Panel and the Chat UI */
.ps-field {
    top: 564.5px;
    width: 340px;
    padding-left: 12px;
    color: var(--ps-grey);
}

.ps-model {
    flex: none;
    display: block;
    width: 16px;
    height: 16px;
    filter: invert(1);
    opacity: 0.42;
}

.ps-field span {
    flex: 1;
    padding: 0 8px 0 7px;
}

.ps-mic {
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: 9px;
    fill: none;
    stroke: var(--ps-grey);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.ps-rule {
    flex: none;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.12);
}

.ps-field .ps-sym {
    margin: 0 7px;
    opacity: 0.6;
}

.ps-field .ps-sym:last-child {
    margin: 0 9px 0 7px;
}

/* A card: the idea's symbol and name with the close mark, the answer, and the marks that copy it or put it in */
.ps-card {
    bottom: 213.5px;
    width: 340px;
    padding: 16px;
    border-radius: 22px;
    box-shadow: var(--ps-rim), 0 16px 38px rgba(0, 0, 0, 0.42), 0 3px 9px rgba(0, 0, 0, 0.24);
    font-size: 16px;
    line-height: 27px;
}

.ps-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    margin: 0 0 12px;
    font-weight: 500;
    line-height: 22px;
}

.ps-card-title span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -2px -6px -2px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ps-close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.ps-close .ps-sym {
    margin: 0;
}

.ps-card h4 {
    margin: 0 0 8px;
    font: 700 27px/34px var(--lp-sans);
    letter-spacing: -0.012em;
    color: #fff;
}

.ps-card p {
    margin: 0 0 6px;
}

.ps-card ul {
    margin: 0 0 6px;
    padding-left: 22px;
}

.ps-card li {
    margin: 0 0 2px;
    padding-left: 2px;
}

.ps-card li::marker {
    color: var(--ps-grey);
}

.ps-card b {
    font-weight: 600;
    color: #fff;
}

.ps-card table {
    width: 100%;
    margin: 2px 0 8px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 21px;
}

.ps-card td {
    padding: 7px 0;
    border-top: 0.5px solid rgba(255, 255, 255, 0.14);
}

.ps-card td:last-child {
    padding-left: 12px;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

/* A long answer scrolls in the app: here its end fades out at the card's foot */
.ps-card-body.is-long {
    max-height: 319px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 52px), transparent calc(100% - 4px));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 52px), transparent calc(100% - 4px));
}

.ps-card-actions {
    display: flex;
    gap: 2px;
    height: 22px;
    margin: 4px 0 0 -6px;
}

.ps-card-actions span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 22px;
    opacity: 0.6;
}

.ps-copy-mark {
    flex: none;
    display: block;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.32;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* While you write: the pet's version of your words, where it comes from, and the two things to do with it */
.ps-voice {
    bottom: 212.5px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 332px;
    padding: 14px 10px 14px 16px;
    border-radius: 22px;
    box-shadow: var(--ps-rim), 0 16px 38px rgba(0, 0, 0, 0.42), 0 3px 9px rgba(0, 0, 0, 0.24);
}

.ps-voice-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 16px;
    margin: 0;
    padding-right: 6px;
    font: 600 13px/16px var(--lp-sans);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ps-grey);
}

.ps-voice-title .ps-sym {
    opacity: 0.6;
}

.ps-voice blockquote {
    margin: 0;
    padding: 0 6px 0 11px;
    border-left: 3px solid rgba(255, 255, 255, 0.24);
    font: 400 16px/23px var(--lp-sans);
}

.ps-voice-source {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font: 400 14px/17px var(--lp-sans);
    color: var(--ps-grey);
}

.ps-voice-source .ps-sym {
    opacity: 0.6;
}

.ps-actions {
    top: 564.5px;
    display: flex;
    gap: 8px;
}

.ps-pill .ps-copy-mark {
    width: 14px;
    height: 14px;
    margin: 0 1px;
}

/* The written scene: the draft, and the reply once Apply put the pet's version in */
.ps-sent {
    opacity: 0;
    transition: opacity 0.45s ease;
}

.pet-demo[data-applied] .ps-sent {
    opacity: 1;
}

/* A change of scene: the pet's ideas go back into it (as above) while the app's window goes, then the next scene's
   window comes and its ideas come out (landing.js holds .is-changing for the first half) */
.ps-window {
    transition: opacity 0.3s ease, transform 0.45s var(--lp-ease-out);
}

.pet-demo.is-changing .ps-window {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
}

/* The pet on the stage, where the take had it */
.ps-pet {
    position: absolute;
    left: 1229.6px;
    top: 592.6px;
    width: 119.5px;
    height: 119.5px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform-origin: 50% 87%;
    transition: transform 0.45s var(--lp-spring);
}

/* The pets' art looks to the right. On the right half of a screen the app turns a pet round, so that it looks into
   the screen and not at its edge (PetController.looksLeft); landing.js turns it back when it is dragged across. */
.ps-pet img {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
}

.ps-pet.looks-right img {
    transform: none;
}

.ps-pet:hover {
    transform: translateY(-4px);
}

.ps-pet.is-hopping {
    animation: lp-hop 0.6s var(--lp-ease-out);
}

@keyframes lp-hop {
    0% { transform: none; }
    30% { transform: translateY(-16px) scale(1.04, 0.97); }
    60% { transform: translateY(0) scale(0.97, 1.03); }
    100% { transform: none; }
}

/* "Click an idea" and "or drag me", in the site's own hand (Excalifont, the orange of its notes), until the first
   pick or drag: they write in and their arrows draw. One note per scene, and the drag one (data-for). */
.ps-notes {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.ps-note {
    position: absolute;
    color: #ff8f00;
    font: 400 34px/1.15 Excalifont, "Comic Sans MS", cursive;
    white-space: nowrap;
    clip-path: inset(-20% 104% -20% -4%);
    transition: clip-path 0.2s ease;
}

.ps-ink {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
}

.ps-ink path {
    fill: none;
    stroke: #ff8f00;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ps-shaft {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.2s ease;
}

.ps-head {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ps-note[data-for="drag"],
.ps-arrow[data-for="drag"] {
    --d: 0.8s;
}

.pet-demo.shows-hint[data-scene="mail"][data-state="ideas"] .ps-note[data-for="mail"],
.pet-demo.shows-hint[data-scene="shop"][data-state="ideas"] .ps-note[data-for="shop"],
.pet-demo.shows-hint[data-scene="write"][data-state="offer"] .ps-note[data-for="write"],
.pet-demo.shows-hint:is([data-state="ideas"], [data-state="offer"]) .ps-note[data-for="drag"] {
    clip-path: inset(-20% -4% -20% -4%);
    transition: clip-path 0.6s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0.3s);
}

.pet-demo.shows-hint[data-scene="mail"][data-state="ideas"] .ps-arrow[data-for="mail"] .ps-shaft,
.pet-demo.shows-hint[data-scene="shop"][data-state="ideas"] .ps-arrow[data-for="shop"] .ps-shaft,
.pet-demo.shows-hint[data-scene="write"][data-state="offer"] .ps-arrow[data-for="write"] .ps-shaft,
.pet-demo.shows-hint:is([data-state="ideas"], [data-state="offer"]) .ps-arrow[data-for="drag"] .ps-shaft {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--d, 0.3s) + 0.5s);
}

.pet-demo.shows-hint[data-scene="mail"][data-state="ideas"] .ps-arrow[data-for="mail"] .ps-head,
.pet-demo.shows-hint[data-scene="shop"][data-state="ideas"] .ps-arrow[data-for="shop"] .ps-head,
.pet-demo.shows-hint[data-scene="write"][data-state="offer"] .ps-arrow[data-for="write"] .ps-head,
.pet-demo.shows-hint:is([data-state="ideas"], [data-state="offer"]) .ps-arrow[data-for="drag"] .ps-head {
    opacity: 1;
    transition: opacity 0.15s ease calc(var(--d, 0.3s) + 0.95s);
}

/* The pet can be dragged about: the hand says so, and nothing animates along while it moves */
.ps-pet {
    cursor: grab;
    touch-action: none;
}

.pet-demo.is-dragging .ps-pet {
    cursor: grabbing;
    transition: none;
}

.pet-demo.is-dragging :is(.ps-row, .ps-chip, .ps-field, .ps-answer, .ps-offer) {
    transition: none;
}

/* The eleven pets, under the stage, standing on one ground line: the one on stage is half again as large as the
   rest, and one under the pointer hops up. No frames around them. A pet is sized by its button's font-size, so the
   picture, its place and its shadow all grow together when it is chosen. In every pet's picture the feet stand 12 %
   above the picture's foot; where they touch the ground, and how wide, differs by pet (--cx, --gw: measured on the
   art, as fractions of the picture's width). */
.pet-lineup {
    --pet: clamp(46px, 6vw, 80px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 26px auto 0;
}

.pet-pick {
    --cx: 0.49;
    --gw: 0.44;
    position: relative;
    flex: none;
    width: 1em;
    height: calc(var(--pet) * 1.3);
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--pet);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: font-size 0.5s var(--lp-spring);
}

.pet-pick[aria-pressed="true"] {
    font-size: calc(var(--pet) * 1.5);
}

.pet-pick[data-pet="flumi"] { --cx: 0.492; --gw: 0.371; }
.pet-pick[data-pet="ember"] { --cx: 0.482; --gw: 0.523; }
.pet-pick[data-pet="riff"] { --cx: 0.480; --gw: 0.535; }
.pet-pick[data-pet="koro"] { --cx: 0.512; --gw: 0.621; }
.pet-pick[data-pet="cove"] { --cx: 0.518; --gw: 0.523; }
.pet-pick[data-pet="tavi"] { --cx: 0.494; --gw: 0.422; }
.pet-pick[data-pet="sprout"] { --cx: 0.523; --gw: 0.371; }
.pet-pick[data-pet="milo"] { --cx: 0.498; --gw: 0.461; }
.pet-pick[data-pet="pip"] { --cx: 0.502; --gw: 0.406; }
.pet-pick[data-pet="kiki"] { --cx: 0.484; --gw: 0.348; }
.pet-pick[data-pet="mallow"] { --cx: 0.492; --gw: 0.395; }

/* Its shadow, on the ground right under its feet: the pet stands on the middle of it, so only the rim shows, darkest
   where the feet touch. It draws in and fades while the pet hops. */
.pet-pick::before {
    content: '';
    position: absolute;
    left: calc(var(--cx) * 1em);
    bottom: 0.047em;
    width: calc(var(--gw) * 1em + 0.2em);
    height: 0.105em;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(66, 44, 12, 0.5), rgba(66, 44, 12, 0.3) 45%, rgba(66, 44, 12, 0.1) 78%, rgba(66, 44, 12, 0));
    transform: translateX(-50%);
    transition: transform 0.4s var(--lp-ease-out), opacity 0.4s ease;
}

.pet-pick img {
    position: absolute;
    left: 0;
    bottom: -0.021em;
    z-index: 1;
    display: block;
    width: 1em;
    height: 1em;
    transform-origin: 50% 88%;
    transition: transform 0.45s var(--lp-spring);
}

.pet-pick:not([aria-pressed="true"]):hover img,
.pet-pick:not([aria-pressed="true"]):focus-visible img {
    transform: translateY(-0.08em) scale(1.06);
}

.pet-pick:not([aria-pressed="true"]):hover::before,
.pet-pick:not([aria-pressed="true"]):focus-visible::before {
    transform: translateX(-50%) scale(0.76);
    opacity: 0.6;
}

/* Its name, under the one the pointer is on */
.pet-name {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 2;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(43, 38, 32, 0.86);
    color: #fff;
    font: 600 12px/1.2 var(--lp-sans);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity 0.2s ease, transform 0.25s var(--lp-ease-out);
    pointer-events: none;
}

.pet-pick:hover .pet-name,
.pet-pick:focus-visible .pet-name {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---- Providers ---- */

.providers h2 {
    margin-bottom: var(--lp-title-gap);
}

/* A prompt like the Smart Panel's, going through a few models as Tab does in the app */
.model-switcher {
    display: flex;
    justify-content: center;
    margin: 0 0 52px;
}

.model-capsule {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 470px);
    box-sizing: border-box;
    padding: 12px 12px 12px 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(44, 46, 40, 0.96), rgba(28, 30, 26, 0.96));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 1px 0 rgba(255, 255, 255, 0.08) inset, var(--lp-shadow-lift);
    color: #f4f3ef;
    text-align: left;
}

.model-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
}

.model-logo img {
    width: 24px;
    height: 24px;
    filter: invert(1);
    transition: opacity 0.2s ease;
}

.model-ask {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font: 500 21px/1.3 var(--lp-sans);
    color: rgba(244, 243, 239, 0.5);
}

.model-name {
    display: inline-block;
    color: #fff;
    transition: opacity 0.22s ease, transform 0.32s var(--lp-ease-out);
}

.model-name.is-leaving {
    opacity: 0;
    transform: translateY(-40%);
}

.model-name.is-entering {
    opacity: 0;
    transform: translateY(40%);
    transition: none;
}

.model-tag {
    flex: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    font: 600 12.5px/1 var(--lp-sans);
    transition: opacity 0.22s ease;
}

.model-key {
    flex: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    padding: 4px 8px;
    transition: transform 0.12s ease, background-color 0.12s ease;
}

.model-key.is-pressed {
    transform: translateY(1px) scale(0.94);
    background: rgba(255, 255, 255, 0.2);
}

/* The picture under the title: the prompt, and on wires from it the three ways to bring a model, each a cluster of
   logos straight on the page (no cards). The prompt goes through the providers as Tab does in the app (landing.js):
   the wire to the cluster in turn lights up and a spark runs down it, the logo in turn stands out. A click on a logo
   or on Tab picks one. */
.pv {
    max-width: 1100px;
    margin: 0 auto;
}

.pv .model-switcher {
    position: relative;
    z-index: 1;
    margin: 0;
}

/* The wires start 12 px up, under the prompt, so none of them shows an end there */
.pv-wires {
    position: relative;
    display: block;
    width: 100%;
    height: 88px;
    margin-top: -12px;
    overflow: visible;
}

.pv-wires path {
    fill: none;
    stroke: rgba(91, 70, 30, 0.2);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

.pv[data-group="plan"] .pv-wires path[data-group="plan"],
.pv[data-group="key"] .pv-wires path[data-group="key"],
.pv[data-group="mac"] .pv-wires path[data-group="mac"] {
    stroke: var(--lp-green-light);
    stroke-width: 2.5;
}

/* The spark: a short piece of the lit wire, run from the prompt to the cluster on every change (landing.js restarts it) */
.pv-wires .pv-spark {
    stroke: #c8f08c;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0.14 1;
    stroke-dashoffset: 0.14;
    opacity: 0;
}

.pv-wires .pv-spark.runs {
    animation: lp-spark 0.75s cubic-bezier(0.45, 0, 0.2, 1);
}

@keyframes lp-spark {
    0% { stroke-dashoffset: 0.14; opacity: 1; }
    85% { opacity: 1; }
    100% { stroke-dashoffset: -1; opacity: 0; }
}

.pv-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

/* The dot a wire ends in */
.pv-group::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    margin: -4.5px auto 0;
    border-radius: 50%;
    background: #d9cba6;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.pv[data-group="plan"] .pv-group[data-group="plan"]::before,
.pv[data-group="key"] .pv-group[data-group="key"]::before,
.pv[data-group="mac"] .pv-group[data-group="mac"]::before {
    background: var(--lp-green-light);
    box-shadow: 0 0 0 4px rgba(85, 159, 63, 0.18);
}

.pv-group h3 {
    margin: 16px 0 4px;
    font: 400 27px/1.15 var(--lp-serif);
    color: var(--lp-ink);
    transition: color 0.3s ease;
}

.pv-group p {
    margin: 0 0 22px;
    font: 400 15px/1.4 var(--lp-sans);
    color: var(--lp-ink-soft);
}

.pv[data-group="plan"] .pv-group[data-group="plan"] h3,
.pv[data-group="key"] .pv-group[data-group="key"] h3,
.pv[data-group="mac"] .pv-group[data-group="mac"] h3 {
    color: var(--lp-green);
}

.pv-logos {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    justify-content: center;
}

.pv-named {
    grid-template-columns: repeat(4, 76px);
    gap: 6px;
}

.pv-named li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    font: 600 12.5px/1.25 var(--lp-sans);
    color: var(--lp-ink);
    text-wrap: balance;
}

.pv-wall {
    grid-template-columns: repeat(6, 46px);
    gap: 9px;
}

.pv-logo {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(60, 40, 10, 0.06), 0 6px 16px rgba(60, 40, 10, 0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--lp-spring), box-shadow 0.25s ease;
}

.pv-named .pv-logo {
    width: 62px;
    height: 62px;
    border-radius: 19px;
}

.pv-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.pv-named .pv-logo img {
    width: 30px;
    height: 30px;
}

.pv-logo:hover {
    transform: translateY(-3px);
}

.pv-logo[aria-pressed="true"] {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 0 0 2.5px var(--lp-green-light), 0 10px 22px rgba(59, 103, 2, 0.24);
}

.pv-logo:focus-visible {
    outline: 2px solid var(--lp-green-light);
    outline-offset: 3px;
}

.pv-any {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(91, 70, 30, 0.22);
    font: 500 22px/1 var(--lp-sans);
    color: var(--lp-ink-soft);
    cursor: default;
}

/* A small logo's name, under the pointer; at the wall's sides it starts or ends with its logo, so it never reaches
   past the page */
.pv-wall .pv-logo::after {
    content: attr(data-name);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 2;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(43, 38, 32, 0.9);
    color: #fff;
    font: 600 12px/1.2 var(--lp-sans);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 0.18s ease, transform 0.22s var(--lp-ease-out);
    pointer-events: none;
}

.pv-wall .pv-logo:hover::after,
.pv-wall .pv-logo:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pv-wall li:nth-child(6n + 1) .pv-logo::after {
    left: 0;
    transform: translate(0, 4px);
}

.pv-wall li:nth-child(6n) .pv-logo::after {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
}

.pv-wall li:nth-child(6n + 1) .pv-logo:hover::after,
.pv-wall li:nth-child(6n) .pv-logo:hover::after,
.pv-wall li:nth-child(6n + 1) .pv-logo:focus-visible::after,
.pv-wall li:nth-child(6n) .pv-logo:focus-visible::after {
    transform: none;
}

/* The partner's line: the tab switch's capsule (style.css), as tall and of the same make */
.provider-partner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 45px;
    margin-top: 48px;
    padding: 8px 22px 8px 16px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 0 0 1px rgba(60, 40, 10, 0.07), 0 6px 18px rgba(60, 40, 10, 0.06);
    font: 500 15px/1.35 var(--lp-sans);
    color: var(--lp-ink);
    text-align: left;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.provider-partner:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.provider-partner strong {
    font-weight: 700;
    color: var(--lp-green);
}

.provider-partner img {
    flex: none;
    width: 22px;
    height: 22px;
}

/* ---- The app icons ---- */

/* Opens like the other sections: the hairline, then the section's top space (the rows below run edge to edge) */
.app-icons {
    padding-top: 0;
}

.app-icons::before {
    content: '';
    display: block;
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto var(--lp-section-top);
    border-top: 1px solid var(--lp-hairline);
}

.app-icons h2 {
    margin-top: 0;
    margin-bottom: 14px;
}

.app-icons .app-icons-hint {
    margin: 0 auto 60px;
}

/* ---- Native. Fast. Powerful: what makes Fluent stand out, in ten tiles ---- */
/* Three rows of white tiles on a 12-column grid: three large ones, four smaller, three large. A tile is a small
   picture over a headline and two lines. The pictures are drawn here out of Fluent's own pieces, as they look on a
   dark Mac: the Smart Panel's glass with its question, tool line, answer and source; the pet's black rows; the
   context chips; Council's member cards; the dictation badge; the integrations' icons (the real ones, tools/
   tile_art.py). Two are set in type instead (the download's size, the "$0"). landing.js plays a picture once when its
   tile comes into view (.plays holds its parts back until then; without the script everything shows at rest). */

/* Excalifont, for the pet's handwritten notes: Excalidraw's hand-drawn font (SIL OFL 1.1, the license beside it), cut
   to Latin. */
@font-face {
    font-family: Excalifont;
    src: url('../fonts/Excalifont.woff2') format('woff2');
    font-display: block;
}

/* The section before pricing ends 70 px above pricing's wave (the others end 90 px above a hairline). That is the
   models' section since Native. Fast. Powerful moved up to follow the reviews. */
.providers {
    padding-bottom: 70px;
}

.why-symbols {
    position: absolute;
}

.why-grid {
    /* Fluent's pieces on a dark Mac */
    --fl-glass: linear-gradient(180deg, #34322e 0%, #24221f 100%);   /* the Smart Panel's glass */
    --fl-black: #181715;                                             /* the pet's rows, the dictation badge */
    --fl-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15), inset 0 0.5px 0 rgba(255, 255, 255, 0.22);
    --fl-drop: 0 12px 26px rgba(40, 25, 5, 0.2), 0 2px 6px rgba(40, 25, 5, 0.14);
    --fl-drop-small: 0 5px 12px rgba(40, 25, 5, 0.17), 0 1px 3px rgba(40, 25, 5, 0.12);
    --fl-dim: rgba(255, 255, 255, 0.56);
    --fl-blue: #3d8bff;
    --fl-green: #30d158;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: var(--lp-title-gap) auto 0;
    text-align: left;
}

.why-tile {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 276px;
    box-sizing: border-box;
    padding: 20px 22px 24px;
    border-radius: 24px;
    background: var(--lp-card);
    box-shadow: var(--lp-shadow);
    transition: transform 0.35s var(--lp-ease-out), box-shadow 0.35s ease;
}

.why-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(60, 40, 10, 0.07), 0 18px 40px rgba(60, 40, 10, 0.15);
}

.why-big {
    grid-column: span 4;
    min-height: 300px;
}

.why-art {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    height: 112px;
    border-radius: 16px;
    background: var(--lp-card-soft);
    overflow: hidden;
}

.why-big .why-art {
    height: 160px;
}

.why-tile h3 {
    margin: 18px 0 6px;
    font: 650 17.5px/1.25 var(--lp-sans);
    letter-spacing: -0.01em;
    color: var(--lp-ink);
}

.why-big h3 {
    font-size: 20px;
}

.why-tile > p {
    margin: 0;
    font: 400 15px/1.5 var(--lp-sans);
    color: var(--lp-ink-soft);
    text-wrap: pretty;
}

.why-art :where(p, ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The pieces' line icons */
.why-art svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* One of the integrations' icons out of their strip: --k is its place in it, --z its size */
.fl-app {
    --z: 26px;
    display: block;
    flex: none;
    width: var(--z);
    height: var(--z);
    background: url('../why/integrations.webp') calc(var(--k) * -1 * var(--z)) 0 / calc(13 * var(--z)) var(--z) no-repeat;
}

/* The Smart Panel's glass */
.fl-panel {
    box-sizing: border-box;
    border-radius: 18px;
    background: var(--fl-glass);
    box-shadow: var(--fl-edge), var(--fl-drop);
    color: #fff;
}

.fl-caret {
    flex: none;
    display: inline-block;
    width: 1.5px;
    height: 1.15em;
    margin-left: 2px;
    border-radius: 1px;
    background: var(--fl-blue);
    animation: lp-caret 1.1s steps(1) infinite;
}

@keyframes lp-caret {
    50% { opacity: 0; }
}

/* Native: the download's size against an Electron app's */
.why-native .why-art {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 22px 0 24px;
}

.why-figure {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: var(--lp-ink);
}

.why-figure strong {
    font: 400 68px/1 var(--lp-serif);
    letter-spacing: -0.01em;
}

.why-figure span {
    font: 400 24px/1 var(--lp-serif);
    color: var(--lp-green);
}

.why-bars {
    flex: 1;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.why-bars p {
    font: 600 12.5px/1.2 var(--lp-sans);
    color: var(--lp-ink-soft);
}

.why-bars span {
    display: block;
    margin-bottom: 6px;
    text-wrap: balance;
}

.why-bars p:first-child span {
    color: var(--lp-green);
}

.why-bars i {
    display: block;
    height: 12px;
    border-radius: 6px;
    transform-origin: 0 50%;
}

/* 73 MB of the 690 the longest bar stands for; the others' bar is solid to 260 MB and fades out to 690 */
.why-bars .is-fluent {
    width: 10.6%;
    min-width: 14px;
    background: linear-gradient(to right, var(--lp-green), var(--lp-green-light));
}

.why-bars .is-others {
    width: 100%;
    background: linear-gradient(to right, #c9b68a 0%, #c9b68a 37.7%, rgba(201, 182, 138, 0.3) 100%);
}

/* The knowledge base: the panel with a question, Memory's tool line, the answer and the file it came from */
.why-knows .fl-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    width: min(100% - 44px, 330px);
    padding: 12px 14px 14px;
}

.fl-ask {
    align-self: flex-end;
    padding: 5px 11px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    font: 400 13px/1.3 var(--lp-sans);
    white-space: nowrap;
}

.fl-tool {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 500 12px/1.2 var(--lp-sans);
    color: var(--fl-dim);
    white-space: nowrap;
}

.fl-tool img {
    width: 16px;
    height: 16px;
    margin: -1px 0;
}

.fl-tool span::before {
    content: '·';
    margin-right: 6px;
}

.fl-answer {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 14.5px/1.3 var(--lp-sans);
    white-space: nowrap;
}

.fl-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.11);
    font: 500 12px/1.45 var(--lp-sans);
    color: rgba(255, 255, 255, 0.74);
}

.fl-source svg {
    width: 13px;
    height: 13px;
}

/* The night shift: what Fluent tells you it did while the Mac slept, as the Mac's own notifications */
.why-night .why-art {
    background: radial-gradient(120% 110% at 88% -12%, #3d3966 0%, #1e1c32 46%, #131220 100%);
}

.fl-banners {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

.fl-banners li {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 13px 0 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
    font: 600 13px/1.2 var(--lp-sans);
    color: #fff;
}

/* Each action's own emoji, as the pet's rows show an action's: the emoji by itself, no plate under it. Every emoji
   stands in the middle of the same box, so the three names start on one line. */
.fl-emoji {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font: normal 19px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    /* Apple's emoji are drawn left of and below the middle of the room their letter takes (measured: 1.45 px and
       0.8 px at this size): moved back, so the drawing itself stands in the box's middle */
    transform: translate(0.077em, -0.042em);
}

.fl-banners span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fl-banners time {
    flex: none;
    font: 500 12px/1.2 var(--lp-sans);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.5);
}

/* It learns you: what it has noted, as the pet's black rows with Memory's orb */
.fl-pills {
    display: grid;
    gap: 5px;
    justify-items: start;
}

.fl-pills li {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    box-sizing: border-box;
    padding: 0 12px 0 6px;
    border-radius: 13px;
    background: var(--fl-black);
    box-shadow: var(--fl-edge), var(--fl-drop-small);
    font: 500 12.5px/1 var(--lp-sans);
    color: #fff;
    white-space: nowrap;
}

.fl-pills img {
    width: 16px;
    height: 16px;
}

/* Context: the panel's prompt with what came along */
.why-context .fl-panel {
    display: grid;
    gap: 9px;
    justify-items: start;
    width: calc(100% - 24px);
    padding: 11px 11px 11px;
    border-radius: 16px;
}

.fl-input {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    font: 500 13.5px/1.2 var(--lp-sans);
    white-space: nowrap;
}

.fl-input img {
    flex: none;
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    opacity: 0.62;
}

/* The caret stands right after the last letter (the row's gap is for the model's mark) */
.fl-input .fl-caret {
    margin-left: -5px;
}

.fl-chips {
    display: flex;
    gap: 5px;
    max-width: 100%;
}

.fl-chips li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    box-sizing: border-box;
    padding: 0 8px 0 5px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.13);
    font: 600 11px/1 var(--lp-sans);
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}

.fl-chips .fl-app {
    --z: 13px;
}

.fl-chips svg {
    width: 12px;
    height: 12px;
    color: var(--fl-dim);
}

/* Four small tiles in a row leave the panel room for two chips; the third shows where a tile is wider */
.fl-chips li:nth-child(3) {
    display: none;
}

/* Council: three members' cards, and the verdict they come to */
.why-council .why-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fl-members {
    display: flex;
    justify-content: space-between;
    width: 176px;
}

.fl-members span {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--fl-glass);
    box-shadow: var(--fl-edge), var(--fl-drop-small);
}

.fl-members img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/* A member is done: the app's blue check */
.fl-members i,
.fl-verdict i {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--fl-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.9 6.3l2.1 2.1 4.1-4.6'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.fl-members i {
    position: absolute;
    right: -5px;
    top: -5px;
    box-shadow: 0 0 0 2px var(--lp-card-soft);
}

.why-art .fl-links {
    display: block;
    width: 176px;
    height: 22px;
    overflow: visible;
}

/* Each line is drawn from the verdict up to its member and measured in dots (its pathLength says how many it holds,
   5.5 px apart), so the dots are spaced alike on all three and stand at the same heights over the verdict */
.fl-links path {
    stroke: rgba(43, 38, 32, 0.5);
    stroke-width: 1.7;
    stroke-dasharray: 0.001 0.999;
    stroke-dashoffset: 0.5;
}

.fl-verdict {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    box-sizing: border-box;
    padding: 0 12px 0 7px;
    border-radius: 14px;
    background: var(--fl-black);
    box-shadow: var(--fl-edge), var(--fl-drop-small);
    font: 600 12.5px/1 var(--lp-sans);
    color: #fff;
}

.fl-verdict b {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--fl-dim);
}

/* Private: the models that run on this Mac, in one capsule of the panel's glass */
.why-private .why-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fl-group {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 46px;
    box-sizing: border-box;
    padding: 0 17px;
    border-radius: 23px;
    background: var(--fl-glass);
    box-shadow: var(--fl-edge), var(--fl-drop-small);
}

.fl-group img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.fl-caption {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 600 12px/1 var(--lp-sans);
    color: var(--lp-ink-soft);
}

.fl-caption svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.2;
}

/* Your AI plan: nothing extra to pay, and the four plans signed in (the app's green dot) */
.why-plan .why-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
}

.why-plan .why-figure span {
    color: var(--lp-green);
}

.fl-plans {
    display: grid;
    grid-template-columns: repeat(2, 48px);
    gap: 11px;
}

.fl-plans li {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--fl-glass);
    box-shadow: var(--fl-edge), var(--fl-drop-small);
}

.fl-plans img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.fl-plans i {
    position: absolute;
    right: -3px;
    top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fl-green);
    box-shadow: 0 0 0 2.5px var(--lp-card-soft);
}

/* It gets things done: the sixteen integrations' icons, and the pointer Fluent works other apps with */
.fl-tray {
    padding: 13px 15px;
}

.fl-apps {
    display: grid;
    grid-template-columns: repeat(8, 26px);
    gap: 10px;
}

.fl-apps li {
    width: 26px;
    height: 26px;
}

.fl-apps svg,
.why-art .fl-pointer {
    display: block;
    width: 100%;
    height: 100%;
    stroke: none;
    stroke-width: initial;
    fill: initial;
}

/* The pointer's tip is at 14, 15 of its 64: it stands with its tip on the tray's middle and goes from there */
.why-art .fl-pointer {
    position: absolute;
    left: calc(50% - 7px);
    top: calc(50% - 7.5px);
    width: 32px;
    height: 32px;
    transform-origin: 21.9% 23.4%;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
    transform: translate(86px, 26px);
    animation: lp-point 6s var(--lp-ease-out) infinite;
}

/* To Reminders and a click, to Maps and a click, and back to where it waits */
@keyframes lp-point {
    0%, 10% { transform: translate(86px, 26px); }
    26%, 30% { transform: translate(-90px, -18px); }
    33% { transform: translate(-90px, -18px) scale(0.84); }
    36%, 52% { transform: translate(-90px, -18px); }
    68%, 72% { transform: translate(-18px, 18px); }
    75% { transform: translate(-18px, 18px) scale(0.84); }
    78%, 90% { transform: translate(-18px, 18px); }
    100% { transform: translate(86px, 26px); }
}

.fl-apps li:nth-child(2) {
    animation: lp-tap-a 6s ease-out infinite;
}

.fl-apps li:nth-child(12) {
    animation: lp-tap-b 6s ease-out infinite;
}

@keyframes lp-tap-a {
    0%, 32%, 44%, 100% { transform: none; }
    36% { transform: scale(1.22); }
}

@keyframes lp-tap-b {
    0%, 74%, 86%, 100% { transform: none; }
    78% { transform: scale(1.22); }
}

/* Dictation: the words as they come, and the badge that listens */
.why-voice .why-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.fl-field {
    display: flex;
    align-items: center;
    max-width: calc(100% - 28px);
    height: 38px;
    box-sizing: border-box;
    padding: 0 17px;
    border-radius: 19px;
    background: #22211e;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--fl-drop-small);
    font: 400 14px/1 var(--lp-sans);
    color: #fff;
    white-space: nowrap;
}

.fl-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 15px 0 12px;
    border-radius: 17px;
    background: #0b0b0a;
    box-shadow: var(--fl-edge), var(--fl-drop-small);
    color: #fff;
}

.fl-badge b {
    margin: 0 2px 0 -9px;
    font: 600 13px/1 var(--lp-sans);
}

.fl-badge svg {
    flex: none;
    width: 15px;
    height: 15px;
    stroke-width: 2.3;
}

.fl-badge .fl-chevron {
    width: 11px;
    height: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.fl-badge .fl-solid {
    fill: currentColor;
    stroke: none;
}

.fl-wave {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 16px;
}

.fl-wave i {
    width: 2.6px;
    height: 15px;
    border-radius: 1.3px;
    background: #fff;
    transform: scaleY(0.75);
    animation: lp-wave 0.9s ease-in-out infinite alternate;
}

.fl-wave i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.fl-wave i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; }
.fl-wave i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.15s; }

@keyframes lp-wave {
    from { transform: scaleY(0.3); }
    to { transform: scaleY(1); }
}

/* The pictures play once (landing.js): the bars grow, a panel's lines and the rows come one after another, the
   dotted lines run to the verdict */
.why-tile.plays :is(.why-figure, .fl-panel, .fl-ask, .fl-tool, .fl-answer, .fl-banners li, .fl-pills li, .fl-input,
    .fl-chips li, .fl-members span, .fl-verdict, .fl-group, .fl-caption, .fl-plans li, .fl-apps li, .fl-field,
    .fl-badge) {
    opacity: 0;
    transform: translateY(9px) scale(0.97);
}

.why-tile.plays .why-bars i {
    transform: scaleX(0);
}

.why-tile.plays .fl-links path {
    stroke-dashoffset: -3.5;
    opacity: 0;
}

.why-tile.plays :is(.fl-members i, .fl-plans i) {
    transform: scale(0);
}

.why-tile.plays .fl-pointer {
    opacity: 0;
    animation: none;
}

.why-tile.plays .fl-apps li {
    animation: none;
}

:is(.why-figure, .fl-panel, .fl-ask, .fl-tool, .fl-answer, .fl-banners li, .fl-pills li, .fl-input, .fl-chips li,
    .fl-members span, .fl-verdict, .fl-group, .fl-caption, .fl-plans li, .fl-apps li, .fl-field, .fl-badge) {
    transition: opacity 0.4s ease calc(var(--n, 0) * 0.13s + 0.1s), transform 0.6s var(--lp-spring) calc(var(--n, 0) * 0.13s + 0.1s);
}

.why-bars i {
    transition: transform 0.9s var(--lp-ease-out) 0.35s;
}

.why-bars .is-others {
    transition-delay: 0.6s;
}

.fl-links path {
    transition: stroke-dashoffset 0.55s cubic-bezier(0.45, 0, 0.2, 1) 0.7s, opacity 0.2s ease 0.7s;
}

:is(.fl-members i, .fl-plans i) {
    transition: transform 0.4s var(--lp-spring) calc(var(--n, 0) * 0.13s + 0.5s);
}

.fl-pointer {
    transition: opacity 0.4s ease 0.9s;
}

.fl-ask,
:is(.fl-banners, .fl-pills, .fl-chips, .fl-plans) li:nth-child(2),
.fl-members span:nth-child(2),
.fl-input,
.fl-field {
    --n: 1;
}

.fl-tool,
:is(.fl-banners, .fl-pills, .fl-plans) li:nth-child(3),
.fl-chips li:nth-child(1),
.fl-members span:nth-child(3),
.fl-caption {
    --n: 2;
}

.fl-chips li:nth-child(2),
.fl-plans li:nth-child(4),
.fl-badge {
    --n: 3;
}

.fl-answer,
.fl-chips li:nth-child(3) {
    --n: 4;
}

.fl-verdict {
    --n: 8;
}

/* The sixteen come column by column */
.fl-apps li:nth-child(8n + 1) { --n: 0.6; }
.fl-apps li:nth-child(8n + 2) { --n: 1; }
.fl-apps li:nth-child(8n + 3) { --n: 1.4; }
.fl-apps li:nth-child(8n + 4) { --n: 1.8; }
.fl-apps li:nth-child(8n + 5) { --n: 2.2; }
.fl-apps li:nth-child(8n + 6) { --n: 2.6; }
.fl-apps li:nth-child(8n + 7) { --n: 3; }
.fl-apps li:nth-child(8n + 8) { --n: 3.4; }

/* ---- Reviews: one wall of them ---- */
/* The live page's cards, a size down and all in one size of type, laid by script.js (reviewWall) as one wall of four
   rows that runs on: no card wider than 420 px, the rows two and three lines tall in turn, every row starting a
   little further along than the one above, so no gutter runs straight down the wall. The long reviews are cut to
   their best lines. Phones keep the live page's own list (the wall is only built on wider screens). */
@media (min-width: 769px) {
    .reviews-track {
        gap: 24px;
    }

    .reviews-wall {
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 24px;
        font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* as .reviews-page */
    }

    .reviews-wall-row {
        display: flex;
        gap: 24px;
        height: var(--h);
        transform: translateX(calc(-1 * var(--shift, 0px)));
    }

    .reviews-wall-row > .mini-review,
    .reviews-wall-row > .review-feature {
        flex: 0 0 var(--w);
        box-sizing: border-box;
        min-width: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .review-feature,
    .mini-review {
        padding: 20px 22px;
        font-size: 16px;
        line-height: 1.5;
    }

    .review-feature blockquote {
        margin: 0 0 14px;
        font-size: 16px;
        line-height: 1.5;
    }

    .reviews-row > .mini-review p,
    .reviews-wall-row > .mini-review p {
        margin: 0 0 14px;
    }

    .reviewer {
        font-size: 15px;
    }

    .reviewer img {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }
}

@media (max-width: 768px) {
    .reviews-wall {
        display: none;
    }
}

/* ---- Narrower screens ---- */

@media (max-width: 1080px) {
    /* The tiles: two to a row, all one size */
    .why-tile,
    .why-big {
        grid-column: span 6;
        min-height: 0;
    }

    .why-art,
    .why-big .why-art {
        height: 150px;
    }

    .why-tile h3,
    .why-big h3 {
        font-size: 18.5px;
    }

    .fl-chips li:nth-child(3) {
        display: inline-flex;
    }

    .why-context .fl-panel {
        width: auto;
        padding: 12px 13px;
    }

    .uc-story {
        gap: 72px;
    }

    .uc-row {
        gap: 36px;
    }

    .uc-copy h3 {
        font-size: 30px;
    }
}

@media (max-width: 900px) {
    /* The storyline: the film over its words, every row the same way */
    .uc-row,
    .uc-row:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        max-width: 640px;
        margin: 0 auto;
    }

    .uc-row:nth-child(even) .uc-screen {
        order: 0;
    }

    .uc-copy,
    .uc-row:nth-child(even) .uc-copy {
        justify-self: start;
        max-width: none;
    }

    .uc-story {
        gap: 64px;
    }

    /* The providers: the three clusters one under another, no wires */
    .pv-wires {
        display: none;
    }

    .pv-groups {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 26px;
    }
}

@media (max-width: 768px) {
    :root {
        --lp-section-top: 70px;
        --lp-title-gap: 40px;
    }

    .lp-section h2 {
        font-size: 36px;
    }

    .section-lede {
        font-size: 17px;
    }

    .app-icons h2 {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        font-size: 36px;
    }

    .app-icons .app-icons-hint {
        padding: 0 20px;
        margin-bottom: 44px;
    }

    .uc-film {
        border-width: 6px;
        border-radius: 16px;
    }

    .uc-copy h3 {
        font-size: 27px;
    }

    .uc-copy p:last-child {
        font-size: 16px;
    }

    /* On a phone the stage shows the pet's corner of the screen (landing.js): a taller frame */
    .pet-demo {
        width: 100%;
    }

    .pet-frame {
        aspect-ratio: 440 / 600;
        border-radius: 16px;
    }

    .pet-scene-tab {
        padding: 8.5px 12px;
        font-size: 13.5px;
    }

    .pet-scene-tab svg {
        display: none;
    }

    /* Two rows, six and five whichever is chosen: the chosen one takes a pet and a half's room, so a row is 6.5 pets
       wide at most, and the sections' sides here are 20 px each */
    .pet-lineup {
        --pet: min(56px, (100vw - 40px) / 6.56);
        flex-wrap: wrap;
        max-width: calc(var(--pet) * 6.55);
        margin-top: 12px;
    }

    .model-switcher {
        margin-bottom: 30px;
    }

    .model-ask {
        font-size: 18px;
    }

    .model-tag {
        display: none;
    }

    .provider-partner {
        border-radius: 18px;
    }

    .why-grid {
        gap: 14px;
    }

    .why-tile {
        padding: 14px 15px 18px;
    }

    /* Two tiles to a phone-wide row: the pictures a size down */
    .why-figure strong {
        font-size: 50px;
    }

    .why-figure span {
        font-size: 19px;
    }

    .why-native .why-art {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 10px;
        padding: 0 16px;
    }

    .why-plan .why-art {
        gap: 16px;
    }

    .fl-plans {
        grid-template-columns: repeat(2, 42px);
        gap: 9px;
    }

    .fl-plans li {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .fl-apps {
        grid-template-columns: repeat(8, 22px);
        gap: 7px;
    }

    .fl-apps li {
        width: 22px;
        height: 22px;
    }

    .fl-apps .fl-app {
        --z: 22px;
    }

    .fl-tray {
        padding: 10px 11px;
    }
}

@media (max-width: 600px) {
    .why-tile,
    .why-big {
        grid-column: span 12;
    }

    .why-figure strong {
        font-size: 60px;
    }

    .why-figure span {
        font-size: 22px;
    }

    .why-native .why-art {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 0 18px;
    }

    .why-plan .why-art {
        gap: 28px;
    }

    .fl-plans {
        grid-template-columns: repeat(2, 48px);
        gap: 11px;
    }

    .fl-plans li {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .fl-apps {
        grid-template-columns: repeat(8, 26px);
        gap: 9px;
    }

    .fl-apps li {
        width: 26px;
        height: 26px;
    }

    .fl-apps .fl-app {
        --z: 26px;
    }

    .fl-tray {
        padding: 12px 13px;
    }
}

@media (max-width: 380px) {
    .why-figure strong {
        font-size: 50px;
    }

    .why-figure span {
        font-size: 19px;
    }

    .why-native .why-art {
        gap: 14px;
        padding: 0 12px;
    }

    .why-plan .why-art {
        gap: 18px;
    }

    .fl-apps {
        grid-template-columns: repeat(8, 23px);
        gap: 7px;
    }

    .fl-apps li {
        width: 23px;
        height: 23px;
    }

    .fl-apps .fl-app {
        --z: 23px;
    }

    .fl-tray {
        padding: 10px 11px;
    }

    .fl-field {
        font-size: 12.5px;
        padding: 0 13px;
    }

    .pv-wall {
        grid-template-columns: repeat(6, 40px);
        gap: 7px;
    }

    .pv-wall .pv-logo {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .pv-named {
        grid-template-columns: repeat(4, 68px);
    }

    .pv-named .pv-logo {
        width: 56px;
        height: 56px;
    }

    .pet-scene-tab {
        padding: 8.5px 10px;
        font-size: 13px;
    }
}

@media (max-width: 340px) {
    /* The narrowest phones: the tiles' pictures a size down again, so each stays inside its box */
    .why-knows .fl-panel {
        gap: 8px;
        width: calc(100% - 20px);
        padding: 10px 11px 12px;
    }

    .fl-ask {
        font-size: 12.5px;
    }

    .fl-answer {
        gap: 6px;
        font-size: 13.5px;
    }

    .fl-source {
        font-size: 11.5px;
    }

    .fl-chips li:nth-child(3) {
        display: none;
    }

    .fl-apps {
        grid-template-columns: repeat(8, 21px);
        gap: 6px;
    }

    .fl-apps li {
        width: 21px;
        height: 21px;
    }

    .fl-apps .fl-app {
        --z: 21px;
    }

    .fl-tray {
        padding: 9px 10px;
        border-radius: 15px;
    }

    .fl-field {
        max-width: calc(100% - 16px);
        height: 34px;
        padding: 0 12px;
        font-size: 11.5px;
    }

    .pet-scene-tab {
        padding: 8.5px 6px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uc-row.fade-in,
    .uc-row.fade-in .uc-copy {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ps-note,
    .ps-shaft,
    .ps-head,
    .ps-window,
    .pet-pick,
    .pet-pick img,
    .pet-pick::before,
    .pet-name,
    .ps-row,
    .ps-chip,
    .ps-field,
    .ps-answer,
    .ps-offer,
    .ps-pet,
    .ps-sent,
    .model-name,
    .pv-logo,
    .pv-logo::after,
    .pv-wires path,
    .why-tile,
    .why-tile *,
    .why-bars i {
        transition: none !important;
    }

    .ps-pet.is-hopping,
    .pv-wires .pv-spark.runs,
    .fl-caret,
    .fl-wave i,
    .fl-pointer,
    .fl-apps li {
        animation: none;
    }
}