/* Round two · the whole below-hero page (round-two.html only). */
:root {
    --sub: rgba(255, 255, 255, 0.78);
    --crimson: #d44051;
    --tan: #7f7465;
    --s18: 18px;
    --s29: 29.12px;
    --s47: 47.12px;
    --s76: 76.24px;
    --s123: 123.36px;
    --s199: 199.6px;
    --gut: 5vw;
    --rise-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 809px) {
    :root {
        --gut: 24px;
    }
}
html,
body {
    margin: 0;
    background: #000000;
    color: #ffffff;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body {
    font-size: 18px;
    line-height: 1.5;
    overflow-x: clip;
}
* {
    box-sizing: border-box;
}
h2,
h3,
p {
    margin: 0;
}
/* Display type, the hero headline's rule. */
.h {
    font-weight: 600;
    line-height: 1;
    letter-spacing: clamp(calc(-3 * var(--bmw-u)), -0.035em, calc(-1 * var(--bmw-u)));
}
.sub {
    color: var(--sub);
}
.key {
    color: #ffffff;
    font-weight: 500;
}

/* Lines rise on a timer once reached, never scrubbed, never reversed. */
.rise {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 480ms ease,
        transform 640ms var(--rise-ease);
}
.rise.on {
    opacity: 1;
    transform: none;
}

/* ---------- the crimson underline pen ---------- */
.uline {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.uline .ink {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}
.uline .ink path {
    fill: var(--crimson);
}
.uline .phrase {
    position: relative;
    z-index: 1;
}
.probe {
    display: inline-block;
    width: 0;
    height: 0;
}
.brush-host {
    position: relative;
    isolation: isolate;
}
.brush-layer {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.band {
    transition: color 220ms ease 260ms;
}

/* The real "Test it yourself" renders into these (the shell's portal). */
[data-bmw-cta] {
    display: inline-flex;
    min-height: 48px;
}

/* ======================= DEMOS ======================= */
/* Each demo is as tall as what it shows: a full screen each left 190 to 220
   empty between them (the owner, 2026-09-14: "quite a few of them seem like
   they're too far away"). The fit below still keeps each one whole on screen. */
.demo {
    position: relative;
    display: flex;
    align-items: center;
}
/* Demo 1 and demo 3 scale with the screen. His words, 2026-09-14: "It needs
   to be something that adjusts to the screen size, not a fixed size for one
   screen size." Every size in these two sections is calc(N * var(--bmw-u)):
   N is the size approved on his 1204 by 630 laptop view (390 wide on a
   phone). The unit is the page's shared one (assets/r2-scale.css). The
   devices add a measured fit on top (assets/r2-demos.js). */
.demo .stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--bmw-u));
    padding: calc(64 * var(--bmw-u)) var(--gut);
    text-align: center;
}
/* The first demo keeps more room under the full-screen hero. */
#demo-firms .stage {
    padding-top: calc(96 * var(--bmw-u));
}
/* The owner, 2026-09-13: the big text sells the outcome, the smaller line
   under it carries the story the visitor relates to. */
.head {
    font-size: calc(47.12 * var(--bmw-u));
    max-width: 24em;
    text-wrap: balance;
}
.head .line {
    display: block;
}
.lede {
    max-width: 34em;
    font-size: max(14px, calc(20 * var(--bmw-u)));
    line-height: 1.5;
    color: var(--sub);
    text-wrap: balance;
}
/* Demo 1, his words: the line under the headline "needs to be just as long as
   that heading text and only two lines". Width 0 with min-width 100% lets the
   heading alone set the width. */
.lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--bmw-u));
    width: max-content;
    max-width: 100%;
}
.lockup .lede {
    width: 0;
    min-width: 100%;
    max-width: none;
}
/* Demo 2, the owner, 2026-09-15: "make the subtext two lines, not three".
   Its headline got short ("Your CRM runs itself."), so the line under it sets
   its own width: this sentence is 52em on one line, and 28em holds it on two
   at every computer size. Phones cap it at the screen. */
#demo-crm .lockup .lede {
    width: 28em;
    min-width: 100%;
    max-width: 100%;
}
.proof {
    display: flex;
    align-items: center;
    justify-content: center;
}
.note {
    margin-top: calc(-8 * var(--bmw-u));
    font-size: max(12px, calc(14 * var(--bmw-u)));
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}

