/* Page CSS: only what sits inside a visual, the app-frame recipe and one --p-h per card group. */

/* skip link: first child of the header's .wrap, hidden until focused */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { width: auto; height: auto; clip-path: none; padding: var(--s-2) var(--s-3); background: var(--bg); z-index: 20; }
.nav__logo { display: inline-flex; align-items: center; gap: var(--s-2); }
.logo-marca { flex: none; border-radius: 7px; }
.logo-nome { font-family: var(--font-display); font-size: 19px; letter-spacing: .1em; line-height: 1; }

/* Tranco: botões com o raio do app (6px) e o fundo das artes no amarelo do kit, com a faixa zebrada */
html[data-buttons] { --r-btn: 6px; }
html[data-ground="sage"] { --ground-bg: #ffc21a; --ground-surface: #ffd65c; --ground-ink: #17181a; --ground-muted: #4a3a00; --ground-accent: #e0a800; }
.zebra, .hero__art > div.zebra { position: absolute; inset: 0 0 auto; height: 14px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #17181a 0 14px, #ffc21a 14px 28px); }

/* um print do app num celular grafite (prints reais, sem a barra de status) */
.tela { margin: 0; background: #17181a; padding: 9px; border-radius: 34px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 30px 70px -28px rgb(0 0 0 / .55); }
.tela img { display: block; width: 100%; height: auto; border-radius: 26px; }

/* hero art: the sage lit ground with one soft light and a fine grain (the page's one effect) */
.hero__art { background:
    radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface) 80%, white), transparent 70%),
    radial-gradient(60% 50% at 90% 100%, color-mix(in oklab, var(--ground-bg) 80%, var(--ground-accent)), transparent 70%),
    var(--ground-bg); }
.hero__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__proof { font-size: var(--t-small); color: var(--muted); }

/* topo: a tela inicial, cortada pela base da arte, e a de áudio por cima no canto */
/* figure.: o CSS do cursor-spotlight (carregado depois) põe position: relative nos filhos da arte */
.hero__art > figure.ly-piece--main.tela { position: absolute; width: 300px; z-index: 1; border-radius: 34px 34px 0 0; padding-bottom: 0; }
.hero__art > figure.ly-piece--main.tela img { border-radius: 26px 26px 0 0; }
.hero__art > img.hero__parrudo { position: absolute; right: 8px; bottom: 24px; width: 230px; height: auto; z-index: 2; }
@media (max-width: 1023px) { .hero__art > img.hero__parrudo { right: 0; width: 170px; } }
@media (max-width: 639px) { .hero__art > img.hero__parrudo { display: none; } }
@media (max-width: 639px) { .hero__art > figure.ly-piece--main.tela { left: 50%; width: min(270px, calc(100% - 64px)); transform: translateX(-50%); } }

/* app-frame (sections-library.md, the whole recipe) */
.relatorio__p { margin: 0; }
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
.app .ui-doc { width: 100%; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* relatório: o editor de verdade no lugar da lista */
.app > .app__pane--tela { background: var(--ground-bg); display: grid; justify-items: center; padding-top: var(--s-7); }
.app > .app__pane--tela::after { display: none; }
.tela--painel { width: min(300px, 86%); border-radius: 34px 34px 0 0; padding-bottom: 0; align-self: start; }
.tela--painel img { border-radius: 26px 26px 0 0; }

/* the feature group */
#recursos .panel { --p-h: 300px; }
/* card de áudio: só o pedaço da gravação (onda, tempo e botão) */
.tela--recorte { position: absolute; left: 50%; top: 28px; width: 300px; height: 360px; overflow: hidden; transform: translateX(-50%);
  border-radius: 34px 34px 0 0; padding-bottom: 0; }
.tela--recorte img { margin-top: -268px; border-radius: 0; }

/* aprovação: o RDO assinado e, por cima, o convite do fiscal */
.tela--assina { position: absolute; left: 12%; top: 48px; width: 270px; border-radius: 34px 34px 0 0; padding-bottom: 0; }
.tela--assina img { border-radius: 26px 26px 0 0; }
.tela--convite { position: absolute; right: 6%; bottom: 32px; width: 240px; border-radius: 22px; z-index: 1; }
@media (max-width: 639px) { .tela--assina { left: 50%; transform: translateX(-50%); width: 230px; } .tela--convite { display: none; } }
.tela--convite img { border-radius: 14px; }

/* plans: subgrid rows so buttons and lines align from 1024 */
@media (min-width: 1024px) { .planos > .card--plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; } }
.plano__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.plano__lista li { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.planos .price { margin: 0; }

/* approval split */
.aprovacao__texto { display: grid; gap: var(--s-5); align-content: start; }
.aprovacao__texto > * { margin: 0; }
.aprovacao__fatos { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.aprovacao__fatos li { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.perguntas__p { margin-top: var(--s-5); }

/* the PDF fills the open pane of the app frame (the fragment is a 440px card on its own) */
.app .ui-doc { width: 100%; padding-right: 0; }
.app .ui-doc__page { width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: var(--s-6) var(--s-7); font-size: 15px; }
.app .ui-doc__text { font-size: 15px; line-height: 1.6; }
#aprovacao .frame--split { --ratio: 100%; }

/* a phone: the stacked content is taller than a screen, so sections grow instead of overlapping the next
   (!important: system.css's phone rule carries a :not() and wins on specificity) */
@media (max-width: 639px) {
  main > :is(section, .section), footer.closing { height: auto !important; min-height: 100svh; }
  main > :is(section, .section) > :is(.wrap, .container), footer.closing > .wrap { height: auto; }
  main > :is(section, .section).g2 > .wrap { display: flex; flex-direction: column; row-gap: var(--s-8); }
  .hero__art { flex: none; height: 440px; }
  #relatorio .app.fill { flex: none; height: 560px; }
  #aprovacao .frame--split { height: 420px; }
  #recursos .panel { --p-h: 260px; }
  #recursos .wrap > .group + * { margin-top: var(--s-8); }
}


/* dark: our own palette, so the phone's browser uses it instead of inverting the page. Os prints e o PDF
   continuam claros: são as telas do app e o documento. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark;
  --p-bg: #121314; --p-surface: #1c1d1f; --p-ink: #f7f5f0; --p-muted: #bdbab2; --p-accent: #ffc21a; --p-accent-ink: #17181a;
  --p-inv-bg: #0b0b0c; --p-inv-surface: #17181a; }
/* no escuro a arte fica grafite e o amarelo vira só o brilho */
html[data-theme="dark"][data-ground="sage"] { --ground-bg: #17181a; --ground-surface: #2a2b2e; --ground-ink: #f7f5f0; --ground-muted: #bdbab2; --ground-accent: #ffc21a; }
[data-theme="dark"] .hero__art { background:
    radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface) 85%, white), transparent 70%),
    radial-gradient(60% 50% at 90% 100%, color-mix(in oklab, var(--ground-bg) 70%, var(--ground-accent)), transparent 70%),
    var(--ground-bg); }
[data-theme="dark"] .hero__art::after { mix-blend-mode: screen; opacity: .06; }
[data-theme="dark"] #aprovacao .frame--split { background: radial-gradient(80% 70% at 20% 0%, var(--ground-surface), transparent 70%), var(--ground-bg); }
/* the secondary button sits on the card, so it lifts from the card, not from the page */
html[data-theme="dark"] .planos .btn--secondary { background: color-mix(in oklab, var(--ink) 12%, var(--surface)); }
html[data-theme="dark"] .planos .btn--secondary:hover { background: color-mix(in oklab, var(--ink) 18%, var(--surface)); }
/* the white app screens get a shadow that reads on dark */
[data-theme="dark"] .footer--statement { --action: var(--p-action); --action-ink: var(--p-action-ink); }

/* the theme switch: a 44px round button beside the bar's button; in the phone's menu sheet, a row with its word */
.tema { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.tema:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.tema:active { transform: scale(.96); }
.tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tema__sol, [data-theme="dark"] .tema__lua { display: none; }
[data-theme="dark"] svg.tema__sol { display: block; }
[data-theme="dark"] span.tema__sol { display: inline; }
.tema__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1023px) {
  .nav.is-open .nav__actions .tema { order: 3; display: inline-flex; justify-content: center; gap: var(--s-2); width: 100%; height: 48px; border-radius: var(--r-btn); }
  .nav.is-open .nav__actions .tema__rotulo { position: static; width: auto; height: auto; clip-path: none; }
}