/* ============================================================
   Landing Page — Page-specific styles
   Depends on the tokens & primitives in styles.css
   ============================================================ */

/* ============================================================
   1 · Hero
   ============================================================ */

.hero {
    background: linear-gradient(180deg, #eef2f8 0%, #f6f9fb 55%, #ffffff 100%);
    padding: 84px 0 24px;
    text-align: center;
    overflow: hidden;
}
.hero h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.04 }
/* The rotating word now sits at the end of the first line, so the second line
   is ordinary static text and needs no reserved height. */
.hero h1 .l2 { display: block }
/* The rotating word and its caret wrap as one unit, so the caret never ends up
   alone on a line of its own when the word only just fits. */
.hero h1 .rotw { white-space: nowrap }
/* German runs longer: at the English size, "Deine Projektarbeit, abgerechnet"
   overflows the line on desktop and the headline reflows between words. */
html[lang="de"] .hero h1 { font-size: clamp(38px, 5.4vw, 68px) }
.hero .lead { font-size: 20px; max-width: 700px; margin: 26px auto 0 }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap }
.trialnote { margin-top: 16px; font-size: 14px; color: var(--grey-2) }

.rot {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.caret {
    display: inline-block;
    width: 3px;
    height: .78em;
    margin-left: .06em;
    vertical-align: -.06em;
    border-radius: 2px;
    background: linear-gradient(180deg, #1f6fe5, #17c79a);
    opacity: .55;
    animation: blinkc 1.15s steps(1, end) infinite;
}
.caret.typing { animation: none; opacity: .55 }
@keyframes blinkc { 0%, 49% { opacity: .55 } 50%, 100% { opacity: 0 } }

/* ============================================================
   Product screen mock — the shared visual language for every
   in-product illustration on the page.

   The palette below is the portal's own, taken from its Tailwind
   tokens, and every selector here is scoped to .scr. A mock
   therefore reads as the product, while the rest of the page
   keeps its own blue-and-green identity — and no class name in
   here can reach the page around it.
   ============================================================ */

.scr {
    --o-teal:    #0e8a8a;
    --o-navy:    #21618c;
    --o-purple:  #7d3c98;
    --o-good:    #27ae60;
    --o-warn:    #9a6205;
    --o-bad:     #c0392b;
    --o-page:    #f4f6f7;
    --o-neutral: #e8f0f2;
    --o-line:    #d5dbdb;
    --o-ink:     #17202a;
    --o-ink-2:   #2c3e50;
    --o-mute:    #7f8c8d;
    --o-faint:   #a7b1b1;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    text-align: left;
    font-size: 13px;
}
.scr-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--o-line);
    background: var(--o-page);
    flex-wrap: wrap;
}
.scr-bar .t { font-weight: 700; font-size: 13.5px; color: var(--o-ink-2) }
.scr-bar .sp { flex: 1 }
.scr-bar .cnt { font-size: 11.5px; color: var(--o-mute); font-variant-numeric: tabular-nums }
.scr-body { padding: 14px 16px; display: grid; gap: 10px; background: #fff }

/* Filter chips. The selected one is teal-tinted, as in the portal. */
.scr .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--o-line);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11.5px;
    color: var(--o-mute);
    background: #fff;
    white-space: nowrap;
}
.scr .chip.on {
    background: rgba(14, 138, 138, .1);
    border-color: rgba(14, 138, 138, .3);
    color: var(--o-teal);
    font-weight: 600;
}

/* Segmented pill tabs — the portal's sub-navigation */
.scr .ptabs {
    display: inline-flex;
    justify-self: start;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
    gap: 2px;
    background: var(--o-page);
    border: 1px solid var(--o-line);
    border-radius: 999px;
    padding: 4px;
}
.scr .ptab {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--o-mute);
    white-space: nowrap;
}
.scr .ptabs::-webkit-scrollbar { display: none }
.scr .ptab.on {
    background: #fff;
    border: 1px solid var(--o-line);
    color: var(--o-ink-2);
    box-shadow: 0 1px 2px rgba(23, 32, 42, .06);
}

/* A list row — a project, an application or a profile */
.scr .prow {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--o-line);
    border-radius: 11px;
    padding: 11px 13px;
    background: #fff;
    transition: .2s;
}
.scr .prow:hover { border-color: rgba(14, 138, 138, .45); box-shadow: 0 4px 14px rgba(23, 32, 42, .05) }
.scr .prow .m { flex: 1; min-width: 0 }
.scr .prow .n { font-weight: 650; color: var(--o-ink-2); font-size: 13px; line-height: 1.35 }
.scr .prow .s2 { color: var(--o-mute); font-size: 11px; margin-top: 2px; line-height: 1.45 }
.scr .prow .s {
    color: var(--o-mute);
    font-size: 11px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 5px;
}
/* Micro-label in front of a value — how the portal labels a stacked row */
.scr .prow .s i {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--o-faint);
    margin-right: 3px;
}
/* The company line above a project title */
.scr .co {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--o-mute);
    margin-bottom: 4px;
}
/* Profile avatar, and the marker a theory profile carries instead */
.scr .prow .pav,
.scr .prow .pbk {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--o-neutral);
    border: 1px solid var(--o-line);
}
.scr .prow .pbk { border-radius: 7px; background: rgba(125, 60, 152, .08); border-color: rgba(125, 60, 152, .25) }

/* Match score — a circle, at the size the portal uses */
.scr .score {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    flex: none;
    line-height: 1;
}
.scr .mcell { flex: none; display: grid; justify-items: center; gap: 3px }
.scr .mcell i { font-style: normal; font-size: 9px; color: var(--o-mute); white-space: nowrap }
/* The portal's bands: 8+ good, 5–7 warn, below 5 neutral in a list and
   red in the project drawer */
.scr .s-hi  { background: rgba(39, 174, 96, .1);   color: var(--o-good) }
.scr .s-wn  { background: rgba(243, 156, 18, .13); color: var(--o-warn) }
.scr .s-lo  { background: var(--o-neutral);        color: var(--o-mute) }
.scr .s-bad { background: rgba(192, 57, 43, .1);   color: var(--o-bad) }

/* Status badges, in the portal's badge colours */
.scr .pill {
    flex: none;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}
.scr .p-good   { background: rgba(39, 174, 96, .1);   color: var(--o-good) }
.scr .p-navy   { background: rgba(33, 97, 140, .1);   color: var(--o-navy) }
.scr .p-purple { background: rgba(125, 60, 152, .1);  color: var(--o-purple) }
.scr .p-warn   { background: rgba(243, 156, 18, .13); color: var(--o-warn) }
.scr .p-bad    { background: rgba(192, 57, 43, .1);   color: var(--o-bad) }
.scr .p-teal   { background: rgba(14, 138, 138, .1);  color: var(--o-teal) }

/* Buttons */
.scr .btn-t,
.scr .btn-s {
    flex: none;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}
.scr .btn-t { background: var(--o-teal); color: #fff; border: 1px solid var(--o-teal) }
.scr .btn-s { background: #fff; color: var(--o-ink-2); border: 1px solid var(--o-line) }

/* Uppercase section label, as used in the drawers and detail pages */
.scr .sect {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--o-mute);
    margin-top: 2px;
}
/* Section heading with an optional subtitle beside it */
.scr .sh { font-size: 12.5px; font-weight: 700; color: var(--o-ink-2); margin-top: 2px }
.scr .sh em {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    color: var(--o-mute);
    margin-left: 8px;
}

/* Drawer header — title, and the meta line beneath it */
.scr .drwt { font-size: 15px; font-weight: 700; color: var(--o-ink-2); line-height: 1.3 }
.scr .drwm {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--o-mute);
}

/* One scored profile in the drawer's Match scores list */
.scr .mrow {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--o-page);
    border: 1px solid var(--o-line);
    border-radius: 10px;
    padding: 8px 10px;
}
.scr .mrow .nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--o-ink-2) }
.scr .mrow .tg {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    background: rgba(125, 60, 152, .1);
    color: var(--o-purple);
}

/* The AI prompt row that accompanies every generated document */
.scr .aip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    background: #fff;
    border: 1px solid var(--o-line);
    border-radius: 999px;
    padding: 4px 5px 4px 12px;
}
.scr .aip span {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--o-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scr .aip b {
    flex: none;
    background: var(--o-teal);
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 650;
}

/* A labelled field holding a generated value */
.scr .fld { margin-top: 9px }
.scr .fld label {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--o-mute);
    margin-bottom: 4px;
}
.scr .fv {
    margin: 0;
    background: var(--o-page);
    border: 1px solid var(--o-line);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 11.5px;
    color: var(--o-ink-2);
    font-weight: 600;
    line-height: 1.5;
}
.scr .fv.bd { font-weight: 400; color: var(--o-ink) }
/* The line offering the tailored CV as an attachment */
.scr .atch {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 9px;
    font-size: 11px;
    color: var(--o-ink-2);
}
.scr .atch i {
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 1px;
    border-radius: 3px;
    background: var(--o-teal);
    border: 1px solid var(--o-teal);
}

/* The Details card on an assignment */
.scr .dvs { display: grid; gap: 5px }
.scr .dvs.g2 { grid-template-columns: 1fr 1fr; gap: 5px 8px }
.scr .dv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: var(--o-page);
    border: 1px solid var(--o-line);
    border-radius: 8px;
    padding: 7px 11px;
}
.scr .dv span { font-size: 11.5px; color: var(--o-mute) }
.scr .dv b {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--o-ink-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Time entries */
.scr .tbl { border: 1px solid var(--o-line); border-radius: 10px; overflow: hidden }
.scr .thd,
.scr .trow {
    display: grid;
    grid-template-columns: 100px 62px 46px 1fr 72px;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
}
.scr .thd {
    background: var(--o-page);
    border-bottom: 1px solid var(--o-line);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--o-mute);
}
.scr .mgrp {
    background: var(--o-page);
    border-bottom: 1px solid var(--o-line);
    padding: 4px 11px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--o-mute);
}
.scr .trow { border-bottom: 1px solid rgba(213, 219, 219, .6); font-size: 11.5px }
.scr .trow:last-child { border-bottom: 0 }
.scr .trow .dt {
    color: var(--o-ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.scr .trow .dt i {
    font-style: normal;
    display: inline-block;
    width: 25px;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--o-mute);
}
.scr .trow .hr { font-variant-numeric: tabular-nums; color: var(--o-ink-2) }
.scr .trow .ds { color: var(--o-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.scr .trow .st { font-size: 10.5px; font-weight: 650; white-space: nowrap }
.scr .trow .st.ok  { color: var(--o-good) }
.scr .trow .st.ivd { color: var(--o-purple) }
.scr .trow .pill { justify-self: start; font-size: 10px; padding: 2px 8px }

/* The totals strip under the time table and the invoices */
.scr .tots { display: flex; flex-wrap: wrap; gap: 7px }
.scr .tt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--o-page);
    border: 1px solid var(--o-line);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
}
.scr .tt span { color: var(--o-mute) }
.scr .tt b { font-weight: 650; color: var(--o-ink-2); font-variant-numeric: tabular-nums }

/* An invoice on the assignment */
.scr .inv { border-top: 1px solid var(--o-line); padding-top: 10px; display: grid; gap: 5px }
.scr .inv:first-child { border-top: 0; padding-top: 0 }
.scr .ih { display: flex; align-items: center; gap: 7px; flex-wrap: wrap }
.scr .ih .num {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--o-ink-2);
    font-variant-numeric: tabular-nums;
}
.scr .ip { font-size: 11px; color: var(--o-mute); font-variant-numeric: tabular-nums }
.scr .ia { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px }
.scr .ia span { color: var(--o-mute) }
.scr .ia b {
    font-weight: 650;
    color: var(--o-ink-2);
    font-variant-numeric: tabular-nums;
    margin-right: 8px;
}

