/* The inner pages (register, licence, privacy) in the landing page's language:
   paper, ink, one magenta accent, hairline rules, square corners, system Helvetica.
   Values are the ones index.html uses inline — change them there and here together. */
:root{
  --paper:#F3F2EE; --paper-2:#E8E7E2; --white:#fff;
  --ink:#14131A; --soft:#54525E; --faint:#6E6C78;
  --magenta:#CC0066; --line:rgba(20,19,26,.22);
  --error:#991B1B; --ok:#166534;
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
a:hover{color:var(--magenta)}
[hidden]{display:none!important}

.mono{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.dot{display:inline-flex;align-items:center;gap:10px}
.dot::before{content:"";width:8px;height:8px;background:var(--magenta);flex:none}

/* Header and footer: the landing's nav and footer, minus the section links. */
.top{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 32px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:.08em;text-decoration:none}
.brand img{width:22px;height:22px;display:block}
.top .mono{text-decoration:none}
.foot{border-top:1px solid var(--line);padding:32px 0 40px;margin-top:auto}
.foot .in{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--faint)}

main{width:100%;max-width:640px;margin:0 auto;padding:72px 32px 96px}
main.wide{max-width:760px}
h1{margin:22px 0 0;font-size:clamp(36px,5vw,56px);font-weight:500;line-height:1;letter-spacing:-.025em;text-wrap:balance}
.lead{margin:24px 0 40px;font-size:17px;color:var(--soft);text-wrap:pretty}
.note{font-size:13px;color:var(--faint);margin:10px 0 0}
.note a,.lead a,.consent a{text-decoration:underline;text-underline-offset:2px}

/* Forms */
.field{margin-bottom:22px}
label{display:block;margin:0 0 8px}
input[type=text],input[type=email],select{width:100%;height:52px;padding:0 16px;font:inherit;font-size:15px;color:var(--ink);
  background:var(--white);border:1px solid var(--ink);border-radius:0;outline:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 23px,calc(100% - 17px) 23px;background-size:5px 5px;background-repeat:no-repeat;padding-right:44px}
input:focus,select:focus{border-color:var(--magenta)}
.consent{display:flex;gap:12px;align-items:flex-start;margin:30px 0 24px;font-size:14px;color:var(--soft);text-transform:none;letter-spacing:0;font-weight:400}
.consent input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--magenta);flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;font:inherit;font-size:15px;font-weight:500;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:0;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:transparent;border-color:var(--magenta);color:var(--magenta)}
.btn.full{width:100%}
.btn[disabled]{opacity:.55;cursor:progress}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row .btn{flex:1 1 200px}

/* Messages: a rule on the left, the colour carries the meaning. */
.msg{display:none;padding:14px 16px;margin:0 0 24px;font-size:14px;background:var(--white);border:1px solid var(--line);border-left-width:3px}
.msg.error{display:block;border-left-color:var(--error);color:var(--error)}
.msg.ok{display:block;border-left-color:var(--ok);color:var(--ok)}

/* The key */
.key{margin:0 0 16px;padding:24px 16px;background:var(--white);border:1px solid var(--ink);text-align:center;user-select:all;word-break:break-all;
  font-family:Menlo,Consolas,Monaco,monospace;font-size:clamp(20px,5.4vw,28px);font-weight:700;letter-spacing:.06em}

/* Boxed asides, like the landing's download box */
.box{margin:40px 0 0;padding:22px 24px;border:1px solid var(--line);font-size:15px;color:var(--soft)}
.box h2{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.box ol{margin:0;padding-left:20px}
.box li{margin-bottom:6px}
.box p{margin:0 0 12px}
.box p:last-child{margin:0}

/* Long text (privacy) */
.prose h2{margin:56px 0 14px;padding-top:16px;border-top:1px solid var(--ink);font-size:clamp(22px,2.6vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.prose h3{margin:32px 0 10px;font-size:17px;font-weight:600}
.prose p,.prose li{color:var(--soft);font-size:16px}
.prose ul{padding-left:20px}
.prose strong{color:var(--ink);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin:14px 0 8px;font-size:14px}
.prose th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--faint);padding:0 12px 8px 0;border-bottom:1px solid var(--ink)}
.prose td{vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--soft)}
.tablewrap{overflow-x:auto}
/* Unfilled information in a draft: impossible to miss, impossible to publish by accident. */
.todo{background:#FFE9F3;color:var(--magenta);padding:0 4px;font-weight:600}
.draft,.prose .draft{margin:24px 0 8px;padding:14px 16px;border:1px solid var(--magenta);color:var(--magenta);font-size:14px}

/* Anti-bot trap: off-screen rather than display:none, out of tab order and the accessibility tree. */
.trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
#captcha-box{margin-bottom:24px;min-height:65px}

@media(max-width:720px){
  .top{padding:0 20px}
  main{padding:48px 20px 72px}
  .foot .in{padding:0 20px}
}