/* ===== styles.css ===== */
/* Self-hosted fonts (was Google Fonts). latin covers EN + SV (å ä ö all
   sit in U+00E0-FF); latin-ext is declared for unusual European glyphs.
   Browser picks per unicode-range. font-display: swap keeps text visible
   during the font fetch. */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/instrument-serif-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/instrument-serif-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    background-color: rgb(254, 254, 252);
    color: rgb(10, 10, 10);
}

/* HEADER & NAV */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Above .news-toast (z-index 1500) so the language-switcher
       dropdown — anchored inside the header's stacking context —
       paints on top of the toast. */
    z-index: 2000;
    background-color: transparent;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

header.scrolled {
    background-color: rgba(254, 254, 252, 0.92);
    backdrop-filter: blur(10px);
    border-bottom-color: rgba(10, 10, 10, 0.08);
}

/* Dark header variant — used on pages where the top of the page sits
   over a dark hero video. Reverts to the standard light scrolled style
   once the user starts scrolling. */
.has-hero-overlay header:not(.scrolled) {
    background-color: rgba(10, 10, 10, 0.35);
    backdrop-filter: blur(10px);
    border-bottom-color: transparent;
}

.has-hero-overlay header:not(.scrolled) nav {
    padding-top: 6px;
    padding-bottom: 6px;
}

.has-hero-overlay header:not(.scrolled) .logo,
.has-hero-overlay header:not(.scrolled) nav > ul a {
    color: #ffffff;
}

.has-hero-overlay header:not(.scrolled) .cta-btn {
    background-color: #ffffff;
    color: rgb(10, 10, 10);
}

.has-hero-overlay header:not(.scrolled) .cta-btn-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.has-hero-overlay header:not(.scrolled) .cta-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.has-hero-overlay header:not(.scrolled) .menu-toggle span {
    background-color: #ffffff;
}

/* Smooth transitions between the two states */
header .logo,
header nav > ul a,
header .cta-btn,
header .cta-btn-secondary,
header .menu-toggle span {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

header.scrolled nav {
    padding-top: 6px;
    padding-bottom: 6px;
}

nav {
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
    font-weight: 300;
    color: rgb(10, 10, 10);
    text-decoration: none;
    line-height: 1;
}

.logo .logo-mark {
    display: block;
    height: 24px;
    width: auto;
}

.logo .logo-mark--light {
    display: none;
}

.has-hero-overlay header:not(.scrolled) .logo .logo-mark--dark {
    display: none;
}

.has-hero-overlay header:not(.scrolled) .logo .logo-mark--light {
    display: block;
}

nav > ul {
    display: flex;
    list-style: none;
    gap: 32px;
    flex: 1;
    justify-content: flex-end;
    margin-right: 32px;
}

nav > ul a {
    text-decoration: none;
    color: rgb(10, 10, 10);
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.3s;
}

nav > ul a:hover {
    opacity: 0.6;
}

.cta-btn {
    background-color: rgb(10, 10, 10);
    color: white;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s;
}

.cta-btn:hover {
    opacity: 0.8;
}

.cta-btn-secondary {
    color: rgb(10, 10, 10);
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(10, 10, 10, 0.2);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    margin-right: 8px;
}

.cta-btn-secondary:hover {
    border-color: rgba(10, 10, 10, 0.5);
}

/* Language switcher — globe icon button + dropdown menu.
   Collapses to nothing while only one locale is public (build.js leaves it empty). */
.lang-switcher {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.lang-switcher:empty {
    display: none;
}

.lang-switcher-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: rgb(10, 10, 10);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.lang-switcher-button:hover {
    background-color: rgba(10, 10, 10, 0.06);
}

.lang-switcher-button[aria-expanded="true"] {
    background-color: rgba(10, 10, 10, 0.08);
}

.lang-switcher-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.has-hero-overlay header:not(.scrolled) .lang-switcher-button {
    color: #ffffff;
}

.has-hero-overlay header:not(.scrolled) .lang-switcher-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.has-hero-overlay header:not(.scrolled) .lang-switcher-button[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.16);
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: rgb(254, 254, 252);
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08), 0 2px 6px rgba(10, 10, 10, 0.04);
    z-index: 10;
}

.lang-switcher-menu[hidden] {
    display: none;
}

.lang-switcher-menu li {
    list-style: none;
}

.lang-switcher-link {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(10, 10, 10, 0.7);
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-switcher-link:hover {
    color: rgb(10, 10, 10);
    background-color: rgba(10, 10, 10, 0.04);
}

.lang-switcher-link.is-current {
    color: rgb(10, 10, 10);
    background-color: rgba(10, 10, 10, 0.04);
}

/* Mobile hamburger — hidden on desktop */
.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: rgb(10, 10, 10);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

header.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
header.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}
header.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* LAYOUT */
.container {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 24px;
}

/* HERO */
.hero {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    padding-top: clamp(100px, 17vw, 300px);
    z-index: 2;
    pointer-events: none;
    color: #ffffff;
}

.hero-overlay .container {
    position: relative;
    pointer-events: auto;
}

.hero-overlay h1,
.hero-overlay .subtitle {
    color: #ffffff;
}

/* Delayed fade-in so H1/subtitle don't flash before the video appears */
@keyframes heroTextFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.hero-overlay h1 {
    animation: heroTextFadeIn 0.8s ease-out 0.6s both;
}

.hero-overlay .subtitle {
    animation: heroTextFadeIn 0.8s ease-out 0.8s both;
}

.hero h1 {
    font-family: 'Instrument Serif', serif;
    /* Fluid scaling — 10vw between 88px and 168px.
       Hits 168 at ≥1680px, 120 at 1200px, 88 at 880px. */
    font-size: clamp(88px, 10vw, 168px);
    font-weight: 300;
    letter-spacing: clamp(-3.36px, -0.2vw, -1.76px);
    line-height: clamp(83.6px, 9.5vw, 159.6px);
    margin-bottom: 16px;
}

.hero h1 .line2 {
    display: block;
    margin-left: clamp(100px, 18vw, 300px);
}

.hero .subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    max-width: 460px;
    margin-left: auto;
    margin-top: 40px;
    margin-bottom: 0;
    text-align: right;
    opacity: 1;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.55);
}

.trust-line {
    font-size: 15px;
    line-height: 22px;
    color: rgb(10, 10, 10);
    opacity: 0.8;
    margin-bottom: 48px;
}

/* Customer logo strip — 6×2 grid with hairline divisions,
   logos centered within each cell. Mirrors the .customer-logos-grid
   pattern on the customers page but at the smaller hero-strip scale. */
.trust-strip-bg {
    background-color: rgb(243, 238, 231);
    margin-top: -20px;
    padding: 12px 0 0;
    position: relative;
    z-index: 1;
}

.trust-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-bottom: 0;
}

.trust-logo-card {
    /* Fixed height so the strip doesn't jump as logos load or rotate.
       Tallest per-logo content is 31px (Grön Stad) — 64px gives
       ~16px of effective vertical breathing room above and below
       even at max content height, and a more generous gap for the
       smaller marks. Flex centering handles vertical alignment. */
    height: 64px;
    padding: 0 12px;
    border-right: 1px solid rgba(10, 10, 10, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-logo-card:last-child {
    border-right: none;
}

.trust-logos img {
    height: 20px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 600ms ease;
}

.trust-logos img.trust-logo-fading {
    opacity: 0;
}

/* Per-logo optical tuning — letter weight and mark shape matter
   more than numeric height. Heavy/bold wordmarks (COWI, Brogrund)
   already carry visual weight at small sizes; light/narrow
   wordmarks (AFRY, Credentia) need to be taller to match. Stacked
   or compact marks (NRC Group) need the biggest bump. */
.trust-logos img[alt="NRC Group"] { height: 30px; }
.trust-logos img[alt="AFRY"] { height: 26px; }
.trust-logos img[alt="Credentia"] { height: 13px; }
.trust-logos img[alt="Lindesbergs Fastigheter"] { height: 17px; }
.trust-logos img[alt="Netel"] { height: 16px; }
.trust-logos img[alt="Morberg"] { height: 22px; }
.trust-logos img[alt="EnTek"] { height: 21px; }
.trust-logos img[alt="COWI"] { height: 19px; }
.trust-logos img[alt="Brogrund"] { height: 15px; }
.trust-logos img[alt="Grön Stad"] { height: 31px; }
.trust-logos img[alt="Kungsmontage"] { height: 22px; }
.trust-logos img[alt="Skeppsviken"] { height: 14px; }

.hero-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0px;
    position: relative;
    background-color: rgb(243, 238, 231);
}

/* Homepage-only: dark placeholder + fade-in, plus the overlap offset that
   eats into the header. Subpages keep the beige bg and no negative margin. */
.has-hero-overlay .hero-image,
.has-hero-overlay .hero-image-container {
    background-color: rgb(24, 28, 36);
}

.has-hero-overlay .hero-image {
    animation: heroVideoFadeIn 1.2s ease-out 0.1s both;
}

@keyframes heroVideoFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.hero-image-container {
    position: relative;
    background-color: rgb(243, 238, 231);
    /* Clip scaled-up hero contents (e.g. the home-intro dolly that
       starts the image at scale(1.15) with origin 70% 50%) so they
       don't trigger horizontal page scroll during the animation. */
    overflow: hidden;
}

/* Hero video poster overlay — sits on top of the <video> at full opacity
   so the user sees the still frame immediately, then fades out (revealing
   the now-playing video underneath) when JS detects the 'playing' event.
   The native poster= attribute on the video is kept as a no-JS fallback.
   No explicit z-index: source-order already paints the poster above the
   video (since it comes after in HTML), and skipping z-index keeps the
   poster from punching above .trust-strip-bg (z-index: 1), which sits
   20px into the bottom of the hero on purpose. */
.hero-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.hero-poster.is-hidden {
    opacity: 0;
}

/* Homepage-only: offset the video upward so it overlaps the header area */
.has-hero-overlay .hero-image-container {
    margin-top: -50px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(254, 254, 252, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.play-button:hover {
    background-color: rgba(254, 254, 252, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 24px solid rgb(10, 10, 10);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    margin-left: 6px;
}

/* ACTION VERBS SECTION */
.action-verbs {
    padding: 32px 0 80px;
}

.action-verbs-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 88px;
    font-weight: 300;
    letter-spacing: -1.76px;
    line-height: 83.6px;
    margin-bottom: 32px;
}

.action-verbs-subtitle {
    font-size: 15px;
    line-height: 22px;
    max-width: 700px;
    margin-bottom: 48px;
    opacity: 0.9;
}

.verbs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.verb-card {
    padding: 28px 24px;
    border-right: 1px solid rgba(10, 10, 10, 0.08);
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.verb-card:nth-child(4n) {
    border-right: none;
    padding-right: 0;
}

.verb-card:nth-child(4n+1) {
    padding-left: 0;
}

.verb-card:nth-child(n+5) {
    border-bottom: none;
}

.verb-card h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 12px;
}

.verb-card p {
    font-size: 14px;
    color: rgba(10, 10, 10, 0.6);
    line-height: 20px;
}



/* SERVICES */
.services {
    padding: 0;
    scroll-margin-top: 100px;
}

/* Homepage services — label left, everything else in right column
   (matches .index-quote-layout proportions so the content column aligns
   with the quote image column further down the page) */
.services-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    align-items: start;
}

.services-layout-label {
    padding-top: 20px;
}

.services-layout-content {
    min-width: 0;
}

.services-main-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -1.2px;
    line-height: 64px;
    color: rgb(10, 10, 10);
    margin: 0 0 32px;
    max-width: 900px;
}

.services-intro {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    color: rgb(10, 10, 10);
    opacity: 0.8;
    margin: 0 0 20px;
    max-width: 780px;
}

/* Applied AI block — sits below the merged services intro paragraph
   above. The 44px padding plus the intro's own 20px bottom margin
   leaves ~64px of breathing room before the showcase grid. */
.services-applied-ai {
    padding-top: 44px;
}

.services-applied-ai .showcase-grid {
    margin-bottom: 32px;
}

.services-bg {
    background-color: rgb(243, 238, 231);
    padding: 112px 0 80px;
}

.offset-header {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 64px;
}

.offset-header .platform-label {
    padding-top: 12px;
}

.offset-header .statement-heading + .workforce-subtitle {
    margin-top: 20px;
    margin-bottom: 0;
}

.statement-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.72px;
    line-height: 42px;
}

.offset-content {
    margin-left: calc(400px + 32px);
}

.offset-content .showcase-grid {
    margin-bottom: 32px;
}

.showcase-image--warm {
    background-color: rgba(10, 10, 10, 0.06);
}

/* Canvas animation slot inside a showcase-image container.
   Needs higher specificity than .showcase-image (defined later in the file) */
.showcase-image.showcase-image--anim {
    /* dark plate — matches animations.html default */
    background-color: #0E1522;
    display: block; /* override parent flex so child fills full height */
}

.showcase-animation {
    position: relative;
    width: 100%;
    height: 100%;
    /* Dark-plate colors pulled from animations.html */
    --line: #E8EFFA;
    --rule-inner: rgba(232, 239, 250, 0.22);
}

.showcase-animation canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* FEATURES SECTION */
.features {
    padding: 80px 0;
    scroll-margin-top: 100px;
}

/* Platform section headings (The Assistant, The Workforce) */
/* ============================================================
   PLATFORM SECTION (homepage trailer)
   ------------------------------------------------------------
   Replaced the previous standalone "The Assistant" + "The
   Workforce" sections. Two stacked parts inside one section:
   1. Trailer — 2:1 grid (text left wider, ripple plate right)
   2. Hairline + 2-column subsection introducing Assistant /
      Workforce side by side, no images.
   Typography mirrors the Services section intro on this page;
   the hairline matches the services-page Discovery / Deployment
   / Adoption divider treatment.
   ============================================================ */
.platform-section {
    padding: 96px 0 96px;
    background-color: white;
}

/* Two-column trailer with a fixed 400px text gutter on the left
   and the illustration plate filling the remaining width to the
   container's right edge. 64px gap (the 32px of .index-quote-
   layout felt too tight against the wider plate). */
.platform-trailer {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

/* Stretch the text column to match the illustration's height so the
   .platform-trailer-bottom block (features + body3 + cta) can hug
   the illustration's bottom edge via margin-top: auto, while the
   eyebrow + heading + body1 stay anchored at the top. */
.platform-trailer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.platform-trailer-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.platform-trailer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: auto;
}

.platform-trailer-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -0.96px;
    line-height: 52px;
    color: rgb(10, 10, 10);
    margin: 0 0 28px;
}

.platform-trailer-lead,
.platform-trailer-outro {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(10, 10, 10, 0.8);
    margin: 0 0 16px;
}

.platform-trailer-outro {
    margin-bottom: 32px;
}

/* Three-line check list — same visual register as services-page
   .phase-subsection-list (Phosphor ph-check icon + 14/22 body). */
.platform-trailer-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.platform-trailer-features li {
    font-size: 14px;
    line-height: 22px;
    color: rgba(10, 10, 10, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.platform-trailer-features .platform-feature-check {
    width: 16px;
    height: 16px;
    color: rgba(10, 10, 10, 0.55);
    flex-shrink: 0;
    margin-top: 3px;
}

/* Right-column plate: dark background, 3:2 landscape ratio matching
   the customer-quote-image further down the page. The canvas inside
   is positioned absolutely by .platform-ripple. */
.platform-trailer-illustration {
    position: relative;
    aspect-ratio: 3 / 2;
    background-color: #0E1522;
    border: 1px solid rgba(232, 239, 250, 0.22);
    overflow: hidden;
}

/* The ripple animation reads --line / --rule-inner / --plate from
   the element's computed style (see homepage-ui.js). Matching
   variables to animations.html so the animation renders identically. */
.platform-ripple {
    --plate: #0E1522;
    --line: #E8EFFA;
    --rule-inner: rgba(232, 239, 250, 0.22);
    position: absolute;
    inset: 0;
    color: var(--line);
}

.platform-ripple canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Subsections below the trailer: two equal columns (Assistant /
   Workforce), each with its own hairline above and an internal
   "label gutter on the left, body on the right" layout — same
   pattern the services-page phase-subsection uses. */
.platform-subsections {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.platform-sub {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-top: 32px;
    border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.platform-sub-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.5);
    margin: 0;
    padding-top: 4px;
}

.platform-sub p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(10, 10, 10, 0.8);
    margin: 0;
    max-width: 480px;
}

@media (max-width: 1200px) {
    .platform-trailer-heading {
        font-size: 48px;
        letter-spacing: -0.96px;
        line-height: 52px;
    }
}

@media (max-width: 768px) {
    .platform-section {
        padding: 64px 0;
    }

    .platform-trailer {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .platform-trailer-heading {
        font-size: 40px;
        letter-spacing: -0.8px;
        line-height: 44px;
        margin-bottom: 24px;
    }

    .platform-subsections {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 56px;
    }

    .platform-sub {
        /* Stack label above body on narrow screens — same fallback
           pattern as services-page .phase-subsection on mobile. */
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 28px;
    }

    .platform-sub-label {
        padding-top: 0;
    }
}

.platform-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(10, 10, 10, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    display: block;
}

.platform-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -0.96px;
    line-height: 45.6px;
    margin-bottom: 24px;
}

.features-opening-statement {
    font-size: 15px;
    line-height: 22px;
    max-width: 700px;
    margin-bottom: 32px;
    opacity: 0.9;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.feature-card {
    padding: 28px 24px;
    border-right: 1px solid rgba(10, 10, 10, 0.08);
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 0px;
    transition: all 0.3s;
}

.feature-card:nth-child(3n) {
    border-right: none;
}

.feature-card:nth-child(n+4) {
    border-bottom: none;
}

.feature-card h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 14px;
    line-height: 20px;
    opacity: 0.8;
}

/* SHOWCASE CARDS (Legora-style image + text) */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.showcase-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.showcase-image {
    aspect-ratio: 3 / 4;
    background-color: rgb(243, 243, 241);
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase-image--product img {
    object-fit: contain;
    padding: 24px;
}

.showcase-card h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 8px;
}

.showcase-card p {
    font-size: 14px;
    line-height: 20px;
    opacity: 0.8;
}

/* IMAGE CARDS SECTION */
.image-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 80px 0;
}

.image-card {
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    background-color: #e0e0e0;
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px;
}

.image-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.8), transparent);
    padding: 32px;
    color: white;
}

.image-card-overlay h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 24px;
    font-weight: 300;
}

/* WORKFORCE SECTION */
.workforce {
    padding: 80px 0;
}

.workforce-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 88px;
    font-weight: 300;
    letter-spacing: -1.76px;
    line-height: 83.6px;
    margin-bottom: 32px;
}

/* Workforce heading no longer used on homepage — kept for legacy/reference */

.workforce-subtitle {
    font-size: 15px;
    line-height: 22px;
    max-width: 700px;
    margin-bottom: 48px;
    opacity: 0.9;
}

/* USE CASES SECTION */
.use-cases {
    padding: 80px 0;
    scroll-margin-top: 100px;
}

.use-cases .platform-heading {
    margin-bottom: 64px;
}

.section-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 32px;
}

/* CUSTOMER QUOTE (shared) */
.customer-quote {
    background-color: rgb(243, 232, 215);
    padding: 80px 0;
}

/* Homepage instance — no beige band, quote sits on the page bg.
   Tighter top padding so it sits closer to the section above. */
#customers.customer-quote {
    background-color: transparent;
    padding-top: 32px;
}

.customer-quote .platform-label {
    margin-bottom: 32px;
}

.customer-quote .quote-mark {
    font-family: 'Instrument Serif', serif;
    font-size: 64px;
    font-weight: 300;
    line-height: 0.8;
    color: rgb(10, 10, 10);
    display: block;
    margin-bottom: 8px;
}

.quote-text {
    font-family: 'Instrument Serif', serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 44px;
    color: rgb(10, 10, 10);
}

.quote-attribution {
    margin-top: 16px;
}

.quote-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgb(10, 10, 10);
}

.index-quote-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 32px;
}

.index-quote-block .quote-name {
    font-weight: 400;
}

.index-quote-block .case-link {
    margin-top: 32px;
    display: inline-block;
}

.index-quote-image {
    overflow: hidden;
}

.index-quote-image img,
.index-quote-image video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

/* CTA STRIP */
.cta-strip {
    padding: 100px 0;
    text-align: center;
}

.cta-strip .section-heading {
    margin-bottom: 16px;
}

.cta-strip-text {
    font-size: 15px;
    line-height: 22px;
    max-width: 700px;
    margin: 0 auto 32px;
    opacity: 0.8;
}

.section-divider {
    border: none;
    border-top: 1px solid rgba(10, 10, 10, 0.1);
    margin: 48px 0 0;
}

.role-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.role-pill {
    padding: 6px 16px;
    border: 1px solid rgba(10, 10, 10, 0.2);
    background-color: transparent;
    color: rgb(10, 10, 10);
    border-radius: 0px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.role-pill:hover {
    border-color: rgba(10, 10, 10, 0.4);
}

.role-pill.active {
    background-color: rgb(10, 10, 10);
    color: white;
    border-color: rgb(10, 10, 10);
}

.use-case-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-left: 1px solid rgba(10, 10, 10, 0.08);
}

.use-case-card {
    padding: 28px 24px;
    background: none;
    border: none;
    border-right: 1px solid rgba(10, 10, 10, 0.08);
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 0;
}

/* Top line only spans the cards that actually exist in the first row */
.use-case-card:nth-child(-n+4) {
    border-top: 1px solid rgba(10, 10, 10, 0.08);
}

/* Category anchor card — no background, centered content */
.use-case-card--category {
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.use-case-card--category .use-case-card-category-icon {
    font-size: 28px;
    color: rgba(10, 10, 10, 0.55);
    line-height: 1;
}

.use-case-card--category h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: -0.52px;
    line-height: 30px;
    color: rgb(10, 10, 10);
    margin: 0;
}

.use-case-card.hidden {
    display: none;
}

.use-case-card.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.use-case-card h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 8px;
}

.use-case-card p {
    font-size: 14px;
    line-height: 20px;
    opacity: 0.8;
    margin-bottom: 12px;
}

.use-case-roles {
    font-size: 13px;
    color: rgba(10, 10, 10, 0.4);
}

.use-case-role-tag {
    display: inline-block;
    margin-right: 8px;
}

/* CUSTOMERS SECTION */
.customers {
    padding: 80px 0;
    scroll-margin-top: 100px;
}

.featured-case {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    margin-bottom: 48px;
    overflow: hidden;
    border-radius: 0px;
    background-color: #e0e0e0;
}

.featured-case img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px;
}

.featured-case-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.3));
    display: flex;
    align-items: flex-end;
    padding: 40px;
}

.featured-case-text {
    color: white;
    font-family: 'Instrument Serif', serif;
    font-size: 36px;
    font-weight: 300;
    max-width: 800px;
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.case-card {
    border: 1px solid rgba(10, 10, 10, 0.1);
    padding: 24px;
    border-radius: 0px;
}

.case-card h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 12px;
}

.case-card p {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 20px;
}

.case-link {
    color: rgb(10, 10, 10);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s;
}

.case-link:hover {
    opacity: 0.6;
}

/* ENTERPRISE SECTION */
.enterprise {
    padding: 80px 0;
    text-align: center;
}

.enterprise-text {
    max-width: 700px;
    margin: 0 auto 48px;
}

.enterprise-text p {
    font-size: 15px;
    line-height: 22px;
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.badge {
    font-size: 13px;
    font-weight: 500;
    color: rgb(10, 10, 10);
}

/* NEWS SECTION */
.news {
    padding: 80px 0;
}

.news-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.1);
    align-items: start;
}

.news-tag-row {
    margin-top: 4px;
}

.news-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
}

.news-tag--product {
    background-color: rgba(0, 110, 200, 0.08);
    color: rgb(20, 80, 140);
}

.news-tag--partnership {
    background-color: rgba(52, 130, 80, 0.10);
    color: rgb(38, 100, 60);
}

.news-tag--growth {
    background-color: rgba(190, 140, 0, 0.12);
    color: rgb(135, 95, 0);
}

.news-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 720px;
}

.news-body {
    font-size: 15px;
    line-height: 22px;
    color: rgba(10, 10, 10, 0.7);
    margin: 0;
}

.news-item:last-child {
    border-bottom: none;
}

.news-date {
    font-size: 13px;
    font-weight: 500;
    color: rgb(10, 10, 10);
    opacity: 0.7;
}

.news-title {
    font-size: 18px;
    font-weight: 500;
    color: rgb(10, 10, 10);
}

/* FOOTER */
footer {
    background-color: rgb(10, 10, 10);
    color: white;
    margin-top: 80px;
}

