/* Tunewell's own additions to the Loop look (site.css and apps.css are Loop's, copied 2026-10-29).
   Everything here reuses Loop's tokens, so light and dark follow site.css. */

/* Icons: Lucide (ISC), inlined, drawn in the text colour. */
.btn-ico, .step-ico, .vs-ico, .app-ico { --ico-w: 1.8; }
.btn-ico svg, .step-ico svg, .app-ico svg, .vs-ico svg { display: block; fill: none; stroke: currentColor; stroke-width: var(--ico-w); stroke-linecap: round; stroke-linejoin: round; }
.btn-ico { display: inline-flex; }
.btn-ico svg { width: 17px; height: 17px; }

/* Find / Choose / Set Up: three of Loop's plan cards under the hero. */
.pillars { margin-top: var(--s9); }
.pillars .plan { padding: var(--s6); }
.step-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--s4); border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--accent-strong); }
.step-ico svg { width: 20px; height: 20px; }
.pillars .plan-for { margin-top: var(--s2); line-height: 1.5; text-wrap: pretty; }

/* Compare: four columns (Tunewell, your own AI, an agency, an admin hire) and a Cost row, Loop's price row
   (Theo, 2026-10-30). On phones each row's label sits on its own line with the four answers underneath. */
#ask .vs-grid { min-width: 0; }
#ask .m-n { width: 26px; height: 26px; background: var(--quiet); color: var(--ink4); }
#ask .m-n svg { width: 13px; height: 13px; }
#ask .m svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ask .section-sub { text-wrap: balance; }
@media (max-width: 620px) { #ask { display: block; } }
/* The caption follows the pointer, so it means nothing on a touch screen. */
@media (hover: none) { #ask .vs-caption { display: none; } }
#ask .vs-caption, #ask .vs-caption:not(.is-row) { display: grid; width: 100%; max-width: 72ch; }
#ask .vs-caption > span { grid-area: 1 / 1; text-wrap: balance; }
#ask .vs-caption .vs-cap-size { visibility: hidden; }
#ask .vs-hl { left: 33.333%; width: 16.667%; }
#ask .vs-price { font-size: 15.5px; }
#ask .vs-c-loop .vs-price { font-size: 22px; }
#ask .vs-price.vs-price-sm { font-size: 14px; color: var(--ink3); }
#ask .vs-grid .vs-row .vs-c .vs-cadence { text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--ink3); background: var(--quiet); white-space: nowrap; }
#ask .vs-grid .vs-row .vs-c .vs-cadence.once { color: var(--accent-text); background: color-mix(in srgb, var(--blue) 12%, transparent); }   /* neutral pills, Tunewell's in the site blue: no red or green */
@media (max-width: 760px) {
  /* Phones: each row's label sits on its own line, the four answers line up underneath in equal columns. */
  #ask .vs-hl { display: none; }
  #ask .vs-row { flex-wrap: wrap; }
  #ask .vs-rh { flex: 0 0 100%; padding: 14px 6px 0; }
  #ask .vs-row-head .vs-rh { display: none; }
  #ask .vs-ico { display: none; }
  #ask .vs-lab { font-size: 13.5px; white-space: nowrap; }
  #ask .vs-c { flex: 1 1 0; padding: 8px 2px 12px; }
  #ask .vs-row-head { align-items: stretch; }
  #ask .vs-row-head .vs-c, #ask .vs-row-head .vs-c-loop { padding: 10px 2px 4px; justify-content: center; }
  #ask .vs-row-head .vs-brand, #ask .vs-row-head .vs-name { font-size: 13px; font-weight: 500; line-height: 1.25; }
  #ask .vs-row-head .vs-brand { color: var(--ink1); }
  #ask .vs-price-row .vs-c { justify-content: flex-start; }
  #ask .vs-brand { font-size: 14px; }
  #ask .vs-name { white-space: normal; font-size: 12px; line-height: 1.25; }
  #ask .vs-desc { display: none; }
  #ask .m-on { width: 26px; height: 26px; }
  #ask .vs-price, #ask .vs-c-loop .vs-price { font-size: 14px; white-space: nowrap; }
  #ask .vs-c-loop .vs-price { font-size: 16px; }
  #ask .vs-grid .vs-row .vs-c .vs-cadence { margin-top: 6px; padding: 3px 5px; font-size: 9.5px; white-space: normal; text-align: center; line-height: 1.15; }
  #ask .vs-grid .vs-row .vs-c .vs-cadence svg { display: none; }
}


/* Pricing note under the cards. */
#pricing .amount { white-space: nowrap; }

/* Menu and Promises: Loop's collection rows with an icon tile. They are not links, so they do not lift. */
.app-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--accent-strong); }
.app-ico svg { width: 20px; height: 20px; }
:is(#menu, #pricing) .app { align-items: flex-start; padding: 14px 18px 14px 14px; }
:is(#menu, #pricing) .app-line { margin-top: 2px; line-height: 1.45; text-wrap: pretty; }
@media (hover: hover) {
  :is(#menu, #pricing) .app:hover { box-shadow: var(--shadow-card); transform: none; }
  :is(#menu, #pricing) .app:hover::before { opacity: 0; }
}

/* The closing button and the nav's closed state carry a calendar instead of Loop's Apple mark. */
.hero-lead-btn .btn-ico { margin-top: -1px; }
.t-morph-plus { gap: 10px; }

/* A <button> styled as Loop's .btn (Loop only puts .btn on links) needs the browser border and font cleared. */
button.btn { border: 0; font-family: inherit; cursor: pointer; }

/* Process: Loop's numbered steps (from its MCP guide page), each in Loop's card. */
#process .steps { margin-top: var(--head-gap); }
#process .steps li { display: flex; flex-direction: column; }
#process .step-when { margin-top: auto; padding-top: var(--s4); font-size: 13.5px; font-weight: 500; color: var(--accent-text); }
/* Each step: one plain line about what happens, then a You Get box (Theo picked option 6, 2026-10-30). On desktop the
   rows line up across the four cards. */
#process .steps li { padding: 22px; }
#process .step-line { margin-top: var(--s4); font-size: 14.5px; line-height: 1.5; color: var(--ink2); text-wrap: balance; }
#process .step-lab { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 500; letter-spacing: .01em; color: var(--accent-text); }
#process .step-get { margin-top: var(--s3); padding: 12px 14px 13px; border-radius: 12px; background: color-mix(in srgb, var(--blue) 7%, transparent); color: var(--ink1); }
@media (min-width: 1041px) { #process .steps li { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; } }
/* Every line stays within three lines (Theo, 2026-10-30): below 1040px four columns get too narrow, so use two. */
@media (min-width: 561px) and (max-width: 1040px) { #process .steps { grid-template-columns: repeat(2, 1fr); } }

/* Founder: one card, a monogram until the photo arrives. */
.founder { max-width: 760px; margin: var(--head-gap) auto 0; padding: var(--s6); display: flex; gap: var(--s6); align-items: flex-start; }
.founder-pic { flex: none; width: 88px; height: 88px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--accent-strong); font-size: 36px; font-weight: 500; letter-spacing: -0.02em; }
.founder-txt p { font-size: 16.5px; line-height: 1.6; color: var(--ink-strong); text-wrap: pretty; }
.founder-txt p + p { margin-top: var(--s3); }
.founder-txt a { color: var(--accent-text); transition: color .15s; }
.founder-txt a:hover { text-decoration: underline; text-underline-offset: 3px; }
img.founder-pic { display: block; object-fit: cover; background: var(--well); box-shadow: 0 2px 7px rgba(0, 0, 0, .14); } /* the email signature's shadow */
@media (max-width: 620px) { .founder { flex-direction: column; padding: var(--s5); gap: var(--s4); } .founder-pic { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; } }
/* Founder layout (Theo picked option 4, 2026-10-30): the photo, name and role sit in their own soft panel, the text
   centred beside it. On phones the panel becomes a row above the text. */
.founder { max-width: 820px; align-items: center; gap: var(--s7); padding: var(--s6) var(--s7) var(--s6) var(--s6); }
.founder-side { flex: none; width: 168px; padding: var(--s5) var(--s4); border-radius: 20px; background: #E4E3E5; text-align: center; }   /* the photo's own neutral grey (#EBEBED), a step darker (Theo, 2026-10-30); a blue panel was tried and dropped */
:root[data-theme="dark"] .founder-side { background: var(--well); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .founder-side { background: var(--well); } }
.founder-side .founder-pic { width: 112px; height: 112px; border-radius: 28px; margin: 0 auto; }
.founder-side b { display: block; margin-top: var(--s4); font-size: 16px; font-weight: 500; color: var(--ink1); }
.founder-side span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink3); }
@media (max-width: 620px) {
  .founder { align-items: stretch; gap: var(--s5); padding: var(--s5); }
  .founder-side { width: auto; display: flex; align-items: center; gap: var(--s4); text-align: left; padding: var(--s4); }
  .founder-side .founder-pic { width: 64px; height: 64px; border-radius: 16px; margin: 0; }
  .founder-side b { margin-top: 0; }
}

/* Footer: who runs Tunewell and how to reach us. */
/* Footer (Theo picked option 2, 2026-10-29): Loop's footer, with the company details in small print underneath,
   shown on phones too (the company name, number and registered office must be on the website). */
.footer-x svg { fill: none; }
/* Company details live on the Privacy and Terms pages, linked from every footer (Theo, 2026-10-30): the law asks for
   them to be readily reachable, not printed on every page. Email Us is the site's blue with white text in both themes. */
.footer-x, :root[data-theme="dark"] .footer-x { background: #3F6FD8; color: #FFFFFF; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer-x { background: #3F6FD8; color: #FFFFFF; box-shadow: none; } }

/* Refinements, 2026-10-29. */
/* Process: the timing sits beside the number, as a soft chip. */
#process .step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
#process .step-when { margin: 0; padding: 4px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--accent-text); }
/* Pricing (Theo, 2026-10-30, option 4): Check-Up and Full Review in one table, Build and Care Plan in two boxes. */
#pricing .pr-table { max-width: 1000px; margin: var(--s8) auto 0; padding: var(--s6); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-card); }
#pricing .pr-r { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s4); padding: 10px 12px; border-radius: 12px; }
#pricing .pr-r > :not(.pr-l) { justify-self: center; text-align: center; }
#pricing .pr-l { font-size: 15px; color: var(--ink1); }
#pricing .pr-h h3 { font-size: 19px; font-weight: 500; color: var(--ink1); }
#pricing .pr-h p { font-size: 14px; color: var(--ink3); }
#pricing .pr-h .pr-amt { margin-top: 6px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--ink1); white-space: nowrap; }
#pricing .pr-amt span, #pricing .pr-amt2 span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink3); }
#pricing .pr-main h3 { color: var(--accent-text); }
#pricing .pr-y .tick { width: 18px; height: 18px; }
#pricing .pr-n { font-size: 18px; color: var(--ink4); }
#pricing .pr-v { font-size: 15px; font-weight: 500; color: var(--ink1); }
/* Rows grouped under Audit, Strategy and Implementation (Theo, 2026-10-30), in the page's small blue label style. */
#pricing .g-h { padding-top: 22px; padding-bottom: 4px; }
#pricing .pr-h + .g-h { padding-top: 8px; }
#pricing .pr-r > .g-lab { justify-self: start; text-align: left; font-size: 13px; font-weight: 500; color: var(--accent-text); }
#pricing .pr-f { margin-top: var(--s3); }
#pricing .pr-f .btn { width: 100%; }
#pricing .pr-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); max-width: 1000px; margin: var(--s4) auto 0; }
#pricing .pr-box { padding: var(--s6); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-card); }
#pricing .pr-box h3 { font-size: 19px; font-weight: 500; color: var(--ink1); }
#pricing .pr-amt2 { margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--ink1); }
#pricing .pr-txt { margin-top: var(--s3); font-size: 15px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
@media (max-width: 760px) {
  #pricing .pr-more { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
  #pricing .pr-box { padding: var(--s5); border-radius: 20px; }
}
@media (max-width: 620px) {
  #pricing .pr-table { padding: var(--s4) 8px; border-radius: 20px; }
  #pricing .pr-r { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 9px 8px; }
  #pricing .pr-l, #pricing .pr-v { font-size: 14px; }
  #pricing .pr-h h3 { font-size: 16px; }
  #pricing .pr-h .pr-amt { font-size: 22px; }
  #pricing .pr-f { grid-template-columns: minmax(0, 1fr); }
  #pricing .pr-f > span { display: none; }
  #pricing .pr-f .btn + .btn { display: none; }   /* both go to the same booking page: one button on phones */
  #pricing .pr-for { display: none; }   /* Small Teams and Larger Teams, each on one line in the narrow columns */
}
/* On a laptop the whole section fits one screen (Theo, 2026-11-02): a 13-inch MacBook Air's browser window is about
   1440 x 790, and the nav jump below lands the heading just under the floating nav. scripts/check.mjs proves it fits. */
/* Every nav jump on a laptop lands the section heading just under the floating nav, so the section is on screen. */
@media (min-width: 961px) { .home .section[id] { scroll-margin-top: calc(88px - var(--section-gap)); } }
@media (min-width: 961px) {
  #pricing .pr-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--s5); }
  #pricing .pr-grid .head { grid-area: 1 / 1; text-align: left; align-items: flex-start; }
  #pricing .pr-grid h2 { font-size: 36px; }
  #pricing .pr-grid h2 .soft { display: block; text-wrap: balance; }
  #pricing .pr-table { grid-area: 1 / 2 / 3 / 3; max-width: none; margin: 0; padding: 18px 20px; }
  #pricing .pr-more { grid-area: 2 / 1; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; max-width: none; margin: 0; }
  #pricing .pr-box { display: flex; flex-direction: column; justify-content: center; padding: var(--s5); }
  #pricing .pr-r { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr); gap: var(--s2); min-height: 27px; padding: 0 8px; }
  #pricing .pr-y .tick { display: block; width: 16px; height: 16px; }
  #pricing .pr-n { font-size: 15px; line-height: 1; }
  #pricing .pr-h { padding-bottom: 4px; }
  #pricing .pr-h h3 { font-size: 17px; }
  #pricing .pr-h p { font-size: 13px; }
  #pricing .pr-h .pr-amt { margin-top: 2px; font-size: 24px; }
  #pricing .pr-amt span { font-size: 13px; }
  #pricing .g-h { min-height: 0; padding-top: 10px; padding-bottom: 2px; }
  #pricing .pr-h + .g-h { padding-top: 4px; }
  #pricing .pr-f { margin-top: var(--s3); }
  #pricing .pr-f .btn { padding-inline: 6px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 360px) { #pricing .pr-h .pr-col > p:not(.pr-amt) { font-size: 12.5px; white-space: nowrap; } }
/* On the narrowest phones "From" sits above £495, so it fits its Compare cell. */
@media (max-width: 360px) { #ask .vs-from { display: block; margin-bottom: 2px; font-size: 12px; } }
/* A taller window (the 15-inch Air, or a 13-inch with fewer bars) gets the room back. */
@media (min-width: 961px) and (min-height: 840px) {
  #pricing .pr-r { min-height: 30px; }
  #pricing .g-h { min-height: 0; padding-top: 14px; }
}
/* Closer: the person behind the button. */
.closer-who { margin-top: var(--s5); display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink2); }
.closer-who img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; box-shadow: 0 2px 7px rgba(0, 0, 0, .14); }

/* Hero: the picture under the button (Theo picked option 6, 2026-10-30). */
.top { padding-bottom: var(--s9); }
.hv { margin-top: var(--s9); }
@media (max-width: 720px) { .hv { margin-top: var(--s8); } }

/* Hero picture (option 6, 2026-10-30; every timing at 80% so it runs a little faster, Theo the same day): two screens, By Hand and Automated. Each job moves across and is ticked, the six
   finished jobs merge into one Admin Done card, then the two screens join into one panel. Every name starts hp-. */
#heroPic .hp { --hp-ch: 62px; --hp-cw: 422px; --hp-bh: 412px; --hp-stp: 54px; --pk: 0; --hp-warn-bg: rgba(214, 98, 88, .13); --hp-warn-ink: #C2564B;
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: min(100%, 940px); margin: 0 auto; text-align: left; visibility: hidden; }
#heroPic .hp.hp-ready { visibility: visible; }
:root[data-theme="dark"] #heroPic .hp { --hp-warn-bg: rgba(238, 154, 144, .14); --hp-warn-ink: #EE9A90; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #heroPic .hp { --hp-warn-bg: rgba(238, 154, 144, .14); --hp-warn-ink: #EE9A90; } }
#heroPic .hp.hp-col { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hp-p { padding: 16px 18px 18px; border-radius: 30px; background: var(--well); transform: translate(var(--jtx, 0px), var(--jty, 0px)); transition: transform 520ms var(--ease), border-radius 240ms ease-in-out; }
.hp-col .hp-p { padding: 12px 12px 12px; border-radius: 26px; }
.hp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 6px 0; margin-bottom: 16px; }
.hp-col .hp-h { margin-bottom: 10px; padding-top: 2px; }
.hp-lab, .hp-time { transition: opacity 240ms ease-in-out; }
.hp-lab { font-size: 13px; font-weight: 500; letter-spacing: -.005em; color: var(--ink2); }
.hp-with .hp-lab { color: var(--accent-strong); }
.hp-time { font-size: 13px; line-height: 1; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-b { position: relative; height: var(--hp-bh); }
.hp-slot { position: absolute; left: 0; right: 0; height: var(--hp-ch); border-radius: 18px; background: color-mix(in srgb, var(--ink1) 4.5%, var(--well)); transition: opacity 400ms var(--ease); }
.hp-l { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hp-card { position: absolute; left: 0; top: 0; width: var(--hp-cw); z-index: var(--z, 1);
  transition: opacity 400ms var(--ease) calc(var(--ri, 0) * 56ms), filter 400ms var(--ease) calc(var(--ri, 0) * 56ms); }
.hp-card[data-st="busy"] { --z: var(--zn); --x: var(--bx); --y: calc(var(--by) - var(--pk) * var(--hp-stp)); --r: var(--br); --sc: 1; }
.hp-card[data-st="lift"] { --x: var(--bx); --y: calc(var(--by) - var(--pk) * var(--hp-stp)); --r: var(--br); --sc: 1.045; --z: 60; }
.hp-card[data-st="done"] { --x: var(--dx); --y: var(--dy); --r: 0deg; --sc: 1; --z: 60; }
/* Across: slow ease-in-out for the long move; down: quicker, so the card is at its row before it enters the stack. */
.hp-x { transform: translateX(var(--x)); transition: transform 760ms cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.hp-in { transform: translateY(var(--y)) rotate(var(--r)); scale: var(--sc); transform-origin: 50% 50%; transition: transform 640ms var(--ease), scale 208ms var(--ease); }
.hp-face { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; height: var(--fh, var(--hp-ch)); padding: 0 14px 0 12px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-card); transition: box-shadow 256ms var(--ease), height 400ms var(--ease); }
.hp-card[data-st="lift"] .hp-face { box-shadow: var(--shadow-card), 0 22px 42px -14px rgb(0 0 0 / .28); }
.hp-card:is([data-st="done"], [data-st="merge"]) .hp-face { transition-delay: 480ms; }
.hp-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--hp-warn-bg); color: var(--hp-warn-ink); transition: background-color 320ms ease-in-out, color 320ms ease-in-out; }
.hp-i { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity 208ms ease-in-out, filter 208ms ease-in-out; }
.hp-i svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--ico-w, 1.8); stroke-linecap: round; stroke-linejoin: round; }
.hp-i-d { opacity: 0; filter: blur(2px); }
.hp-card:is([data-st="done"], [data-st="merge"]) .hp-ico { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--accent-strong); transition-delay: 336ms; }
.hp-card:is([data-st="done"], [data-st="merge"]) .hp-i-b { opacity: 0; filter: blur(2px); transition-delay: 336ms; }
.hp-card:is([data-st="done"], [data-st="merge"]) .hp-i-d { opacity: 1; filter: none; transition-delay: 368ms; }
.hp-txt { display: grid; min-width: 0; }
.hp-t { grid-area: 1 / 1; min-width: 0; transition: opacity 144ms ease-in-out, filter 144ms ease-in-out, transform 144ms ease-in-out; }
.hp-t b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; color: var(--ink1); }
.hp-t span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--ink3); text-wrap: balance; }
.hp-t-d { opacity: 0; filter: blur(2px); transform: translateY(4px); }
.hp-card:is([data-st="done"], [data-st="merge"]) .hp-t-b { opacity: 0; filter: blur(2px); transform: translateY(-4px); transition-delay: 304ms; }
.hp-card:is([data-st="done"], [data-st="merge"]) .hp-t-d { opacity: 1; filter: none; transform: none; transition-delay: 352ms; }
.hp-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: transparent; color: var(--accent-strong); transition: background-color 208ms var(--ease); }
.hp-ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hp-ok path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 304ms var(--ease); }
.hp-card:is([data-st="done"], [data-st="merge"]) .hp-ok { background: color-mix(in srgb, var(--blue) 12%, transparent); transition-delay: 680ms; }
.hp-card:is([data-st="done"], [data-st="merge"]) .hp-ok path { stroke-dashoffset: 0; transition-delay: 760ms; }
/* Phone: the cards overlap into decks, each showing its top row; the last one shows in full. */
.hp-col .hp-face { align-items: start; column-gap: 11px; padding: 6px 12px 0 10px; }
.hp-col .hp-ico { width: 30px; height: 30px; border-radius: 9px; }
.hp-col .hp-i svg { width: 16px; height: 16px; }
.hp-col .hp-ok { margin-top: 4px; }
/* The merge: the six finished cards slide up under the first (scaled down a little behind it, gently staggered),
   then the first grows into one summary card. Motion tokens: 400ms smooth-out for the move and the resize,
   320ms ease-in-out for the cross-fade, 32ms stagger, 2px blur. */
