/*
 * apex-lead-form.css: the get-in-touch section (inc/parts/lead-form.php).
 * The bottom of every marketing page (Lachlan, 3 Nov: "Form everywhere").
 *
 * 6 Nov: a plain form card and, beside it, a smaller window offering the free
 * audit with a stylised page of four scores. The red deadline tag on that window
 * is the only red on the site, at Lachlan's request ("some sort of banner or red
 * thing"); it is a filled block with white text, never red writing on white,
 * which is the verdict-colour rule. The audit drawing has no verdict colours (8 Nov).
 *
 * Self-contained on the light tokens in tokens.css so any page can carry it
 * without its own stylesheet knowing it exists. Every rule is under .alf.
 * No pills, no tracked uppercase, and a 44px floor on every target.
 */

.alf {
    scroll-margin-top: var(--a-anchor);
    padding-bottom: var(--a-gap-move);
    color: var(--a-body);
    font-family: var(--a-sans);
}
/* 3 Nov: the room under the form lives inside it. Each page's `> *` rule gave a
   different bottom margin: none on About, AI Consulting and Website Assistant, so
   the panel sat on the footer, and on the other apps it fell through the page's
   overflow clip and cut off the panel's shadow. (0,2,2) beats those (0,2,1). */
html body .alf.alf { margin-bottom: 0 }
/* About's sections each carry half the gap, and the FAQ above brings its half */
.abt-page > .alf { padding-top: calc(var(--a-gap-move) / 2) }
:where(.alf) :where(h2, p) { margin: 0; padding: 0 }
/* ⚠ Page resets such as `body.apex-svc :where(.svc-main p)` score (0,1,1)
   and beat a single class, so every margin on a <p> below is written as
   `.alf .x` (0,2,0). Written plainly, the paragraphs touched. The app pages'
   `body:is(...) .aad-page p` paints every <p> at (0,2,2), so the <p>s that set
   a colour are (0,3,0); at (0,2,0) the lede went dark on the blue on Solar. */

.alf__in { width: var(--a-shell); margin-inline: auto }

/* ── the form, and the audit window beside it ──
   6 Nov (Lachlan: "The form on the page at the bottom I dont like"). The main
   thing is a plain white card to reach him. The free audit is a smaller window
   that sits over the card's edge like something that has popped up, with a
   stylised one-page result. Before: _archive/lead-form-2026-11-06/. */