.footer-intro {
    padding: 64px 0 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-intro p {
    font-size: 15px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
}

.footer-nav {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-nav-links a {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-nav-links a:hover {
    color: white;
}

.footer-dot {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

.footer-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-link {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link:hover {
    color: white;
}

footer .cta-btn {
    background-color: white;
    color: rgb(10, 10, 10);
}

footer .cta-btn:hover {
    opacity: 0.85;
}

.footer-bottom {
    padding: 48px 0 32px;
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Instrument Serif', serif;
    font-size: 18px;
    font-weight: 300;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
}

.footer-logo img {
    display: block;
    height: 24px;
    width: auto;
}

.footer-tagline {
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom-right a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-bottom-right a:hover {
    color: white;
}

/* FLOATING AI ASSISTANT */
.ai-assistant {
    /* Hidden until the AI assistant feature is built out. Markup is kept
       in src/index.html so we can re-enable by removing this display:none. */
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: calc(100% - 48px);
    max-width: 600px;
}

.assistant-input-container {
    position: relative;
    background-color: #ffffff;
    border: 1px solid rgba(10, 10, 10, 0.15);
    border-radius: 0px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 52px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    gap: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@keyframes glowDrift {
    0% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 0.8; }
    33% { transform: translateX(-45%) scale(1.1) rotate(2deg); opacity: 1; }
    66% { transform: translateX(-55%) scale(0.95) rotate(-2deg); opacity: 0.7; }
    100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 0.8; }
}

.assistant-input-container::before {
    content: '';
    position: absolute;
    bottom: -90px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(255, 120, 50, 0.22) 0%, rgba(200, 60, 220, 0.18) 40%, rgba(60, 130, 255, 0.14) 70%, transparent 100%);
    filter: blur(50px);
    pointer-events: none;
    z-index: -1;
    animation: glowDrift 8s ease-in-out infinite;
}

.assistant-input-container:hover {
    border-color: rgba(10, 10, 10, 0.3);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.16);
}

.assistant-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assistant-icon svg {
    width: 18px;
    height: 18px;
    fill: rgb(10, 10, 10);
    stroke: none;
}

.assistant-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: rgb(10, 10, 10);
    outline: none;
}

.assistant-input::placeholder {
    color: rgba(10, 10, 10, 0.4);
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .features-grid,
    .case-grid,
    .verbs-grid,
    .showcase-grid {
        grid-template-columns: 1fr;
    }

    .use-case-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reset 4-col top-border rule; apply only to first row in 2-col layout */
    .use-case-card:nth-child(-n+4) {
        border-top: none;
    }
    .use-case-card:nth-child(-n+2) {
        border-top: 1px solid rgba(10, 10, 10, 0.08);
    }

    /* Trust strip stays 1 row on tablet — 6 slots, tighter padding */
    .trust-logo-card {
        padding: 20px 8px;
    }

    .feature-card {
        border-right: none;
        border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    }

    .feature-card:last-child {
        border-bottom: none;
    }

    .showcase-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .offset-header {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .offset-content {
        margin-left: 0;
    }

    .statement-heading {
        font-size: 32px;
        line-height: 38px;
    }

    .action-verbs-heading,
    .workforce-heading {
        font-size: 64px;
        letter-spacing: -1.28px;
        line-height: 60.8px;
    }

    .platform-heading {
        font-size: 40px;
        letter-spacing: -0.8px;
        line-height: 38px;
    }

    .services-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .services-layout-label {
        padding-top: 0;
    }

    .services-main-heading {
        font-size: 48px;
        line-height: 52px;
        letter-spacing: -0.96px;
    }

}

@media (max-width: 768px) {
    .index-quote-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Trust strip drops to 3 columns on mobile — 6 slots = 2 rows.
       Smaller logos sized at ~75% of desktop. Cards override the
       desktop 64px height to a tighter 56px for the smaller marks
       (tallest mobile logo: 23px → ~16px effective breathing room
       above and below). Each row's height comes from the cards,
       not from grid-auto-rows, so the two are always in sync. */
    .trust-logos {
        grid-template-columns: repeat(3, 1fr);
    }

    .trust-logo-card {
        height: 56px;
        padding: 0 6px;
        border-right: 1px solid rgba(10, 10, 10, 0.08);
    }

    .trust-logo-card:nth-child(3n) {
        border-right: none;
    }

    .trust-logo-card:nth-child(-n+3) {
        border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    }

    /* Scaled-down logo heights for mobile (roughly 75% of desktop) */
    .trust-logos img[alt="NRC Group"] { height: 22px; }
    .trust-logos img[alt="AFRY"] { height: 19px; }
    .trust-logos img[alt="Credentia"] { height: 10px; }
    .trust-logos img[alt="Lindesbergs Fastigheter"] { height: 13px; }
    .trust-logos img[alt="Netel"] { height: 12px; }
    .trust-logos img[alt="Morberg"] { height: 17px; }
    .trust-logos img[alt="EnTek"] { height: 16px; }
    .trust-logos img[alt="COWI"] { height: 14px; }
    .trust-logos img[alt="Brogrund"] { height: 11px; }
    .trust-logos img[alt="Grön Stad"] { height: 23px; }
    .trust-logos img[alt="Kungsmontage"] { height: 17px; }
    .trust-logos img[alt="Skeppsviken"] { height: 10px; }

    /* ---------- Mobile sticky header ---------- */
    /*
       Design:
       - Bar (logo + hamburger/X) stays pinned at top, never changes size.
       - Full-screen panel backdrop is a pseudo-element on the header that
         fades in/out independently of the bar.
       - Nav items + CTAs are position:fixed relative to the viewport.

       CRITICAL: header itself has NO containing-block-creating properties
       (no backdrop-filter, no transform, no filter). Those would reparent
       our position:fixed descendants to the header's tiny bar box — which
       is what caused the CTAs to show at the top and the backdrop to clip.
       The bar's blurred glass effect is on `nav` instead.
    */

    header {
        background-color: transparent;
        backdrop-filter: none;
        border-bottom-color: transparent;
    }

    /* Override desktop scrolled rule so it doesn't re-introduce
       backdrop-filter on the header when the user scrolls. */
    header.scrolled {
        background-color: transparent;
        backdrop-filter: none;
        border-bottom-color: transparent;
    }

    /* Full-screen panel backdrop — fades in on menu-open.
       z-index: -1 keeps it behind the logo/nav (positioned pseudo-elements
       would otherwise paint above non-positioned descendants).
       Close has a small delay so the content has time to fade out first. */
    header::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(254, 254, 252);
        opacity: 0;
        pointer-events: none;
        z-index: -1;
        transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s;
    }

    header.menu-open::before {
        opacity: 1;
        transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
    }

    /* Bar glass effect lives on nav — safe here because nav has no
       position:fixed descendants that need viewport anchoring
       (the ul and CTAs are lifted out via their own position:fixed rules,
       and the containing-block jump only matters if an ancestor creates
       one; fixed positioning looks up to the viewport past nav because
       nav itself doesn't use transform/filter/backdrop-filter... wait —
       backdrop-filter DOES create one. So we'll use a semi-opaque bg
       without blur on mobile. Still looks clean. */
    nav {
        padding: 14px 16px;
        align-items: center;
        background-color: rgba(254, 254, 252, 0);
        border-bottom: 1px solid transparent;
        transition:
            background-color 0.3s ease,
            border-bottom-color 0.3s ease;
    }

    header.scrolled nav {
        background-color: rgba(254, 254, 252, 0.96);
        border-bottom-color: rgba(10, 10, 10, 0.06);
    }

    /* When menu open, bar matches the panel (opaque white, no border) */
    header.menu-open nav,
    header.scrolled.menu-open nav {
        background-color: rgb(254, 254, 252);
        border-bottom-color: transparent;
    }

    /* Menu toggle pinned right — occupies the same spot whether menu is
       open or closed, so the X replaces the hamburger in place. */
    .menu-toggle {
        display: flex;
        margin-left: 4px;
        position: relative;
        z-index: 2;
    }

    /* Globe sits just left of the hamburger on mobile. margin-left:auto
       absorbs the space between logo and the (switcher + toggle) cluster. */
    .lang-switcher {
        margin-left: auto;
        margin-right: 0;
        position: relative;
        z-index: 2;
    }

    /* Nav ul: fixed to viewport (not header), always rendered but
       hidden via visibility + per-item opacity. */
    nav > ul {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        margin: 0;
        padding: 24px 24px 0;
        gap: 0;
        list-style: none;
        pointer-events: none;
        visibility: hidden;
        transition: visibility 0s linear 0.5s;
    }

    header.menu-open nav > ul {
        pointer-events: auto;
        visibility: visible;
        transition: visibility 0s linear 0s;
    }

    nav > ul li {
        border-bottom: 1px solid rgba(10, 10, 10, 0.08);
        opacity: 0;
        transform: translateY(16px);
        /* Exit: quick fade so items are gone before the backdrop begins fading */
        transition:
            opacity 0.22s ease,
            transform 0.22s ease;
    }

    header.menu-open nav > ul li {
        opacity: 1;
        transform: translateY(0);
    }

    header.menu-open nav > ul li:nth-child(1) {
        transition:
            opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s,
            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s;
    }
    header.menu-open nav > ul li:nth-child(2) {
        transition:
            opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s,
            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s;
    }
    header.menu-open nav > ul li:nth-child(3) {
        transition:
            opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.20s,
            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.20s;
    }
    header.menu-open nav > ul li:nth-child(4) {
        transition:
            opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.26s,
            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.26s;
    }
    header.menu-open nav > ul li:nth-child(5) {
        transition:
            opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s,
            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s;
    }

    nav > ul li a {
        display: block;
        padding: 22px 0;
        font-family: 'Instrument Serif', serif;
        font-size: 40px;
        font-weight: 300;
        letter-spacing: -0.8px;
        line-height: 44px;
        color: rgb(10, 10, 10);
    }

    /* CTA row — fixed to viewport, Contact + Book demo share a single row. */
    header .cta-btn-secondary,
    header .cta-btn {
        position: fixed;
        bottom: 32px;
        width: calc(50% - 20px);
        text-align: center;
        padding: 14px 16px;
        font-size: 14px;
        margin: 0;
        opacity: 0;
        transform: translateY(16px);
        pointer-events: none;
        visibility: hidden;
        /* Exit: quick fade, matches nav items */
        transition:
            opacity 0.22s ease,
            transform 0.22s ease,
            visibility 0s linear 0.5s;
    }

    header .cta-btn-secondary {
        left: 16px;
    }

    header .cta-btn {
        right: 16px;
    }

    header.menu-open .cta-btn-secondary,
    header.menu-open .cta-btn {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
        transition:
            opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s,
            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s,
            visibility 0s linear 0s;
    }

    /* Scroll lock when menu is open */
    body.menu-locked {
        overflow: hidden;
    }

    /* Scrolled tightening doesn't compress the mobile bar extra */
    header.scrolled nav {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* When menu is open while scrolled, preserve the scrolled bar height
       so the logo doesn't jump vertically when the menu opens. */
    header.scrolled.menu-open nav {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero {
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column-reverse;
    }

    .hero-overlay {
        position: static;
        padding-top: 140px;
        padding-bottom: 96px;
        color: inherit;
    }

    .logo {
        font-size: 22px;
    }

    .hero-overlay h1,
    .hero-overlay .subtitle {
        color: inherit;
    }

    /* Mobile hero is stacked (video below text), so the dark-header variant
       isn't needed — use the standard light header at all times. */
    .has-hero-overlay header:not(.scrolled) {
        background-color: rgba(254, 254, 252, 0);
        backdrop-filter: none;
        border-bottom-color: transparent;
    }

    .has-hero-overlay header:not(.scrolled) .logo,
    .has-hero-overlay header:not(.scrolled) nav > ul a {
        color: rgb(10, 10, 10);
    }

    .has-hero-overlay header:not(.scrolled) .logo .logo-mark--dark {
        display: block;
    }

    .has-hero-overlay header:not(.scrolled) .logo .logo-mark--light {
        display: none;
    }

    .has-hero-overlay header:not(.scrolled) .cta-btn {
        background-color: rgb(10, 10, 10);
        color: white;
    }

    .has-hero-overlay header:not(.scrolled) .cta-btn-secondary {
        color: rgb(10, 10, 10);
        border-color: rgba(10, 10, 10, 0.15);
    }

    .has-hero-overlay header:not(.scrolled) .menu-toggle span {
        background-color: rgb(10, 10, 10);
    }

    /* Mobile pre-scroll hero: flip the language-switcher icon to dark
       so it stays visible against the lighter mobile hero crop. Mirrors
       the menu-toggle override above; on desktop the globe stays white. */
    .has-hero-overlay header:not(.scrolled) .lang-switcher-button {
        color: rgb(10, 10, 10);
    }

    .has-hero-overlay header:not(.scrolled) .lang-switcher-button:hover {
        background-color: rgba(10, 10, 10, 0.06);
    }

    .has-hero-overlay header:not(.scrolled) .lang-switcher-button[aria-expanded="true"] {
        background-color: rgba(10, 10, 10, 0.08);
    }

    /* Reset desktop negative-margin overlaps on mobile where sections
       are stacked — eliminates white gaps and weird overlaps. */
    .hero-image-container {
        margin-top: 0;
    }

    .trust-strip-bg {
        margin-top: 0;
        padding-top: 20px;
    }

    .services-bg {
        margin-top: 0;
    }

    .hero h1 {
        font-size: 56px;
        letter-spacing: -1.12px;
        line-height: 53px;
        margin-bottom: 32px;
    }

    .hero h1 .line2 {
        margin-left: 0;
    }

    .hero .subtitle {
        font-size: 14px;
        line-height: 20px;
        max-width: none;
        margin-left: 0;
        margin-top: 24px;
        text-align: left;
        text-shadow: none;
        opacity: 0.8;
    }

    /* Body copy across the page — match the hero subtitle */
    body,
    .trust-line,
    .features-opening-statement,
    .workforce-subtitle,
    .verb-line,
    .enterprise-text p,
    .cta-strip-text,
    .footer-intro p {
        font-size: 14px;
        line-height: 20px;
    }

    /* Verb strip sits at body-copy weight/opacity on mobile */
    .verb-line {
        opacity: 0.8;
        font-weight: 400;
        letter-spacing: 0;
    }

    .action-verbs-heading,
    .workforce-heading {
        font-size: 48px;
        letter-spacing: -0.96px;
        line-height: 45.6px;
    }

    .platform-heading {
        font-size: 32px;
        letter-spacing: -0.64px;
        line-height: 30.4px;
    }

    .services-main-heading {
        font-size: 34px;
        line-height: 38px;
        letter-spacing: -0.68px;
    }

    .services-applied-ai {
        padding-top: 40px;
    }

    .action-verbs-subtitle,
    .workforce-subtitle {
        font-size: 14px;
    }

    .features-grid,
    .use-case-grid,
    .case-grid,
    .image-cards,
    .verbs-grid,
    .showcase-grid {
        grid-template-columns: 1fr;
    }

    /* 4-card grid keeps 2x2 on mobile — a bit more breathing room between rows */
    .showcase-grid--4 {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }

    /* Tighter outer page margins on mobile */
    .container {
        padding: 0 16px;
    }

    /* 1-col: only the very first card carries a top border */
    .use-case-card:nth-child(-n+4),
    .use-case-card:nth-child(-n+2) {
        border-top: none;
    }
    .use-case-card:first-child {
        border-top: 1px solid rgba(10, 10, 10, 0.08);
    }

    .section-heading {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 32px;
    }

    .role-filters {
        justify-content: flex-start;
    }

    .news-item {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .featured-case-overlay {
        padding: 32px;
    }

    .featured-case-text {
        font-size: 24px;
    }

    .ai-assistant {
        width: calc(100% - 32px);
        max-width: none;
        left: 16px;
        transform: none;
    }

    .footer-nav .container {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .footer-bottom .container {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }

    .verb-card {
        padding-left: 0;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    }

    .verb-card:last-child {
        border-bottom: none;
    }
}

/* SUBSECTION HEADING */
.subsection-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 24px;
    font-weight: 300;
    margin-top: 64px;
    margin-bottom: 32px;
}

/* VERB LINE (compact action verbs) */
.verb-line {
    font-size: 15px;
    line-height: 22px;
    color: rgb(10, 10, 10);
    opacity: 0.9;
    margin-bottom: 48px;
}

/* SCROLL FADE-IN */
.fade-section {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.fade-section.visible {
    opacity: 1;
}

/* ==========================================================================
   NEWS TOAST — Microsoft for Startups partner announcement.
   Fixed-top, centered, appears after ~2s, auto-dismisses after ~5s.
   Colored via a subtle tricolor gradient on a light base; the
   four-square Microsoft mark carries the brand colors.
   ========================================================================== */
.news-toast {
    position: fixed;
    top: 88px;
    right: 24px;
    transform: translateX(calc(100% + 40px));
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.news-toast[hidden] {
    display: none;
}

.news-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.news-toast-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 20px;
    background: #ffffff;
    background-image:
        linear-gradient(90deg,
            rgba(242, 80, 34, 0.08) 0%,
            rgba(127, 186, 0, 0.08) 33%,
            rgba(0, 164, 239, 0.08) 66%,
            rgba(255, 185, 0, 0.08) 100%);
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(10, 10, 10, 0.12),
                0 1px 3px rgba(10, 10, 10, 0.06);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1;
    color: rgb(10, 10, 10);
    white-space: nowrap;
}

.news-toast-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin: 0 2px;
}

.news-toast-logo svg {
    display: block;
}

.news-toast-kicker {
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.55);
    font-weight: 500;
    padding-right: 8px;
    border-right: 1px solid rgba(10, 10, 10, 0.1);
    line-height: 1;
}

.news-toast-text {
    font-size: 14px;
    color: rgb(10, 10, 10);
}

.news-toast-text strong {
    font-weight: 400;
    color: rgb(10, 10, 10);
}

.news-toast-close {
    margin-left: 4px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: rgba(10, 10, 10, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: color 160ms ease, background-color 160ms ease;
}

.news-toast-close:hover {
    color: rgba(10, 10, 10, 0.85);
    background-color: rgba(10, 10, 10, 0.05);
}

@media (max-width: 768px) {
    .news-toast {
        top: 72px;
        right: 12px;
        left: auto;
        transform: translateX(calc(100% + 24px));
        max-width: calc(100vw - 24px);
    }
    .news-toast.is-visible {
        transform: translateX(0);
    }
    .news-toast-inner {
        padding: 9px 14px 9px 14px;
        gap: 8px;
        white-space: normal;
    }
    .news-toast-text {
        font-size: 13px;
        line-height: 1.3;
    }
}

/* ---------- 404 ---------- */

.notfound-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgb(254, 254, 252);
    color: rgb(10, 10, 10);
}

.notfound-header {
    padding: 24px;
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
}

.notfound-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px 96px;
}

.notfound-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.55);
    margin: 0 0 24px;
}

.notfound-heading {
    font-family: 'Instrument Serif', serif;
    font-size: 88px;
    font-weight: 300;
    letter-spacing: -1.76px;
    line-height: 88px;
    margin: 0 0 24px;
}

.notfound-lead {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(10, 10, 10, 0.7);
    margin: 0 0 40px;
    max-width: 520px;
}

.notfound-back {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgb(10, 10, 10);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.notfound-back:hover {
    opacity: 0.6;
}

@media (max-width: 768px) {
    .notfound-heading {
        font-size: 56px;
        line-height: 56px;
        letter-spacing: -1.12px;
    }

    .notfound-lead {
        font-size: 16px;
    }
}

/* ============================================================
   Self-hosted Instrument Serif tracks slightly tighter than the
   Google-served version we used before. Larger headings already
   carry per-element negative tracking (-1.2px to -2.4px on
   60-120px sizes) and look fine. Smaller serif text gets a
   small positive tracking nudge here — incrementally more as
   font-size decreases — to keep it readable.
   ============================================================ */

/* ~32px tier — light nudge */
.section-heading {
    letter-spacing: 0.1px;
}

/* ~22-28px tier — moderate nudge. 22px is the global floor for
   ACTUAL HEADINGS (card titles, accordion triggers, role names) —
   anything smaller reads compressed in the self-hosted Instrument
   Serif. Letter-spacing 0.25px gives a subtle breath. */
.image-card-overlay h3,
.quote-text,
.subsection-heading,
.beyond-example-heading,
.security-tile h3,
.use-case-card--category h3,
.workforce-grid-card-title,
.showcase-card h3,
.bring-item h3,
.verb-card h3,
.feature-card h3,
.use-case-card h3,
.case-card h3,
.agents-role-name,
.accordion-trigger {
    letter-spacing: 0.25px;
}

/* Heading elements that need an explicit font-size bump from their
   per-element default (18px) up to the 22px global floor. */
.showcase-card h3,
.verb-card h3,
.feature-card h3,
.use-case-card h3,
.case-card h3,
.agents-role-name,
.accordion-trigger {
    font-size: 22px;
}

/* ~18-19px tier — small text inside dense UI (logos, agent-name labels
   inside the illustration mockups). These don't need the 22px bump;
   they live in compact contexts where 19px works. Most generous
   letter-spacing since they're the smallest. */
.agent-name,
.logo,
.footer-logo {
    font-size: 19px;
    letter-spacing: 0.5px;
}
.security-builton-list {
    letter-spacing: 0.5px;
}

/* Logo wordmark — use Georgia (a wider, system-installed serif) instead
   of Instrument Serif for the "Yesper" text. The site was unknowingly
   falling back to the system serif (Times/Georgia) the whole time
   pre-self-hosting since Google's CSS never actually shipped
   Instrument Serif for the wght@300 request. Headings keep
   Instrument Serif; logo restores the wider feel it originally had. */
.logo .logo-text,
.footer-logo .logo-text {
    font-family: 'Georgia', 'Times New Roman', serif;
    letter-spacing: 0;
}


/* ===== illustrations.css ===== */
/* ============================================ */
/* YESPER UI ILLUSTRATIONS                       */
/* ============================================ */
/* Internal canvas is always 600×600. The wrapper
   is responsive and the inner illustration is
   scaled via JavaScript transform to fit. */

.scale-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.scale-wrapper > .illustration {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  /* scale set via JS */
}

.illustration {
  width: 600px;
  height: 600px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================ */
/* BACKGROUNDS                                   */
/* ============================================ */

.ill-bg-sand {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(255, 242, 226, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(235, 212, 188, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(210, 180, 150, 0.35) 0%, transparent 65%),
    #F4EADF;
}
.ill-bg-warm-grey {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(225, 228, 232, 0.6) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(210, 195, 180, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(165, 155, 145, 0.4) 0%, transparent 65%),
    #D8D4CC;
}
.ill-bg-cream {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(255, 248, 225, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(240, 200, 180, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(205, 170, 120, 0.4) 0%, transparent 65%),
    #EFE8D9;
}
.ill-bg-sage {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(236, 248, 244, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(200, 230, 220, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(170, 210, 200, 0.4) 0%, transparent 65%),
    #E1F0EB;
}
.ill-bg-slate {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(220, 232, 245, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(185, 195, 212, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(155, 170, 190, 0.45) 0%, transparent 65%),
    #C8CFD8;
}

/* Grain texture */
.illustration::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* ============================================ */
/* UI CONTENT CONTAINER                          */
/* ============================================ */

.ui-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px;
  box-sizing: border-box;
}

/* ============================================ */
/* CARDS                                         */
/* ============================================ */

.ui-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 8px rgba(255, 255, 255, 0.18),
    0 14px 50px rgba(30, 20, 10, 0.09),
    0 4px 14px rgba(30, 20, 10, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  color: #1A1A1A;
}
.ui-card-stacked {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 255, 255, 0.2),
    0 10px 30px rgba(30, 20, 10, 0.08),
    0 3px 10px rgba(30, 20, 10, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  color: #1A1A1A;
}

/* ============================================ */
/* 1. LIBRARIAN                                  */
/* ============================================ */

.ill-librarian .ui-content {
  padding: 50px;
}
.ill-librarian .librarian-card {
  width: 100%;
  max-width: 460px;
  padding: 30px 32px 28px 32px;
}
.ill-librarian .librarian-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.ill-librarian .librarian-icon {
  width: 42px;
  height: 50px;
  background: #E85D4F;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.ill-librarian .librarian-meta {
  flex: 1;
  min-width: 0;
}
.ill-librarian .librarian-filename {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ill-librarian .librarian-caption {
  font-size: 14px;
  color: #8B8B8B;
}
.ill-librarian .librarian-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 22px 0;
}
.ill-librarian .librarian-body {
  font-size: 18px;
  line-height: 1.6;
  color: #1A1A1A;
  margin-bottom: 0;
}
.ill-librarian .librarian-body .highlight {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 10%,
    #E5D4F0 10%,
    #E5D4F0 95%,
    transparent 95%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Stage wrapper — relative anchor for the breakout button */
.lib-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  justify-content: center;
}
/* Detached "View in document" pill — floats past the bottom-right of the main card */
.ill-librarian .librarian-breakout {
  bottom: -28px;
  right: -10px;
}
.ill-librarian .librarian-btn {
  background: #FFFFFF;
  color: #1A1A1A;
  padding: 15px 24px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 20px 40px rgba(30, 20, 10, 0.14),
    0 4px 10px rgba(30, 20, 10, 0.06);
  white-space: nowrap;
}
.ill-librarian .librarian-btn-icon {
  width: 18px;
  height: 18px;
  color: #8B8B8B;
  flex-shrink: 0;
}

/* ============================================ */
/* 2. ROUTINES                                   */
/* ============================================ */

.ill-routines .routines-ui {
  justify-content: flex-start;
  align-items: center;
  padding: 80px 0 80px 80px;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
.ill-routines .routines-wrapper {
  width: 108%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ill-routines .routines-card {
  padding: 22px 24px;
  width: 100%;
}
.ill-routines .routines-step-label {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 14px;
}
.ill-routines .routines-pills {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}
.ill-routines .routines-pill {
  background: rgba(245, 241, 234, 0.85);
  border: 1px solid rgba(232, 226, 212, 0.8);
  padding: 10px 15px;
  border-radius: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.ill-routines .routines-play-icon {
  width: 22px;
  height: 22px;
  background: #1A1A1A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ill-routines .routines-play-icon::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid white;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-left: 2px;
}
.ill-routines .routines-template-icon {
  width: 22px;
  height: 22px;
  background: #E8A460;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ill-routines .routines-template-icon::before {
  content: '';
  width: 12px;
  height: 11px;
  background:
    linear-gradient(white, white) top/100% 1.5px no-repeat,
    linear-gradient(white, white) bottom/100% 1.5px no-repeat,
    linear-gradient(white, white) left/1.5px 100% no-repeat,
    linear-gradient(white, white) right/1.5px 100% no-repeat,
    linear-gradient(white, white) center/100% 1.5px no-repeat;
}
.ill-routines .routines-text {
  font-size: 16px;
  line-height: 1.6;
  color: #1A1A1A;
}
.ill-routines .routines-step-ref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #E5D4F0;
  color: #6B4A9E;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  margin: 0 2px;
  vertical-align: baseline;
}
.ill-routines .routines-step-ref-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px dashed #6B4A9E;
}

/* ============================================ */
/* 3. ORGANIZATIONAL MEMORY                      */
/* ============================================ */

.ill-memory .memory-card {
  width: 100%;
  max-width: 440px;
  padding: 30px 30px;
}
.ill-memory .memory-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ill-memory .memory-icon {
  width: 26px;
  height: 26px;
  background: #F0EBF8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ill-memory .memory-icon svg {
  width: 15px;
  height: 15px;
}
.ill-memory .memory-label {
  font-size: 15px;
  color: #4A4A4A;
  font-weight: 600;
}
.ill-memory .memory-project {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 22px;
  line-height: 1.25;
}
.ill-memory .memory-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin-bottom: 22px;
}
.ill-memory .memory-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}
.ill-memory .memory-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ill-memory .memory-section-label {
  font-size: 12px;
  color: #8B8B8B;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ill-memory .memory-section-body {
  font-size: 17px;
  color: #1A1A1A;
  font-weight: 500;
  line-height: 1.3;
}
.ill-memory .memory-footer {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  color: #8B8B8B;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ill-memory .memory-footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4A8A5F;
}
/* Org-memory "noted" breakout: a remembered rule from the org level */
.ill-memory .mem-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: center;
}
.ill-memory .mem-noted {
  bottom: -32px;
  right: -30px;
  width: 282px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 22px 44px rgba(30, 20, 10, 0.16);
}
.ill-memory .mem-noted-tag {
  font-size: 14px;
  color: #4A4A4A;
  font-weight: 600;
  margin-bottom: 6px;
}
.ill-memory .mem-noted-body {
  font-size: 16px;
  color: #1A1A1A;
  font-weight: 500;
  line-height: 1.35;
}

/* ============================================ */
/* PLACEHOLDER ILLUSTRATIONS                     */
/* ============================================ */
/* Same 600×600 structure but with no UI inside.
   Used for the 5 features we haven't designed
   yet. They still participate in scaling but
   have no JS animation attached. */

.ill-placeholder .ui-content::after {
  content: 'Coming soon';
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
  letter-spacing: 0.3px;
}

/* ============================================ */
/* ANIMATIONS                                    */
/* ============================================ */

.animate .librarian-card {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.animate .librarian-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .librarian-body .highlight {
  background-size: 0% 100%;
  transition: background-size 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate .librarian-body .highlight.sweep {
  background-size: 100% 100%;
}
.animate .librarian-breakout {
  opacity: 0;
  transform: translate(-18px, -18px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .librarian-breakout.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.animate .routines-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.animate .routines-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate .memory-section {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate .memory-section.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate .memory-footer {
  opacity: 0;
  transition: opacity 0.7s ease-out;
}
.animate .memory-footer.visible {
  opacity: 1;
}
.animate .ill-memory .mem-noted {
  opacity: 0;
  transform: translate(10px, 16px) scale(0.96);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .ill-memory .mem-noted.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.animate .memory-footer-dot {
  animation: memory-pulse 2.4s ease-in-out infinite;
}
@keyframes memory-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}

/* ============================================ */
/* SHARED — query card pattern                   */
/* (used by Multi-source + Domain knowledge)     */
/* ============================================ */
.query-card {
  width: 100%;
  max-width: 430px;
  padding: 28px 28px 24px 28px;
}
.query-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.query-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #8B8B8B;
  margin-top: 1px;
}
.query-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #1A1A1A;
}
.query-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 18px 0;
}
.query-label {
  font-size: 13px;
  color: #8B8B8B;
  font-weight: 500;
  margin-bottom: 14px;
}
.query-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.query-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 241, 234, 0.85);
  border: 1px solid rgba(232, 226, 212, 0.8);
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
  white-space: nowrap;
}
.query-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #8B8B8B;
}
.pill-sgu    .query-pill-dot { background: #B38A5A; }
.pill-files  .query-pill-dot { background: #5A7FB3; }
.pill-smhi   .query-pill-dot { background: #6FA8C7; }
.pill-tv     .query-pill-dot { background: #D19656; }

.query-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.query-btn {
  background: rgba(245, 241, 234, 0.9);
  color: #3A3A3A;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.query-ama-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
  color: #8B8B8B;
  display: flex;
  align-items: center;
  gap: 8px;
}
.query-ama-code {
  font-weight: 600;
  color: #6B4A9E;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* --- Domain knowledge zoom (scoped) --- */
.ill-domain .query-card {
  max-width: 440px;
  padding: 32px 32px 28px 32px;
}
.ill-domain .query-icon {
  width: 24px;
  height: 24px;
}
.ill-domain .query-text {
  font-size: 17px;
}
.ill-domain .query-label {
  font-size: 14px;
  margin-bottom: 16px;
}
.ill-domain .query-pill {
  padding: 9px 15px;
  border-radius: 22px;
  font-size: 15px;
  gap: 9px;
}
.ill-domain .query-pill-dot {
  width: 9px;
  height: 9px;
}
.ill-domain .query-ama-footer {
  margin-top: 22px;
  padding-top: 18px;
  font-size: 14px;
  gap: 10px;
}
.ill-domain .query-ama-code {
  font-size: 14px;
}

/* --- Multi-source research zoom (scoped) --- */
.ill-multisearch .query-card {
  max-width: 440px;
  padding: 32px 32px 28px 32px;
}
.ill-multisearch .query-icon {
  width: 24px;
  height: 24px;
}
.ill-multisearch .query-text {
  font-size: 17px;
}
.ill-multisearch .query-label {
  font-size: 15px;
  margin-bottom: 16px;
}
.ill-multisearch .query-pill {
  padding: 9px 15px;
  border-radius: 22px;
  font-size: 15px;
  gap: 9px;
}
.ill-multisearch .query-pill-dot {
  width: 9px;
  height: 9px;
}
.ill-multisearch .query-action {
  margin-top: 22px;
}
.ill-multisearch .query-btn {
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 14px;
}
/* Stage — anchor for the breakout pill */
.ms-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: center;
}
/* Detached action pills — two next-step suggestions, stacked vertically
   off the bottom-right corner of the card. */
.ill-multisearch .ms-breakout {
  bottom: -14px;
  right: -10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.ill-multisearch .ms-btn {
  background: #FFFFFF;
  color: #1A1A1A;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  width: 240px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 20px 40px rgba(30, 20, 10, 0.16),
    0 4px 10px rgba(30, 20, 10, 0.08);
  white-space: nowrap;
}
.ill-multisearch .ms-btn-icon {
  width: 18px;
  height: 18px;
  color: #8B8B8B;
  flex-shrink: 0;
}

/* Animation — pills slide in from bottom-right, staggered */
.animate .ill-multisearch .ms-btn {
  opacity: 0;
  transform: translate(-18px, -14px) scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-multisearch .ms-btn.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ============================================ */
/* SHARED — status circle (Reviewer + Checklist) */
/* ============================================ */
.status-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.status-circle svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}
.status-pass { background: #D4E8D8; color: #3A7A50; }
.status-warn { background: #F4E4C8; color: #9B6F2B; }
.status-fail { background: #F2D4D2; color: #A84338; }

/* ============================================ */
/* REVIEWER                                      */
/* ============================================ */
.reviewer-card {
  width: 100%;
  max-width: 430px;
  padding: 28px 28px;
}
.reviewer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.reviewer-header-icon {
  width: 22px;
  height: 22px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.reviewer-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
}
.reviewer-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 20px 0;
}
.reviewer-findings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.reviewer-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.reviewer-label {
  color: #1A1A1A;
  font-weight: 500;
}
.reviewer-status {
  font-size: 12px;
  font-weight: 500;
}
.reviewer-row.reviewer-pass .reviewer-status { color: #3A7A50; }
.reviewer-row.reviewer-warn .reviewer-status { color: #9B6F2B; }
.reviewer-row.reviewer-fail .reviewer-status { color: #A84338; }
.reviewer-summary {
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
  color: #8B8B8B;
}

/* Scoped zoom for sandbox Reviewer */
.ill-reviewer .reviewer-card {
  max-width: 460px;
  padding: 30px 30px;
}
.ill-reviewer .reviewer-header { margin-bottom: 22px; gap: 14px; }
.ill-reviewer .reviewer-header-icon { width: 24px; height: 24px; }
.ill-reviewer .reviewer-title { font-size: 17px; }
.ill-reviewer .reviewer-findings { gap: 18px; margin-bottom: 22px; }
.ill-reviewer .reviewer-row { font-size: 16px; grid-template-columns: 24px 1fr auto; gap: 14px; }
.ill-reviewer .reviewer-status { font-size: 14px; }
.ill-reviewer .reviewer-summary { font-size: 13px; padding-top: 18px; }

/* Reviewer stage + source-evidence breakout */
.ill-reviewer .reviewer-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  justify-content: center;
}
/* Breakout anchors to the Pass row (top of the findings area).
   Card is ~460px + centred in 600px = ~70px right margin.
   Offset sits just past card edge, vertically aligned with first row. */
.ill-reviewer .reviewer-sources {
  top: 128px;
  right: -44px;
  width: 248px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 22px 44px rgba(30, 20, 10, 0.16);
}
/* Speech-bubble pointer on top edge, tip points up toward the "Pass" label */
.ill-reviewer .reviewer-sources::before {
  content: '';
  position: absolute;
  top: -9px;
  right: 82px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #FFFFFF;
  filter: drop-shadow(0 -2px 1px rgba(30, 20, 10, 0.05));
}
.ill-reviewer .reviewer-sources-header {
  font-size: 13px;
  color: #8B8B8B;
  font-weight: 500;
  margin-bottom: 14px;
}
.ill-reviewer .reviewer-source-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 15px;
  color: #1A1A1A;
  padding: 8px 0;
}
.ill-reviewer .reviewer-source-row + .reviewer-source-row {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ill-reviewer .reviewer-source-icon {
  width: 20px;
  height: 20px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.ill-reviewer .reviewer-source-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================ */
/* AI AGENTS                                     */
/* ============================================ */
.agents-card {
  width: 100%;
  max-width: 480px;
  padding: 26px 28px;
}
.agents-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.agents-header-icon {
  width: 20px;
  height: 20px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.agents-title {
  font-size: 13px;
  color: #8B8B8B;
  font-weight: 500;
}
.agents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.agent-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 16px 12px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
  transition: background 0.4s, border-color 0.4s;
}
.agent-card.selected {
  background: rgba(255, 246, 224, 0.95);
  border-color: #E8A460;
}
.agent-badge {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: #E8A460;
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.agent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.agent-avatar svg {
  width: 16px;
  height: 16px;
}
.agent-avatar-yesper { background: #F5F1EA; color: #8B8B8B; }
.agent-avatar-design { background: #D4E8D8; color: #3A7A50; }
.agent-avatar-site   { background: #F8DEBF; color: #B8621E; }
.agent-avatar-sus    { background: #D1E7E0; color: #2E7B5F; }
.agent-name {
  font-size: 12px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.2;
}
.agent-role {
  font-size: 10px;
  color: #8B8B8B;
  line-height: 1.3;
}
.agents-more {
  font-size: 11px;
  color: #AAAAAA;
  text-align: center;
  padding-top: 8px;
}

/* ============================================ */
/* ANIMATIONS                                    */
/* ============================================ */

/* --- Shared: query-card pattern --- */
.animate .query-card .query-header,
.animate .query-card .query-label,
.animate .query-card .query-action,
.animate .query-card .query-ama-footer {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .query-card .query-header.visible,
.animate .query-card .query-label.visible,
.animate .query-card .query-action.visible,
.animate .query-card .query-ama-footer.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .query-card .query-pill {
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate .query-card .query-pill.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Reviewer --- */
.animate .reviewer-header,
.animate .reviewer-summary {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .reviewer-header.visible,
.animate .reviewer-summary.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .reviewer-row {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate .reviewer-row.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate .ill-reviewer .reviewer-sources {
  opacity: 0;
  transform: translate(-24px, -24px) scale(0.96);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .ill-reviewer .reviewer-sources.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.animate .ill-reviewer .reviewer-source-row {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .ill-reviewer .reviewer-source-row.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Agents --- */
.animate .agents-header,
.animate .agents-more {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .agents-header.visible,
.animate .agents-more.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .agent-card {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out, background 0.4s, border-color 0.4s;
}
.animate .agent-card.visible {
  opacity: 1;
  transform: scale(1);
}
.animate .agent-card .agent-badge {
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .agent-card.selected.visible .agent-badge {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ============================================ */
/* CO-EDITING                                    */
/* ============================================ */
.ce-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 28px;
  position: relative;
}
.ce-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 20px;
}
.ce-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #1A1A1A;
  padding-bottom: 4px;
}
.ce-selection {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 10%,
    #E5D4F0 10%,
    #E5D4F0 95%,
    transparent 95%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
  margin: 0 -2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ce-actions {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 155px;
  padding: 10px 12px;
}
.ce-actions-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ce-sparkle {
  width: 13px;
  height: 13px;
  color: #6B4A9E;
  flex-shrink: 0;
}
.ce-actions-label {
  font-size: 10px;
  color: #8B8B8B;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ce-actions-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ce-action {
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 12px;
  color: #1A1A1A;
  font-weight: 500;
  cursor: pointer;
}
.ce-action.highlighted {
  background: rgba(229, 212, 240, 0.5);
  color: #6B4A9E;
}

/* ============================================ */
/* INTEGRATIONS                                  */
/* ============================================ */
.integrations-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 28px;
}
.integrations-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.integrations-header-icon {
  width: 22px;
  height: 22px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.integrations-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  flex: 1;
}
.integrations-add {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.04);
  color: #6B6B6B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.integrations-add svg {
  width: 14px;
  height: 14px;
}
.integrations-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 18px 0;
}
.integrations-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.integrations-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.integrations-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.int-sp   { background: #5A7FB3; }
.int-t    { background: #6B5CA3; }
.int-od   { background: #5A9FB3; }
.int-dx   { background: #2E7D8A; }
.int-sgu  { background: #9B7A4F; }
.int-smhi { background: #6FA5C7; }

/* Scoped zoom for sandbox Integrations */
.ill-integrations .integrations-card {
  max-width: 400px;
  padding: 30px 30px;
}
.ill-integrations .integrations-header { margin-bottom: 24px; gap: 14px; }
.ill-integrations .integrations-header-icon { width: 24px; height: 24px; }
.ill-integrations .integrations-title { font-size: 17px; }
.ill-integrations .integrations-add { width: 30px; height: 30px; border-radius: 8px; }
.ill-integrations .integrations-add svg { width: 16px; height: 16px; }
.ill-integrations .integrations-divider { margin-bottom: 20px; }
.ill-integrations .integrations-rows { gap: 18px; }
.ill-integrations .integrations-row {
  font-size: 16px;
  grid-template-columns: 30px 1fr auto;
  gap: 14px;
}
.ill-integrations .integrations-badge {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 10px;
  letter-spacing: 0.35px;
}
.ill-integrations .integrations-status { font-size: 14px; gap: 7px; }
.ill-integrations .integrations-status-dot {
  width: 7px;
  height: 7px;
  position: relative;
}
/* Live ring-pulse so the row reads as a live signal, not a static label */
.ill-integrations .integrations-status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #4A8A5F;
  opacity: 0.5;
  animation: int-dot-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes int-dot-pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Stage + "new file" breakout */
.ill-integrations .int-stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
}
.ill-integrations .int-newfile {
  bottom: -36px;
  right: -20px;
  width: 276px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 22px 44px rgba(30, 20, 10, 0.16);
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
}
.ill-integrations .int-newfile-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ill-integrations .int-newfile-body {
  min-width: 0;
}
.ill-integrations .int-newfile-name {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.ill-integrations .int-newfile-meta {
  font-size: 12px;
  color: #8B8B8B;
  font-weight: 500;
}
.integrations-name {
  color: #1A1A1A;
  font-weight: 500;
}
.integrations-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8B8B8B;
}
.integrations-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4A8A5F;
}

/* ============================================ */
/* BACKGROUND EXECUTION                          */
/* ============================================ */
.bgexec-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 28px;
}
.bgexec-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.bgexec-header-icon {
  width: 22px;
  height: 22px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.bgexec-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
}
.bgexec-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 18px 0;
}
.bgexec-tasks {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bgexec-task-label {
  font-size: 13px;
  color: #1A1A1A;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bgexec-task-percent {
  font-size: 12px;
  color: #8B8B8B;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bgexec-progress {
  width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.bgexec-progress-fill {
  height: 100%;
  background: #B38A5A;
  border-radius: 3px;
  width: 0%;
  transition: width 1.8s cubic-bezier(0.3, 0, 0.2, 1);
}
.bgexec-task-done {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  padding-top: 4px;
}
.bgexec-done-label {
  color: #1A1A1A;
  font-weight: 500;
}
.bgexec-done-status {
  font-size: 12px;
  color: #3A7A50;
  font-weight: 500;
}
.bgexec-done-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #D4E8D8;
  color: #3A7A50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bgexec-done-circle svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* ============================================ */
/* SCHEDULED TASKS                               */
/* Header strip + two stacked task cards.        */
/* Sized to match Background tasks / Prompt      */
/* library illustrations on the same page.       */
/* ============================================ */
.sched-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 380px;
  max-width: 380px;
}
.sched-header-card {
  padding: 18px 24px;
  width: 100%;
}
.sched-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sched-header-icon {
  font-size: 26px;
  color: #6B4A9E;
  flex-shrink: 0;
  line-height: 1;
}
.sched-title {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: -0.2px;
}
.sched-task-card {
  padding: 20px 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sched-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sched-task-name {
  font-size: 15px;
  color: #1A1A1A;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sched-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.avatar-be { background: #B38A5A; }
.sched-task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #8B8B8B;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sched-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.sched-meta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.sched-meta-sep {
  color: rgba(0, 0, 0, 0.2);
}

/* ============================================ */
/* BRING IN A TEAMMATE — AGENT ILLUSTRATIONS    */
/* Four CSS mockups: setup modal, kanban,        */
/* Excel output, active-tasks list.              */
/* ============================================ */

/* --- Slide 0: "Skapa agent" / Create agent modal --- */
.setup-card {
  width: 100%;
  max-width: 380px;
  padding: 24px 26px 22px;
}
.setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.setup-title {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: -0.2px;
}
.setup-close {
  font-size: 18px;
  color: #B8B8B8;
  font-weight: 400;
  line-height: 1;
}
.setup-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 -26px 18px;
}
.setup-field {
  margin-bottom: 16px;
}
.setup-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8B8B8B;
  margin-bottom: 8px;
}
.setup-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}
.setup-select-value {
  font-size: 14px;
  color: #1A1A1A;
  font-weight: 500;
}
.setup-select-caret {
  color: #8B8B8B;
  font-size: 12px;
}
.setup-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.setup-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #4A4A4A;
  font-weight: 500;
}
.setup-check.checked {
  color: #1A1A1A;
}
.setup-check-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: white;
  flex-shrink: 0;
}
.setup-check.checked .setup-check-mark {
  background: #6B4A9E;
  border-color: #6B4A9E;
}
.setup-action {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}
.setup-submit {
  background: #6B4A9E;
  color: white;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 8px;
}

/* --- Slide 1: Kanban --- */
.kanban-card {
  width: 100%;
  max-width: 440px;
  padding: 22px 22px 24px;
}
.kanban-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.kanban-header-icon {
  font-size: 20px;
  color: #6B4A9E;
  line-height: 1;
}
.kanban-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: -0.1px;
}
.kanban-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 -22px 16px;
}
.kanban-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.kanban-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-col-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8B8B8B;
  margin-bottom: 2px;
}
.kanban-task {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12px;
  color: #1A1A1A;
  font-weight: 500;
  line-height: 1.35;
}
.kanban-task--doing {
  border-left: 3px solid #6B4A9E;
}
.kanban-task--done {
  color: #6B6B6B;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.kanban-task-tick {
  color: #3A7A50;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

/* --- Slide 2: Excel output --- */
.excel-card {
  width: 100%;
  max-width: 460px;
  padding: 0;
  overflow: hidden;
}
.excel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  background: rgba(245, 241, 234, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.excel-header-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #1D6F42;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.excel-title {
  font-size: 12.5px;
  font-weight: 500;
  color: #1A1A1A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.excel-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.8fr 0.8fr;
}
.excel-cell {
  font-size: 13px;
  color: #1A1A1A;
  font-weight: 500;
  padding: 11px 14px;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.6);
}
.excel-cell:nth-child(4n) {
  border-right: none;
}
.excel-grid > .excel-cell:nth-last-child(-n+4) {
  border-bottom: none;
}
.excel-cell--head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6B6B6B;
  background: rgba(245, 241, 234, 0.4);
}
.excel-cell--num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.excel-cell--lowest {
  color: #3A7A50;
  font-weight: 700;
}

/* --- Slide 3: Active tasks list --- */
.practice-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 380px;
}
.practice-header-card {
  padding: 14px 20px;
  width: 100%;
}
.practice-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.practice-header-icon {
  font-size: 20px;
  color: #6B4A9E;
  line-height: 1;
  flex-shrink: 0;
}
.practice-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: -0.1px;
}
.practice-task {
  padding: 14px 20px;
  width: 100%;
  font-size: 14px;
  color: #1A1A1A;
  font-weight: 500;
  line-height: 1.4;
}

/* ============================================ */
/* AI APPS                                       */
/* ============================================ */
.aiapps-card {
  width: 100%;
  max-width: 420px;
  padding: 32px 32px;
}
.aiapps-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.aiapps-header-icon {
  width: 26px;
  height: 26px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.aiapps-title {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A1A;
}
.aiapps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aiapps-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.55);
}
.aiapps-name-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.aiapps-name {
  font-size: 15px;
  color: #1A1A1A;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.aiapps-sub {
  font-size: 12px;
  color: #8B8B8B;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiapps-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.avatar-kr { background: #C94F4A; }
.avatar-pe { background: #2F3E5A; }
.avatar-ab { background: #3E6B5A; }
.aiapps-btn {
  background: rgba(245, 241, 234, 0.95);
  color: #3A3A3A;
  padding: 7px 12px 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aiapps-btn-icon {
  width: 10px;
  height: 10px;
  opacity: 0.65;
  flex-shrink: 0;
}
.aiapps-btn-primary {
  background: rgba(74, 138, 95, 0.14);
  color: #2E6A44;
}
.aiapps-btn-primary .aiapps-btn-icon {
  opacity: 0.85;
}

/* ============================================ */
/* TEMPLATES                                     */
/* ============================================ */
.templates-card {
  width: 100%;
  max-width: 460px;
  padding: 32px 32px;
}
.templates-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.templates-header-icon {
  width: 26px;
  height: 26px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.templates-title {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A1A;
}
.templates-subtitle {
  font-size: 14px;
  color: #8B8B8B;
  font-weight: 500;
  margin: 0 0 22px 38px;
}
.templates-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 22px 0;
}
.templates-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.templates-field {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: end;
}
.templates-label {
  color: #8B8B8B;
  font-weight: 500;
  font-size: 14px;
  padding-bottom: 5px;
}
.templates-slot {
  display: block;
  min-height: 24px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
  padding-bottom: 4px;
}
.templates-value {
  color: #1A1A1A;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  display: inline-block;
}
.templates-footer {
  padding: 14px 16px;
  background: rgba(212, 232, 216, 0.55);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #2E6540;
  font-weight: 600;
}
.templates-footer-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4A8A5F;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.templates-footer-check svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

/* ============================================ */
/* ANIMATIONS (batch 3)                          */
/* ============================================ */

/* --- Co-editing --- */
.animate .ce-title,
.animate .ce-line {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .ce-title.visible,
.animate .ce-line.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .ce-selection {
  background-size: 0% 100%;
  transition: background-size 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate .ce-selection.sweep {
  background-size: 100% 100%;
}
.animate .ce-actions {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ce-actions.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.animate .ce-action {
  transition: background 0.3s ease-out, color 0.3s ease-out;
}

/* --- Integrations --- */
.animate .integrations-header {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .integrations-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .integrations-row {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .integrations-row.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate .integrations-status-dot {
  animation: int-pulse 2.4s ease-in-out infinite;
}
@keyframes int-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
/* Inside the zoomed sandbox, the ring-pulse (::after) handles the "live" feel;
   kill the dot-scale pulse so they don't compete. */
.animate .ill-integrations .integrations-status-dot {
  animation: none;
  opacity: 1;
  transform: none;
}
.animate .ill-integrations .int-newfile {
  opacity: 0;
  transform: translate(12px, 16px) scale(0.96);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .ill-integrations .int-newfile.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* --- Background execution --- */
.animate .bgexec-header,
.animate .bgexec-task-done {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .bgexec-header.visible,
.animate .bgexec-task-done.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .bgexec-task {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate .bgexec-task.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .bgexec-progress-fill.visible {
  width: var(--progress, 0%);
}

/* --- AI apps --- */
.animate .aiapps-header {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .aiapps-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .aiapps-row {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .aiapps-row.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Templates --- */
.animate .templates-header,
.animate .templates-subtitle,
.animate .templates-footer {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .templates-header.visible,
.animate .templates-subtitle.visible,
.animate .templates-footer.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .templates-field {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .templates-field.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .templates-value {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.animate .templates-value.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate .librarian-card,
  .animate .librarian-breakout,
  .animate .routines-card,
  .animate .memory-section,
  .animate .memory-footer,
  .animate [class*="visible"],
  .animate .query-header, .animate .query-label, .animate .query-pill,
  .animate .query-action, .animate .query-ama-footer,
  .animate .reviewer-header, .animate .reviewer-row, .animate .reviewer-summary,
  .animate .agents-header, .animate .agent-card, .animate .agent-badge, .animate .agents-more,
  .animate .cl2-header, .animate .cl2-content-section, .animate .cl2-cat, .animate .cl2-req,
  .animate .ce-title, .animate .ce-line, .animate .ce-actions,
  .animate .integrations-header, .animate .integrations-row,
  .animate .bgexec-header, .animate .bgexec-task, .animate .bgexec-task-done,
  .animate .aiapps-header, .animate .aiapps-tabs, .animate .aiapps-row,
  .animate .templates-header, .animate .templates-field, .animate .templates-footer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .animate .librarian-body .highlight {
    background-size: 100% 100% !important;
    transition: none !important;
  }
  .animate .memory-footer-dot {
    animation: none !important;
  }
  .animate .ce-selection {
    background-size: 100% 100% !important;
  }
  .animate .bgexec-progress-fill {
    width: var(--progress, 0%) !important;
  }
  .animate .integrations-status-dot {
    animation: none !important;
  }
}

/* ============================================ */
/* SITE INTEGRATION                              */
/* ============================================ */
/* When a .showcase-image card holds an illustration
   scale-wrapper, switch its aspect-ratio from the
   default 3/4 to 1/1 so the square illustration
   fills the tile cleanly. */
.showcase-image:has(.scale-wrapper) {
  aspect-ratio: 1 / 1;
  background-color: transparent;
}

/* ============================================ */
/* CHECKLISTS — browse categories                */
/* ============================================ */
.cl2-card {
  width: 100%;
  max-width: 340px;
  padding: 0;
  overflow: hidden;
}
.cl2-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cl2-header-icon-wrap {
  width: 22px;
  height: 22px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.cl2-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
}
.cl2-body {
  display: grid;
  grid-template-columns: 136px 1fr;
}
.cl2-sidebar {
  padding: 16px 18px 16px 16px;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl2-cat {
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #1A1A1A;
  font-weight: 500;
  white-space: nowrap;
}
.cl2-cat.selected {
  background: rgba(0, 0, 0, 0.06);
}
.cl2-content {
  padding: 16px 18px 18px 16px;
}
.cl2-content-section {
  font-size: 11px;
  color: #8B8B8B;
  font-weight: 500;
  margin-bottom: 12px;
}
.cl2-reqs {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cl2-req {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(245, 241, 234, 0.6);
  font-size: 12px;
  color: #1A1A1A;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl2-req-state {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl2-req.done .cl2-req-state {
  background: #D4E8D8;
  border-color: transparent;
  color: #3A7A50;
}
.cl2-req-state svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.8;
  display: none;
}
.cl2-req.done .cl2-req-state svg {
  display: block;
}

/* --- Animations --- */
.animate .cl2-header {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .cl2-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .cl2-content-section {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .cl2-content-section.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .cl2-cat {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.55s ease-out,
              transform 0.55s ease-out,
              background-color 0.4s ease-out;
}
.animate .cl2-cat.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate .cl2-req {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .cl2-req.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================ */
/* SANDBOX SHARED HELPERS                        */
/* ============================================ */
/* Used for break-the-square redesigns. Scoped
   to the sandbox stylesheet only. */

/* Peel a sub-card out of its parent. Anchor it
   absolutely; combine with parent `position:
   relative` and card-specific offsets. */
.ill-breakout {
  position: absolute;
  z-index: 2;
}

/* Layered-stack primitives for cards where one
   hero card sits on top of a few muted back
   cards (used for AI Agents, Checklists). */
.ill-layer-stack {
  position: relative;
}
.ill-layer-back {
  position: absolute;
  opacity: 0.92;
  z-index: 1;
}
.ill-layer-top {
  position: relative;
  z-index: 3;
}

/* ============================================ */
/* CHECKLISTS (sandbox redesign)                 */
/* ============================================ */

.ill-checklists .ui-content {
  padding: 40px;
  align-items: center;
  justify-content: center;
}
.cl2-stage {
  position: relative;
  width: 500px;
  height: 360px;
}
/* Back card — the requirements list */
.ill-checklists .cl2-reqs-card {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}
.ill-checklists .cl2-header {
  padding: 22px 24px;
  gap: 14px;
}
.ill-checklists .cl2-header-icon-wrap {
  width: 26px;
  height: 26px;
}
.ill-checklists .cl2-title {
  font-size: 18px;
}
.ill-checklists .cl2-content {
  padding: 18px 22px 22px;
}
.ill-checklists .cl2-content-section {
  font-size: 13px;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.ill-checklists .cl2-reqs {
  gap: 9px;
}
.ill-checklists .cl2-req {
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 9px;
}
.ill-checklists .cl2-req-state {
  width: 22px;
  height: 22px;
}
.ill-checklists .cl2-req-state svg {
  width: 12px;
  height: 12px;
}

/* Front card — the category sidebar, layered on
   top of the reqs card's left edge. Lifted with
   stronger shadow and slight offset. */
.ill-checklists .cl2-sidebar-card {
  position: absolute;
  top: 30px;
  left: 0;
  width: 180px;
  padding: 18px 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 24px 44px rgba(30, 20, 10, 0.14),
    0 6px 14px rgba(30, 20, 10, 0.08);
}
.cl2-sidebar-title {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8B8B8B;
  font-weight: 600;
  padding: 0 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 6px;
}
.ill-checklists .cl2-cat {
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 8px;
}
.ill-checklists .cl2-cat.selected {
  background: rgba(232, 164, 96, 0.18);
  color: #6B4A1E;
}

/* Animations — sidebar card appears first (user
   browsing), then the reqs card slides in from
   the right once Bridge is picked. */
.animate .ill-checklists .cl2-sidebar-card {
  opacity: 0;
  transform: translate(-20px, 6px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-checklists .cl2-sidebar-card.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.animate .ill-checklists .cl2-reqs-card {
  opacity: 0;
  transform: translate(28px, 0);
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-checklists .cl2-reqs-card.visible {
  opacity: 1;
  transform: translate(0, 0);
}
/* Selected category highlight fades in smoothly when
   JS toggles the class mid-sequence. */
.ill-checklists .cl2-cat.selected {
  transition: background 0.35s ease, color 0.35s ease;
}

/* ============================================ */
/* BACKGROUND EXECUTION (sandbox redesign)       */
/* ============================================ */

.ill-bgexec .ui-content {
  padding: 40px;
  align-items: center;
  justify-content: center;
}
.ill-bgexec .bgexec-stage {
  position: relative;
  width: 380px;
}
.ill-bgexec .bgexec-card {
  width: 380px;
  max-width: none;
  padding: 28px 30px 30px;
}
.ill-bgexec .bgexec-header {
  gap: 12px;
  margin-bottom: 22px;
}
.ill-bgexec .bgexec-header-icon {
  width: 26px;
  height: 26px;
}
.ill-bgexec .bgexec-title {
  font-size: 18px;
}
.ill-bgexec .bgexec-divider {
  margin-bottom: 22px;
}
.ill-bgexec .bgexec-tasks {
  gap: 22px;
}
.ill-bgexec .bgexec-task-label {
  font-size: 15px;
  margin-bottom: 10px;
}
.ill-bgexec .bgexec-task-percent {
  font-size: 14px;
}
.ill-bgexec .bgexec-progress {
  height: 6px;
}

/* Done task — peeled out bottom-right as its own
   detached card. */
.ill-bgexec .bgexec-task-done {
  position: absolute;
  right: -24px;
  bottom: -34px;
  top: auto;
  left: auto;
  width: 240px;
  padding: 14px 18px;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  z-index: 2;
}
.ill-bgexec .bgexec-done-circle {
  width: 28px;
  height: 28px;
}
.ill-bgexec .bgexec-done-circle svg {
  width: 16px;
  height: 16px;
}
.ill-bgexec .bgexec-done-label {
  font-size: 15px;
}
.ill-bgexec .bgexec-done-status {
  font-size: 13px;
}

/* Animation — peel out from the main card's
   bottom-right corner. */
.animate .ill-bgexec .bgexec-task-done {
  opacity: 0;
  transform: translate(-36px, -36px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-bgexec .bgexec-task-done.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ============================================ */
/* AI AGENTS (sandbox redesign)                  */
/* ============================================ */

.ill-agents .agents-card {
  max-width: 520px;
  padding: 30px 32px 26px;
  transform: scale(0.9);
  transform-origin: center;
}
.ill-agents .agents-header {
  margin-bottom: 24px;
  gap: 12px;
}
.ill-agents .agents-header-icon {
  width: 22px;
  height: 22px;
}
.ill-agents .agents-title {
  font-size: 15px;
}

/* 2x2 grid of agents. Hero (selected) occupies
   top-left but is scaled up and tilted forward
   so it reads as "moved toward the user". */
.ill-agents .agents-grid--lift {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
  position: relative;
}
.ill-agents .agents-grid--lift .agent-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-shadow: 0 10px 26px rgba(30, 20, 10, 0.08);
  position: relative;
  min-height: 156px;
  justify-content: center;
}
.ill-agents .agents-grid--lift .agent-avatar {
  width: 52px;
  height: 52px;
}
.ill-agents .agents-grid--lift .agent-avatar svg {
  width: 26px;
  height: 26px;
}
.ill-agents .agents-grid--lift .agent-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.ill-agents .agents-grid--lift .agent-role {
  font-size: 15px;
  color: #8A8279;
  line-height: 1.35;
}

/* Hero tile — scaled up, tilted, raised shadow. */
.ill-agents .agents-grid--lift .agent-card--hero {
  z-index: 5;
  transform-origin: center;
  transform: translate(-6px, -10px) rotate(-3deg) scale(1.12);
  background: rgba(255, 246, 224, 0.98);
  border-color: #E8A460;
  box-shadow:
    0 28px 50px rgba(30, 20, 10, 0.18),
    0 8px 16px rgba(30, 20, 10, 0.08);
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-avatar {
  width: 58px;
  height: 58px;
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-avatar svg {
  width: 30px;
  height: 30px;
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-name {
  font-size: 20px;
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-role {
  font-size: 15px;
  color: #7A6A52;
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-badge {
  font-size: 11px;
  padding: 3px 10px;
  top: -10px;
  letter-spacing: 0.8px;
}

/* Avatar palettes for specialist agents (sandbox).
   agent-avatar-design / -site / -sus already
   defined above; add -contracts here. */
.agent-avatar-contracts { background: #DDDAF3; color: #5A4FB0; }
/* Hero (Design Manager) keeps the existing green
   `agent-avatar-design` palette. */

.ill-agents .agents-more {
  font-size: 14px;
  color: #6B6156;
  padding-top: 6px;
  font-weight: 500;
}

/* Animations — non-hero tiles fade up in order,
   then the hero lifts into place last. Hero's
   transform must preserve its tilt+scale. */
.animate .ill-agents .agents-grid--lift .agent-card {
  opacity: 0;
  transform: translateY(6px) scale(0.95);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out, background 0.4s, border-color 0.4s;
}
.animate .ill-agents .agents-grid--lift .agent-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.animate .ill-agents .agents-grid--lift .agent-card--hero {
  opacity: 0;
  transform: translate(-6px, -10px) rotate(-3deg) scale(0.96);
  transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.4s, border-color 0.4s;
}
.animate .ill-agents .agents-grid--lift .agent-card--hero.visible {
  opacity: 1;
  transform: translate(-6px, -10px) rotate(-3deg) scale(1.12);
}

/* ============================================ */
/* CO-EDITING (sandbox redesign)                 */
/* ============================================ */

.ill-coedit .ui-content {
  padding: 40px;
  align-items: center;
  justify-content: center;
}
.ill-coedit .ce-stage {
  position: relative;
  width: 360px;
}
.ill-coedit .ce-card {
  width: 360px;
  max-width: none;
  padding: 28px 30px 32px;
  position: relative;
}
.ill-coedit .ce-title {
  font-size: 20px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 3px;
  letter-spacing: -0.2px;
}
.ce-subtitle {
  font-size: 14px;
  color: #8A7E72;
  letter-spacing: 0.2px;
  margin-bottom: 24px;
  font-weight: 500;
}
.ill-coedit .ce-body {
  font-size: 16px;
  line-height: 1.55;
  gap: 14px;
}
/* Detach AI actions into a bottom-right breakout. */
.ill-coedit .ce-actions {
  right: -84px;
  bottom: -56px;
  top: auto;
  left: auto;
  width: 196px;
  padding: 14px 16px;
}
.ill-coedit .ce-sparkle {
  width: 20px;
  height: 20px;
}
.ill-coedit .ce-actions-label {
  font-size: 12px;
}
.ill-coedit .ce-actions-header {
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.ill-coedit .ce-actions-list {
  gap: 4px;
}
.ill-coedit .ce-action {
  padding: 8px 14px;
  font-size: 15px;
  border-radius: 7px;
}

/* Animations — sub-title fades in like the
   title. Actions translate out from the main
   card's bottom-right corner. */
.animate .ill-coedit .ce-subtitle {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .ill-coedit .ce-subtitle.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .ill-coedit .ce-actions {
  opacity: 0;
  transform: translate(-48px, -48px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-coedit .ce-actions.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Line fade-in shortened since the typewriter itself reads as the
   entrance — less of a slide, quicker to appear. */
.animate .ill-coedit .ce-line {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  transform: translateY(2px);
}
/* ============================================================
   HOMEPAGE PILL SIGNATURE (`.hp-sig`)
   ------------------------------------------------------------
   Homepage showcase cards render the 600×600 illustration at
   ~290px wide (scale ≈ 0.48), so the full UI-card designs are
   unreadable. For the homepage set we swap the card entirely
   for a "signature" — just a couple of glass pills carrying
   the essence of the card's idea. Scoped to
   `.showcase-grid--4`; leaves the Platform set untouched.
   ============================================================ */

.showcase-grid--4 .ui-content {
  padding: 72px;
}

.hp-sig {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  color: #1A1A1A;
}

.hp-sig--center { align-items: center; }

.hp-pill {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 30px rgba(30, 20, 10, 0.10),
    0 2px 6px rgba(30, 20, 10, 0.04);
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: #1A1A1A;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}

.hp-pill--lg { font-size: 26px; padding: 18px 26px; }
.hp-pill--sm { font-size: 18px; padding: 12px 18px; gap: 10px; }

/* Action pill — clickable-feeling variant with a trailing arrow */
.hp-pill--action {
  font-size: 18px;
  padding: 13px 20px;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 14px 30px rgba(30, 20, 10, 0.12),
    0 3px 8px rgba(30, 20, 10, 0.05);
}
.hp-pill-arrow {
  width: 16px;
  height: 16px;
  color: #8B8B8B;
  flex-shrink: 0;
}

.hp-pill-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #8B8B8B;
}
.hp-pill--lg .hp-pill-icon { width: 26px; height: 26px; }
.hp-pill--sm .hp-pill-icon { width: 18px; height: 18px; }

.hp-pill-label { color: #1A1A1A; }
.hp-pill-muted { color: #8B8B8B; font-weight: 400; }

/* Colored dot for pill variants (source chips, agents, etc.) */
.hp-pill-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status icons — rendered as a circle-chip with a check or cross */
.hp-pill-status {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.hp-pill-status svg { width: 16px; height: 16px; stroke-width: 2.4; fill: none; }
.hp-pill-status--pass { background: #3A7A50; }
.hp-pill-status--fail { background: #A84338; }
.hp-pill-status--open {
  background: transparent;
  border: 1.8px solid rgba(10, 10, 10, 0.28);
}

/* Row of chips (sources / synonyms / agents / requirement ticks) */
.hp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

.hp-chip {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 12px rgba(30, 20, 10, 0.06);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 17px;
  font-weight: 500;
  color: #1A1A1A;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hp-chip--selected {
  background: #1A1A1A;
  color: white;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 6px 18px rgba(30, 20, 10, 0.18),
    0 2px 4px rgba(30, 20, 10, 0.08);
}

/* Highlight (marker-pen style) used inside quote-pills */
.hp-hl {
  background-image: linear-gradient(
    180deg,
    transparent 0%, transparent 10%,
    #E5D4F0 10%, #E5D4F0 95%,
    transparent 95%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ----- Homepage-wide bump — matches Librarian's scale & centering -----
   All homepage pill signatures get a size bump and center alignment
   so they read cleanly at the small ~290px showcase render. Per-card
   blocks below can still override for custom drift/staggering. */
.showcase-grid--4 .hp-sig {
  align-items: center;
  max-width: 500px;
  gap: 16px;
}
.showcase-grid--4 .hp-pill {
  font-size: 25px;
  padding: 17px 26px;
  gap: 14px;
}
.showcase-grid--4 .hp-pill--lg {
  font-size: 28px;
  padding: 19px 28px;
  gap: 16px;
}
.showcase-grid--4 .hp-pill--sm {
  font-size: 20px;
  padding: 13px 20px;
  gap: 10px;
}
.showcase-grid--4 .hp-pill-icon { width: 24px; height: 24px; }
.showcase-grid--4 .hp-pill--lg .hp-pill-icon { width: 28px; height: 28px; }
.showcase-grid--4 .hp-pill--sm .hp-pill-icon { width: 20px; height: 20px; }
.showcase-grid--4 .hp-pill-status { width: 32px; height: 32px; }
.showcase-grid--4 .hp-pill-status svg { width: 18px; height: 18px; }
.showcase-grid--4 .hp-chip {
  font-size: 19px;
  padding: 11px 16px;
  gap: 10px;
}
.showcase-grid--4 .hp-chip-row {
  justify-content: center;
  gap: 12px;
}
.showcase-grid--4 .hp-chip .hp-pill-status {
  width: 22px;
  height: 22px;
}
.showcase-grid--4 .hp-chip .hp-pill-status svg { width: 13px; height: 13px; }
/* Brand marks inside hero pills — keep proportional with bumped text */
.showcase-grid--4 .hp-pill-badge { font-size: 11px; padding: 5px 11px; letter-spacing: 1px; }
.showcase-grid--4 .hp-agent-avatar { width: 34px; height: 34px; }
.showcase-grid--4 .hp-agent-avatar svg { width: 18px; height: 18px; }
.showcase-grid--4 .hp-mem-icon { width: 34px; height: 34px; }
.showcase-grid--4 .hp-mem-icon svg { width: 20px; height: 20px; }
.showcase-grid--4 .hp-step-badge { width: 32px; height: 32px; }
.showcase-grid--4 .hp-step-badge svg { width: 14px; height: 14px; }
.showcase-grid--4 .hp-step-badge--doc svg { width: 16px; height: 16px; }

/* ----- Per-card balance tweaks — subtle Librarian-style drift on the
   two-pill cards (Reviewer, Routines) so they don't sit flat-stacked.
   Chip-row cards (Multi-source, Domain, Agents, Memory, Checklists)
   stay naturally centered — hero pill above, chips below. ----- */

/* Reviewer: pass drifts left, fail drifts right, slight overlap.
   The fail pill is wider than the pass pill, so its right-drift is
   reduced relative to the pass pill's left-drift — this keeps the
   visible bounding box of the pair centered in the illustration. */
.showcase-grid--4 .ill-reviewer .hp-sig {
  gap: 0;
}
.showcase-grid--4 .ill-reviewer .hp-sig > .hp-pill:nth-child(1) {
  margin-left: -42px;
  z-index: 2;
}
.showcase-grid--4 .ill-reviewer .hp-sig > .hp-pill:nth-child(2) {
  margin-top: 14px;
  margin-left: 14px;
  z-index: 1;
}

/* Routines: Step 1 tilts left, Step 2 tilts right */
.showcase-grid--4 .ill-routines .hp-sig {
  gap: 0;
}
.showcase-grid--4 .ill-routines .hp-sig > .hp-pill:nth-child(1) {
  margin-left: -40px;
  z-index: 2;
}
.showcase-grid--4 .ill-routines .hp-sig > .hp-pill:nth-child(2) {
  margin-top: 16px;
  margin-left: 56px;
  z-index: 1;
}

/* Organizational memory homepage signature — 3 rows:
   Row 1: org-level pills (Bolagsmallar / Tidigare projekt)
          — subtle purple tint + small icon; lives ABOVE the project
          name to signal "not project-specific".
   Row 2: project name hero pill with the memory-brain avatar.
   Row 3: project-context pills (AB 04 / Örebro kommun / V17 · 2026)
          — full-size hp-pills matching Librarian's size. */
.showcase-grid--4 .ill-memory .hp-sig {
  gap: 12px;
  max-width: 580px;
  align-items: center;
}
.showcase-grid--4 .ill-memory .hp-mem-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
/* Project-context pills — 21px (matches Librarian's "Open page 27"
   action pill) with a subtle green/teal tint. Signals "project-
   specific" memory, distinct from org-level purple. */
.showcase-grid--4 .ill-memory .hp-mem-pill {
  font-size: 21px;
  padding: 14px 22px;
  white-space: nowrap;
  flex-shrink: 0;
  background-image:
    linear-gradient(135deg,
      rgba(74, 158, 128, 0.14) 0%,
      rgba(74, 158, 128, 0.06) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(74, 158, 128, 0.22);
  color: #24594A;
}
/* Org-level pills — 21px (same size as project-context pills) with
   a purple tint so viewers read the two rows as "two colors, two
   scopes" flanking the neutral white project-name hero. */
.showcase-grid--4 .ill-memory .hp-mem-org-pill {
  font-size: 21px;
  padding: 14px 22px;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  background-image:
    linear-gradient(135deg,
      rgba(107, 74, 158, 0.14) 0%,
      rgba(107, 74, 158, 0.06) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(107, 74, 158, 0.22);
  color: #3A2A5A;
}
.showcase-grid--4 .ill-memory .hp-mem-org-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6B4A9E;
  flex-shrink: 0;
}
.showcase-grid--4 .ill-memory .hp-mem-org-icon svg {
  width: 18px;
  height: 18px;
}

/* Domain knowledge homepage signature — the 3 synonym pills use the
   same sizing as Librarian's filename pill (25px, matches the rest
   of the homepage set). Laid out as 2 rows (Luftbehandling alone,
   then VVS + V-ritning) so each label stays on one line. */
.showcase-grid--4 .ill-domain .hp-sig {
  gap: 12px;
  max-width: 560px;
  align-items: center;
}
.showcase-grid--4 .ill-domain .hp-sig > .hp-pill--lg {
  margin-bottom: 4px;
}
.showcase-grid--4 .ill-domain .hp-synonym-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
.showcase-grid--4 .ill-domain .hp-domain-pill {
  font-size: 25px;
  padding: 17px 26px;
  gap: 12px;
}
.showcase-grid--4 .ill-domain .hp-domain-pill .hp-pill-dot {
  width: 14px;
  height: 14px;
}
/* Regulatory variant — book icon in the domain-accent purple
   instead of a color dot. Signals "regulation match", not synonym. */
.showcase-grid--4 .ill-domain .hp-domain-pill--reg .hp-pill-icon {
  width: 22px;
  height: 22px;
  color: #A86FB8;
}

/* AI Agents homepage signature — hero SELECTED pill on row 1, two
   non-selected agent pills (each with an avatar icon) on row 2,
   and a muted "+29 more" pill on row 3 sized the same as row 2. */
.showcase-grid--4 .ill-agents .hp-sig {
  gap: 14px;
  align-items: center;
}
.showcase-grid--4 .ill-agents .hp-agent-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
/* All three agent pills use default hp-pill sizing (25px, matches
   the "Run Tender Review" routines pill). No size override here. */
.showcase-grid--4 .ill-agents .hp-agent-pill {
  white-space: nowrap;
  flex-shrink: 0;
}
.showcase-grid--4 .ill-agents .hp-agent-pill .hp-agent-avatar {
  width: 32px;
  height: 32px;
}
.showcase-grid--4 .ill-agents .hp-agent-pill .hp-agent-avatar svg {
  width: 17px;
  height: 17px;
}
/* Distinct avatar colors per agent — matches the real product grid
   (Anbudsansvarig = blue, Kalkylator = pink, Platschef = peach). */
.showcase-grid--4 .ill-agents .hp-sig {
  max-width: 560px;
}
.showcase-grid--4 .ill-agents .hp-agent-avatar--bid {
  background: #DDE8F7;
  color: #2A5DB8;
}
.showcase-grid--4 .ill-agents .hp-agent-avatar--estimator {
  background: #FBDDE8;
  color: #C6407A;
}
.showcase-grid--4 .ill-agents .hp-agent-avatar--site {
  background: #F9E2CB;
  color: #C4691C;
}
/* Muted "Show all" — same size as non-selected pills, softer visual */
.showcase-grid--4 .ill-agents .hp-agent-pill--muted {
  color: rgba(10, 10, 10, 0.5);
  background-color: rgba(255, 255, 255, 0.65);
  border-color: rgba(10, 10, 10, 0.06);
}
/* Selected agent pill — warm librarian-accent tint, same treatment
   as Librarian's "Open page 27" action pill and Multi-source's
   magnifying-glass pill. Reads as the active / "chosen" element. */
.showcase-grid--4 .ill-agents .hp-agent-pill--selected {
  background-image:
    linear-gradient(135deg,
      rgba(232, 93, 79, 0.16) 0%,
      rgba(232, 93, 79, 0.08) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.94);
  border-color: rgba(232, 93, 79, 0.22);
}
.showcase-grid--4 .ill-agents .hp-agent-avatar--selected {
  background: rgba(232, 93, 79, 0.12);
  color: #E85D4F;
}

/* Multi-source research homepage signature — sources ARE the point.
   5 source pills (Librarian-sized, 25px) in a 3-row stack so long
   labels always fit on one line. A small circular question-mark pill
   sits inline at the start of row 1, representing the question being
   researched against the sources. Each pill has a small rotate +
   translate scatter so the group feels gathered, not gridded.
   Row 1: [?] · K-ritning A-42
   Row 2: SGU · Trafikverket
   Row 3: Lantmäteriet · SMHI  */
.showcase-grid--4 .ill-multisearch .hp-sig {
  gap: 22px;
  max-width: 560px;
  align-items: center;
}
.showcase-grid--4 .ill-multisearch .hp-source-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
.showcase-grid--4 .ill-multisearch .hp-source-pill {
  font-size: 25px;
  padding: 17px 26px;
  gap: 12px;
}
.showcase-grid--4 .ill-multisearch .hp-source-pill .hp-pill-icon {
  width: 26px;
  height: 26px;
}
/* Circular magnifying-glass pill — icon only, round, same height
   feel as the source pills beside it. Uses the librarian-accent
   warm tint to read as the "query" / active element. */
.showcase-grid--4 .ill-multisearch .hp-pill--mag {
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  background-image:
    linear-gradient(135deg,
      rgba(232, 93, 79, 0.16) 0%,
      rgba(232, 93, 79, 0.08) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.94);
  border-color: rgba(232, 93, 79, 0.22);
}
.showcase-grid--4 .ill-multisearch .hp-pill--mag .hp-pill-icon {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
  color: #E85D4F;
}
/* .hp-scatter wraps each pill; the wrapper carries the static
   rotate + translate so the pill itself is free to use `transform`
   for the fade-in Y animation without clashing. */
.showcase-grid--4 .ill-multisearch .hp-scatter {
  display: inline-block;
}
.showcase-grid--4 .ill-multisearch .hp-scatter--mag {
  transform: translate(-4px, 2px);
  z-index: 3;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--1 > .hp-scatter:nth-child(2) {
  transform: translate(4px, -3px);
  z-index: 2;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--2 > .hp-scatter:nth-child(1) {
  transform: translate(2px, 2px);
  z-index: 2;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--2 > .hp-scatter:nth-child(2) {
  transform: translate(-2px, -2px);
  z-index: 1;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--3 > .hp-scatter:nth-child(1) {
  transform: translate(2px, 3px);
  z-index: 1;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--3 > .hp-scatter:nth-child(2) {
  transform: translate(-2px, -1px);
  z-index: 2;
}

/* Librarian homepage signature — custom staggered layout:
   filename centered, quote pill drifts left, action pill drifts right,
   with a small vertical overlap so they feel connected.             */
.showcase-grid--4 .ill-librarian .hp-sig {
  gap: 0;
}
.showcase-grid--4 .ill-librarian .hp-pill {
  font-size: 25px;
  padding: 17px 26px;
  position: relative;
}
.showcase-grid--4 .ill-librarian .hp-pill--action {
  font-size: 21px;
  padding: 14px 22px;
}
.showcase-grid--4 .ill-librarian .hp-pill-icon { width: 24px; height: 24px; }
.showcase-grid--4 .ill-librarian .hp-pill-arrow {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
  color: #E85D4F;
}
.showcase-grid--4 .ill-librarian .hp-sig > .hp-pill:nth-child(1) {
  z-index: 2;
}
.showcase-grid--4 .ill-librarian .hp-sig > .hp-pill:nth-child(2) {
  margin-top: 16px;
  margin-left: -60px;
  z-index: 1;
}
.showcase-grid--4 .ill-librarian .hp-sig > .hp-pill:nth-child(3) {
  margin-top: -8px;
  margin-left: 120px;
  z-index: 3;
  /* Warm librarian-accent tint so the action reads as "the point" */
  background-image:
    linear-gradient(135deg,
      rgba(232, 93, 79, 0.16) 0%,
      rgba(232, 93, 79, 0.08) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.94);
  border-color: rgba(232, 93, 79, 0.22);
}

/* Color motifs per card — subtle tint on the first pill only, to
   echo the existing per-card palette (routines-step-ref, etc.) */
.ill-librarian  .hp-pill-dot { background: #E85D4F; }
.ill-multisearch .hp-pill-dot.dot-sgu  { background: #7B9E7A; }
.ill-multisearch .hp-pill-dot.dot-smhi { background: #5D8CB8; }
.ill-multisearch .hp-pill-dot.dot-tv   { background: #D68C3E; }
.ill-domain     .hp-pill-dot { background: #A86FB8; }
.ill-memory     .hp-pill-dot { background: #6B4A9E; }
.ill-agents     .hp-pill-dot { background: #4A6FA8; }

/* Step/play/doc badge used inside Routines pill */
.hp-step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1A1A1A;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-step-badge svg { width: 13px; height: 13px; }
.hp-step-badge--doc {
  background: #E8A460;
  color: white;
}
.hp-step-badge--doc svg { width: 14px; height: 14px; stroke: white; }

/* Agent avatar inside Agents hero pill */
.hp-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F0EBF8;
  color: #6B4A9E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-agent-avatar svg { width: 16px; height: 16px; }

/* SELECTED badge on hero pill */
.hp-pill-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #1A1A1A;
  color: white;
  margin-left: 2px;
}

/* Memory-brain icon inside memory hero pill */
.hp-mem-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F0EBF8;
  color: #6B4A9E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-mem-icon svg { width: 18px; height: 18px; }

/* Checklist chip variants — pass-chip has a soft green tint */
.hp-chip--pass {
  background: rgba(232, 245, 236, 0.85);
  border-color: rgba(175, 210, 186, 0.6);
}
.hp-chip--muted {
  background: rgba(255, 255, 255, 0.55);
  color: #8B8B8B;
}

/* Status circle — smaller when used inside a chip */
.hp-chip .hp-pill-status {
  width: 20px;
  height: 20px;
}
.hp-chip .hp-pill-status svg { width: 12px; height: 12px; }

/* ----- Checklists — single left-aligned list-card (homepage) -----
   Card uses the same "transparent fat outline" as .ui-card (the 8px
   translucent halo via box-shadow). Title pill overlaps the top edge
   slightly, and the last row fades into the bg via a mask so the
   list reads as "continues below". */
.showcase-grid--4 .ill-checklists .hp-sig {
  align-items: stretch;
  gap: 0;
}
.showcase-grid--4 .ill-checklists .hp-sig > .hp-pill {
  align-self: center;
  position: relative;
  z-index: 2;
}
.showcase-grid--4 .ill-checklists .hp-checklist-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 42px 38px 49px 38px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 8px rgba(255, 255, 255, 0.18),
    0 14px 50px rgba(30, 20, 10, 0.09),
    0 4px 14px rgba(30, 20, 10, 0.05);
  max-width: 350px;
  width: 100%;
  margin: -12px auto 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.showcase-grid--4 .ill-checklists .hp-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.showcase-grid--4 .ill-checklists .hp-checklist-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 25px;
  font-weight: 500;
  color: #1A1A1A;
  text-align: left;
  white-space: nowrap;
}
.showcase-grid--4 .ill-checklists .hp-checklist-row--pass .hp-checklist-label {
  color: rgba(10, 10, 10, 0.55);
}
.showcase-grid--4 .ill-checklists .hp-checklist-row .hp-pill-status {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.showcase-grid--4 .ill-checklists .hp-checklist-row .hp-pill-status svg {
  width: 16px;
  height: 16px;
}
.showcase-grid--4 .ill-checklists .hp-pill-status--open {
  border-width: 2px;
}

/* Entry animation: if the illustration wrapper has `.animate`, the
   pills / chip-rows inside `.ill-hp-anim` fade + rise-in with a
   small stagger when the `.visible` class is added by JS. */
.animate .ill-hp-anim .hp-pill,
.animate .ill-hp-anim .hp-chip-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-hp-anim .hp-pill.visible,
.animate .ill-hp-anim .hp-chip-row.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===== home-intro.css ===== */
/* ============================================================
   Homepage entrance animation — camera dolly pull-back.
   Scoped to body.home-intro on the homepage. Total ~1.9s.

   Timeline:
   - 0–1200ms   Hero video pulls back (scale 1.15 → 1, blur 4px → 0)
   - 800–1300ms Header slides down from above
   - 1200–1900ms H1 comes into focus (blur 10px → 0, scale 1.03 → 1, fade in)
   - 1400–1900ms Subtitle rises in
   - 1550–2050ms Assistant input rises in
   ============================================================ */

body.home-intro .hero-image,
body.home-intro .hero-poster {
    transform: scale(1.15);
    transform-origin: 70% 50%;
    filter: blur(4px);
    animation: home-intro-dolly 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes home-intro-dolly {
    to { transform: scale(1); filter: blur(0); }
}

body.home-intro #header {
    transform: translateY(-100%);
    animation: home-intro-slide-down 500ms cubic-bezier(0.2, 0.8, 0.3, 1) 800ms forwards;
}
@keyframes home-intro-slide-down {
    to { transform: translateY(0); }
}

body.home-intro .hero h1 {
    opacity: 0;
    filter: blur(10px);
    transform: scale(1.03);
    animation: home-intro-focus 700ms cubic-bezier(0.22, 1, 0.36, 1) 1200ms forwards;
}
@keyframes home-intro-focus {
    to { opacity: 1; filter: blur(0); transform: scale(1); }
}

body.home-intro .hero .subtitle,
body.home-intro .ai-assistant {
    opacity: 0;
    transform: translateY(10px);
    animation: home-intro-rise 500ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
body.home-intro .hero .subtitle { animation-delay: 1400ms; }
body.home-intro .ai-assistant   { animation-delay: 1550ms; }
@keyframes home-intro-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Skip the entrance on small viewports (mobile) and when reduced motion is requested. */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
    /* Reset animation/transform/filter on all home-intro elements,
       including the .hero-poster (no dolly on mobile). */
    body.home-intro .hero-image,
    body.home-intro .hero-poster,
    body.home-intro #header,
    body.home-intro .hero h1,
    body.home-intro .hero .subtitle,
    body.home-intro .ai-assistant {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
    /* Reset opacity ONLY for elements that start at opacity:0 via the
       home-intro animations. .hero-poster is deliberately excluded —
       its opacity is controlled by JS (.is-hidden) for the cross-fade
       to the video, and the !important here was overriding that. */
    body.home-intro .hero-image,
    body.home-intro #header,
    body.home-intro .hero h1,
    body.home-intro .hero .subtitle,
    body.home-intro .ai-assistant {
        opacity: 1 !important;
    }
}