/* 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-flag { flex: none; }

/* 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); }

/* the phone: the RDO editor as the app draws it (src/ui/tema.json), cut by the frame's bottom */
.hero__art > .ly-piece--main.fone { width: 340px; z-index: 1; }
.fone { background: #fff; color: #161b20; border-radius: 28px 28px 0 0; padding: 18px 16px 0; height: 760px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 24px 60px -24px rgb(0 0 0 / .4); font: 400 14px/1.35 var(--font-text); }
.fone__top { display: flex; align-items: center; gap: 10px; }
.fone__voltar svg { width: 18px; height: 18px; fill: none; stroke: #161b20; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.fone__tit { display: grid; min-width: 0; flex: 1; }
.fone__tit b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fone__tit small { color: #50565d; font-size: 13px; }
.fone__pdf { font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px #cdd1d6; }
.fone__barra { display: grid; gap: 6px; margin: 16px 0 12px; font-size: 13px; color: #50565d; }
.fone__barra i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #1f2730 calc(var(--k) * 100%), #e2e5e8 0); }
.fone__acoes { display: flex; gap: 8px; margin-bottom: 8px; }
.fone__acoes > span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; }
.fone__copiar { box-shadow: inset 0 0 0 1px #cdd1d6; }
.fone__mic { background: #f7791a; color: #0f171f; }
.fone__mic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.fone__secoes { list-style: none; margin: 0; padding: 0; }
.fone__secoes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; padding: 11px 0; border-bottom: 1px solid #eef0f3; }
.fone__secoes li::before { content: ""; grid-row: 1 / 3; align-self: center; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #cdd1d6; }
.fone__secoes li.ok::before { box-shadow: none; background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.fone__secoes b { font-weight: 500; }
.fone__secoes span { color: #50565d; font-size: 13px; }

/* the small result card over the phone's lower-right edge */
.hero__art > .ly-piece--note { right: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
.d-card { background: #fff; color: #16181a; border-radius: 12px; padding: 14px 16px; font: 400 14px/1.4 var(--font-text); text-align: left;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 18px 44px -20px rgb(0 0 0 / .45); }
.d-card h5 { margin: 0 0 4px; font: 500 14px/1.3 var(--font-text); }
.d-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 13px; font-weight: 500; background: #e7f4ec; color: #17673f; white-space: nowrap; }
.d-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); }
.d-note__line:first-of-type { border-top: 0; }
.d-note__line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e7f4ec; color: #17673f; font-style: normal; font-size: 13px; font-weight: 500; }
.d-note__line i.warn { background: #fdf0dc; color: #8a5300; }
.d-note__line b { font-weight: 500; color: #16181a; }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { right: var(--s-4); bottom: var(--s-4); width: 270px; } }
@media (max-width: 639px) { .hero__art > .ly-piece--main.fone { left: 50%; width: min(320px, calc(100% - 32px)); 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; }
}

/* the feature group */
#recursos .panel { --p-h: 300px; }

/* 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); }
.assina { top: 56px; left: max(24px, calc(50% - var(--w) / 2)); width: min(var(--w), calc(100% - 48px)); }
.assina__folha { background: #fff; color: #161b20; border-radius: 12px; padding: 24px; font: 400 13px/1.45 var(--font-text);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 24px 60px -24px rgb(0 0 0 / .35); }
.assina__topo { display: flex; justify-content: space-between; align-items: center; color: #50565d; }
.assina__status { font-weight: 500; color: #92400e; background: #fef3c7; padding: 2px 8px; border-radius: 99px; }
.assina__linha { margin: 16px 0 0; }
.assina__linha b { font-weight: 500; font-size: 15px; }
.assina__bloco { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.assina__campo { display: grid; border-top: 0; }
.assina__traco { width: 100%; height: 56px; fill: none; stroke: #1f2730; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; border-bottom: 1px solid #a0a5ab; }
.assina__nome { margin-top: 6px; font-weight: 500; }
.assina__papel { color: #50565d; }
.assina__carimbo { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 6px 12px; border-radius: 6px; font-weight: 500; color: #15803d; box-shadow: inset 0 0 0 1.5px #15803d; }
.assina__carimbo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assina__muda { color: #50565d; }

.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%; }
#aprovacao .assina { top: 72px; }