/* ---------- demo 1: the form on your site, the timer, then the call ---------- */
/* The owner, 2026-09-14, picking option 01, real devices: "It should show the
   person filling out the form, clicking Send, and then the timer pops up."
   Sam's window, the timer and your phone sit in one row, so the end frame
   reads site, seconds, phone. */
.d1-scene {
    display: grid;
    grid-template-columns: calc(356 * var(--u)) calc(162 * var(--u)) calc(184 * var(--pu));
    align-items: center;
    justify-items: center;
}
.d1-scene .dv-browser {
    width: 100%;
}

/* ---------- demo 2: placeholder ---------- */
.demo-two {
    justify-content: center;
}
.demo-two p {
    font-size: max(14px, calc(14 * var(--bmw-u)));
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

/* ---------- demo 3: Sam's phone ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--bmw-u));
    font-size: max(12px, calc(14 * var(--bmw-u)));
    line-height: 1.4;
    font-weight: 500;
    color: #ffffff;
}
.eyebrow .dia {
    width: calc(7 * var(--bmw-u));
    height: calc(7 * var(--bmw-u));
    background: #ffffff;
    transform: rotate(45deg);
}
/* Words on the left, the devices on the right, so the outcome and the button
   sit beside the proof instead of under it. */
.texts .stage {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(56 * var(--bmw-u));
    text-align: left;
}
.texts-copy {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(24 * var(--bmw-u));
    width: calc(548 * var(--bmw-u));
}
/* One pain sentence per line beside the devices. */
@media (min-width: 810px) {
    .texts .head {
        font-size: calc(39.7 * var(--bmw-u));
    }
}
.texts .head {
    max-width: none;
}
.texts .lede {
    text-wrap: pretty;
}
.texts .cta-row {
    margin-top: calc(8 * var(--bmw-u));
}
/* In hand, option 01: your site sits behind and Sam's phone stands in front of
   its empty right side; the timer runs from under the form to the phone.
   His words, 2026-09-14: "It needs to be very clear that it's a person who
   submitted an inquiry on their site, that it was for a quote." */
.d3-scene {
    position: relative;
    flex: none;
    width: calc(484 * var(--u));
    height: calc(442 * var(--u));
}
.d3-scene .dv-browser {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(410 * var(--u));
}
/* The form and the site's own header keep clear of the phone in front. */
.d3-scene .dv-form,
.d3-scene .dv-site {
    width: calc(270 * var(--u));
}
.d3-scene .dv-link {
    position: absolute;
    left: calc(150 * var(--u));
    bottom: 0;
}
.d3-scene .dv-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}
@media (max-width: 1099px) {
    .texts .stage {
        flex-direction: column;
        gap: calc(28 * var(--bmw-u));
        text-align: center;
    }
    .texts-copy {
        width: auto;
        align-items: center;
    }
}

/* ======================= EVERY HOUR ======================= */
/* From here down every size is the page's shared unit, --bmw-u
   (assets/r2-scale.css): N is the px size on his 1204 by 630 laptop view,
   section spacing included. The gutter stays 5vw, so these sections keep
   lining up with the hero and the title. Body copy never drops under 14px. */
/* Section spacing tightened, the owner, 2026-09-14: "There are a lot of
   sections where it seems like the padding is huge ... quite a few of them
   seem like they're too far away." */
.every {
    position: relative;
    padding: calc(64 * var(--bmw-u)) 0 calc(72 * var(--bmw-u));
}
/* The title takes .get-title's type, fill and reveal (below); the stressed
   worker's photo stands on the right, so the photos run right, left, right. */
.every-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(360 * var(--bmw-u));
    align-items: center;
    column-gap: calc(48 * var(--bmw-u));
    padding: 0 var(--gut);
}
.every-body .lines {
    margin: calc(4 * var(--bmw-u)) 0 0;
}
.eh-title-wrap {
    margin-bottom: calc(36 * var(--bmw-u));
}
.every-photo {
    position: relative;
    margin: 0;
    /* 3:4 on every screen, cropped from just above the curtains to under his
       desk (the owner, 2026-09-15: "it needs to get wider until it's a 3:4
       aspect ratio. I think that should be the ratio always"). */
    aspect-ratio: 3 / 4;
    border-radius: calc(24 * var(--bmw-u));
    overflow: hidden;
    background: #111111;
}
.every-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 27%;
}
/* A night photo on a black page: the demo windows' hairline keeps its edge. */
.every-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    pointer-events: none;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.lines {
    position: relative;
    margin: calc(4 * var(--bmw-u)) var(--gut) 0;
    max-width: calc(900 * var(--bmw-u));
    display: flex;
    flex-direction: column;
    gap: calc(14 * var(--bmw-u));
}
.get-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.get-photo {
    position: relative;
    margin: 0;
    max-width: 100%;
    border-radius: calc(24 * var(--bmw-u));
    overflow: hidden;
    background: #111111;
}
/* The strike canvas bleeds 24 across and 16 down past the lines; r2-page.js
   draws with the same offsets in the same unit. */
