/* Shared visual roles for the landing page, forms and legal pages. */
:root{
  --sans:'Inter Variable',Inter,system-ui,sans-serif;
  --type-body:16px;--type-small:14px;--type-meta:12px;--type-section:24px;
  --ink:#000;--paper:#fff;--muted:#686a70;--line:#e5e5e5;--line-strong:#b9bbc0;--surface-soft:#f5f5f5;
  --blue:#0242e2;
  /* Product tokens from frontend/src/solvigo-ds.css; keep the footer brand blue. */
  --adlooper-blue-ui:rgba(2,66,226,.72);--adlooper-blue-ui-hover:var(--adlooper-blue-ui);
  --action:var(--adlooper-blue-ui);--action-hover:var(--adlooper-blue-ui-hover);
  /* Opaque equivalents keep the app tone identical over the ocean. */
  --action-on-dark:#4977ea;--action-on-dark-hover:var(--action-on-dark);
  --field-focus-border:rgba(2,66,226,.24);--field-focus-shadow:0 7px 24px rgba(2,66,226,.055);
  --on-color:#fff;--on-blue-secondary:#c3d3fb;--error:#b3261e;
  --panel-shadow:0 16px 64px rgb(0 0 0 / 10%);
  --control-radius:12px;--panel-radius:16px;--control-height:48px;--button-height:40px;
  --button-border:rgb(0 0 0 / 15%);--button-border-hover:rgb(0 0 0 / 30%);
  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;
}
body,button,input,select,textarea{font-family:var(--sans)}
body{font-size:var(--type-body);line-height:1.5}
button,input,select,textarea{letter-spacing:0}
.hero-inner{width:min(900px,calc(100% - 48px));padding:clamp(56px,9svh,112px) 0}
.hero-logo{width:clamp(300px,26vw,360px);max-width:85%;margin-bottom:clamp(32px,5svh,48px)}
.hero h1{font-size:clamp(36px,5.2vw,68px);font-weight:400;line-height:1.08;letter-spacing:-.052em}
@media(min-width:1024px){.hero h1{font-size:clamp(56px,5.2vw,68px)}}
.hero h1 em{font-weight:inherit;font-style:italic}
.hero-copy{max-width:620px;font-size:var(--type-body);font-weight:400;line-height:1.5;letter-spacing:-.012em;color:#fff;margin-top:24px;text-wrap:pretty}
.intro h1{font-size:clamp(36px,4.8vw,64px);font-weight:500;line-height:1.08;letter-spacing:-.045em}
article h2,.dialog h2,.consent-dialog h3{font-size:var(--type-section);font-weight:600;line-height:1.25;letter-spacing:-.03em}
article h2{margin:0 0 var(--space-2)}
article h3{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.02em;margin:var(--space-3) 0 var(--space-1)}
article p,article li{font-size:var(--type-body);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--ink)}
article p{margin:0 0 var(--space-2)}
article section{padding-bottom:var(--space-4)}
.back,.toc,.toc a{font-size:var(--type-small);font-weight:400;line-height:1.5;letter-spacing:0}
.back{font-size:var(--type-body)}
.toc{gap:var(--space-1)}
.policy-meta,.privacy,.field-error,.formstate,.footer-meta p,.consent-dialog .consent-note{font-size:var(--type-meta);font-weight:400;line-height:1.5;letter-spacing:0}
.footer-links,.footer-links button{font-size:var(--type-small);font-weight:400;line-height:1.5;letter-spacing:0}
.footer-statement{font-size:clamp(28px,3vw,44px);font-weight:400;line-height:1.08;letter-spacing:-.045em}
.button,.hero .button,.submit,.cookie-actions button,.consent-dialog .cookie-actions button{
  min-height:var(--button-height);font-size:var(--type-small);font-weight:500;line-height:1.5;
  border-radius:var(--control-radius);padding:0 var(--space-3);letter-spacing:0;
  border:1px solid rgb(0 0 0 / 10%);box-shadow:none;transition:background-color .18s,border-color .18s;
}
.hero .button{margin-top:32px;min-width:170px}
.dialog-shell,.consent-dialog{width:min(100%,480px)}
.dialog,.consent-dialog{padding:var(--space-4);border-radius:var(--panel-radius);border:1px solid var(--line);background:#fff;color:var(--ink)}
.dialog h2{margin:0;padding-right:32px}
.dialog .form-intro{margin:var(--space-1) 0 0}
.dialog .fields{gap:var(--space-2);margin-top:var(--space-3)}
.fields label,.choice label{font-size:var(--type-small);font-weight:500;line-height:1.5;letter-spacing:0}
.fields label{font-weight:400}

.fields label{margin:0 0 var(--space-1)}
.fields input{height:var(--control-height);padding:0 var(--space-2);font-size:var(--type-small);font-weight:400;line-height:1.5;border-radius:var(--control-radius)}
.submit{margin-top:var(--space-3)}
.privacy{margin:var(--space-2) 0 0}
.field-error{margin:var(--space-1) 0 0}
.field-error:empty{margin:0}
.form-intro,.consent-dialog p,.consent-dialog .choice-desc{font-size:var(--type-small);font-weight:400;line-height:1.5;letter-spacing:0}
.consent-dialog>p{margin:var(--space-1) 0 0}
.consent-dialog .choice{padding:var(--space-2) 0}
.consent-dialog .choice-desc{margin:var(--space-1) 52px 0 0}
.consent-dialog .consent-note{margin-top:var(--space-2)}
.consent-dialog .cookie-actions{gap:var(--space-1);margin-top:var(--space-3)}
.consent-dialog .cookie-actions button{padding-inline:12px}
/* Grow smoothly only when both viewport dimensions have spare room. */
.cookie-banner{
  --notice-growth:min(clamp(0px,calc((100vw - 1440px)/6),80px),clamp(0px,calc((100dvh - 800px)/2),80px));
  --notice-edge:clamp(12px,1.25vw,24px);
  --notice-right:max(var(--notice-edge),env(safe-area-inset-right,0px));
  --notice-bottom:max(var(--notice-edge),env(safe-area-inset-bottom,0px));
  width:min(calc(320px + var(--notice-growth)),calc(100% - var(--notice-right) - max(var(--notice-edge),env(safe-area-inset-left,0px))));
  max-height:calc(100dvh - var(--notice-bottom) - max(var(--notice-edge),env(safe-area-inset-top,0px)));
  padding:calc(18px + var(--notice-growth)*.075);right:var(--notice-right);bottom:var(--notice-bottom);left:auto;
  border-radius:calc(20px + var(--notice-growth)*.05);overflow:auto;overscroll-behavior:contain;
}
.cookie-banner h2{font-size:calc(14px + var(--notice-growth)/40);font-weight:500;line-height:1.35;letter-spacing:-.012em;margin:0 0 var(--space-1)}
.cookie-banner p{font-size:calc(12px + var(--notice-growth)/40);font-weight:400;line-height:1.5;letter-spacing:0}
.cookie-banner .cookie-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:calc(16px + var(--notice-growth)/20);gap:6px}
.cookie-banner .cookie-actions button{min-width:0;min-height:calc(32px + var(--notice-growth)/20);font-size:calc(12px + var(--notice-growth)/80);line-height:1.5;padding:4px 6px;border-radius:var(--control-radius);white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){
  .hero-inner{width:calc(100% - 36px);padding:64px 0 max(48px,env(safe-area-inset-bottom))}
  .hero-logo{width:clamp(230px,65vw,300px);margin-bottom:32px}
  .hero h1{font-size:clamp(36px,7.2vw,50px)}
  .hero h1 span{white-space:normal}
  .hero-copy{max-width:460px;font-size:var(--type-body)}
}
@media(min-width:701px) and (max-height:700px){
  .hero-inner{padding:32px 0}
  .hero-logo{width:300px;margin-bottom:24px}
  .hero-copy{margin-top:18px}
  .hero .button{margin-top:24px}
}
@media(max-width:600px){
  .dialog,.consent-dialog{padding:var(--space-3)}
  .dialog .fields{margin-top:var(--space-2)}
  .fields input{font-size:16px}
  .hero .button{margin-top:var(--space-4)}
  .cookie-banner .cookie-actions button{min-height:44px}
  .consent-dialog .choice-desc{margin-right:0}
}
@media(pointer:coarse){.cookie-banner .cookie-actions button{min-height:44px}}