.hp-card[data-st="merge"] { --x: var(--dx); --y: calc(var(--dy0) + var(--mo) * 8px); --r: 0deg; --sc: calc(1 - var(--mo) * .04); --z: calc(60 - var(--n)); }
.hp[data-sum] .hp-card[data-n="0"][data-st] { --x: calc(var(--dx) + var(--hp-ux)); --y: calc(var(--sy) + var(--hp-uy)); --fh: var(--hp-sh); }
.hp-card[data-st="merge"] .hp-in { transition: transform 400ms var(--ease) calc(var(--n) * 32ms), scale 400ms var(--ease) calc(var(--n) * 32ms); }
.hp-card[data-st="merge"] .hp-face { transition-delay: 0ms; }
.hp[data-mg] .hp-slot { opacity: 0; }
.hp[data-mg] .hp-card:not([data-n="0"]) .hp-face > *, .hp[data-sum] .hp-card[data-n="0"] .hp-face > :not(.hp-sum) { opacity: 0; filter: blur(2px); transition: opacity 160ms ease-in-out, filter 160ms ease-in-out; transition-delay: 0ms; }
.hp[data-sum] .hp-card:not([data-n="0"]) { opacity: 0; filter: blur(2px); transition: opacity 280ms var(--ease), filter 280ms var(--ease); transition-delay: 0ms; }
.hp-sum { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; row-gap: 4px; opacity: 0; filter: blur(2px); transition: opacity 320ms ease-in-out, filter 320ms ease-in-out; pointer-events: none; }
.hp[data-sum] .hp-card[data-n="0"] .hp-sum { opacity: 1; filter: none; transition-delay: 200ms; }
.hp-sum-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--accent-strong); }
.hp-sum-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-sum-ic path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 360ms var(--ease); }
.hp[data-sum] .hp-card[data-n="0"] .hp-sum-ic path { stroke-dashoffset: 0; transition-delay: 440ms; }
.hp-sum-t { font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; color: var(--ink1); }
.hp-sum-l { font-size: 14.5px; line-height: 1.4; color: var(--ink3); }
.hp-col .hp-sum-ic { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 13px; }
.hp-col .hp-sum-ic svg { width: 22px; height: 22px; }
.hp-col .hp-sum-t { font-size: 18px; }
/* The join: the two screens glide together and fuse into one panel (same flat fill, 1px overlap, so no seam). The inner
   corners square off as they touch, the labels and the left time fade, the Admin Done card glides to the panel centre,
   and the whole picture settles with a 1.5% overshoot. Tokens: 520ms smooth-out glide, 240ms ease-in-out fades. */
