/*
 * PlantOn+ marketing-site refinement.
 * The approved dark-green clock hero stays untouched; this file brings the
 * remaining sections into the same calm, precise visual language.
 */
:root {
  --site-ink: #102d2b;
  --site-deep: #063b33;
  --site-green: #009b76;
  --site-signal: #c6ef7b;
  --site-mint: #e2f6eb;
  --site-surface: #f0f8f2;
  --site-white: #fbfdfb;
  --site-line: #c9ded3;
  --site-muted: #55716a;
  --site-radius: 22px;
}

html {
  scrollbar-color: #80ad9a #e8f2eb;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e8f2eb; }
::-webkit-scrollbar-thumb {
  border: 2px solid #e8f2eb;
  border-radius: 999px;
  background: #80ad9a;
}
::-webkit-scrollbar-thumb:hover { background: #537f6d; }

body { color: var(--site-ink); background: var(--site-surface); }

/* Align the content rhythm to the hero and keep the product canvas spacious. */
.section:not(.hero) {
  padding-block: clamp(68px, 6.6vw, 96px);
  scroll-margin-top: 96px;
}

.section:not(.hero) .wrap,
.value-strip .wrap,
.footer .wrap {
  width: min(calc(100% - 48px), 1192px);
}

.product.pv-section .wrap { width: min(calc(100% - 64px), 1380px); max-width: 1380px; }

.section:not(.hero):not(.product):not(.contact):not(.makers) .section-title {
  color: var(--site-ink);
  font-size: clamp(2.55rem, 4.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.067em;
  text-wrap: balance;
}

.section:not(.hero):not(.product):not(.contact):not(.makers) .section-desc {
  color: var(--site-muted);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.section:not(.hero):not(.product):not(.contact):not(.makers) .kicker {
  color: var(--site-green);
  font-size: .68rem;
  letter-spacing: .15em;
}

.section:not(.hero):not(.product):not(.contact):not(.makers) .kicker::before { width: 22px; }

.value-strip .value-grid { min-height: 108px; }
.value-unit { transition: background-color .2s ease; }
.value-unit:hover { background: rgba(255,255,255,.035); }

/* The problem-to-solution story uses a consistent card frame and quiet art. */
.story { background: #f7faf6; }
.story-top { gap: clamp(28px, 6vw, 76px); margin-bottom: 42px; }
.story-top .section-title { max-width: 13ch; }
.story-top .section-desc { max-width: 420px; }
.story-cards { gap: 14px; }
.story-card {
  min-height: 382px;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid rgba(16, 75, 57, .08);
  border-radius: var(--site-radius);
  box-shadow: 0 10px 28px rgba(17, 59, 46, .045);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.story-card:nth-child(1) { background: #eaf2ec; }
.story-card:nth-child(2) { background: #e3f5e9; }
.story-card:nth-child(3) { background: #f0f4e9; }
.story-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 155, 118, .24);
  box-shadow: 0 18px 36px rgba(17, 59, 46, .09);
}
.story-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(0, 155, 118, .1);
  border-radius: 15px;
  color: var(--site-green);
  box-shadow: 0 4px 12px rgba(9, 71, 53, .05);
}
.story-card h3 { color: var(--site-ink); }
.story-card p { color: #5c746c; }
.story-card a { color: #087d61; }
.story-card a:hover { color: #035640; }
.mini-rows, .art-tags { box-shadow: 0 12px 24px rgba(16, 65, 51, .1); }

/* Product detail remains the main showcase after the hero. */
.product {
  background:
    radial-gradient(ellipse at 76% 4%, rgba(23, 126, 94, .2), transparent 42%),
    #063b33;
}
.product.pv-section { padding-block: clamp(82px, 7.5vw, 108px); }
.product-heading { max-width: 860px; margin-inline: auto; }
.product .section-title { max-width: 15ch; }
.product .section-desc { max-width: 62ch; }
.feature-tabs { gap: 8px; margin-block: 34px 26px; }
.feature-tab {
  min-height: 46px;
  padding: 10px 20px;
  border-color: rgba(183, 228, 207, .3);
  background: rgba(255,255,255,.045);
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
  cursor: pointer;
}
.feature-tab:hover { border-color: #7bd3b1; transform: translateY(-1px); }
.feature-tab[aria-selected="true"] { background: #dff6eb; border-color: #dff6eb; }
.pv-showcase {
  border-color: rgba(182, 231, 207, .22);
  border-radius: 26px;
  background: rgba(17, 81, 68, .76);
  box-shadow: 0 30px 80px rgba(0, 24, 19, .18);
}
.pv-copy { background: linear-gradient(145deg, #15594d, #10483f); }
.pv-copy h3 { text-wrap: balance; }
.pv-copy-bottom { align-items: center; }
.showcase-pagination span { transition: width .2s ease, background-color .2s ease; }
.pv-visual { background: rgba(5, 44, 38, .38); }
.pv-screen-desktop { box-shadow: 0 20px 44px rgba(0, 23, 17, .24); }
.pv-phone-frame { box-shadow: 0 26px 48px rgba(0, 20, 17, .32); }

/* Two audiences, one product language. */
.audience { background: #edf5ef; }
.audience-heading { margin-bottom: 38px; }
.audience-heading .section-title { max-width: 14ch; }
.audience-grid { gap: 16px; }
.aud-card {
  min-height: 500px;
  padding: clamp(28px, 3.4vw, 42px);
  border: 1px solid rgba(16, 67, 51, .08);
  border-radius: 25px;
  box-shadow: 0 14px 34px rgba(15, 58, 45, .06);
}
.aud-card.manager {
  background: linear-gradient(145deg, #0b5145, #073a33 88%);
  box-shadow: 0 18px 42px rgba(7, 62, 49, .15);
}
.aud-card.worker { background: #dff0e5; color: var(--site-ink); }
.aud-card h3 { font-size: clamp(2.15rem, 3.1vw, 2.85rem); text-wrap: balance; }
.aud-card.worker p { color: #536b62; }
.aud-card a { position: relative; z-index: 2; transition: gap .18s ease; }
.aud-card a:hover { gap: 14px; }
.aud-card .corner {
  border-width: 6px;
  border-color: #c6e7d5;
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(5, 42, 35, .2);
}
.aud-card.worker .corner { border-color: #b7dfc9; }

/* Unit management and process steps use a softer, more structured canvas. */
.highlight { background: #f7faf6; }
.highlight-inner { gap: clamp(42px, 7vw, 88px); }
.highlight-copy .section-title { max-width: 12ch; }
.bullet-list { gap: 16px; }
.bullet-list li { font-size: .96rem; line-height: 1.5; }
.bullet-list .i { width: 21px; height: 21px; color: #078665; }
.units-panel {
  border: 1px solid rgba(0, 112, 80, .1);
  border-radius: 28px;
  background: radial-gradient(circle at 90% 10%, rgba(97, 208, 153, .22), transparent 36%), #dff1e5;
  box-shadow: 0 22px 56px rgba(20, 72, 51, .1);
}
.units-card { border: 1px solid rgba(7, 71, 53, .1); box-shadow: 0 14px 32px rgba(15, 62, 47, .1); }
.units-float { border: 1px solid rgba(7, 71, 53, .1); box-shadow: 0 14px 28px rgba(15, 62, 47, .12); }
.steps-section { background: linear-gradient(180deg, #e5f1e8, #edf5ef); }
.steps-head { margin-bottom: 36px; }
.steps-head .section-title { max-width: 13ch; }
.steps-grid { gap: 12px; }
.step {
  min-height: 220px;
  padding: 25px 22px 22px;
  border: 1px solid rgba(15, 87, 63, .12);
  border-top: 3px solid #168b69;
  border-radius: 15px;
  background: rgba(251, 253, 251, .82);
  box-shadow: 0 8px 22px rgba(18, 63, 48, .045);
}
.step:after { top: 22px; right: 18px; color: #73ad92; }
.step h3 { max-width: 15ch; color: var(--site-ink); font-size: 1.42rem; }
.step p { color: #5c746b; }

/* Clear plan hierarchy; keep the supplied prices and limits unchanged. */
.plans.section { background: #f0f7f1; }
.plans-heading { max-width: 700px; }
.plans-heading .section-title { max-width: 12ch; }
.plan-grid { gap: 14px; margin-top: 38px; }
.plan-card {
  padding: 25px 21px 21px;
  border-color: #d2e2d8;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(13, 57, 42, .055);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-card:hover {
  transform: translateY(-3px);
  border-color: #83bca1;
  box-shadow: 0 18px 34px rgba(13, 57, 42, .1);
}
.plan-card-featured {
  border-color: #075b48;
  background: linear-gradient(150deg, #0a624d, #063c33);
  box-shadow: 0 18px 38px rgba(5, 65, 48, .18);
}
.plan-card-featured:hover { border-color: #0a7256; }
.plan-badge { box-shadow: 0 6px 16px rgba(4, 45, 33, .18); }
.plan-comparison { border-color: rgba(8, 47, 49, .14); }
.plan-comparison > summary { min-height: 58px; }
.plan-comparison > summary:hover { color: #087b5f; }
.plan-table th, .plan-table td { border-color: #dce9e1; }
.plan-table thead th { background: #e9f4ec; }
.plan-table .plan-pick { background: #e1f2e7; }

/* A grounded commercial ending: human contact, calm answers, people behind it. */
.contact.section { background: #063b33; }
.contact .kicker, .makers .kicker { color: #7bd3b1; }
.contact .section-title { max-width: 12ch; color: #f3fff7; }
.contact .section-desc { color: #b9d8cd; }
.contact-form {
  border: 1px solid rgba(15, 92, 69, .1);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0, 22, 17, .2);
}
.field-group input, .field-group select { border-radius: 11px; }
.field-group input:hover, .field-group select:hover { border-color: #9bbdaa; }
.contact-form .button { min-height: 50px; }
.faq.section { background: #f8faf6; }
.faq-grid { gap: clamp(38px, 7vw, 90px); }
.faq-grid > div:first-child { position: static; align-self: start; }
.faq-grid .section-title { max-width: 10ch; }
.faq details { border-color: #d8e5dc; }
.faq summary {
  min-height: 34px;
  color: #173b32;
  transition: color .18s ease;
}
.faq summary:hover { color: #078263; }
.faq summary:after {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border: 1px solid #cfe2d5;
  border-radius: 50%;
  background: #edf6ef;
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary:after { border-color: #9bcdb1; background: #ddf2e4; }
.faq details p { max-width: 65ch; color: #5b7469; }
.makers.section {
  background:
    radial-gradient(ellipse at 86% 10%, rgba(18, 111, 82, .45), transparent 42%),
    #063b33;
}
.makers .section-title { max-width: 11ch; }
.maker-list { gap: 14px; }
.maker-card {
  padding: 24px;
  border-color: rgba(165, 225, 198, .25);
  border-radius: 18px;
  background: rgba(4, 48, 39, .58);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.maker-card:hover {
  transform: translateX(3px);
  border-color: rgba(123, 211, 177, .52);
  background: rgba(5, 57, 45, .72);
}
.maker-initials { border-radius: 16px; }
.footer {
  background: #042f2a;
  border-top-color: rgba(190, 238, 218, .16);
}
.footer-bottom { border-top-color: rgba(190, 238, 218, .14); }
.footer-links a { transition: color .16s ease; }
.footer-links a:hover { color: #a6e7cb; }

/* Keep the transformed desktop compositions composed on smaller screens. */
@media (max-width: 900px) {
  .section:not(.hero) .wrap,
  .value-strip .wrap,
  .footer .wrap { width: min(calc(100% - 44px), 720px); }
  .product.pv-section .wrap { max-width: 780px; }
  .section:not(.hero) { padding-block: 68px; }
  .story-top, .audience-heading, .steps-head { margin-bottom: 30px; }
  .story-cards { gap: 12px; }
  .story-card { min-height: 360px; padding: 22px; }
  .aud-card { min-height: 480px; }
  .step { min-height: 205px; }
  .faq-grid > div:first-child { position: static; }
}

@media (max-width: 700px) {
  .section:not(.hero) .wrap,
  .value-strip .wrap,
  .footer .wrap { width: min(calc(100% - 36px), 560px); }
  .section:not(.hero) { padding-block: 58px; }
  .section:not(.hero) .section-title { font-size: clamp(2.25rem, 10vw, 3.2rem); }
  .section:not(.hero) .section-desc { font-size: .96rem; }
  .product.pv-section { padding-block: 68px; }
  .product.pv-section .wrap { max-width: 560px; }
  .product .section-title { font-size: clamp(2.25rem, 9.4vw, 3.1rem); }
  .feature-tabs { margin-block: 28px 22px; }
  .feature-tab { min-height: 44px; padding-inline: 15px; }
  .story-top { margin-bottom: 27px; }
  .story-card { min-height: 330px; padding: 24px; }
  .audience-grid { gap: 13px; }
  .aud-card { min-height: 480px; padding: 27px; }
  .aud-card h3 { font-size: clamp(2rem, 8.4vw, 2.55rem); }
  .aud-card .corner { width: 62%; }
  .highlight-inner { gap: 34px; }
  .units-panel { min-height: 330px; border-radius: 22px; }
  .steps-grid { gap: 10px; }
  .step { min-height: 195px; padding: 20px 16px; }
  .step h3 { font-size: 1.2rem; }
  .plan-grid { gap: 12px; }
  .plan-card { border-radius: 17px; }
  .contact-wrap { gap: 35px; }
  .contact-form { padding: 23px; }
  .faq-grid { gap: 20px; }
  .faq details { padding-block: 16px; }
  .faq summary { gap: 16px; font-size: .98rem; }
  .maker-card { padding: 19px; }
  .footer { padding-top: 44px; }
}

@media (max-width: 420px) {
  .section:not(.hero) .wrap,
  .value-strip .wrap,
  .footer .wrap { width: calc(100% - 32px); }
  .section:not(.hero) { padding-block: 52px; }
  .story-card { min-height: 320px; }
  .aud-card { min-height: 450px; padding: 23px; }
  .aud-card .corner { width: 70%; }
  .worker .corner { width: 50%; }
  .steps-grid { grid-template-columns: 1fr; }
  .step { min-height: 0; padding: 20px; }
  .field-grid { gap: 13px; }
  .contact-form { padding: 19px; }
  .maker-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .maker-initials { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story-card, .plan-card, .feature-tab, .maker-card, .value-unit,
  .faq summary, .footer-links a, .showcase-pagination span {
    transition: none !important;
  }
  .story-card:hover, .plan-card:hover, .maker-card:hover, .feature-tab:hover {
    transform: none;
  }
}

/* A small, living progress signal makes the long product story feel guided. Elemento próprio (site.js): só o transform dele muda ao rolar, sem variável herdada invalidando o estilo da página inteira. */
.scroll-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #7bd3b1, var(--site-signal), #42d8b0);
  box-shadow: 0 0 14px rgba(123, 211, 177, .55);
  content: "";
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

/* Opacity-only entrances preserve geometry, scroll anchoring and component transforms. */
@keyframes site-reveal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.scroll-reveal-ready .reveal-on-scroll { opacity: 0; }
/* O estado final visível não depende da animação: se o navegador adiar ou pular a animação, o conteúdo aparece. */
.scroll-reveal-ready .reveal-on-scroll.is-in-view {
  opacity: 1;
  animation: site-reveal-in .42s cubic-bezier(.2,.7,.3,1) var(--reveal-delay, 0ms) backwards;
}
.scroll-reveal-ready .reveal-on-scroll.reveal-complete {
  opacity: 1;
  animation: none;
}
/* Seções longe da tela (site.js): animações contínuas pausadas, sem custo de estilo/pintura por quadro.
   As revelações ficam de fora para nenhum conteúdo parar no meio do fade. */
[data-offscreen="true"] :not(.reveal-on-scroll),
[data-offscreen="true"] :not(.reveal-on-scroll)::before,
[data-offscreen="true"] :not(.reveal-on-scroll)::after,
[data-offscreen="true"] .reveal-on-scroll.reveal-complete,
[data-offscreen="true"] .reveal-on-scroll.reveal-complete::before,
[data-offscreen="true"] .reveal-on-scroll.reveal-complete::after { animation-play-state: paused !important; }
.scroll-reveal-ready .reveal-on-scroll:focus-within {
  opacity: 1 !important;
  animation: none !important;
}

/* A restrained citrus glint gives the botanical greens a second pulse. */
.story-card { isolation: isolate; }
.story-card::before {
  position: absolute;
  z-index: -1;
  top: -84px;
  right: -80px;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 239, 123, .38), rgba(123, 211, 177, .13) 42%, transparent 72%);
  content: "";
  opacity: .72;
  transition: transform .5s ease, opacity .3s ease;
}
.story-card:nth-child(2)::before { background: radial-gradient(circle, rgba(76, 226, 175, .32), transparent 68%); }
.story-card:nth-child(3)::before { background: radial-gradient(circle, rgba(205, 234, 131, .36), transparent 68%); }
.story-card:hover::before { opacity: 1; transform: scale(1.18); }
.story-card .story-art { z-index: 0; }
.story-card .story-icon { position: relative; z-index: 1; }

.value-unit:nth-child(2) .value-icon,
.value-unit:nth-child(4) .value-icon { color: var(--site-signal); }
.value-icon { transition: transform .22s ease, background-color .22s ease; }
.value-unit:hover .value-icon { transform: translateY(-2px) rotate(-4deg); background: rgba(255,255,255,.18); }

.pv-showcase { position: relative; }
.pv-showcase::before {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(198,239,123,.58), rgba(77,226,177,.38), transparent);
  content: "";
  pointer-events: none;
}
.feature-tab[aria-selected="true"] { box-shadow: 0 0 0 3px rgba(198,239,123,.12), 0 8px 24px rgba(72,219,168,.18); }
.pv-phone-frame { transition: transform .25s ease, box-shadow .25s ease; }
.pv-showcase:hover .pv-phone-frame { transform: translateY(-3px) rotate(.4deg); box-shadow: 0 30px 52px rgba(0,20,17,.4); }

.aud-card { isolation: isolate; }
.aud-card::before {
  position: absolute;
  z-index: 0;
  top: -110px;
  right: -95px;
  width: 290px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,211,177,.28), rgba(123,211,177,.06) 48%, transparent 70%);
  content: "";
  pointer-events: none;
  transition: transform .55s ease;
}
.aud-card.worker::before { background: radial-gradient(circle, rgba(198,239,123,.4), rgba(123,211,177,.08) 50%, transparent 70%); }
.aud-card:hover::before { transform: scale(1.14); }
.aud-card > :not(.corner) { position: relative; z-index: 1; }
.aud-card .corner { z-index: 1; transition: transform .3s ease, box-shadow .3s ease; }
.aud-card.manager:hover .corner { transform: rotate(-5deg) translateY(-5px); }
.aud-card.worker:hover .corner { transform: rotate(4deg) translateY(-5px); }
.corner-chip { box-shadow: inset 0 0 0 1px rgba(0,114,80,.08); }

.units-panel { isolation: isolate; }
.units-panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(9,103,74,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  content: "";
  mask-image: linear-gradient(120deg, transparent 4%, #000 56%, transparent 96%);
  opacity: .46;
}
.units-card, .units-float { transition: transform .25s ease, box-shadow .25s ease; }
.units-panel:hover .units-card { transform: translateY(-3px); }
.units-panel:hover .units-float { transform: translateY(-5px) rotate(1deg); }

.step { position: relative; overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.step::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 98px;
  height: 98px;
  border-radius: 0 0 0 100%;
  background: linear-gradient(135deg, rgba(198,239,123,.21), rgba(123,211,177,.06));
  content: "";
  pointer-events: none;
}
.step:hover { transform: translateY(-4px); border-color: rgba(9,139,101,.32); box-shadow: 0 16px 30px rgba(18,63,48,.09); }
.step-count { position: relative; color: #078b68; }
.step h3, .step p { position: relative; }

.plan-card { overflow: hidden; }
.plan-card::before {
  position: absolute;
  top: -105px;
  right: -92px;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,239,123,.2), rgba(123,211,177,.08) 46%, transparent 70%);
  content: "";
  pointer-events: none;
  transition: transform .45s ease;
}
.plan-card:hover::before { transform: scale(1.18); }
.plan-card > :not(.plan-badge) { position: relative; z-index: 1; }
.plan-badge { z-index: 2; }
.plan-card-featured::before { background: radial-gradient(circle, rgba(198,239,123,.28), rgba(70,226,177,.09) 48%, transparent 72%); }
.plan-card-featured .plan-badge { background: var(--site-signal); }
.plan-price { letter-spacing: -.055em; }

.contact.section {
  background:
    radial-gradient(ellipse at 8% 85%, rgba(0,155,118,.22), transparent 42%),
    radial-gradient(ellipse at 92% 10%, rgba(198,239,123,.1), transparent 32%),
    #063b33;
}
.contact-form { position: relative; overflow: hidden; }
.contact-form::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #009b76, #7bd3b1, var(--site-signal));
  content: "";
}
.faq details { border-radius: 12px; transition: background-color .2s ease, padding .2s ease; }
.faq details[open] { padding-inline: 16px; background: linear-gradient(100deg, #eef7ef, rgba(226,246,235,.25)); }
.faq summary::after { transition: transform .2s ease, background-color .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.maker-card { position: relative; overflow: hidden; }
.maker-card::after {
  position: absolute;
  top: -40px;
  right: -70px;
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,211,177,.14), transparent 70%);
  content: "";
  pointer-events: none;
}
.maker-card:nth-child(2)::after { background: radial-gradient(circle, rgba(198,239,123,.14), transparent 70%); }

@media (max-width: 700px) {
  .scroll-progress { height: 2px; }
  .story-card::before { top: -60px; right: -60px; width: 180px; }
  .aud-card::before { top: -80px; right: -70px; width: 230px; }
  .faq details[open] { padding-inline: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-ready .reveal-on-scroll,
  .scroll-reveal-ready .reveal-on-scroll.is-in-view {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .story-card::before, .aud-card::before, .aud-card .corner,
  .units-card, .units-float, .pv-phone-frame, .step::before,
  .plan-card::before, .maker-card::after { transition: none !important; }
}

/* Curved section joins carry the color field across the page without hiding boundaries. */
.story,
.product,
.audience,
.highlight,
.steps-section,
.plans.section,
.contact.section,
.faq.section,
.makers.section {
  position: relative;
  isolation: isolate;
}
.value-strip { position: relative; isolation: isolate; --wave-base: #063b33; }
.value-strip { padding-block-end: var(--section-wave-size, 42px); }
.footer { position: relative; isolation: isolate; --wave-base: #042f2a; }
.value-unit {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
}
.value-unit > div { min-width: 0; }
.value-icon {
  display: flex;
  flex: none;
  justify-self: center;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0;
  line-height: 0;
}
.value-icon .i { display: block; flex: none; margin: 0; }
.story { --wave-base: #f4fbf6; }
.product { --wave-base: #052f2d; }
.audience { --wave-base: #e5f7ed; }
.highlight { --wave-base: #f6fbf5; }
.steps-section { --wave-base: #e4f5eb; }
.plans.section { --wave-base: #eaf8ef; }
.contact.section { --wave-base: #052f2d; }
.faq.section { --wave-base: #f5faf5; }
.makers.section { --wave-base: #052f2d; }
:root { --section-wave-size: clamp(32px, 3vw, 42px); }

.footer::before,
.story::before,
.value-strip::before,
.product::before,
.audience::before,
.highlight::before,
.steps-section::before,
.plans.section::before,
.contact.section::before,
.faq.section::before,
.makers.section::before {
  position: absolute;
  z-index: 2;
  top: calc(-1 * var(--section-wave-size));
  left: 0;
  width: 100%;
  height: var(--section-wave-size);
  background: var(--wave-base);
  content: "";
  pointer-events: none;
  mask-image: url("img/section-wave-mask.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.product::before,
.highlight::before,
.contact.section::before { transform: scaleX(-1); }

/* The wave begins with the section's base tone, then releases into its atmosphere. */
.story {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 8% 14%, rgba(85, 220, 173, .19), transparent 34%),
    radial-gradient(ellipse at 94% 88%, rgba(198, 239, 123, .19), transparent 31%),
    linear-gradient(118deg, #f4fbf6 0%, #e9f8f0 48%, #f7fbef 100%);
}
.product {
  overflow: visible;
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 14% 92%, rgba(0, 213, 163, .19), transparent 38%),
    radial-gradient(ellipse at 88% 8%, rgba(198, 239, 123, .17), transparent 34%),
    linear-gradient(132deg, #052f2d 0%, #06483b 54%, #07372f 100%);
}
.audience {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 96% 18%, rgba(0, 190, 151, .15), transparent 35%),
    radial-gradient(ellipse at 4% 84%, rgba(198, 239, 123, .2), transparent 33%),
    linear-gradient(120deg, #e5f7ed, #f1faf3 53%, #e5f6ec);
}
.highlight {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 6% 10%, rgba(82, 218, 168, .16), transparent 34%),
    radial-gradient(ellipse at 96% 94%, rgba(198, 239, 123, .2), transparent 32%),
    linear-gradient(125deg, #f6fbf5, #eaf8ef 57%, #f5faed);
}
.steps-section {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 82% 8%, rgba(0, 184, 143, .13), transparent 36%),
    radial-gradient(ellipse at 12% 100%, rgba(198, 239, 123, .18), transparent 35%),
    linear-gradient(180deg, #e4f5eb, #f0f9f1 52%, #e7f6eb);
}
.plans.section {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 5% 8%, rgba(0, 190, 151, .16), transparent 32%),
    radial-gradient(ellipse at 98% 94%, rgba(198, 239, 123, .24), transparent 34%),
    linear-gradient(125deg, #eaf8ef, #f4faf1 50%, #e5f6ec);
}
.contact.section {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 8% 85%, rgba(0,155,118,.22), transparent 42%),
    radial-gradient(ellipse at 92% 10%, rgba(198,239,123,.1), transparent 32%),
    linear-gradient(135deg, #052f2d, #06493d 58%, #063b33);
}
.faq.section {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 96% 8%, rgba(84, 215, 173, .16), transparent 34%),
    radial-gradient(ellipse at 5% 92%, rgba(198, 239, 123, .16), transparent 34%),
    linear-gradient(125deg, #f5faf5, #e9f7ef 54%, #f4f9ef);
}
.makers.section {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 55%),
    radial-gradient(ellipse at 8% 88%, rgba(0, 210, 157, .18), transparent 37%),
    radial-gradient(ellipse at 92% 8%, rgba(198, 239, 123, .14), transparent 35%),
    linear-gradient(132deg, #052f2d, #07503f 58%, #06372f);
}
.footer {
  border-top: 0;
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 58%),
    radial-gradient(ellipse at 88% 0%, rgba(0, 155, 118, .17), transparent 42%),
    linear-gradient(115deg, #042d2a, #063a32 68%, #042f2a);
}

@media (max-width: 700px) {
  :root { --section-wave-size: 26px; }
  .value-unit { grid-template-columns: 31px minmax(0, 1fr); }
  .value-strip::before,
  .footer::before,
  .story::before,
  .product::before,
  .audience::before,
  .highlight::before,
  .steps-section::before,
  .plans.section::before,
  .contact.section::before,
  .faq.section::before,
  .makers.section::before {
    top: calc(-1 * var(--section-wave-size));
    height: var(--section-wave-size);
  }
  .value-strip { padding-block-end: var(--section-wave-size); }
}

/* Creator portraits, centered feature glyphs, and a compact footer grid. */
.value-icon {
  display: grid;
  place-items: center;
  line-height: 0;
}
.value-icon > .i {
  display: block;
  margin: 0;
  transform: none;
  vertical-align: middle;
}
.maker-photo {
  display: block;
  width: 96px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(123, 211, 177, .58);
  border-radius: 16px;
  background: rgba(123, 211, 177, .1);
  box-shadow: 0 8px 24px rgba(0, 20, 16, .24);
}
.maker-card { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.maker-card > div { min-width: 0; }
.footer-links,
.footer-links > div { min-width: 0; }
.footer-links a { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .maker-card { grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 14px; }
  .maker-photo { width: 68px; border-radius: 13px; }
  .footer-links {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .footer-links > div { gap: 14px; }
}
@media (max-width: 380px) {
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.value-unit .value-icon { display: grid; place-items: center; }
.maker-photo { height: 96px; }
.footer-links > div { align-content: start; grid-auto-rows: max-content; }
@media (max-width: 700px) { .maker-photo { height: 68px; } }

/* PlantOn+ vivid glass visual layer — layout and content remain unchanged. */
:root {
  --site-ink: #082c2b;
  --site-deep: #032c26;
  --site-green: #00a982;
  --site-signal: #c6f36b;
  --site-mint: #d9fff0;
  --site-surface: #effbf4;
  --site-white: #fbfffc;
  --site-line: rgba(28, 117, 86, .2);
  --site-muted: #42685f;
}
body {
  background-color: #effbf4;
  background-image: radial-gradient(ellipse at 15% 24%, rgba(19, 211, 151, .11), transparent 32%), radial-gradient(ellipse at 88% 64%, rgba(196, 243, 107, .12), transparent 35%);
}
.header {
  background: rgba(2, 42, 35, .88);
  border-bottom-color: rgba(128, 240, 198, .22);
  box-shadow: 0 8px 30px rgba(1, 32, 25, .12);
}
.hero {
  background: radial-gradient(ellipse at 76% 32%, rgba(0, 174, 129, .45), transparent 38%), radial-gradient(ellipse at 12% 94%, rgba(112, 235, 184, .14), transparent 35%), linear-gradient(128deg, #032923 0%, #034537 53%, #052d2b 100%);
}
.value-strip { background: linear-gradient(115deg, #052f2b, #075447 55%, #06342e); }
.story, .audience, .highlight, .steps-section, .plans.section, .faq.section {
  background-image: radial-gradient(ellipse at 8% 12%, rgba(0, 185, 137, .15), transparent 34%), radial-gradient(ellipse at 94% 88%, rgba(190, 239, 106, .16), transparent 32%), linear-gradient(132deg, #e8fff2, #f8fff9 52%, #e6faef) !important;
}
.product, .contact.section, .makers.section {
  background-image: radial-gradient(ellipse at 11% 90%, rgba(0, 220, 159, .22), transparent 38%), radial-gradient(ellipse at 90% 12%, rgba(197, 243, 107, .18), transparent 34%), linear-gradient(132deg, #032e2c, #075443 55%, #06352f) !important;
}
.section-title { text-wrap: balance; }
.button, .header-cta .button {
  background-image: linear-gradient(115deg, #7de5bd, #b8f36c);
  color: #052f28;
  box-shadow: 0 10px 28px rgba(0, 130, 92, .2);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.button:hover, .header-cta .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 130, 92, .3);
  filter: saturate(1.12);
}
.story-card, .plan-card, .step, .maker-card, .feature-tab, .contact-form, .units-panel, .faq details {
  border-color: rgba(31, 129, 94, .18);
  box-shadow: 0 12px 34px rgba(10, 78, 56, .07);
}
.story-card, .plan-card:not(.plan-card-featured), .step, .contact-form, .units-panel {
  background: rgba(255, 255, 255, .76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.story-card, .plan-card, .maker-card, .aud-card, .feature-tab {
  transition: transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}
.story-card:hover, .plan-card:hover, .maker-card:hover, .feature-tab:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(5, 75, 53, .16);
}
.plan-card-featured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 48px;
  border: 1px solid rgba(142, 246, 196, .48);
  background: radial-gradient(ellipse at 100% 0%, rgba(185, 244, 107, .24), transparent 42%), linear-gradient(145deg, #08775b, #034237 74%);
  box-shadow: 0 20px 48px rgba(1, 69, 48, .22);
}
.plan-badge {
  z-index: 3;
  top: 14px;
  right: 16px;
  max-width: calc(100% - 32px);
  padding: 7px 12px;
  color: #063c31;
  background: linear-gradient(100deg, #c8f36f, #7de7bc);
  box-shadow: 0 4px 16px rgba(0, 25, 20, .2);
  line-height: 1.2;
}
.plan-card > :not(.plan-badge) { position: relative; z-index: 1; }
.faq details {
  border-color: rgba(28, 117, 86, .18);
  transition: background-color .2s ease, border-color .2s ease;
}
.faq details:hover, .faq details[open] { background: rgba(255, 255, 255, .62); }
.faq-grid > div:first-child { z-index: 4; }
.footer {
  background-image: radial-gradient(ellipse at 90% 0%, rgba(0, 197, 143, .2), transparent 40%), linear-gradient(125deg, #032c28, #06463b 67%, #032f2b);
}
@media (min-width: 701px) and (max-width: 1030px) {
  .faq-grid { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(28px, 5vw, 58px); }
  .faq-grid > div:first-child { position: static; align-self: start; padding: 20px 0; }
}
@media (max-width: 700px) {
  .faq-grid > div:first-child { position: static; }
  .plan-card-featured { padding-top: 48px; }
  .plan-badge { top: 13px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Keep each section's atmosphere local instead of repeating the clock's orbital lines. */
.hero, .story, .product, .audience, .highlight, .steps-section, .plans.section, .contact.section, .faq.section, .makers.section, .footer {
  position: relative;
  isolation: isolate;
}
.hero::after, .story::after, .product::after, .audience::after, .highlight::after, .steps-section::after, .plans.section::after, .contact.section::after, .faq.section::after, .makers.section::after, .footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
  opacity: .72;
  mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent);
}
.hero > .wrap, .section > .wrap, .footer > .wrap { position: relative; z-index: 1; }
.product::after, .contact.section::after, .makers.section::after, .hero::after { opacity: .5; mix-blend-mode: screen; }
.audience::after, .plans.section::after, .makers.section::after { transform: scaleX(-1); }
.highlight::after, .faq.section::after { background-position: 75% center; opacity: .42; }
.story, .audience, .highlight, .steps-section, .plans.section, .faq.section {
  background-image: radial-gradient(ellipse at 92% 28%, #91edd3aa, transparent 44%), radial-gradient(ellipse at 10% 78%, #d3ee9c99, transparent 40%), linear-gradient(125deg, #dff8ee, #f2fff8 48%, #d4f2e6) !important;
}
.product, .contact.section, .makers.section {
  background-image: radial-gradient(ellipse at 90% 25%, #13947a66, transparent 48%), radial-gradient(ellipse at 12% 90%, #0ad29444, transparent 40%), linear-gradient(135deg, #022d2b, #085844 62%, #043c34) !important;
}
.story-card, .plan-card:not(.plan-card-featured), .step, .units-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(247,255,251,.55));
  border-color: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 #fff, 0 16px 40px #10574012;
  backdrop-filter: blur(18px);
}
.maker-card { background: linear-gradient(125deg, #baffde14, #00382d75); border-color: #9dffd336; backdrop-filter: blur(16px); }
@media (max-width: 700px) {
  .section::after, .hero::after { background-size: auto 100%; background-position: 65% center; }
  .story-card, .plan-card, .step, .units-panel, .maker-card { backdrop-filter: blur(8px); }
}
/* Responsive audit corrections: keep product mockups and table content reachable. */
@media (max-width: 900px) {
  .story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-card:last-child { grid-column: 1 / -1; }
  .story-card .mini-rows, .story-card .art-tags { width: min(260px, 92%); }
}
@media (max-width: 700px) {
  .story-cards { grid-template-columns: minmax(0, 1fr); }
  .story-card:last-child { grid-column: auto; }
  .aud-card { display: flex; flex-direction: column; align-items: flex-start; }
  .aud-card .corner, .aud-card.worker .corner {
    position: relative; inset: auto; right: auto; bottom: auto;
    width: min(100%, 360px); max-width: 100%; height: auto;
    min-height: 178px; margin: 22px 0 0 auto; transform: none;
  }
  .aud-card.worker .corner { min-height: 230px; }
  .plan-table-scroll { overscroll-behavior-inline: contain; }
}
@media (max-width: 360px) {
  .hero .hero-actions .button { flex-basis: 100%; }
  .hero h1 { font-size: clamp(2.35rem, 10vw, 2.8rem); }
  .aud-card { padding: 20px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .hero { min-height: 0; }
  .hero-inner { min-height: 0; padding-block: 28px; }
  .hero-copy { padding-block: 10px; }
  .hero h1 { margin-block: 12px; }
  .clock-stage { margin-block: 14px 20px; }
}
@media (min-width: 1800px) {
  .header-inner, .hero-inner, .section:not(.hero) .wrap, .footer .wrap, .value-strip .wrap {
    max-width: 1320px;
  }
}
.plan-table-scroll:focus-visible { outline: 2px solid #078963; outline-offset: 3px; }

/* Keep the separator and the value strip on the same uninterrupted tone. */
.value-strip {
  --wave-base: #052f2b;
  background: var(--wave-base);
}

/* Match each wave edge to the exact first stop of its section background. */
.value-strip { --wave-base: #052f2b; }
.story, .audience, .highlight, .steps-section, .plans.section, .faq.section { --wave-base: #dff8ee; }
.product, .contact.section, .makers.section { --wave-base: #022d2b; }
.value-strip, .story, .product, .audience, .highlight, .steps-section,
.plans.section, .contact.section, .faq.section, .makers.section, .footer {
  background-color: var(--wave-base);
}
.story, .audience, .highlight, .steps-section, .plans.section, .faq.section {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 84px),
    radial-gradient(ellipse at 92% 28%, #91edd3aa, transparent 44%),
    radial-gradient(ellipse at 10% 78%, #d3ee9c99, transparent 40%),
    linear-gradient(125deg, #dff8ee, #f2fff8 48%, #d4f2e6) !important;
}
.product, .contact.section, .makers.section {
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 84px),
    radial-gradient(ellipse at 90% 25%, #13947a66, transparent 48%),
    radial-gradient(ellipse at 12% 90%, #0ad29444, transparent 40%),
    linear-gradient(135deg, #022d2b, #085844 62%, #043c34) !important;
}
.footer {
  --wave-base: #032c28;
  background-color: var(--wave-base);
  background-image:
    linear-gradient(180deg, var(--wave-base), transparent 84px),
    radial-gradient(ellipse at 90% 0%, rgba(0, 197, 143, .2), transparent 40%),
    linear-gradient(125deg, #032c28, #06463b 67%, #032f2b);
}

/* Keep the full height of the clock controls above the decorative section wave. */
.hero-inner { padding-bottom: max(38px, calc(var(--section-wave-size) + 18px)); }
.clock-stage { margin-bottom: clamp(18px, 2vw, 28px); }
.hero-clock-panel .clock-console .orbit-event { border-radius: 18px 32px 18px 32px; }
.story.section, .product.section, .audience.section, .highlight.section,
.steps-section.section, .plans.section, .contact.section, .faq.section,
.makers.section {
  padding-top: clamp(56px, 6vw, 78px);
}
.footer { padding-top: 34px; }
#shiftClock + .clock-console {
  border-color: transparent;
  background: radial-gradient(ellipse at 52% 48%, rgba(82, 237, 190, .11), rgba(12, 113, 90, .045) 48%, transparent 76%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.hero-clock-panel .clock-console::before { opacity: .32; box-shadow: 0 0 18px rgba(95,255,197,.36); }
.hero-clock-panel .clock-console .orbit-event {
  border-color: transparent;
  background: rgba(3, 55, 47, .36);
}
.hero-clock-panel .clock-console::before { display: none; }
.hero-clock-panel .clock-console .clock-range-wrap { background: rgba(1, 45, 40, .18); }

/* Replace the sharp diagonal glass streak with a broad, soft atmospheric glow. */
.hero-glass-sheet {
  border-color: transparent;
  background: linear-gradient(95deg, transparent 24%, #9df8e004 39%, #b6ffe609 47%, #c6fff60b 51%, #6cd4bf04 59%, transparent 72%);
  box-shadow: none;
  filter: blur(18px);
}

/* Keep the full text glyph, including its descender, inside the heading box. */
.hero h1 {
  padding-bottom: .12em;
  margin-bottom: calc(24px - .12em);
}
@media (max-width: 600px) {
  .hero h1 { margin-bottom: calc(18px - .12em); }
}
@media (orientation: landscape) and (max-height: 560px) {
  .hero h1 { margin-bottom: calc(12px - .12em); }
}

/* Weightless clock console: glow and orbit details carry the hierarchy, not a frame. */
.hero-clock-panel .clock-console {
  border: 0;
  border-radius: 0;
  padding: 12px 8px 8px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(80, 255, 204, .13), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 202, 157, .11), transparent 68%);
  box-shadow: none;
  overflow: visible;
}
#shiftClock + .clock-console::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -22px -34px -18px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 48%, rgba(107, 255, 205, .08) 48.3%, transparent 48.8%),
    radial-gradient(ellipse at 50% 48%, transparent 62%, rgba(92, 237, 195, .055) 62.2%, transparent 62.6%),
    radial-gradient(ellipse at 50% 55%, rgba(47, 224, 179, .12), transparent 72%);
  filter: blur(.25px);
}
#shiftClock + .clock-console .console-sparks { overflow: visible; }
#shiftClock + .clock-console .console-sparks i:nth-child(3) { left: 82%; top: 18%; animation-delay: -4s; }
#shiftClock + .clock-console .console-sparks i:nth-child(4) { left: 18%; top: 84%; animation-delay: -6s; }
#shiftClock + .clock-console .orbit-event {
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 8px 14px 13px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#shiftClock + .clock-console .orbit-event::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 18%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(112, 255, 210, .38), rgba(112, 255, 210, .12) 64%, transparent);
}
#shiftClock + .clock-console .clock-range-wrap {
  position: relative;
  margin-top: 8px;
  padding: 8px 14px 4px;
  border-radius: 18px 34px 18px 34px;
  background: linear-gradient(110deg, rgba(13, 93, 76, .18), rgba(33, 164, 130, .08) 55%, transparent);
}
#shiftClock + .clock-console .clock-range-heading output {
  border-color: rgba(126, 255, 212, .24);
  background: rgba(117, 255, 208, .08);
  box-shadow: inset 0 1px 0 rgba(220, 255, 243, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#shiftClock + .clock-console .moment-controls button {
  background: linear-gradient(145deg, rgba(170, 255, 224, .1), rgba(4, 72, 61, .2));
  border-color: rgba(144, 255, 216, .2);
  box-shadow: inset 0 1px 0 rgba(229, 255, 245, .12), 0 8px 20px rgba(0, 24, 21, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#shiftClock + .clock-console .moment-controls button[aria-pressed="true"] {
  color: #033b2d;
  background: linear-gradient(115deg, #88ebc6, #c3f393);
  border-color: rgba(210, 255, 226, .9);
  box-shadow: 0 0 24px rgba(103, 255, 192, .26), inset 0 1px 0 rgba(255,255,255,.55);
}

/* Carry the same restrained glass language through the site's existing surfaces. */
.header {
  background: linear-gradient(115deg, rgba(3, 43, 38, .86), rgba(5, 61, 51, .76));
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.feature-tab,
.faq details,
.aud-card,
.contact-form,
.units-panel,
.maker-card {
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 14px 36px rgba(5, 55, 43, .12);
}
.feature-tab {
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(220,248,235,.54));
  border-color: rgba(255,255,255,.76);
}
.feature-tab[aria-selected="true"] {
  background: linear-gradient(125deg, rgba(221,255,238,.92), rgba(151,236,206,.78));
  border-color: rgba(255,255,255,.9);
}
.aud-card.manager { background: linear-gradient(135deg, rgba(5, 119, 91, .78), rgba(3, 62, 53, .86)); }
.aud-card.worker { background: linear-gradient(135deg, rgba(235, 255, 244, .88), rgba(196, 240, 220, .76)); }
.contact-form { background: linear-gradient(145deg, rgba(10, 83, 69, .78), rgba(2, 47, 43, .88)); border-color: rgba(170, 255, 222, .24); }
.units-panel { background: linear-gradient(145deg, rgba(233, 255, 244, .8), rgba(210, 245, 228, .56)); border-color: rgba(255,255,255,.8); }
.faq details { background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(235,250,240,.62)); }
@media (max-width: 700px) {
  #shiftClock + .clock-console { padding: 8px 0 2px; }
  #shiftClock + .clock-console::after { inset: -14px -16px; }
  #shiftClock + .clock-console .clock-range-wrap { padding-inline: 8px; }
  .feature-tab, .faq details, .aud-card, .contact-form, .units-panel, .maker-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) {
  #shiftClock + .clock-console .console-sparks i { animation: none !important; }
}

/* A single luminous orbit replaces the faint rectangular wash behind the clock UI. */
#shiftClock + .clock-console {
  background: transparent;
}
#shiftClock + .clock-console::before,
#shiftClock + .clock-console::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 286deg,
    rgba(77, 245, 193, .035) 304deg,
    rgba(118, 255, 216, .3) 324deg,
    rgba(199, 255, 232, .82) 328deg,
    rgba(80, 236, 191, .08) 331deg,
    transparent 343deg 360deg);
  -webkit-mask: radial-gradient(ellipse at center, transparent 48.4%, #000 48.8%, #000 49.35%, transparent 49.8%);
  mask: radial-gradient(ellipse at center, transparent 48.4%, #000 48.8%, #000 49.35%, transparent 49.8%);
  filter: drop-shadow(0 0 7px rgba(82, 255, 206, .24));
  animation: console-orbit-turn 28s linear infinite;
}
#shiftClock + .clock-console::before {
  inset: -25px -42px -22px;
}
#shiftClock + .clock-console::after {
  inset: -42px -66px -34px;
  opacity: .44;
  transform: rotate(128deg);
  animation-duration: 46s;
  animation-direction: reverse;
}
#shiftClock + .clock-console .orbit-event::after { display: none; }
#shiftClock + .clock-console .clock-range-wrap { background: transparent; }
@keyframes console-orbit-turn { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) {
  #shiftClock + .clock-console::before,
  #shiftClock + .clock-console::after { animation: none !important; }
}

/* The comparison remains a real table, presented as one readable glass surface. */
.plan-table-scroll {
  padding: clamp(7px, 1vw, 12px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(229,249,239,.42));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 48px rgba(6, 80, 58, .1);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}
.plan-table {
  border-collapse: separate;
  border-spacing: 0 3px;
  background: transparent;
}
.plan-table th,
.plan-table td {
  border: 0;
  background: rgba(255,255,255,.42);
}
.plan-table thead th {
  padding-block: 16px;
  color: #073c33;
  text-align: center;
  background: rgba(255,255,255,.72);
}
.plan-table thead tr:first-child th:first-of-type { border-radius: 14px 0 0 14px; }
.plan-table thead tr:first-child th:last-child { border-radius: 0 14px 14px 0; }
.plan-table .plan-pick { background: rgba(51, 183, 139, .19); }
.plan-table thead .plan-pick { background: rgba(54, 185, 142, .3); }
.plan-table .plan-price-row th,
.plan-table .plan-price-row td {
  font-size: 1rem;
  font-weight: 790;
  background: rgba(255,255,255,.66);
}
.plan-table .plan-price-row .plan-pick { background: rgba(51, 183, 139, .24); }
.plan-table tbody th { color: #17493e; }
.plan-table tbody td { text-align: center; }
.plan-table tr > :first-child { padding-left: 18px; text-align: left; }
.plan-table tr > :last-child { padding-right: 18px; }
.plan-table tr > :first-child { border-radius: 12px 0 0 12px; }
.plan-table tr > :last-child { border-radius: 0 12px 12px 0; }
.plan-table-scroll:focus-visible { outline-offset: 5px; }
@media (max-width: 700px) {
  .plan-table-scroll { padding: 6px; border-radius: 17px; }
  .plan-table { border-spacing: 0 2px; }
  .plan-table thead th { padding-block: 12px; }
}

/* Restore clear contrast inside the dark glass contact surface. */
.contact-form {
  color: #f5fff9;
  border-color: rgba(179, 255, 222, .3);
  background: linear-gradient(145deg, rgba(20, 111, 90, .72), rgba(3, 54, 48, .78));
  box-shadow: inset 0 1px 0 rgba(235,255,246,.18), 0 24px 64px rgba(0, 22, 17, .18);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}
.contact-form h3 { color: #f5fff9; }
.contact-form > p { color: rgba(235, 255, 245, .82); }
.contact-form .field-group label { color: rgba(235, 255, 245, .9); }
.contact-form .form-hint { color: rgba(219, 249, 235, .76); }
.contact-form .field-group input,
.contact-form .field-group select {
  border-color: rgba(217, 255, 239, .48);
  background: rgba(244, 255, 249, .94);
  box-shadow: inset 0 1px 2px rgba(5, 55, 41, .07);
}

/* Clarify the FAQ rhythm: independent frosted rows with a clear open state. */
.faq-grid > div:first-child { padding-top: 4px; }
.faq-grid > div:last-child { display: grid; gap: 9px; align-content: start; }
.faq details,
.faq details:first-child {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 18px 26px 18px 26px;
  background: linear-gradient(130deg, rgba(255,255,255,.8), rgba(228,250,240,.58));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 12px 28px rgba(32, 105, 77, .06);
  backdrop-filter: blur(18px) saturate(122%);
  -webkit-backdrop-filter: blur(18px) saturate(122%);
}
.faq details:hover,
.faq details[open] {
  border-color: rgba(123, 213, 179, .68);
  background: linear-gradient(130deg, rgba(255,255,255,.94), rgba(213,247,231,.78));
}
.faq summary { color: #082f2c; }
.faq summary::after {
  color: #075f4b;
  border: 0;
  background: rgba(83, 207, 158, .15);
  transition: transform .2s ease, background-color .2s ease;
}
.faq details[open] summary::after { background: rgba(83, 207, 158, .26); }

/* Keep the clock controls centered while the selected hour stays in the scale. */
#shiftClock + .clock-console .orbit-event {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 62px;
  padding: 12px 48px;
  text-align: center;
}
#shiftClock + .clock-console .orbit-event > div {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 100%;
}
#shiftClock + .clock-console .event-dot,
#shiftClock + .clock-console .event-check {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#shiftClock + .clock-console .event-dot { left: 20px; }
#shiftClock + .clock-console .event-check { right: 20px; }
#shiftClock + .clock-console .clock-range-heading {
  justify-content: center;
  text-align: center;
}
#shiftClock + .clock-console .clock-range-ends {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
#shiftClock + .clock-console .clock-range-ends > :first-child { justify-self: start; }
#shiftClock + .clock-console .clock-range-ends > :last-child { justify-self: end; }
#shiftClock + .clock-console .clock-current-hour {
  color: #9af4d0;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Add two small moving satellites to the existing glass orbit. */
#shiftClock + .clock-console::before {
  background: conic-gradient(from 0deg,
    transparent 0deg 270deg,
    rgba(77, 245, 193, .07) 286deg,
    rgba(118, 255, 216, .38) 307deg,
    rgba(223, 255, 240, .94) 311deg,
    rgba(80, 236, 191, .14) 317deg,
    transparent 334deg 360deg);
  filter: drop-shadow(0 0 9px rgba(82, 255, 206, .32));
}
#shiftClock + .clock-console::after {
  background: conic-gradient(from 0deg,
    transparent 0deg 260deg,
    rgba(77, 245, 193, .025) 286deg,
    rgba(118, 255, 216, .25) 307deg,
    rgba(203, 255, 233, .76) 311deg,
    rgba(80, 236, 191, .07) 317deg,
    transparent 334deg 360deg);
  filter: drop-shadow(0 0 8px rgba(82, 255, 206, .22));
}
#shiftClock + .clock-console .console-sparks::before,
#shiftClock + .clock-console .console-sparks::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #f4fff9 0 18%, #9affd6 40%, rgba(87, 255, 205, .2) 74%, transparent 100%);
  box-shadow: 0 0 12px 3px rgba(103, 255, 204, .46);
  offset-path: ellipse(48% 46% at 50% 50%);
  offset-rotate: 0deg;
  animation: console-particle-orbit 17s linear infinite;
}
#shiftClock + .clock-console .console-sparks::after {
  width: 3px;
  height: 3px;
  opacity: .8;
  offset-path: ellipse(49% 44% at 50% 50%);
  offset-distance: 54%;
  animation-duration: 25s;
  animation-direction: reverse;
}
@keyframes console-particle-orbit { to { offset-distance: 100%; } }

/* Every feature tab keeps dark ink on its translucent glass surface. */
.feature-tab,
.feature-tab:hover,
.feature-tab:active,
.feature-tab:focus-visible,
.feature-tab[aria-selected="true"] {
  color: #063e36;
}

/* Lock each plan to an equal column and center every comparison value and CTA. */
.plan-table {
  width: 100%;
  table-layout: fixed;
}
.plan-table th,
.plan-table td { vertical-align: middle; }
.plan-table tr > :first-child { width: 29%; }
.plan-table tr > :not(:first-child) { width: 17.75%; }
.plan-table tr > :not(:first-child) { text-align: center; }
.plan-table tfoot td { text-align: center; }
.plan-table tfoot .button {
  display: inline-flex;
  width: min(100%, 156px);
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  padding-inline: 8px;
}
.plan-table tfoot td:last-child { padding-right: 14px; }
@media (max-width: 700px) {
  #shiftClock + .clock-console .orbit-event { padding-inline: 36px; }
  #shiftClock + .clock-console .event-dot { left: 12px; }
  #shiftClock + .clock-console .event-check { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #shiftClock + .clock-console .console-sparks::before,
  #shiftClock + .clock-console .console-sparks::after { animation: none !important; }
}

/* Bring the elliptical trails close enough to read around the floating console. */
#shiftClock + .clock-console::before,
#shiftClock + .clock-console::after {
  -webkit-mask: radial-gradient(ellipse at center, transparent 46.8%, #000 47.2%, #000 48.1%, transparent 48.6%);
  mask: radial-gradient(ellipse at center, transparent 46.8%, #000 47.2%, #000 48.1%, transparent 48.6%);
}
#shiftClock + .clock-console::before { inset: -11px -18px -10px; }
#shiftClock + .clock-console::after { inset: -26px -38px -24px; opacity: .56; }
#shiftClock + .clock-console .console-sparks::before {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 15px 4px rgba(103, 255, 204, .56);
}
.faq details p { color: #315c50; }
@media (max-width: 700px) {
  .faq-grid > div:last-child { gap: 7px; }
  .faq details, .faq details:first-child { padding: 14px 15px; border-radius: 15px 21px 15px 21px; }
}

/* One orbital path now surrounds the complete 24-hour instrument. */
.hero-clock-panel > .hero-clock-orbit {
  position: absolute;
  inset: -42px clamp(-18px, -1.3vw, -8px) -4px;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.hero-clock-panel > :not(.hero-clock-orbit) {
  position: relative;
  z-index: 1;
}
.hero-clock-orbit::before,
.hero-clock-orbit::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-clock-orbit::before {
  inset: 0;
  border: 1px solid rgba(123, 246, 205, .13);
  border-top-color: rgba(205, 255, 235, .42);
  border-right-color: rgba(96, 239, 194, .25);
  border-bottom-color: rgba(86, 228, 188, .07);
  filter: drop-shadow(0 0 12px rgba(82, 255, 206, .1));
}
.hero-clock-orbit::after {
  inset: 8px 6px 12px;
  background: conic-gradient(from 198deg,
    transparent 0deg 35deg,
    rgba(84, 244, 197, .12) 49deg,
    rgba(200, 255, 233, .76) 56deg,
    rgba(89, 245, 199, .18) 62deg,
    transparent 76deg 248deg,
    rgba(91, 240, 196, .08) 267deg,
    rgba(163, 255, 222, .34) 282deg,
    transparent 296deg 360deg);
  -webkit-mask: radial-gradient(ellipse at center, transparent 49.1%, #000 49.4%, #000 49.8%, transparent 50.1%);
  mask: radial-gradient(ellipse at center, transparent 49.1%, #000 49.4%, #000 49.8%, transparent 50.1%);
  filter: drop-shadow(0 0 8px rgba(82, 255, 206, .22));
}
@media (prefers-reduced-motion: no-preference) {
  .hero-clock-orbit::after { animation: hero-clock-trail-orbit 72s linear infinite; transform-origin: center; }
}
.hero-clock-orbit__particle {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #f4fff9 0 18%, #9affd6 42%, rgba(87, 255, 205, .18) 74%, transparent 100%);
  box-shadow: 0 0 12px 3px rgba(103, 255, 204, .45);
  opacity: .92;
}
.hero-clock-orbit__particle:nth-child(2) {
  top: 50%;
  right: 0;
  left: auto;
  width: 4px;
  height: 4px;
  opacity: .78;
}
.hero-clock-orbit__particle:nth-child(3) {
  top: auto;
  bottom: 0;
  width: 3px;
  height: 3px;
  opacity: .68;
}
@supports (offset-path: ellipse(49% 49% at 50% 50%)) {
  .hero-clock-orbit__particle {
    top: 50%;
    left: 50%;
    offset-path: ellipse(49% 49% at 50% 50%);
    offset-anchor: center;
    offset-rotate: 0deg;
    offset-distance: var(--orbit-rest, 0%);
  }
  .hero-clock-orbit__particle:nth-child(2) {
    right: auto;
    offset-path: ellipse(47.7% 48.2% at 50% 50%);
  }
  .hero-clock-orbit__particle:nth-child(3) {
    bottom: auto;
    offset-distance: var(--orbit-rest, 0%);
  }
}
.hero-clock-orbit__particle:nth-child(1) { --orbit-rest: 8%; }
.hero-clock-orbit__particle:nth-child(2) { --orbit-rest: 45%; }
.hero-clock-orbit__particle:nth-child(3) { --orbit-rest: 73%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-clock-orbit__particle { animation: hero-clock-orbit-travel 30s linear infinite; }
  .hero-clock-orbit__particle:nth-child(2) { animation-duration: 39s; animation-delay: -13s; animation-direction: reverse; }
  .hero-clock-orbit__particle:nth-child(3) { animation-duration: 48s; animation-delay: -25s; }
}
@keyframes hero-clock-orbit-travel { to { offset-distance: 100%; } }
@keyframes hero-clock-trail-orbit { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .hero-clock-orbit__particle { animation: none !important; }
}
@media (max-width: 700px) {
  .hero-clock-panel > .hero-clock-orbit { inset-block: -38px -10px; }
}

/* Reserve the orbit's 42px overhang in normal flow, below the header. */
.contact-form .field-group input,
.contact-form .field-group select { color: #103e34; }
.contact-form input::placeholder { color: #506b61; opacity: 1; }
.contact-form .field-group label { color: #edfdf5; }
.contact-form .form-hint { color: #d3eee1; }
.contact-form select option { color: #103e34; background: #eefaf4; }

/* Native keyboard, validation and mobile behavior remain available as fallback. */
@supports (appearance: base-select) {
  .contact-form select,
  .contact-form select::picker(select) { appearance: base-select; }
  .contact-form select { align-items: center; }
  .contact-form select::picker-icon { color: #12634e; }
  .contact-form select::picker(select) {
    padding: 6px;
    margin-block: 6px;
    border: 1px solid #a7dcca;
    border-radius: 12px;
    background: #eefaf4;
    color: #103e34;
    box-shadow: 0 14px 36px rgba(0, 31, 24, .24);
    max-height: 280px;
    overflow-y: auto;
    font: inherit;
  }
  .contact-form select option {
    padding: 11px 12px;
    border-radius: 7px;
    cursor: pointer;
  }
  .contact-form select option:hover,
  .contact-form select option:focus { background: #d4f2e4; }
  .contact-form select option:checked { background: #bcebd7; color: #063d2d; font-weight: 700; }
  .contact-form select option::checkmark { color: #087657; }
}

/* Consistent keyboard emphasis without changing component dimensions. */
.button:focus-visible,
.feature-tab:focus-visible,
.faq summary:focus-visible,
.field-group input:focus-visible,
.field-group select:focus-visible {
  outline: 3px solid #55d5aa;
  outline-offset: 3px;
}
.product .section-desc,
.contact .section-desc { color: #d0eade; }

.hero-art.hero-clock-art { padding-top: 64px; }

@media (max-width: 700px) {
  .hero-art.hero-clock-art { padding-top: 56px; }
}
/* FAQ mockup */
.faq.section {
  position:relative;
  overflow:hidden;
  padding:clamp(90px,9vw,145px) 0;
  --wave-base:#dff8ee;
  background:radial-gradient(ellipse at 5% 78%,#8ee5cf70,transparent 42%),radial-gradient(ellipse at 92% 25%,#a1ead7a8,transparent 46%),linear-gradient(125deg,#dff8ee,#f2fff8 48%,#cef5e8) !important;
}
.faq.section::after {opacity:.23;}
.faq .faq-grid {position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(60px,8vw,135px);align-items:start;max-width:1390px;}
.faq .faq-intro {padding-top:clamp(95px,10vw,155px);}
.faq .faq-intro .kicker {color:#087b60;font-size:13px;font-weight:850;letter-spacing:.22em;text-transform:uppercase;}
.faq .faq-intro .section-title {max-width:none;margin:28px 0 20px;color:#063b35;font-size:clamp(52px,5vw,76px);line-height:1.02;letter-spacing:-.06em;}
.faq .faq-intro .section-title span {color:#00aa7e;}
.faq .faq-intro .section-desc {max-width:410px;font-size:clamp(17px,1.4vw,22px);line-height:1.5;color:#3e6e68;}
.faq .faq-content {display:grid;gap:8px;min-width:0;}
.faq-search {display:flex;align-items:center;gap:12px;height:50px;padding:0 10px 0 20px;border:1px solid #8ee4cd;border-radius:999px;background:#ffffff9c;box-shadow:0 10px 30px #159d7622;color:#006951;}
.faq-search input {min-width:0;flex:1;align-self:stretch;border:0;outline:0;background:transparent;color:#0b3935;font:inherit;font-size:15px;}
.faq-search input::placeholder {color:#355b58;opacity:1;}
.faq-search-icon {display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#c9f3e6;font-size:27px;line-height:1;}
.faq-filters {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 7px;}
.faq-filters button {min-height:43px;border:1px solid #fff;border-radius:999px;background:#ffffff4f;color:#00a77d;font:inherit;font-weight:800;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;}
.faq-filters button:hover {transform:translateY(-2px);background:#ffffffa6;}
.faq-filters button.is-active {background:linear-gradient(135deg,#008d6d,#005d4c);color:white;box-shadow:0 8px 18px #007c5e3b;}
.faq .faq-questions {display:grid;gap:6px;}
.faq .faq-questions details,.faq .faq-questions details:first-child {padding:0;border:1px solid #ffffffd9;border-radius:18px;background:linear-gradient(135deg,#ffffffd6,#e7faf3c7);box-shadow:0 8px 22px #167f6020;overflow:hidden;transition:background .25s,box-shadow .25s,transform .25s;}
.faq .faq-questions details:hover {transform:translateY(-2px);box-shadow:0 12px 24px #167f6030;}
.faq .faq-questions details[open] {background:linear-gradient(135deg,#ffffffec,#e2f9f0df);}
.faq .faq-questions details[hidden] {display:none;}
.faq .faq-questions summary {display:flex;justify-content:flex-start;gap:20px;min-height:57px;padding:8px 16px;font-size:15px;color:#082e2c;}
.faq .faq-questions summary > span:nth-child(2) {flex:1;}
.faq .faq-questions summary::after {display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:50%;background:#c8f3e5;color:#006c53;font-size:23px;line-height:1;}
.faq-icon {display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#cdf5e8;color:#008367;font-size:20px;}
.faq-answer {margin:0 18px 14px 64px;padding:10px 16px;border-radius:15px;background:#dff5edb3;}
.faq .faq-answer p {margin:0;color:#173f3b;font-size:14px;line-height:1.5;}
.faq .faq-questions details::details-content {block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s;}
.faq .faq-questions details[open]::details-content {block-size:auto;}
@supports (interpolate-size:allow-keywords) {.faq .faq-questions details {interpolate-size:allow-keywords;}}
.faq-empty {padding:20px;color:#315c50;}
.faq-support {display:flex;align-items:center;gap:20px;margin-top:8px;padding:16px 20px;border:1px solid #ffffffbd;border-radius:20px;background:#e6faf2b8;box-shadow:0 12px 26px #168d6923;}
.faq-support-icon {display:grid;place-items:center;flex:none;width:55px;height:55px;border-radius:50%;background:#baf0df;color:#006a52;font-size:29px;}
.faq-support div {flex:1;min-width:0;}.faq-support strong {color:#093330;}.faq-support p {margin:4px 0 0;color:#315c50;font-size:14px;}
.faq-support a {display:inline-flex;align-items:center;gap:14px;min-height:42px;padding:0 20px;border-radius:999px;background:#00765b;color:white;font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap;}
.faq-support a:hover {background:#005b49;}
.faq :is(button,input,a,summary):focus-visible {outline:3px solid #006b52;outline-offset:3px;}
@media(max-width:900px){.faq .faq-grid {grid-template-columns:1fr;gap:35px;}.faq .faq-intro {padding-top:0;}.faq .faq-intro .section-title {font-size:clamp(42px,8vw,65px);}}
@media(max-width:540px){.faq.section {padding:85px 0;}.faq .faq-grid {gap:26px;}.faq .faq-intro .section-title {margin:16px 0;}.faq-filters {gap:5px;}.faq-filters button {font-size:12px;}.faq .faq-questions summary {gap:10px;padding:8px 10px;font-size:13px;}.faq-answer {margin-left:12px;}.faq-support {flex-wrap:wrap;gap:12px;}.faq-support a {width:100%;justify-content:center;}}
@media(prefers-reduced-motion:reduce){.faq-filters button,.faq .faq-questions details,.faq .faq-questions details::details-content {transition:none;}.faq-filters button:hover,.faq .faq-questions details:hover {transform:none;}}
/* FAQ refinements */
.faq.section {background:radial-gradient(ellipse at 7% 34%,#9debd9aa,transparent 33%),radial-gradient(ellipse at 92% 43%,#8de5d1a8,transparent 34%),linear-gradient(160deg,#e9fff6 0%,#dffaf0 57%,#baf0e0 100%) !important;}
.faq .faq-intro .kicker {display:inline-flex;align-items:center;gap:12px;letter-spacing:.24em;}
.faq .faq-intro .kicker::before {content:"";width:26px;height:2px;background:#008e70;}
.faq-icon svg,.faq-support-icon svg,.faq-search svg {display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.faq-icon svg {width:19px;height:19px;}
.faq-support-icon svg {width:30px;height:30px;}
.faq-search-icon svg {width:20px;height:20px;}
.faq .faq-questions summary::after {display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transform:none !important;}
.faq .faq-questions details[open] summary::after {content:"−";}
.faq .faq-questions details[open],.faq .faq-questions details[open]:hover {border-left:3px solid #008b6b;}
.faq-search:focus-within {outline:2px solid #008b6b;outline-offset:3px;}
.faq .faq-search input:focus-visible {outline:none;}
.faq-filters button {background:linear-gradient(110deg,#d8faeb,#b9f5d7);border-color:#8ee5c4;color:#005b48;box-shadow:0 7px 18px #087b5a20;}
.faq-filters button:hover {background:linear-gradient(110deg,#baf5d8,#97edc4);}
.faq-filters button.is-active,.faq-filters button.is-active:hover {background:linear-gradient(110deg,#008c70,#004e41);color:#fff;}
.faq-support a {background:linear-gradient(110deg,#007c64,#005344);box-shadow:0 8px 18px #007c5e38;}
/* Match the site's CTA finish and keep accordion controls geometrically centered. */
.faq .faq-intro .kicker {font-size:.68rem;letter-spacing:.16em;gap:10px;line-height:1.35;}
.faq .faq-intro .kicker::before {width:24px;height:2px;}
.faq .faq-questions summary::after {
  content:"";display:block;position:relative;width:34px;height:34px;
  flex:0 0 34px;margin:0;border-radius:50%;
  background:linear-gradient(#006c53,#006c53) center / 12px 2px no-repeat,
    linear-gradient(#006c53,#006c53) center / 2px 12px no-repeat,#c8f3e5;
}
.faq .faq-questions details[open] summary::after {
  content:"";background:linear-gradient(#006c53,#006c53) center / 12px 2px no-repeat,#c8f3e5;
}
.faq-filters button,.faq-filters button:hover,.faq-support a,.faq-support a:hover {
  background:#90eaba linear-gradient(115deg,#7de5bd,#b8f36c);
  border-color:transparent;color:#052f28;
  box-shadow:0 10px 28px #00825c33;
}
.faq-filters button:hover,.faq-support a:hover {transform:translateY(-2px);box-shadow:0 16px 36px #00825c4d;filter:saturate(1.12);}
.faq-filters button.is-active,.faq-filters button.is-active:hover {
  background:#90eaba linear-gradient(115deg,#7de5bd,#b8f36c);color:#052f28;
  box-shadow:inset 0 0 0 2px #006b52,0 10px 28px #00825c33;
}
@media(prefers-reduced-motion:reduce){.faq-filters button:hover,.faq-support a:hover {transform:none;}}
/* Keep the section wave visible and the open FAQ accent stable. */
.faq.section {overflow:visible;}
.faq.section::before {background:#e9fff6;}
.faq .faq-intro {position:relative;}
.faq .faq-intro::after {
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:260px;left:-55px;width:240px;aspect-ratio:1;
  border:1px solid #18b89640;border-top-color:transparent;border-right-color:transparent;
  border-radius:50%;transform:rotate(-18deg);
  box-shadow:-28px 26px 0 -27px #18b89636,-58px 57px 0 -56px #18b89624;
  background:radial-gradient(circle at 45% 40%,#9ae7d821,transparent 60%);
}
.faq .faq-intro .kicker {
  color:var(--site-green);font-size:12px;font-weight:850;
  letter-spacing:.16em;line-height:1.35;
}
.faq .faq-intro .kicker::before {width:24px;background:currentColor;}
.faq .faq-questions .faq-icon {
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;padding:0;line-height:0;
}
.faq .faq-questions .faq-icon svg {display:block;width:20px;height:20px;margin:0;flex:none;}
.faq .faq-questions details[open],
.faq .faq-questions details[open]:hover {
  border-left:3px solid #008b6b !important;
  box-sizing:border-box;
}
@media(max-width:900px){.faq .faq-intro::after {display:none;}}
/* FAQ: stationary open border and continuous wave. */
.faq .faq-questions details:hover {transform:none;}
.faq .faq-questions details[open]:hover {
  background:linear-gradient(135deg,#ffffffec,#e2f9f0df);
  border-color:#ffffffd9;
  border-left-color:#008b6b;
  box-shadow:0 8px 22px #167f6020;
}
.faq .faq-intro::after {content:none;}
.faq.section {
  background:
    linear-gradient(180deg,#e9fff6 0%,#e9fff6 16px,transparent 100px),
    radial-gradient(ellipse at 7% 34%,#9debd9aa,transparent 33%),
    radial-gradient(ellipse at 92% 43%,#8de5d1a8,transparent 34%),
    linear-gradient(160deg,#e9fff6 0%,#dffaf0 57%,#baf0e0 100%) !important;
}
/* One stable card treatment for every question, including hover and open states. */
.faq .faq-questions details,
.faq .faq-questions details:first-child,
.faq .faq-questions details:hover {
  transform:none;
  border:1px solid #ffffffd9;
  background:linear-gradient(135deg,#ffffffd6,#e7faf3c7);
  box-shadow:0 8px 22px #167f6020;
  transition:none;
}
.faq .faq-questions details[open],
.faq .faq-questions details[open]:hover {
  transform:none;
  border:1px solid #ffffffd9;
  border-left:3px solid #008b6b !important;
  background:linear-gradient(135deg,#ffffffec,#e2f9f0df);
  box-shadow:0 8px 22px #167f6020;
}
.faq .faq-questions summary:hover {color:#082e2c;}
.section.faq.section {
  background:
    linear-gradient(180deg,#e9fff6 0%,transparent 140px),
    radial-gradient(ellipse at 7% 34%,#9debd9aa,transparent 33%),
    radial-gradient(ellipse at 92% 43%,#8de5d1a8,transparent 34%),
    linear-gradient(160deg,#e9fff6 0%,#dffaf0 57%,#baf0e0 100%) !important;
  background-color:#e9fff6 !important;
  --wave-base:#e9fff6;
}
@media (min-width:901px) {
  .section.faq.section {padding-top:clamp(45px,5vw,75px);}
  .faq .faq-intro {padding-top:clamp(35px,4vw,65px);}
}

/* Reduce the empty lead-in while keeping both section layouts intact. */
#para-quem.has-ecosystem,
#recursos.highlight.section {
  padding-top:clamp(42px,calc(6vw - 14px),82px);
}

/* Links legais (aviso do formulário e rodapé) */
.form-hint a, .footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }