/* Team page layouts. The shared clean.css layer supplies the light product style. */

body.ent-page {
    --ent-rail: min(calc(100% - 48px), 1180px);
    --ent-tile-ink: var(--funnel-ink);
    --ent-tile: 0, 113, 227;      /* tile fills: the action blue, ramped by size */
    --ent-good: #18864b;          /* "stays on the Mac" ticks. AA on white and on --funnel-soft */
    --ent-flat: #86868b;          /* "never leaves" crosses: neutral, not alarming */
    --ent-card: #ffffff;
}

/* ── Nav ─────────────────────────────────────────────────────────
   Same bar as the product page, plus a quiet Enterprise chip so a
   visitor who lands here from search knows which page they're on. */
body.ent-page .nav-logo { gap: 9px; }

body.ent-page .ent-chip {
    padding: 3px 8px;
    color: var(--funnel-blue);
    background: rgba(0, 113, 227, .1);
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Hero ────────────────────────────────────────────────────────
   funnel.css already owns #hero's padding, gradient and type scale.
   Only the enterprise-specific pieces live here. */
body.ent-page #hero > .reading:first-of-type { max-width: 960px; }

/* #hero is a flex column and style.css puts .trust-line at order 3.
   The assurances belong under the promise, above the product shot. */
body.ent-page .trust-line { order: 2; }
body.ent-page .ent-figure { order: 3; }

body.ent-page .hero-title { max-width: 940px; }

body.ent-page #hero .hero-actions .btn-secondary { gap: 8px; }

/* Product shot. A single scan of a real work Mac, drawn the way the
   app draws it. Static on purpose: the interactive demo belongs on the
   product page, and an evaluator here wants the shape of the answer,
   not a toy. */
body.ent-page .ent-figure {
    position: relative;
    width: var(--ent-rail);
    margin: 64px auto 0;
}

body.ent-page .ent-window {
    display: grid;
    grid-template-rows: auto auto 1fr;
    overflow: hidden;
    background: var(--demo-window);
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 20px;
    box-shadow: var(--funnel-shadow), 0 1px 0 rgba(255, 255, 255, .8) inset;
}

body.ent-page .ent-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: var(--demo-bar);
    border-bottom: 1px solid var(--demo-line);
}

