/* * Veilora — Marketing site stylesheet * Tokens, type scale, spacing and component patterns follow docs/brandbook.md / * docs/brandbook.html exactly. See that file for the source of truth. * * Theming: light tokens are the default block; dark tokens apply both via * prefers-color-scheme and via explicit [data-theme] overrides, matching the * structure used in brandbook.html. The page itself is set to dark-ground by * default (investor/sales-facing convention, brandbook §7 Application) using * data-theme="dark" on in index.html — this does not remove the * light tokens, it only selects which set applies at load. */ :root { /* Brand palette — brandbook.md §4 Color */ --void: #0A0818; --panel: #17132E; --panel-raised: #1E1840; --violet: #2E2760; --line: #3A2E7A; --muted: #6F6796; --tertiary: #A79FC4; --gold: #E8C77E; --signal-green: #8FD4A8; --paper: #F5F3FA; --ink: #17132E; --ink-soft: #4A4470; /* Font stacks — brandbook.md §5 Typography */ --serif: "Caladea", Cambria, Georgia, "Times New Roman", serif; --sans: "Carlito", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mono: "SF Mono", "Cascadia Code", Consolas, monospace; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 140px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; /* Light-mode token role assignment (brandbook default block) */ --bg: var(--paper); --surface: #FFFFFF; --surface-sunken: #EDEAF6; --text: var(--ink); --text-soft: var(--ink-soft); --border: #DAD4EC; --accent: #B8933F; /* deepened gold — holds contrast on white */ --accent-ink: #6F5620; --rail-bg: var(--void); } /* Dark-mode token role assignment — system preference */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--void); --surface: var(--panel); --surface-sunken: #120F26; --text: var(--paper); --text-soft: var(--tertiary); --border: var(--line); --accent: var(--gold); --accent-ink: var(--gold); --rail-bg: #060512; } } /* Explicit dark override (this page defaults to dark-ground) */ :root[data-theme="dark"] { --bg: var(--void); --surface: var(--panel); --surface-sunken: #120F26; --text: var(--paper); --text-soft: var(--tertiary); --border: var(--line); --accent: var(--gold); --accent-ink: var(--gold); --rail-bg: #060512; } /* Explicit light override, for completeness of the token structure */ :root[data-theme="light"] { --bg: var(--paper); --surface: #FFFFFF; --surface-sunken: #EDEAF6; --text: var(--ink); --text-soft: var(--ink-soft); --border: #DAD4EC; --accent: #B8933F; --accent-ink: #6F5620; --rail-bg: var(--void); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } ::selection { background: var(--gold); color: var(--void); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0 0 var(--space-3); text-wrap: balance; } /* Major headlines carry the deliberate weight — brandbook §5, only 400/700 faces exist, so "heavier" means 700, not a synthesized in-between. */ h1, h2 { font-weight: 700; } h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4rem); line-height: 1.05; letter-spacing: -0.01em; } h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.4rem); line-height: 1.15; letter-spacing: -0.005em; } h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; } p { margin: 0 0 var(--space-3); max-width: 68ch; } .container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--space-4); } section { padding-block: var(--space-8); scroll-margin-top: var(--space-6); position: relative; } /* Vertical rhythm varies by content density rather than a flat --space-8 (96px) everywhere — denser sections (stat grids, the pipeline diagram) get more breathing room; lighter single-line sections (sector tiles, the comparison table's tight rows) get less; the closing section gets the most, so the page has a sense of "arrival" rather than stopping on the same rhythm it's held since the hero. */ #the-shift { padding-block: var(--space-9) var(--space-8); } #how-it-works { padding-block: var(--space-9); } #different { padding-block: var(--space-7); } #applies { padding-block: var(--space-7); } #vision { padding-block: var(--space-9) calc(var(--space-9) + var(--space-6)); } /* Section background rhythm — brandbook §4 tokens (panel / panel-raised / violet) used to break the transparent-on-void monotony. Each section picks the treatment that suits its content weight rather than repeating the same flat ground throughout. Panels get a hairline border where they meet the void so the seam still reads intentionally, replacing the old
rule between every section. */ .panel-void { background: var(--bg); } .panel-a { background: var(--surface); border-block: 1px solid var(--border); } .panel-raised { background: var(--panel-raised); border-block: 1px solid var(--border); } :root[data-theme="light"] .panel-raised, body:not([data-theme]) .panel-raised { background: var(--surface-sunken); } .panel-close { background: linear-gradient(180deg, var(--bg) 0%, var(--violet) 140%); border-top: 1px solid var(--border); } :root[data-theme="light"] .panel-close, body:not([data-theme]) .panel-close { background: linear-gradient(180deg, var(--bg) 0%, var(--surface-sunken) 140%); } /* ---------- Scroll-reveal entrance ---------- */ [data-reveal] > .container { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal].is-visible > .container { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] > .container { opacity: 1; transform: none; transition: none; } } .eyebrow { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-ink); font-weight: 700; display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); flex-shrink: 0; } .lede { font-size: 1.15rem; color: var(--text-soft); max-width: 62ch; } .section-intro { color: var(--text-soft); max-width: 66ch; margin-bottom: var(--space-5); } /* Tabular data / statistics — brandbook.md §5 Data */ .stat-figure { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; } .source-line { font-family: var(--mono); font-size: 0.72rem; color: var(--text-soft); opacity: 0.85; max-width: 80ch; margin-top: var(--space-3); } .term-mark { font-size: 0.6em; vertical-align: super; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-3); top: -60px; background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); z-index: 100; transition: top 0.15s ease; } .skip-link:focus { top: var(--space-3); } /* ---------- Header / wordmark lockup ---------- */ .site-header { padding-block: var(--space-4); border-bottom: 1px solid rgba(167, 159, 196, 0.15); } .site-header .container { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } /* Typographic wordmark lockup — no icon mark exists yet (brandbook §6 / §8 Open Items) */ .wordmark { display: inline-flex; flex-direction: column; line-height: 1.1; text-decoration: none; } .wordmark-word { font-family: var(--serif); font-size: 1.5rem; color: var(--text); letter-spacing: 0.01em; } .wordmark-sub { font-family: var(--sans); font-size: 0.62rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.18em; margin-top: var(--space-1); } .header-cta { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; color: var(--accent-ink); text-decoration: none; border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); transition: background 0.15s ease, color 0.15s ease; } .header-cta:hover, .header-cta:focus-visible { background: var(--accent); color: var(--void); outline: none; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--sans); font-size: 0.95rem; font-weight: 700; text-decoration: none; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--accent); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; } /* Gold used sparingly per brandbook: outline treatment on the primary CTA, never a large solid gold fill. Fill appears only on hover/focus, briefly. */ .btn-primary { background: transparent; color: var(--accent-ink); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--accent); color: var(--void); outline: none; } .btn-primary:active { transform: translateY(1px); } /* ---------- Hero ---------- */ .hero { padding-top: clamp(var(--space-7), 10vh, var(--space-9)); padding-bottom: var(--space-8); text-align: left; background: var(--void); overflow: hidden; isolation: isolate; } /* Hero visual signature — canvas-drawn signal/narrative network, see js/main.js. Sits behind the copy, faded toward the bottom so it never fights with text contrast. A static radial wash is the CSS fallback drawn under the canvas for the instant before JS paints the first frame, and is what remains visible if canvas / JS is unavailable. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 55% at 78% 28%, rgba(232, 199, 126, 0.16), transparent 70%), radial-gradient(45% 40% at 15% 75%, rgba(46, 39, 96, 0.55), transparent 70%); } #hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%); } .hero-content { position: relative; z-index: 1; } .hero .wordmark-word { font-size: clamp(2.2rem, 4vw + 1rem, 3.2rem); } .hero .wordmark-sub { font-size: 0.78rem; margin-top: var(--space-2); margin-bottom: var(--space-5); } .hero h1 { margin-top: var(--space-4); color: var(--paper); } .hero .lede { margin-top: var(--space-3); margin-bottom: var(--space-5); } /* The one genuine gold "hero moment" — brandbook rule is gold stays flat everywhere else, but the primary CTA earns real depth once, here. */ .btn-hero { position: relative; background: linear-gradient(180deg, #F3DFA6 0%, var(--gold) 55%, #CBA45C 100%); color: var(--void); border-color: var(--gold); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 8px 24px -8px rgba(232, 199, 126, 0.55); transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-hero:hover, .btn-hero:focus-visible { background: linear-gradient(180deg, #F6E6B8 0%, #EFD495 55%, #D3AE68 100%); color: var(--void); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 14px 32px -10px rgba(232, 199, 126, 0.7); } .btn-hero:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .btn-hero:hover, .btn-hero:focus-visible { transform: none; } } /* ---------- The Shift (stats) ---------- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); } .stat-block .stat-figure { display: block; font-size: clamp(2rem, 3vw + 1rem, 2.6rem); line-height: 1.1; } .stat-block .stat-label { display: block; margin-top: var(--space-2); font-size: 0.92rem; color: var(--text-soft); } .signal-line { font-family: var(--serif); font-size: 1.2rem; color: var(--text); margin-top: var(--space-5); } .volume-panel { margin-top: var(--space-6); padding: var(--space-5); background: var(--surface-sunken); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); } .volume-panel .eyebrow { margin-bottom: var(--space-4); } .volume-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); } .volume-item { display: flex; flex-direction: column; gap: var(--space-1); } .volume-item .stat-figure { font-size: 1.3rem; } .volume-item .volume-label { font-size: 0.82rem; color: var(--text-soft); } /* ---------- Case cards: featured + minor grid ---------- The most dramatic case (largest dollar figure) gets a distinct, larger treatment instead of four identical boxes in a row — the other three stay compact and share a tighter grid beside/below it. */ .case-feature-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); align-items: stretch; } .case-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .case-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px -16px rgba(0,0,0,0.45); } .case-card .case-name { font-family: var(--serif); font-size: 1.15rem; color: var(--text); } .case-tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); font-weight: 700; } .case-card .stat-figure { font-size: 1.4rem; margin-top: var(--space-1); } .case-card p { font-size: 0.9rem; color: var(--text-soft); margin: 0; } /* Featured case — larger surface, gradient wash, bigger numeral; this is the section's own restrained "weight" moment (not gold-heavy, just scale and a violet depth wash) so the worst outcome reads as the worst outcome. */ .case-card--featured { border-left-width: 4px; border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); gap: var(--space-3); background: linear-gradient(160deg, var(--violet) 0%, var(--surface) 55%); justify-content: center; } .case-card--featured .case-figure { order: -1; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold); font-size: clamp(2.6rem, 4vw + 1rem, 3.6rem); line-height: 1; } .case-card--featured .case-name { font-size: 1.3rem; order: -2; } .case-card--featured .case-tag { order: -3; } .case-card--featured p { font-size: 0.98rem; color: var(--text-soft); max-width: 42ch; } .case-card--featured:hover { transform: translateY(-4px); } .case-grid-minor { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .case-grid-minor .case-card { padding: var(--space-3) var(--space-4); } .case-grid-minor .case-card .stat-figure { font-size: 1.2rem; } .case-grid-minor .case-card .case-name { font-size: 1rem; } .case-grid-minor .case-card p { font-size: 0.86rem; } @media (max-width: 860px) { .case-feature-row { grid-template-columns: 1fr; } } /* ---------- Pillars (Explain / Predict / Recommend) ---------- */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-5); } .pillar { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .pillar:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px -18px rgba(0,0,0,0.4); } .pillar-index { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--gold); letter-spacing: 0.08em; margin-bottom: var(--space-2); } .pillar h3 { color: var(--accent-ink); } .pillar p { font-size: 0.92rem; color: var(--text-soft); margin: 0; } .category-contrast { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface-sunken); border-left: 3px solid var(--accent); border-radius: var(--radius-md); } .category-contrast p { margin: 0 0 var(--space-1); font-size: 0.92rem; color: var(--text-soft); } .category-contrast p:last-child { margin-bottom: 0; } .category-contrast strong { color: var(--text); } .category-contrast .veilora-answer { color: var(--accent-ink); font-weight: 700; } /* ---------- Pipeline: connected flow ---------- Replaces four boxes + unicode arrows with a real horizontal flow line: a gold rule runs through each stage marker, so the pipeline reads as one continuous process rather than four unrelated cards. Mobile switches to a vertical rail with the same connecting line, each step's copy directly beside its marker (no empty box padding). */ .pipeline { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); position: relative; } .pipeline-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-6); } /* the connecting rail: a thin gold line running through every marker */ .pipeline-step::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: var(--line); } .pipeline-step:first-child::before { left: 15px; } .pipeline-step:last-child::before { right: calc(100% - 15px); } .step-marker { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--void); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; z-index: 1; } .pipeline-step .step-index { font-family: var(--mono); font-size: 0.68rem; color: var(--gold); letter-spacing: 0.02em; } .pipeline-step .step-name { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--text); } .step-desc { font-size: 0.86rem; color: var(--text-soft); margin: 0; } @media (max-width: 720px) { .pipeline { grid-template-columns: 1fr; gap: var(--space-5); } .pipeline-step { padding-top: 0; padding-left: var(--space-6); min-height: 32px; } .pipeline-step::before { top: 0; bottom: calc(-1 * var(--space-5)); left: 15px; right: auto; width: 2px; height: auto; } .pipeline-step:first-child::before { top: 15px; } .pipeline-step:last-child::before { display: none; } .step-marker { top: 0; left: 0; } } /* ---------- Comparison matrix ---------- Replaces the three parallel columns (each just a header + a dash) with real comparison rows: one row per capability, one column per competitor, using the brandbook's check / ~ / – / → convention consistently so the gap is visible feature-by-feature, not just column-by-column. */ .compare-lede { margin-top: var(--space-3); } .compare-matrix { margin-top: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .compare-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; } .compare-row:not(:last-child) { border-bottom: 1px solid var(--border); } .compare-row > span { padding: var(--space-3) var(--space-3); text-align: center; font-size: 0.9rem; } .compare-cap { text-align: left !important; color: var(--text-soft); font-size: 0.86rem !important; } .compare-row--head { background: var(--surface-sunken); font-family: var(--sans); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); } .compare-row--head .is-veilora { color: var(--accent-ink); } .compare-row--head .compare-cap { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--text-soft); } .compare-row--final { background: rgba(232, 199, 126, 0.06); } .sym { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; } .sym-yes { color: var(--signal-green); } .sym-partial { color: var(--text-soft); } .sym-no { color: var(--muted); } .sym-focus { color: var(--gold); font-size: 1.3rem; } @media (max-width: 640px) { .compare-row { grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr; } .compare-row > span { padding: var(--space-2); font-size: 0.8rem; } .compare-cap { font-size: 0.76rem !important; } } .legend { margin-top: var(--space-4); font-family: var(--mono); font-size: 0.72rem; color: var(--text-soft); } .legend span { margin-right: var(--space-4); white-space: nowrap; } .legend b { color: var(--text); font-weight: 700; } /* ---------- Where it applies ---------- */ .applies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); } .applies-card { position: relative; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .applies-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px -18px rgba(0,0,0,0.4); } /* ghost sector numeral — differentiates these from every other card recipe on the page without adding imagery/icons */ .applies-glyph { position: absolute; top: -0.2em; right: 0.2em; font-family: var(--mono); font-size: 3.4rem; font-weight: 700; color: var(--text); opacity: 0.06; line-height: 1; pointer-events: none; } .applies-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--text); position: relative; } .applies-card p { font-size: 0.9rem; color: var(--text-soft); margin: 0; position: relative; } /* ---------- Vision + contact close ---------- */ .vision-line { font-family: var(--serif); font-size: clamp(1.3rem, 2vw + 0.8rem, 1.7rem); line-height: 1.4; max-width: 52ch; } .vision-line .gold-emph { color: var(--gold); font-weight: 700; } .closing-statement { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 3vw + 1rem, 2.2rem); color: var(--text); margin-top: var(--space-5); margin-bottom: 0; } .contact-panel { position: relative; margin-top: var(--space-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } /* a quiet gold thread across the top edge — the sense of "arrival" at the close the page was missing, without a large gold field (brandbook rule) */ .contact-panel::before { content: ""; position: absolute; top: -1px; left: var(--space-6); right: var(--space-6); height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); } .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); font-weight: 700; } .form-field input, .form-field textarea { font-family: var(--sans); font-size: 0.95rem; color: var(--text); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); resize: vertical; } .form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .form-actions { grid-column: 1 / -1; margin-top: var(--space-2); } .form-note { grid-column: 1 / -1; font-size: 0.78rem; color: var(--text-soft); margin: 0; } @media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding-block: var(--space-6); } .site-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .footer-contact { font-family: var(--mono); font-size: 0.82rem; color: var(--text-soft); } .footer-copy { font-size: 0.78rem; color: var(--text-soft); width: 100%; margin-top: var(--space-3); } /* ---------- Responsive ---------- */ @media (max-width: 860px) { section { padding-block: var(--space-7); } } @media (max-width: 540px) { .container { padding-inline: var(--space-3); } section { padding-block: var(--space-6); } }