/* alloro.com enhancement layer (plans/10282026-alloro-com-enhancements).
   Rules: no new words, only the site's own fonts and color tokens, one signature moment per section,
   every animation plays once, nothing new loops, and everything rests in its final state without motion.
   html.lw-motion is set in <head> only when the visitor allows motion. Class prefix: lw- (laurel). */

/* ---------- shared: laurel line art ---------- */
.lw-art { display: block; overflow: visible; pointer-events: none; max-width: none; }
.lw-art .lw-leaf { fill: currentColor; fill-opacity: .16; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.lw-art .lw-stem { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; fill: none; }

/* draw-in, driven by .lw-arm (waiting) and .lw-in (in view) on any ancestor */
html.lw-motion .lw-arm .lw-leaf, html.lw-motion .lw-arm .lw-stem { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.lw-motion .lw-arm .lw-leaf { fill-opacity: 0; }
html.lw-motion .lw-arm.lw-in .lw-stem { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) var(--lw-at, 0s); }
html.lw-motion .lw-arm.lw-in .lw-leaf {
  stroke-dashoffset: 0; fill-opacity: .16;
  transition: stroke-dashoffset .7s var(--ease) calc(var(--lw-at, 0s) + var(--d, 0) * 70ms),
              fill-opacity .6s ease calc(var(--lw-at, 0s) + var(--d, 0) * 70ms + .35s);
}

@keyframes lw-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lw-fill { from { fill-opacity: 0; } }
@keyframes lw-rise { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes lw-lift { from { opacity: .3; transform: translateY(14px); } }
@keyframes lw-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes lw-grow-x { from { transform: scaleX(0); } }
@keyframes lw-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- E1: home hero — the dashboard in a laurel wreath ---------- */
#main .lw-hero { grid-area: shot; align-self: center; margin: 0; min-width: 0; position: relative; z-index: 1; }
.lw-stage { position: relative; width: min(100%, 540px); aspect-ratio: 1 / 1; margin-inline: auto; perspective: 1200px; }
.lw-stage > .lw-wreath { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--on-brand-light); opacity: .62; }
.lw-stage > .lw-wreath .lw-leaf, .lw-stage > .lw-wreath .lw-stem { stroke-width: 2; }
.lw-tilt { position: absolute; inset: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .6s var(--ease-out); }
.lw-card {
  position: absolute; left: 15%; right: 15%; top: 23%;
  background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: 16px 18px 14px; font-family: var(--sans);
}
.lw-card-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lw-mark { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.lw-title { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.1; color: var(--ink); }
.lw-win { margin-left: auto; display: flex; gap: 5px; }
.lw-win i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.lw-spark { display: block; width: 100%; height: 86px; margin: 12px 0 8px; overflow: visible; }
.lw-spark .lw-grid { stroke: var(--line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.lw-spark .lw-area { fill: var(--terracotta); fill-opacity: .1; stroke: none; }
.lw-spark .lw-line { fill: none; stroke: var(--terracotta-text); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lw-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lw-rows li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px 20px; align-items: center; gap: 10px;
  padding: 7px 8px; margin-inline: -8px; border-radius: var(--r-sm); transition: background-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.lw-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--terracotta-text); background: color-mix(in srgb, var(--terracotta) 12%, var(--surface)); }
.lw-ic svg { width: 15px; height: 15px; stroke-width: 2.2; }
.lw-rl { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-bar { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.lw-bar b { display: block; height: 100%; width: calc(var(--w, .5) * 100%); border-radius: inherit; background: var(--terracotta); transform-origin: left center; }
.lw-ok { width: 20px; height: 20px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.lw-check { width: 14px; height: 14px; }
.lw-check path { fill: none; stroke: var(--surface); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.lw-chip { position: absolute; background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--sh-2); display: flex; align-items: center; translate: var(--px, 0) var(--py, 0); transition: translate .6s var(--ease-out); }
.lw-chip--stars { right: 3%; top: 15%; gap: 3px; padding: 9px 13px; }
.lw-star { width: 16px; height: 16px; }
.lw-star path { fill: var(--amber); stroke: var(--terracotta-deep); stroke-width: .6; stroke-linejoin: round; }
.lw-chip--pin { left: 4%; bottom: 13%; width: 64px; height: 64px; border-radius: 50%; justify-content: center; flex-direction: column; gap: 0; }
.lw-chip--pin .lw-crown { width: 34px; height: auto; color: var(--terracotta-text); margin-bottom: -2px; }
.lw-chip--pin .lw-crown .lw-leaf, .lw-chip--pin .lw-crown .lw-stem { stroke-width: 1.6; }
.lw-pin { width: 24px; height: 24px; }
.lw-pin path { fill: var(--terracotta); stroke: none; }
.lw-pin circle { fill: var(--surface); }
.lw-cap { margin: 10px auto 0; max-width: 46ch; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--on-brand); }
@media (hover: hover) and (pointer: fine) {
  .lw-rows li:hover { background: var(--surface-2); transform: translateX(3px); }
}
/* the hero card plays once on load */
html.lw-motion .lw-stage > .lw-wreath .lw-stem { stroke-dasharray: 1 1; animation: lw-draw 1.4s var(--ease) .1s both; }
html.lw-motion .lw-stage > .lw-wreath .lw-leaf { stroke-dasharray: 1 1; animation: lw-draw .8s var(--ease) calc(.25s + var(--d) * 75ms) both, lw-fill .8s ease calc(.6s + var(--d) * 75ms) both; }
html.lw-motion .lw-card { animation: lw-rise 1s var(--ease) .2s both; }
html.lw-motion .lw-spark .lw-line { stroke-dasharray: 1 1; animation: lw-draw 1.3s var(--ease-out) .7s both; }
html.lw-motion .lw-spark .lw-area { animation: lw-fill 1s ease 1.2s both; }
html.lw-motion .lw-rows li { animation: lw-lift .55s var(--ease) calc(.95s + var(--i) * .16s) both; }
html.lw-motion .lw-bar b { animation: lw-grow-x .9s var(--ease) calc(1.1s + var(--i) * .16s) both; }
html.lw-motion .lw-ok { animation: lw-pop .45s var(--ease) calc(1.45s + var(--i) * .16s) both; }
html.lw-motion .lw-check path { animation: lw-draw .4s var(--ease-out) calc(1.6s + var(--i) * .16s) both; }
html.lw-motion .lw-chip--stars { animation: lw-pop .55s var(--ease) 1.95s both; }
html.lw-motion .lw-star { animation: lw-pop .4s var(--ease) calc(2.05s + var(--i) * .07s) both; }
html.lw-motion .lw-chip--pin { animation: lw-pop .55s var(--ease) 2.15s both; }
html.lw-motion .lw-chip--pin .lw-crown .lw-leaf, html.lw-motion .lw-chip--pin .lw-crown .lw-stem { stroke-dasharray: 1 1; animation: lw-draw .6s var(--ease) calc(2.4s + var(--d) * 80ms) both; }
html.lw-motion .lw-cap { animation: lw-lift .7s var(--ease) .5s both; }
/* hero words arrive in reading order (never hidden: they start at 30% and settle) */
html.lw-motion #main .r1-k { animation: lw-lift .6s var(--ease) both; }
html.lw-motion #main .r1-k::before { animation: lw-wipe .9s var(--ease) .15s both; }
html.lw-motion #main .r1-h .ln { animation: lw-lift .8s var(--ease) .05s both; }
html.lw-motion #main .r1-h .ln + .ln { animation-delay: .17s; }
html.lw-motion #main .r1-side > * { animation: lw-lift .8s var(--ease) .3s both; }
html.lw-motion #main .r1-side > * + * { animation-delay: .42s; }
html.lw-motion #main .r1-a { animation: lw-lift .8s var(--ease) .55s both; }
@media (max-width: 960px) {
  #main .lw-hero { margin-top: 2.25rem; }
  .lw-stage { width: min(100%, 440px); }
}
@media (max-width: 520px) {
  .lw-stage { aspect-ratio: 1 / 1.08; }
  .lw-card { left: 7%; right: 7%; top: 17%; padding: 14px 14px 12px; }
  .lw-title { font-size: 17px; }
  .lw-spark { height: 64px; margin: 10px 0 6px; }
  .lw-rows li { grid-template-columns: 26px minmax(0, 1fr) 44px 20px; gap: 8px; padding-block: 6px; }
  .lw-ic { width: 26px; height: 26px; }
  .lw-rl { font-size: 13px; }
  .lw-chip--stars { top: 8%; right: 2%; padding: 7px 10px; }
  .lw-star { width: 13px; height: 13px; }
  .lw-chip--pin { left: 1%; bottom: 4%; width: 54px; height: 54px; }
  .lw-cap { font-size: 14px; }
}

/* ---------- small helpers used by the script ---------- */
.lw-swash { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .32em; color: var(--terracotta); pointer-events: none; overflow: visible; }
.lw-swash path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
html.lw-motion .lw-arm .lw-swash path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.lw-motion .lw-arm.lw-in .lw-swash path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) .45s; }
.lw-acc { position: relative; }

/* E2: the rule beside the first statement grows top to bottom */
.lw-rule { position: relative; }
html.lw-motion .lw-arm .lw-rule { border-left-color: transparent; }
html.lw-motion .lw-arm .lw-rule::before {
  content: ""; position: absolute; left: calc(-1 * var(--lw-bw, 2px)); top: 0; bottom: 0; width: var(--lw-bw, 2px);
  background: var(--terracotta); transform: scaleY(0); transform-origin: top center;
}
html.lw-motion .lw-arm.lw-in .lw-rule::before { transform: scaleY(1); transition: transform 1s var(--ease) calc(var(--k, 0) * .35s); }

/* E3: sprigs either side of a kicker */
.lw-flank { display: inline-block; width: 54px; height: 20px; vertical-align: middle; color: var(--terracotta); margin-inline: 10px; }
.lw-flank.lw-mirror { transform: scaleX(-1); }
.lw-flank .lw-leaf, .lw-flank .lw-stem { stroke-width: 1.2; }

/* E4: the proof chart draws itself */
.r1-chart-svg .lw-guide { stroke: var(--terracotta-text); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .2s; }
.r1-chart-svg.lw-hover .lw-guide { opacity: .55; }
.r1-chart-svg circle { transition: r .2s var(--ease-out); }
.r1-chart-svg circle.lw-hot { r: 6.5; }
.r1-chart-svg .lw-cwreath { color: var(--terracotta-text); }
.r1-chart-svg .lw-cwreath .lw-leaf, .r1-chart-svg .lw-cwreath .lw-stem { stroke-width: 1.3; }
html.lw-motion .lw-arm .lw-cline { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.lw-motion .lw-arm.lw-in .lw-cline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .25, 1) .3s; }
html.lw-motion .lw-arm .lw-cbar { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
html.lw-motion .lw-arm.lw-in .lw-cbar { transform: scaleY(1); transition: transform .8s var(--ease) calc(.9s + var(--k, 0) * .1s); }
html.lw-motion .lw-arm .lw-cdot, html.lw-motion .lw-arm .lw-cfade { opacity: 0; }
html.lw-motion .lw-arm.lw-in .lw-cdot { opacity: 1; transition: opacity .3s ease calc(.3s + var(--k, 0) * .12s); }
html.lw-motion .lw-arm.lw-in .lw-cfade { opacity: 1; transition: opacity .6s ease var(--lw-at, 1.6s); }

/* E5: proof figures — the 64 dots and the "almost double" bars */
.lw-fig { display: block; margin: 14px 0 6px; }
.lw-dots { display: grid; grid-template-columns: repeat(16, 8px); gap: 5px; }
.lw-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); }
.lw-pair { display: grid; gap: 8px; max-width: 280px; }
.lw-pair i { display: block; height: 12px; border-radius: var(--r-pill); background: var(--line-strong); transform-origin: left center; }
.lw-pair i + i { background: var(--terracotta); }
html.lw-motion .lw-arm .lw-dots i { opacity: 0; transform: scale(.4); }
html.lw-motion .lw-arm.lw-in .lw-dots i { opacity: 1; transform: none; transition: opacity .25s ease calc(var(--k) * 14ms), transform .35s var(--ease) calc(var(--k) * 14ms); }
html.lw-motion .lw-arm .lw-pair i { transform: scaleX(0); }
html.lw-motion .lw-arm.lw-in .lw-pair i { transform: scaleX(1); transition: transform 1s var(--ease) .2s; }
html.lw-motion .lw-arm.lw-in .lw-pair i + i { transition-delay: .55s; }

/* E6: a laurel wreath around Corey's portrait */
.lw-ring { position: relative; display: block; }
/* the wrapper hugs the photo at every width, so the wreath stays centred on it (phones stack the row) */
.founder-row > .lw-ring { width: fit-content; justify-self: start; align-self: center; line-height: 0; }
@media (max-width: 767px) { .founder-row > .lw-ring > .lw-art { inset: -13%; width: 126%; height: 126%; } }
.lw-ring > .lw-art { position: absolute; inset: -22%; width: 144%; height: 144%; color: var(--terracotta); opacity: .8; }
.lw-ring > .lw-art .lw-leaf, .lw-ring > .lw-art .lw-stem { stroke-width: 2.2; }
.founder-photo.lw-ring > .lw-art { inset: auto -10% -14% -10%; width: 120%; height: auto; }

/* E7 / E17: step numerals light up in turn after the rail draws */
html.lw-motion .steps.is-armed .n, html.lw-motion .method-steps.lw-arm .n { opacity: .25; transform: scale(.7); transform-origin: left bottom; }
html.lw-motion .steps.is-armed.is-visible .n, html.lw-motion .method-steps.lw-arm.lw-in .n { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s var(--ease); }
html.lw-motion .steps.is-armed.is-visible .step:nth-child(1) .n, html.lw-motion .method-steps.lw-in > :nth-child(1) .n { transition-delay: .35s; }
html.lw-motion .steps.is-armed.is-visible .step:nth-child(2) .n, html.lw-motion .method-steps.lw-in > :nth-child(2) .n { transition-delay: .75s; }
html.lw-motion .steps.is-armed.is-visible .step:nth-child(3) .n, html.lw-motion .method-steps.lw-in > :nth-child(3) .n { transition-delay: 1.15s; }
html.lw-motion .method-steps.lw-in > :nth-child(4) .n { transition-delay: 1.55s; }
/* the review-reply card: rises, tilts with the pointer, one light sweep */
.r1-bridge-card { position: relative; overflow: hidden; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); }
.r1-bridge-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--surface) 55%, transparent) 50%, transparent 65%); transform: translateX(-120%); }
html.lw-motion .r1-bridge.lw-arm .r1-bridge-card { opacity: 0; translate: 0 30px; }
html.lw-motion .r1-bridge.lw-in .r1-bridge-card { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate 1s var(--ease), transform .6s var(--ease-out); }
html.lw-motion .r1-bridge.lw-in .r1-bridge-card::after { transform: translateX(120%); transition: transform 1.4s var(--ease-out) .7s; }