/* KPI cards — two across, which is the portal's own layout at this width */
.scr .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.scr .kpi { border: 1px solid var(--o-line); border-radius: 10px; padding: 9px 12px; background: #fff }
.scr .kpi span {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--o-mute);
    margin-bottom: 3px;
}
.scr .kpi b {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--o-ink-2);
    font-variant-numeric: tabular-nums;
}
.scr .kpi b.teal { color: var(--o-teal) }
.scr .kpi b.good { color: var(--o-good) }
.scr .kpi b.sm {
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Demand by field of expertise */
.scr .hbars { display: grid; gap: 6px; border: 1px solid var(--o-line); border-radius: 10px; padding: 12px }
.scr .hb { display: grid; grid-template-columns: 152px 1fr 40px; align-items: center; gap: 7px }
.scr .hl {
    font-size: 10px;
    color: var(--o-ink-2);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scr .ht { height: 11px; border-radius: 3px; background: var(--o-page) }
.scr .ht i { display: block; height: 100%; border-radius: 3px; background: var(--o-teal) }
.scr .hg { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums }
.scr .hg.up { color: var(--o-good) }
.scr .hg.dn { color: var(--o-bad) }

/* A document card inside a screen mock */
.scr .docblock { border: 1px solid var(--o-line); border-radius: 10px; padding: 12px; background: #fff }
.scr .dhead,
.scr .bh {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--o-mute);
}
.scr .bh { margin-top: 11px }
/* Example lines. `.acc` marks what the platform generated or tailored. */
.scr .dlist,
.scr .nlist { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px }
.scr .dlist li,
.scr .nlist li {
    position: relative;
    padding-left: 15px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--o-mute);
}
.scr .dlist li:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--o-line);
}
.scr .dlist li.acc { color: var(--o-ink-2) }
.scr .dlist li.acc:before { background: var(--o-teal) }
.scr .nlist { counter-reset: q }
.scr .nlist li { color: var(--o-ink-2) }
.scr .nlist li:before {
    counter-increment: q;
    content: counter(q) ".";
    position: absolute;
    left: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--o-mute);
}
.scr .tagr { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }

/* ============================================================
   2 · The work around the work
   ============================================================ */

/* Scattered workflow, pulled together */
.ecoB {
    position: relative;
    margin-top: 44px;
    height: 540px;
    background: radial-gradient(circle at 50% 48%, #f4f9ff 0%, #fbfcfe 55%, #fff 100%);
    border: 1px solid var(--line);
    border-radius: 20px;
}
.ecoB svg.links { position: absolute; inset: 0; width: 100%; height: 100% }
.ecoB svg.links line {
    stroke: #c8d4e4;
    stroke-width: 1.2;
    stroke-dasharray: 5 6;
    vector-effect: non-scaling-stroke;
    animation: flow 3.2s linear infinite;
    transition: stroke .2s ease, stroke-width .2s ease;
}
/* Lit by landing.js while its card is hovered or focused. The stroke colour
   is set inline from that card's accent. */
.ecoB svg.links line.on { stroke-width: 3 }
@keyframes flow { to { stroke-dashoffset: -44 } }

/* Each card carries its own hue via --c (accent) and --cbg (tint),
   set inline from the SCATTER table in landing.js. The tint + saturated
   accent pairing matches the .pill and .card .ic treatments elsewhere. */
.scard {
    position: absolute;
    width: 250px;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 15px 14px;
    box-shadow: 0 6px 20px rgba(31, 45, 71, .09);
    transition: transform .28s, box-shadow .28s, border-color .28s;
}
.scard:hover,
.scard:focus-visible {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.12);
    z-index: 8;
    border-color: var(--c);
    outline: none;
    box-shadow:
        0 0 0 3px rgba(var(--crgb), .13),
        0 30px 60px rgba(var(--crgb), .38),
        0 10px 22px rgba(31, 45, 71, .14);
}
.scard .sc-top { display: flex; align-items: center; gap: 11px }
.scard .sc-ic {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--cbg);
    display: grid;
    place-items: center;
    flex: none;
}
.scard .sc-ic svg {
    stroke: var(--c);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.scard b { font-weight: 650; font-size: 13.5px; color: var(--ink-2); line-height: 1.25 }
.scard i {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--c);
    display: block;
    margin-top: 2px;
}
.scard .sc-txt {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--grey);
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s ease, margin-top .3s ease, opacity .22s ease;
}
.scard:hover .sc-txt,
.scard:focus-visible .sc-txt { max-height: 180px; margin-top: 10px; opacity: 1 }