body.ent-page .ent-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
}
body.ent-page .ent-dot-r { background: #ed6a5e; }
body.ent-page .ent-dot-y { background: #f4be4f; }
body.ent-page .ent-dot-g { background: #61c454; }

body.ent-page .ent-titlebar-name {
    flex: 1;
    color: var(--demo-ink);
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: -.01em;
}

body.ent-page .ent-titlebar-mode {
    padding: 4px 10px;
    color: var(--demo-ink);
    background: var(--demo-card);
    border: 1px solid var(--demo-line);
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 600;
}

body.ent-page .ent-substrate {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 15px;
    background: var(--demo-inset);
    border-bottom: 1px solid var(--demo-line);
    color: var(--demo-copy);
    font-size: .72rem;
}

body.ent-page .ent-substrate code {
    padding: 3px 8px;
    color: var(--demo-ink);
    background: var(--demo-field);
    border: 1px solid var(--demo-line);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: .68rem;
}

body.ent-page .ent-substrate-spacer { margin-left: auto; }

/* The map itself. A 12 x 8 cell grid: each tile's area is roughly its
   share of the 128 GB total, which is what a squarified treemap is
   doing anyway. Proportions here are illustrative, not measured. */
body.ent-page .ent-map {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, minmax(0, 1fr));
    gap: 3px;
    height: clamp(260px, 34vw, 420px);
    padding: 3px;
    background: var(--demo-canvas);
}

body.ent-page .ent-tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    background: rgba(var(--ent-tile), var(--a, .14));
    border-radius: 7px;
    overflow: hidden;
}

body.ent-page .ent-tile b {
    color: var(--ent-tile-ink);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: -.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ent-page .ent-tile span {
    color: var(--ent-tile-ink);
    font-size: .72rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: .68;
}

/* Placement lives here rather than inline: an inline grid-column would
   outrank the mobile fold below, which is how the map ended up with a
   hole in it at 390px. Only the fill alpha stays inline. */
body.ent-page .ent-t-derived { grid-column: 1 / 7;   grid-row: 1 / 6; }
body.ent-page .ent-t-device  { grid-column: 7 / 13;  grid-row: 1 / 5; }
body.ent-page .ent-t-sim     { grid-column: 7 / 13;  grid-row: 5 / 7; }
body.ent-page .ent-t-docker  { grid-column: 1 / 4;   grid-row: 6 / 9; }
body.ent-page .ent-t-node    { grid-column: 4 / 7;   grid-row: 6 / 8; }
body.ent-page .ent-t-brew    { grid-column: 4 / 7;   grid-row: 8 / 9; }
body.ent-page .ent-t-mail    { grid-column: 7 / 10;  grid-row: 7 / 9; }
body.ent-page .ent-t-slack   { grid-column: 10 / 13; grid-row: 7 / 9; }

body.ent-page .ent-tile-sm { padding: 8px 10px; }
body.ent-page .ent-tile-sm b { font-size: .7rem; }
body.ent-page .ent-tile-sm span { font-size: .66rem; }

/* Floating proof, same treatment as the product page's chips. */
body.ent-page .ent-proof {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 196px;
    padding: 17px 19px;
    color: var(--funnel-ink);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 17px;
    box-shadow: 0 16px 44px rgba(30, 44, 65, .16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.ent-page .ent-proof strong { font-size: 1.12rem; letter-spacing: -.025em; }
body.ent-page .ent-proof span { color: #727277; font-size: .73rem; font-weight: 500; }
body.ent-page .ent-proof-space { right: -26px; top: 104px; }
body.ent-page .ent-proof-space strong { color: var(--ent-good); font-size: 1.85rem; }
body.ent-page .ent-proof-private { left: -26px; bottom: 128px; }

body.ent-page .ent-figcaption {
    max-width: 760px;
    margin: 26px auto 0;
    color: var(--funnel-muted);
    font-size: .83rem;
    line-height: 1.55;
    text-align: center;
}

body.ent-page .ent-figcaption strong { color: var(--funnel-copy); font-weight: 600; }

/* ── Shared section furniture ───────────────────────────────────── */
body.ent-page .ent-section {
    width: 100%;
    max-width: none;
    padding: clamp(96px, 10vw, 140px) var(--edge);
}

body.ent-page .ent-section-soft { background: var(--funnel-soft); }

body.ent-page .ent-rail { width: var(--ent-rail); margin: 0 auto; }

body.ent-page .ent-head { max-width: 820px; }
body.ent-page .ent-head-center { margin: 0 auto; text-align: center; }

body.ent-page .ent-head .eyebrow {
    margin-bottom: 14px;
    color: var(--funnel-blue);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
}

body.ent-page .ent-head h2 {
    margin: 0;
    color: var(--funnel-ink);
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.058em;
    text-wrap: balance;
}

body.ent-page .ent-head > p:last-child {
    max-width: 660px;
    margin: 22px 0 0;
    color: var(--funnel-copy);
    font-size: 1.15rem;
    line-height: 1.55;
}

body.ent-page .ent-head-center > p:last-child { margin-inline: auto; }

/* ── Who it's for ────────────────────────────────────────────────
   Four cards, each naming the things that actually fill that team's
   disks. Specific beats "boost productivity". */
body.ent-page .ent-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 56px;
}

body.ent-page .ent-card {
    padding: 32px;
    background: var(--ent-card);
    border: 1px solid rgba(0, 0, 0, .055);
    border-radius: 24px;
    box-shadow: 0 14px 38px rgba(30, 38, 50, .045);
}

body.ent-page .ent-card h3 {
    margin: 0;
    color: var(--funnel-ink);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.032em;
}

body.ent-page .ent-card > p {
    margin: 12px 0 0;
    color: var(--funnel-copy);
    font-size: .98rem;
    line-height: 1.55;
}

body.ent-page .ent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 20px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid var(--funnel-line);
}

body.ent-page .ent-tags li {
    padding: 5px 10px;
    color: var(--funnel-copy);
    background: rgba(127, 127, 127, .09);
    border-radius: 7px;
    font-family: var(--mono);
    font-size: .72rem;
}

/* ── Security ────────────────────────────────────────────────────
   The section a security reviewer screenshots. Two columns: what
   moves, and what they'll be asked in review. */
body.ent-page .ent-sec-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 56px;
}

body.ent-page .ent-panel {
    padding: 32px;
    background: var(--ent-card);
    border: 1px solid rgba(0, 0, 0, .055);
    border-radius: 24px;
}

body.ent-page .ent-panel h3 {
    margin: 0 0 4px;
    color: var(--funnel-ink);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

body.ent-page .ent-panel > p {
    margin: 0 0 22px;
    color: var(--funnel-muted);
    font-size: .88rem;
    line-height: 1.5;
}

/* A real table, so the label/value pairing survives text extraction. Laid out
   to match the definition grid it replaced: flag, term, value. */
body.ent-page .ent-flow {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: auto;
}

body.ent-page .ent-flow th,
body.ent-page .ent-flow td {
    padding: 13px 0;
    border-top: 1px solid var(--funnel-line);
    vertical-align: baseline;
    text-align: left;
    color: var(--funnel-ink);
    font-size: .94rem;
    font-weight: 400;
}

body.ent-page .ent-flow tr:first-child th,
body.ent-page .ent-flow tr:first-child td { border-top: 0; padding-top: 0; }

body.ent-page .ent-flow .ent-flag {
    width: 20px;
    padding-right: 12px;
}

/* A table cell shrinks to its content, so hold the 20px glyph column on the
   glyph itself to keep the label aligned where the grid layout put it. */
body.ent-page .ent-flow i {
    display: inline-block;
    width: 20px;
    font-style: normal;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1;
}

body.ent-page .ent-flow .ent-no i { color: var(--ent-flat); }
body.ent-page .ent-flow .ent-yes i { color: var(--ent-good); }

body.ent-page .ent-flow .ent-val {
    width: 1%;
    padding-left: 12px;
    color: var(--funnel-muted);
    font-size: .84rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Table captions carry the block's meaning for extraction; the visible <h3>
   already says it on screen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.ent-page .ent-spec {
    display: grid;
    gap: 0;
    margin: 0;
}

body.ent-page .ent-spec > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-top: 1px solid var(--funnel-line);
}

body.ent-page .ent-spec > div:first-child { border-top: 0; padding-top: 0; }
body.ent-page .ent-spec dt { color: var(--funnel-copy); font-size: .9rem; }
body.ent-page .ent-spec dd {
    margin: 0;
    color: var(--funnel-ink);
    font-size: .9rem;
    font-weight: 600;
    text-align: right;
}

body.ent-page .ent-note {
    max-width: 780px;
    margin: 28px 0 0;
    color: var(--funnel-copy);
    font-size: .92rem;
    line-height: 1.6;
}

body.ent-page .ent-note a { color: var(--funnel-blue); }

/* ── Deployment ──────────────────────────────────────────────────
   Three steps on hairlines, then the honest negation. Saying what
   Delve isn't up front saves everyone a discovery call. */
body.ent-page .ent-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 56px;
    border-top: 1px solid var(--funnel-line);
    border-bottom: 1px solid var(--funnel-line);
}

body.ent-page .ent-steps article {
    padding: 34px 34px 38px;
    border-left: 1px solid var(--funnel-line);
}

body.ent-page .ent-steps article:first-child { padding-left: 0; border-left: 0; }

body.ent-page .ent-steps b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 26px;
    color: var(--funnel-blue);
    background: rgba(0, 113, 227, .12);
    border-radius: 50%;
    font-size: .76rem;
    font-weight: 700;
}

body.ent-page .ent-steps h3 {
    margin: 0 0 10px;
    color: var(--funnel-ink);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -.028em;
}

body.ent-page .ent-steps p {
    margin: 0;
    color: var(--funnel-copy);
    font-size: .95rem;
    line-height: 1.55;
}

body.ent-page .ent-honest {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 32px;
    margin-top: 56px;
    padding: 34px;
    background: var(--funnel-soft);
    border: 1px solid var(--funnel-line);
    border-radius: 24px;
}

body.ent-page .ent-section-soft .ent-honest { background: var(--ent-card); }

body.ent-page .ent-honest h3 {
    margin: 0;
    color: var(--funnel-ink);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.03em;
}

body.ent-page .ent-honest > div > p {
    margin: 12px 0 0;
    color: var(--funnel-copy);
    font-size: .95rem;
    line-height: 1.6;
}

body.ent-page .ent-honest ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ent-page .ent-honest li {
    position: relative;
    padding-left: 24px;
    color: var(--funnel-copy);
    font-size: .95rem;
    line-height: 1.55;
}

body.ent-page .ent-honest li::before {
    content: "·";
    position: absolute;
    left: 6px;
    color: var(--funnel-muted);
    font-weight: 800;
}

body.ent-page .ent-honest li strong { color: var(--funnel-ink); font-weight: 600; }

/* ── Pricing ─────────────────────────────────────────────────────
   The single biggest gap on the old page. An enterprise buyer needs a
   number to take back, even when the volume terms are agreed directly. */
body.ent-page .ent-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 440px);
    align-items: center;
    gap: clamp(48px, 8vw, 110px);
}

