/* ════════════════════════════════════════════════════════
   TALARA · Cloud Paper inner pages
   Replaces home.css + pages.css on every inner page. Same
   markup vocabulary (.scene, .sec, .lead, .index, .prose,
   .term, .qa, .crumbs, .kicker, .btn, contact form), restyled
   to the Cloud Paper system: white canvas, one ink, one blue,
   lavender wash heroes with a dotted grid, flat cards with
   layered depth, Inter on the 4/8 px type grid, 44 px targets.
   Nav, footer and the demo modal come from chrome.css (last).
   pricing.css still loads after this file and reads the legacy
   token names, which are mapped to Cloud Paper values below.
   ════════════════════════════════════════════════════════ */

:root {
  /* Cloud Paper */
  --cp-ink: #091135; --cp-slate: #36394A; --cp-mist: #B1BBCD; --cp-frost: #E1E9F0; --cp-wash: #F5F3FF; --cp-wash-dot: #DDD8F5;
  --cp-blue: #0D68CC; --cp-blue-deep: #0B62C2; --cp-blue-ring: #0F77FF; --cp-blue-ink: #0A58B0; --cp-blue-tint: #E8F1FE;
  --cp-green: #146C43; --cp-green-tint: #EAF7EF;
  --cp-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cp-shadow-card: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(9,17,53,0.04), 0 6px 16px rgba(9,17,53,0.06), 0 20px 44px rgba(9,17,53,0.07);
  --cp-shadow-lift: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px var(--cp-blue-ring), 0 2px 4px rgba(9,17,53,0.05), 0 14px 32px rgba(9,17,53,0.10), 0 36px 72px rgba(9,17,53,0.12);
  --cp-shadow-btn: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(9,17,53,0.16), 0 6px 14px rgba(13,104,204,0.24);
  /* legacy names read by pricing.css and inline styles */
  --paper: #FFFFFF; --paper-2: #F5F3FF; --ink: #091135; --ink-2: #36394A; --ink-3: #36394A;
  --line: #E1E9F0; --line-2: #B1BBCD; --indigo: #0D68CC; --indigo-700: #0B62C2; --teal: #146C43;
  --on-dark: #091135; --on-dark-2: #36394A;
  --serif: var(--cp-sans); --sans: var(--cp-sans); --mono: var(--cp-sans);
  --ease: var(--cp-ease); --pad-x: clamp(1rem, 5vw, 5rem); --maxw: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #fff; scroll-behavior: smooth; }
body { background: #fff; color: var(--cp-ink); font-family: var(--cp-sans); font-size: 16px; line-height: 24px; letter-spacing: 0.008em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--cp-ink); color: #fff; }
:focus-visible { outline: 2px solid var(--cp-blue-ring); outline-offset: 3px; border-radius: 6px; }
.accent { color: var(--cp-blue); }
.skip { position: fixed; top: -50px; left: 16px; z-index: 400; background: var(--cp-ink); color: #fff; font-size: 12px; padding: 10px 18px; border-radius: 8px; transition: top 0.25s var(--cp-ease); }
.skip:focus-visible { top: 14px; }
.bgstage { display: none; }
main { padding-top: calc(84px + env(safe-area-inset-top, 0px)); }

/* ─── Reveals (home.js) · masked line reveals become plain ─── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--cp-ease), transform 0.7s var(--cp-ease); }
.reveal.is-in { opacity: 1; transform: none; }
.rl { display: block; overflow: visible; padding: 0; margin: 0; }
.rl__in { display: inline; transform: none; transition: none; }

/* ─── Type ─── */
.kicker { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 9999px; background: var(--cp-wash); color: var(--cp-ink); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.004em; }
.kicker::before { display: none; }
.kicker--plain { background: transparent; padding: 0; border-radius: 0; color: var(--cp-slate); }
.scene--page .kicker, .scene--cta .kicker, .scene--contact .kicker { background: #fff; border: 1px solid var(--cp-frost); }

/* ─── Buttons · 44 px minimum ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 8px; border: 1px solid transparent; font-family: var(--cp-sans); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.008em; cursor: pointer; white-space: nowrap; text-shadow: none; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.24s var(--cp-ease); }
.btn--solid, .btn--on-dark.btn--solid { background: var(--cp-blue); color: #fff; box-shadow: var(--cp-shadow-btn); }
.btn--solid:hover, .btn--on-dark.btn--solid:hover { background: var(--cp-blue-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 1px var(--cp-blue-ring), 0 8px 20px rgba(13,104,204,0.3); }
.btn--ghost, .btn--on-dark.btn--ghost { background: #fff; color: var(--cp-ink); border-color: var(--cp-frost); box-shadow: none; }
.btn--ghost:hover, .btn--on-dark.btn--ghost:hover { border-color: var(--cp-mist); color: var(--cp-ink); }
.btn__arrow { transition: transform 0.4s var(--cp-ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ─── Hero (.scene--page) · lavender wash, dotted grid, one glow ─── */
.scene { position: relative; overflow: hidden; }
.scene--page { min-height: auto; padding: 96px var(--pad-x) 88px; background: radial-gradient(ellipse 70% 65% at 82% 40%, rgba(15,119,255,0.10) 0%, rgba(15,119,255,0.035) 40%, rgba(15,119,255,0) 68%), linear-gradient(180deg, #F8F6FF 0%, #F5F3FF 100%); box-shadow: inset 0 -1px 0 var(--cp-frost); }
.scene--page::before { content: ""; position: absolute; left: 50%; top: -120px; width: 900px; max-width: 100%; height: 480px; transform: translateX(-50%); background: radial-gradient(ellipse at center top, rgba(15,119,255,0.18), rgba(15,119,255,0) 65%); pointer-events: none; }
.scene__bg, .scene__grade { display: none; }
.scene__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; color: var(--cp-ink); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; font-size: 14px; line-height: 20px; letter-spacing: 0.004em; }
.crumbs, .crumbs a, .crumbs span { color: var(--cp-slate); text-shadow: none; }
.crumbs a:hover { color: var(--cp-blue); }
.scene__eyebrow, .hero__eyebrow { display: none; }
.scene__title, .hero__title { font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: 0.018em; color: var(--cp-ink); max-width: 20ch; text-wrap: balance; text-shadow: none; }
.scene__title em, .hero__title em { font-style: normal; color: var(--cp-blue); }
.scene__body, .hero__lede { margin-top: 24px; font-size: 18px; line-height: 28px; letter-spacing: 0.012em; color: var(--cp-slate); max-width: 60ch; text-shadow: none; }
.hero__actions, .scene__cta-actions { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__lede.reveal, .hero__actions.reveal { transition-delay: 0.16s; }
.hero__meta { position: static; margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; border: none; }
.hero__meta span { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--cp-slate); }

/* ─── Closing CTA (.scene--cta) · the release beat ─── */
.scene--cta { min-height: auto; padding: 96px var(--pad-x) 96px; background: radial-gradient(ellipse 70% 65% at 50% 45%, rgba(15,119,255,0.10) 0%, rgba(15,119,255,0.035) 40%, rgba(15,119,255,0) 68%), linear-gradient(180deg, #F8F6FF 0%, #F5F3FF 100%); box-shadow: inset 0 1px 0 var(--cp-frost); margin-top: 32px; }
.scene--cta .scene__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: 0.016em; max-width: 24ch; }
.scene--cta .scene__cta-actions { justify-content: center; }

/* ─── Sections ─── */
.sec { padding: 80px var(--pad-x); background: transparent; }
.sec--tint { background: transparent; }
.sec__inner { max-width: var(--maxw); margin: 0 auto; }
.sec__head { max-width: 760px; margin-bottom: 40px; }
.sec__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: 0.016em; margin: 16px 0 0; max-width: 24ch; text-wrap: balance; }
.sec__body { font-size: 18px; line-height: 28px; letter-spacing: 0.012em; color: var(--cp-slate); max-width: 60ch; margin-top: 16px; }
.sec__body a, .lead__a a, .term__def a, .qa__a a, .prose a { color: var(--cp-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(13,104,204,0.35); }
.sec__body a:hover, .lead__a a:hover, .term__def a:hover, .qa__a a:hover, .prose a:hover { color: var(--cp-blue-deep); text-decoration-color: currentColor; }

/* ─── Lead · the direct answer ─── */
.lead-sec { padding: 72px var(--pad-x) 24px; }
.lead { max-width: var(--maxw); margin: 0 auto; }
.lead__q { display: inline-flex; align-items: center; margin-bottom: 16px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.004em; color: var(--cp-slate); }
.lead__q::before { display: none; }
.lead__a { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0.014em; color: var(--cp-ink); text-wrap: pretty; max-width: 48ch; }
.lead__a em { font-style: normal; color: var(--cp-blue); }

/* ─── Index · card rows ─── */
.index { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; border: none; }
.index__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 20px 24px; background: #fff; border: 1px solid var(--cp-frost); border-radius: 12px; box-shadow: var(--cp-shadow-card); color: inherit; transition: transform 0.3s var(--cp-ease), box-shadow 0.3s var(--cp-ease), border-color 0.2s ease; }
.index__item:hover { padding-left: 24px; transform: translateY(-3px); border-color: var(--cp-blue-ring); box-shadow: var(--cp-shadow-lift); }
.index__main { grid-column: 1; min-width: 0; }
.index__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.index__t { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: 0.012em; color: var(--cp-ink); }
.index__k { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; background: var(--cp-wash); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.004em; color: var(--cp-slate); }
.index__d { font-size: 14px; line-height: 20px; color: var(--cp-slate); max-width: 64ch; }
.index__arrow { grid-column: 2; color: var(--cp-blue); font-size: 20px; line-height: 1; transition: transform 0.4s var(--cp-ease); }
.index__item:hover .index__arrow { transform: translateX(4px); }

/* ─── Prose · guides and compliance articles ─── */
.prose { max-width: 720px; margin: 0; }
.prose section { margin-bottom: 48px; }
.prose h2 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: 0.014em; color: var(--cp-ink); margin-bottom: 12px; text-wrap: balance; }
.prose h3 { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: 0.012em; color: var(--cp-ink); margin: 24px 0 8px; }
.prose p { font-size: 16px; line-height: 24px; color: var(--cp-slate); margin-bottom: 16px; max-width: 60ch; }
.prose ul, .prose ol { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }
.prose li { position: relative; padding-left: 28px; font-size: 16px; line-height: 24px; color: var(--cp-slate); }
.prose li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F77FF' stroke-width='2'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
.prose strong { color: var(--cp-ink); font-weight: 600; }
.prose blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--cp-blue); background: var(--cp-wash); border-radius: 0 12px 12px 0; color: var(--cp-ink); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 14px; line-height: 20px; }
.prose th, .prose td { text-align: left; padding: 12px; border-bottom: 1px solid var(--cp-frost); vertical-align: top; }
.prose th { font-weight: 600; color: var(--cp-ink); }
.prose td { color: var(--cp-slate); }

/* ─── Glossary rows ─── */
.glossary { max-width: 880px; margin: 0; border-top: 1px solid var(--cp-frost); }
.term { padding: 24px 0; border-bottom: 1px solid var(--cp-frost); display: grid; grid-template-columns: minmax(190px, 0.5fr) 1fr; gap: 24px; }
.term__name { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: 0.012em; color: var(--cp-ink); }
.term__def { font-size: 16px; line-height: 24px; color: var(--cp-slate); }

/* ─── FAQ rows ─── */
.faqs { max-width: 820px; margin: 0; border-top: 1px solid var(--cp-frost); }
.qa { padding: 24px 0; border-bottom: 1px solid var(--cp-frost); }
.qa__q { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: 0.012em; color: var(--cp-ink); margin-bottom: 8px; }
.qa__a { font-size: 16px; line-height: 24px; color: var(--cp-slate); max-width: 64ch; }

/* ─── Contact · lead + form card ─── */
.scene--contact { min-height: auto; align-items: start; padding-bottom: 96px; }
.contact-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; width: 100%; }
.contact-hero__lead .scene__title { margin-bottom: 8px; }
.contact-hero__form { background: #fff; border: 1px solid var(--cp-frost); border-radius: 12px; padding: 24px; box-shadow: var(--cp-shadow-card); }
.cform { display: grid; gap: 16px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cform__field { display: grid; gap: 6px; min-width: 0; }
.cform__field label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.004em; color: var(--cp-slate); text-transform: none; }
.cform__field input, .cform__field select, .cform__field textarea { width: 100%; min-width: 0; min-height: 44px; font-family: var(--cp-sans); font-size: 16px; line-height: 24px; color: var(--cp-ink); background: #fff; border: 1px solid var(--cp-frost); border-radius: 8px; padding: 10px 12px; outline: none; box-shadow: inset 0 1px 2px rgba(9,17,53,0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; }
.cform__field input::placeholder, .cform__field textarea::placeholder { color: var(--cp-mist); opacity: 1; }
.cform__field input:focus, .cform__field select:focus, .cform__field textarea:focus { border-color: var(--cp-blue-ring); box-shadow: 0 0 0 1px var(--cp-blue-ring), 0 0 0 5px rgba(12,43,100,0.10); }
.cform__field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%2336394A' stroke-width='1.4'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 36px; }
.cform__field textarea { min-height: 120px; resize: vertical; }
.cform__error { color: #B32E42; font-size: 14px; line-height: 20px; min-height: 20px; margin: -6px 0 0; opacity: 0; transition: opacity 0.2s ease; }
.cform__error.show { opacity: 1; }
.cform__submit { justify-self: start; min-height: 48px; }
.cform__consent { font-size: 12px; line-height: 16px; color: var(--cp-slate); max-width: 60ch; }
.cform__success { padding: 8px 0; }
.cform__success-title { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: 0.014em; color: var(--cp-ink); margin: 12px 0 8px; }
.contact__direct { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--cp-slate); }
.contact__direct a { color: var(--cp-blue); text-decoration: underline; text-underline-offset: 3px; }
.quote-list { list-style: none; margin: 24px 0 0; display: grid; gap: 10px; }
.quote-list li { position: relative; padding-left: 28px; color: var(--cp-slate); text-shadow: none; }
.quote-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F77FF' stroke-width='2'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center / 20px 20px no-repeat; border: none; }
.quote-trust { margin-top: 20px; font-size: 14px; line-height: 20px; color: var(--cp-slate); max-width: 60ch; text-shadow: none; }

/* ─── Pricing · overrides for pricing.css (loaded after this file) ─── */
body .pr-hero-sec { background: radial-gradient(ellipse 70% 65% at 18% 40%, rgba(15,119,255,0.10) 0%, rgba(15,119,255,0.035) 40%, rgba(15,119,255,0) 68%), linear-gradient(180deg, #F8F6FF 0%, #F5F3FF 100%); box-shadow: inset 0 -1px 0 var(--cp-frost); padding-top: 96px; padding-bottom: 88px; }
body .pr-annb { background: var(--cp-ink); box-shadow: none; }
body .pr-hero__lead .crumbs, body .pr-hero__lead .crumbs a, body .pr-hero__lead .crumbs span { color: var(--cp-slate); }
body .pr-formula { font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: 0.018em; color: var(--cp-ink); margin-top: 16px; }
body .pr-formula__l--2 { color: var(--cp-slate); font-weight: 700; }
body .pr-hl { color: var(--cp-blue); font-weight: 800; }
body .pr-u { font-size: 0.4em; font-weight: 500; color: var(--cp-slate); }
body .pr-sub { font-size: 18px; line-height: 28px; color: var(--cp-slate); max-width: 60ch; margin-top: 20px; }
body .pr-tag { color: var(--cp-slate); border-color: var(--cp-frost); background: #fff; font-size: 12px; line-height: 16px; letter-spacing: 0.004em; }
body .pr-tag::before { background: var(--cp-blue-ring); }
body .pr-calc { background: #fff; border: 1px solid var(--cp-frost); border-radius: 12px; box-shadow: var(--cp-shadow-card); }
body .pr-calc__in { border-right-color: var(--cp-frost); }
body .pr-calc__out { background: var(--cp-wash); }
body .pr-hires__n { font-weight: 800; letter-spacing: 0.018em; }
body .pr-chip { border-color: var(--cp-frost); background: #fff; color: var(--cp-slate); font-size: 14px; line-height: 20px; min-height: 36px; padding: 6px 12px; border-radius: 9999px; }
body .pr-chip:hover { border-color: var(--cp-blue-ring); color: var(--cp-ink); background: #F5F9FF; }
body .pr-chip.is-active { background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; }
body .pr-total__k, body .pr-scale, body .pr-line__k em { color: var(--cp-slate); }
body .pr-total__v > span:first-child { font-weight: 800; letter-spacing: 0.018em; }
body .pr-compare__l { color: var(--cp-slate); }
body .pr-compare__l b { color: var(--cp-ink); }
body .pr-compare__ours { color: var(--cp-blue) !important; }
body .pr-compare__note { color: var(--cp-slate); font-size: 12px; line-height: 16px; letter-spacing: 0.004em; }
body .pr-promise { border-top-color: var(--cp-frost); }
body .pr-promise__i { color: var(--cp-blue); font-size: 12px; line-height: 16px; letter-spacing: 0.004em; }
body .pr-promise h3 { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: 0.012em; }
body .pr-promise p { font-size: 14px; line-height: 20px; }
body .pr-ent { background: radial-gradient(ellipse 70% 65% at 50% 45%, rgba(15,119,255,0.10) 0%, rgba(15,119,255,0.035) 40%, rgba(15,119,255,0) 68%), linear-gradient(180deg, #F8F6FF 0%, #F5F3FF 100%); box-shadow: inset 0 1px 0 var(--cp-frost), inset 0 -1px 0 var(--cp-frost); }
body .pr-ent__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: 0.016em; color: var(--cp-ink); }
body .pr-ent__body { color: var(--cp-slate); }
body .pr-ent__body b { color: var(--cp-ink); }
body .pr-faq__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: 0.016em; }
body .pr-faq__list, body .pr-qa { border-color: var(--cp-frost); }
body .pr-qa summary { font-size: 18px; line-height: 28px; font-weight: 500; min-height: 44px; }
body .pr-qa__x::before, body .pr-qa__x::after { background: var(--cp-blue); }
body .pr-qa__a p { font-size: 16px; line-height: 24px; max-width: 60ch; }
body .pr-was { color: var(--cp-mist); }

/* ─── Mobile · type column, gutters, sticky action bar ─── */
.stickybar { display: none; }
@media (max-width: 920px) {
  .contact-hero { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  body { padding-bottom: 112px; }
  main { padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
  .scene__title, .hero__title, body .pr-formula { font-size: 32px; line-height: 36px; letter-spacing: 0.012em; }
  .scene--cta .scene__title, .sec__title, body .pr-ent__title, body .pr-faq__title { font-size: 24px; line-height: 32px; }
  .lead__a { font-size: 20px; line-height: 28px; }
  .scene__body, .hero__lede, .sec__body, body .pr-sub { font-size: 16px; line-height: 24px; }
  .prose h2 { font-size: 20px; line-height: 28px; }
  .prose p, .prose li, .qa__a, .term__def, .index__d { font-size: 14px; line-height: 20px; }
  .scene--page { padding: 40px var(--pad-x) 56px; }
  .crumbs { margin-bottom: 24px; }
  .scene--cta { padding: 64px var(--pad-x); }
  .sec { padding: 48px var(--pad-x); }
  .lead-sec { padding: 48px var(--pad-x) 8px; }
  .index__item { padding: 16px; }
  .index__arrow { display: none; }
  .term { grid-template-columns: 1fr; gap: 6px; }
  .cform__row { grid-template-columns: 1fr; }
  .contact-hero__form { padding: 16px; }
  .stickybar { display: flex; flex-direction: column; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; padding: 12px var(--pad-x) calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--cp-frost); }
  .stickybar .btn { width: 100%; min-height: 48px; }
  .stickybar__note { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--cp-green); }
  .stickybar__note svg { width: 14px; height: 14px; }
  .btn__note { font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(255,255,255,0.95); border-left: 1px solid rgba(255,255,255,0.35); padding-left: 8px; }
  html.modal-open .stickybar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .index__item, .btn { transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── Product screenshots on inner pages ──────────────────
   Same treatment as the homepage: real capture, full section
   width, frost border and the Cloud Paper card shadow.   */
.shot { margin: 24px 0 0; background: #fff; border: 1px solid var(--cp-frost); border-radius: 12px; overflow: hidden; box-shadow: var(--cp-shadow-card); }
.shot img { display: block; width: 100%; height: auto; }
.shot__cap { font-size: 14px; line-height: 20px; letter-spacing: 0.004em; color: var(--cp-slate); max-width: 72ch; margin-top: 12px; }

/* ─── One stored audit record, as text ────────────────────
   A monospace stack is used only here: JSON needs aligned
   columns. Cloud Paper has no monospace face for labels.  */
.rawrow { margin-top: 24px; max-width: 820px; background: #fff; border: 1px solid var(--cp-frost); border-radius: 12px; box-shadow: var(--cp-shadow-card); overflow: hidden; }
.rawrow__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-slate); padding: 12px 20px; border-bottom: 1px solid var(--cp-frost); background: rgba(9,17,53,0.02); margin: 0; }
.rawrow__json { margin: 0; padding: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rawrow__json code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 22px; color: var(--cp-ink); white-space: pre; }
@media (max-width: 600px) { .rawrow__json { padding: 14px; } .rawrow__json code { font-size: 12px; line-height: 20px; } }