/* Time Clock product page. Builds on site.css tokens and components; only page-specific pieces live here.
   Colour roles: blue is time on the clock, green is verified presence and paid time,
   hatched amber is unpaid time, and amber marks a punch made without a tag. */

:root {
    --work: var(--signal);
    --break: var(--green);
    --lunch: var(--escalate);
}

.product-name {
    margin-bottom: 18px;
    font-variation-settings: "wdth" 118;
    font-weight: 600;
    color: var(--signal);
}

.time-hero .hero-copy h1 {
    max-width: 12ch;
}

/* Time card */

.timecard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 var(--line), 0 24px 48px -24px rgba(20, 33, 61, 0.28);
    overflow: hidden;
}

.timecard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.timecard-name {
    font-weight: 650;
}

.timecard-sub {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.timecard-clock {
    font-variation-settings: "wdth" 112;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--signal);
}

.shift {
    padding: 22px 22px 6px;
}

.shift-track {
    position: relative;
    height: 34px;
    border-radius: 8px;
    background: var(--base);
    box-shadow: inset 0 0 0 1px var(--line);
}

.seg {
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 3px;
}

.seg-work {
    background: var(--work);
}

.seg-break {
    background: var(--break);
}

.seg-lunch {
    background: repeating-linear-gradient(135deg, var(--lunch) 0 3px, transparent 3px 6px);
    box-shadow: inset 0 0 0 1.5px var(--lunch);
}

.tap {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--verified);
}

.tap::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--verified);
    box-shadow: 0 0 0 3px var(--surface);
}

.shift-axis {
    position: relative;
    height: 22px;
    margin-top: 4px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.shift-axis span {
    position: absolute;
    transform: translateX(-50%);
}

.shift-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.shift-key li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.key {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
}

.key-work { background: var(--work); }
.key-break { background: var(--break); }
.key-lunch {
    background: repeating-linear-gradient(135deg, var(--lunch) 0 2px, transparent 2px 4px);
    box-shadow: inset 0 0 0 1px var(--lunch);
}
.key-tap {
    width: 10px;
    border-radius: 50%;
    background: var(--verified);
}

.punches {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    margin-top: 14px;
    min-height: 268px;
}

.punch {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    padding: 10px 22px;
    font-size: 0.9rem;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.punch.is-pending {
    opacity: 0;
    transform: translateY(6px);
}

.punch-time {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.punch-what {
    display: flex;
    flex-direction: column;
    font-weight: 600;
}

.punch-where {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.punch-flag {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.punch-flag.is-verified {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--verified-soft);
    color: var(--verified);
    font-weight: 700;
}

.totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.totals div {
    padding: 14px 22px;
}

.totals div + div {
    border-left: 1px solid var(--line);
}

.totals dt {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.totals dd {
    font-variation-settings: "wdth" 112;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.25rem;
}

.totals-minus dd {
    color: var(--lunch);
}

.totals-paid {
    background: var(--verified-soft);
}

.totals-paid dd {
    color: var(--verified);
}

.timecard-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--ink-soft);
}

/* Contrast statement */

.contrast-section {
    background: var(--deep);
    color: var(--on-deep);
}

.contrast {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.contrast h2 {
    max-width: 18ch;
}

.contrast-body {
    display: grid;
    gap: 18px;
    font-size: 1.125rem;
    color: var(--on-deep-soft);
}

.contrast-body p:last-child {
    color: var(--on-deep);
}

/* Setup steps reuse the .loop component from site.css, with four steps */

.loop.setup {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.loop.setup li:last-child .loop-step {
    background: var(--verified);
    border-color: var(--verified);
    color: var(--surface);
}

/* Split layout for board and automation */

.board-section,
.sheet-section {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.split-reverse .split-copy {
    order: 2;
}

.split-copy p {
    margin-top: 18px;
    max-width: 52ch;
    font-size: 1.125rem;
    color: var(--ink-soft);
}

/* Active shifts board */

.board {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--base);
    overflow: hidden;
}

.board-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.board-title {
    font-weight: 650;
}

.board-count {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.board-rows li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 48px;
    column-gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}

.board-rows li:last-child {
    border-bottom: 0;
}

.board-rows .who {
    font-weight: 600;
}

.board-rows .area {
    color: var(--ink-soft);
}

.board-rows .since {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink-soft);
}

.state {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.state.is-on {
    background: var(--verified-soft);
    color: var(--verified);
}

.state.is-break {
    background: var(--signal-soft);
    color: var(--signal);
}

.state.is-lunch {
    background: var(--signal-soft);
    color: var(--signal);
}

.state.is-unverified {
    background: var(--escalate-soft);
    color: var(--escalate);
}

/* Work policies */

.policies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 880px;
}

.policy {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.policy h3 {
    margin-bottom: 12px;
}

.policy dl div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-top: 1px dashed var(--line);
}

.policy dt {
    color: var(--ink-soft);
}

.policy dd {
    font-weight: 600;
}

.policy dd.is-strict {
    color: var(--verified);
}

.policy-note {
    margin-top: 24px;
    max-width: 62ch;
    color: var(--ink-soft);
}

/* Flow diagram */

.flowchart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    background: var(--signal-soft);
}

.node {
    position: relative;
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
}

.node-trigger {
    border-top: 4px solid var(--verified);
}

.node-action {
    border-top: 4px solid var(--signal);
}

.node-kind {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.node-title {
    font-weight: 650;
}

.node-detail {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.node-outputs {
    margin-top: 12px;
    display: grid;
    gap: 4px;
    font-size: 0.8rem;
}

.node-outputs li {
    padding: 3px 8px;
    border-radius: 4px;
    color: var(--ink-soft);
    background: var(--base);
}

.node-outputs li.is-used {
    background: var(--verified-soft);
    color: var(--verified);
    font-weight: 700;
}

.node-links {
    position: relative;
    display: grid;
    gap: 16px;
}

/* Connector: from the trigger's used output to a bracket that branches to each action */
.node-outputs li.is-used {
    position: relative;
}

.node-outputs li.is-used::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 39px;
    height: 2px;
    margin-top: -1px;
    background: var(--verified);
}

.node-links::before {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: -20px;
    width: 2px;
    background: var(--verified);
}

.node-links .node-action::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -21px;
    width: 21px;
    height: 2px;
    margin-top: -1px;
    background: var(--verified);
}

/* Timesheet */

.sheet {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--base);
    overflow: hidden;
}

.sheet-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #1d6f42;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.sheet-table {
    overflow-x: auto;
}

.sheet-row {
    display: grid;
    grid-template-columns: 1.3fr 1.2fr 0.7fr 0.7fr 0.6fr 0.6fr;
    min-width: 620px;
    border-bottom: 1px solid var(--line);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.sheet-row span {
    padding: 8px 14px;
    border-right: 1px solid var(--line);
}

.sheet-row span:last-child {
    border-right: 0;
}

.sheet-head {
    background: var(--surface);
    font-weight: 700;
}

.sheet-date span {
    grid-column: 1 / -1;
    font-weight: 700;
    color: var(--signal);
}

.sheet-detail {
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.sheet-detail span:first-child {
    padding-left: 30px;
}

.sheet-row span:nth-child(6) {
    font-weight: 700;
    color: var(--verified);
}

.sheet-detail span:nth-child(6),
.sheet-head span:nth-child(6) {
    color: inherit;
}

/* Family */

.family-section {
    padding-top: var(--space-section);
}

.family {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 72px);
}

.family h2 {
    max-width: 14ch;
}

/* FAQ */

.faq-section {
    padding-top: 0;
}

.faq {
    max-width: 820px;
    border-top: 1px solid var(--line);
}

.faq details {
    border-bottom: 1px solid var(--line);
}

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    font-weight: 650;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--signal);
    transition: transform 0.2s ease;
}

.faq details[open] summary::after {
    transform: rotate(45deg);
}

.faq details p {
    max-width: 66ch;
    padding-bottom: 20px;
    color: var(--ink-soft);
}

/* Responsive */

@media (max-width: 1080px) {
    .loop.setup {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }

    .loop.setup li:nth-child(2)::before {
        display: none;
    }
}

