:root {
  --bg: #fbf8f4;
  --surface: #ffffff;
  --ink: #2a2530;
  --muted: #6f6878;
  --line: #ece7e0;
  --accent: #4d7d69;
  --accent-soft: #e2efe8;
  /* The brand green is 4.4:1 on the page and 4:1 on its soft tint, under AA
     for text; words in green use this darker shade of it. */
  --accent-ink: #3d6a57;
  --rose: #e8b4b8;
  --sage: #7fb3a4;
  --peach: #e8a76b;
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; }
a { color: var(--accent-ink); }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
/* What the planner is, in the words people search, under the headline. */
.hero-what { margin: 10px 0 0; font-size: 1.05rem; font-weight: 600; }
.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 20px; }
section { padding-block: 56px; }
@media (min-width: 720px) { section { padding-block: 84px; } }

.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.brand { display: flex; white-space: nowrap; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav a.link { text-decoration: none; font-weight: 700; color: var(--muted); margin-left: 8px; padding: 10px 8px; }

/* inline-block, not flex: in a flex box every run of text around the price's
   <span> becomes its own column, and on a phone "Quero o meu por R$ 119,90
   por ano" broke into three narrow stacks. */
.btn { display: inline-block; text-align: center; text-wrap: balance; border-radius: 999px; padding: 14px 24px; font-weight: 800; text-decoration: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1rem; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 8px 24px rgba(77, 125, 105, 0.28); }
.btn.big { padding: 18px 32px; font-size: 1.1rem; }
.btn.block { display: block; width: 100%; }
.btn [data-price] { white-space: nowrap; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent-ink); }
.btn.outline { background: transparent; border: 2px solid var(--accent); color: var(--accent-ink); }

/* The seven days, next to every button that takes money. */
.assure { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; color: var(--accent-ink); }
.assure svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.center { text-align: center; }

