/* Shared styles for the secondary pages (/privacy/, /terms/).
   The home page keeps its own inline CSS so it needs no blocking request. */

:root{--ink:#303d2c;--paper:#f6f2e9;--paper-2:#e8e1d2;--red:#b94e3c;--sun:#dfaa4a;
      --line:rgba(48,61,44,.18);--sans:Manrope,Arial,sans-serif;
      --serif:"Playfair Display",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--sans)}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
main:focus{outline:none}
.wrap{width:min(760px,calc(100% - 48px));margin:auto}

.skip{position:absolute;left:12px;top:-60px;z-index:20;padding:12px 18px;border-radius:3px;
      background:var(--ink);color:#fff8e9;font-weight:800;font-size:13px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

.topline{background:var(--ink);color:#f7edcf;text-align:center;padding:9px 18px;
         font:500 10px/1 var(--mono);letter-spacing:.14em}
.topline b{display:inline-block;width:7px;height:8px;margin:0 3px;background:#eab55c;vertical-align:middle;
           clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

header{border-bottom:1px solid var(--line)}
header .wrap{width:min(1240px,calc(100% - 48px));height:104px;display:flex;align-items:center;
             justify-content:space-between;gap:24px}
.brand img{width:auto;height:76px}
.back{font-size:13px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:9px;padding:10px 0}
.back::before{content:"";width:9px;height:10px;background:var(--sun);flex:0 0 auto;
              clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.back:hover{color:var(--red)}

.doc{padding:70px 0 90px}
.kicker{display:flex;align-items:center;gap:10px;color:#8a6a24;font:500 11px var(--mono);
        letter-spacing:.13em;text-transform:uppercase}
.kicker::before{content:"";width:34px;height:1px;background:currentColor}
.doc h1{font:700 clamp(36px,5.4vw,58px)/1.02 var(--serif);letter-spacing:-.04em;margin:16px 0 10px}
.updated{font:500 11px var(--mono);letter-spacing:.06em;color:#5b6857;margin:0 0 44px}
.doc h2{font:700 clamp(21px,2.5vw,27px)/1.2 var(--serif);letter-spacing:-.02em;margin:44px 0 12px;
        padding-top:26px;border-top:1px solid var(--line)}
.doc h3{font-size:15px;margin:26px 0 8px}
.doc p,.doc li{color:#42503e}
.doc ul{padding-left:20px}
.doc li{margin:7px 0}
.doc li::marker{color:var(--red)}
.doc a{color:var(--red);text-underline-offset:3px}
.doc dl{margin:18px 0;border-top:1px solid var(--line)}
.doc dl>div{display:flex;flex-wrap:wrap;gap:6px 22px;padding:12px 2px;border-bottom:1px solid var(--line)}
.doc dt{flex:0 0 190px;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5b6857}
.doc dd{margin:0;font-weight:700}

/* Marks a value that is still waiting on the company's legal details.
   tools/check.py warns while any of these remain. */
.todo{background:#f7e6c6;border-bottom:2px solid var(--sun);padding:1px 7px;
      font:500 12px var(--mono);color:#6b5312;font-weight:500}

.note{background:var(--paper-2);border-left:3px solid var(--sun);padding:16px 20px;margin:26px 0;
      font-size:14px}
.note p{margin:0}

.footer{border-top:1px solid var(--line);padding:30px 0 12px;display:flex;flex-wrap:wrap;gap:16px 28px;
        justify-content:space-between;align-items:center;font-size:12px;color:#5b6857}
.version{color:#63705f;font:500 11px var(--mono);letter-spacing:.06em;white-space:nowrap}
.version::before{content:"·";margin-right:7px}
.footer nav{display:flex;gap:20px;font-weight:800}
.footer a{text-decoration:none}
.footer a:hover{color:var(--red)}
.made-in{display:flex;align-items:center;justify-content:center;gap:7px;padding:0 24px 26px;
         font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#63705f}
.made-in .heart{width:13px;height:13px;fill:var(--red);animation:heartbeat 1.6s ease-in-out infinite}
@keyframes heartbeat{0%,28%,100%{scale:1}8%{scale:1.28}16%{scale:1}22%{scale:1.18}}

@media(max-width:760px){
  .wrap{width:min(100% - 36px,760px)}
  header .wrap{width:min(100% - 36px,1240px);height:78px}
  .brand img{height:56px}
  .doc{padding:48px 0 60px}
  .doc dt{flex:1 1 100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
}