/* aelfred.ai home, 5 Nov 2026: the gold word in "All your tasks, sorted.", the examples preview, the butler section. */
.does-h em { font-style: normal; color: var(--gold); }

/* Examples: before Play, his answer fades out below, as a poster does. */
.room[data-state="idle"] .message.assistant .message-body { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
.room[data-state="idle"] .room-play { box-shadow: 0 18px 50px rgba(0,0,0,.6); }

/* The butler: his portrait and one line. */
.butler-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1100px; margin: 0 auto; }
.butler-face { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(218,181,66,.25); border-radius: 3px; box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.butler-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 28%; }
.butler-h { margin: 0; font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.02em; }
.butler-h em { font-style: normal; color: var(--gold); }
.butler-links { margin-top: clamp(22px, 3vw, 34px); display: grid; gap: 12px; justify-items: start; }
.butler-links .label.soon { margin-top: 10px; color: var(--ink-3); }
.butler-logos { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.butler-logos img { width: 30px; height: 30px; padding: 12px; box-sizing: content-box; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-3); }
.butler-logos.soon img { width: 24px; height: 24px; padding: 15px; opacity: .5; }
@media (max-width: 760px) {
  .butler-grid { grid-template-columns: 1fr; }
  .butler-face { aspect-ratio: 16 / 10; }
}

/* Hero (Louis, 5 Nov: the line "should become part of the animation, ending with the free trail button"). From the
   mic's moment (s25, 2.7 s) the line arrives phrase by phrase as the marks fall into line, and the button comes last. */
.hero.b .sub.what, .hero.b.s3 .sub.what { opacity: 1; transform: none; transition: none; }
.hero .sub.what .w { display: inline-block; opacity: 0; transform: translateY(8px); filter: blur(6px); }
.hero.b.s25 .sub.what .w { opacity: 1; transform: none; filter: none;
  transition: opacity 1200ms var(--ease), transform 1200ms var(--ease), filter 1200ms var(--ease); }