body.ent-page .ent-price-card {
    padding: 34px;
    background: var(--ent-card);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 25px;
    box-shadow: 0 24px 62px rgba(35, 45, 60, .08);
}

body.ent-page .ent-price-label {
    margin: 0;
    color: var(--funnel-copy);
    font-size: .88rem;
    font-weight: 700;
}

body.ent-page .ent-price-fig {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 8px 0 22px;
}

body.ent-page .ent-price-fig strong {
    color: var(--funnel-ink);
    font-size: 3.8rem;
    line-height: 1;
    letter-spacing: -.06em;
}

body.ent-page .ent-price-fig span { color: var(--funnel-muted); font-size: .92rem; font-weight: 600; }

body.ent-page .ent-price-card ul {
    display: grid;
    gap: 12px;
    margin: 0 0 26px;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid var(--funnel-line);
}

body.ent-page .ent-price-card li {
    position: relative;
    padding-left: 25px;
    color: var(--funnel-copy);
    font-size: .94rem;
    line-height: 1.5;
}

body.ent-page .ent-price-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ent-good);
    font-weight: 800;
}

body.ent-page .ent-price-card .btn { width: 100%; justify-content: center; }
body.ent-page .ent-price-card small {
    display: block;
    margin-top: 13px;
    color: var(--funnel-muted);
    font-size: .72rem;
    text-align: center;
}

