/* ============================================================
   Colmeia — landing pública (v3.9)
   Mesmo sistema visual do app (DESIGN.md): mel, areia e tinta,
   hexágono como unidade de dado, números em JetBrains Mono.

   Ritmo claro/escuro autoral (não segue o tema do sistema de
   propósito): hero escuro → vendas claro → painel escuro →
   manifesto mel → comparação clara → Sasa areia → planos
   escuro → fechamento claro. A barra de cima é sempre escura,
   igual à do app.
   ============================================================ */

:root {
  --amber-100: #FBEBD1;
  --amber-200: #F7DDA6;
  --amber-300: #F2C265;
  --amber-400: #F4B24A;
  --amber-500: #E8940F;
  --amber-600: #D98A1E;
  --amber-700: #C97A0C;

  --sand-50:  #FDFBF8;
  --sand-100: #F6F2ED;
  --sand-200: #E6DFD7;
  --gray-400: #B8ADA1;
  --gray-600: #7A6E62;
  --bark-900: #2B2118;

  --text:      #2B2118;
  --text-soft: #4A3F35;
  --text-mute: #7A6E62;

  --line:      #E6DFD7;
  --line-soft: #F0EAE3;

  --night:        #1A1410;   /* o escuro mais fundo (hero, painel) */
  --dark-surface: #241C16;
  --dark-card:    #2A211A;
  --dark-line:    #3E332A;
  --ink-on-dark:  #F4EEE7;
  --mute-on-dark: #A99E92;

  --ok: #2F7A4F;
  --bad: #C24A3C;

  --font-ui:  'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --maxw: 1180px;
  --dur: .22s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r-card: 14px;

  --hex-point: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hex-7:  polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
  --hex-14: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  --hex-13: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);

  --honey: linear-gradient(180deg, #FFD37A 0%, #F2A11C 45%, #B86F08 100%);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:root[data-motion="off"] { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-soft);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { color: var(--text); margin: 0; }
p { margin: 0; }
a { color: var(--amber-700); text-decoration: none; }
a:hover { color: var(--amber-600); }
::selection { background: var(--amber-200); color: var(--bark-900); }
img { display: block; max-width: 100%; }
strong { color: var(--text); font-weight: 600; }
:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 3px; border-radius: 3px; }
button {
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; line-height: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--amber-500); color: #2B1A0E; padding: 10px 16px;
  border-radius: 0 0 8px 8px; font-weight: 600; font-size: 13px;
  transition: top var(--dur) var(--ease); z-index: 200;
}
.skip-link:focus { top: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #9C5C08; margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 11px; height: 12px; background: var(--amber-500);
  clip-path: var(--hex-point); flex: none;
}
.eyebrow--onDark { color: var(--amber-300); }