.hp { --hp-ux: 0px; --hp-uy: 0px; }
.hp[data-jn] { --hp-ux: var(--hp-jcx); --hp-uy: var(--hp-jcy); }
.hp[data-jn] .hp-p:not(.hp-with) { --jtx: var(--hp-jlx); --jty: var(--hp-jly); }
.hp[data-jn] .hp-with { --jtx: var(--hp-jrx); --jty: var(--hp-jry); }
.hp[data-jn]:not(.hp-col) .hp-p:not(.hp-with) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hp[data-jn]:not(.hp-col) .hp-with { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.hp[data-jn].hp-col .hp-p:not(.hp-with) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hp[data-jn].hp-col .hp-with { border-top-left-radius: 0; border-top-right-radius: 0; }
.hp[data-jn] .hp-lab, .hp[data-jn]:not(.hp-col) .hp-p:not(.hp-with) .hp-time, .hp[data-jn].hp-col .hp-with .hp-time { opacity: 0; }   /* one time stays, at the panel's top right */
.hp[data-jc] .hp-card[data-n="0"] .hp-x, .hp[data-jc] .hp-card[data-n="0"] .hp-in { transition-duration: 520ms; transition-delay: 0ms; }
.hp[data-jc] .hp-card[data-n="0"] .hp-in { transition-property: transform, scale; }
@keyframes hp-join { 0% { transform: scale(1); } 50% { transform: scale(1.015); } 100% { transform: scale(1); } }
.hp[data-jn] { animation: hp-join 416ms var(--ease) 520ms; }
/* A tiny settle once the summary card has arrived. */
@keyframes hp-settle { 0% { scale: 1; } 45% { scale: 1.025; } 100% { scale: 1; } }
.hp[data-sum] .hp-card[data-n="0"] .hp-in { animation: hp-settle 416ms var(--ease) 880ms; }
/* Overlapped cards would show half a sub-line: only the bottom card of each deck keeps its detail line (and a card in flight). */
.hp-col .hp-t span { transition: opacity 208ms ease-in-out; }
.hp-col .hp-card:not([data-front]):not([data-st="lift"]) .hp-t span { opacity: 0; }
/* The reset: the cards fade, snap back unseen, then fade in again. */
.hp[data-rs] .hp-card, .hp[data-rs] .hp-slot { opacity: 0; filter: blur(2px); transition-delay: 0ms; }
.hp.hp-nt, .hp.hp-nt * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hp-card, .hp-x, .hp-in, .hp-face, .hp-ico, .hp-i, .hp-t, .hp-ok, .hp-ok path, .hp-slot, .hp-sum, .hp-sum-ic path, .hp-face > * { transition: none !important; }
  .hp-in, .hp[data-jn] { animation: none !important; }
  .hp-p, .hp-lab, .hp-time { transition: none !important; }
}