.alf__panel {
    --alf-pad: clamp(1.6rem, 3.6vw, 3rem);
    --alf-over: 2.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
    align-items: center;
    max-width: 68rem;
    margin-inline: auto;
}
.alf__card {
    min-width: 0;
    padding: var(--alf-pad) calc(var(--alf-pad) + var(--alf-over)) var(--alf-pad) var(--alf-pad);
    border: 1px solid var(--a-card-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 40px 80px -48px rgba(10, 23, 48, .45), 0 2px 6px rgba(10, 23, 48, .05);
}
/* (0,3,0): page heading rules such as `body.apex-svc .svc-main :is(h1,h2,h3)`
   score (0,2,2) */
.alf .alf__card .alf__title {
    font-family: var(--a-sans);
    font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600;
    line-height: 1.08; letter-spacing: -.032em;
    color: var(--a-ink);
    text-wrap: balance;
}
.alf .alf__card .alf__lede {
    max-width: 40rem;
    margin: .7rem 0 1.6rem;
    font-size: var(--a-t-lede); line-height: 1.55;
    color: var(--a-body);
    text-wrap: pretty;
}

/* the offer: a deep blue window with the audit page in it */
.alf__offer {
    position: relative; z-index: 1;
    margin-left: calc(-1 * var(--alf-over));
    padding: 1.5rem 1.4rem 1.3rem;
    border-radius: 20px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(120, 160, 230, .3), transparent 60%),
        linear-gradient(160deg, #22458a 0%, #16305f 100%);
    color: #fff;
    box-shadow: 0 34px 60px -26px rgba(6, 16, 40, .6), 0 4px 10px rgba(6, 16, 40, .14);
    transition: opacity .45s var(--a-ease), transform .6s var(--a-ease);
}
.alf__offer.is-armed:not(.is-on) { opacity: 0; transform: translateY(18px) scale(.95) }
.alf .alf__offer .alf__offer-text {
    font-size: 1.14rem; font-weight: 600; line-height: 1.38; letter-spacing: -.01em;
    color: #fff;
    text-wrap: pretty;
}
/* the deadline, the one red block on the site (Lachlan, 30 Oct: "some sort of
   banner or red thing"). Filled, never red writing on white. */
.alf .alf__offer .alf__offer-tag {
    display: inline-block;
    margin-bottom: .85rem;
    padding: .4rem .7rem;
    border-radius: 8px;
    background: #c4321f;
    font-size: .8rem; font-weight: 500; line-height: 1.3;
    color: #fff;
}
.alf .alf__offer .alf__offer-tag b { font-weight: 700 }

/* the page: a header, five gauges (named in N of 12 questions) in green,
   yellow or red, and a three word key. 9 Nov: graphs again, in his colours. */
.alf__page {
    display: block;
    margin-top: 1.1rem;
    padding: .85rem .8rem .8rem;
    border-radius: 10px;
    background: #fff;
    color: var(--a-ink);
    box-shadow: 0 14px 28px -16px rgba(3, 9, 24, .7);
}
.alf__page-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: 0 .1rem .55rem; border-bottom: 1px solid #e3eaf4 }
.alf__page-head b { font-size: .84rem; font-weight: 700; letter-spacing: -.01em }
.alf__page-head i { font-size: .72rem; font-style: normal; color: var(--a-soft) }
.alf__gauges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem .3rem; margin-top: .8rem }
.alf__gauge { grid-column: span 2; display: grid; justify-items: center; min-width: 0 }
.alf__gauge:nth-child(4) { grid-column: 2 / span 2 }
.alf__gauge svg { display: block; width: min(100%, 4.4rem); overflow: visible }
.alf__gauge path { fill: none; stroke-width: 10; stroke-linecap: round }
.alf__gauge .alf__arc { stroke: #e9eef5 }
.alf__gauge .alf__val { stroke: var(--alf-tone); stroke-dasharray: var(--v) 100; transition: stroke-dasharray 1.3s var(--a-ease) }
.alf__gauge[style*="--v: 0"] .alf__val { stroke: none }
.alf__offer.is-armed:not(.is-on) .alf__val { stroke-dasharray: 0 100 }
.alf__gauge--good, .alf__key--good { --alf-tone: #1f9d55; --alf-ink: #157a41 }
.alf__gauge--mid, .alf__key--mid { --alf-tone: #e2a400; --alf-ink: #8f6400 }
.alf__gauge--low, .alf__key--low { --alf-tone: #d64541; --alf-ink: #b3322e }
.alf__gauge b {
    margin-top: -1.15rem;
    font-size: .92rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--alf-ink);
}
.alf__gauge i { margin-top: .4rem; max-width: 100%; font-size: .7rem; font-style: normal; font-weight: 600; color: var(--a-ink); overflow-wrap: anywhere }
.alf__key { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; margin-top: .8rem; padding-top: .55rem; border-top: 1px solid #eef2f8 }
.alf__key i { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-style: normal; color: var(--a-soft) }
.alf__key i::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--alf-tone) }

.alf .alf__card .alf__from {
    display: flex; align-items: center; gap: .7rem;
    margin-top: 1.4rem;
    font: 400 1.5rem/1.1 "Apex Hand", "Bradley Hand", "Segoe Print", cursive;
    color: #1f5fd6;
}
.alf .alf__card .alf__from img { flex: none; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; object-position: 50% 18% }

.alf .alf__card .alf__notice {
    margin-bottom: 1.4rem;
    padding: .95rem 1.1rem;
    border: 1px solid var(--a-line);
    border-radius: 12px;
    background: var(--a-paper);
    font-size: var(--a-t-body); font-weight: 600; line-height: 1.5;
    color: var(--a-ink);
}
.alf .alf__card .alf__notice + .alf__title { margin-top: .2rem }

/* sent: the card says so and nothing else, and the offer steps aside (6 Nov,
   Lachlan: the form "sits there looking really strange with the title still
   and nothing to show") */
.alf__panel--sent { grid-template-columns: minmax(0, 1fr); max-width: 44rem }
.alf__panel--sent .alf__card { padding-right: var(--alf-pad); padding-bottom: var(--alf-pad) }
.alf .alf__card .alf__done { margin: .7rem 0 0 }
.alf .alf__card .alf__again { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .8rem; color: var(--a-brand); font-weight: 600; text-decoration: none }
.alf .alf__card .alf__again:hover { text-decoration: underline; text-underline-offset: .18em }
.alf .alf__card .alf__notice a { color: var(--a-brand); text-decoration: underline; text-underline-offset: .15em }

.alf__form { display: grid; gap: 1rem }

.alf__field--big textarea { min-height: 8rem; font-size: 1.05rem; line-height: 1.5 }
.alf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem }

/* company and website: optional, and fenced off with the reason to fill them in */
.alf__extra { min-width: 0; margin: .2rem 0 0; padding: .4rem 1rem 1.05rem; border: 1.5px dashed rgba(31, 95, 214, .38); border-radius: 14px }
.alf__extra legend { padding: 0 .45rem; font-size: .9rem; font-weight: 500; line-height: 1.4; color: var(--a-brand) }

.alf__field { display: grid; gap: .5rem }
.alf__field > span {
    font-size: var(--a-t-mark); font-weight: 600; line-height: 1.3;
    color: var(--a-ink);
}
.alf__field em {
    margin-left: .3rem;
    font-style: normal; font-weight: 400; color: var(--a-soft);
}
.alf__field :is(input, textarea) {
    width: 100%; box-sizing: border-box;
    min-height: 48px;
    padding: .75rem .95rem;
    border: 1px solid var(--a-line);
    border-radius: 12px;
    background: #f7f9fc;
    font: 400 var(--a-t-body)/1.5 var(--a-sans);
    color: var(--a-ink);
    transition: border-color .2s var(--a-ease), box-shadow .2s var(--a-ease);
}
.alf__field textarea { resize: vertical; min-height: 6rem }
.alf__field :is(input, textarea)::placeholder { color: var(--a-soft); opacity: .85 }
.alf__field :is(input, textarea):hover { border-color: rgba(13, 35, 80, .28) }
.alf__field :is(input, textarea):focus-visible {
    outline: none; background: #fff;
    border-color: var(--a-brand);
    box-shadow: 0 0 0 3px rgba(34, 69, 138, .16);
}

/* ── send ── */
/* marketing email consent: must stay unticked by default */
.alf__opt {
    display: flex; align-items: center; gap: .6rem; min-height: 44px;
    color: var(--a-soft); font-size: .92rem; line-height: 1.4; cursor: pointer;
}
.alf__opt input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--a-brand) }
/* 6 Nov, Lachlan: once a company or website asks for the audit, the box turns red
   and has to be ticked, because it is what lets me email the audit. A filled
   tint with dark text, never red writing on white. */