/* E8: eight jobs — a branch of eight leaves; each cell grows its leaf */
.lw-branch { width: min(320px, 70%); height: 46px; color: var(--terracotta); margin-top: 14px; }
.lw-branch .lw-leaf { transition: fill-opacity .3s ease, transform .3s var(--ease); transform-box: fill-box; }
.lw-branch .lw-leaf.lw-hot { fill-opacity: .6 !important; }
html.lw-motion .j8.is-armed .j8-cell { opacity: 0; transform: translateY(12px); }
html.lw-motion .j8.is-armed.is-visible .j8-cell { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--k) * 90ms), transform .6s var(--ease) calc(var(--k) * 90ms), background-color .25s; }
.j8-cell { transition: transform .25s var(--ease-out), background-color .25s var(--ease-out); }
.j8-cell::before { transition: color .25s; }
@media (hover: hover) and (pointer: fine) {
  .j8-cell:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--terracotta) 5%, transparent); }
  .j8-cell:hover .j8-l { color: var(--terracotta-text); }
}

/* E9: the closing band — a large wreath behind the heading; the button leans toward the pointer */
.cta-band .lw-bigwreath { position: absolute; left: 50%; top: 50%; width: min(1060px, 104%); aspect-ratio: 1; translate: -50% -50%; color: var(--on-brand-light); opacity: .34; }
@media (max-width: 760px) { .cta-band .lw-bigwreath { display: none; } }
.cta-band .lw-bigwreath .lw-leaf, .cta-band .lw-bigwreath .lw-stem { stroke-width: 1.6; }
.lw-magnet { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .35s var(--ease-out); }
.hero-actions a:hover .arw, .hero-actions a:focus-visible .arw, .textlink:hover svg { transform: translateX(3px); }
.hero-actions .arw, .textlink svg { transition: transform .25s var(--ease-out); }

