/* Sensito landing page: page layout on top of components.css. Breakpoints follow the tokens bp-sm 480, bp-md 768, bp-lg 1024. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }
html:not(.motion) { scroll-behavior: auto; }

/* Layout */
.sen-container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter-desktop)); margin-inline: auto; padding-left: max(var(--gutter-mobile), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-mobile), env(safe-area-inset-right, 0px)); }
.sen-section { padding-block: var(--space-7); }
.sen-section--band { background: var(--surface); }
.sen-section__inner { display: grid; gap: var(--space-6); }
.sen-split { display: grid; gap: var(--space-6); }
.sen-split__body { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.sen-body { margin: 0; max-width: var(--measure); }

@media (min-width: 768px) {
  .sen-container { padding-left: max(var(--gutter-desktop), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-desktop), env(safe-area-inset-right, 0px)); }
  .sen-section { padding-block: var(--space-9); }
}
@media (min-width: 1024px) {
  .sen-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
}

/* Draft banner and skip link */
.sen-draft { padding-block: var(--space-2); background: var(--signal-soft); border-bottom: 1px solid var(--signal); color: var(--signal); font-family: var(--font-mono); font-size: 12px; line-height: 18px; }
.sen-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--signal); color: var(--on-signal); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); }
.sen-skip:focus { top: var(--space-2); outline: none; box-shadow: var(--focus-ring); }

/* Open items: everything marked here must be resolved before launch. */
mark.sen-open { padding: 0 4px; border: 1px dashed var(--signal); border-radius: var(--radius-xs); background: var(--signal-soft); color: var(--signal); font-family: var(--font-mono); font-size: 0.78em; font-weight: 400; letter-spacing: 0; text-transform: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Screen-reader-only text */
.sen-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header: turns translucent once the page scrolls */
.sen-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--ground); border-bottom: 1px solid var(--line); transition: background-color .3s ease-out, border-color .3s ease-out; }
.sen-header.is-scrolled { background: rgba(11, 13, 15, 0.78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line-strong); }
.sen-header .sen-nav { border-bottom: 0; background: none; }
.sen-mobile-menu { border-top: 1px solid var(--line); }
.sen-mobile-menu ul { display: grid; margin: 0; padding-block: var(--space-2); list-style: none; }
.sen-mobile-menu a { display: flex; align-items: center; min-height: 48px; color: var(--ink); font-size: 17px; text-decoration: none; }
.sen-mobile-menu a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* Without JavaScript the menu button cannot work: show the anchor list instead and let the header scroll away. */
.no-js .sen-header { position: static; }
.no-js .sen-nav__menu { display: none; }
.no-js .sen-mobile-menu { display: block; }
@media (min-width: 768px) { .sen-mobile-menu { display: none !important; } }
@media (max-width: 359px) { .sen-nav__cta { display: none; } }
/* "Log in" next to the CTA from 768px; on phones it sits in the menu */
.sen-nav__login { display: none; color: var(--ink-muted); font-size: 15px; text-decoration: none; transition: color var(--duration-fast) ease-out; }
.sen-nav__login:hover { color: var(--ink); }
.sen-nav__login:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
@media (min-width: 768px) { .sen-nav__login { display: inline; } }

/* Hero: faint grid and a light that follows the pointer (--mx, --my set by site.js) */
.sen-hero-band { position: relative; overflow: hidden; isolation: isolate; }
.sen-hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; opacity: 0.55; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); }
.sen-hero-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 20%), rgba(210, 254, 99, 0.09), transparent 70%); transition: opacity .6s ease-out; pointer-events: none; }
.sen-hero { padding-block: var(--space-8) var(--space-6); }
.sen-hero .sen-h1 { max-width: 14em; }
.sen-hero .sen-h1 em { font-style: normal; color: var(--signal); }
/* Glow in the text's own colour: light on "5min.", stronger on "Sensitivity" */
.sen-hero .sen-h1 em { text-shadow: 0 0 18px rgba(210, 254, 99, 0.25); text-shadow: 0 0 18px color-mix(in srgb, currentColor 25%, transparent); }
.sen-hero .sen-h1 em.sensitivity { text-shadow: 0 0 10px rgba(210, 254, 99, 0.45), 0 0 32px rgba(210, 254, 99, 0.35); text-shadow: 0 0 10px color-mix(in srgb, currentColor 45%, transparent), 0 0 32px color-mix(in srgb, currentColor 35%, transparent); }

