/* keePriv marketing site — built on the keePriv brand tokens (tokens.css).
   Rules followed from the brand guide: pill controls, 14px cards / 20px panels,
   teal-tinted shadows, one orange element per view, no gradients on buttons/cards,
   no stock photography, no emoji, sentence case copy. */

/* ---------- Layout ---------- */
.wrap{max-width:var(--max-content);margin-inline:auto;padding-inline:var(--gutter-page)}
@media (min-width:900px){.wrap{padding-inline:var(--gutter-page-wide)}}

.sr-only{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-6);top:-48px;background:var(--teal-900);color:#fff;padding:10px 18px;border-radius:var(--radius-control);z-index:100;transition:top var(--duration-fast) var(--ease-standard)}
.skip-link:focus{top:var(--space-6)}

section{padding:var(--space-13) 0}
.section-tight{padding:var(--space-11) 0}
.section-alt{background:var(--surface-page);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.section-header{max-width:640px;margin-bottom:var(--space-10)}
.section-header .eyebrow{color:var(--text-brand)}
.section-header h2{margin-bottom:var(--space-5)}
.section-header p{color:var(--text-body);font-size:var(--text-lg);line-height:var(--leading-relaxed)}
.section-footer-cta{margin-top:var(--space-10);text-align:center}

.eyebrow{font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:800;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;display:block;margin-bottom:var(--space-6)}

hr.rule{border:0;border-top:1px solid var(--border-default);margin:var(--space-11) 0}

/* ---------- Icon (mask-image over currentColor, matching the brand's Icon component) ---------- */
.icon{display:inline-block;flex:none;width:20px;height:20px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.icon-sm{width:16px;height:16px}
.icon-md{width:18px;height:18px}
.icon-lg{width:22px;height:22px}
.icon-xl{width:28px;height:28px}
.icon-2xl{width:32px;height:32px}

.icon-shield-check{-webkit-mask-image:url('../icons/shield-check.svg');mask-image:url('../icons/shield-check.svg')}
.icon-circle-dollar-sign{-webkit-mask-image:url('../icons/circle-dollar-sign.svg');mask-image:url('../icons/circle-dollar-sign.svg')}
.icon-layout-dashboard{-webkit-mask-image:url('../icons/layout-dashboard.svg');mask-image:url('../icons/layout-dashboard.svg')}
.icon-chart-column{-webkit-mask-image:url('../icons/chart-column.svg');mask-image:url('../icons/chart-column.svg')}
.icon-list-checks{-webkit-mask-image:url('../icons/list-checks.svg');mask-image:url('../icons/list-checks.svg')}
.icon-arrow-right{-webkit-mask-image:url('../icons/arrow-right.svg');mask-image:url('../icons/arrow-right.svg')}
.icon-menu{-webkit-mask-image:url('../icons/menu.svg');mask-image:url('../icons/menu.svg')}
.icon-x{-webkit-mask-image:url('../icons/x.svg');mask-image:url('../icons/x.svg')}
.icon-badge-check{-webkit-mask-image:url('../icons/badge-check.svg');mask-image:url('../icons/badge-check.svg')}
.icon-check-circle-2{-webkit-mask-image:url('../icons/check-circle-2.svg');mask-image:url('../icons/check-circle-2.svg')}
.icon-lock{-webkit-mask-image:url('../icons/lock.svg');mask-image:url('../icons/lock.svg')}
.icon-mail{-webkit-mask-image:url('../icons/mail.svg');mask-image:url('../icons/mail.svg')}
.icon-alert-triangle{-webkit-mask-image:url('../icons/alert-triangle.svg');mask-image:url('../icons/alert-triangle.svg')}
.icon-users{-webkit-mask-image:url('../icons/users.svg');mask-image:url('../icons/users.svg')}
.icon-key-round{-webkit-mask-image:url('../icons/key-round.svg');mask-image:url('../icons/key-round.svg')}
.icon-chevron-down{-webkit-mask-image:url('../icons/chevron-down.svg');mask-image:url('../icons/chevron-down.svg')}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--surface-glass);border-bottom:1px solid var(--border-default)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);gap:var(--space-7)}
.topbar-actions{display:flex;align-items:center;gap:var(--space-6)}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:40px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:var(--space-9)}
.nav-links{display:flex;gap:var(--space-8);list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text-body);font-weight:600;font-size:var(--text-md);text-decoration:none;padding:22px 0;border-bottom:2px solid transparent;display:inline-block}
.nav-links a:hover{color:var(--text-brand)}
.nav-links a[aria-current="page"]{color:var(--text-brand);border-bottom-color:var(--teal-500)}
.nav-toggle{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-default);background:var(--surface-card);align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary)}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-cta-desktop{display:none}
  .nav-toggle{display:inline-flex}
}