/* E10: the footer's wave bullets sway like a leaf on hover (the nav underline already draws, so it is left alone) */
.site-footer .alloro-menu li::before { transition: transform .35s var(--ease); transform-origin: 20% 50%; }
.site-footer .alloro-menu li:hover::before, .site-footer .alloro-menu li:focus-within::before { transform: rotate(-16deg) translateX(3px) scale(1.1); }

/* E11: the cover leaf draws itself on load and drifts with the pointer */
.hero-band .leaf { translate: var(--lx, 0) var(--ly, 0); transition: translate .8s var(--ease-out); }
html.lw-motion .hero-band .leaf.lw-pl path { stroke-dasharray: 1 1; animation: lw-draw 2s var(--ease) .2s both; }
html.lw-motion .hero-band .leaf.lw-pl path + path { animation-delay: .7s; }
html.lw-motion .hero-band .leaf.lw-pl path + path + path { animation-delay: 1s; }

/* E12: feature heroes — wordless drawings in the empty right half */
@media (min-width: 1080px) {
  html body #main .hero-grid.lw-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; column-gap: clamp(2rem, 4vw, 4rem); }
}
html body #main .hero-grid.lw-split > .hero-copy { order: 1; }
html body #main .hero-grid.lw-split > .lw-feat { order: 2; }
.lw-feat { position: relative; width: min(100%, 460px); aspect-ratio: 1 / .86; margin-inline: auto; perspective: 1100px; }
.lw-feat .lw-tilt { position: absolute; inset: 0; }
.lw-win2 { position: absolute; inset: 6% 4% 8% 4%; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 16px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; overflow: hidden; }
.lw-win2-top { display: flex; align-items: center; gap: 6px; }
.lw-win2-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.lw-win2-top b { margin-left: 10px; height: 8px; width: 34%; border-radius: var(--r-pill); background: var(--line); }
.lw-skel { display: grid; gap: 8px; }
.lw-skel b { height: 8px; border-radius: var(--r-pill); background: var(--line); width: var(--w, 70%); }
.lw-plot { position: relative; display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; min-height: 0; }
.lw-plot svg { width: 100%; height: 100%; overflow: visible; }
.lw-plot .lw-line { fill: none; stroke: var(--terracotta-text); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lw-plot .lw-area { fill: var(--terracotta); fill-opacity: .1; }
.lw-plot .lw-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-cols { display: flex; align-items: flex-end; gap: 8px; padding-top: 10%; }
.lw-cols i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--terracotta) 30%, var(--surface)); transform-origin: bottom; }
.lw-cols i:last-child { background: var(--terracotta); }
.lw-map { position: absolute; inset: 6% 4% 8% 4%; background: var(--surface-2); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; }
.lw-map svg.lw-roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.lw-map .lw-roads path { fill: none; stroke: var(--line-strong); stroke-width: 10; stroke-linecap: round; }
.lw-map .lw-roads path.lw-thin { stroke-width: 4; stroke: var(--line); }
.lw-mpin { position: absolute; width: 26px; height: 26px; translate: -50% -100%; color: var(--muted); }
.lw-mpin svg { width: 100%; height: 100%; display: block; }
.lw-mpin path { fill: currentColor; }
.lw-mpin circle { fill: var(--surface); }
.lw-mpin--you { width: 40px; height: 40px; color: var(--terracotta); z-index: 2; }
.lw-mpin--you .lw-crown { position: absolute; left: 50%; bottom: 100%; width: 58px; translate: -50% 4px; color: var(--terracotta-text); }
.lw-mpin--you .lw-crown .lw-leaf, .lw-mpin--you .lw-crown .lw-stem { stroke-width: 1.6; }
.lw-top { position: absolute; left: 50%; top: 14%; translate: -50% 0; width: 46%; height: 30px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1); display: flex; align-items: center; gap: 8px; padding-inline: 10px; }
.lw-top i { width: 14px; height: 14px; border-radius: 50%; background: var(--terracotta); flex: none; }
.lw-top b { height: 7px; flex: 1; border-radius: var(--r-pill); background: var(--line); }
html.lw-motion .lw-feat .lw-win2, html.lw-motion .lw-feat .lw-map { animation: lw-rise 1s var(--ease) .25s both; }
html.lw-motion .lw-feat .lw-line { stroke-dasharray: 1 1; animation: lw-draw 1.4s var(--ease-out) .8s both; }
html.lw-motion .lw-feat .lw-area { animation: lw-fill 1s ease 1.4s both; }
html.lw-motion .lw-feat .lw-cols i { animation: lw-grow-y .8s var(--ease) calc(1s + var(--k) * .12s) both; }
html.lw-motion .lw-feat .lw-skel b { animation: lw-grow-x .7s var(--ease) calc(1.2s + var(--k) * .1s) both; transform-origin: left; }
html.lw-motion .lw-feat .lw-roads path { stroke-dasharray: 1 1; animation: lw-draw 1.2s var(--ease) calc(.4s + var(--k, 0) * .15s) both; }
html.lw-motion .lw-feat .lw-mpin { animation: lw-pop .45s var(--ease) calc(1s + var(--k) * .12s) both; }
html.lw-motion .lw-feat .lw-mpin--you { animation: lw-climb 1.1s var(--ease) 1.6s both; }
html.lw-motion .lw-feat .lw-top { animation: lw-pop .5s var(--ease) 2.3s both; }
html.lw-motion .lw-feat .lw-crown .lw-leaf, html.lw-motion .lw-feat .lw-crown .lw-stem { stroke-dasharray: 1 1; animation: lw-draw .6s var(--ease) calc(2.5s + var(--d) * 80ms) both; }
@keyframes lw-grow-y { from { transform: scaleY(0); } }
@keyframes lw-climb { from { opacity: 0; top: var(--from, 80%); } 30% { opacity: 1; } }
@media (max-width: 1079px) { .lw-feat { width: min(100%, 420px); margin-top: 2.5rem; } }
@media (max-width: 640px) { .lw-feat { display: none; } }
/* existing hero images on two feature pages: same entrance and tilt as the home card */
.r2-visual > figure, .r2-visual > * { transition: transform .6s var(--ease-out); }
html.lw-motion #main .r2-visual { animation: lw-rise 1s var(--ease) .3s both; }