.lines .strikes {
    position: absolute;
    left: calc(-24 * var(--bmw-u));
    top: calc(-16 * var(--bmw-u));
    pointer-events: none;
    z-index: 2;
}
.lines .line {
    align-self: flex-start;
    font-size: max(14px, calc(29.12 * var(--bmw-u)));
    line-height: 1.4;
    letter-spacing: calc(-0.4 * var(--bmw-u));
}
.step {
    opacity: 0;
    transform: translateX(calc(-72 * var(--bmw-u)));
    transition:
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.3s;
}
.step.in {
    opacity: 1;
    transform: none;
}
.r2-measuring .step {
    transform: none !important;
    transition: none !important;
}
.close1 {
    margin-top: calc(20 * var(--bmw-u));
}
.close2 {
    margin-top: calc(6 * var(--bmw-u));
    font-size: calc(47.12 * var(--bmw-u));
}

/* ======================= CONFIDENTIALITY (T1) ======================= */
.conf-wrap {
    padding: calc(64 * var(--bmw-u)) calc(40 * var(--bmw-u));
}
.conf {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.72);
    border-radius: calc(24 * var(--bmw-u));
    padding: calc(120 * var(--bmw-u)) calc(var(--gut) + 3vw);
    /* One team photo filling the left half to the card's edge, words on the
       right, so it doesn't sit on the same side as the photo beside "Built to
       run your business" right after it (the owner, 2026-09-14: "those images
       are on the same side. If you could flip which side the image is on in
       Client Confidentiality, I think it would look better"). */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    overflow: hidden;
    transform: translateY(calc(40 * var(--bmw-u)));
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition:
        transform 900ms var(--rise-ease),
        box-shadow 900ms ease;
}
.conf.on {
    transform: none;
    box-shadow: 0 calc(50 * var(--bmw-u)) calc(90 * var(--bmw-u)) calc(-50 * var(--bmw-u)) rgba(255, 255, 255, 0.16);
}
.conf h2 {
    color: #000000;
    font-size: calc(47.12 * var(--bmw-u));
}
.conf p {
    margin-top: calc(32 * var(--bmw-u));
    max-width: 30em;
    font-size: max(14px, calc(29.12 * var(--bmw-u)));
    line-height: 1.5;
}
.conf .key {
    color: #000000;
}
/* The card's padding moves onto the words, so the photo reaches the card's
   edges. `.conf-wrap .conf` outranks the phone rule's `.conf` padding too. */
