/* aelfred.ai crisp layer (Louis, 12 Nov 19:09: keep our brand entirely, add "these CRISPY looking textures that make it
   look so high quality", after studying palantir.com). Nothing here changes a colour, font, picture or word of ours:
   only the fine print of the page — index labels, hairlines, register marks, a floating bar, even numbers. */

/* 1. Index labels above each section: /01 HOW IT WORKS. Small capitals, wide tracking, a gold hairline before. */
.idx { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 22px;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; }
.idx::before { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: .7; }
.idx b { font-weight: 500; color: var(--gold); letter-spacing: .08em; }

/* 2. Hairline rule across the top of every section, with register marks (+) at both ends, like a technical drawing. */
.section > .wrap { position: relative; }
.section:not(.hero) > .wrap::before { content: ""; position: absolute; left: var(--gutter, 24px); right: var(--gutter, 24px);
  top: calc(-1 * clamp(44px, 5.5vw, 75px)); height: 1px; background: var(--line); pointer-events: none; }
.section:not(.hero) > .wrap::after { content: ""; position: absolute; left: calc(var(--gutter, 24px) - 5px); right: calc(var(--gutter, 24px) - 5px);
  top: calc(-1 * clamp(44px, 5.5vw, 75px) - 5px); height: 11px; pointer-events: none; opacity: .55;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) calc(100% - 5px) 0 / 1px 11px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) 100% 5px / 11px 1px no-repeat; }

/* 3. The top bar floats: inset from the edges, one hairline, glass behind. */
.topbar { inset: 12px 12px auto 12px; border: 1px solid transparent; border-radius: 16px; }
.topbar, .topbar.on { background: rgba(3,6,8,.66); border-color: var(--line-2);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 40px rgba(0,0,0,.35); }
.topbar .bar { height: 60px; }
@media (max-width: 860px) { .topbar { inset: 8px 8px auto 8px; border-radius: 14px; } .topbar .bar { height: 54px; } }

/* 4. Cards get a lit top edge: one pixel of light catching the rim. */
.flow, .srcbox, .tile, .arc, .chatdemo, .offer-card, .frame, .more-grid li {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--crisp-shadow, 0 0 0 transparent); }
.chatdemo { --crisp-shadow: 0 40px 120px rgba(0,0,0,.5); }

/* 5. Questions sit on hairlines (numbers removed, Louis 19:28: "the lines are enough structure"). */
.qa { border-top: 1px solid var(--line); }

/* 6. Footer headings become index labels; the company line reads as a register. */
footer h3 { margin: 0 0 14px; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
footer .company:last-child { padding-top: 18px; border-top: 1px solid var(--line); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* 7. Type: headings a hair tighter; the price in even, lining figures. */
.does-h, .butler-h { letter-spacing: -.025em; }
.offer-card .anchor .now { letter-spacing: -.02em; }

.butler-copy .idx { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }

/* 8. The price, clear (Louis, 12 Nov 19:16: the mockup's price "looks more convincing ... because it's clear"):
   the butler's price struck through, then one big number. Nothing else beside it. */
.offer-card .anchor { gap: 14px; max-width: none; margin: 0 0 30px; opacity: 1; }
.offer-card .anchor .was { font-size: clamp(17px, 1.6vw, 22px); color: var(--ink-3); text-decoration: line-through;
  text-decoration-thickness: 1px; text-decoration-color: var(--ink-3); }
.offer-card .anchor .now { font-weight: 300; font-size: clamp(56px, 7.5vw, 104px); line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.offer-card .anchor .now b { font-weight: 300; color: var(--gold); }
.offer-card .anchor .now small { font-size: .26em; letter-spacing: .01em; color: var(--ink-3); font-weight: 400; }

/* 9. The offer laid out like the 19:08 mockup (Louis, 19:20-19:21: "the structure of that page looks good", "the start
   button being a separate thing to the right", "keep our brand" font): no card around it; the two prices on the left,
   our gold button on the right on the £29's baseline; the fine print in small spaced capitals underneath; the promise
   below a hairline. The house font and weights stay. */
.offer-sec .offer-card { max-width: 1120px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: grid; grid-template-columns: 1fr; row-gap: 28px; justify-items: start; text-align: left; }
.offer-sec .offer-card::before { display: none; }
.offer-card .anchor { justify-items: start; margin: 0; gap: 12px; }
.offer-card .anchor .now, .offer-card .anchor .now b { font-weight: 400; }
.offer-card .fine { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.offer-card .fine a { color: var(--ink-2); }
.offer-card .vow { margin: 12px 0 0; padding-top: 28px; border-top: 1px solid var(--line); justify-items: start; text-align: left; width: 100%; }
@media (min-width: 761px) {
  .offer-sec .offer-card { grid-template-columns: 1fr auto; column-gap: clamp(32px, 5vw, 64px); align-items: end; }
  .offer-card > .btn { align-self: end; margin-bottom: .5em; }
  .offer-card .fine, .offer-card .vow { grid-column: 1 / -1; }
}
.offer-card .fine { order: 2; max-width: none; }
.offer-card .vow { order: 3; }

/* 10. The promise stays with the button (Louis, 19:26: "the our promise part can remain as part of the button"):
   right column = the gold button, the promise under it; left column = the two prices, the fine print under them. */
@media (min-width: 761px) {
  .offer-sec .offer-card { grid-template-columns: 1fr minmax(300px, 360px); row-gap: 20px; align-items: start; }
  .offer-card .anchor { grid-column: 1; grid-row: 1; align-self: end; }
  .offer-card > .btn { grid-column: 2; grid-row: 1; align-self: end; justify-self: stretch; margin-bottom: .5em; }
  .offer-card .fine { grid-column: 1; grid-row: 2; }
  .offer-card .vow { grid-column: 2; grid-row: 2; margin: 0; padding-top: 18px; gap: 6px; justify-items: center; text-align: center; }
  .offer-card .vow p { font-size: 14.5px; line-height: 1.6; }
}

/* 11. Breathing room (Louis, 19:27: "yours is too tight ... this one has breathing room"). */
.section.offer-sec { padding-top: clamp(120px, 12vw, 190px); padding-bottom: clamp(120px, 12vw, 190px); }
.section.faq { padding-top: clamp(40px, 5vw, 72px); }
@media (min-width: 761px) {
  .offer-sec .offer-card { row-gap: 36px; }
  .offer-card .anchor { gap: 18px; }
  .offer-card .vow { padding-top: 24px; }
}

/* 12. The buy line, from what converts (Louis, 19:35: "make this section breathe more and make text bigger ... use
   research on buy screens"): one price, one button, and right under the button the answer to "do they want my card?".
   The fine print is read, not squinted at; the promise has its own place after the questions. */
.section.offer-sec { padding-top: clamp(140px, 15vw, 240px); padding-bottom: clamp(140px, 15vw, 240px); }
.offer-card .anchor .was { font-size: clamp(19px, 1.8vw, 26px); }
.offer-card .anchor .now { font-size: clamp(64px, 9vw, 132px); }
.offer-card .fine { text-transform: none; letter-spacing: .01em; font-size: clamp(15px, 1.3vw, 17px); color: var(--ink-2); }
.offer-card > .btn { min-height: 72px; font-size: 21px; }
.offer-card .nocard { margin: 0; font-size: 15px; color: var(--ink-2); text-align: center; }
@media (min-width: 761px) {
  .offer-sec .offer-card { row-gap: 40px; }
  .offer-card .nocard { grid-column: 2; grid-row: 2; justify-self: stretch; }
}
.promise-sec .vow { margin: 0; padding: 0; border: 0; display: grid; justify-items: center; text-align: center; gap: 14px; }
.promise-sec .vow p { font-size: clamp(17px, 1.6vw, 20px); }
.offer-card .anchor .now { white-space: nowrap; font-size: clamp(52px, 6.6vw, 104px); }
@media (max-width: 480px) { .offer-card .anchor .now { white-space: normal; } }

/* 13. Louis, 19:45: "still too small and too tight"; Premium voice "highlighted and more obvious it's clickable". */
.offer-sec .wrap { max-width: 1280px; }
.offer-sec .offer-card { max-width: 1240px; }
@media (min-width: 761px) {
  .offer-sec .offer-card { grid-template-columns: 1fr minmax(320px, 400px); column-gap: clamp(48px, 7vw, 120px); row-gap: 48px; }
}
.offer-card .anchor { gap: 24px; }
.offer-card .anchor .was { font-size: clamp(22px, 2.2vw, 30px); }
.offer-card .anchor .now { font-size: clamp(60px, 8vw, 128px); }
.offer-card .anchor .now small { font-size: .24em; }
.offer-card > .btn { min-height: 84px; font-size: 24px; justify-self: stretch; }
.offer-card .fine { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.offer-card .fine .voice-link { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  background: none; white-space: nowrap; transition: color 200ms ease; }
.offer-card .fine .voice-link::after { content: " →"; }
.offer-card .fine .voice-link:hover { color: var(--gold-2, #F0CC55); }

/* 14. Louis, 19:45: still "tight". More air around and between every line. */
.section.offer-sec { padding-top: clamp(160px, 17vw, 280px); padding-bottom: clamp(160px, 17vw, 280px); }
@media (min-width: 761px) { .offer-sec .offer-card { row-gap: 64px; column-gap: clamp(64px, 8vw, 140px); grid-template-columns: 1fr minmax(340px, 440px); } }
.offer-card .anchor { gap: 32px; }
.offer-card .anchor .was { font-size: clamp(24px, 2.4vw, 34px); }
.offer-card .anchor .now { font-size: clamp(64px, 9vw, 148px); }
.offer-card > .btn { min-height: 92px; font-size: 24px; padding: 0 40px; }
.offer-card .fine { font-size: clamp(18px, 1.6vw, 22px); }
.offer-card > .btn { white-space: nowrap; width: 100%; min-width: 0; }
@media (min-width: 761px) { .offer-sec .offer-card { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); } }
@media (min-width: 761px) { .offer-sec .offer-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(56px, 6vw, 96px); } }
.offer-card .anchor .now { font-size: clamp(60px, 7.2vw, 120px); }
.offer-card > .btn { width: auto; padding: 0 52px; }
.offer-sec .wrap { max-width: 1440px; }
.offer-sec .offer-card { max-width: 1360px; }
@media (min-width: 761px) { .offer-card .fine { grid-column: 1 / -1; } }

/* A way in from every screen of the website (Louis, 12 Nov 20:50: "a signup in case someone is stuck on /home"). */
.topbar .topgo { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--gold);
  color: #0a0a08; font-size: 14.5px; font-weight: 500; letter-spacing: .02em; text-decoration: none; white-space: nowrap; transition: background 200ms ease; }
.topbar .topgo:hover { background: var(--gold-2, #F0CC55); }
@media (max-width: 480px) { .topbar .topgo { padding: 0 14px; font-size: 13.5px; } }