/* recmory.com · site.css · the shell of every page but the home (the home carries home.css).
   One site, one skin: the faces, colours, top bar and Ink footer are the home page's own, copied from
   home.css (r107 Mona Sans for text and Newsreader for headlines, r100 the footer is Ink). Faces are
   self-hosted from /assets/fonts/. Light only (08 §5). Every transition sits inside
   prefers-reduced-motion: no-preference (08 §6.2).
   Never: a coloured side line on a box, a pause on hover, a soft-blue pill chip, a default grotesk,
   grey text on cobalt, a glow or a gradient wash. */

@font-face{font-family:"Mona";src:url(/assets/fonts/mona.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:block}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:block}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:block}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:block}

:root{
  --cobalt:#1649D8; --cobalt-deep:#0E36AA;
  --white:#FFFFFF; --mist:#F1F3F7;
  --ink:#17191D; --soft-ink:#343842; --grey:#5B616C;
  --hair:#17191D1A; --rule:#17191D2E;
  --ph-bg:#FBE7B5; --ph-line:#9A6A1C;
  --ui:"Mona",system-ui,sans-serif;
  --display:"Newsreader",Georgia,serif;
  --mono:"Plex Mono",ui-monospace,monospace;
  --r:14px;
  --gut:clamp(16px,4vw,40px);
  --eo:cubic-bezier(.23,1,.32,1);
  color-scheme:light;
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--white);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--white);color:var(--ink);font:420 1.0625rem/1.62 var(--ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;text-wrap:pretty}
main{flex:1 0 auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);color:var(--ink);text-wrap:balance}
a{color:var(--cobalt);text-decoration-line:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--cobalt-deep)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:calc(1200px + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:2;padding:12px 18px;border-radius:99px;background:var(--ink);color:var(--white);font-weight:620;text-decoration:none}
.skip:focus{top:12px;color:var(--white)}

/* ── the placeholder: unmistakable, never hidden (08 key) ── */
mark.ph{display:inline-block;max-width:100%;background:var(--ph-bg);color:var(--ink);font:500 .8em/1.55 var(--mono);letter-spacing:0;text-align:left;padding:.08em .42em;border-radius:4px;text-decoration:underline dotted var(--ph-line);text-decoration-thickness:1.5px;text-underline-offset:.28em;overflow-wrap:break-word}

/* ── the top bar: the home's nav, on its mist ── */
.site-header{background:var(--mist)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-height:72px;padding-block:14px}
.brand{display:inline-flex;align-items:center;min-height:44px;border-radius:4px}
.brand img{height:28px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;white-space:nowrap}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 7px;color:var(--soft-ink);font-size:.875rem;font-weight:500;text-decoration:none}
.nav-link:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-left:4px;padding:0 16px;border-radius:99px;font-size:.875rem;font-weight:620;line-height:1.2;text-decoration:none;white-space:nowrap}
.btn-ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair)}
.btn-ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px #17191D4D}
.btn-solid{background:var(--ink);color:var(--white)}
.btn-solid:hover{background:var(--soft-ink);color:var(--white)}
@media (max-width:719px){.nav-wide{display:none}}
@media (max-width:419px){.btn-ghost{display:none}}

/* ── the footer: Ink, the home's own (r100). Its own container, so the home's cqi sizes carry over ── */
.site-footer{container:foot/inline-size;position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#FFFFFFD9;
  --fg:clamp(28px,4cqi,56px);--fpad:clamp(16px,4cqi,48px)}
