@font-face { font-family: Lato; src: url('fonts/lato-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Lato; src: url('fonts/lato-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
.symbol-library { position: absolute; }
.wrap { width: min(var(--sp-content-width, 72rem), calc(100% - 3rem)); margin-inline: auto; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: var(--sp-text-display); line-height: var(--sp-line-display); letter-spacing: var(--sp-tracking-display); margin: 0 auto 1.5rem; font-weight: 700; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.1vw, 2.75rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.nav-shell { border-bottom: 1px solid var(--sp-color-border); }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; gap: .5rem; align-items: center; font-size: 1.25rem; font-weight: 700; text-decoration: none; letter-spacing: -.025em; }
.brand-icon { width: 1.6rem; height: 1.6rem; color: var(--sp-color-action); }
.site-header nav { display: flex; gap: 2rem; font-size: .875rem; }
.site-header nav a { color: var(--sp-color-secondary); text-decoration: none; padding-block: .75rem; }
.site-header nav a:hover { color: var(--sp-color-text); }
.header-cta { font-size: .875rem; }
.hero { padding-top: clamp(3rem, 5vw, 4.5rem); text-align: center; }
.hero h1 { max-width: 1000px; }
.hero-description { font-size: 1.125rem; line-height: 1.55; color: var(--sp-color-secondary); max-width: 60ch; margin: 0 auto 1.75rem; }
.hero-actions { display: flex; gap: var(--sp-space-3); justify-content: center; flex-wrap: wrap; }
.hero-actions .sp-button { min-height: 48px; padding-inline: 1.5rem; }
.product-section { margin-top: var(--sp-space-8); scroll-margin-top: 1rem; }
.product-context { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .875rem; margin-bottom: var(--sp-space-4); }
.capture-tabs { display: flex; gap: .25rem; flex-wrap: wrap; padding: .25rem; background: var(--sp-color-subtle); border-radius: var(--sp-radius-control); }
.capture-tab { background: transparent; color: var(--sp-color-secondary); border: 1px solid transparent; border-radius: var(--sp-radius-control); padding: .65rem .9rem; min-height: var(--sp-control-height); font-size: .875rem; font-weight: 700; transition: none; }
.capture-tab:hover { color: var(--sp-color-text); background: var(--sp-color-subtle); }
.capture-tab[aria-pressed="true"] { color: var(--sp-color-text); background: var(--sp-color-panel); border-color: var(--sp-color-border); }
.real-product { margin: 0; padding: var(--sp-space-6); background: var(--sp-color-subtle); border-radius: var(--sp-radius-panel); }
picture { display: block; }
picture img { display: block; width: 100%; height: auto; }
.reservation-capture { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-space-16); padding: var(--sp-space-12); }
.reservation-capture picture { max-width: 340px; justify-self: center; }
.capture-explanation { max-width: 36ch; }
.capture-explanation h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.capture-explanation p { color: var(--sp-color-secondary); }
.product-caption { margin: 1.25rem 0 0; color: var(--sp-color-secondary); font-size: .8rem; text-align: center; }
.workflow { padding-block: var(--sp-section-space); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }
.section-heading h2 { margin-bottom: 0; }
.section-heading p { margin: 0; color: var(--sp-color-secondary); }
.workflow-list { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 3rem; padding: 0; margin: 0; }
.workflow-list li { border-top: 1px solid var(--sp-color-border); padding-top: 1.25rem; }
.step-number { color: var(--sp-color-secondary); font-size: .875rem; }
.workflow-list h3 { font-size: 1.25rem; margin: .7rem 0 .5rem; }
.workflow-list p { color: var(--sp-color-secondary); margin: 0; max-width: 32ch; }
.admin-section { background: var(--sp-color-canvas); border-top: 1px solid var(--sp-color-border); padding-block: var(--sp-section-space); }
.admin-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-space-12); }
.admin-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem var(--sp-space-24); align-items: start; }
.admin-copy h2 { margin-bottom: 0; }
.admin-copy > p { color: var(--sp-color-secondary); max-width: 40ch; grid-column: 1; }
.admin-benefits { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.admin-benefits div { padding: 1rem 0; border-top: 1px solid var(--sp-color-border); }
.admin-benefits dt { font-weight: 700; }
.admin-benefits dd { margin: .3rem 0 0; color: var(--sp-color-secondary); font-size: .9rem; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; padding-block: .6rem; }
.admin-copy .text-link { justify-self: start; grid-column: 1; }
.rules-capture { margin: 0; }
.rules-capture picture { border-radius: var(--sp-radius-panel); overflow: hidden; }
.rules-capture figcaption { color: var(--sp-color-secondary); font-size: .8rem; margin-top: 1rem; }
.control-section { background: var(--sp-color-canvas); color: var(--sp-color-text); padding-block: var(--sp-section-space); }
.control-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-space-24); align-items: center; }
.control-heading h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.control-heading > p { color: var(--sp-color-secondary); margin: 0 0 1.5rem; max-width: 40ch; }
.control-heading .sp-button--secondary { background: var(--sp-color-text); color: var(--sp-color-canvas); border-color: transparent; }
.control-heading .sp-button--secondary:hover { background: var(--sp-color-secondary); }
.control-heading .control-caption { margin: 2rem 0 0; font-size: .8rem; }
.reservation-evidence { margin: 0; max-width: 340px; justify-self: center; width: 100%; border-radius: var(--sp-radius-panel); overflow: hidden; }
.faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; padding-block: var(--sp-section-space); }
details { border-bottom: 1px solid var(--sp-color-border); }
summary { font-weight: 700; padding: 1.25rem 0; }
details p { color: var(--sp-color-secondary); padding-right: 1rem; }
.demo-shell { background: var(--sp-color-subtle); }
.demo-section { padding-block: var(--sp-section-space); display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.demo-section > div p { color: var(--sp-color-secondary); }
form { display: grid; gap: 1.25rem; }
.demo-section form { background: var(--sp-color-panel); padding: var(--sp-space-8); border: 1px solid var(--sp-color-border); border-radius: var(--sp-radius-panel); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
form > .sp-button { justify-self: start; }
.footer-shell { background: var(--sp-color-canvas); color: var(--sp-color-text); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: var(--sp-space-12); font-size: .8rem; }
.site-footer p { margin: 0; color: var(--sp-color-secondary); }
@media(max-width: 1000px) { .site-header nav { gap: 1rem; } .admin-copy, .control-layout { gap: var(--sp-space-12); } .faq, .demo-section { gap: 2.5rem; } }
@media(max-width: 760px) {
 .wrap { width: calc(100% - 2.5rem); }
 .site-header { min-height: 72px; gap: .75rem; }
 .site-header nav { display: none; }
 .header-cta { font-size: .75rem; padding: .65rem .75rem; }
 .header-cta svg { display: none; }
 .hero { padding-top: var(--sp-space-8); }
 .hero h1 { font-size: clamp(2.25rem, 7vw, 3rem); }
 .hero h1 br, .hero-description br { display: none; }
 .hero-description { font-size: 1rem; }
 .hero-actions .sp-button { padding-inline: 1rem; font-size: .875rem; }
 .product-section { margin-top: var(--sp-space-8); }
 .product-context { align-items: flex-start; flex-direction: column; gap: .5rem; }
 .capture-tab { padding-inline: .7rem; font-size: .8rem; }
 .real-product { padding: .5rem; }
 .reservation-capture { grid-template-columns: 1fr; gap: var(--sp-space-6); padding: var(--sp-space-6); }
 .capture-explanation { max-width: none; }
 .capture-explanation h2 br { display: none; }
 .reservation-capture picture { max-width: none; }
 .section-heading { display: block; margin-bottom: 2rem; }
 .section-heading p { margin-top: 1.25rem; }
 .workflow-list { grid-template-columns: 1fr; gap: 1.5rem; }
 .workflow-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .25rem .75rem; }
 .step-number { grid-row: span 2; padding-top: .4rem; }
 .workflow-list h3 { margin: 0; }
 .workflow-list p { max-width: none; }
 .admin-copy, .control-layout, .faq, .demo-section { grid-template-columns: 1fr; gap: var(--sp-space-8); }
 .admin-copy > *, .admin-copy .text-link, .admin-benefits { grid-column: auto; grid-row: auto; }
 .admin-copy > p { margin: 0; }
 .rules-capture picture { max-width: 383px; margin: auto; }
 .reservation-evidence { max-width: 340px; }
 .demo-section form { padding: var(--sp-space-6); }
 .form-grid { grid-template-columns: 1fr; }
 .site-footer { align-items: flex-start; flex-direction: column; }
}
@media(max-width: 360px) { .wrap { width: calc(100% - 2rem); } .brand { font-size: 1.1rem; } .hero-actions { flex-direction: column; } .demo-section form, .reservation-capture { padding: var(--sp-space-4); } }

/* Stable capture stage: image switches do not move the following sections. */
.capture-stage { position: relative; height: clamp(420px, 44vw, 620px); border-radius: var(--sp-radius-panel); background: var(--sp-color-subtle); }
.capture-stage > figure { position: absolute; inset: 0; }
.capture-stage .real-product > picture { height: 100%; }
.capture-stage .real-product > picture img { width: 100%; height: 100%; object-fit: contain; }
.capture-stage .reservation-capture { gap: var(--sp-space-8); padding: var(--sp-space-8); }
.capture-stage .reservation-capture > picture { height: 100%; width: 100%; max-width: none; min-height: 0; }
.capture-stage .capture-explanation h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
.product-caption { min-height: 2.5em; }
.demo-agenda { list-style: none; margin: var(--sp-space-8) 0 0; padding: 0; max-width: 40ch; }
.demo-agenda li { padding-block: var(--sp-space-3); border-top: 1px solid var(--sp-color-border); font-size: .9rem; }
.site-header nav a, .text-link { text-decoration-color: var(--sp-color-control-border); }
@media (hover: hover) and (pointer: fine) {
 .sp-button .sp-icon, .text-link .sp-icon { transition: transform var(--sp-duration-feedback) var(--sp-ease-out); }
 .sp-button:hover .sp-icon, .text-link:hover .sp-icon { transform: translateX(3px); }
 .site-header nav a:hover { text-decoration: underline; text-underline-offset: .45em; }
}
body[data-input="pointer"] .sp-button, body[data-input="pointer"] .capture-tab { transition: transform var(--sp-duration-feedback) var(--sp-ease-out), background var(--sp-duration-feedback), color var(--sp-duration-feedback); }
body[data-input="pointer"] .sp-button:active, body[data-input="pointer"] .capture-tab:active { transform: scale(.98); }
@media(max-width: 760px) {
 .capture-stage { height: auto; aspect-ratio: 86 / 149; }
 .capture-stage .reservation-capture { display: block; padding: var(--sp-space-3); }
 .capture-stage .capture-explanation { display: none; }
 .capture-stage .real-product > picture img { border-radius: var(--sp-radius-control); }
 .product-context { gap: var(--sp-space-3); }
 .capture-tabs { width: 100%; flex-wrap: nowrap; }
 .capture-tab { flex: 1; }
 .hero-actions { gap: var(--sp-space-3); }
 .hero-actions .sp-button { padding-inline: .9rem; }
 .demo-agenda { margin-top: var(--sp-space-6); }
}
@media(prefers-reduced-motion: reduce) {
 body[data-input="pointer"] .sp-button, body[data-input="pointer"] .capture-tab, .sp-button .sp-icon, .text-link .sp-icon { transition: none; transform: none !important; }
}

.capture-stage > figure { opacity: 0; visibility: hidden; pointer-events: none; }
.capture-stage > figure[data-active="true"] { opacity: 1; visibility: visible; pointer-events: auto; }
body[data-input="pointer"] .capture-stage > figure { transform: translateY(4px); transition: opacity var(--sp-duration-state) var(--sp-ease-out), transform var(--sp-duration-state) var(--sp-ease-out), visibility 0s var(--sp-duration-state); }
body[data-input="pointer"] .capture-stage > figure[data-active="true"] { transform: translateY(0); transition-delay: 0s; }
@media(prefers-reduced-motion: reduce) { body[data-input="pointer"] .capture-stage > figure { transition: none; transform: none; } }

/* Marketing rhythm: visible defaults, one entrance per chapter. */
[data-motion-pending] { opacity: 0; }
.faq-answer { overflow: hidden; }
.faq-answer > p { margin: 0; padding-bottom: 1.25rem; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 14px; height: 14px; flex: 0 0 auto; background: linear-gradient(currentColor,currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor,currentColor) center / 1.5px 100% no-repeat; }
body[data-input="pointer"] .faq summary::after { transition: transform var(--sp-duration-state) var(--sp-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[data-expanded="false"] summary::after { transform: rotate(0); }
@media (prefers-reduced-motion: no-preference) {
 /* Initial style is resolved before first paint: no visible → hidden flash. */
 .hero h1 { transition: opacity var(--sp-duration-reveal) var(--sp-ease-out), transform var(--sp-duration-reveal) var(--sp-ease-out); }
 .hero-description { transition: opacity 450ms var(--sp-ease-out) 80ms, transform 450ms var(--sp-ease-out) 80ms; }
 .capture-stage { transition: opacity var(--sp-duration-media) var(--sp-ease-out) 120ms, transform var(--sp-duration-media) var(--sp-ease-out) 120ms; }
 @starting-style {
  .hero h1, .hero-description { opacity: 0; transform: translateY(20px); }
  .capture-stage { opacity: 0; transform: translateY(28px); }
 }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
 @starting-style { .hero h1, .hero-description, .capture-stage { transform: translateY(16px); } }
}
@media (prefers-reduced-motion:reduce) {
 [data-motion-pending] { opacity: 1; }
 body[data-input="pointer"] .faq summary::after { transition: none; }
}

#demo-form .sp-error { margin: 0; }
#demo-form .sp-status { overflow-wrap: anywhere; }
#demo-form .sp-status[data-tone="danger"] { color: var(--sp-color-danger); background: var(--sp-color-danger-bg); }
#demo-form .sp-status[data-tone="success"] { color: var(--sp-color-success); background: var(--sp-color-success-bg); }
#demo-form [hidden] { display: none; }
.demo-sandbox-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-3); margin-bottom: var(--sp-space-6); }
.demo-sandbox-controls .sp-input { width: auto; max-width: 100%; }

.admin-register { margin: var(--sp-space-12) 0 0; }
.admin-register picture { overflow: hidden; border: 1px solid var(--sp-color-border); border-radius: var(--sp-radius-panel); }
.admin-register figcaption { color: var(--sp-color-secondary); font-size: .875rem; margin-top: var(--sp-space-4); max-width: 70ch; }
@media(max-width:760px) { .admin-register picture { max-width: 383px; margin-inline: auto; } }

/* Comfortable targets for standalone navigation links. */
.site-header .brand, .site-footer .brand, .site-footer > a { min-height: var(--sp-control-height); display: inline-flex; align-items: center; }
.capture-tab:disabled { cursor: default; opacity: .5; }