.ecoB .core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    transform: translate(-50%, -50%);
    z-index: 6;
    background: #fff;
    border: 1px solid #cfeade;
    border-radius: 16px;
    padding: 22px 30px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(23, 199, 154, .16);
    transition: transform .28s, box-shadow .28s, border-color .28s;
}
.ecoB .core:hover,
.ecoB .core:focus-visible {
    transform: translate(-50%, -50%) scale(1.06);
    z-index: 9;
    border-color: var(--green);
    outline: none;
    box-shadow:
        0 0 0 3px rgba(23, 199, 154, .13),
        0 30px 62px rgba(23, 199, 154, .34),
        0 10px 22px rgba(31, 45, 71, .12);
}
.ecoB .core-txt {
    font-size: 13px;
    line-height: 1.55;
    color: var(--grey);
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s ease, margin-top .3s ease, opacity .22s ease;
}
.ecoB .core:hover .core-txt,
.ecoB .core:focus-visible .core-txt { max-height: 140px; margin-top: 12px; opacity: 1 }
.ecoB .corelogo {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: .015em;
    color: var(--ink-2);
    text-transform: uppercase;
    line-height: 1.15;
}
/* ============================================================
   3 · Scalability
   The same four-stage track drawn twice, with one person on it and
   then six — so "the workflow does not change" is shown, not just said.
   ============================================================ */

.scalecard {
    max-width: 620px;
    margin: 34px auto 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 26px;
    box-shadow: var(--shadow);
    text-align: left;
}
.sc-row { display: flex; align-items: center; gap: 22px; padding: 12px 0 }
.sc-row + .sc-row { border-top: 1px dashed var(--line) }

.sc-who { display: flex; align-items: center; gap: 12px; width: 178px; flex: none }
.sc-avs { display: flex; flex: none }
.sc-avs .av {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--grad);
    border: 2px solid #fff;
    margin-left: -7px;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
}
.sc-avs .av:first-child { margin-left: 0 }
.sc-avs .av svg { width: 15px; height: 15px; fill: #fff }
/* The overflow count needs room for its label and must sit above the
   silhouette it overlaps */
.sc-avs .av.more {
    width: auto;
    min-width: 27px;
    padding: 0 6px;
    background: #eef4ff;
    color: #2a63c8;
    position: relative;
    z-index: 2;
}
.sc-lbl { font-size: 13.5px; font-weight: 650; color: var(--ink-2); white-space: nowrap }

/* The track: one gradient rule, with the stage names sitting on it */
.sc-flow {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}
.sc-flow:before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
    opacity: .32;
}
.sc-flow span {
    position: relative;
    background: #fff;
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--grey);
    white-space: nowrap;
}

/* ============================================================
   4 · Workflow — from first search to final invoice
   The seven steps ring a square stage; the product screen for the
   active step sits in the middle of the ring.
   ============================================================ */

.ringwrap { display: flex; justify-content: center; margin-top: 40px }

.ring {
    position: relative;
    /* 8 steps put nodes exactly on the diagonals, which is where the corners
       of the centre card reach — hence a wider ring than the 7-step layout. */
    width: 870px;
    max-width: 100%;
    /* Height follows width, so the ring stays a true circle if it ever has
       to shrink — node positions are percentages of each axis. */
    aspect-ratio: 1;
    flex: none;
}

/* The track: a grey circle with a brand-gradient arc showing progress.
   Rotated so the arc starts at twelve o'clock, where step 1 sits. */
.ringtrack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
/* There is no grey track: the arc is the only line, and it draws itself as
   the reader moves through the steps.

   Stroke width is in viewBox units, not px — non-scaling-stroke would put the
   dash pattern in screen space, which makes the arc tile round the circle
   several times instead of sweeping it once.

   The visible segment is driven from landing.js through both dasharray (its
   length) and dashoffset (where it starts), so the arc can grow from the head
   or unwind from the tail. */