.hero { display: grid; gap: 36px; align-items: center; padding-top: 24px; }
@media (min-width: 860px) { .hero { grid-template-columns: 1.1fr 0.9fr; gap: 56px; } }
.eyebrow { display: inline-block; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.hero p.lead { font-size: 1.2rem; margin: 18px 0 26px; max-width: 34rem; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .fine { margin-top: 6px; }

/* The screens on the landing page: the design boards rendered at 390px,
   shown in a phone-shaped frame. A tall screen is cut at the frame's height,
   top-aligned, so the page shows the part a visitor recognises first. */
/* min-width: 0 on the grid items: without it a grid track takes the image's
   intrinsic 390px as its minimum and the whole page overflows a phone.
   minmax(0, 1fr) on .shots for the same reason: a plain 1fr takes the
   frame's fixed 300px as its minimum, and two of them in half the page
   spill the second phone over the text beside it. */
.hero > *, .feature > *, .shots > * { min-width: 0; }
.shot { margin: 0 auto; width: 300px; max-width: 100%; }
.shot img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: cover; object-position: top; border-radius: 30px; border: 10px solid #1d1a22; background: #1d1a22; box-shadow: 0 30px 60px rgba(42, 37, 48, 0.25); }
.shot figcaption { text-align: center; margin-top: 12px; }
/* The tablet da casa is a landscape screen, not a phone. */
.shot.wide { width: 520px; }
.shot.wide img { max-height: none; border-radius: 22px; }
.shots { display: grid; gap: 28px; }
@media (min-width: 720px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* One section per thing the planner does: the words on one side, the screen
   on the other, sides swapping so the page does not read as a list. The
   swap is a class, not nth-of-type, so a section can move without flipping
   every one after it. */
.feature { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 56px; }
  .feature.swap .text { order: 2; }
}
.feature .text { max-width: 34rem; }
.feature h2 { margin-bottom: 14px; }

/* Everything the planner holds, one line each: two columns on a phone,
   four on a laptop, so the list reads as "all of it" at a glance. */
.tudo { text-align: center; }
.tudo .lead { max-width: 36rem; margin: 14px auto 32px; }
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
@media (min-width: 860px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.tiles li { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 16px; }
.tiles svg { display: block; width: 44px; height: 44px; padding: 10px; margin-bottom: 12px; border-radius: 14px; background: var(--accent-soft); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tiles b { display: block; font-size: 1rem; margin-bottom: 4px; }
.tiles span { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }

/* The calendars a person can bring in, standing where a screen stands in
   the other sections. */
.agendas { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 28px 22px; max-width: 420px; margin: 0 auto; width: 100%; box-shadow: 0 30px 60px rgba(42, 37, 48, 0.12); text-align: center; }
.agendas ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.agendas li { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; background: var(--bg); border-radius: 18px; padding: 12px 14px; }
.agendas img { grid-row: span 2; width: 52px; height: 52px; }
/* A white icon on a pale row needs the edge a phone's wallpaper gives it. */
.agendas img.white { border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.agendas b { align-self: end; }
.agendas li span { align-self: start; color: var(--muted); font-size: 0.9rem; }

.price { background: var(--surface); border: 2px solid var(--accent); border-radius: 24px; padding: 32px 28px; max-width: 460px; margin: 0 auto; text-align: center; }
.price .amount { font-size: 3rem; font-weight: 800; color: var(--accent); line-height: 1; }
.price .per { color: var(--muted); margin-bottom: 18px; }
.price ul { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; }
.price li { padding: 8px 0; border-top: 1px solid var(--line); }
.price li:first-child { border-top: 0; }
.price.monthly { margin-top: 16px; border-color: var(--line); padding: 22px 28px; }
.price.monthly .amount { font-size: 2rem; }
.price.monthly .per { margin-bottom: 6px; }
.price.monthly .btn { margin-top: 16px; }
#preco .subhead { margin: 8px 0 22px; }
.price .plan { margin-bottom: 8px; }
/* The full price, struck in red over the founding one. It is labelled as the
   price after launch, never as a "de" it was never charged at (CDC art. 37,
   docs/proposals/PRICING.md §3). */
.price .was { color: var(--muted); font-size: 0.95rem; margin-bottom: 4px; }
.price .was s { font-weight: 800; font-size: 1.25rem; text-decoration-color: #d64545; text-decoration-thickness: 2px; }
.price .was span { display: block; font-size: 0.85rem; }
.price .other { display: inline-block; margin-top: 4px; font-weight: 700; padding: 10px 0; }
.price .assure { display: block; }
.price .assure svg { display: inline; vertical-align: -4px; margin-right: 6px; }
.price .other + .small { margin-top: 2px; }
.price .amount + .per + .small { margin-bottom: 18px; }
.price ul { margin-top: 18px; }
.price .why { text-align: left; background: var(--accent-soft); border-radius: 14px; padding: 12px 14px; }
.price .rules { text-align: left; margin-top: 12px; }

/* The three things she already uses, side by side on a laptop. */
.porque h2, .passos h2, .share h2 { text-align: center; margin-bottom: 24px; }
.porque .cards { display: grid; gap: 14px; }
@media (min-width: 860px) { .porque .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.porque .cards div { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.porque .cards b { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.porque .cards p { color: var(--muted); font-size: 0.95rem; }

/* What happens after paying: three numbered steps. */
.passos ol { list-style: none; counter-reset: passo; padding: 0; margin: 0 auto; max-width: 860px; display: grid; gap: 14px; }
@media (min-width: 860px) { .passos ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
.passos li::before { content: counter(passo); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: grid; place-items: center; }
.passos li b { padding-top: 7px; }
.passos li span { color: var(--muted); font-size: 0.95rem; }

.share { text-align: center; }
.share h2 { margin-bottom: 18px; }
.share .small { margin-top: 14px; }

.faq h2 { margin-bottom: 20px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
/* The padding is on the summary, the part a finger can open, not on details. */
.faq summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; min-height: 48px; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0 0 14px; color: var(--muted); }

/* A phone: the visitor who arrived from an ad or a link in WhatsApp. The
   menu keeps "Preço" and "Entrar", the buttons take the whole width a thumb
   reaches, the last two sections drop their screens, and the others are cut
   shorter so the page is not six phones tall. */
@media (max-width: 559px) {
  section { padding-block: 40px; }
  .nav { padding: 14px 0; }
  .nav a.link[href="#cada-um"] { display: none; }
  .nav > div { white-space: nowrap; }
  .small { font-size: 0.95rem; }
  .eyebrow { font-size: 0.85rem; }
  /* The first screen is the headline, one button and as much of the app as
     fits: the second button only scrolls to what is already below, and the
     fine print is said again at the price. */
  .hero .cta .btn.outline, .hero .fine { display: none; }
  .hero { gap: 28px; padding-top: 12px; }
  .hero p.lead { font-size: 1.1rem; }
  .hero .cta { flex-direction: column; align-items: stretch; gap: 4px; }
  .hero .cta .btn { width: 100%; }
  .btn.big { padding: 16px 22px; }
  .feature { gap: 28px; }
  /* One column, icon on the left: two columns broke the longer titles. */
  .tiles { grid-template-columns: 1fr; gap: 10px; }
  .tiles li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; }
  #sem-sinal .shot, #montar .shot { display: none; }
  .tiles svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; margin: 0; }
  .shot { width: 280px; }
  .shot img { max-height: 520px; border-width: 8px; border-radius: 26px; }
  #diarista .shot img { max-height: 440px; }
  .shot.wide { width: 100%; }
  .shot.wide img { max-height: none; border-radius: 18px; }
  /* The father's and the daughter's screens side by side, swiped. */
  .shots { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
  .shots > * { scroll-snap-align: center; }
  /* The list repeats the tiles one screen above it. */
  .price ul { display: none; }
  .text a, .share a:not(.btn) { padding-block: 12px; }
  .price, .price.monthly { padding: 24px 18px; }
  .price .amount { font-size: 2.6rem; }
  .price.monthly .amount { font-size: 1.9rem; }
}

/* The buy bar (site.js §6): a phone only, and only while neither the hero's
   button nor the price card's is on screen. Never over the cookie banner:
   saying no to it must stay as easy to reach as anything on the page. */
.buybar { display: none; }
@media (max-width: 559px) {
  .buybar:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 248, 244, 0.94); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  html.consent-open .buybar { display: none; }
  .buybar .btn { padding: 14px 16px; box-shadow: none; }
}

footer { padding: 32px 0 48px; color: var(--muted); font-size: 0.9rem; }
footer a { display: inline-block; margin-right: 16px; padding-block: 10px; white-space: nowrap; }

/* install page */
.install-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; margin-top: 20px; }
.install-card h2 { font-size: 1.15rem; }
.install-card ol { padding-left: 22px; margin: 12px 0 0; }
.install-card li { margin: 10px 0; }
.install-card kbd { background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; font-family: inherit; font-weight: 800; }
.warn { background: #fff4e5; border: 1px solid #f3d9b1; border-radius: 16px; padding: 16px 18px; margin-top: 20px; }
/* The clauses that limit a buyer's rights, boxed at the top of /termos/: CDC
   art. 54 § 4º and Decreto 7.962 art. 4º I want them "com destaque". */
.destaque { background: var(--surface); border: 2px solid var(--accent); border-radius: 16px; padding: 16px 18px; margin-top: 20px; }
.destaque p { margin: 0; }
.destaque ul { margin: 10px 0 0; padding-left: 22px; }
.destaque li { margin-top: 8px; }
.urlbox { display: flex; gap: 8px; margin-top: 12px; }
.urlbox input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; }
.urlbox button { flex-shrink: 0; }
[data-only] { display: none; }
html[data-platform='ios-safari'] [data-only='ios-safari'],
html[data-platform='ios-other'] [data-only='ios-other'],
html[data-platform='ios-inapp'] [data-only='ios-inapp'],
html[data-platform='android'] [data-only='android'],
html[data-platform='android-inapp'] [data-only='android-inapp'],
html[data-platform='android-samsung'] [data-only='android-samsung'],
html[data-platform='desktop'] [data-only='desktop'],
html[data-platform='installed'] [data-only='installed'] { display: block; }
.show-all [data-only] { display: block; }

table.fees { width: 100%; border-collapse: collapse; margin-top: 16px; }
table.fees th, table.fees td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); }
table.fees th { color: var(--muted); font-size: 0.85rem; }

/* Cookie banner and its "Configurar" panel. Built by site.js, and only when a
   marketing tracker is configured. The three buttons share one style on
   purpose: refusing must weigh exactly what accepting does. */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; box-shadow: 0 18px 48px rgba(42, 37, 48, 0.22); max-height: calc(100vh - 24px); overflow-y: auto; }
.consent[hidden], .consent [hidden] { display: none; }
.consent-title { font-size: 1.05rem; margin-bottom: 6px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.consent-actions .btn { flex: 1 1 0; padding: 12px 16px; white-space: nowrap; }
@media (max-width: 480px) { .consent-actions { flex-direction: column; } .consent { padding: 16px; } }
.consent-prefs { margin-top: 12px; }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.consent-row > span > b, .consent-row > span > span { display: block; }
.consent-row input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.consent-row input:disabled { cursor: not-allowed; }
.consent .btn:focus-visible, .consent-row input:focus-visible, .consent a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Small Androids: "Preço" goes (the buy bar says it), and the big buttons
   stay on one line. */
@media (max-width: 400px) {
  .nav a.link[href="#preco"] { display: none; }
}
@media (max-width: 380px) {
  .btn.big { font-size: 1rem; padding-inline: 14px; }
}
/* The status line stays rendered while empty: a live region taken out of the
   accessibility tree may not announce what is written into it later. */
[data-lista-msg] { margin: 12px 0 0; }
[data-lista-msg]:empty { margin: 0; min-height: 0; }
[data-lista-msg].ok { color: var(--accent-ink); font-weight: 700; }

/* Guides read like an article, with app examples alongside the practical steps.
   Scope these rules because site.css also dresses the landing and help. */
.guide-page .nav { gap: 12px; }
.guide-page .brand { min-width: 0; white-space: normal; line-height: 1.25; }
.guide-page .brand img { flex: none; }
.guide-page .nav > .link { flex: none; margin-left: 0; }
.guide-page footer { margin-top: 64px; border-top: 1px solid var(--line); }
.guide-page footer p { overflow-wrap: anywhere; }
.guide { max-width: 760px; padding-top: 24px; font-size: 1.125rem; line-height: 1.65; }
.guide section { padding-block: 0; scroll-margin-top: 24px; }
.guide h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.14; text-wrap: balance; }
.guide h2 { font-size: clamp(1.5rem, 3vw, 1.8rem); line-height: 1.25; text-wrap: balance; }
.guide h3 { font-size: 1.15rem; line-height: 1.35; }
.guide p + p, .guide ul + p { margin-top: 16px; }
.guide ul, .guide ol { padding-left: 24px; margin: 16px 0 0; }
.guide li { padding-left: 4px; margin-top: 10px; }
.guide li::marker { color: var(--accent-ink); }
.guide a { text-underline-offset: 3px; }
.guide a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 5px; border-radius: 4px; }
.guide-breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 0.875rem; color: var(--muted); margin-bottom: 28px; }
.guide-breadcrumb a { padding-block: 8px; }
.guide-header .eyebrow { margin-bottom: 18px; }
.guide .guide-lede { font-size: 1.25rem; line-height: 1.6; margin-top: 24px; }
.guide .guide-context { font-size: 1rem; line-height: 1.6; color: var(--muted); margin-top: 24px; }
.guide .guide-meta { font-size: 0.875rem; color: var(--muted); margin-top: 12px; }
.guide .guide-section { margin-top: 48px; }
.guide-section > h2 + p { margin-top: 18px; }
.guide .guide-summary { margin-top: 36px; border-left: 3px solid var(--accent); padding: 24px 28px; background: var(--accent-soft); border-radius: 0 16px 16px 0; }
.guide-summary h2 { font-size: 1.15rem; }
.guide-summary ul { margin-top: 12px; }
.guide-summary p { margin-top: 16px; }
.guide-summary > a { display: block; width: fit-content; padding-block: 8px; margin-top: 8px; font-weight: 700; }
.guide-steps li { padding-left: 8px; margin-top: 20px; }
.guide-schedule { margin-block: 28px 20px; }
.guide-schedule > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-block: 24px; }
.guide-schedule h3 { color: var(--accent-ink); }
.guide-schedule ul { margin: 0; }
.guide-schedule li:first-child { margin-top: 0; }
.guide-jumps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.guide-jumps a { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; font-weight: 700; text-decoration: none; background: var(--surface); }
.guide-jumps a:hover { border-color: var(--accent); }
.guide .guide-safety { font-size: 1rem; padding-left: 16px; border-left: 2px solid var(--line); margin-top: 24px; }
.guide .guide-age { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 28px; margin-top: 28px; }
.guide-age h2 { color: var(--accent-ink); font-size: 1.4rem; text-wrap: initial; }
.guide-age ul { margin: 0; }
.guide-age li:first-child { margin-top: 0; }
.guide .guide-download, .guide .guide-app { padding: 32px; border: 1px solid var(--line); border-radius: 20px; margin-top: 56px; }
.guide .guide-download { background: var(--surface); }
.guide .guide-app { background: var(--accent-soft); border-color: transparent; }
.guide .guide-label { display: block; color: var(--accent-ink); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px; }
.guide-download h2 + p, .guide-app h2 + p { margin-top: 18px; }
.guide .btn.primary { max-width: 100%; box-shadow: none; margin-top: 24px; }
.guide .guide-download-note { font-size: 0.875rem; color: var(--muted); margin-top: 12px; }
.guide-app-link { display: inline-block; padding-block: 10px; margin-top: 16px; font-weight: 800; }
.guide-example, .guide-demonstration { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 24px; align-items: start; }
.guide-example { margin-top: 28px; }
.guide .guide-example-tasks { margin: 0; }
.guide-example-tasks b { display: block; }
.guide-example-tasks li:first-child { margin-top: 0; }
.guide .guide-screen { min-width: 0; width: 100%; max-width: 280px; margin: 0 auto; }
.guide-screen picture { display: block; }
.guide-screen img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 18px; }
.guide-screen figcaption { margin-top: 12px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.guide-illustration { margin: 48px 0 0; }
.guide-illustration img { display: block; width: 100%; height: auto; border-radius: 20px; }
.guide-illustration figcaption { margin-top: 16px; font-weight: 700; text-align: center; text-wrap: balance; }
.guide-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.guide-related > a { display: inline-block; padding-block: 8px; font-weight: 700; }
.guide-index { max-width: 1000px; padding-top: 48px; }
.guide-index .guide-header { max-width: 720px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.guide-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; text-decoration: none; color: var(--ink); transition: border-color 150ms ease; }
.guide-card:hover { border-color: var(--accent); }
.guide-card:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.guide-card h2 { font-size: 1.6rem; text-wrap: initial; }
.guide-card p { font-size: 1rem; line-height: 1.6; color: var(--muted); margin: 16px 0 24px; }
.guide-card-link { color: var(--accent-ink); font-weight: 800; margin-top: auto; }
.guide-card-detail { font-size: 0.875rem; color: var(--muted); margin-top: 8px; }
.guide-index .guide-app { max-width: 720px; }
@media (max-width: 719px) {
  .guide { padding-top: 12px; font-size: 1.0625rem; line-height: 1.65; }
  .guide-index { padding-top: 28px; }
  .guide-breadcrumb { margin-bottom: 20px; }
  .guide .guide-lede { font-size: 1.1875rem; margin-top: 20px; }
  .guide .guide-section { margin-top: 36px; }
  .guide .guide-summary { padding: 22px 20px; margin-top: 28px; }
  .guide-schedule > div, .guide .guide-age { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .guide .guide-age { margin-top: 24px; padding-top: 24px; }
  .guide .guide-download, .guide .guide-app { padding: 24px 20px; margin-top: 40px; }
  .guide-example, .guide-demonstration { grid-template-columns: minmax(0, 1fr); }
  .guide-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
  .guide-card { padding: 24px; }
  .guide-page footer { margin-top: 48px; }
}
.prelaunch-notice { margin-bottom: 22px; }
@media (max-width: 600px) {
  #lista .urlbox { flex-direction: column; }
}