.hero.b.s25 .sub.what .w:nth-of-type(1) { transition-delay: .3s; }
.hero.b.s25 .sub.what .w:nth-of-type(2) { transition-delay: 1.1s; }
.hero.b.s25 .sub.what .w:nth-of-type(3) { transition-delay: 1.9s; }
.hero.b.s25 .sub.what .w:nth-of-type(4) { transition-delay: 2.7s; }
.hero.b .hero-go, .hero.b.s3 .hero-go { opacity: 0; transform: none; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.hero.b.s25 .hero-go { animation: goIn 1200ms 3.5s var(--ease) both, goGlow 1.6s 4.3s ease-out 1; }
@keyframes goIn { from { opacity: 0; translate: 0 10px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes goGlow { 0% { box-shadow: 0 0 0 0 rgba(240,204,85,0); } 35% { box-shadow: 0 0 0 8px rgba(240,204,85,.16), 0 0 46px rgba(240,204,85,.4); } 100% { box-shadow: 0 0 0 0 rgba(240,204,85,0); } }
@media (prefers-reduced-motion: reduce) {
  .hero.b .sub.what .w { opacity: 1; transform: none; filter: none; transition: none; }
  .hero.b .hero-go, .hero.b.s25 .hero-go { opacity: 1; animation: none; }
}

/* Panic, then calm, each at its own pulse (Louis, 5 Nov: "if our text reveals themselves at the pace of what is
   considered the most relaxing harmony, and the overhwelmed intro happens at the pace of the most stressful attack").
   The panic: the red glow beats like a racing heart, about 150 a minute, and never evenly: its gaps alternate 340 ms
   and 481 ms (340 x the square root of 2, the tritone's ratio), so it never settles into a rhythm. A threat you cannot
   time is what makes anxiety; one you can time makes only fear. One pulse a beat keeps the red at no more than three
   flashes in any second (WCAG 2.3.1). The shake's two axes run in the same ratio (index.html), so its path never repeats.
   The calm: perfectly even, the beat dropped by an octave, 400 ms to 800 ms, 75 a minute, a resting heart. One beat of
   stillness before "Just Ask Aelfred."; each phrase of the line one beat after the last, a beat and a half to arrive
   (above); the button one beat after the last phrase; and the glow behind breathes six times a minute, in for 4 s and
   out for 6 s, the pace of slow breathing with a long exhale. */
.hero.b.s1:not(.s3) .demo .alarm { animation: dread 1.5s ease-out infinite; }
@keyframes dread {
  0%, 22.7%, 54.7%, 77.4%, 100% { opacity: 1; filter: brightness(1.5); }
  5%, 27.7%, 59.7%, 82.4% { opacity: .72; filter: none; }
  12%, 20.7%, 34.7%, 52.7%, 66.7%, 75.4%, 89.4%, 98% { opacity: .5; filter: none; }
}
.hero.b.s3 h1 .l2 { transition-delay: 800ms; }
.hero.b h1 .l2 em { transition: opacity 1600ms 1200ms var(--ease); }
.hero.b.s3 h1 em { animation: shine 2.4s 2.2s var(--ease) both; }
.hero.b.s3 .bloom { animation: exhale 10s 1.6s ease-in-out infinite; }
@keyframes exhale { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.07); } }

/* The terms and one door on the first screen (Louis, 5 Nov: "I like that, then just one button for start the trial it actually
   means the person has all information at that point"). The terms sit above the button so nothing moves below it: the line
   of marks is placed from its bottom edge. They arrive with the button. */
.hero-cta { display: grid; justify-items: center; gap: 16px; }
.hero-row { display: flex; gap: 12px; justify-content: center; align-items: center; }
.hero .hero-row .hero-go { margin-top: 0; }
/* The bar is there from the first frame (Louis, 5 Nov: its fade-in distracted from the animation). */

/* The marks keep their own colours in the calm (Louis, 5 Nov: "the golden light changing the tailsmans looks bad make them
   normal"): no brightening, no gold glow, no flash as each lands. The mic keeps its light. */
.hero.b .demo .m img, .hero.b.s3 .demo .m img { filter: none; }
.hero.b .demo .m.land img { animation: none; }

.hero-terms { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.hero-terms span { display: inline-block; }
.hero.b .hero-terms { opacity: 0; }
.hero.b.s25 .hero-terms { animation: goIn 1200ms 3.5s var(--ease) both; }
@media (max-width: 560px) { .hero-terms { font-size: 11px; letter-spacing: .14em; } }
@media (prefers-reduced-motion: reduce) { .hero.b .hero-terms { opacity: 1; animation: none; } }
/* Louis, 5 Nov: "Your AI Butler." on its own line, the three steps on the line under it. */
.hero.b .sub.what { max-width: 64ch; }
/* Pricing card (Louis, 5 Nov): no "Pricing" label; the free week is the big line, the price small under it. */
.offer-card .trial { margin: 6px 0 0; font-size: clamp(44px, 5.4vw, 68px); line-height: 1.05; }
.offer-card .then { margin: 10px 0 22px; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); }
/* Payment card, tighter (Louis, 5 Nov: "remove cancel and stripe parts and make this all tighter"). */
.section.offer-sec { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.offer-card { padding: clamp(30px, 4vw, 44px) clamp(22px, 5vw, 60px) clamp(26px, 3.5vw, 36px); }
.offer-card .anchor { margin: 0 0 18px; }
.offer-card .vow { margin-top: clamp(24px, 3vw, 32px); padding-top: clamp(20px, 2.6vw, 28px); gap: 10px; }
.offer-card .fine { margin-top: 18px; }
/* Hero (Louis, 5 Nov): "Aelfred" is the gold wordmark itself; "Ask Aelfred" sits at the centre of the screen,
   the line and the button below it. The words start hidden, so nothing shows before "Overwhelmed?". */
.hero h1 .h-mark { display: inline-block; height: .74em; width: auto; vertical-align: baseline; }
/* The whole group, from the question to the row of marks under the button, sits centred under the top bar (Louis, 5 Nov:
   "its all too low"). The marks are drawn below the button, so the block keeps room under it for them. */
.hero.b .copy { align-self: center; gap: 0; padding-top: 64px; padding-bottom: clamp(40px, 7vh, 90px); }
.hero.b .copy > .hero-under { display: grid; justify-items: center; gap: clamp(16px, 2.4vw, 28px); padding-top: clamp(16px, 2.2vw, 28px); }
@media (max-width: 560px) { .hero.b .copy { padding-top: 56px; padding-bottom: 120px; } }
/* The payment card, one role per line (Louis, 5 Nov: "all this is competing against each other"):
   the butler's price small and struck, Aelfred's price big and gold, the point in italic serif, then the button;
   Our Promise a quiet label and line; the fine print smallest. */
.offer-card .anchor { display: grid; justify-items: center; gap: 6px; max-width: 40ch; margin: 0 0 22px; }
.offer-card .anchor .was { font-size: 15px; color: var(--ink-3); letter-spacing: .01em; }
.offer-card .anchor .was s { text-decoration-color: rgba(218,181,66,.6); text-decoration-thickness: 1.5px; }
.offer-card .anchor .now { font-family: var(--sans); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: var(--gold); }
.offer-card .anchor .nb { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.8vw, 22px); color: var(--ink); }
.offer-card .sig { font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.offer-card .vow p { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.offer-card .fine { font-size: 12px; color: var(--ink-3); opacity: .8; }