/* Shared styling for the secondary pages (/privacy, 404).
   index.html carries its own inlined copy of the token block so its first
   paint costs a single round trip - keep the two in sync. */

@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-display.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-var.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  /* Palette, type and shape are taken from the "De eerlijke check mockups"
     Claude Design project (Webshop prototype.dc.html) so this page and the
     webshop read as one brand. Values below are the project's own, except
     where noted. */
  --blush:#F6E7E1;      /* project section background */
  --sand:#F5E9DC;       /* project card background */
  --cream:#FFF9F4;      /* project page background, cards and input fills */
  --pink:#FBE3ED;       /* project pale pink surface */

  /* The project's accent is #C4557F, but white on it is only 4.24:1. Its own
     CTAs dodge this with a gradient into #B14A72, so #B14A72 is used wherever
     the accent sits behind text or carries a label (4.91:1 with cream). */
  --accent:#C4557F;
  --accent-deep:#B14A72;
  --accent-soft:#CE6E93; /* project CTA gradient start, decorative only */
  --accent-deeper:#9C4064; /* derived: hover step, the mockups have no hover fill */

  --ink:#2E2622;
  --ink-muted:#6E5C4C;
  --ink-meta:#8A7A6E;   /* project meta text - large text only, 3.95:1 on cream */

  --danger:#9E3223;     /* kept: the design project defines no error colour */

  --line:rgba(46,38,34,.12);
  --line-strong:rgba(46,38,34,.2);
  --line-soft:rgba(46,38,34,.08);

  --r-s:12px; --r-m:16px; --r-pill:999px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* An author `display` beats the UA stylesheet's [hidden] rule, so .form's
   display:flex would keep the form on screen after a successful signup. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background-color:var(--blush);
  background-image:
    radial-gradient(115% 70% at 50% -10%, rgba(255,249,244,.6), rgba(255,249,244,0) 62%),
    linear-gradient(180deg, rgba(245,233,220,0) 42%, rgba(245,233,220,.7) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

.backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background-image:url(/assets/face.svg);
  background-repeat:no-repeat;
  background-position:right -14vw top -10svh;
  background-size:auto 64svh;
}

.page{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  padding:max(24px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  gap:24px;
}

.logo{
  display:block;
  width:min(196px,58vw);
  max-height:44px;
  height:auto;
  margin:0 0 26px;
}

h1{
  font-family:var(--serif);
  font-weight:400;
  font-synthesis-weight:none;
  font-size:clamp(1.875rem,7vw,2.5rem);
  line-height:1.13;
  margin:0 0 14px;
}
h2{
  font-family:var(--serif);
  font-weight:400;
  font-synthesis-weight:none;
  font-size:1.1875rem;
  line-height:1.25;
  margin:32px 0 8px;
}
p,ul{margin:0 0 14px}
ul{padding-left:1.15em}
li{margin-bottom:6px}
a{color:var(--accent-deep);text-underline-offset:2px}
a:hover{color:var(--accent-deeper)}
strong{font-weight:600}

/* --- centred confirmation-style page ------------------------------------- */
.card{
  width:100%;
  max-width:460px;
  margin:auto;
  text-align:center;
}
.card .logo{margin:0 auto 24px}
.card p{color:var(--ink-muted);font-size:.9375rem}
.card .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin-top:8px;
  padding:12px 22px;
  font-size:.9375rem;
  font-weight:600;
  color:var(--cream);
  background:var(--accent-deep);
  border-radius:var(--r-pill);
  text-decoration:none;
  transition:background-color .15s ease;
}
.card .cta:hover{background:var(--accent-deeper);color:var(--cream)}

/* --- long-form document --------------------------------------------------- */
.doc{
  width:100%;
  max-width:680px;
  margin:0 auto;
  padding:26px 22px 30px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-m);
}
.doc .meta{font-size:.8125rem;color:var(--ink-muted);margin-bottom:26px}
.doc p,.doc li{font-size:.9375rem;line-height:1.65}
.doc h2:first-of-type{margin-top:0}

/* --- social + footer ------------------------------------------------------ */
.social{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 8px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
.social a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 12px;
  border-radius:var(--r-s);
  font-size:.8125rem;
  color:var(--ink);
  text-decoration:none;
  transition:background-color .15s ease;
}
.social a:hover{background:rgba(46,38,34,.06);color:var(--ink)}
.social svg{flex:0 0 auto;width:17px;height:17px}

.foot{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 14px;
  font-size:.75rem;
  color:var(--ink-muted);
}
.foot a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 6px;
  color:var(--ink-muted);
  text-decoration:underline;
}
.foot a:hover{color:var(--ink)}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media (min-width:900px){
  .page{padding:40px}
  .backdrop{background-position:right -6vw top -12svh;background-size:auto 92svh}
  h1{font-size:clamp(2.25rem,3.4vw,2.75rem)}
  .doc{padding:38px 44px 42px}
}