/* Menu: rows with a small picture each (Theo picked option 2c, 2026-10-29). Pictures rest on their finished
   moment and play once when a row is pointed at or tapped. Every rule is kept inside #menu. */
#menu { --wash:rgba(75,123,227,.055); --pillbg:rgba(75,123,227,.085);
  --k-ground:#F3F3F6; --k-card:#FFFFFF; --k-t1:#23262D; --k-t2:#6C727C; --k-t3:#9AA0AA; --k-glyph:#5C636E;
  --k-accent:#426DC8; --k-wash:rgba(106,146,232,.16); --k-badge:rgba(15,20,30,.055);
  --k-lift:0 0 0 .6px rgba(0,0,0,.07), 0 1.5px 5px rgba(0,0,0,.06), 0 12px 26px -12px rgba(20,24,40,.20); }
:root[data-theme="dark"] #menu { --wash:rgba(134,169,242,.07); --pillbg:rgba(134,169,242,.11);
  --k-ground:#1E1E20; --k-card:#2C2C2E; --k-t1:#ECEEF3; --k-t2:#9AA0AD; --k-t3:#6B7280; --k-glyph:#B7BECB;
  --k-accent:#86A9F2; --k-wash:rgba(134,169,242,.16); --k-badge:rgba(255,255,255,.075);
  --k-lift:0 0 0 .6px rgba(255,255,255,.09), 0 2px 6px rgba(0,0,0,.30), 0 14px 30px -12px rgba(0,0,0,.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #menu { --wash:rgba(134,169,242,.07); --pillbg:rgba(134,169,242,.11);
  --k-ground:#1E1E20; --k-card:#2C2C2E; --k-t1:#ECEEF3; --k-t2:#9AA0AD; --k-t3:#6B7280; --k-glyph:#B7BECB;
  --k-accent:#86A9F2; --k-wash:rgba(134,169,242,.16); --k-badge:rgba(255,255,255,.075);
  --k-lift:0 0 0 .6px rgba(255,255,255,.09), 0 2px 6px rgba(0,0,0,.30), 0 14px 30px -12px rgba(0,0,0,.55); } }