/* Wordmark: the mark stands in for the first "s" of sensito, sized to the cap height and sitting on the baseline */
.sen-wordmark { gap: 0; align-items: baseline; }
.sen-wordmark .sen-mark { position: relative; top: 0.31em; width: 1.36em; height: 1.36em; margin: 0 -0.17em 0 -0.2em; }
.sen-hero .sen-scale { margin-top: var(--space-6); }
@media (min-width: 768px) { .sen-hero { padding-top: var(--space-9); } }

/* Animations run under .motion, set in the page head. Under reduced motion the head adds .calm:
   the same animations with short distances, no blur, bounce or endless loops. */
:root { --rise: 24px; --fly: 80px; --blur: 4px; --bounce: cubic-bezier(0.34, 1.56, 0.64, 1); }
.calm { --rise: 8px; --fly: 20px; --blur: 0px; --bounce: var(--ease-out); }
.calm .sen-cta::before, .calm .sen-tag__dot { animation: none; }

/* Hero entrance: staggered rise on load */
.motion .sen-hero > * { animation: sen-rise .9s var(--ease-out) both; }
.motion .sen-hero > :nth-child(2) { animation-delay: .08s; }
.motion .sen-hero > :nth-child(3) { animation-delay: .16s; }
.motion .sen-hero > :nth-child(4) { animation-delay: .24s; }
.motion .sen-hero > :nth-child(5) { animation-delay: .32s; }
.motion .sen-hero > :nth-child(6) { animation-delay: .44s; }
@keyframes sen-rise { from { opacity: 0; transform: translateY(calc(var(--rise) * 0.75)); filter: blur(var(--blur)); } to { opacity: 1; transform: none; filter: none; } }

/* Scroll reveal: elements are only hidden once site.js has added .reveal, so the page never stays blank */
.reveal [data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal [data-reveal].is-in { opacity: 1; transform: none; }
/* How it works: the steps fly in from the left, one after another, then their bars fill */
.reveal .sen-step[data-reveal] { transform: translateX(calc(var(--fly) * -1)); transition-duration: .9s; transition-timing-function: var(--bounce); transition-delay: calc(var(--i, 0) * 180ms); }
.reveal .sen-step[data-reveal].is-in { transform: none; }
.reveal .sen-step::after { background-size: 0% 100%, auto; transition: background-size 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 180ms + 450ms); }
.reveal .sen-step.is-in::after { background-size: 100% 100%, auto; }
/* Report: the recommended marker rises from the low end in step with the counting numbers */
.reveal .sen-result__marker--rec { left: var(--from); transition: left 1.4s cubic-bezier(0.25, 1, 0.5, 1); }
.reveal .is-in .sen-result__marker--rec { left: var(--at); }
.reveal .sen-result__fill { width: 0; transition: width 1.4s cubic-bezier(0.25, 1, 0.5, 1); }
.reveal .is-in .sen-result__fill { width: var(--at); }
/* Problem and Why: pain cards slide in from the right, feature cards rise and settle */
.reveal .sen-pains [data-reveal] { transform: translateX(calc(var(--fly) * 0.5)); }
.reveal .sen-pains [data-reveal].is-in { transform: none; }
.reveal .sen-feature[data-reveal] { transform: translateY(calc(var(--rise) * 1.5)) scale(0.96); transition-timing-function: var(--bounce); transition-delay: calc(var(--i, 0) * 120ms); }
.reveal .sen-feature[data-reveal].is-in { transform: none; }