@media (max-width: 900px) {
    .contrast,
    .split,
    .family {
        grid-template-columns: minmax(0, 1fr);
    }

    .split-reverse .split-copy {
        order: 0;
    }

    .policies {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .loop.setup {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .loop.setup li:nth-child(2)::before {
        display: block;
    }

    .punch {
        padding: 10px 16px;
        column-gap: 10px;
    }

    .shift,
    .timecard-head,
    .timecard-caption {
        padding-left: 16px;
        padding-right: 16px;
    }

    .totals div {
        padding: 12px 14px;
    }

    .totals dd {
        font-size: 1.05rem;
    }

    .board-rows li {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 2px;
        padding: 12px 16px;
    }

    .board-rows .area {
        grid-row: 2;
        font-size: 0.82rem;
    }

    .board-rows .since {
        display: none;
    }

    .flowchart {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .node-outputs li.is-used::after,
    .node-links .node-action::before {
        display: none;
    }

    .node-links::before {
        top: auto;
        bottom: 100%;
        left: 50%;
        width: 2px;
        height: 28px;
    }
}

/* Issue card: an issue and its timeline, shared by the product pages */

.issue-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.issue-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.issue-number {
    font-variation-settings: "wdth" 115;
    font-weight: 700;
    font-size: 1.15rem;
}

.issue-state {
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--verified);
    color: var(--surface);
    font-size: 0.8rem;
    font-weight: 700;
}

.issue-title {
    margin: 6px 0 18px;
    font-weight: 600;
}

.issue-timeline {
    display: grid;
    gap: 0;
    padding-left: 18px;
    border-left: 2px solid var(--line);
}

.issue-timeline li {
    position: relative;
    padding: 0 0 16px;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.issue-timeline li:last-child {
    padding-bottom: 0;
}

.issue-timeline li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--escalate);
    box-shadow: 0 0 0 3px var(--surface);
}

.issue-timeline li.is-done::before {
    background: var(--verified);
}

.issue-timeline span {
    display: inline-block;
    min-width: 50px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ink);
}

/* Record facts: a definition list of what a record keeps, shared by the product pages */

.record-facts {
    display: grid;
    border-top: 1px solid var(--line);
}

.record-facts div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.record-facts dt {
    font-weight: 650;
}

.record-facts dd {
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    .record-facts div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

/* Story sections: the shared page order every solution page follows.
   Hero, Current state, The gap, Better state, The solution, User value, Scenario,
   Expansion opportunities, Get started, Easy to implement, Proof, FAQ, Final CTA. */

/* A long hero headline gets a smaller size rather than wrapping to five lines */
.hero .hero-copy h1.h1-long {
    max-width: none;
    font-size: clamp(1.8rem, 2.6vw, 2.25rem);
}

.hero-copy .lede + .lede {
    margin-top: 14px;
}

/* Current state: the headline on the left, what the customer already has on the right */
.statement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.statement h2 {
    max-width: 18ch;
}

.statement-body {
    display: grid;
    gap: 16px;
    font-size: 1.125rem;
    color: var(--ink-soft);
}

.statement-body .statement-close {
    color: var(--ink);
    font-weight: 600;
}

/* A plain list inside the copy: things the customer already has or uses */
.plain-list {
    display: grid;
    gap: 6px;
    padding-left: 0;
}

.plain-list li {
    position: relative;
    padding-left: 22px;
}

.plain-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--lapsed);
}

.contrast-body .plain-list li::before {
    box-shadow: inset 0 0 0 2px var(--on-deep-soft);
}

/* The gap: questions still left open, on the dark contrast band */
.gap-list {
    display: grid;
    gap: 8px;
}

.gap-list li {
    position: relative;
    padding-left: 26px;
    color: var(--on-deep);
}

.gap-list li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: 0.2em;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--on-deep-soft);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--on-deep-soft);
}

.contrast-body .gap-close {
    padding-top: 6px;
    font-weight: 650;
    color: var(--on-deep);
}

/* Better state: the stages of the improved process, in order */
.stage-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    margin: 8px 0 0;
}

.stage-strip li {
    display: flex;
    align-items: center;
    font-variation-settings: "wdth" 112;
    font-weight: 650;
}

.stage-strip li span {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--signal);
    background: var(--surface);
    color: var(--signal);
    white-space: nowrap;
}

.stage-strip li:last-child span {
    border-color: var(--verified);
    background: var(--verified);
    color: var(--surface);
}

/* The connector between stages */
.stage-strip li + li::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--line);
}