/* One palette, with explicit roles on white, ocean and blue backgrounds. */

body{background:var(--paper);color:var(--ink)}
article p,article li,.intro h1,article h2,article h3,.policy-meta,
.fields label,.fields input,.form-intro,.privacy,.formstate:not(.error),
.consent-dialog h3,.consent-dialog p,.consent-dialog .choice-desc,
.consent-dialog .consent-note,.choice label,.cookie-banner h2,.cookie-banner p{color:var(--ink)}
.policy-meta{opacity:1}
.dialog .privacy,.consent-dialog .consent-note{color:var(--muted)}
.dialog .privacy a,.consent-dialog .consent-note a{color:inherit;transition:color .18s}
.dialog .privacy a:hover,.dialog .privacy a:focus-visible,.consent-dialog .consent-note a:hover,.consent-dialog .consent-note a:focus-visible{color:var(--ink)}
.toc,.toc a{color:var(--muted)}
.back{color:var(--muted);transition:color 130ms cubic-bezier(.4,0,.2,1)}
.back:hover,.back:focus-visible,.toc a:hover{color:var(--ink)}
.fields input::placeholder{color:var(--muted);opacity:1}
.fields input{background:var(--paper);border-color:var(--line)}
.fields input:hover{border-color:var(--line-strong)}
.fields input:focus{border-color:var(--field-focus-border);box-shadow:var(--field-focus-shadow);outline:none;background:var(--paper)}
.fields input[aria-invalid="true"]{border-color:var(--error)}
.field-error,.formstate.error{color:var(--error)}
.hero,.hero h1,.hero-copy{color:var(--on-color)}
.hero .button{background:var(--action-on-dark);color:var(--on-color);border-color:transparent;font-weight:500}
.hero .button:hover{background:var(--action-on-dark-hover);border-color:transparent;color:var(--on-color);box-shadow:none}
.submit,.consent-dialog [data-consent-save]{background:var(--action);border-color:transparent;color:var(--on-color);background-clip:padding-box}
.submit:hover,.consent-dialog [data-consent-save]:hover{background:var(--action-hover);border-color:transparent;color:var(--on-color);box-shadow:none}
.dialog,.consent-dialog,.cookie-banner{background:var(--paper);color:var(--ink);border-color:var(--line)}
.cookie-actions button{background:transparent;color:var(--ink);border-color:var(--button-border)}
.cookie-actions button:hover{background:transparent;color:var(--ink);border-color:var(--button-border-hover)}
.cookie-banner a,.consent-note a,.privacy a,.policy-settings{color:inherit}
.close{background:var(--surface-soft)}
.close:before,.close:after{background:var(--ink)}
.consent-dialog .cookie-choices,.consent-dialog .choice{border-color:var(--line)}
.switch{background:var(--surface-soft);border-color:var(--line-strong)}
.switch:before{background:var(--muted)}
.choice input:checked+.switch{background:var(--action);border-color:transparent;background-clip:padding-box}
.choice input:checked+.switch:before{background:var(--paper)}
.cookie-banner :focus-visible,.consent-modal :focus-visible,.choice input:focus-visible+.switch,.dialog button:focus-visible,.dialog a:focus-visible{outline-color:var(--action)}
.site-footer{background:var(--blue);color:var(--on-color)}
.footer-statement,.footer-links,.footer-links a,.footer-links button{color:var(--on-color)}
.footer-statement .soft,.footer-meta p{color:var(--on-blue-secondary)}
.intro .policy-meta{font-size:var(--type-meta);line-height:1.5;font-weight:400;color:var(--muted);opacity:1}