.foot-field{padding:clamp(64px,7cqi,96px) var(--fpad) 0}
.foot-in{max-width:1120px;margin:0 auto}
:where(.site-footer) :is(p,ul){margin:0;padding:0}
:where(.site-footer) ul{list-style:none}
.foot-top{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(0,34rem);column-gap:clamp(40px,6cqi,96px);align-items:start}
.foot-groups{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--fg))/3);column-gap:var(--fg);justify-content:end}
.foot-home{display:inline-block;line-height:0;border-radius:4px}
.foot-wm{display:block;height:28px;width:auto}
.foot-contact{margin-top:28px;max-width:16em;font-weight:440;font-size:clamp(19px,1.7cqi,23px);line-height:1.32;letter-spacing:-.006em;color:#FFFFFFD9}
.foot-say{display:inline-block}
.foot-grp{border-top:1px solid #FFFFFF26;padding-top:16px}
.foot-cap{margin-bottom:8px;font-family:var(--mono);font-weight:400;font-size:12px;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;color:#FFFFFFB8}
.foot-l{position:relative;display:inline-block;padding:6px 0;font-weight:460;font-size:15px;line-height:1.4;color:#FFFFFFD9;text-decoration:none}
.foot-l::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right}
.foot-contact .foot-l{font-size:inherit;font-weight:inherit;line-height:inherit;color:#FFFFFF;padding:0;overflow-wrap:anywhere}
.foot-contact .foot-l::after{bottom:-4px}
.site-footer :focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;border-radius:4px}
.foot-l:focus-visible{color:#FFFFFF}
.foot-l:focus-visible::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .foot-l:hover{color:#FFFFFF}
  .foot-l:hover::after{transform:scaleX(1);transform-origin:left}
}
/* the statutory buttons: the home's ghost pill, outlined in #FFFFFF33 */
.foot-law{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(44px,5cqi,68px)}
.foot-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 18px;border:1px solid #FFFFFF33;border-radius:99px;background:transparent;color:#FFFFFF;font-weight:560;font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.foot-btn:hover{border-color:#FFFFFF99;background:#FFFFFF14;color:#FFFFFF}}
.foot-base{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:clamp(20px,2cqi,26px);padding-top:14px;border-top:1px solid #FFFFFF1F;font-size:13.5px;line-height:1.6;color:#FFFFFFD9}
.foot-nt{white-space:nowrap}
.foot-dot{white-space:pre}
.site-footer mark.ph{background:#FFFFFF1F;color:#FFFFFF;font:400 12.5px/1.6 var(--mono);padding:0 5px;text-decoration:none;white-space:nowrap}
/* the one bold move: the wordmark, the home's own white one, flat at 7% white across the foot, whole (its y keeps its tail).
   With W its width, the ink starts .105W below the box top and ends .010W above its bottom; the margins pull both empty bands back. */
.foot-big{--fw:calc(100% + 2*var(--fpad) - 24px);margin:calc(clamp(40px,4.4cqi,64px) - var(--fw)*.105) calc(12px - var(--fpad)) calc(clamp(20px,2.4cqi,32px) - var(--fw)*.01);width:var(--fw);aspect-ratio:406/115;background:rgb(255 255 255 / .07);-webkit-mask:url(/assets/img/wordmark-monochrome-white.svg) center/100% 100% no-repeat;mask:url(/assets/img/wordmark-monochrome-white.svg) center/100% 100% no-repeat;pointer-events:none;user-select:none}
@container foot (max-width:860px){
  .site-footer{--fpad:16px}
  .foot-field{padding-top:56px}
  .foot-top{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .foot-groups{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-columns:auto;column-gap:24px;row-gap:24px;justify-content:normal}
  .foot-legal{grid-column:2;grid-row:1/span 2}
  .foot-l{padding:8px 0}
  .foot-l::after{bottom:7px}
  .foot-contact{max-width:14em}
  .foot-law{margin-top:40px;gap:10px}
  .foot-btn{padding:0 13px}
  .foot-base{flex-direction:column;align-items:flex-start;margin-top:32px}
  .foot-dot{display:none}
  .site-footer mark.ph{white-space:normal;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}

/* ── text pages: legal, questions, contact, 404 (the other half of the contract) ──
   Headlines in Newsreader (r107), calm in size: these are long reading pages. Text in Mona. */
.prose{max-width:68ch;margin-inline:auto;padding:clamp(40px,6vw,72px) var(--gut) clamp(72px,9vw,112px);box-sizing:content-box}
.prose h1{margin-bottom:24px;font-variation-settings:"opsz" 72;font-weight:470;font-size:clamp(2rem,1.55rem + 2vw,2.875rem);line-height:1.06;letter-spacing:-.022em}
.prose h2{margin:48px 0 12px;font-variation-settings:"opsz" 36;font-weight:500;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);letter-spacing:-.015em;line-height:1.2}
.prose h3{margin:32px 0 8px;font-variation-settings:"opsz" 24;font-weight:600;font-size:1.25rem;letter-spacing:-.01em;line-height:1.25}
.prose h2+h3{margin-top:16px}
.prose p,.prose ul,.prose ol,.prose dl,.prose table,.prose address,.prose blockquote{margin-bottom:16px}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:6px}
.prose li::marker{color:var(--grey)}
.prose address{font-style:normal}
.prose strong{font-weight:620}
.prose dl{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 24px}
.prose dt{font-weight:620}
.prose dd{margin:0 0 12px;color:var(--soft-ink)}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem}
.prose th,.prose td{padding:10px 16px 10px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.prose th{font-weight:620}
.prose blockquote{padding:14px 18px;border-radius:var(--r);background:var(--mist);color:var(--soft-ink)}
.prose blockquote>:last-child{margin-bottom:0}
.prose hr{margin:40px 0;border:0;border-top:1px solid var(--rule)}
.prose small,.prose .fine{font-size:.875rem;color:var(--grey)}
.prose .lede{font-size:1.1875rem;line-height:1.5;color:var(--soft-ink)}
.prose :lang(de){hyphens:auto;-webkit-hyphens:auto}
.prose:lang(de){hyphens:auto;-webkit-hyphens:auto}
@media (min-width:640px){.prose dl{grid-template-columns:minmax(9rem,max-content) minmax(0,1fr)}.prose dd{margin-bottom:8px}}

/* ── the long legal texts (privacy, terms), built from legal/*.md by legal_pages.py ──
   A wider column than the short pages, because of the tables; the lines of text keep their 68ch measure. */
.prose.legal{max-width:46rem}
.legal p,.legal li{max-width:68ch}
.legal .legal-meta{margin:-8px 0 12px;font-size:.9375rem;color:var(--grey)}
.legal h2{scroll-margin-top:16px}
.legal .toc{margin:28px 0 8px;padding:18px 20px 10px;border-radius:var(--r);background:var(--mist)}
.legal .toc-cap{margin:0 0 4px;font:500 .75rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.legal .toc ul,.legal .toc ol{margin:0;padding:0;list-style:none;columns:2 15rem;column-gap:32px}
.legal .toc li{margin:0;break-inside:avoid}
.legal .toc a{display:flex;align-items:center;min-height:44px;color:var(--ink);font-size:.9375rem;line-height:1.35;text-decoration:none}
.legal .toc a:hover{color:var(--cobalt-deep);text-decoration:underline}
.legal .toc ol{counter-reset:toc}
.legal .toc ol a::before{counter-increment:toc;content:counter(toc);flex:none;width:2.25em;font:500 .75rem/1 var(--mono);color:var(--grey)}
.legal table{table-layout:fixed;margin-block:8px 24px}
.legal .cols-2 th:first-child{width:34%}
.legal .cols-3 th:nth-child(-n+2){width:36%}
.legal .cols-4 th:nth-child(1){width:22%}
.legal .cols-4 th:nth-child(2){width:28%}
.legal .cols-4 th:nth-child(3){width:32%}
.legal th{padding-block:8px;border-bottom:1px solid #17191D66;font-size:.8125rem;color:var(--soft-ink)}
.legal td:first-child{color:var(--ink)}
@media (max-width:640px){
  /* a table becomes a list of small cards: each cell carries its column's name (data-label) */
  .legal table,.legal tbody,.legal tr,.legal td{display:block;width:auto}
  .legal thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .legal tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .legal td{padding:0 0 8px;border:0}
  .legal td:first-child{font-weight:620}
  .legal td:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
}

/* ── motion: feedback only, and only when the visitor allows it ── */
@media (prefers-reduced-motion:no-preference){
  .btn,.nav-link,.foot-l,.foot-btn,a{transition:color 180ms ease,background-color 180ms ease,box-shadow 180ms ease,border-color 160ms ease}
  .foot-l::after{transition:transform 200ms var(--eo)}
  .foot-btn:active{transform:scale(.98)}
}

/* ── the coming-soon page (launch r196): one line on the mist, centred; recmory.com until the waitlist site ── */
.soon{display:grid;place-items:center;min-height:max(60vh,360px);padding:clamp(48px,8vw,120px) var(--gut);background:var(--mist);text-align:center}
.soon-line{max-width:22ch;font-variation-settings:"opsz" 72;font-weight:470;font-size:clamp(2.25rem,1.6rem + 3.2vw,4.5rem);line-height:1.04;letter-spacing:-.024em}
.soon-line i{font-style:italic}
.soon-tag{display:block;margin-top:.55em;font:500 clamp(.8125rem,.78rem + .2vw,.9375rem)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft-ink)}