.mobile-menu{position:fixed;inset:var(--topbar-h) 0 0 0;background:var(--surface-card);z-index:39;padding:var(--space-9) var(--gutter-page) var(--space-11);display:none;overflow-y:auto}
.mobile-menu.is-open{display:block}
.mobile-menu a{display:block;padding:var(--space-6) 0;font-size:var(--text-xl);font-weight:600;color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-subtle)}
.mobile-menu .btn{margin-top:var(--space-8);width:100%}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-md);padding:0 24px;border-radius:var(--radius-control);font-weight:700;font-size:var(--text-md);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:var(--transition-control);white-space:nowrap}
.btn-lg{height:var(--control-h-lg);padding:0 30px;font-size:var(--text-lg)}
.btn-primary{background:var(--action-primary-bg);color:var(--text-on-brand)}
.btn-primary:hover{background:var(--action-primary-bg-hover)}
.btn-primary:active{background:var(--action-primary-bg-active)}
.btn-accent{background:var(--action-accent-bg);color:var(--text-on-accent)}
.btn-accent:hover{background:var(--action-accent-bg-hover)}
.btn-accent:active{background:var(--action-accent-bg-active)}
.btn-secondary{background:var(--action-secondary-bg);color:var(--text-brand);border-color:var(--border-brand)}
.btn-secondary:hover{background:var(--action-secondary-bg-hover)}
.btn-ghost-inverse{background:transparent;color:#fff;border-color:rgba(255,255,255,0.55)}
.btn-ghost-inverse:hover{background:rgba(255,255,255,0.14)}
.btn:active{transform:scale(var(--press-scale))}
.btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.btn[disabled]{background:var(--action-disabled-bg);color:var(--action-disabled-text);cursor:not-allowed}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--gradient-brand);color:#fff;padding:var(--space-14) 0 var(--space-13)}
.hero-sm{padding:var(--space-12) 0 var(--space-11)}
.hero::before{content:"";position:absolute;top:0;right:0;width:320px;height:320px;background:url('../img/pattern-dots-quarter.png') no-repeat top right/contain;opacity:.3;pointer-events:none}
.hero-wave{position:absolute;right:0;bottom:-2px;width:100%;max-width:820px;opacity:.85;pointer-events:none;display:block}
.hero-inner{position:relative;z-index:1;max-width:740px}
.hero .eyebrow{color:var(--teal-100)}
.hero h1{color:#fff;margin-bottom:var(--space-7)}
.hero p.lede{font-size:var(--text-xl);color:var(--teal-50);max-width:58ch;margin-bottom:var(--space-9);line-height:var(--leading-relaxed)}
.hero-actions{display:flex;gap:var(--space-6);flex-wrap:wrap}

/* ---------- Cards / grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
@media (min-width:760px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:var(--space-7)}
@media (min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);padding:var(--space-9);box-shadow:var(--shadow-1);transition:box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.card:hover{box-shadow:var(--shadow-2);transform:var(--lift-hover)}
.card-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--surface-brand-soft);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-7);color:var(--text-brand)}
.card h3{font-size:var(--text-xl);font-family:var(--font-sans);font-weight:700;letter-spacing:0;color:var(--text-primary);margin-bottom:var(--space-4)}
.card p{color:var(--text-body);line-height:var(--leading-relaxed)}
.card .card-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-7);font-weight:700;font-size:var(--text-sm);color:var(--text-brand);text-decoration:none}
.card .card-link:hover{color:var(--text-brand-strong)}
.card .card-link .icon{transition:transform var(--duration-fast) var(--ease-standard)}
.card .card-link:hover .icon{transform:translateX(3px)}

/* Whole-card link variant: <a class="card card-link"> wrapping a .card-link-label span */
a.card.card-link{display:block;text-decoration:none}
.card-link-label{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-7);font-weight:700;font-size:var(--text-sm);color:var(--text-brand)}
a.card.card-link:hover .card-link-label{color:var(--text-brand-strong)}
a.card.card-link:hover .card-link-label .icon{transform:translateX(3px)}
.card-link-label .icon{transition:transform var(--duration-fast) var(--ease-standard)}

.panel{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-surface);padding:var(--space-10)}

/* ---------- Check list ---------- */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.check-list li{display:flex;gap:var(--space-5);align-items:flex-start;color:var(--text-body);line-height:var(--leading-relaxed)}
.check-list .icon{color:var(--teal-600);margin-top:2px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--surface-card)}
.cta-band-inner{max-width:640px;margin-inline:auto;text-align:center;padding:var(--space-11) var(--space-9);border-top:1px solid var(--border-default)}
.cta-band h2{color:var(--text-primary);margin-bottom:var(--space-5)}
.cta-band p{color:var(--text-body);margin-bottom:var(--space-8);font-size:var(--text-lg)}