/* ---------- The small pictures: drawn in the app's own colours. At rest they show the finished moment; "is-on" plays it once ---------- */
@keyframes pvRise { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
@keyframes pvPop  { from { opacity: 0; transform: scale(.6); filter: blur(2px); } }
@keyframes pvGrow { from { transform: scaleX(0); } }
@keyframes pvDrop { from { opacity: 0; transform: translate(var(--rx, 0px), -44px) rotate(calc(var(--r, 0deg) - 8deg)); } }
@keyframes pvHold { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
#menu .pv .x.hold { opacity: 0; }
#menu .pv.is-on .x { animation: var(--a, pvRise) var(--t, 520ms) var(--e, var(--ease)) calc(var(--d, 0) * 1ms) both; }
#menu .x.pop { --a: pvPop; --t: 480ms; --e: cubic-bezier(.34, 1.36, .64, 1); }
#menu .x.grow { --a: pvGrow; --t: 650ms; transform-origin: left center; }
#menu .x.drop { --a: pvDrop; --t: 640ms; --e: cubic-bezier(.34, 1.2, .64, 1); }
#menu .x.hold { --a: pvHold; }

#menu .v { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body); font-size: 12.5px; line-height: 1.3; letter-spacing: -.003em; color: var(--k-t1); -webkit-font-smoothing: antialiased; zoom: var(--vz, 1); transition: filter 700ms var(--ease), opacity 700ms var(--ease); }
#menu .v *, #menu .v *::before { box-sizing: border-box; }
#menu .v .g { display: block; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#menu .v .l { display: block; height: 6px; border-radius: 3px; background: var(--k-badge); }
#menu .v .card { background: var(--k-card); border-radius: 12px; box-shadow: var(--k-lift); }
#menu .v .chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 8px; border-radius: 7px; background: var(--k-wash); color: var(--k-accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
#menu .v .chip.mute { background: var(--k-badge); color: var(--k-t2); }

#menu .v-enq { display: flex; flex-direction: column; align-items: center; gap: 9px; }
#menu .v-enq .miss { display: inline-flex; align-items: center; gap: 6px; color: var(--k-t2); font-size: 11.5px; font-weight: 500; }
#menu .v-enq .miss time { font-variant-numeric: tabular-nums; }

#menu .v-quo .doc { width: 170px; padding: 11px 12px 10px; }
#menu .v-quo .dh { display: flex; justify-content: space-between; font-size: 11px; color: var(--k-t2); }
#menu .v-quo .dh b { font-weight: 600; color: var(--k-t1); }
#menu .v-quo .r { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; }
#menu .v-quo .r .l:last-child { transform-origin: right center; }
#menu .v-quo .slot { display: flex; justify-content: flex-end; margin-top: 10px; }

#menu .v-inv { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 172px; }
#menu .v-inv .row { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 9px 9px 9px 12px; }
#menu .v-inv .tx { flex: 1; min-width: 0; }
#menu .v-inv .tx b { display: block; font-weight: 600; white-space: nowrap; }
#menu .v-inv .tx small { font-size: 11.5px; color: var(--k-t2); }
#menu .v-inv .st { display: grid; justify-items: end; }
#menu .v-inv .st > * { grid-area: 1 / 1; }

#menu .v-bok { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 172px; }
#menu .v-bok .cal { align-self: stretch; padding: 9px 10px 10px; }
#menu .v-bok .days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--k-t2); text-align: center; }
#menu .v-bok .gr { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
#menu .v-bok .c { position: relative; height: 22px; border-radius: 6px; background: var(--k-ground); }
#menu .v-bok .c.b { background: var(--k-wash); }
#menu .v-bok .c i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 6px; background: var(--btn-blue); color: var(--on-blue); font-style: normal; }
#menu .v-bok .c i .g { width: 12px; height: 12px; stroke-width: 2.2; }

#menu .v-rev .stars { display: flex; justify-content: center; gap: 7px; }
#menu .v-rev .s { position: relative; width: 22px; height: 22px; }
#menu .v-rev .s svg { position: absolute; inset: 0; width: 22px; height: 22px; fill: none; stroke: var(--k-t3); stroke-width: 1.6; stroke-linejoin: round; }
#menu .v-rev .s svg.f { fill: var(--btn-blue); stroke: var(--btn-blue); }

#menu .v-inb { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 176px; }
#menu .v-inb .m { align-self: stretch; display: flex; align-items: center; gap: 9px; padding: 8px 9px 8px 8px; }
#menu .v-inb .av { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--k-badge); }
#menu .v-inb .tx { flex: 1; display: grid; gap: 6px; min-width: 0; }

#menu .v-num { width: 176px; }
#menu .v-num .nm { display: grid; gap: 10px; padding: 12px; }
#menu .v-num .r { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--k-t2); white-space: nowrap; }
#menu .v-num .tr { height: 8px; border-radius: 4px; background: var(--k-badge); overflow: hidden; }
#menu .v-num .tr i { display: block; height: 100%; border-radius: 4px; background: var(--btn-blue); transform-origin: left center; }

#menu .v-pap { display: flex; align-items: center; justify-content: center; gap: 14px; }
#menu .v-pap .fold { position: relative; flex: none; width: 88px; height: 72px; }
#menu .v-pap .fb { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 9px; background: color-mix(in srgb, var(--btn-blue) 58%, var(--k-ground)); }
#menu .v-pap .fb::before { content: ""; position: absolute; left: 0; top: -7px; width: 34px; height: 12px; border-radius: 6px 6px 0 0; background: inherit; }
#menu .v-pap .rc { position: absolute; top: 0; left: 0; width: 36px; height: 46px; border-radius: 5px; background: var(--k-card); box-shadow: var(--k-lift);
  transform: translateX(var(--rx, 0px)) rotate(var(--r, 0deg));
  background-image: linear-gradient(var(--k-badge), var(--k-badge)), linear-gradient(var(--k-badge), var(--k-badge)), linear-gradient(var(--k-badge), var(--k-badge));
  background-repeat: no-repeat; background-size: 20px 3px, 15px 3px, 18px 3px; background-position: 7px 9px, 7px 16px, 7px 23px; }
#menu .v-pap .ff { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; display: flex; align-items: flex-end; padding: 0 0 7px 10px; border-radius: 9px; background: var(--btn-blue); color: var(--on-blue);
  font-size: 11px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }

@media (prefers-reduced-motion: reduce) { #menu .pv.is-on .x { animation: none; } #menu .v { transition: none; } }


/* ================= Option 2c: Rows With Pictures. The site's own rows, a small picture on the right of each ================= */
#menu .apps { max-width: 900px; gap: 12px 16px; }
/* Six examples, then one note across the full width that they are only examples (Theo, 2026-10-30). */
/* Half the height of one Menu row above it (Theo, 2026-10-30): rows are 136px on desktop, 144px single-column, 225px on phones. */
#menu .app-note { grid-column: 1 / -1; display: grid; place-content: center; min-height: 68px; margin: 4px 0 0; padding: 8px 24px; border-radius: 999px; background: var(--wash);
  text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink2); text-wrap: balance; }
#menu .app-note b { font-weight: 500; color: var(--ink1); }
@media (max-width: 899px) { #menu .app-note { min-height: 72px; } }
@media (max-width: 560px) { #menu .app-note { border-radius: 20px; padding: 14px 18px; min-height: 112px; } #menu .app-note b { display: block; } }
#menu .app { align-items: center; padding: 12px 12px 12px 14px; gap: 14px; }
#menu .app-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; }
#menu .app-line { font-size: 14px; }
#menu .app-pv { flex: none; }
#menu .app-pv .pv { display: grid; place-items: center; width: 168px; height: 112px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--k-ground) 62%, transparent); overflow: hidden;
  transition: background 500ms var(--ease); --vz: .86; }
#menu .app:not(.is-act) .pv .v { filter: grayscale(1); opacity: .6; }
#menu .app.is-act .pv { background: var(--wash); }
#menu .js #menu .app { opacity: 0; transform: translateY(10px); }
#menu .js #menu .app.is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease), transform 900ms var(--ease), box-shadow 250ms var(--ease); }

@media (max-width: 899px) { #menu .apps { grid-template-columns: minmax(0, 1fr); max-width: 640px; } #menu .app-pv .pv { --vz: 1; width: 188px; height: 120px; } }
@media (max-width: 620px) {
  #menu .app { flex-wrap: wrap; padding: 12px; }
  #menu .app-main { flex: 1 1 100%; }
  #menu .app-pv { flex: 0 0 100%; }
  #menu .app-pv .pv { width: 100%; height: 124px; }
}
@media (prefers-reduced-motion: reduce) { #menu .js #menu .app { opacity: 1; transform: none; transition: none; } #menu .app-pv .pv { transition: none; } }

/* Brand lockup (Theo, 2026-10-29, picked size 3 and colour B from prototypes/brand-2026-10-29): on a white
   page the icon's white tile disappears and only the blue dial reads, so the image is 1.171em of the name's size,
   which puts the dial just inside the height of the T, centred on it. "Tune" is the accent blue, "well" the same
   grey as the second half of the two-tone headings. */
.brand-c img, .topnav-brand img { flex: none; width: 24.6px; height: 24.6px; border-radius: 4.8px; transform: translateY(-0.7px); }
/* The top-of-page lockup (Theo, 2026-10-30): a little larger, the icon closer to the name, and a little lower. */
.brand-c { font-size: 24px; gap: 4px; }
.brand-c img { width: 28.1px; height: 28.1px; border-radius: 5.5px; transform: translateY(-0.8px); }
.brandbar { padding-top: 40px; }
@media (max-width: 620px) { .brandbar { padding-top: 30px; } }
.pn-brand img { flex: none; width: 19.9px; height: 19.9px; border-radius: 3.9px; transform: translateY(-1.3px); }
.tw-tune { color: var(--accent-text); }
.tw-well { color: var(--ink4); }
/* Logo: white tile in light mode, graphite tile in dark mode (prototypes/logo-2026-10-29/build-dark.mjs). */
.tw-icon-dark { display: none; }
:root[data-theme="dark"] .tw-icon-light { display: none; }
:root[data-theme="dark"] .tw-icon-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-icon-light { display: none; }
  :root:not([data-theme="light"]) .tw-icon-dark { display: block; }
}

/* Closer: the Book an Intro Call button is as wide as the "You will be talking to Theo." line under it (Theo, 2026-10-30). */
.closer-act { display: inline-grid; justify-items: stretch; }
.closer-act .cta { display: grid; }
.closer-act .hero-lead-btn { width: 100%; }
.closer-act .closer-who { justify-content: center; }

/* Headline: break after "business" so the two lines are nearly even; only "not the admin." is grey (Theo, 2026-10-30). */
.hero h1 .h1-a { display: block; }
.hero h1 .soft { display: inline; }
/* Privacy page: analytics opt-out, the same control as Loop's, with a soft fill instead of a grey outline. */
.optout { display: inline-block; margin: 4px 0 6px; padding: 9px 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink1) 7%, transparent); color: var(--ink1); font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.2; cursor: pointer; }
.optout:hover { background: color-mix(in srgb, var(--ink1) 11%, transparent); }
.optout:disabled { opacity: .55; cursor: default; }
.optout-msg { margin: 0 0 14px; font-size: 13.5px; color: var(--ink3); }