.alf__opt { padding: .35rem .6rem; margin-inline: -.6rem; border: 1.5px solid transparent; border-radius: 12px; transition: background .25s var(--a-ease), border-color .25s var(--a-ease) }
.alf__opt span { display: grid; gap: .2rem }
.alf__opt-need { display: none; font-style: normal; font-weight: 600; color: #8f1d10 }
.alf__opt.is-need:not(:has(input:checked)) { border-color: #c4321f; background: #fdecea; color: var(--a-ink) }
.alf__opt.is-need:not(:has(input:checked)) .alf__opt-need { display: block }
.alf__opt.is-need input { accent-color: #c4321f }
.alf__send { display: grid; gap: .8rem }
.alf__send button {
    justify-self: stretch; justify-content: center;
    min-height: 54px;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: var(--a-btn-pad);
    border: 1px solid var(--a-brand); border-radius: var(--a-btn-r);
    background: var(--a-brand); color: #fff;
    font: var(--a-btn-font);
    box-shadow: var(--a-btn-glow);
    cursor: pointer;
    transition: background .3s var(--a-ease), border-color .3s var(--a-ease), box-shadow .3s var(--a-ease);
}
/* 6 Nov, Lachlan: "really jittery". It lifted 2px on hover, so a cursor near
   its bottom edge fell off it, it dropped back under the cursor, and lifted
   again. It stays put now; the colour, the shadow and the arrow move. */
.alf__send button:hover {
    background: var(--a-brand-deep); border-color: var(--a-brand-deep);
    box-shadow: var(--a-lift-2);
}
.alf__send button:focus-visible { outline: 2px solid var(--a-brand); outline-offset: 3px }
.alf__arw {
    width: 15px; height: 9px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .3s var(--a-ease);
}
.alf__send button:hover .alf__arw { transform: translateX(3px) }
.alf .alf__card .alf__send p {
    max-width: 52ch; justify-self: center; text-align: center;
    font-size: .84rem; line-height: 1.45; color: var(--a-soft);
}
.alf .alf__card .alf__send p a { color: var(--a-soft); text-underline-offset: .18em }

/* the honeypot: off screen, not display:none, so bots still fill it */
.alf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

@media (max-width: 900px) {
    /* the window goes above the card and sits over its top edge, so the
       deadline is read before the form (Lachlan, 6 Nov: "put it above
       instead of below") */
    .alf__panel { grid-template-columns: minmax(0, 1fr); --alf-over: 1.8rem }
    .alf__card { padding: calc(var(--alf-pad) + var(--alf-over)) var(--alf-pad) var(--alf-pad); border-radius: 22px }
    .alf__panel--sent .alf__card { padding-top: var(--alf-pad) }
    .alf__offer { order: -1; justify-self: center; width: min(100% - 2rem, 22rem); margin: 0 0 calc(-1 * var(--alf-over)) }
}
@media (max-width: 560px) {
    .alf__row { grid-template-columns: minmax(0, 1fr) }
    .alf__offer { width: calc(100% - 1.4rem) }
}