.conf-wrap .conf {
    padding: 0;
}
.conf-text {
    align-self: center;
    padding: calc(120 * var(--bmw-u)) calc(var(--gut) + 3vw);
}
.conf-photo {
    position: relative;
    order: -1;
    margin: 0;
    min-height: calc(420 * var(--bmw-u));
}
.conf-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 52%;
}
@media (max-width: 809px) {
    .conf-wrap .conf {
        grid-template-columns: minmax(0, 1fr);
    }
    .conf-wrap .conf-text {
        padding: calc(64 * var(--bmw-u)) calc(24 * var(--bmw-u));
    }
    /* Phones keep the words first, the photo under them. */
    .conf-photo {
        order: 0;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

/* ======================= WHAT YOU GET ======================= */
.get {
    /* the form's heading follows straight on, so the gap stays short */
    padding: calc(64 * var(--bmw-u)) var(--gut) calc(32 * var(--bmw-u));
    /* the burn canvas bleeds 60 (in the unit) past the title; never past the page */
    overflow-x: clip;
}
@media (hover: none) {
    .get-burn {
        display: none;
    }
}
/* The outcome beside the words: the owner's photo of a man with his arms
   open. Below the words on phones. */
.get-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(340 * var(--bmw-u));
    align-items: center;
    column-gap: calc(64 * var(--bmw-u));
}
.get-photo {
    aspect-ratio: 4 / 5;
}
.get-photo img {
    object-position: 66% 62%;
}
.get-title-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
/* The hero headline's type, exactly, in the same unit: Inter 600, 76.24,
   line-height 1, tracking clamp(-3, -0.035em, -1). */
.get-title {
    position: relative;
    font-size: calc(76.24 * var(--bmw-u));
    font-weight: 600;
    line-height: 1;
    letter-spacing: clamp(calc(-3 * var(--bmw-u)), -0.035em, calc(-1 * var(--bmw-u)));
    text-wrap: balance;
}
/* Outline and fill are the same words stacked. The outline is the hero's
   hollow-letter pen (0.04em, its inner half under the black fill); the fill
   wipes in over it and the outline is cut away just as fast, so the filled
   title carries no stroke and weighs what the hero does. */
.gt-outline,
.gt-fill {
    display: block;
    transition: clip-path 1100ms cubic-bezier(0.5, 0, 0.2, 1);
}
.gt-outline {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    color: #000000;
    -webkit-text-stroke: 0.04em #ffffff;
    paint-order: stroke fill;
    clip-path: inset(-0.3em -0.2em -0.3em 0%);
    pointer-events: none;
}
.gt-fill {
    position: relative;
    color: #ffffff;
    clip-path: inset(-0.3em 100% -0.3em -0.2em);
}
.get-title.filled .gt-outline {
    clip-path: inset(-0.3em -0.2em -0.3em 100%);
}
.get-title.filled .gt-fill {
    clip-path: inset(-0.3em 0% -0.3em -0.2em);
}
.get-title.done .gt-outline {
    visibility: hidden;
}
.get-title.done .gt-fill {
    clip-path: none;
    transition: none;
}
.get-burn {
    position: absolute;
    left: calc(-60 * var(--bmw-u));
    top: calc(-60 * var(--bmw-u));
    width: calc(100% + 120 * var(--bmw-u));
    height: calc(100% + 120 * var(--bmw-u));
    pointer-events: none;
    z-index: 2;
}
.get p {
    max-width: 34em;
    font-size: max(14px, calc(18 * var(--bmw-u)));
    line-height: 1.5;
}
.get .l1 {
    margin-top: calc(32 * var(--bmw-u));
}
.get .l2 {
    margin-top: calc(12 * var(--bmw-u));
}

/* ======================= PHONES ======================= */
@media (max-width: 809px) {
    /* Phones: the page's unit is measured on a 390 wide screen
       (assets/r2-scale.css), and each demo still fits whole under the menu. */
    .demo .stage {
        gap: calc(16 * var(--bmw-u));
        padding: calc(56 * var(--bmw-u)) var(--gut);
    }
    #demo-firms .stage {
        padding-top: calc(88 * var(--bmw-u));
    }
    .head {
        font-size: calc(26 * var(--bmw-u));
    }
    .lede {
        font-size: calc(16 * var(--bmw-u));
    }
    .lockup {
        gap: calc(12 * var(--bmw-u));
    }
    .note {
        margin-top: calc(-6 * var(--bmw-u));
        font-size: max(12px, calc(13 * var(--bmw-u)));
    }
    .proof {
        align-self: stretch;
    }
    /* Phones read top to bottom: the story, the devices, then the outcome.
       The owner, 2026-09-15: the words sit on the left ("It should not be
       centered"), and the top clears the header button and its blur band
       ("the very top, when it's underneath the 'Test it yourself' button, is
       hidden within the blur"). */
    .texts .stage {
        gap: calc(10 * var(--bmw-u));
        padding-top: calc(100 * var(--bmw-u));
        text-align: left;
    }
    .texts .eyebrow {
        align-self: flex-start;
    }
    .texts .head,
    .texts .lede {
        align-self: stretch;
    }
    .texts-copy {
        display: contents;
    }
    .texts .eyebrow {
        order: 1;
    }
    .texts .head {
        order: 2;
    }
    .texts .lede {
        order: 3;
    }
    .texts .proof {
        order: 4;
    }
    .texts .cta-row {
        order: 5;
        margin-top: 0;
    }
    /* Both demos: the phone stands beside the form, in front of the window's
       right edge, and the timer sits under the form. One arrangement for both,
       so the two phones sit and scale alike and nothing is cropped. */
    .dv-scene {
        --ps: 0.86;
    }
    .d1-scene,
    .d3-scene {
        display: block;
        position: relative;
        width: calc(342 * var(--u));
        height: calc(350 * var(--u));
        margin-inline: auto;
    }
    .d1-scene .dv-browser,
    .d3-scene .dv-browser {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(200 * var(--u));
    }
    .dv-scene .dv-tabs,
    .dv-scene .dv-site,
    .dv-scene .dv-nav {
        display: none;
    }
    .dv-scene .dv-tool {
        height: calc(30 * var(--u));
        padding: 0 calc(8 * var(--u));
    }
    .dv-scene .dv-addr {
        height: calc(22 * var(--u));
        padding: 0 calc(8 * var(--u));
    }
    .dv-scene .dv-page {
        padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
    }
    .d1-scene .dv-form,
    .d3-scene .dv-form {
        width: calc(164 * var(--u));
    }
    .dv-scene .dv-kicker {
        margin-bottom: calc(6 * var(--u));
        font-size: calc(15 * var(--u));
    }
    .dv-scene .dv-input {
        min-height: calc(28 * var(--u));
        padding: calc(5 * var(--u)) calc(8 * var(--u));
        line-height: calc(17 * var(--u));
    }
    .dv-scene .dv-send {
        height: calc(30 * var(--u));
    }
    .dv-scene .dv-after {
        margin-top: calc(8 * var(--u));
        font-size: calc(12 * var(--u));
        line-height: calc(15 * var(--u));
    }
    .d1-scene .dv-link,
    .d3-scene .dv-link {
        --wire: 150;
        position: absolute;
        left: calc(6 * var(--u));
        bottom: 0;
        gap: calc(6 * var(--u));
        padding: calc(8 * var(--u)) calc(10 * var(--u));
    }
    .dv-scene .dv-num {
        font-size: calc(24 * var(--u));
    }
    .d1-scene .dv-phone,
    .d3-scene .dv-phone {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    /* Section spacing in the unit: N is the px size on a 390 by 844 phone. */
    .every {
        padding: calc(56 * var(--bmw-u)) 0 calc(64 * var(--bmw-u));
    }
    /* Phones: the photo above the title, cropped shorter. */
    .every-body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: calc(32 * var(--bmw-u));
    }
    .every-photo {
        order: -1;
        border-radius: calc(16 * var(--bmw-u));
    }
    .eh-title-wrap {
        margin-bottom: calc(24 * var(--bmw-u));
    }
    .get-body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: calc(32 * var(--bmw-u));
    }
    .get-photo {
        aspect-ratio: 4 / 3;
        border-radius: calc(16 * var(--bmw-u));
    }
    .lines {
        margin-top: calc(8 * var(--bmw-u));
        gap: calc(10 * var(--bmw-u));
    }
    .lines .line {
        font-size: max(14px, calc(18 * var(--bmw-u)));
        letter-spacing: 0;
    }
    .step {
        transform: translateX(calc(-36 * var(--bmw-u)));
    }
    .close1 {
        margin-top: calc(12 * var(--bmw-u));
    }
    .close2 {
        font-size: calc(29.12 * var(--bmw-u));
    }
    .conf-wrap {
        padding: calc(56 * var(--bmw-u)) calc(16 * var(--bmw-u));
    }
    .conf {
        padding: calc(64 * var(--bmw-u)) calc(24 * var(--bmw-u));
    }
    .conf h2 {
        font-size: calc(29.12 * var(--bmw-u));
    }
    .conf p {
        margin-top: calc(20 * var(--bmw-u));
        font-size: max(14px, calc(18 * var(--bmw-u)));
    }
    .get {
        padding: calc(72 * var(--bmw-u)) var(--gut) calc(56 * var(--bmw-u));
    }
    /* The hero headline's phone rule, in the unit. */
    .get-title {
        font-size: clamp(calc(34 * var(--bmw-u)), 10.5vw, calc(46 * var(--bmw-u)));
        letter-spacing: -0.035em;
    }
    .get .l1 {
        margin-top: calc(20 * var(--bmw-u));
    }
}

@media (prefers-reduced-motion: reduce) {
    .rise,
    .step,
    .conf {
        opacity: 1;
        transform: none;
        transition: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}