.better {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.better-body {
    display: grid;
    gap: 14px;
    font-size: 1.125rem;
    color: var(--ink-soft);
}

.better-close {
    margin-top: clamp(32px, 4vw, 48px);
    padding: 18px 22px;
    border-radius: var(--radius-sm);
    background: var(--signal-soft);
    font-size: 1.1rem;
    max-width: 880px;
}

/* The solution: closing lines under the capability list */
.split-copy .solution-close {
    font-weight: 600;
    color: var(--ink);
}

.solution-extra {
    margin-top: clamp(32px, 4vw, 48px);
    display: grid;
    gap: 14px;
    max-width: 880px;
    font-size: 1.05rem;
    color: var(--ink-soft);
}

.solution-extra .solution-close {
    font-weight: 600;
    color: var(--ink);
}

/* User value: four outcomes */
.values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.value {
    padding: 24px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--green);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.value h3 {
    font-variation-settings: "wdth" 110;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}

.value p {
    margin-top: 10px;
    color: var(--ink-soft);
}

/* Scenario: the setup, then what happens with Command Center, step by step */
.scenario-section {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.scenario-steps-label {
    margin-top: 22px;
    font-weight: 650;
    color: var(--ink);
}

.scenario-steps {
    display: grid;
    gap: 0;
    margin-top: 12px;
    padding-left: 18px;
    border-left: 2px solid var(--line);
    counter-reset: scenario;
}

.scenario-steps li {
    position: relative;
    padding: 0 0 12px;
    color: var(--ink-soft);
    counter-increment: scenario;
}

.scenario-steps li:last-child {
    padding-bottom: 0;
}

.scenario-steps li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 3px var(--surface);
}

.scenario-steps li.is-flag::before {
    background: var(--escalate);
}

.scenario-steps li.is-done::before {
    background: var(--verified);
}

.split-copy .scenario-close {
    margin-top: 22px;
    font-weight: 600;
    color: var(--ink);
}

/* Expansion opportunities: a list of areas, each with a short description */
.expansion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(24px, 4vw, 48px);
    border-top: 1px solid var(--line);
}

.expansion div {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.expansion dt {
    font-variation-settings: "wdth" 110;
    font-weight: 700;
}

.expansion dd {
    margin-top: 6px;
    color: var(--ink-soft);
}

.uses-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.uses-chips li {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 500;
}

.expansion-close {
    margin-top: 32px;
    max-width: 760px;
    font-size: 1.1rem;
    font-weight: 600;
}

.expansion-note {
    margin-top: 24px;
    max-width: 760px;
    font-size: 1.05rem;
    color: var(--ink-soft);
}

/* Get started: three short steps */
.start-section {
    padding-bottom: 0;
}

.loop.setup.start-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.start-close {
    margin-top: 40px;
    max-width: 760px;
    font-size: 1.1rem;
    color: var(--ink-soft);
}

/* Easy to implement: a panel with a green rule */
.easy {
    display: grid;
    gap: 12px;
    padding: clamp(24px, 4vw, 40px);
    border-left: 4px solid var(--green);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface);
    max-width: 880px;
}

.easy h2 {
    margin-bottom: 6px;
}

.easy p {
    font-size: 1.075rem;
    color: var(--ink-soft);
}

.easy .easy-close {
    font-weight: 650;
    color: var(--ink);
}

/* Proof: real customer results, on a dark band */
.proof-section {
    background: var(--deep);
    color: var(--on-deep);
}

.proof-section .section-head p {
    color: var(--on-deep-soft);
}

.proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.proof div {
    padding-top: 18px;
    border-top: 2px solid var(--green);
}

.proof dt {
    font-variation-settings: "wdth" 118;
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.proof dd {
    margin-top: 8px;
    color: var(--on-deep-soft);
}

.proof-note {
    margin-top: 32px;
    max-width: 760px;
    color: var(--on-deep-soft);
}

.reg-note {
    max-width: 820px;
    margin-top: 28px;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

@media (max-width: 1080px) {
    .values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expansion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .proof {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .statement,
    .better {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .values,
    .expansion,
    .loop.setup.start-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .stage-strip li span {
        padding: 6px 12px;
        font-size: 0.92rem;
    }

    /* On a phone the strip wraps, so the stages sit apart without connectors that could start a line */
    .stage-strip {
        gap: 8px;
    }

    .stage-strip li + li::before {
        display: none;
    }
}