/* The public site (OP-13): the portal's tokens and components from portal.css, plus the page
   sections the marketing copy needs. One reading width, on the page container; every block fills it. */
.site-page{max-width:1040px}
.site-page main{padding:0 0 40px}

/* Header: wordmark, page links, the main button and the language switch. */
.public-header{flex-wrap:wrap}
.public-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 14px;min-width:0}
.public-nav ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0}
.public-nav a{display:block;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;white-space:nowrap}
.public-nav a:hover{color:var(--ink);background:var(--surface)}
.public-nav a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--panel-line);font-weight:600}
.header-cta{padding:8px 16px;font-size:14px;border-radius:999px}
.language-switch a.language{display:inline-block;text-decoration:none;border-radius:999px;padding:4px 10px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.5px}
.language-switch a.language.selected{background:var(--accent-deep);color:#fff}

/* Sections: a hairline between them, the kicker above the heading. */
.site-section{padding:48px 0 28px;border-top:1px solid var(--line)}
.site-section.hero{border-top:0;padding-top:64px}
.site-section .kicker{margin:0 0 8px}
.site-section h1{font-size:clamp(34px,5vw,52px);letter-spacing:-1.8px;line-height:1.08;margin:0 0 24px}
.site-section h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.8px;line-height:1.2;margin:0 0 20px}
.site-section h3{font-size:17px;line-height:1.35;margin:28px 0 6px}
.site-section p{color:var(--text)}
.site-section p.lead{font-size:20px;line-height:1.55;color:var(--ink-2)}
.site-section .actions{margin:8px 0 20px}
.site-section .actions .button{border-radius:999px}

/* Numbered steps and cards: grey panels in a grid. */
.steps,.cards{list-style:none;padding:0;margin:8px 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.steps{counter-reset:step}
.steps li,.cards li{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius-card);padding:18px 20px}
.steps li{counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-size:12px;font-weight:700;letter-spacing:1px;color:var(--muted);margin-bottom:6px}
.steps strong,.cards strong{display:block;color:var(--ink);margin-bottom:4px;line-height:1.35}
.steps span,.cards span{display:block;font-size:15px;color:var(--text)}
.plain-list{margin:0 0 20px;padding-left:22px}
.plain-list li{margin-bottom:6px}
.faq h3:first-child{margin-top:8px}
.faq p{margin-bottom:8px}

/* The waitlist form. */
.waitlist-form{margin:8px 0 24px}
.waitlist-form .optional{font-weight:400;color:var(--muted)}
.choice-row{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:8px}
.choice,.check{display:flex;align-items:flex-start;gap:10px;font-weight:500;margin:0}
.choice input,.check input{width:auto;margin:5px 0 0;accent-color:var(--accent-deep)}
.waitlist-form select{max-width:320px}
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Labs: the prompt with its copy button and the files to attach. */
.lab-prompt{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius-card);padding:20px;margin:16px 0 20px}
.lab-prompt.own{background:var(--surface)}
.lab-prompt-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.lab-prompt-top h3{margin:0}
.lab-prompt .prompt{background:var(--surface);margin:0}
.lab-prompt .hint{margin-top:12px}
.copy-prompt{padding:8px 16px;font-size:13px;border-radius:999px;white-space:nowrap}
.lab-files{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px}
.lab-files a{display:flex;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control);padding:9px 12px;font-size:14px;text-decoration:none;overflow-wrap:anywhere}
.lab-files small{color:var(--muted);white-space:nowrap}
.copy-status{position:sticky;bottom:0;margin:0;background:var(--accent-deep);color:#fff;font-size:14px;text-align:center}
.copy-status:not(:empty){padding:10px 20px}

/* Figures (OP-17): an illustration beside the section's text, as on primux.dk. The text column
   fills its half; on a phone the figure stacks under the text. */
.site-section.has-figure{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.site-section.figure-start{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.site-section.figure-start .site-figure{order:-1}
.site-section.figure-cover{align-items:start}
.site-section.figure-round{grid-template-columns:minmax(0,1fr) 200px}
.site-section.hero.has-figure h1{font-size:clamp(32px,4vw,46px);letter-spacing:-1.4px}
.section-text{min-width:0}
.section-text>:last-child{margin-bottom:0}
.site-figure{margin:0}
.site-figure img{display:block;width:100%;height:auto;border-radius:14px;background:#f1f2f4}
.figure-tall .site-figure img,.figure-wide .site-figure img{border-radius:0;background:none;mix-blend-mode:multiply}
.figure-round .site-figure img{border-radius:50%}
.figure-cover .site-figure{margin-top:36px}

/* Footer: the Primux line and the links out. */
.public-footer{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px}
.public-footer p{flex-basis:100%;margin:0 0 4px}
.public-footer ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
.public-footer a{color:var(--muted)}
.public-footer a:hover{color:var(--accent)}

@media (max-width: 800px) {
    .public-header{align-items:flex-start}
    .public-tools{justify-content:flex-start;flex-basis:100%}
    .public-nav{flex-basis:100%;order:3}
    .public-nav ul{margin-left:-12px}
    .site-section.has-figure,.site-section.figure-start,.site-section.figure-round{grid-template-columns:minmax(0,1fr);gap:28px}
    .site-section.figure-start .site-figure{order:0}
    .figure-cover .site-figure{margin-top:0}
    .figure-round .site-figure{width:160px}
}
@media (max-width: 600px) {
    .site-section{padding:36px 0 20px}
    .site-section.hero{padding-top:40px}
    .site-section p.lead{font-size:18px}
    .lab-prompt-top{flex-direction:column;align-items:flex-start}
}