/* E14: comparison tables — the Alloro checks draw in, a hovered row lights across */
html.lw-motion .cmp-wrap.is-armed .col-alloro .mark.lw-pl path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.lw-motion .cmp-wrap.is-armed.is-visible .col-alloro .mark.lw-pl path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out) calc(.5s + var(--k, 0) * .12s); }
.cmp tbody tr > * { transition: background-color .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cmp tbody tr:hover > th, .cmp tbody tr:hover > td:not(.col-alloro) { background-color: color-mix(in srgb, var(--terracotta) 6%, transparent); }
  .cmp tbody tr:hover > td.col-alloro { background-color: color-mix(in srgb, var(--ink) 86%, var(--terracotta)); }
}

/* E15 / E18: included cards — icon tiles pop in order, cards lift on hover */
html.lw-motion .stagger.is-armed .pic { transform: scale(.6); opacity: 0; }
html.lw-motion .stagger.is-armed.is-visible .pic { transform: none; opacity: 1; transition: opacity .4s ease calc(.15s + var(--k, 0) * 90ms), transform .55s var(--ease) calc(.15s + var(--k, 0) * 90ms); }
.ledger .svc, .svc-grid .svc { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.svc .pic svg { transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ledger .svc:hover, .svc-grid .svc:hover { transform: translateY(-3px); box-shadow: var(--sh-1); }
  .svc:hover .pic svg { transform: rotate(-8deg) scale(1.08); }
}

/* E16: FAQ — the answer slides open and shut (height animated by the script); the minus turns in as it appears */
@keyframes lw-turn { from { transform: rotate(-90deg); opacity: 0; } }
html.lw-motion #faq details[open] summary .lucide-minus { animation: lw-turn .35s var(--ease); }
html.lw-motion #faq details[open]:not(.lw-closing) summary .lucide-minus { animation-play-state: running; }
#faq details > div { overflow: hidden; }

/* E19: about — a vine down the biography rows */
.entity-ledger.lw-vined { position: relative; }
.lw-vine { position: absolute; left: -30px; top: 0; width: 22px; height: 100%; color: var(--terracotta); overflow: visible; }
.lw-vine .lw-leaf, .lw-vine .lw-stem { stroke-width: 1.3; }
@media (max-width: 1100px) { .lw-vine { display: none; } }

/* E20: contact fields get a clear terracotta focus ring */
form input:focus-visible, form textarea:focus-visible, form select:focus-visible { outline: 2px solid var(--terracotta-text); outline-offset: 2px; border-color: var(--terracotta-text); }
form input, form textarea, form select { transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }

/* without motion: every enhancement rests in its final frame */
@media (prefers-reduced-motion: reduce) {
  .lw-tilt, .r1-bridge-card, .lw-chip, .hero-band .leaf, .lw-magnet { transform: none !important; translate: none !important; }
}

/* Phones (Jov, 2026-10-28): the founder quote block is centred once it stacks into one column (640px, as the site's own rule). */
@media (max-width: 640px) {
  .founder-row { justify-items: center; text-align: center; }
  .founder-row > .lw-ring, .founder-row > img { justify-self: center; }
  .founder-row .svc-cta, .founder-row .svc-cta > div { align-items: center; justify-content: center; }
  .founder-row .svc-cta p, .founder-row blockquote, .founder-row blockquote p { margin-inline: auto; }
  .founder-row .r1-flinks { justify-content: center; }
}
/* Phones (Jov, 2026-10-28): no laurel branch across Corey's photo on About once the photo runs full width (700px, as the site's own rule). */
@media (max-width: 700px) {
  .founder-photo.lw-ring > .lw-art { display: none; }
}
