/*
 * Motion, materials and type — shared by the marketing site, the app and the sign-in screens.
 * Follows Apple's fluid-interface principles (WWDC "Designing Fluid Interfaces"):
 *   - feedback on press, instantly; never only at the end
 *   - springs, critically damped by default; a touch of bounce only after momentum
 *   - enter and leave along the same path, from where the trigger is
 *   - translucent chrome so content scrolls underneath; scroll-edge shadows, not hard rules
 *   - size-specific tracking and leading
 *   - reduced motion / transparency / more contrast honoured everywhere
 */
:root {
  /* Critically damped spring (damping 1.0) and a gentle under-damped one (damping 0.8). */
  --spring: cubic-bezier(.22, 1, .36, 1);
  --spring-bounce: cubic-bezier(.34, 1.36, .64, 1);
  --t-press: 100ms;
  --t-quick: 220ms;
  --t-move: 420ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .039, .127, .237, .349, .456, .552, .635, .706, .765, .813, .852, .884, .909, .929, .945, .957, .967, .975, .98, .985, .988, .991, .993, 1);
    --spring-bounce: linear(0, .063, .204, .37, .531, .669, .781, .865, .925, .966, .991, 1.006, 1.013, 1.015, 1.015, 1.013, 1.01, 1.008, 1.005, 1.004, 1.002, 1.001, 1.001, 1, 1);
  }
}

/* ---------- type: size-specific tracking and leading ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto; -webkit-text-size-adjust: 100%; }
h1 { letter-spacing: -.035em; line-height: 1.08; }
h2 { letter-spacing: -.028em; line-height: 1.12; }
h3 { letter-spacing: -.015em; line-height: 1.25; }
h4, h5 { letter-spacing: -.005em; }
p, li, td, dd { letter-spacing: 0; }
small, .small, .hint, .q__hint { letter-spacing: .005em; }

/* ---------- response: feedback on press, instantly ---------- */
.btn, .ocard, .seg label, .yn__seg label, .choice, .pp, .plan, .card, .strip-card, .aud,
.nav__link, .nav__drop > button, .nav__item, .cstep li, .side .nav a, .tabs a, .kpi, .stepnum button, [data-copy], .vid__play {
  -webkit-tap-highlight-color: transparent;
}
.btn { transition: transform var(--t-quick) var(--spring), background-color var(--t-quick), border-color var(--t-quick), box-shadow var(--t-quick), color var(--t-quick); }
.btn:active, .stepnum button:active, [data-copy]:active, .nav__link:active, .nav__drop > button:active { transform: scale(.97); transition-duration: var(--t-press); transition-timing-function: ease-out; }
.ocard:active, .seg label:active, .yn__seg label:active, .pp:active .pp__b, .nav__item:active, .side .nav a:active { transform: scale(.985); transition: transform var(--t-press) ease-out; }
.ocard, .nav__item, .side .nav a, .pp__b { transition: transform var(--t-quick) var(--spring), border-color var(--t-quick), background-color var(--t-quick), box-shadow var(--t-quick); }
.ocard__r::after { transition: transform var(--t-move) var(--spring-bounce); }
.vid__play:active .vid__btn { transform: scale(.94); transition: transform var(--t-press) ease-out; }

/* hover lifts are for pointers that hover; on touch they'd stick */
@media (hover: none) {
  .card:hover, .aud:hover, .strip-card:hover, .btn--white:hover { transform: none; }
}
.card, .aud, .strip-card { transition: transform var(--t-move) var(--spring), box-shadow var(--t-move) var(--spring), border-color var(--t-quick); }

/* ---------- materials: translucent chrome, content scrolls underneath ---------- */
.nav__in {
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 8px 30px -12px rgba(11, 17, 14, .25), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.nav.is-scrolled .nav__in { background: rgba(255, 255, 255, .9); }

/* dropdowns materialise from their trigger (scale + blur together), and leave the same way */
.nav__menu {
  transform-origin: 50% 0;
  transform: translateY(-4px) scale(.97);
  filter: blur(4px);
  background: rgba(255, 255, 255, .97);
  transition: opacity var(--t-quick) ease, transform var(--t-move) var(--spring), filter var(--t-quick) ease, visibility 0s linear var(--t-quick);
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu, .nav__drop.open .nav__menu {
  transform: none; filter: none;
  transition: opacity var(--t-quick) ease, transform var(--t-move) var(--spring), filter var(--t-quick) ease, visibility 0s;
}
.nav__drop > button .ic { transition: transform var(--t-move) var(--spring); }

/* mobile menu: in from the right, out to the right */
.mob { transition: transform var(--t-move) var(--spring); }

/* app top bar: frosted, with a scroll-edge shadow instead of a permanent rule */
.topbar {
  background: rgba(255, 255, 255, .74) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: transparent !important;
  transition: box-shadow var(--t-quick) ease, border-color var(--t-quick) ease;
}
html.is-scrolled .topbar { box-shadow: 0 1px 0 rgba(11, 17, 14, .06), 0 8px 24px -16px rgba(11, 17, 14, .25); }
.df-bar {
  background: rgba(255, 255, 255, .8) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

/* ---------- motion: reveal, panels, disclosure ---------- */
.reveal { transform: translateY(12px); transition: opacity .55s ease, transform .7s var(--spring); }
.reveal.in { transform: none; }

/* calculator steps move in the direction you travel: forward from the right, back from the left */
.js-calc .cpanel { animation: none; }
.js-calc .cpanel.on { animation: mPanelFwd var(--t-move) var(--spring) both; }
.js-calc[data-dir="back"] .cpanel.on { animation-name: mPanelBack; }
@keyframes mPanelFwd { from { opacity: 0; transform: translateX(18px); } }
@keyframes mPanelBack { from { opacity: 0; transform: translateX(-18px); } }
.cstep span { transition: background-color var(--t-quick), border-color var(--t-quick), color var(--t-quick), box-shadow var(--t-quick), transform var(--t-move) var(--spring-bounce); }
.cstep li.on span { transform: scale(1.06); }

/* live figures settle rather than snap */
.live__total, .result__total, .kpi b, .df-total b, .df-bar__t b { font-variant-numeric: tabular-nums; }

/* FAQ: the plus turns, the answer arrives from just under the question */
.faq summary::after { transition: transform var(--t-move) var(--spring), background-color var(--t-quick), border-color var(--t-quick); }
.faq details[open] > div { animation: mDisclose var(--t-move) var(--spring) both; }
details[open] > :not(summary) { animation: mDisclose var(--t-move) var(--spring) both; }
@keyframes mDisclose { from { opacity: 0; transform: translateY(-6px); } }

/* cookie notice: up from the bottom, and back down the same way */
.cookie { animation: mUp var(--t-move) var(--spring) both; }
.cookie.is-leaving { animation: mDown var(--t-quick) ease-in both; }
@keyframes mUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes mDown { to { opacity: 0; transform: translateY(24px); } }

/* flash notices in the app */
.flash { animation: mUp var(--t-move) var(--spring) both; }

/* focus that's visible but calm */
:focus-visible { outline: 3px solid rgba(162, 219, 53, .55); outline-offset: 2px; transition: outline-offset var(--t-quick) var(--spring); }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js-calc .cpanel.on, .faq details[open] > div, details[open] > :not(summary), .cookie, .flash { animation: mFade 200ms ease both !important; }
  .reveal { transform: none !important; transition: opacity 200ms ease !important; }
  .nav__menu { transform: none !important; filter: none !important; }
  .btn:active, .ocard:active, .cstep li.on span { transform: none !important; }
  .card:hover, .aud:hover, .strip-card:hover { transform: none !important; }
  @keyframes mFade { from { opacity: 0; } }
}
@media (prefers-reduced-transparency: reduce) {
  .nav__in, .nav__menu, .topbar, .df-bar { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .nav__in, .nav__menu, .topbar, .df-bar { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid #141a16 !important; }
  .hint, .q__hint, small, .muted { color: #2b332e !important; }
}

/* =====================================================================
 * Apple-style visual layer (Purpose · Simplicity · Craft · Familiarity)
 * Brand colours stay; surfaces, controls and motion get quieter and more precise.
 * ===================================================================== */

/* ---------- restraint: no endless loops competing for attention ---------- */
.nav__badge i, .dot, .eyebrow i { animation: none !important; }
.mock::before { animation: none !important; opacity: .7; }
.float { animation: none !important; }
.chk.on .chk__ic::after { animation-iteration-count: 1 !important; }
.btn--primary::after { display: none !important; }            /* no shimmer sweep */
.btn--primary:hover { box-shadow: 0 8px 22px -12px rgba(137, 192, 43, .9); }
.btn .ic { transition: transform var(--t-move) var(--spring); }

/* ---------- front end: hairline surfaces, softer depth ---------- */
.card, .aud, .strip-card, .plan, .faq-side .contact-card { border-color: rgba(17, 24, 20, .08); }
.card:hover, .aud:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(17, 24, 20, .04), 0 18px 40px -22px rgba(17, 24, 20, .28); }
.strip-card:hover { transform: translateY(-1px); }
.plan { box-shadow: 0 1px 2px rgba(17, 24, 20, .04), 0 10px 30px -22px rgba(17, 24, 20, .25); }
.compare { border-color: rgba(17, 24, 20, .08); }

/* ---------- back end: one typeface, large titles, quiet chrome ---------- */
:root { --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; }
.content .page-head h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.032em; line-height: 1.1; margin-bottom: .3rem; }
.content .page-head p { color: #6c7b70; font-size: 14.5px; }

/* sidebar as a source list: translucent material, rounded tinted selection */
.side {
  background: rgba(248, 250, 248, .86) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-right-color: rgba(17, 24, 20, .07) !important;
}
.side .nav a { border-radius: 10px; padding-top: .5rem; padding-bottom: .5rem; }
.side .nav a[aria-current="page"] { background: rgba(162, 219, 53, .2) !important; box-shadow: none !important; color: #141a16; }
.side .nav a[aria-current="page"] .ic { color: #446817; }
.side .nav a:hover:not([aria-current="page"]) { background: rgba(17, 24, 20, .045) !important; }
.firm-chip { background: #fff; border-color: rgba(17, 24, 20, .07); box-shadow: 0 1px 2px rgba(17, 24, 20, .04); }

/* cards: hairline edge + layered soft shadow, generous radius */
.content .card, .kpi, .panel-new, .how3 > div, .df-nav, .content .kpi-card, .content .dash-hero {
  border-color: rgba(17, 24, 20, .07) !important;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(17, 24, 20, .04), 0 6px 20px -14px rgba(17, 24, 20, .18);
}
.card-head { border-bottom-color: rgba(17, 24, 20, .06) !important; }

/* fields: filled, borderless until focus (familiar from iOS/macOS forms) */
.content input[type=text], .content input[type=email], .content input[type=password], .content input[type=date],
.content input[type=number], .content input[type=tel], .content input[type=search], .content input:not([type]),
.content select, .content textarea {
  background: #f3f5f4; border: 1px solid transparent; border-radius: 10px; min-height: 40px;
  transition: background-color var(--t-quick), border-color var(--t-quick), box-shadow var(--t-quick);
}
.content input:hover:not(:focus):not([type=radio]):not([type=checkbox]), .content select:hover:not(:focus), .content textarea:hover:not(:focus) { background: #edf0ee; }
.content input:focus:not([type=radio]):not([type=checkbox]), .content select:focus, .content textarea:focus {
  background: #fff; border-color: #89c02b; outline: none; box-shadow: 0 0 0 4px rgba(162, 219, 53, .25);
}
.content .field-error input, .content .field-error select { border-color: #e5484d; background: #fff5f5; }

/* secondary buttons: tinted gray capsules rather than outlined boxes */
.content .btn:not(.btn-primary):not(.btn-danger):not(.btn--primary) { background: #eef1ef; border-color: transparent; color: #141a16; font-weight: 600; }
.content .btn:not(.btn-primary):not(.btn-danger):not(.btn--primary):hover { background: #e4e8e5; }
.content .btn-primary { font-weight: 700; box-shadow: 0 1px 2px rgba(17, 24, 20, .08); }

/* tables: sentence-case headers, hairline separators, no heavy header band */
.content table.data th { background: transparent !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 600; color: #6c7b70 !important; border-bottom-color: rgba(17, 24, 20, .08); }
.content table.data td { border-bottom-color: rgba(17, 24, 20, .055); }
.content table.data tbody tr { transition: background-color var(--t-quick); }
.content table.data tbody tr:last-child td { border-bottom: 0; }

/* segmented yes/no (outside the wizard too): gray track, raised white thumb */
.yn__seg { display: inline-flex; flex: none; background: #eceff0; border-radius: 10px; padding: 2px; gap: 2px; }
.yn__seg label { position: relative; cursor: pointer; margin: 0; }
.yn__seg input { position: absolute; opacity: 0; pointer-events: none; }
.yn__seg span { display: block; min-width: 58px; text-align: center; padding: 6px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #556358; transition: background-color var(--t-quick), color var(--t-quick), box-shadow var(--t-quick); }
.yn__seg input:checked + span { background: #fff; color: #141a16; box-shadow: 0 1px 3px rgba(17, 24, 20, .14), 0 1px 1px rgba(17, 24, 20, .06); }
.yn__seg input:focus-visible + span { outline: 3px solid rgba(162, 219, 53, .55); outline-offset: 1px; }
.wiz .yn__seg input:checked + span { background: #fff; color: #141a16; box-shadow: 0 1px 3px rgba(17, 24, 20, .14), 0 1px 1px rgba(17, 24, 20, .06); }

/* radios and checkboxes in the brand tint */
.content input[type=radio], .content input[type=checkbox] { accent-color: #6fa021; }

/* badges and pills: calmer weight */
.badge, .pill { font-weight: 600; }

/* tabs: underline that settles */
.tabs a { transition: color var(--t-quick), border-color var(--t-move) var(--spring); }

/* stat numbers in one typeface, tabular */
.stat .value, .kpi b, .kpi-card__v, .calc-total { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* breakdown drawer: slides in from the right and back out the same way; no shadow bleed while closed */
.drawer { visibility: hidden; box-shadow: none !important; transition: transform var(--t-move) var(--spring), box-shadow var(--t-quick), visibility 0s linear var(--t-move); }
.drawer.open { visibility: visible; box-shadow: -24px 0 60px -24px rgba(17, 24, 20, .35) !important; transition: transform var(--t-move) var(--spring), box-shadow var(--t-quick), visibility 0s; }
.drawer-scrim { animation: mFadeIn var(--t-quick) ease both; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@keyframes mFadeIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .drawer { transition: visibility 0s, opacity 200ms ease !important; } }

/* site nav over dark sections: dark frosted glass, light text (the material follows the content) */
.nav__in { transition: background-color var(--t-move) ease, border-color var(--t-move) ease, box-shadow var(--t-move) ease; }
.nav.is-dark .nav__in {
  background: rgba(16, 22, 19, .72);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.nav.is-dark.is-scrolled .nav__in { background: rgba(16, 22, 19, .8); }
.nav .logo, .nav .logo b, .nav .logo span span, .nav__link, .nav__drop > button, .nav__signin, .nav__badge, .nav .burger { transition: color var(--t-move) ease, background-color var(--t-quick) ease, border-color var(--t-move) ease; }
.nav.is-dark .logo { color: #fff; }
.nav.is-dark .logo b { color: var(--lime-400, #a2db35); }
.nav.is-dark .logo span span { color: rgba(255, 255, 255, .55); }
.nav.is-dark .logo__mark { background: var(--lime-400, #a2db35); }
.nav.is-dark .logo__mark svg { stroke: #0b110e; }
.nav.is-dark .nav__badge { background: rgba(162, 219, 53, .12); border-color: rgba(162, 219, 53, .3); color: var(--lime-400, #a2db35); }
.nav.is-dark .nav__link, .nav.is-dark .nav__drop > button, .nav.is-dark .nav__signin { color: rgba(255, 255, 255, .78); }
.nav.is-dark .nav__link:hover, .nav.is-dark .nav__link.is-active, .nav.is-dark .nav__drop > button:hover, .nav.is-dark .nav__drop.open > button, .nav.is-dark .nav__signin:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav.is-dark .burger { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
@media (prefers-reduced-transparency: reduce) { .nav.is-dark .nav__in { background: #101613 !important; } }
@media (prefers-contrast: more) { .nav.is-dark .nav__in { background: #0b110e !important; border-color: #fff !important; } }