.rt-fg {
    fill: none;
    stroke: url(#ringGrad);
    stroke-width: .55;
    stroke-linecap: round;
    stroke-dasharray: 0 301.59;    /* 2 * PI * r, r = 48 */
    stroke-dashoffset: 0;
    transition: stroke-dasharray .45s ease, stroke-dashoffset .45s ease;
}
/* Used to reposition the arc without animating the move */
.rt-fg.instant { transition: none }

/* Step nodes, placed on the circle from landing.js */
/* The button box is exactly the numbered circle and nothing else, so
   translate(-50%,-50%) seats every number dead-centre on the track. The
   label is positioned out of flow, up and outward from the circle. */
.rstep {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
/* Each step carries its own tone in --nc, ramping light to dark round the
   circle so how far through the process a step sits is visible at a glance.
   Not yet reached = outlined and faded; reached = filled. */
.rstep .num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--nc);
    color: var(--nc);
    opacity: .45;
    font-weight: 700;
    font-size: 15px;
    display: grid;
    place-items: center;
    transition: .22s;
}
.rstep .lb {
    position: absolute;
    /* --lo is set per node in landing.js: the label is pushed outward along
       the radius so the track passes clear of it, rather than behind it on a
       white patch that showed as a block sitting on the line. */
    bottom: calc(46% + var(--lo, 0px));
    font-weight: 700;
    font-size: 14.5px;
    color: var(--grey);
    transition: color .2s;
    white-space: nowrap;
}
/* Side is set from landing.js by which half of the circle the node is on,
   so labels always sit clear of the ring rather than over it. */
.rstep.side-r .lb { left: calc(100% + 12px) }
.rstep.side-l .lb { right: calc(100% + 12px) }
.rstep.done .num,
.rstep.on .num {
    opacity: 1;
    background: var(--nc);
    border-color: var(--nc);
    color: #fff;
}
.rstep.done .lb { color: var(--ink) }

.rstep:hover .num { opacity: 1 }
.rstep:focus-visible { outline: none }
.rstep:focus-visible .num { opacity: 1 }
.rstep.on .num {
    box-shadow: 0 6px 18px rgba(var(--ncrgb), .45);
    transform: scale(1.12);
}
.rstep.on .lb { color: var(--ink-2) }

/* The active step's screen, inside the ring */
.ringcenter {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 520px;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.wfhead { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap }
.wfhead b { font-size: 18px; font-weight: 750; color: var(--ink-2) }
.wfteam {
    max-width: 430px;
    margin: -6px auto 16px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--grey);
}
.wfteam b {
    background: #e6f8f2;
    color: #0b8e6d;
    border-radius: 999px;
    padding: 3px 10px;
    margin-right: 7px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.wfteam[hidden] { display: none }
.wfline {
    text-align: center;
    font-size: 14px;
    color: var(--grey);
    margin: 10px auto 14px;
    max-width: 430px;
    line-height: 1.5;
}

/* ============================================================
   5 · Demo video
   ============================================================ */

.demoframe {
    position: relative;
    max-width: 1000px;
    margin: 44px auto 0;
    border-radius: 18px;
    overflow: hidden;
    background: #10161f;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 16 / 9;
}
.demoframe video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #10161f;
}

/* Poster overlay — click to start */
.demoposter {
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    background: transparent;
    display: grid;
    place-items: center;
    transition: opacity .3s ease;
}
.demoposter:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 22, 31, .30) 0%, rgba(16, 22, 31, .55) 100%);
}
.demoposter.hide { opacity: 0; pointer-events: none }