body.ent-page .ent-price .ent-head h2 { font-size: clamp(2.2rem, 3.4vw, 3.3rem); }
body.ent-page .ent-price .ent-head > p:last-of-type { margin-top: 20px; font-size: 1.05rem; }

/* The arithmetic, spelled out. It's the argument. */
body.ent-page .ent-math {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 40px;
    border-top: 1px solid var(--funnel-line);
}

body.ent-page .ent-math > div {
    padding: 22px 24px 0 0;
}

body.ent-page .ent-math dt {
    color: var(--funnel-muted);
    font-size: .78rem;
    font-weight: 600;
}

body.ent-page .ent-math dd {
    margin: 6px 0 0;
    color: var(--funnel-ink);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

body.ent-page .ent-math dd small {
    display: block;
    margin-top: 4px;
    color: var(--funnel-copy);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: 0;
}

/* ── FAQ ─────────────────────────────────────────────────────────
   funnel.css already themes `.faq details`; this only sets the width. */
body.ent-page .ent-faq { width: min(100%, 880px); margin: 0 auto; }
body.ent-page .ent-faq .faq { max-width: none; margin-top: 38px; }
body.ent-page .ent-faq .faq summary { padding-right: 38px; font-size: 1.05rem; font-weight: 600; }

/* ── Close ───────────────────────────────────────────────────────── */
body.ent-page .ent-final {
    width: var(--ent-rail);
    margin: 0 auto clamp(96px, 10vw, 140px);
    padding: clamp(64px, 8vw, 104px) 32px;
    text-align: center;
    background: var(--funnel-soft);
    border: 1px solid var(--funnel-line);
    border-radius: var(--funnel-radius);
}

body.ent-page .ent-final h2 {
    max-width: 760px;
    margin: 14px auto 0;
    color: var(--funnel-ink);
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.058em;
    text-wrap: balance;
}

body.ent-page .ent-final > p:not(.eyebrow) {
    max-width: 620px;
    margin: 22px auto 0;
    color: var(--funnel-copy);
    font-size: 1.1rem;
    line-height: 1.55;
}

body.ent-page .ent-final .hero-actions { justify-content: center; margin-top: 32px; }

body.ent-page .ent-final-mail {
    margin: 18px 0 0;
    color: var(--funnel-muted);
    font-size: .84rem;
}

body.ent-page .ent-final-mail a { color: var(--funnel-blue); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    body.ent-page .ent-proof { display: none; }
}

@media (max-width: 900px) {
    body.ent-page .ent-cards,
    body.ent-page .ent-sec-grid,
    body.ent-page .ent-price { grid-template-columns: 1fr; }
    body.ent-page .ent-price { gap: 44px; }
    body.ent-page .ent-honest { grid-template-columns: 1fr; gap: 20px; }
    body.ent-page .ent-steps { grid-template-columns: 1fr; }
    body.ent-page .ent-steps article {
        padding: 28px 0;
        border-left: 0;
        border-top: 1px solid var(--funnel-line);
    }
    body.ent-page .ent-steps article:first-child { border-top: 0; }
    body.ent-page .ent-steps b { margin-bottom: 18px; }
    body.ent-page .ent-math { grid-template-columns: 1fr; }
    body.ent-page .ent-math > div { padding: 18px 0; border-top: 1px solid var(--funnel-line); }
    body.ent-page .ent-math > div:first-child { border-top: 0; }
}

@media (max-width: 760px) {
    body.ent-page #hero > .reading:first-of-type { text-align: left; }
    body.ent-page .ent-figure { width: calc(100% - 24px); margin-top: 44px; }
    body.ent-page .ent-window { border-radius: 14px; }
    body.ent-page .ent-figcaption { padding: 0 12px; text-align: left; }
    body.ent-page .ent-substrate-spacer,
    body.ent-page .ent-substrate .ent-substrate-hint { display: none; }

    body.ent-page .ent-section { padding: 82px 22px; }
    body.ent-page .ent-rail { width: 100%; }
    body.ent-page .ent-head-center { text-align: left; }
    body.ent-page .ent-head-center > p:last-child { margin-inline: 0; }
    body.ent-page .ent-card,
    body.ent-page .ent-panel,
    body.ent-page .ent-honest { padding: 26px; border-radius: 20px; }
    body.ent-page .ent-price-card { padding: 28px 24px; }

    body.ent-page .ent-final {
        width: calc(100% - 24px);
        margin-bottom: 96px;
        padding: 56px 24px;
        text-align: left;
        border-radius: 24px;
    }
    body.ent-page .ent-final h2,
    body.ent-page .ent-final > p:not(.eyebrow) { margin-inline: 0; }
    body.ent-page .ent-final .hero-actions { justify-content: flex-start; }

    /* The map loses its two narrowest tiles rather than its readability:
       at this width their labels would be ellipsis and nothing else. The
       neighbours grow into the space so the grid stays full. */
    body.ent-page .ent-map { height: 300px; }
    body.ent-page .ent-t-brew,
    body.ent-page .ent-t-slack { display: none; }
    body.ent-page .ent-t-node { grid-row: 6 / 9; }
    body.ent-page .ent-t-mail { grid-column: 7 / 13; }
}

@media (max-width: 520px) {
    body.ent-page #hero .hero-actions { flex-direction: column; }
    body.ent-page #hero .hero-actions .btn { width: 100%; }
    body.ent-page .ent-price-fig strong { font-size: 3.1rem; }
}

/* ── Dark appearance ─────────────────────────────────────────────
   Layout is identical; only the tokens move. Everything else already
   reads from funnel.css, which flips itself. */