@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root { color-scheme: light; --ink:#12203b; --muted:#667085; --line:#dce2ea; --paper:#f7f7f3; --white:#fff; --navy:#14213d; font-family:"DM Sans",system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--paper); }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-5rem; padding:.7rem 1rem; background:white; z-index:100; }
.skip-link:focus { top:1rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.site-header { height:76px; padding:0 clamp(1.25rem,4vw,4.75rem); display:flex; align-items:center; justify-content:space-between; background:rgba(247,247,243,.94); border-bottom:1px solid #e5e5df; position:relative; z-index:10; }
.brand { display:flex; gap:.75rem; align-items:center; text-decoration:none; font-size:.78rem; font-weight:700; letter-spacing:.05em; line-height:1.15; text-transform:uppercase; }
.brand small { color:#7a8291; font-weight:500; letter-spacing:.09em; }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--navy); color:white; font-size:.72rem; }
.home-shell { max-width:1480px; margin:auto; }
.hero { min-height:445px; padding:clamp(4rem,8vw,7rem) clamp(1.25rem,5vw,5rem) 3rem; display:grid; grid-template-columns:1fr 280px; align-items:center; border-bottom:1px solid #dedfd9; position:relative; overflow:hidden; }
.hero:before { content:""; position:absolute; right:10%; top:0; width:1px; height:100%; background:#e4e5df; transform:rotate(17deg); }
.kicker,.eyebrow { color:#747d8d; text-transform:uppercase; letter-spacing:.13em; font-size:.7rem; font-weight:700; }
.hero h1 { font-family:"Manrope",sans-serif; font-size:clamp(2.85rem,6.4vw,6.3rem); line-height:.96; letter-spacing:-.065em; margin:1.1rem 0 1.5rem; max-width:1050px; font-weight:500; }
.hero h1 em { color:#53677f; font-style:normal; font-weight:400; }
.hero p { color:#5f6978; max-width:610px; font-size:1.08rem; line-height:1.7; }
.hero-orbit { justify-self:end; width:170px; height:170px; border:1px solid #9fa9b5; border-radius:50%; display:grid; place-items:center; position:relative; color:#697584; text-transform:uppercase; letter-spacing:.16em; font-size:.65rem; }
.hero-orbit:after { content:"↘"; display:grid; place-items:center; position:absolute; right:-12px; top:22px; background:var(--navy); color:#fff; width:42px; height:42px; border-radius:50%; font-size:1rem; }
.choose { padding:4rem clamp(1.25rem,5vw,5rem) 5rem; }
.section-intro { display:grid; grid-template-columns:1fr 2fr; gap:2rem; margin-bottom:2rem; align-items:end; }
.section-intro>span { text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:700; color:#717b89; }
.section-intro p { margin:0; max-width:620px; color:#68717e; line-height:1.6; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #ccd2d7; border-left:1px solid #ccd2d7; }
.canvas-choice { min-height:285px; padding:1.5rem; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr auto; gap:1rem 1.5rem; text-decoration:none; background:#fbfbf8; border-right:1px solid #ccd2d7; border-bottom:1px solid #ccd2d7; transition:.25s ease; position:relative; overflow:hidden; }
.canvas-choice:before { content:""; position:absolute; inset:auto 0 0; height:5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:.25s ease; }
.canvas-choice:hover,.canvas-choice:focus-visible { background:var(--soft); outline:none; }
.canvas-choice:hover:before,.canvas-choice:focus-visible:before { transform:scaleX(1); }
.choice-index { color:#9199a5; font-size:.7rem; letter-spacing:.1em; }
.choice-icon { grid-row:2; align-self:start; width:75px; height:75px; border-radius:50%; display:grid; place-items:center; color:white; background:var(--accent); font-family:"Manrope"; font-size:1rem; font-weight:700; }
.choice-copy { grid-row:2; display:flex; flex-direction:column; gap:.7rem; align-self:start; }
.choice-copy strong { font-family:"Manrope"; font-size:clamp(1.55rem,3vw,2.5rem); line-height:1; letter-spacing:-.04em; }
.choice-copy>span:last-child { color:#697484; }
.choice-footer { grid-column:1/-1; border-top:1px solid #d9dce2; padding-top:1rem; display:flex; align-items:center; justify-content:space-between; color:#68717e; font-size:.8rem; }
.choice-footer b { font-size:1.2rem; color:var(--accent); }
.privacy-note { margin:0 clamp(1.25rem,5vw,5rem) 5rem; padding:1.5rem 0; border-top:1px solid #ccd2d7; display:flex; gap:1.25rem; color:#677280; font-size:.86rem; }
.privacy-note p { margin:0; }
.privacy-note strong { color:var(--ink); }
footer { padding:2.5rem clamp(1.25rem,5vw,5rem); background:var(--navy); color:#aeb8c8; font-size:.75rem; }

.header-actions { display:flex; align-items:center; gap:.75rem; }
#save-status { color:#707987; font-size:.76rem; display:flex; align-items:center; gap:.45rem; margin-right:.4rem; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#4c9061; box-shadow:0 0 0 3px #e0eee4; }
.button { border:1px solid #cbd1d9; padding:.62rem 1rem; border-radius:3px; background:white; color:var(--ink); cursor:pointer; font-weight:600; font-size:.78rem; }
.button.primary { border-color:var(--navy); background:var(--navy); color:white; }
.button:hover { transform:translateY(-1px); }
.workspace { max-width:1500px; margin:auto; padding:1.35rem clamp(1rem,3vw,3.5rem) 5rem; }
.breadcrumb { display:flex; gap:.6rem; align-items:center; color:#7b8491; font-size:.74rem; margin-bottom:1.5rem; }
.breadcrumb a { text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }
.workspace-head { display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:2rem; border-bottom:1px solid #cfd5dc; }
.workspace-head>div:first-child { display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center; }
.workspace-head h1 { font-family:"Manrope"; font-size:clamp(2rem,4vw,4.4rem); line-height:1; letter-spacing:-.055em; margin:0; font-weight:600; }
.workspace-head p { grid-column:2; margin:.65rem 0 0; color:#6d7684; font-size:1rem; }
.canvas-pill { grid-row:1/3; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:white; font-weight:700; font-size:.8rem; }
.completion { width:230px; }
.completion>div:first-child { display:flex; justify-content:space-between; align-items:end; color:#77818e; font-size:.73rem; }
.completion strong { color:var(--accent); font-size:1.35rem; }
.progressbar { height:4px; background:#dfe3e7; margin-top:.55rem; }
.progressbar i { display:block; height:100%; background:var(--accent); transition:.3s ease; }
.meta-panel { margin-top:1.2rem; padding:1.25rem; background:#fff; border:1px solid #d7dce2; display:grid; grid-template-columns:220px 1fr; gap:1.5rem; }
.meta-copy span { font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--accent); }
.meta-copy p { color:#727b88; font-size:.82rem; line-height:1.5; }
.meta-fields { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.meta-fields label { display:flex; flex-direction:column; gap:.4rem; font-size:.68rem; color:#6d7582; font-weight:700; }
.meta-fields input { border:0; border-bottom:1px solid #cbd1d7; padding:.5rem .1rem; color:var(--ink); background:transparent; outline:none; }
.meta-fields input:focus { border-color:var(--accent); }
.canvas-instruction { display:flex; align-items:baseline; gap:1rem; padding:2.4rem 0 1rem; }
.canvas-instruction span { text-transform:uppercase; font-weight:700; font-size:.72rem; letter-spacing:.12em; }
.canvas-instruction p { margin:0; color:#7a8390; font-size:.82rem; }
.section-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:.65rem; }
.section-card { text-align:left; color:var(--ink); border:1px solid #d5dae0; background:#fff; min-height:245px; padding:1.1rem; cursor:pointer; display:flex; flex-direction:column; position:relative; transition:.2s ease; overflow:hidden; }
.section-card:after { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:.2s ease; }
.section-card:hover,.section-card:focus-visible { background:var(--soft); border-color:var(--accent); outline:none; transform:translateY(-2px); box-shadow:0 10px 25px rgba(20,33,61,.07); }
.section-card:hover:after,.section-card:focus-visible:after { transform:scaleX(1); }
.size-small { grid-column:span 3; }
.size-medium { grid-column:span 4; }
.size-large { grid-column:span 6; }
.size-wide { grid-column:span 12; min-height:205px; }
.section-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; }
.section-number { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; color:white; background:var(--accent); font-size:.78rem; font-weight:700; }
.section-progress { color:#7b8490; background:#f0f2f3; border-radius:20px; padding:.25rem .55rem; font-size:.64rem; }
.section-progress.done { color:#367447; background:#e6f2e9; }
.section-title { font-family:"Manrope"; font-weight:700; font-size:1.2rem; line-height:1.1; }
.section-prompt { font-size:.78rem; color:#626d7b; margin-top:.45rem; line-height:1.45; }
.section-preview { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:1.4rem; color:#87909c; font-size:.75rem; font-style:italic; line-height:1.5; }
.open-hint { margin-top:auto; padding-top:1rem; border-top:1px solid #e5e8eb; color:var(--accent); font-size:.7rem; font-weight:700; display:flex; justify-content:space-between; }
.drawer-open { overflow:hidden; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(14,23,43,.46); backdrop-filter:blur(2px); z-index:40; animation:fade .2s ease; }
.drawer { position:fixed; inset:0 0 0 auto; width:min(620px,100%); background:#fbfbf8; z-index:50; box-shadow:-20px 0 60px rgba(13,24,46,.2); display:flex; flex-direction:column; animation:slide .25s ease; }
@keyframes slide { from { transform:translateX(100%); } }
@keyframes fade { from { opacity:0; } }
.drawer-head { display:flex; justify-content:space-between; padding:2.1rem 2rem 1.5rem; border-bottom:1px solid #d8dde2; }
.drawer-head>div { display:grid; grid-template-columns:auto 1fr; column-gap:.8rem; align-items:center; }
.drawer-head .section-number { grid-row:1/4; }
.drawer-head h2 { margin:.35rem 0 0; font-family:"Manrope"; font-size:2rem; letter-spacing:-.04em; }
.drawer-head p { grid-column:2; margin:.4rem 0 0; color:#707a88; font-size:.85rem; }
.close { border:0; background:transparent; color:#606a78; font-size:2rem; line-height:1; cursor:pointer; align-self:start; }
.drawer-body { padding:1.75rem 2rem 4rem; overflow:auto; display:flex; flex-direction:column; gap:1.65rem; flex:1; }
.field { display:flex; flex-direction:column; gap:.5rem; }
.field>span,fieldset legend { font-weight:700; font-size:.9rem; }
.field small,.field-hint { color:#78818d; font-size:.76rem; line-height:1.45; margin:0; }
.field textarea,.field input { width:100%; border:1px solid #cdd3da; background:white; border-radius:3px; padding:.85rem; outline:none; resize:vertical; line-height:1.55; }
.field textarea:focus,.field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(20,33,61,.1); }
fieldset { border:0; margin:0; padding:0; }
.check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; margin-top:.75rem; }
.check,.radio { position:relative; }
.check input,.radio input { position:absolute; opacity:0; }
.check span,.radio span { display:block; background:white; border:1px solid #d2d7dd; padding:.72rem .8rem; font-size:.8rem; cursor:pointer; transition:.15s; }
.check input:checked+span,.radio input:checked+span { background:var(--soft); color:var(--accent); border-color:var(--accent); font-weight:700; }
.check input:focus-visible+span,.radio input:focus-visible+span { outline:2px solid var(--accent); outline-offset:2px; }
.choice-row { display:flex; gap:.55rem; margin-top:.75rem; }
.radio { flex:1; text-align:center; }
.drawer-foot { padding:1rem 2rem; border-top:1px solid #d8dde2; background:white; display:flex; justify-content:space-between; align-items:center; }
.drawer-foot>span { display:flex; align-items:center; gap:.5rem; color:#75808d; font-size:.72rem; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; min-height:400px; }
  .hero-orbit { display:none; }
  .choice-grid { grid-template-columns:1fr; }
  .workspace-head { align-items:flex-start; gap:2rem; }
  .meta-panel { grid-template-columns:1fr; }
  .meta-fields { grid-template-columns:repeat(2,1fr); }
  .size-small,.size-medium { grid-column:span 6; }
  .size-large,.size-wide { grid-column:span 12; }
}
@media (max-width:620px) {
  .site-header { padding:0 1rem; height:66px; }
  .brand>span:last-child { display:none; }
  #save-status,.header-actions .ghost { display:none; }
  .hero { padding-top:4rem; }
  .hero h1 { font-size:3.2rem; }
  .section-intro { grid-template-columns:1fr; gap:.75rem; }
  .canvas-choice { min-height:240px; grid-template-columns:auto 1fr; }
  .choice-icon { width:58px; height:58px; }
  .workspace { padding-inline:.75rem; }
  .workspace-head { display:block; }
  .workspace-head>div:first-child { grid-template-columns:auto 1fr; }
  .workspace-head h1 { font-size:2rem; }
  .completion { margin:1.5rem 0 0; width:100%; }
  .meta-fields { grid-template-columns:1fr; }
  .canvas-instruction { display:block; }
  .canvas-instruction p { margin-top:.4rem; }
  .size-small,.size-medium,.size-large,.size-wide { grid-column:span 12; min-height:210px; }
  .drawer-head { padding:1.25rem 1rem; }
  .drawer-head h2 { font-size:1.55rem; }
  .drawer-body { padding:1.25rem 1rem 3rem; }
  .drawer-foot { padding:1rem; }
  .check-grid { grid-template-columns:1fr; }
}
@media print {
  .site-header,.breadcrumb,.header-actions,.canvas-instruction,.open-hint,footer { display:none!important; }
  body,.workspace { background:white; }
  .workspace { max-width:none; padding:0; }
  .workspace-head { padding:0 0 1rem; }
  .meta-panel { break-inside:avoid; }
  .section-grid { gap:5px; }
  .section-card { break-inside:avoid; box-shadow:none!important; transform:none!important; min-height:170px; }
  .size-small { grid-column:span 4; }
  .size-medium,.size-large { grid-column:span 6; }
  .size-wide { grid-column:span 12; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* PDF-faithful canvas redesign */
body { background:#eef1f4; }
.site-header { height:62px; padding:0 clamp(1rem,2.5vw,2.5rem); background:#fff; border-bottom:1px solid #d7dce2; position:sticky; top:0; }
.brand { font-size:.82rem; letter-spacing:.02em; text-transform:none; }
.brand-mark { width:29px; height:29px; border-radius:5px; padding:5px; display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.brand-mark i { background:#fff; border-radius:1px; }
.header-right { display:flex; align-items:center; gap:.75rem; }
.header-ucn { width:48px; height:27px; object-fit:contain; margin-right:.25rem; }
.account { display:flex; align-items:center; gap:.6rem; border-left:1px solid #d9dee4; padding-left:.8rem; }
.account>span { max-width:210px; overflow:hidden; text-overflow:ellipsis; font-size:.72rem; color:#596577; }
.login-button { background:#fff; border-color:#14213d; }
.home-shell { max-width:1400px; padding:0 2rem 4rem; }
.home-title { padding:3.2rem 0 2rem; border:0; }
.home-title h1 { margin:0; font-family:"Manrope",sans-serif; font-size:clamp(2.1rem,4vw,3.8rem); letter-spacing:-.05em; }
.home-title p { margin:.5rem 0 0; color:#677181; }
.choose { padding:0; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; border:0; }
.canvas-choice { min-height:0; display:flex; flex-direction:column; gap:0; padding:0; border:1px solid #ccd3dc; border-radius:7px; background:#fff; overflow:hidden; }
.canvas-choice:before { height:4px; z-index:2; }
.canvas-choice:hover,.canvas-choice:focus-visible { background:#fff; transform:translateY(-3px); box-shadow:0 13px 32px rgba(18,32,59,.12); border-color:var(--accent); }
.choice-preview { display:block; aspect-ratio:1.414/1; overflow:hidden; background:#f4f5f6; border-bottom:1px solid #dce1e6; }
.choice-preview img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.canvas-choice:hover img { transform:scale(1.015); }
.choice-copy { display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 1.25rem .8rem; }
.choice-copy strong { font-size:1.28rem; line-height:1.2; letter-spacing:-.02em; text-transform:uppercase; }
.choice-copy>span { color:#667181; font-size:.86rem; }
.choice-footer { margin:0 1.25rem; padding:.75rem 0 1rem; border-top:1px solid #e0e4e8; color:#737d8b; }
.choice-footer b { font-size:.76rem; color:var(--accent); }
.storage-note { margin:1.3rem 0 0; color:#7a8492; font-size:.75rem; }

.workspace { max-width:1780px; padding:1rem 1.5rem 4rem; }
.workspace-tools { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.breadcrumb { margin:.2rem 0 .8rem; }
.breadcrumb a { font-weight:600; }
.canvas-viewport { width:100%; overflow:auto; padding:0 0 1rem; overscroll-behavior:contain; scrollbar-color:#8c97a5 #dde2e7; }
.zoom-tools { display:flex; align-items:center; height:34px; margin:0 0 .5rem; border:1px solid #cbd2da; border-radius:4px; background:#fff; overflow:hidden; box-shadow:0 2px 8px rgba(18,32,59,.05); }
.zoom-tools button { width:35px; align-self:stretch; border:0; border-right:1px solid #dde2e7; background:#fff; color:#26354a; cursor:pointer; font-size:1rem; }
.zoom-tools button:hover,.zoom-tools button:focus-visible { background:#edf2f4; outline:none; }
.zoom-tools output { min-width:54px; padding:0 .5rem; text-align:center; color:#536174; font-size:.72rem; font-weight:700; }
.zoom-tools .zoom-fit { width:auto; padding:0 .75rem; border-right:0; border-left:1px solid #dde2e7; font-size:.7rem; font-weight:700; }
.canvas-sheet { background:#fff; border:1px solid #cfd5dc; box-shadow:0 8px 30px rgba(18,32,59,.08); padding:clamp(1rem,2vw,2rem); }
.workspace-head { padding:0 0 1rem; display:grid; grid-template-columns:minmax(360px,1fr) minmax(300px,.8fr); align-items:center; gap:2rem; border-bottom:0; }
.workspace-head>div:first-child { display:block; }
.workspace-head h1 { color:var(--accent); font-size:clamp(2rem,3.4vw,4rem); font-weight:800; letter-spacing:-.045em; text-transform:uppercase; }
.workspace-head p { margin:.25rem 0 0; color:var(--accent); font-size:clamp(1rem,1.5vw,1.5rem); font-weight:600; }
.canvas-purpose { font-size:.88rem; line-height:1.55; color:#26334a; max-width:650px; display:flex; align-items:center; gap:1.25rem; }
.canvas-purpose img { width:72px; height:44px; object-fit:contain; flex:none; }
.meta-panel { margin:0 0 .65rem; padding:.7rem .9rem; grid-template-columns:1fr; background:#fafbfc; border-color:#cdd4dd; }
.meta-fields { grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.meta-fields label { color:var(--ink); }
.meta-fields input { padding:.32rem 0; }
.canvas-instruction { padding:.5rem .2rem .6rem; display:flex; justify-content:space-between; align-items:center; }
.canvas-instruction>span { color:#727c89; font-size:.66rem; }
.canvas-instruction .completion { width:190px; }
.section-grid { display:grid; gap:.55rem; align-items:stretch; }
.section-card { grid-column:auto; min-height:225px; padding:.85rem; border:1.5px solid var(--section-accent,var(--accent)); border-radius:6px; background:#fdfdfe; box-shadow:none; }
.section-card:after { background:var(--section-accent,var(--accent)); }
.section-card:hover,.section-card:focus-visible { background:var(--soft); border-color:var(--section-accent,var(--accent)); box-shadow:0 5px 15px rgba(18,32,59,.09); }
.section-top { margin-bottom:.65rem; }
.section-identity { display:flex; align-items:center; gap:.55rem; }
.section-icon { width:28px; height:28px; color:var(--section-accent,var(--accent)); opacity:.9; }
.section-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.section-tools { display:flex; align-items:center; gap:.35rem; }
.box-export { display:grid; place-items:center; width:25px; height:25px; border:1px solid #cbd2da; border-radius:50%; background:#fff; color:var(--section-accent,var(--accent)); cursor:pointer; font-size:.78rem; }
.box-export:hover,.box-export:focus-visible { color:#fff; background:var(--section-accent,var(--accent)); outline:none; }
.section-number { background:var(--section-accent,var(--accent)); }
.section-title { color:var(--section-accent,var(--accent)); font-size:1rem; text-transform:uppercase; }
.section-title { overflow-wrap:anywhere; }
.section-prompt { color:#1f2b40; font-size:.72rem; font-weight:600; min-height:2em; }
.section-fields { display:grid; grid-template-columns:1fr; gap:.45rem; margin-top:.8rem; }
.mini-field { min-width:0; display:block; }
.mini-field small { display:block; color:#344054; font-size:.58rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-field i { height:17px; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border-bottom:1px dotted #aeb6c0; color:#59677a; font-size:.63rem; font-style:normal; padding-top:2px; }
.section-card.size-wide .section-fields,.section-card.size-large .section-fields { grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); }
.open-hint { color:var(--section-accent,var(--accent)); border-top:0; padding-top:.55rem; font-size:.63rem; }

/* Layout and colours from the four source canvases */
.canvas-ai-samspil .section-grid { grid-template-columns:repeat(6,1fr); grid-template-areas:"a b c d e f" "g g g g g h" "i i i i j j"; }
.canvas-ai-samspil .section-card:nth-child(1) { grid-area:a; }.canvas-ai-samspil .section-card:nth-child(2) { grid-area:b; }.canvas-ai-samspil .section-card:nth-child(3) { grid-area:c; }.canvas-ai-samspil .section-card:nth-child(4) { grid-area:d; }.canvas-ai-samspil .section-card:nth-child(5) { grid-area:e; }.canvas-ai-samspil .section-card:nth-child(6) { grid-area:f; }.canvas-ai-samspil .section-card:nth-child(7) { grid-area:g; }.canvas-ai-samspil .section-card:nth-child(8) { grid-area:h; }.canvas-ai-samspil .section-card:nth-child(9) { grid-area:i; min-height:150px; }.canvas-ai-samspil .section-card:nth-child(10) { grid-area:j; min-height:150px; }
.canvas-ai-samspil .section-card:nth-child(-n+6) { min-height:310px; }
.canvas-ai-samspil .section-card:nth-child(-n+6) .section-title { font-size:.88rem; }

.canvas-rpa-afklaring .section-grid { grid-template-columns:repeat(12,1fr); grid-template-areas:"a a a b b b c c c d d d" "e e e f f f f g g g g g" "h h h h h h h h h h h h"; }
.canvas-rpa-afklaring .section-card:nth-child(1) { grid-area:a;--section-accent:#16558c; }.canvas-rpa-afklaring .section-card:nth-child(2) { grid-area:b;--section-accent:#3f7d43; }.canvas-rpa-afklaring .section-card:nth-child(3) { grid-area:c;--section-accent:#513388; }.canvas-rpa-afklaring .section-card:nth-child(4) { grid-area:d;--section-accent:#e57b13; }.canvas-rpa-afklaring .section-card:nth-child(5) { grid-area:e;--section-accent:#16558c; }.canvas-rpa-afklaring .section-card:nth-child(6) { grid-area:f;--section-accent:#c93c2e; }.canvas-rpa-afklaring .section-card:nth-child(7) { grid-area:g;--section-accent:#d99d16; }.canvas-rpa-afklaring .section-card:nth-child(8) { grid-area:h;--section-accent:#16558c;min-height:150px; }
.canvas-rpa-afklaring .section-card:nth-child(-n+4) { min-height:280px; }

.canvas-rpa-proces .section-grid { grid-template-columns:3fr 5fr 5fr; grid-template-areas:"d a b" "c e e"; }
.canvas-rpa-proces .section-card:nth-child(1) { grid-area:a;min-height:430px; }.canvas-rpa-proces .section-card:nth-child(2) { grid-area:b;min-height:430px; }.canvas-rpa-proces .section-card:nth-child(3) { grid-area:c; }.canvas-rpa-proces .section-card:nth-child(4) { grid-area:d;min-height:430px; }.canvas-rpa-proces .section-card:nth-child(5) { grid-area:e; }

.canvas-gevinstrealisering .section-grid { grid-template-columns:repeat(12,1fr); grid-template-areas:"a a a a b b b b c c c c" "d d d d d d d d d d d d" "e e e e f f f f g g g g"; }
.canvas-gevinstrealisering .section-card:nth-child(1) { grid-area:a;--section-accent:#4e8a46; }.canvas-gevinstrealisering .section-card:nth-child(2) { grid-area:b;--section-accent:#5b3a91; }.canvas-gevinstrealisering .section-card:nth-child(3) { grid-area:c;--section-accent:#e88713; }.canvas-gevinstrealisering .section-card:nth-child(4) { grid-area:d;--section-accent:#2d79b1; }.canvas-gevinstrealisering .section-card:nth-child(5) { grid-area:e;--section-accent:#d64b37; }.canvas-gevinstrealisering .section-card:nth-child(6) { grid-area:f;--section-accent:#e1a514; }.canvas-gevinstrealisering .section-card:nth-child(7) { grid-area:g;--section-accent:#579052; }
.canvas-gevinstrealisering .section-card:nth-child(4) { min-height:220px; }

.drawer { background:#fff; }
.drawer-head { background:var(--soft); }
.drawer-head h2 { color:var(--accent); }

.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; inset:0; z-index:70; background:rgba(13,24,45,.52); backdrop-filter:blur(2px); }
.modal { position:fixed; z-index:80; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,calc(100% - 2rem)); max-height:calc(100vh - 2rem); overflow:auto; background:#fff; border-radius:7px; padding:2rem; box-shadow:0 24px 80px rgba(13,24,45,.3); }
.modal>.close { position:absolute; top:1rem; right:1rem; }
.modal h2 { margin:.4rem 0 .5rem; font-family:"Manrope",sans-serif; font-size:2rem; letter-spacing:-.04em; color:var(--navy); }
.modal>p { margin:0 0 1.5rem; color:#687384; line-height:1.5; font-size:.86rem; }
.modal-kicker { color:#687384; font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.login-modal { width:min(490px,calc(100% - 2rem)); padding:2.25rem 2.1rem 1.6rem; border-radius:2px; }
.login-heading { text-align:center; }
.login-logo { width:106px; height:72px; object-fit:contain; display:block; margin:0 auto .65rem; }
.login-heading>span { display:block; color:#5f725d; font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.login-heading h2 { margin:.55rem 0 .4rem; font-size:2rem; }
.login-heading p { margin:0 0 1.4rem; color:#66717d; font-size:.84rem; }
.provider-buttons { display:flex; flex-direction:column; gap:.6rem; }
.provider-button { width:100%; min-height:54px; display:grid; grid-template-columns:34px 1fr 34px; align-items:center; padding:.55rem .9rem; border:1px solid #cbd3d8; background:#fff; color:#253342; cursor:pointer; text-align:left; }
.provider-button:hover,.provider-button:focus-visible { background:#f2f6f5; border-color:#638069; outline:none; }
.provider-button b { font-size:.92rem; }
.microsoft-mark { width:22px; height:22px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.microsoft-mark i:nth-child(1) { background:#f25022; }.microsoft-mark i:nth-child(2) { background:#7fba00; }.microsoft-mark i:nth-child(3) { background:#00a4ef; }.microsoft-mark i:nth-child(4) { background:#ffb900; }
.google-mark { width:24px; height:24px; display:grid; place-items:center; color:#4285f4; font-size:1.35rem; font-weight:800; font-family:Arial,sans-serif; }
.login-divider { display:flex; align-items:center; gap:.75rem; margin:1.2rem 0; color:#747d78; font-size:.73rem; }
.login-divider:before,.login-divider:after { content:""; flex:1; height:1px; background:#d9dedb; }
.login-modal form { gap:.8rem; }
.login-modal .field { gap:.3rem; text-align:left; }
.login-modal .field>span { color:#35463a; font-size:.78rem; }
.login-modal .field input { min-height:50px; border-color:#bfcbd0; }
.login-submit { min-height:49px; border:0; border-radius:1px; background:#637d62; color:#fff; font-size:.93rem; font-weight:700; cursor:pointer; }
.login-submit:hover { background:#526b52; }
.forgot-button { align-self:flex-start; border:0; background:none; color:#536a52; font-size:.74rem; font-weight:700; padding:0; cursor:pointer; }
.forgot-button:hover { text-decoration:underline; }
.login-modal>small { padding-top:.9rem; border-top:1px solid #e0e4e1; text-align:center; line-height:1.45; }
.modal form { display:flex; flex-direction:column; gap:1.2rem; }
.modal .field input,.modal .field select { width:100%; padding:.8rem; border:1px solid #cbd2da; border-radius:3px; background:#fff; }
.modal .field select { cursor:pointer; }
.button.wide { width:100%; padding:.85rem; }
.modal>small { display:block; margin-top:1rem; color:#7a8490; }
.form-error { min-height:1em; margin:0; color:#b42318; font-size:.76rem; }
.form-error.success { color:#39704a; }
.format-options { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.7rem; }
.format-options label { position:relative; }
.format-options input { position:absolute; opacity:0; }
.format-options label>span { display:flex; flex-direction:column; gap:.2rem; padding:.85rem; border:1px solid #cdd3da; border-radius:4px; cursor:pointer; }
.format-options input:checked+span { border-color:#14213d; background:#f1f4f7; box-shadow:inset 0 0 0 1px #14213d; }
.format-options small { color:#727d8a; font-size:.68rem; }
.export-status { min-height:1.2rem; margin:0; color:#536174; font-size:.76rem; }
.status-dot.error { background:#c43d31; box-shadow:0 0 0 3px #f5dfdd; }
.export-clean .canvas-instruction,.export-clean .section-progress,.export-clean .box-export,.export-clean .open-hint { visibility:hidden!important; }
.export-clean .section-card { transform:none!important; box-shadow:none!important; }
.export-clean .section-icon { opacity:1; }

@media (max-width:1000px) {
  .section-grid,.canvas-ai-samspil .section-grid,.canvas-rpa-afklaring .section-grid,.canvas-rpa-proces .section-grid,.canvas-gevinstrealisering .section-grid { min-width:1050px; }
  .workspace-head { min-width:1050px; }
  .meta-panel,.canvas-instruction { min-width:1050px; }
}
@media (max-width:680px) {
  .site-header { position:relative; }
  .brand>span:last-child { display:block; }
  .home-shell { padding:0 1rem 3rem; }
  .home-title { padding:2rem 0 1.25rem; }
  .choice-grid { grid-template-columns:1fr; gap:1rem; }
  .workspace { padding:.6rem; }
  .canvas-sheet { padding:.7rem; }
  .workspace-tools { align-items:flex-start; }
  .breadcrumb { padding-top:.5rem; }
  .canvas-viewport:after { content:"Brug Tilpas for at se hele canvaset · zoom ind og træk vandret"; display:block; text-align:center; padding:.7rem; color:#707b88; font-size:.68rem; }
  .drawer-head { padding:1.1rem; }
  .header-ucn { width:40px; }
  .account>span,#save-status { display:none; }
  .header-actions { gap:.35rem; }
  .header-actions .button { padding:.55rem .65rem; }
  .modal { padding:1.4rem; }
}