.demoposter .pbtn {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .96);
    color: var(--ink-2);
    border-radius: 999px;
    padding: 15px 28px 15px 20px;
    font-size: 16.5px;
    font-weight: 700;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .34);
    transition: transform .22s ease, box-shadow .22s ease;
}
.demoposter:hover .pbtn { transform: scale(1.045); box-shadow: 0 18px 48px rgba(0, 0, 0, .40) }
.demoposter .pbtn .tri {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--grad);
    display: grid;
    place-items: center;
    flex: none;
}
.demoposter .pbtn .tri svg { fill: #fff; margin-left: 2px }
.demoposter .pbtn .dur { font-weight: 600; font-size: 14px; color: var(--grey) }

/* Quality selector */
.demobar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 18px auto 0;
}
.demobar .ql {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey-2);
    margin-right: 4px;
}
.qopts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }
.qbtn {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--grey);
    cursor: pointer;
    transition: .18s;
}
.qbtn:hover { color: var(--ink); border-color: #cfd9e8 }
.qbtn.on { color: var(--ink-2); border-color: #bcd3f5; background: #f5f9ff; box-shadow: var(--shadow) }

/* ============================================================
   6 · What the platform actually gives you — capability tabs
   ============================================================ */

.capnav { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; justify-content: center }
.capbtn {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--grey);
    cursor: pointer;
    font-family: inherit;
    transition: .2s;
}
.capbtn:hover { color: var(--ink); border-color: #cfd9e8 }
.capbtn.on { color: var(--ink-2); border-color: #bcd3f5; background: #fff; box-shadow: var(--shadow) }
.capbtn .pg { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--grad) }
.capbtn.on .pg { animation: pgrun 9s linear forwards }
@keyframes pgrun { from { width: 0 } to { width: 100% } }

.capstage { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; margin-top: 32px }
.capstage > * { min-width: 0 }
.capcopy .kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 14px;
}
.captitle { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px }
.capcopy h3 { font-size: 28px }
.capcopy p { color: var(--grey); font-size: 16.5px }
.capcopy .tag[hidden] { display: none }
.capcopy .tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0d9c78;
    background: #e6f8f2;
    border-radius: 999px;
    padding: 4px 11px;
}
.benefit {
    margin-top: 22px;
    padding-left: 16px;
    border-left: 3px solid;
    border-image: var(--grad) 1;
    font-weight: 600;
    color: var(--ink-2);
    font-size: 16.5px;
}

/* ============================================================
   7 · Pricing
   ============================================================ */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; align-items: start }
.plan {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px 26px;
    box-shadow: var(--shadow);
    position: relative;
}
.plan.pop { box-shadow: var(--shadow-lg); border-color: #dfe6f0 }
.pop-lbl {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 16px;
    white-space: nowrap;
}
.plan h3 { font-size: 21px; margin-bottom: 10px }
.plan .desc { color: var(--grey); font-size: 15px; min-height: 48px }
.price { font-size: 44px; font-weight: 800; margin: 18px 0 2px; letter-spacing: -.03em }
.per { color: var(--grey-2); font-size: 14.5px }
.feats { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px }
.feats li { display: flex; gap: 11px; font-size: 15px; color: var(--ink); align-items: flex-start }
.feats svg { flex: none; margin-top: 3px }

/* ============================================================
   8 · FAQ
   ============================================================ */

.faq { max-width: 860px; margin: 38px auto 0; display: grid; gap: 11px }
.q { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.q button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 24px;
    background: #fff;
    border: 0;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 650;
    color: var(--ink-2);
    cursor: pointer;
    text-align: left;
}
.q .ans { max-height: 0; overflow: hidden; transition: .3s; color: var(--grey); font-size: 16px; padding: 0 26px }
.q.open .ans { max-height: 320px; padding: 0 26px 24px }
.q .cv { transition: .25s; color: var(--grey-2); flex: none }
.q.open .cv { transform: rotate(180deg) }
.faqfoot { text-align: center; margin-top: 36px; color: var(--grey) }
.faqfoot a { color: var(--blue); font-weight: 600 }

/* ============================================================
   9 · Get in touch
   ============================================================ */

.contactcard {
    display: flex;
    align-items: center;
    gap: 26px;
    max-width: 560px;
    margin: 36px auto 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: var(--shadow);
    transition: transform .25s, box-shadow .25s;
}
.contactcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg) }