/* ---------- Forms ---------- */
.form-field{display:grid;gap:var(--space-4);margin-bottom:var(--space-7)}
.form-field label{font-weight:600;font-size:var(--text-sm);color:var(--text-primary)}
.form-hint{font-size:var(--text-xs);color:var(--text-secondary)}
.form-field input,.form-field select{font-family:var(--font-sans);font-size:var(--text-md);padding:0 var(--space-7);height:var(--control-h-md);border-radius:var(--radius-control);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-primary);width:100%}
.form-field select{appearance:none;-webkit-appearance:none;background-image:url('../icons/chevron-down.svg');background-repeat:no-repeat;background-position:right 18px center;background-size:16px;padding-right:44px}
.form-field textarea{font-family:var(--font-sans);font-size:var(--text-md);padding:var(--space-6) var(--space-7);border-radius:var(--radius-surface);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-primary);min-height:150px;resize:vertical;width:100%}
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{outline:none;box-shadow:var(--ring-focus);border-color:var(--border-brand)}
.form-row{display:grid;grid-template-columns:1fr;gap:0 var(--space-7)}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-note{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-6);display:flex;gap:var(--space-4);align-items:flex-start}
.form-note .icon{margin-top:2px;color:var(--text-secondary);flex:none}
.form-success{background:var(--surface-success-soft);border:1px solid var(--border-success);border-radius:var(--radius-surface);padding:var(--space-9)}
.form-success[hidden]{display:none}
form.is-hidden{display:none}
.form-success h3{margin-bottom:var(--space-4);font-size:var(--text-xl)}
.form-success p{color:var(--text-body);line-height:var(--leading-relaxed)}

.form-error{background:var(--surface-warning-soft);border:1px solid var(--border-accent);border-radius:var(--radius-surface);padding:var(--space-6) var(--space-7);margin-bottom:var(--space-7);color:var(--text-primary);font-size:var(--text-sm)}
.form-error[hidden]{display:none}

/* Honeypot spam-trap field: invisible to real visitors and screen readers, present for bots. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Legal draft banner + prose ---------- */
.draft-banner{display:flex;gap:var(--space-6);align-items:flex-start;background:var(--surface-warning-soft);border:1px solid var(--border-accent);border-radius:var(--radius-surface);padding:var(--space-7);margin-bottom:var(--space-11)}
.draft-banner .icon{color:var(--text-accent);margin-top:2px}
.draft-banner strong{display:block;margin-bottom:4px;color:var(--text-primary);font-size:var(--text-md)}
.draft-banner p{color:var(--text-body);font-size:var(--text-sm);margin:0;line-height:var(--leading-relaxed)}

.prose{max-width:var(--max-prose)}
.prose h2{font-size:var(--text-xxl);font-family:var(--font-sans);font-weight:700;letter-spacing:0;margin-top:var(--space-11);margin-bottom:var(--space-5)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--text-body);line-height:var(--leading-relaxed);margin-bottom:var(--space-6)}
.prose ul{padding-left:var(--space-8);margin:0 0 var(--space-6)}
.prose .updated{color:var(--text-secondary);font-size:var(--text-sm)}

/* ---------- Footer ---------- */
footer{background:var(--surface-card);color:var(--text-body);border-top:1px solid var(--border-default)}
.footer-top{padding:var(--space-12) 0 var(--space-9)}
.footer-grid{display:grid;gap:var(--space-10);grid-template-columns:1fr;padding-top:var(--space-12)}
@media (min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-brand img{height:34px;margin-bottom:var(--space-6)}
.footer-brand p{max-width:36ch;color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--leading-relaxed)}
footer h4{color:var(--text-secondary);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);margin-bottom:var(--space-6)}
footer a{color:var(--text-body);text-decoration:none;font-size:var(--text-sm)}
footer a:hover{color:var(--text-brand)}
.footer-nav{display:grid;grid-template-columns:1fr;gap:var(--space-9)}
@media (min-width:480px){.footer-nav{grid-template-columns:1fr 1fr}}
.footer-nav > div{display:grid;gap:var(--space-4)}
.footer-bottom{border-top:1px solid var(--border-subtle);padding:var(--space-7) 0 var(--space-9);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-5);font-size:var(--text-sm);color:var(--text-secondary)}
.footer-bottom a{color:var(--text-secondary)}
.footer-bottom a:hover{color:var(--text-brand)}

/* ---------- Misc ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}