/* Accepted Boby landing, 2026-09-29. Last layer: layout, not a new visual theme. */
html { --header-height: 84px; scroll-padding-top: calc(var(--header-height) + 16px); }
.emerald-draft {
  --page-gutter: max(clamp(16px, 3.34vw, 48px), env(safe-area-inset-left), env(safe-area-inset-right));
  --section-space: clamp(64px, 7.65vw, 110px);
}
.emerald-draft .wrap { width: min(1280px, calc(100% - 2 * var(--page-gutter))); }
.emerald-draft .section { padding-block: var(--section-space); }
.emerald-draft :is(.hero, .demo-section, .trust-section, .pricing-layout, .faq-section, .benefit-cards) > * { min-width: 0; }
.emerald-draft :is(h2, h3, .result-record, .result-explanation, .model-credit) { overflow-wrap: anywhere; }
.emerald-draft .section-lead { max-width: 58ch; }
.emerald-draft :is(a, button, input, select, summary) { scroll-margin-block: calc(var(--header-height) + 20px) 24px; }
.emerald-draft :is(.section, #top, #recognition, #final) { scroll-margin-top: 12px; }
.emerald-draft .nav-cta-short { display: none; }
.emerald-draft .nav .button-small { white-space: nowrap; }
.emerald-draft .button { text-align: center; }
.emerald-draft .nav .button-small .nav-cta-full,
.emerald-draft .nav .button-small .nav-cta-short { font: inherit; }
.emerald-draft .mobile-navigation {
  max-height: calc(var(--visible-height, 100dvh) - var(--header-height) - 16px - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.emerald-draft .nav-links { flex-wrap: nowrap; }
.emerald-draft .nav { transition: box-shadow 320ms, padding 320ms; }
.emerald-draft .nav-links a { white-space: nowrap; }
.emerald-draft .hero-copy { container-type: inline-size; }
.emerald-draft .hero h1 { font-size: clamp(1.75rem, 10cqi, 4.25rem); }
.emerald-draft .hero-title-line { white-space: nowrap; }
.emerald-draft .hero .button { font-size: .875rem; }
.emerald-draft .phone-controls { gap: 8px; }
.emerald-draft .phone-steps { min-width: 0; }
.emerald-draft .phone-steps button { min-height: 44px; font-size: .75rem; padding-inline: 12px; gap: 5px; }
.emerald-draft .phone-pause { width: 44px; height: 44px; flex: 0 0 44px; }
.emerald-draft .hero-product figcaption { font-size: .6875rem; }
.emerald-draft .demo-surface { container-type: inline-size; width: 100%; }
.emerald-draft .example-buttons { gap: 8px; }
.emerald-draft .example-buttons button { min-height: 44px; font-size: .8125rem; padding-inline: 12px; }
.emerald-draft .demo-stage-label { font-size: .75rem; }
.emerald-draft .demo-heading { flex-wrap: wrap; gap: 10px; }
.emerald-draft .field-hint { font-size: .8125rem; }
.emerald-draft .review-grid :is(input, select) { font-size: 1rem; min-height: 48px; width: 100%; }
.emerald-draft .review-grid input { font-size: 1.125rem; }
.emerald-draft .review-actions .button { font-size: .875rem; }
.emerald-draft .text-button { min-height: 44px; }
.emerald-draft .demo-bottom { flex-wrap: wrap; gap: 8px 16px; font-size: .75rem; }
.emerald-draft .demo-privacy { font-size: .8125rem; }
.emerald-draft .demo-empty p span { font-size: .8125rem; }
.emerald-draft .benefit-visual { container-type: inline-size; }
.emerald-draft .macro-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emerald-draft .macro-dock { max-width: 100%; }
.emerald-draft .macro-dock span { flex: 1 1 auto; text-align: center; padding-inline: clamp(10px, 3cqi, 24px); }
.emerald-draft :is(.macro-period, .macro-dock span, .calendar-heading > span:last-child, .calendar-caption) { font-size: .6875rem; }
.emerald-draft .calendar-week { gap: clamp(3px, 1cqi, 6px); }
.emerald-draft .calendar-week > div { min-width: 0; padding-inline: 0; font-size: .6875rem; }
.emerald-draft .calendar-week b { font-size: clamp(.6875rem, 3.8cqi, .8125rem); }
.emerald-draft .benefit-visual figcaption { font-size: .6875rem; }
.emerald-draft .correction-card { padding: clamp(16px, 5cqi, 29px); }
.emerald-draft .correction-values { gap: clamp(8px, 3cqi, 15px); }
.emerald-draft .correction-values strong { font-size: clamp(2rem, 13cqi, 3.375rem); white-space: nowrap; }
.emerald-draft .control-visual { container-type: inline-size; }
.emerald-draft .control-receipt { padding: clamp(16px, 5cqi, 27px); }
.emerald-draft .control-expense > strong { font-size: clamp(2.5rem, 18cqi, 4.75rem); white-space: nowrap; }
.emerald-draft .control-visual figcaption { max-width: 100%; text-align: center; font-size: .6875rem; }
.emerald-draft .price-card { container-type: inline-size; width: 100%; }
.emerald-draft .price-card-top { flex-wrap: wrap; }
.emerald-draft .price-first-week { flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.emerald-draft .trial-invitation { font-size: clamp(.8125rem, 3.4cqi, 1rem); }
.emerald-draft .trial-week { padding: clamp(12px, 4cqi, 22px); }
.emerald-draft .trial-week > div { gap: clamp(3px, 1cqi, 7px); }
.emerald-draft .trial-week i { width: auto; min-width: 0; }
.emerald-draft .price-demo-link { font-size: .875rem; margin-top: 24px; }
.emerald-draft .faq-list details p { font-size: 1rem; }
.emerald-draft .footer-column a { min-height: 44px; font-size: .9375rem; }
.emerald-draft .footer-meta { flex-wrap: wrap; gap: 10px 24px; }
.emerald-draft .footer-panel { padding-bottom: max(30px, env(safe-area-inset-bottom)); }

/* Cards respond to their own column, including split desktop layouts. */
@container (max-width: 360px) {
  .emerald-draft .review-grid { grid-template-columns: 1fr; gap: 16px; }
  .emerald-draft #review-form { padding: 18px 16px; }
  .emerald-draft .review-actions > * { width: 100%; }
  .emerald-draft .demo-empty { align-items: start; }
  .emerald-draft .demo-empty p { font-size: .9375rem; }
  .emerald-draft .demo-empty p span { font-size: .8125rem; }
  .emerald-draft .price-demo-link { gap: 10px; padding-inline: 12px; }
  .emerald-draft .price-badge { font-size: .6875rem; }
  .emerald-draft .control-receipt-top { font-size: .75rem; }
}

/* Navigation switches before the label row becomes cramped. */
@media (max-width: 1024px) {
  .emerald-draft .nav-links { display: none; }
  .emerald-draft .nav-toggle:not([hidden]) { display: block; }
  .emerald-draft .nav > .button-small { margin-left: auto; }
  .emerald-draft .nav { gap: 12px; min-height: 56px; }
  .emerald-draft .site-header.is-scrolled .nav { padding-inline: 12px; }
}

/* Tablet: use readable panel widths instead of squeezing the desktop columns. */
@media (max-width: 960px) {
  .emerald-draft .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-block: 32px 64px; gap: 20px; }
  .emerald-draft .hero-copy { max-width: none; }
  .emerald-draft .hero-product { width: 100%; }
  .emerald-draft .phone-stage { height: 540px; }
  .emerald-draft .phone-detail { width: 148px; padding: 16px; bottom: 100px; left: -4%; }
  .emerald-draft .phone-detail strong { font-size: 36px; }
  .emerald-draft .hero-description { font-size: 1rem; }
  .emerald-draft .hero .actions { gap: 10px; }
  .emerald-draft .hero .button { min-height: 52px; padding-inline: 18px; }
  .emerald-draft :is(.demo-section, .trust-section, .pricing-layout, .faq-section) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .emerald-draft :is(.demo-surface, .price-card) { max-width: 680px; justify-self: center; }
  .emerald-draft .trust-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .emerald-draft .trust-section h2 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); }
  .emerald-draft .trust-section .section-lead { font-size: 1rem; }
  .emerald-draft .trust-details summary { font-size: 1rem; }
  .emerald-draft .trust-details details p { font-size: .9375rem; }
  .emerald-draft .trust-details { padding: 0; }
  .emerald-draft .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .emerald-draft .steps li { flex-direction: column; align-items: start; padding: 16px; gap: 12px; }
  .emerald-draft .steps small { font-size: .8125rem; }
  .emerald-draft .steps li > div { font-size: 1rem; }
  .emerald-draft .benefits .section-heading { grid-template-columns: 1fr; gap: 16px; }
  .emerald-draft .benefits .section-heading .section-lead { max-width: 58ch; }
  .emerald-draft .benefit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .emerald-draft .benefit-card { display: block; }
  .emerald-draft .benefit-card:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; display: grid; }
  .emerald-draft .benefit-card:first-child .benefit-visual { order: 2; }
  .emerald-draft .benefit-card:first-child .benefit-copy { padding: 0; }
  .emerald-draft .benefit-copy h3 { font-size: 1.375rem; }
  .emerald-draft .benefit-copy p { font-size: 1rem; }
  .emerald-draft .access-journey { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .emerald-draft .access-journey li { flex-direction: column; align-items: start; padding-block: 10px; gap: 12px; }
  .emerald-draft .access-journey li + li::before { display: none; }
  .emerald-draft .faq-list summary { font-size: 1.125rem; }
}

/* Phones and small tablets: one continuous reading column. */
@media (max-width: 719px) {
  .emerald-draft .hero { grid-template-columns: minmax(0, 1fr); padding-block: 28px 48px; gap: 24px; }
  .emerald-draft .hero h1 { max-width: none; margin-bottom: 22px; font-size: clamp(1.75rem, 9.85cqi, 3.875rem); }
  .emerald-draft .hero-title-accent { font-size: 1.4em; }
  .emerald-draft .hero-product { width: min(100%, 460px); }
  .emerald-draft .phone-stage { height: clamp(440px, 145vw, 580px); }
  .emerald-draft .phone-detail { display: none; }
  .emerald-draft .hero-note { font-size: .75rem; }
  .emerald-draft :is(.demo-section, .trust-section, .pricing-layout, .faq-section, .benefit-cards) { grid-template-columns: minmax(0, 1fr); }
  .emerald-draft .benefit-card:first-child { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .emerald-draft .benefit-card:first-child .benefit-visual { order: 0; }
  .emerald-draft .benefit-card:first-child .benefit-copy { order: 1; max-width: none; }
  .emerald-draft .benefit-visual { height: auto; min-height: 350px; padding: 28px 22px 52px; }
  .emerald-draft .visual-pattern { min-height: 345px; }
  .emerald-draft .visual-correction { min-height: 385px; }
  .emerald-draft .benefit-card:first-child .benefit-visual { min-height: 430px; padding: 28px 22px 52px; }
  .emerald-draft .macro-categories strong { font-size: 1.5rem; }
  .emerald-draft .macro-categories > div > span { font-size: .8125rem; }
  .emerald-draft .macro-balance > strong { font-size: clamp(3rem, 17cqi, 5rem); }
  .emerald-draft .calendar-total { font-size: clamp(3rem, 19cqi, 4.5rem); }
  .emerald-draft .benefit-copy p { font-size: 1rem; }
  .emerald-draft .benefit-detail { font-size: .8125rem; }
  .emerald-draft .availability-note { font-size: .8125rem; }
  .emerald-draft .control-visual { padding: 28px 22px 20px; }
  .emerald-draft .trust-section h2 { font-size: clamp(1.625rem, 5.7vw, 2.25rem); }
  .emerald-draft .trust-details details p { font-size: 1rem; }
  .emerald-draft .footer-main { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .emerald-draft .footer-about { grid-column: 1 / -1; }
  .emerald-draft .final-inner h2 { font-size: clamp(1.625rem, 5.5vw, 2.375rem); }
  .emerald-draft .final-inner h2 br { display: none; }
}

@media (max-width: 480px) {
  .emerald-draft { --page-gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .emerald-draft .site-header { padding-block: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
  .emerald-draft .nav { width: calc(100% - 2 * max(12px, env(safe-area-inset-left), env(safe-area-inset-right))); gap: 8px; min-height: 48px; }
  .emerald-draft .nav .brand img { width: clamp(98px, 28vw, 124px); }
  .emerald-draft .nav .button-small { min-height: 44px; font-size: .8125rem; padding-inline: 12px; gap: 8px; }
  .emerald-draft .nav .button-small .nav-cta-full { display: none; }
  .emerald-draft .nav .button-small .nav-cta-short { display: inline; }
  .emerald-draft .site-header.is-scrolled .nav { width: calc(100% - 2 * max(8px, env(safe-area-inset-left), env(safe-area-inset-right))); padding-inline: 8px; }
  .emerald-draft .mobile-navigation { left: 8px; right: 8px; padding: 8px 16px; }
  .emerald-draft .hero .actions, .emerald-draft .final-inner .actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .emerald-draft .hero .button, .emerald-draft .final-inner .button { width: 100%; font-size: .875rem; min-height: 52px; }
  .emerald-draft .hero-description { font-size: 1rem; gap: 6px; }
  .emerald-draft .phone-controls { gap: 6px; }
  .emerald-draft .phone-steps { flex: 1; display: flex; padding: 3px; }
  .emerald-draft .phone-steps button { flex: 1; padding-inline: 6px; font-size: .75rem; gap: 4px; }
  .emerald-draft .section h2 { font-size: clamp(1.5625rem, 6.65vw, 2rem); }
  .emerald-draft .section-lead { font-size: 1rem; line-height: 1.65; }
  .emerald-draft .steps { grid-template-columns: 1fr; gap: 4px; margin-block: 24px; }
  .emerald-draft .steps li { flex-direction: row; align-items: center; padding: 12px; gap: 14px; }
  .emerald-draft .steps li > div { font-size: .9375rem; }
  .emerald-draft .steps small { font-size: .8125rem; }
  .emerald-draft .demo-surface { padding: 20px 16px; }
  .emerald-draft .demo-heading-labels { flex-wrap: wrap; gap: 8px 12px; }
  .emerald-draft #expense-input { font-size: clamp(1.5rem, 7.5cqi, 2rem); }
  .emerald-draft .demo-empty { padding: 20px 14px; }
  .emerald-draft .demo-empty p { font-size: .9375rem; }
  .emerald-draft .demo-empty p span { font-size: .8125rem; }
  .emerald-draft .example-buttons button { font-size: .8125rem; }
  .emerald-draft .review-title, .emerald-draft .demo-result h3 { font-size: 1.25rem; }
  .emerald-draft .review-description, .emerald-draft .review-detail { font-size: .8125rem; }
  .emerald-draft .result-record { display: block; font-size: .8125rem; }
  .emerald-draft .result-totals { padding: 18px 14px; }
  .emerald-draft .result-totals strong { font-size: clamp(1.5rem, 8.5cqi, 2rem); }
  .emerald-draft .result-share p { font-size: .6875rem; }
  .emerald-draft .control-note span { font-size: .8125rem; }
  .emerald-draft .access-journey { grid-template-columns: 1fr; gap: 0; margin-block: 24px; }
  .emerald-draft .access-journey li { flex-direction: row; align-items: center; padding-block: 14px; gap: 16px; }
  .emerald-draft .price-card { padding: 28px 20px; }
  .emerald-draft .price { font-size: 6rem; }
  .emerald-draft .price-label { font-size: .9375rem; }
  .emerald-draft .trial-week i { height: 44px; font-size: 1rem; }
  .emerald-draft .price-options > div { padding-inline: 12px; }
  .emerald-draft .price-options strong { font-size: 1.5rem; white-space: nowrap; }
  .emerald-draft .faq-list summary { font-size: 1rem; padding-right: 44px; }
  .emerald-draft .footer-panel { padding-top: 36px; }
  .emerald-draft .footer-main { gap: 28px 16px; }
  .emerald-draft .footer-column a { font-size: .875rem; }
  .emerald-draft .footer-meta, .emerald-draft .footer-panel .model-credit { font-size: .75rem; }
}

/* Landscape and an opened keyboard must not trap navigation below the viewport. */
@media (max-height: 500px) and (min-width: 600px) {
  .emerald-draft .site-header { padding-block: 6px; }
  .emerald-draft .nav { min-height: 48px; }
  .emerald-draft .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding-block: 24px 40px; }
  .emerald-draft .phone-stage { height: clamp(320px, 85svh, 430px); }
  .emerald-draft .phone-detail { display: none; }
  .emerald-draft .phone-steps button { font-size: .6875rem; padding-inline: 6px; }
  .emerald-draft .hero .actions { gap: 8px; }
  .emerald-draft .hero .button { font-size: .8125rem; min-height: 48px; padding-inline: 16px; }
  .emerald-draft .hero-product figcaption { font-size: .6875rem; }
  .emerald-draft .mobile-navigation a { padding-block: 12px; min-height: 44px; }
}
@media (pointer: coarse) {
  .emerald-draft .button:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .emerald-draft .phone-detail, .emerald-draft .control-receipt, .emerald-draft .correction-card { transform: none; }
}