.cc-photo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(31, 45, 71, .14);
}
.cc-name { font-size: 20px; font-weight: 750; color: var(--ink-2); letter-spacing: -.01em }
.cc-org {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey-2);
    margin-top: 4px;
}
.cc-mail {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--blue);
    word-break: break-word;
}
.cc-mail:hover { color: var(--blue-d); text-decoration: underline }
.cc-mail svg { flex: none; color: var(--grey-2) }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1000px) {
    /* No room for a ring — unroll it into a vertical list */
    .ring { width: 100%; aspect-ratio: auto; display: grid; gap: 4px }
    .ringtrack { display: none }
    .rstep {
        /* Must be static, not relative: landing.js writes the ring position
           into inline left/top, which a relative box would still honour. The
           label is static here, so no containing block is needed. */
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        /* .ringcenter precedes the JS-appended steps in the DOM, so the
           steps have to be ordered ahead of it once the ring unrolls */
        order: 1;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 7px 0;
    }
    .rstep .lb { position: static; bottom: auto }
    .rstep.side-r .lb, .rstep.side-l .lb { left: auto; right: auto }
    .rstep.on .num { transform: none }
    .ringcenter { position: static; transform: none; width: 100%; margin-top: 26px; order: 2 }
    .wfhead { justify-content: flex-start }
    .wfline { text-align: left; margin-left: 0 }
    .capstage { grid-template-columns: 1fr; gap: 30px }
    .plans { grid-template-columns: 1fr }
    .ecoB { height: auto; padding: 26px 18px; display: grid; gap: 12px }
    .ecoB svg.links { display: none }
    .ecoB .core { position: static; transform: none; order: -1; width: auto }
    .ecoB .core-txt { max-height: none; margin-top: 12px; opacity: 1; overflow: visible }
    .scard { position: static; transform: none !important; width: 100% }
    .scard .sc-txt { max-height: none; margin-top: 10px; opacity: 1; overflow: visible }
}

@media (max-width: 620px) {
    .scr-body { padding: 12px }
    .scr .thd, .scr .trow { grid-template-columns: 92px 46px 40px 1fr 58px; gap: 4px; font-size: 10.5px }
    .scr .trow .dt i { width: auto; margin-right: 4px }
    .scr .trow .st { font-size: 10px }
    .scr .hb { grid-template-columns: 100px 1fr 36px; gap: 6px }
    .scr .hl { font-size: 9px }
    .scr .kpis, .scr .dvs.g2 { grid-template-columns: 1fr }
    .scalecard { padding: 16px 18px }
    .sc-row { flex-direction: column; align-items: flex-start; gap: 12px }
    .sc-who { width: auto }
    .sc-flow { width: 100% }
    .contactcard { flex-direction: column; text-align: center; gap: 18px }
    .cc-mail { font-size: 14.5px }
    .demoposter .pbtn { padding: 12px 20px 12px 14px; font-size: 14.5px; gap: 10px }
    .demoposter .pbtn .tri { width: 34px; height: 34px }
}

@media (prefers-reduced-motion: reduce) {
    .capbtn.on .pg { animation: none; width: 100% }
    .caret { animation: none }
    .ecoB svg.links line { animation: none }
}

/* ============================================================
   Review round: connected-system line, capability team line and
   split parts, pricing ticks
   ============================================================ */

/* The sentence that names the product, under the scattered-work paragraph */
.connects { color: var(--grey) }
.connects b { color: var(--ink-2); font-weight: 700 }

/* A capability's "For teams" line — the same pill the workflow ring uses */
.capteam {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--grey);
}
.capteam b {
    background: #e6f8f2;
    color: #0b8e6d;
    border-radius: 999px;
    padding: 3px 10px;
    margin-right: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.capteam[hidden] { display: none }

/* Where a capability is told in two sub-headed halves rather than one block */
.cappart {
    display: block;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-2);
}
.cappart:first-child { margin-top: 0 }
#capText .cappart + span { display: block; margin-top: 4px }

/* Pricing: a tick against every feature */
.feats.ticks li {
    position: relative;
    padding-left: 26px;
    list-style: none;
}
.feats.ticks li:before {
    content: "";
    position: absolute;
    left: 2px;
    /* anchored to the first line, not centred, so a wrapping feature still
       lines its tick up with the text it belongs to */
    top: 7px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: rotate(-45deg);
}