/* Problem: a meter that keeps guessing, and three pain cards */
.sen-guess { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sen-guess__head { display: flex; justify-content: space-between; gap: var(--space-3); }
.sen-guess__count { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sen-guess__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin: 0; }
.sen-guess__value { font-family: var(--font-mono); font-size: clamp(44px, 4vw + 20px, 64px); line-height: 1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.sen-guess__verdict { font-family: var(--font-mono); font-size: 15px; color: var(--danger); }
.sen-guess__track { position: relative; height: 8px; margin-top: var(--space-3); border-radius: 4px; background: var(--line-strong); }
.sen-guess__marker { position: absolute; top: 50%; left: 50%; width: 6px; height: 30px; border-radius: 3px; background: var(--danger); box-shadow: 0 0 14px rgba(237, 104, 98, 0.45); transform: translate(-50%, -50%); transition: left .7s var(--bounce); }
.sen-guess__ghost { position: absolute; top: 50%; width: 3px; height: 18px; border-radius: 2px; background: var(--ink-faint); transform: translate(-50%, -50%); animation: sen-ghost 6s ease-out forwards; }
@keyframes sen-ghost { from { opacity: 0.6; } to { opacity: 0; } }
/* The three pain cards span both columns below the heading and the meter: stacked on phones, side by side from 768px */
.sen-pains { display: grid; gap: var(--space-3); grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .sen-pains { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
.sen-pains li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-5); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 17px; line-height: 26px; transition: border-color .3s ease-out, opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.sen-pains li:hover { border-color: rgba(237, 104, 98, 0.5); }
.sen-pains__x { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-family: var(--font-mono); font-size: 16px; line-height: 1; }

/* Steps and features: one column on phones, three from 768px */
.sen-steps, .sen-features { grid-template-columns: 1fr; }
@media (min-width: 768px) { .sen-steps, .sen-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Why Sensito: cards with an icon, chips and a light that follows the pointer (--x, --y set by site.js) */
.sen-features { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.sen-feature { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6) var(--space-5) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; isolation: isolate; transition: border-color .3s ease-out, opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.sen-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(320px circle at var(--x, 50%) var(--y, 0%), rgba(210, 254, 99, 0.12), transparent 65%); opacity: 0; transition: opacity .35s ease-out; }
.sen-feature:hover { border-color: rgba(210, 254, 99, 0.35); }
.sen-feature:hover::before { opacity: 1; }
.sen-feature__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-2); border: 1px solid rgba(210, 254, 99, 0.3); border-radius: var(--radius-sm); background: var(--signal-soft); color: var(--signal); transition: transform .45s var(--bounce), box-shadow .3s ease-out; }
.sen-feature__icon svg { width: 24px; height: 24px; }
.sen-feature:hover .sen-feature__icon { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 22px var(--signal-glow); }
.sen-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.sen-chips li { padding: 3px var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }

/* Example result */
.sen-result__fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--at); border-radius: 4px; background: linear-gradient(90deg, rgba(210, 254, 99, 0.05), rgba(210, 254, 99, 0.45)); }
.sen-result__caption { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; grid-column: 1 / -1; }

/* Report: six cards in 1, 2 or 3 columns, so every row is full */
.sen-metrics { grid-template-columns: 1fr; }
@media (min-width: 480px) { .sen-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sen-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Pricing: stacked and narrow below 1024px, three columns above */
.sen-plans { grid-template-columns: 1fr; max-width: 520px; }
@media (min-width: 1024px) { .sen-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }
.sen-plans__notes { display: grid; gap: var(--space-2); max-width: var(--measure); }

/* Final CTA: a lime glow rises behind the heading */
.sen-cta { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }
.sen-cta::before { content: ""; position: absolute; left: 50%; bottom: -260px; z-index: -1; width: 720px; height: 420px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(210, 254, 99, 0.14), transparent); pointer-events: none; }
.motion .sen-cta::before { animation: sen-breathe 6s ease-in-out infinite; }
@keyframes sen-breathe { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }

/* Footer */
.sen-footer-band { background: var(--surface); border-top: 1px solid var(--line); }
.sen-footer-band .sen-footer { background: none; border-top: 0; padding-block: var(--space-7) var(--space-5); }
.sen-footer__email { color: var(--ink); }
.sen-footer__fine { display: grid; gap: var(--space-2); padding-block: var(--space-5) var(--space-7); border-top: 1px solid var(--line); }