.block-h {
  font-size: clamp(1.7rem, 3.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  max-width: 18ch;
}
.block-h--xl { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 16ch; letter-spacing: -.035em; line-height: 1; }
.block-lede { max-width: 56ch; font-size: 17px; color: var(--text-soft); margin-top: 18px; }

/* ---------- botões (casca + face, igual ao app) ---------- */

.btn {
  --btn-bg: var(--amber-500);
  --btn-bg2: #F6AE3A;
  --btn-edge: #B86F08;
  --btn-fg: #2B1A0E;
  display: inline-flex;
  padding: 0 0 3px;
  background: var(--btn-edge);
  clip-path: var(--hex-14);
  font-family: var(--font-ui);
  transition: transform .16s var(--ease), background var(--dur) var(--ease);
}
.btn__face {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--btn-fg);
  background: linear-gradient(180deg, var(--btn-bg2), var(--btn-bg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  clip-path: var(--hex-14);
  white-space: nowrap;
  transition: filter var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover .btn__face { filter: brightness(1.06) saturate(1.05); }
.btn:active { transform: translateY(2px); padding-bottom: 1px; }
.btn:focus-visible { outline: none; }
.btn:focus-visible .btn__face { box-shadow: inset 0 0 0 2px var(--bark-900); }
.btn--ghost { --btn-edge: rgba(242, 194, 101, .45); padding: 1.5px 1.5px 3.5px; }
.btn--ghost .btn__face { background: var(--dark-card); color: var(--ink-on-dark); padding: 12.5px 28px 11.5px; clip-path: var(--hex-13); box-shadow: none; }
.btn--ghost:hover { --btn-edge: var(--amber-500); }
.btn--ghost:hover .btn__face { background: #352a21; filter: none; }
.btn--ghost:active { padding-bottom: 1.5px; }
.btn--block, .btn--block .btn__face { width: 100%; }
.btn--lg .btn__face { padding: 18px 38px; font-size: 16px; font-weight: 700; }

/* ---------- barra de cima ---------- */

.lnav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(26, 20, 16, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lnav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  min-height: 64px; display: flex; align-items: center; gap: 20px;
}
.lnav__brand { display: inline-flex; align-items: center; gap: 10px; }
.lnav__mark { height: 26px; width: auto; }
.lnav__word { height: 22px; width: auto; }
.lnav__links { display: none; margin-left: auto; align-items: center; gap: 28px; }
.lnav__links a { font-size: 14px; font-weight: 500; color: #C9BFB4; }
.lnav__links a:hover { color: #fff; }
.lnav__cta {
  margin-left: auto;
  font-size: 13px; font-weight: 700; color: #2B1A0E;
  background: linear-gradient(180deg, #F6AE3A, var(--amber-500));
  box-shadow: inset 0 -2px 0 #B86F08, inset 0 1px 0 rgba(255, 255, 255, .45);
  padding: 9px 20px 10px;
  clip-path: var(--hex-13);
  transition: filter var(--dur) var(--ease), transform .16s var(--ease);
}
.lnav__cta:hover { color: #2B1A0E; filter: brightness(1.07); transform: translateY(-1px); }
@media (min-width: 780px) {
  .lnav__links { display: flex; }
  .lnav__cta { margin-left: 0; }
}

/* ---------- textura de favo (reaproveitada nas seções escuras) ---------- */

.hero__comb, .panel__comb, .closer__comb {
  position: absolute; inset: -10%;
  background-image: url("../assets/brand/honeycomb.svg");
  background-size: 72px 124px;
  pointer-events: none;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(232,148,15,.22), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(232,148,15,.08), transparent 70%),
    var(--night);
  color: var(--mute-on-dark);
  padding: clamp(48px, 8vw, 96px) 0 0;
}
.hero__comb {
  opacity: .07;
  -webkit-mask-image: radial-gradient(70% 80% at 70% 40%, #000 20%, transparent 80%);
  mask-image: radial-gradient(70% 80% at 70% 40%, #000 20%, transparent 80%);
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; }
}

.hero__h {
  color: var(--ink-on-dark);
  font-size: clamp(3rem, 7.6vw, 6rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .9;
  text-transform: uppercase;
}
.hero__chega { display: block; }
.hero__rot {
  display: grid;
  color: var(--amber-500);
}
.hero__word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.35em);
  filter: blur(6px);
  transition: opacity .45s var(--ease), transform .55s var(--ease), filter .45s var(--ease);
  white-space: nowrap;
}
.hero__word.is-on { opacity: 1; transform: none; filter: none; }
.hero__word.is-off { opacity: 0; transform: translateY(-.3em); filter: blur(6px); }
/* a palavra que sai leva um risco, como item riscado da lista */
.hero__word.is-off { text-decoration: line-through; text-decoration-thickness: .08em; }

.hero__sub {
  max-width: 44ch;
  margin-top: 26px;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: #CFC4B8;
}
.hero__sub strong { color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.hero__more {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  color: var(--amber-300); font-weight: 600; font-size: 15px;
}
.hero__more::before, .hero__more::after { content: ""; position: absolute; z-index: -1; transition: background var(--dur) var(--ease); }
.hero__more::before { inset: 0; background: rgba(242, 194, 101, .4); clip-path: var(--hex-14); }
.hero__more::after { inset: 1.5px; background: var(--night); clip-path: polygon(13.2px 0, calc(100% - 13.2px) 0, 100% 50%, calc(100% - 13.2px) 100%, 13.2px 100%, 0 50%); }
.hero__more:hover { color: #fff; }
.hero__more:hover::before { background: var(--amber-500); }
.hero__more:hover::after { background: #2A1F16; }
.hero__fine { margin-top: 14px; font-size: 12.5px; color: #A99E92; }

/* restos de planilha e caderno flutuando no fundo, apagando */
.scraps { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scrap {
  position: absolute;
  width: 210px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: rgba(244, 238, 231, .22);
  animation: scrap-drift 16s ease-in-out infinite;
}
.scrap__file { color: rgba(123, 196, 140, .35); margin-bottom: 4px; }
.scrap s { text-decoration-color: rgba(194, 74, 60, .6); }
.scrap--1 { top: 6%;  left: 2%;  transform: rotate(-4deg); }
.scrap--2 { top: 58%; left: -2%; transform: rotate(3deg);  animation-delay: -5s; }
.scrap--3 { top: 8%;  left: 44%; transform: rotate(2deg);  animation-delay: -9s; opacity: .7; }
.scrap--4 { top: 78%; left: 38%; transform: rotate(-2deg); animation-delay: -12s; opacity: .6; }
@keyframes scrap-drift {
  0%, 100% { translate: 0 0; opacity: .9; }
  50%      { translate: 14px -12px; opacity: .35; }
}
@media (max-width: 959px) { .scrap--3, .scrap--4 { display: none; } }

/* ---------- a colmeia do hero ---------- */

.hive { position: relative; margin: 0; padding-top: 84px; }
.hive__svg { display: block; width: 100%; height: auto; overflow: visible; }
.hive__pipes path { fill: none; stroke: rgba(242, 194, 101, .16); stroke-width: 10; stroke-linecap: round; }
.hive__drops path {
  fill: none;
  stroke: var(--amber-400);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 22;
  animation: hive-flow 1.6s linear infinite;
}
.hive__drops path:nth-child(2) { animation-duration: 1.9s; }
.hive__drops path:nth-child(3) { animation-duration: 2.4s; stroke: var(--amber-300); opacity: .7; }
@keyframes hive-flow { to { stroke-dashoffset: -24; } }

.hive__chip polygon { fill: rgba(36, 28, 22, .9); stroke: var(--amber-500); stroke-width: 1.5; }
.hive__chip text { fill: var(--ink-on-dark); font: 600 15px var(--font-ui); text-anchor: middle; }
.hive__chip--soft polygon { stroke: rgba(242, 194, 101, .45); stroke-dasharray: 4 4; }
.hive__chip--soft text { fill: var(--mute-on-dark); }

/* cada alvéolo: fundo escuro, o mel subindo por dentro (recortado no
   hexágono) e a borda por cima, que acende quando enche */
.hive__cell { fill: rgba(36, 28, 22, .6); }
.hive__rim { fill: none; stroke: rgba(242, 194, 101, .45); stroke-width: 1.5; transition: stroke 1s var(--ease); }
.hive__g.is-full .hive__rim { stroke: #FFD37A; }
.hive__honey {
  transform: translateY(66px);
  /* esvaziando: começa devagar e escorre */
  transition: transform 1.1s cubic-bezier(.55, .05, .7, .45);
}
.hive__g.is-full .hive__honey {
  transform: translateY(0);
  /* enchendo: sobe rápido e assenta devagar, como mel */
  transition: transform 1.7s cubic-bezier(.2, .75, .25, 1);
}
.hive__wave { animation: hive-slosh 2.6s linear infinite; }
@keyframes hive-slosh { to { transform: translateX(60px); } }

/* ---------- as abelhas soltas pela página ---------- */
/* camada do tamanho da PÁGINA (não da tela): as abelhas ficam em pontos da
   página e a rolagem passa por elas. A altura é medida no landing.js. */
.swarm { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 35; pointer-events: none; overflow: hidden; }
.swarm__bee {
  position: absolute; left: 0; top: 0;
  transform: translate3d(-200px, -200px, 0);
  will-change: transform;
  filter: drop-shadow(0 6px 5px rgba(20, 15, 10, .28));
}
.swarm__body { display: block; }

.hive__counter {
  position: absolute;
  top: -4px; right: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
}
.hive__counter-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute-on-dark);
}
.hive__counter-num {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--amber-400);
  font-variant-numeric: tabular-nums;
}
.hive__counter-note { font-size: 11px; color: #9C9086; }

.hero__claim {
  position: relative;
  z-index: 2;
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(40px, 6vw, 72px);
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-on-dark);
}
.hero__claim em { font-style: normal; color: var(--amber-500); white-space: nowrap; }
@media (min-width: 960px) { .hero__claim { text-align: right; } }

/* =========================================================
   TODAS AS VENDAS
   ========================================================= */

.sales { padding: clamp(72px, 10vw, 120px) 0; background: var(--sand-50); }
.sales__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .sales__grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 48px; } }
.sales .block-h--xl { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.sales__copy .block-lede + .block-lede { margin-top: 12px; }

.appwin {
  background: var(--night);
  border-radius: 16px;
  box-shadow: 0 40px 80px -40px rgba(43, 33, 24, .55), 0 0 0 1px rgba(43,33,24,.08);
  overflow: hidden;
  color: #CFC4B8;
}
.appwin__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.appwin__dots { display: inline-flex; gap: 6px; }
.appwin__dots i { width: 10px; height: 10px; border-radius: 50%; background: #3E332A; }
.appwin__title { font-size: 13px; font-weight: 600; color: var(--ink-on-dark); }
.vswitch { margin-left: auto; display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.07); }
.vswitch button { padding: 6px 13px; font-size: 12.5px; font-weight: 600; border-radius: 7px; color: var(--mute-on-dark); transition: background var(--dur), color var(--dur); }
.vswitch button.is-on { background: var(--amber-500); color: #2B1A0E; }
.vswitch button:not(.is-on):hover { color: #fff; }

.appwin__body { position: relative; display: grid; min-height: 420px; }
@media (min-width: 700px) { .appwin__body { grid-template-columns: minmax(0, 1fr) 208px; } }
.appwin__note { padding: 8px 16px 12px; font-size: 11px; color: #9C9086; }

.demo-list { overflow-x: auto; padding: 8px 6px 0 12px; }
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtable th {
  padding: 8px 6px; text-align: left;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: #9C9086;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dtable td { padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.05); white-space: nowrap; }
.dtable .r { text-align: right; }
.dtable td.num { font-family: var(--font-mono); font-size: 12.5px; color: #E6DDD2; }
.dtable td.num.gain { color: var(--amber-400); font-weight: 700; }
.dtable td.num.loss { color: #E07A6C; }
.dtable td.num.zero { color: #9C9086; }
.dtable tbody tr { cursor: pointer; transition: background .2s; }
.dtable tbody tr:hover, .dtable tbody tr.is-picked { background: rgba(232,148,15,.1); }
.dtable tbody tr.is-picked td:first-child { box-shadow: inset 2px 0 0 var(--amber-500); }
.dtable tbody tr.row-in { animation: row-in .45s var(--ease) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }
.dprod { color: var(--ink-on-dark); font-weight: 500; }
.dstat { font-size: 12px; }
.dstat::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #5DB37E; }
.dstat--ok { color: #7FC79B; }
.dstat--bad { color: #E07A6C; }
.dstat--bad::before { background: #E07A6C; }
.mtag {
  display: inline-block; padding: 1px 7px;
  clip-path: var(--hex-7);
  background: var(--amber-500); color: #2B1A0E;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.mtag--shp { background: #F2C265; }
.mtag--man { background: #5A4C40; color: #E6DDD2; }
@media (max-width: 560px) { .hide-sm { display: none; } }

/* a colmeia da demonstração */
.demo-comb[hidden], .demo-list[hidden] { display: none; }
.demo-comb { padding: 26px 12px 18px 18px; overflow: hidden; display: flex; align-items: center; }
.demo-comb__grid { --c: 98px; width: 100%; --h: calc(var(--c) * 1.1547); display: flex; flex-direction: column; }
.demo-comb__row { display: flex; gap: 5px; margin-bottom: calc(var(--h) * -.25 + 4px); }
.demo-comb__row.is-odd { padding-left: calc((var(--c) + 5px) / 2); }
.dcell {
  position: relative;
  width: var(--c); height: var(--h); flex: none;
  clip-path: var(--hex-point);
  background: rgba(255,255,255,.06);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: transform .25s var(--ease), filter .25s;
  animation: cell-in .45s var(--ease) both;
}
@keyframes cell-in { from { opacity: 0; transform: scale(.5); } }
.dcell::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--f);
  background: var(--honey);
  box-shadow: inset 0 2px 0 rgba(255,236,190,.8);
  animation: fill-in 1s cubic-bezier(.2, .75, .25, 1) both;
  animation-delay: inherit;
}
@keyframes fill-in { from { height: 0; } }
.dcell > * { position: relative; }
.dcell b { font-family: var(--font-mono); font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.dcell small { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.75); line-height: 1.1; padding: 0 8px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dcell.is-canceled { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,.06) 5px 6px), rgba(255,255,255,.03); }
.dcell.is-canceled b { color: #8A7F74; text-shadow: none; }
.dcell:hover, .dcell.is-picked { transform: scale(1.08); filter: brightness(1.12); z-index: 2; }
.dcell.is-picked::after { content: ""; position: absolute; inset: 0; clip-path: var(--hex-point); box-shadow: inset 0 0 0 3px #fff; }

/* o recibo: a conta inteira da venda escolhida */
.receipt {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.03);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px;
}
@media (min-width: 700px) { .receipt { border-top: 0; border-left: 1px solid rgba(255,255,255,.07); } }
.receipt__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9C9086; }
.receipt__prod { font-size: 14px; font-weight: 600; color: var(--ink-on-dark); line-height: 1.25; margin-bottom: 6px; }
.receipt__line { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.08); opacity: 0; transform: translateX(6px); animation: line-in .35s var(--ease) forwards; }
.receipt__line { font-size: 12px; }
.receipt__line b { font-family: var(--font-mono); font-weight: 500; color: #E6DDD2; white-space: nowrap; }
.receipt__line--total { border-bottom: 0; margin-top: 4px; padding: 10px 10px; border-radius: 8px; background: rgba(232,148,15,.14); }
.receipt__line--total span { color: var(--amber-300); font-weight: 600; }
.receipt__line--total b { color: var(--amber-400); font-weight: 700; font-size: 15px; }
.receipt__line--total.is-loss b { color: #E07A6C; }
@keyframes line-in { to { opacity: 1; transform: none; } }

/* =========================================================
   PAINEL
   ========================================================= */

.panel {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--mute-on-dark);
  padding: clamp(72px, 10vw, 120px) 0;
}
.panel__comb { opacity: .05; }
.panel .wrap { position: relative; }
.panel__h { color: var(--ink-on-dark); }

.dash { margin-top: 44px; }
.dash__kpis { display: grid; gap: 1px; background: rgba(255,255,255,.07); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 760px) { .dash__kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { background: var(--night); padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.kpi__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute-on-dark); }
.kpi__value {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -.02em; line-height: 1.1;
  color: #E6DDD2; font-variant-numeric: tabular-nums;
}
.kpi__foot { font-size: 12px; color: #9C9086; }
.kpi--gold .kpi__value { color: var(--amber-400); font-weight: 700; }

.dash__row { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 860px) { .dash__row { grid-template-columns: 1fr 1.1fr; } }
.dash__card { background: var(--dark-card); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-card); padding: 22px 24px; }
.dash__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute-on-dark); margin-bottom: 18px; }
.dash__note { margin-top: 14px; font-size: 12px; color: #9C9086; }

/* potes de mel borbulhando */
.jars { display: flex; justify-content: space-around; gap: 16px; height: 220px; }
.jar { flex: 1; max-width: 86px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jar__glass {
  position: relative; flex: 1; width: 100%;
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 12px 12px 14px 14px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.jar__glass::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 7px; width: 3px; border-radius: 3px; background: rgba(255,255,255,.14); }
/* o mel já tem a altura final; sobe de baixo (transform, sem mexer em layout) */
.jar__honey {
  position: relative; width: 100%; height: var(--lvl);
  background: var(--honey);
  transform: translateY(calc(100% + 12px));
  transition: transform 1.6s cubic-bezier(.2, .75, .25, 1);
}
.dash.is-live .jar__honey { transform: translateY(0); }
/* superfície ondulando */
.jar__honey::before {
  content: "";
  position: absolute; left: 0; bottom: calc(100% - 2px);
  width: 200%; height: 8px;
  background: radial-gradient(10px 6px at 10px 8px, #FFD37A 98%, transparent) 0 0 / 20px 8px repeat-x;
  animation: jar-wave 2.4s linear infinite;
}
@keyframes jar-wave { to { transform: translateX(-50%); } }
.jar__honey i {
  position: absolute; bottom: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid rgba(255, 244, 214, .8);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(255,255,255,.05) 60%);
  opacity: 0;
  animation: jar-bubble 3.6s ease-in infinite;
}
.jar__honey i:nth-child(1) { left: 18%; animation-delay: .2s; }
.jar__honey i:nth-child(2) { left: 58%; width: 5px; height: 5px; animation-delay: 1.1s; }
.jar__honey i:nth-child(3) { left: 38%; width: 9px; height: 9px; animation-delay: 1.9s; }
.jar__honey i:nth-child(4) { left: 72%; animation-delay: 2.6s; }
.jar__honey i:nth-child(5) { left: 28%; width: 4px; height: 4px; animation-delay: 3.1s; }
@keyframes jar-bubble {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .6; }
  100% { transform: translateY(-120px) scale(1.1); opacity: 0; }
}
.jar__glass b {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  text-align: center; font-family: var(--font-mono); font-size: 13px; color: #2B1A0E;
}
.jar[style*="7%"] .jar__glass b { bottom: auto; top: 50%; color: var(--amber-300); }
.jar__tag {
  padding: 2px 10px; clip-path: var(--hex-7);
  background: var(--amber-500); color: #2B1A0E;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.jar__tag--soft { background: #5A4C40; color: #E6DDD2; }

/* mais vendidos: barras de mel escorrendo */
.top { list-style: none; margin: 0; padding: 0; counter-reset: top; display: flex; flex-direction: column; gap: 10px; }
.top li {
  counter-increment: top;
  position: relative;
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px; color: var(--ink-on-dark);
}
.top li::before { content: counter(top, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--amber-400); position: relative; z-index: 1; }
.top li::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: var(--w);
  background: linear-gradient(90deg, rgba(232,148,15,.28), rgba(232,148,15,.08));
  border-right: 2px solid rgba(242, 161, 28, .7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.25, 1, .4, 1);
}
.dash.is-live .top li::after { transform: scaleX(1); }
.top li:nth-child(2)::after { transition-delay: .12s; }
.top li:nth-child(3)::after { transition-delay: .24s; }
.top li:nth-child(4)::after { transition-delay: .36s; }
.top li span, .top li b { position: relative; z-index: 1; }
.top li b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--mute-on-dark); }

/* =========================================================
   MANIFESTO (mel, com eco no texto)
   ========================================================= */

.manifesto {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 40%, #F6A928 0%, var(--amber-500) 55%, #D2820B 100%);
  padding: clamp(80px, 14vw, 170px) 24px;
  text-align: center;
}
.manifesto__big {
  position: relative;
  font-size: clamp(2.8rem, 11vw, 8.6rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .88;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    .04em .04em 0 rgba(255,255,255,.28),
    .08em .08em 0 rgba(255,255,255,.14),
    .12em .12em 0 rgba(255,255,255,.07);
}
.manifesto__big span { display: block; }
.manifesto__small {
  margin-top: 30px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: #3A2408;
}

/* =========================================================
   O QUE MUDA
   ========================================================= */

.section-block { padding: clamp(72px, 10vw, 112px) 0; }
.section-block--sand { background: var(--sand-100); }
.section-block--dark { background: var(--dark-surface); color: #C9BFB4; }
.section-block--dark .block-h, .section-block--dark h3 { color: #fff; }
.section-block--dark .block-lede { color: #B6ABA0; }

.vs { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 800px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs__col { border-radius: var(--r-card); padding: 26px 28px; }
.vs__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vs__col li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.45; }
.vs__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.vs__col--old { background: #fff; border: 1px solid var(--line); color: var(--text-mute); }
.vs__col--old .vs__kicker { color: var(--gray-600); }
.vs__col--old li { text-decoration: line-through; text-decoration-color: rgba(194, 74, 60, .45); }
.vs__col--old li::before {
  content: "×"; position: absolute; left: 4px; top: -2px;
  font-size: 18px; font-weight: 700; color: var(--bad);
}
.vs__col--new { background: var(--night); color: #E6DDD2; }
.vs__col--new .vs__kicker { color: var(--amber-300); }
.vs__col--new li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 18px;
  clip-path: var(--hex-point);
  background: var(--amber-500);
}

.feats { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 800px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.feat__hex { display: block; width: 26px; height: 30px; clip-path: var(--hex-point); background: var(--amber-100); position: relative; margin-bottom: 14px; }
.feat__hex::after { content: ""; position: absolute; inset: 40% 0 0; background: var(--amber-500); }
.feat h3 { font-size: 18px; letter-spacing: -.01em; margin-bottom: 6px; }
.feat p { font-size: 14.5px; color: var(--text-soft); }

/* ---------- Sasa: a conversa de demonstração ---------- */

.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; }

.sasa-intro { max-width: 640px; }
.sasastage {
  display: grid;
  gap: 8px;
  align-items: end;
  margin-top: 36px;
}
@media (min-width: 860px) {
  .sasastage { grid-template-columns: 260px minmax(0, 620px); gap: 28px; }
}
.sasastage__img {
  width: 220px; height: auto;
  justify-self: center;
  filter: drop-shadow(0 18px 30px rgba(43, 33, 24, .2));
  transition: opacity .2s var(--ease);
}
@media (min-width: 860px) { .sasastage__img { width: 260px; } }

.sasachat {
  --cc: 16px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 16px;
  filter: drop-shadow(1.25px 0 0 rgba(232,148,15,.6)) drop-shadow(-1.25px 0 0 rgba(232,148,15,.6))
          drop-shadow(0 1.25px 0 rgba(232,148,15,.6)) drop-shadow(0 -1.25px 0 rgba(232,148,15,.6))
          drop-shadow(0 20px 28px rgba(43, 33, 24, .16));
}
/* o painel: octógono de cantos cortados, com a faixa de mel no topo */
.sasachat::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--amber-400), var(--amber-500)) top / 100% 4px no-repeat, #fff;
  clip-path: polygon(var(--cc) 0, calc(100% - var(--cc)) 0, 100% var(--cc), 100% calc(100% - var(--cc)),
    calc(100% - var(--cc)) 100%, var(--cc) 100%, 0 calc(100% - var(--cc)), 0 var(--cc));
}
/* o rabinho aponta pra Sasa (esquerda no computador, cima no celular) */
.sasachat::after {
  content: ""; position: absolute; z-index: -1; background: #fff;
  left: -15px; bottom: 60px; width: 30px; height: 24px;
  clip-path: polygon(0 60%, 100% 0, 100% 100%);
}
@media (max-width: 859px) {
  .sasachat::after { left: 50%; top: -15px; bottom: auto; width: 26px; height: 18px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
}

.sasachat__head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.sasachat__head b { color: var(--text); font-size: 15px; }
.sasachat__dot { width: 12px; height: 13px; clip-path: var(--hex-point); background: var(--amber-500); }
.sasachat__tag { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-mute); }

.sasachat__log {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 300px; min-height: 120px;
  overflow-y: auto;
  padding: 14px 2px 10px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.sbub {
  max-width: 88%;
  padding: 10px 14px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--text);
  animation: sbub-in .32s var(--ease) both;
}
.sbub b { color: var(--text); }
.sbub--her {
  align-self: flex-start;
  background: var(--sand-100);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sbub--me {
  align-self: flex-end;
  background: var(--amber-100);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  font-weight: 500;
}
@keyframes sbub-in { from { opacity: 0; transform: translateY(6px); } }
.sdots { display: inline-flex; gap: 5px; padding: 4px 0; }
.sdots i { width: 9px; height: 10px; clip-path: var(--hex-point); background: var(--amber-600); opacity: .55; animation: sdrip 1.1s ease-in-out infinite; }
.sdots i:nth-child(2) { animation-delay: .15s; }
.sdots i:nth-child(3) { animation-delay: .3s; }
@keyframes sdrip { 30% { transform: translateY(-5px); opacity: 1; } }

.sasachat__chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 0 12px; }
.schip {
  position: relative; isolation: isolate;
  padding: 7px 15px;
  font-size: 13px; font-weight: 600;
  color: var(--amber-700);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur) var(--ease), transform .15s var(--ease);
}
.schip::before, .schip::after { content: ""; position: absolute; z-index: -1; transition: background var(--dur) var(--ease); }
.schip::before { inset: 0; background: var(--amber-300); clip-path: var(--hex-14); }
.schip::after { inset: 1.5px; background: #fff; clip-path: polygon(13.2px 0, calc(100% - 13.2px) 0, 100% 50%, calc(100% - 13.2px) 100%, 13.2px 100%, 0 50%); }
.schip:hover { color: var(--text); transform: translateY(-1px); }
.schip:hover::before { background: var(--amber-500); }
.schip:hover::after { background: var(--amber-100); }
.schip--go { color: #2B1A0E; }
.schip--go::after { background: linear-gradient(180deg, #F6AE3A, var(--amber-500)); }
.schip--go:hover::after { background: linear-gradient(180deg, #F8B94F, #EE9C1C); }

.sasachat__form {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 5px 5px 14px;
  background: var(--sand-50);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color var(--dur) var(--ease);
}
.sasachat__form:focus-within { border-color: var(--amber-500); }
.sasachat__form input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text); padding: 8px 0; }
.sasachat__form input:focus { outline: none; }
.sasachat__form button {
  width: 38px; height: 42px; flex: none;
  display: grid; place-items: center;
  color: #2B1A0E;
  background: linear-gradient(180deg, #F6AE3A, var(--amber-500));
  clip-path: var(--hex-point);
}
.sasachat__form button:hover { filter: brightness(1.06); }
:root[data-motion="off"] .sbub, :root[data-motion="off"] .sdots i { animation: none; }

/* ---------- planos ---------- */

.lcycle { display: inline-flex; gap: 3px; margin-top: 28px; background: rgba(255,255,255,.07); border-radius: 10px; padding: 3px; }
.lcycle__opt { padding: 9px 18px; font-size: 13px; font-weight: 600; color: #C9BFB4; border-radius: 7px; transition: background var(--dur), color var(--dur); }
.lcycle__opt span { display: inline-block; margin-left: 7px; font-size: 11px; font-weight: 600; color: var(--amber-500); background: rgba(232,148,15,.16); padding: 2px 7px; border-radius: 999px; }
.lcycle__opt.is-active { background: #fff; color: var(--bark-900); }
.lcycle__opt.is-active span { color: var(--amber-700); background: var(--amber-100); }

.plans { display: grid; gap: 16px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan { position: relative; display: flex; flex-direction: column; background: #1B1611; border: 1.5px solid rgba(255,255,255,.12); border-radius: var(--r-card); padding: 26px 24px; transition: transform var(--dur) var(--ease), border-color var(--dur); }
.plan:hover { transform: translateY(-3px); border-color: rgba(242,194,101,.4); }
.plan--highlight { border-color: var(--amber-500); box-shadow: 0 0 0 3px rgba(232,148,15,.22); }
.plan__badge { position: absolute; top: -12px; left: 24px; background: var(--amber-500); color: #2B1A0E; font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 999px; }
.plan__name { font-size: 20px; margin: 4px 0 2px; }
.plan__hint { font-size: 12.5px; color: #9C9086; margin: 0 0 16px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; }
.plan__price b { font-family: var(--font-mono); font-size: 30px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.plan__price span { font-size: 13px; color: #9C9086; }
.plan__trial { font-size: 12.5px; color: var(--amber-400); font-weight: 600; min-height: 1.4em; margin: 0 0 18px; }
.plan__feat { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.plan__feat li { font-size: 13.5px; color: #C9BFB4; padding-left: 22px; position: relative; }
.plan__feat li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5L4.2 7.5L11 1' fill='none' stroke='%23E8940F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* =========================================================
   FECHAMENTO (claro, favo branco — o respiro final)
   ========================================================= */

.closer {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 12vw, 140px) 0;
  background: radial-gradient(60% 70% at 50% 30%, #fff, var(--sand-100));
  text-align: center;
}
.closer__comb {
  opacity: .5;
  filter: grayscale(1) brightness(1.6);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, transparent 30%, #000 90%);
  mask-image: radial-gradient(60% 60% at 50% 40%, transparent 30%, #000 90%);
}
.closer__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.closer__mark { position: relative; width: 120px; }
.closer__mark img { width: 120px; height: auto; filter: drop-shadow(0 18px 24px rgba(201,122,12,.3)); }
.closer__bee { position: absolute; top: 18px; right: -78px; width: 58px; }
.closer__h {
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  max-width: 14ch;
}
.closer__h span { color: var(--amber-700); }
.closer__mkts {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #9C5C08;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px;
}
.closer__mkts i { width: 5px; height: 6px; clip-path: var(--hex-point); background: var(--amber-500); }

/* ---------- rodapé ---------- */

.lfoot { background: var(--night); padding: 28px 0; }
.lfoot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.lfoot__mark { opacity: .8; }
.lfoot__copy { font-size: 12.5px; color: #9C9086; flex: 1 1 240px; }
.lfoot__links { display: flex; gap: 18px; }
.lfoot__links a { font-size: 12.5px; color: #9C9086; }
.lfoot__links a:hover { color: #fff; }

/* =========================================================
   A ABELHA (desenho em /assets/bee.js)
   ========================================================= */

.bee-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bee__wing {
  transform-box: view-box;
  transform-origin: 70px 36px;
  animation: bee-flap .075s linear infinite alternate;
}
.bee__wing--back { animation-delay: -.03s; opacity: .85; }
@keyframes bee-flap {
  from { transform: rotate(-6deg) scaleY(1); }
  to   { transform: rotate(10deg) scaleY(.45); }
}
.closer__bee { animation: bee-hover 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 4px rgba(43,33,24,.25)); }
@keyframes bee-hover {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50%      { transform: translate(-6px, -8px) rotate(2deg); }
}

/* ---------- entrada ao rolar ---------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- animações desligadas (Perfil do app ou sistema) ---------- */

:root[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
:root[data-motion="off"] .scrap,
:root[data-motion="off"] .hive__drops path,
:root[data-motion="off"] .hive__wave,
:root[data-motion="off"] .bee__wing,
:root[data-motion="off"] .closer__bee,
:root[data-motion="off"] .jar__honey::before,
:root[data-motion="off"] .jar__honey i,
:root[data-motion="off"] .dcell,
:root[data-motion="off"] .dcell::before,
:root[data-motion="off"] .receipt__line,
:root[data-motion="off"] .dtable tbody tr.row-in { animation: none !important; }
:root[data-motion="off"] .receipt__line { opacity: 1; transform: none; }
:root[data-motion="off"] .jar__honey i { display: none; }
:root[data-motion="off"] .hero__word { transition: none; }

@media (max-width: 599px) {
  .hive { padding-top: 0; }
  .hive__counter { position: static; align-items: flex-start; text-align: left; margin-top: 8px; }
  .jars { height: 180px; }
  .demo-comb__grid { --c: 76px; }
}

/* ---------- aviso de cookies ---------- */
.cookies {
  position: fixed; z-index: 60;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 560px; margin-left: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 16px 18px;
  background: var(--dark-card); color: var(--ink-on-dark);
  border: 1px solid var(--dark-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  font-size: 14px; line-height: 1.5;
}
.cookies[hidden] { display: none; }
.cookies p { flex: 1 1 260px; margin: 0; }
.cookies a { color: var(--amber-300); }
.cookies__acts { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cookies__no { background: none; border: 0; color: var(--ink-on-dark); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
.cookies__no:hover { color: var(--amber-300); }