.modal,.consent-modal{background:rgb(0 0 0 / 38%);backdrop-filter:blur(8px)}
.dialog,.consent-dialog{box-shadow:var(--panel-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.cookie-banner{background:#fafbff;border-color:rgb(0 0 0 / 5%);box-shadow:0 10px 36px rgb(0 15 40 / 9%);backdrop-filter:none;-webkit-backdrop-filter:none}
.cookie-banner p{color:#4c5059}
.cookie-banner a{transition:color .18s}
.cookie-banner a:hover,.cookie-banner a:focus-visible{color:var(--ink)}
.cookie-banner .cookie-actions button{background:transparent;border-color:var(--button-border);font-weight:500}
.cookie-banner .cookie-actions button:hover{background:transparent;border-color:var(--button-border-hover)}
@media(max-width:359px){.cookie-banner .cookie-actions{grid-template-columns:1fr}}
/* A banner must never push the hero above the viewport. */
body.asking .hero-inner{transform:none}
/* Keep one foreground card at a time while the contact form is open. */
body:has(.modal.open) .cookie-banner{visibility:hidden;opacity:0;pointer-events:none}

/* Cookie controls share the app's action colors and compact button sizing. */
.consent-dialog .cookie-actions button{min-height:40px;border-radius:12px;padding:0 16px;font-size:14px;font-weight:500;box-shadow:none}
.consent-dialog .cookie-actions [data-consent-save]{background-color:var(--adlooper-blue-ui);border-color:transparent;color:#fff}
.consent-dialog .cookie-actions [data-consent-save]:hover{background-color:var(--adlooper-blue-ui-hover);border-color:transparent;color:#fff}
.consent-dialog .choice input:checked+.switch{background-color:var(--adlooper-blue-ui);border-color:transparent}
.consent-dialog .cookie-actions [data-consent-decline]{background:transparent;border-color:var(--button-border);color:#000}
.consent-dialog .cookie-actions [data-consent-decline]:hover{background:transparent;border-color:var(--button-border-hover)}
@media(pointer:coarse),(max-width:600px){.consent-dialog .cookie-actions button,.cookie-banner .cookie-actions button{min-height:44px}}

@media(pointer:coarse){.hero .button,.submit{min-height:44px}}

/* Match the app's polish.css interaction timing and movement for every CTA. */
:is(.hero .button,.submit,.cookie-actions button,.close,.footer-links button,.policy-settings){
  transform:translateY(0) scale(1);
  transition:transform 220ms cubic-bezier(.34,1.4,.64,1),
    box-shadow 220ms cubic-bezier(.22,1,.36,1),
    background-color 130ms cubic-bezier(.4,0,.2,1),
    border-color 130ms cubic-bezier(.4,0,.2,1),
    color 130ms cubic-bezier(.4,0,.2,1),
    opacity 130ms cubic-bezier(.4,0,.2,1);
}
:is(.hero .button,.submit,.cookie-actions button,.close,.footer-links button,.policy-settings):not(:disabled):hover{transform:translateY(-1px)}
:is(.hero .button,.submit,.cookie-actions button,.close,.footer-links button,.policy-settings):not(:disabled):active{transform:translateY(0) scale(.975);transition-duration:130ms}
@media(prefers-reduced-motion:reduce){
  :is(.hero .button,.submit,.cookie-actions button,.close,.footer-links button,.policy-settings):not(:disabled):is(:hover,:active){transform:none;transition:none}
}