/* À Vos Tables — marketing site (page-level layout).
   Component visuals come from the design-system bundle; this file is layout only. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], div[id] { scroll-margin-top: 178px; }
.section[id] { scroll-margin-top: calc(178px - var(--section-y)); }
body { margin: 0; font-family: var(--font-sans); color: var(--text-body); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.eyebrow { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold-600); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold-400); display: inline-block; }
.eyebrow--center::before { display: none; }

.h-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.02; color: var(--text-strong); margin: 0; }
.h-2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -0.01em; color: var(--text-strong); margin: 0; }
.h-2 em { font-style: italic; color: var(--gold-600); }
.lead { font-size: var(--text-lg); line-height: 1.6; color: var(--text-muted); margin: 0; }

/* Header */
.hdr { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(251,248,242,0.82); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur), background var(--dur); }
.hdr.is-scrolled { border-bottom-color: var(--line-soft); }
.hdr__inner { display: flex; align-items: center; justify-content: space-between; height: 160px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 148px; height: 148px; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--text-strong); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.brand__tag { font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-600); margin-top: 4px; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: var(--text-base); font-weight: 500; color: var(--ink-700); transition: color var(--dur); white-space: nowrap; }
.nav a:hover { color: var(--gold-600); }
.hdr__cta { display: flex; align-items: center; gap: 16px; }
@media (max-width: 1040px){ .nav, .hdr__cta .ghost-login { display: none; } }

/* Brand baseline — centered under the header */
.brandline { background: rgba(251,248,242,0.82); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line-soft); }
.brandline__inner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 13px 0 15px; }
.brandline__name { font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1; color: var(--text-strong); letter-spacing: -0.005em; white-space: nowrap; }
.brandline__sep { width: 6px; height: 6px; flex: none; background: var(--gold-500); transform: rotate(45deg); }
.brandline__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-600); white-space: nowrap; }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6.5rem) var(--section-y); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 5.4vw, 4.6rem); }
.hero h1 em { font-style: italic; color: var(--gold-600); }
.hero__sub { margin-top: 26px; max-width: 33ch; }
.hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__note { margin-top: 20px; font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.hero__note .dot { color: var(--line-strong); }
@media (max-width: 860px){ .hero__grid { grid-template-columns: 1fr; } .hero__visual { order: -1; } }

/* Trust strip */
.trust { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--paper-2); }
.trust__inner { display: flex; align-items: center; gap: 38px; flex-wrap: wrap; justify-content: center; padding-block: 26px; }
.trust__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.trust__name { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink-400); letter-spacing: 0.02em; }

/* Section heading block */
.sec-head { max-width: 640px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .h-2 { margin-top: 18px; }
.sec-head .lead { margin-top: 18px; }

/* Feature grid */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
@media (max-width: 860px){ .feat-grid { grid-template-columns: 1fr; } }
.feat__ico { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: var(--gold-100); color: var(--gold-700); margin-bottom: 20px; }
.feat h3 { font-size: var(--text-xl); font-weight: 700; color: var(--text-strong); margin: 0 0 10px; letter-spacing: -0.01em; }
.feat p { font-size: var(--text-base); line-height: 1.6; color: var(--text-muted); margin: 0; }

/* Split / deep-dive */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--rev .split__media { order: -1; }
@media (max-width: 880px){ .split { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }
.split h2 { margin-top: 18px; }
.split .lead { margin-top: 20px; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-md); color: var(--ink-700); }
.ticks .tk { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--success-100); color: var(--success-700); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 1px; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; counter-reset: step; }
@media (max-width: 860px){ .steps { grid-template-columns: 1fr 1fr; } }
.step { position: relative; }
.step__n { font-family: var(--font-display); font-size: 56px; font-weight: 600; color: var(--gold-300); line-height: 1; }
.step h4 { font-size: var(--text-lg); font-weight: 700; color: var(--text-strong); margin: 14px 0 8px; }
.step p { font-size: var(--text-base); line-height: 1.55; color: var(--text-muted); margin: 0; }

/* Ink band */
.band { background: var(--ink-900); color: var(--text-on-ink); border-radius: var(--radius-2xl); padding: clamp(2.5rem, 5vw, 4.5rem); position: relative; overflow: hidden; }
.band h2 { color: var(--cream); font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); letter-spacing: -0.01em; margin: 0; line-height: 1.05; }
.band h2 em { font-style: italic; color: var(--gold-400); }
.band p { color: var(--ink-200); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } }
.contact-side .ci { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; }
.contact-side .ci__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-100); color: var(--gold-700); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.contact-side .ci h5 { margin: 0 0 3px; font-size: var(--text-md); font-weight: 700; color: var(--text-strong); }
.contact-side .ci p { margin: 0; font-size: var(--text-base); color: var(--text-muted); }

/* Footer */
.ftr { background: var(--ink-900); color: var(--text-on-ink-muted); padding-block: 64px 32px; }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 800px){ .ftr__top { grid-template-columns: 1fr 1fr; } }
.ftr img { width: 64px; height: 64px; }
.ftr__brand p { color: var(--ink-300); font-size: var(--text-base); line-height: 1.6; max-width: 30ch; margin: 16px 0 0; }
.ftr h6 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); margin: 0 0 16px; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ftr ul a { font-size: var(--text-base); color: var(--ink-300); transition: color var(--dur); }
.ftr ul a:hover { color: var(--gold-400); }
.ftr__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: var(--text-sm); color: var(--ink-400); flex-wrap: wrap; }

/* Pricing */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; max-width: 900px; margin-inline: auto; align-items: start; }
@media (max-width: 780px){ .pricing { grid-template-columns: 1fr; } }
.plan { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 34px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan--feat { border-color: var(--gold-300); box-shadow: var(--shadow-md); }
.plan__badge { position: absolute; top: -13px; left: 30px; right: 30px; background: var(--ink-900); color: var(--gold-300); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--radius-pill); text-align: center; box-shadow: var(--shadow-sm); }
.plan__name { font-family: var(--font-display); font-weight: 600; font-size: 32px; color: var(--text-strong); line-height: 1; }
.plan--feat .plan__name { margin-top: 8px; }
.plan__price { display: flex; align-items: baseline; gap: 9px; margin-top: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.plan__price .amt { font-family: var(--font-display); font-weight: 600; font-size: 54px; line-height: 1; color: var(--gold-600); letter-spacing: -0.015em; }
.plan__price .per { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.plan__ft { margin-top: 22px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.plan__list { list-style: none; padding: 0; margin: 16px 0 28px; display: grid; gap: 13px; }
.plan__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-700); line-height: 1.45; }
.plan__list .tk { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--success-100); color: var(--success-700); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }
.plan > a:last-child, .plan > button:last-child { margin-top: auto; }
.plan__list li.is-key { margin-top: 4px; padding: 14px 15px; border-radius: var(--radius-lg); background: var(--gold-50, #FBF6EC); border: 1px solid var(--gold-300); font-weight: 600; color: var(--ink-900); align-items: center; }
.plan__list li.is-key .tk { background: var(--gold-600); color: var(--white); width: 24px; height: 24px; }
.plan__list li.is-key .key-note { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }