/* TrySEO marketing site. Loaded after app.css (Tailwind + theme tokens: --ink, --body, --muted, --hair,
   --hair-soft, --grad, --grad-hover, --glow, --b500, --b600, --b700, --t500, --t600). */

html { scroll-behavior: smooth; }
body.site { background: #fff; overflow-x: hidden; }
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
.wrap-narrow { max-width: 48rem; margin-inline: auto; padding-inline: 1.25rem; }

.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 100; background: #fff; color: var(--ink);
  padding: .5rem .9rem; border-radius: .6rem; border: 1px solid var(--hair); }
.skip-link:focus { left: .75rem; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: .75rem; z-index: 50; padding-inline: .75rem; }
.navpill { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .5rem .5rem 1.1rem; border: 1px solid var(--hair); border-radius: 9999px;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 2px rgba(10,10,10,.03), 0 14px 34px -24px rgba(10,10,10,.45); }
.navlink { position: relative; font-size: .9875rem; font-weight: 500; color: #6B7280; transition: color .15s ease; }
.navlink:hover, .navlink.is-active { color: var(--ink); }
.navlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 2px; border-radius: 2px;
  background-image: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.4,0,.2,1); }
.navlink:hover::after, .navlink.is-active::after { transform: scaleX(1); }

.mobile-menu { position: relative; }
.mobile-menu > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; padding: .7rem .65rem; border-radius: 9999px; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu > summary:hover { background: var(--hair-soft); }
.mobile-menu > summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.mobile-menu[open] > summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] > summary span:nth-child(2) { opacity: 0; }
.mobile-menu[open] > summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-panel { position: absolute; right: 0; top: calc(100% + .7rem); width: min(19rem, calc(100vw - 2rem)); padding: .75rem;
  background: #fff; border: 1px solid var(--hair); border-radius: 1.25rem; box-shadow: 0 24px 60px -18px rgba(10,10,10,.3); }
.mobile-link { display: block; padding: .7rem .8rem; border-radius: .8rem; font-weight: 500; color: var(--body); }
.mobile-link:hover, .mobile-link.is-active { background: #F0FDF4; color: #15803D; }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 9999px;
  background: #F0FDF4; border: 1px solid #DCFCE7; color: #15803D; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
.hero-h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; color: var(--ink); }
.page-h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; color: var(--ink); }
.sec-h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.sec-h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.hero-lead, .page-lead { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.6; color: #6B7280; max-width: 44rem; margin-inline: auto; }
.sec-lead { font-size: 1.125rem; line-height: 1.65; color: #6B7280; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strike { position: relative; white-space: nowrap; color: #9CA3AF; }
.strike::after { content: ''; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; border-radius: 9999px;
  background: #EF4444; transform: rotate(-3deg) scaleX(0); transform-origin: left; animation: ts-strike .7s .5s cubic-bezier(.4,0,.2,1) forwards; }

/* ---------- Sections ---------- */
.sec { position: relative; padding-block: clamp(4rem, 8vw, 7rem); }
.sec-tint { background: #FAFBFA; border-block: 1px solid var(--hair); }
.sec-dark { background: #07110B; color: #C7D2CB; overflow: hidden; }
.sec-dark .sec-h2, .sec-dark .sec-h3 { color: #fff; }
.sec-dark .sec-lead { color: #9FB0A6; }
.page-hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); }
.dot-grid { background-image: radial-gradient(rgba(10,10,10,.09) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%); }

/* ---------- Decorative shapes (all aria-hidden) ---------- */
.shape { position: absolute; pointer-events: none; z-index: 0; }
.shape-blob { border-radius: 42% 58% 63% 37% / 44% 41% 59% 56%; filter: blur(46px); opacity: .55;
  background: radial-gradient(circle at 30% 30%, rgba(74,222,128,.55), rgba(45,212,191,.35) 60%, transparent 75%);
  animation: ts-morph 16s ease-in-out infinite; }
.shape-ring { border-radius: 9999px; border: 1.5px dashed rgba(22,163,74,.35); animation: ts-spin 38s linear infinite; }
.shape-spark { color: var(--b500); opacity: .85; animation: ts-float 7s ease-in-out infinite, ts-twinkle 3.2s ease-in-out infinite; }
.shape-square { border-radius: 1.1rem; border: 1.5px solid rgba(13,148,136,.35); transform: rotate(14deg); animation: ts-float 9s ease-in-out infinite reverse; }
.shape-a { width: 30rem; height: 26rem; left: -10rem; top: -8rem; }
.shape-b { width: 22rem; height: 22rem; right: -7rem; top: 2rem; }
.shape-c { right: 14%; top: 22%; }

/* ---------- Cards ---------- */
.tile { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--hair); border-radius: 1.5rem; padding: 1.75rem;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease; }
.tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; opacity: 0; transition: opacity .3s ease;
  background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tile:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 30px 60px -32px rgba(22,163,74,.45); }
.tile:hover::before { opacity: 1; }
.tile-dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #C7D2CB; }
.tile-dark:hover { box-shadow: 0 30px 70px -30px rgba(34,197,94,.55); }

/* Figure inside a tile: an inline SVG whose parts animate on hover.
   Give moving parts one of: .fig-rise .fig-spin .fig-pop .fig-draw .fig-slide .fig-pulse */
.fig { display: grid; place-items: center; height: 4.25rem; width: 4.25rem; border-radius: 1.25rem; background: #F0FDF4; color: var(--b600);
  transition: background .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.fig-lg { height: 9rem; width: 100%; border-radius: 1.25rem; background: linear-gradient(135deg, #F0FDF4, #ECFEFF); }
.fig svg { overflow: visible; }
.tile:hover .fig { transform: rotate(-4deg) scale(1.06); }
.tile:hover .fig-lg { transform: none; }
.fig-rise, .fig-spin, .fig-pop, .fig-slide, .fig-pulse { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; }
.tile:hover .fig-rise { transform: translateY(-6px); }
.tile:hover .fig-slide { transform: translateX(6px); }
.tile:hover .fig-pop { transform: scale(1.18); }
.tile:hover .fig-spin { transform: rotate(180deg); transition-duration: .9s; }
.tile:hover .fig-pulse { animation: ts-pulse 1.1s ease-in-out infinite; }
.fig-draw { stroke-dasharray: var(--len, 120); stroke-dashoffset: var(--len, 120); transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1); }
.tile:hover .fig-draw, .is-in .fig-draw.auto { stroke-dashoffset: 0; }
.fig-bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(.45); transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.tile:hover .fig-bar, .is-in .fig-bar.auto { transform: scaleY(1); }
.fig-bar:nth-of-type(2) { transition-delay: .06s; } .fig-bar:nth-of-type(3) { transition-delay: .12s; } .fig-bar:nth-of-type(4) { transition-delay: .18s; }

/* Always-on gentle motion for hero art */
.floaty { animation: ts-float 6.5s ease-in-out infinite; }
.floaty-slow { animation: ts-float 10s ease-in-out infinite reverse; }
.spin-slow { animation: ts-spin 30s linear infinite; transform-box: fill-box; transform-origin: center; }
.twinkle { animation: ts-twinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* ---------- Pieces ---------- */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 9999px; font-size: .8125rem; font-weight: 600;
  border: 1px solid var(--hair); background: #fff; color: var(--body); }
.chip-good { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.chip-bad { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.chip-warn { background: #FFF7ED; border-color: #FED7AA; color: #C2410C; }
.check-list li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; line-height: 1.6; }
.check-list li::before { content: ''; position: absolute; left: 0; top: .2rem; height: 1.25rem; width: 1.25rem; border-radius: 9999px; background: #DCFCE7
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center / .75rem no-repeat; }
.cross-list li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; line-height: 1.6; }
.cross-list li::before { content: ''; position: absolute; left: 0; top: .2rem; height: 1.25rem; width: 1.25rem; border-radius: 9999px; background: #FEE2E2
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / .7rem no-repeat; }
.step-num { display: inline-grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: 9999px; background-image: var(--grad); color: #fff;
  font-weight: 800; box-shadow: var(--glow); }
.step-line { position: absolute; left: 1.35rem; top: 3.25rem; bottom: -1.5rem; width: 2px; background: linear-gradient(var(--b500), transparent); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: .75rem; width: max-content; animation: ts-marquee 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.faq-item { border: 1px solid var(--hair); border-radius: 1.1rem; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item[open], .faq-item:hover { border-color: #BBF7D0; box-shadow: 0 16px 36px -28px rgba(22,163,74,.5); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; font-weight: 600; color: var(--ink); font-size: 1.0625rem; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: '+'; flex-shrink: 0; display: grid; place-items: center; height: 1.75rem; width: 1.75rem; border-radius: 9999px;
  background: #F0FDF4; color: #15803D; font-weight: 700; transition: transform .25s ease; }
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > div { padding: 0 1.35rem 1.25rem; line-height: 1.7; color: var(--body); }

.site-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.site-table th { text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .85rem 1rem; border-bottom: 1px solid var(--hair); background: #FAFBFA; }
.site-table td { padding: .95rem 1rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.site-table tr:last-child td { border-bottom: 0; }
.site-table tbody tr { transition: background .15s ease; }
.site-table tbody tr:hover { background: #FAFDFB; }

/* Long-form text (legal, about) */
.site-prose { color: var(--body); line-height: 1.75; font-size: 1.0625rem; }
.site-prose h2 { margin: 2.4rem 0 .7rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.site-prose h3 { margin: 1.6rem 0 .5rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.site-prose p { margin: 0 0 1rem; }
.site-prose ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1rem; }
.site-prose li { margin-bottom: .4rem; }
.site-prose a { color: #15803D; text-decoration: underline; text-underline-offset: 2px; }
.site-prose strong { color: var(--ink); font-weight: 600; }

/* ---------- CTA band + footer ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: 2rem; padding: clamp(3rem, 7vw, 5rem) 1.5rem; text-align: center; background-image: var(--grad); }
.cta-band::before { content: ''; position: absolute; inset: 0; opacity: .3;
  background-image: radial-gradient(circle at 18% 20%, rgba(255,255,255,.6), transparent 42%), radial-gradient(circle at 84% 82%, rgba(255,255,255,.4), transparent 42%); }
.cta-h2 { color: #fff; font-weight: 800; letter-spacing: -.04em; line-height: 1.03; font-size: clamp(2rem, 4.6vw, 3.4rem); }
.cta-spark { position: absolute; color: rgba(255,255,255,.22); }
.cta-spark-a { left: 6%; top: 12%; animation: ts-float 8s ease-in-out infinite; }
.cta-spark-b { right: 9%; bottom: 14%; animation: ts-float 6s ease-in-out infinite reverse, ts-twinkle 3s ease-in-out infinite; }
.site-footer { border-top: 1px solid var(--hair); padding-block: 4rem 2.5rem; background: #fff; }
.footer-title { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.footer-link { color: var(--muted); transition: color .15s ease; }
.footer-link:hover { color: var(--ink); }

/* ---------- Reveal on scroll (only when JS sets .js-reveal) ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.js-reveal [data-reveal="1"] { transition-delay: .08s; } .js-reveal [data-reveal="2"] { transition-delay: .16s; }
.js-reveal [data-reveal="3"] { transition-delay: .24s; } .js-reveal [data-reveal="4"] { transition-delay: .32s; }

@keyframes ts-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes ts-spin { to { transform: rotate(360deg); } }
@keyframes ts-twinkle { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes ts-morph { 0%,100% { border-radius: 42% 58% 63% 37% / 44% 41% 59% 56%; } 50% { border-radius: 61% 39% 38% 62% / 57% 60% 40% 43%; } }
@keyframes ts-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ts-marquee { to { transform: translateX(-50%); } }
@keyframes ts-strike { to { transform: rotate(-3deg) scaleX(1); } }
@keyframes ts-dash { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fig-draw { stroke-dashoffset: 0; } .fig-bar { transform: none; } .strike::after { transform: rotate(-3deg) scaleX(1); }
}

/* ---------- Inner pages: features, how-it-works, seo-rulebook, pricing, faq, about, contact ---------- */
.fig-sm { height: 3rem; width: 3rem; border-radius: .95rem; }
.fig-xl { height: auto; aspect-ratio: 16 / 10; padding: .5rem; }
.fig-xl svg { width: 100%; height: 100%; }
.tile-muted { background: #FAFBFA; border-style: dashed; }
.phase-num { font-size: clamp(3rem, 7vw, 4.75rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(22,163,74,.4); }
/* Rule weight, 1 to 4 dots */
.meter { display: inline-flex; align-items: center; gap: .28rem; }
.meter i { display: block; height: .5rem; width: .5rem; border-radius: 9999px; background: #E5E7EB; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.meter i.on { background-image: var(--grad); }
.tile:hover .meter i.on { transform: scale(1.4); }
.meter i:nth-child(2) { transition-delay: .05s; } .meter i:nth-child(3) { transition-delay: .1s; } .meter i:nth-child(4) { transition-delay: .15s; }
/* Score ring and phase bars: drawn by default, animated in when the reveal script is active */
.ring-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--to, 0); }
.js-reveal .ring-draw { stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .2s; }
.js-reveal .is-in .ring-draw { stroke-dashoffset: var(--to, 0); }
.score-bar { height: .5rem; border-radius: 9999px; background: #EDEEF0; overflow: hidden; }
.score-bar > span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background-image: var(--grad); }
.js-reveal .score-bar > span { width: 0; transition: width 1.1s cubic-bezier(.4,0,.2,1) .25s; }
.js-reveal .is-in .score-bar > span { width: var(--w, 0%); }

/* landing */
@property --ld-n { syntax: '<integer>'; initial-value: 0; inherits: true; }
.ld-hero { position: relative; overflow: hidden; padding: clamp(3.25rem, 7vw, 6rem) 0 clamp(4.5rem, 8vw, 7rem); }
.ld-hero-grid { position: absolute; inset: 0; pointer-events: none; }
.ld-grad { padding-bottom: .12em; }
.ld-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; }
.ld-proof li { display: flex; flex-direction: column; text-align: left; padding-left: .9rem; border-left: 2px solid #BBF7D0; }
.ld-proof b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.2; }
.ld-proof span { font-size: .8125rem; color: var(--muted); }
@media (min-width: 1024px) { .ld-proof { justify-content: flex-start; } }

/* landing: hero illustration, an article card being scored */
.ld-art { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; padding: 2.25rem 0 2.75rem; }
.ld-card { position: relative; z-index: 1; background: #fff; border: 1px solid var(--hair); border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 40px 80px -36px rgba(22,163,74,.5), 0 24px 48px -30px rgba(10,10,10,.3); }
.ld-card-bar { display: flex; align-items: center; gap: .35rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--hair); background: #FAFBFA; }
.ld-dot { height: .55rem; width: .55rem; border-radius: 9999px; background: #D1FADF; }
.ld-dot:first-child { background: #86EFAC; }
.ld-card-body { position: relative; overflow: hidden; padding: 1.25rem 7.25rem 1.1rem 1.25rem; }
.ld-card-checks { padding: 1rem 1.25rem 1.25rem; border-top: 1px dashed #D1FADF; background: linear-gradient(180deg, #FCFEFD, #F3FDF6); }
.ld-tag { flex-shrink: 0; margin-top: .15rem; padding: .1rem .4rem; border-radius: .4rem; background: #0A0A0A; color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .04em; }
.ld-mark { background: linear-gradient(transparent 55%, #BBF7D0 55%); color: var(--ink); font-weight: 600; }
.ld-line { position: relative; display: block; height: .5rem; border-radius: 9999px; background: #EDEEF0; overflow: hidden; }
.ld-line-dark { background: #C9CDD2; height: .6rem; }
.ld-line i { position: absolute; top: 0; bottom: 0; border-radius: 9999px; background: #86EFAC; }
.ld-scan { position: absolute; left: 0; right: 0; top: 0; height: 3.5rem; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(34,197,94,.13) 85%, rgba(34,197,94,.5) 100%); border-bottom: 1.5px solid rgba(34,197,94,.7);
  opacity: 0; transform: translateY(-110%); animation: ld-scan 5s cubic-bezier(.4,0,.2,1) 1s infinite; }
.ld-chip { padding: .28rem .6rem; font-size: .75rem; animation: ld-chip .55s ease var(--d, 0s) backwards; }
.ld-chip .ld-tick { animation: ld-tick .5s cubic-bezier(.34,1.56,.64,1) var(--d, 0s) backwards; }
.ld-score { position: absolute; z-index: 2; right: -.35rem; top: 0; padding: .7rem .7rem .6rem; border-radius: 1.4rem; background: #fff; border: 1px solid var(--hair);
  box-shadow: 0 26px 50px -22px rgba(10,10,10,.4); }
.ld-score-svg { display: block; height: 5.75rem; width: 5.75rem; }
.ld-ring { stroke-dasharray: var(--len); stroke-dashoffset: var(--off); animation: ld-ring 1.9s cubic-bezier(.4,0,.2,1) .5s backwards; }
.ld-score-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink);
  animation: ld-count 1.9s cubic-bezier(.4,0,.2,1) .5s backwards; }
.ld-score-num::after { counter-reset: ldn var(--ld-n); content: counter(ldn); }
.ld-note { position: absolute; z-index: 2; left: .75rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 9999px;
  background: #07110B; color: #fff; font-size: .8125rem; font-weight: 600; box-shadow: 0 18px 36px -18px rgba(10,10,10,.6); }
@media (min-width: 640px) {
  .ld-score { right: -1.5rem; top: -.25rem; padding: .85rem .85rem .7rem; } .ld-score-svg { height: 7rem; width: 7rem; } .ld-score-num { font-size: 2.1rem; }
  .ld-card-body { padding-right: 8.25rem; } .ld-note { left: 1.25rem; }
}

/* landing: why now */
.ld-fact { position: relative; padding: 1.4rem 1.5rem; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); }
.ld-versus { position: relative; }
.ld-vs { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 9999px;
  background: #07110B; border: 1.5px solid rgba(255,255,255,.18); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ld-bad:hover { box-shadow: 0 30px 70px -30px rgba(239,68,68,.45); }
.ld-bad::before { background: linear-gradient(135deg, #EF4444, #7F1D1D); }
.ld-good { background: linear-gradient(160deg, rgba(34,197,94,.12), rgba(13,148,136,.05)); border-color: rgba(74,222,128,.3); }

/* landing: figure helpers */
.ld-shift { transform-box: fill-box; transition: transform .55s cubic-bezier(.34,1.56,.64,1); }
.ld-sweep { transform-box: fill-box; transition: transform 1.1s cubic-bezier(.4,0,.2,1); }
.tile:hover .ld-shift { transform: translate(var(--x, 0), var(--y, 0)); }
.tile:hover .ld-sweep { transform: translateX(var(--dx, 80px)); }
.ld-orbit { transform-box: view-box; transform-origin: 100px 60px; transition: transform 1.2s cubic-bezier(.4,0,.2,1); }
.tile:hover .ld-orbit { transform: rotate(24deg); }

/* landing: rulebook gauge */
.ld-gauge-card { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 1.75rem; background-color: #07110B; color: #C7D2CB;
  background-image: radial-gradient(circle at 85% 0%, rgba(34,197,94,.28), transparent 55%); }
.ld-gauge { max-width: 17rem; margin-inline: auto; }
.ld-gauge .fig-draw { stroke-dashoffset: 0; transition-duration: 1.2s; transition-delay: .9s; }
.js-reveal .ld-gauge .fig-draw { stroke-dashoffset: var(--len); }
.js-reveal .is-in .ld-gauge .fig-draw { stroke-dashoffset: 0; }
.ld-needle { transform-box: view-box; transform-origin: 120px 130px; transform: rotate(var(--deg, 0deg)); }
.js-reveal .ld-needle { transform: rotate(0deg); transition: transform 1.7s cubic-bezier(.34,1.25,.64,1) .35s; }
.js-reveal .is-in .ld-needle { transform: rotate(var(--deg, 0deg)); }
.ld-gauge-card:hover .ld-needle { animation: ld-wobble 1.5s cubic-bezier(.4,0,.2,1); }
.ld-count { display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .7rem; border-radius: 9999px; background: #F0FDF4; border: 1px solid #DCFCE7; color: #15803D; font-size: .8125rem; font-weight: 600; }
.ld-count b { font-size: 1.0625rem; font-weight: 800; }

/* landing: features bento */
.ld-wide { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 640px) { .ld-wide { grid-template-columns: 1fr 1.05fr; } }
.ld-mock { min-width: 0; padding: 1rem; border-radius: 1.1rem; background: linear-gradient(135deg, #F0FDF4, #ECFEFF); border: 1px solid #DCFCE7; display: grid; gap: .55rem; }
.ld-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; padding: .5rem .65rem; border-radius: .8rem; background: #fff; border: 1px solid var(--hair);
  font-size: .8125rem; transition: transform .5s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--i, 0) * .06s); }
.ld-row-kw > span:first-child { flex: 1 1 100%; min-width: 0; }
.ld-row-kw .ld-est { margin-left: auto; }
.tile:hover .ld-row { transform: translateX(6px); }
.ld-k { width: 4.6rem; flex-shrink: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ld-est { flex-shrink: 0; font-size: .6875rem; font-weight: 600; color: var(--muted); }
.ld-mock .chip { padding: .2rem .55rem; font-size: .75rem; }
.ld-aside { position: relative; border-radius: 1.5rem; padding: 1.75rem; border: 1.5px dashed #BBF7D0; background: #FAFDFB; }

/* landing: checks marquee */
.ld-band { padding-block: 2.75rem; background: #FAFBFA; border-block: 1px solid var(--hair); overflow: hidden; }
.ld-mq-chip { white-space: nowrap; padding: .55rem 1rem; font-size: .875rem; color: var(--ink); }
.ld-mq-chip .ld-tick { color: #16A34A; }
.ld-mq-rev { animation-direction: reverse; animation-duration: 44s; }
.ld-faq-art { position: relative; opacity: .9; }

@keyframes ld-scan { 0% { transform: translateY(-110%); opacity: 0; } 12% { opacity: 1; } 62% { opacity: 1; } 72%, 100% { transform: translateY(420%); opacity: 0; } }
@keyframes ld-chip { from { background: #fff; border-color: #EDEEF0; color: #9CA3AF; } }
@keyframes ld-tick { from { transform: scale(0) rotate(-45deg); } }
@keyframes ld-ring { from { stroke-dashoffset: var(--len); } }
@keyframes ld-count { from { --ld-n: 0; } }
@keyframes ld-wobble { 0%, 100% { transform: rotate(var(--deg)); } 40% { transform: rotate(92deg); } 70% { transform: rotate(calc(var(--deg) + 6deg)); } }