:root {
  --bg: #090c11;
  --panel: #10151d;
  --panel2: #151c26;
  --line: #232d3b;
  --text: #f4f7fb;
  --muted: #8c99aa;
  --accent: #67e8f9;
  --accent2: #a78bfa;
  --danger: #fb7185;
  --success: #86efac;
  --shadow: 0 24px 70px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 78px 1fr; }
.rail { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 12px; background: rgba(8,11,16,.96); }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(103,232,249,.18), rgba(167,139,250,.22)); border: 1px solid rgba(103,232,249,.24); font-weight: 900; letter-spacing: -.04em; margin-bottom: 14px; }
.rail-btn { width: 46px; height: 46px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--muted); font-size: 20px; }
.rail-btn:hover, .rail-btn.active { color: var(--text); background: var(--panel2); border-color: var(--line); }

.workspace { min-width: 0; padding: 0 34px 50px; }
.topbar { min-height: 0; margin-left: -34px; padding: 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.brand-header { width: max(390px, calc(50vw - 78px)); }
.top-logo-crop { width: 100%; aspect-ratio: 6.05 / 1; overflow: hidden; }
.top-logo { display: block; width: 101.5%; height: auto; transform: translate(-1.35%, -20.5%); }
.brand-header h1 { margin: 8px 0 0; padding-left: 34px; }
h1 { margin: 6px 0 0; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.04em; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.save-state { color: var(--muted); font-size: 13px; }

.view { max-width: 1500px; margin: 0 auto; }
.hidden { display: none !important; }

.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 20px; margin-bottom: 28px; }
.hero-main, .hero-side, .card, .panel { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21,28,38,.94), rgba(15,20,28,.94)); box-shadow: var(--shadow); }
.hero-main { border-radius: 26px; padding: 34px; min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-main .kicker { color: var(--accent); font-weight: 800; letter-spacing: .14em; font-size: 12px; }
.hero-main h2 { font-size: clamp(30px, 5vw, 60px); letter-spacing: -.055em; line-height: .98; margin: 10px 0 14px; max-width: 850px; }
.hero-main p { color: var(--muted); max-width: 680px; margin: 0; line-height: 1.65; }
.hero-side { border-radius: 26px; padding: 26px; display: grid; align-content: space-between; gap: 30px; }
.hero-side strong { font-size: 48px; letter-spacing: -.06em; }
.hero-side span { color: var(--muted); }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 30px 0 14px; }
.section-head h2 { margin: 0; font-size: 20px; }
.section-head p { margin: 4px 0 0; color: var(--muted); }
.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.workflow-card { min-height: 190px; text-align: left; color: inherit; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.workflow-card:hover { transform: translateY(-2px); border-color: rgba(103,232,249,.48); background: var(--panel2); }
.workflow-icon { font-size: 34px; }
.workflow-card h3 { margin: 20px 0 7px; font-size: 21px; }
.workflow-card p { color: var(--muted); margin: 0; line-height: 1.5; }
.workflow-run { color: var(--accent); font-weight: 800; margin-top: 20px; }

.panel { border-radius: 24px; padding: 26px; }
.runner-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 28px; }
.runner-head h2 { margin: 4px 0 8px; font-size: 32px; }
.runner-head p { color: var(--muted); margin: 0; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--muted); font-size: 12px; }

.question { max-width: 760px; margin: 32px auto; }
.question .step { color: var(--accent); font-weight: 800; font-size: 12px; letter-spacing: .13em; }
.question h2 { font-size: clamp(26px, 4vw, 42px); margin: 9px 0 20px; letter-spacing: -.04em; }
.field, .builder-field { width: 100%; background: #0b1017; color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; outline: none; }
.field:focus, .builder-field:focus { border-color: rgba(103,232,249,.7); box-shadow: 0 0 0 3px rgba(103,232,249,.08); }
textarea.field { min-height: 150px; resize: vertical; }
.button-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.option-btn { min-height: 74px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-weight: 800; }
.option-btn:hover { border-color: var(--accent); }
.runner-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }

.primary, .ghost, .danger, .mini { border-radius: 12px; border: 1px solid var(--line); padding: 11px 15px; color: var(--text); }
.primary { background: var(--accent); border-color: var(--accent); color: #041014; font-weight: 900; }
.ghost { background: var(--panel2); }
.danger { background: transparent; border-color: rgba(251,113,133,.4); color: var(--danger); }
.mini { padding: 7px 10px; background: #0c1118; color: var(--muted); }

.compose { display: grid; gap: 12px; }
.compose label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.compose textarea { min-height: 320px; }
.compose-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.builder-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; }
.builder-list, .builder-editor { border: 1px solid var(--line); background: var(--panel); border-radius: 22px; min-height: 650px; }
.builder-list { padding: 14px; }
.builder-item { width: 100%; text-align: left; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 13px; margin-bottom: 7px; }
.builder-item:hover, .builder-item.active { background: var(--panel2); border-color: var(--line); }
.builder-item strong { display: block; }
.builder-item small { color: var(--muted); }
.builder-editor { padding: 24px; }
.builder-grid { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.form-row { display: grid; gap: 7px; margin-bottom: 15px; }
.form-row label { color: var(--muted); font-size: 12px; font-weight: 800; }
.block-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.block-list { display: grid; gap: 10px; }
.block { border: 1px solid var(--line); border-radius: 16px; background: #0c1118; overflow: hidden; }
.block-head { padding: 12px 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.block-head strong { font-size: 14px; }
.block-actions { display: flex; gap: 6px; }
.block-body { padding: 14px; display: grid; gap: 11px; }
.block-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
.block-row label { color: var(--muted); font-size: 12px; }
.block-row textarea { min-height: 110px; resize: vertical; }
.variable-hint { margin-top: 18px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); line-height: 1.55; }
.variable-chip { display: inline-block; margin: 4px 5px 0 0; padding: 4px 7px; border-radius: 8px; background: rgba(103,232,249,.08); color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.toast { position: fixed; right: 22px; bottom: 22px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel2); box-shadow: var(--shadow); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .rail { position: fixed; z-index: 20; height: 66px; width: 100%; bottom: 0; top: auto; flex-direction: row; justify-content: center; border-right: 0; border-top: 1px solid var(--line); padding: 8px; }
  .brand-mark { display: none; }
  .workspace { padding: 0 16px 90px; }
  .topbar { min-height: 0; margin-left: -16px; }
  .hero, .builder-layout { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
  .builder-list, .builder-editor { min-height: auto; }
}

@media (max-width: 560px) {
  .brand-header { width: min(76vw, 420px); }
  .top-logo { width: 101.5%; }
  .brand-header h1 { padding-left: 16px; }
  .top-actions .save-state { display: none; }
  .hero-main, .hero-side, .panel, .builder-editor { padding: 20px; }
  .button-options { grid-template-columns: 1fr; }
  .block-row { grid-template-columns: 1fr; gap: 6px; }
  .builder-grid { grid-template-columns: 78px 1fr; }
}

/* Express Mail AI */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.wide { width: 100%; }
.kicker { color: var(--accent); font-weight: 800; letter-spacing: .14em; font-size: 11px; }
.loading { color: var(--accent); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.ai-hero { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(250px,.5fr); gap: 18px; margin-bottom: 28px; }
.ai-hero > div { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(150deg,rgba(21,28,38,.98),rgba(10,14,20,.96)); box-shadow: var(--shadow); }
.ai-hero h2 { margin: 9px 0 18px; font-size: clamp(26px,4vw,48px); line-height: 1.02; letter-spacing: -.045em; }
#natural-mail { min-height: 115px; resize: vertical; }
.princip-card { display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; border-color: rgba(134,239,172,.28) !important; }
.princip-card strong { color: var(--success); font-size: 21px; }
.princip-card span { color: var(--muted); line-height: 1.55; }

.compose-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(340px,.65fr); gap: 18px; align-items: start; }
.compose-main { min-width: 0; }
.compose-head, .ai-panel-head, .fact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.compose-head h2, .ai-panel h3 { margin: 5px 0 18px; }
.compose-fields { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 9px 12px; align-items: center; }
.compose-fields label, .editor-label, .draft-chat label, .memory-detail > label, .builder-editor > label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.editor-label { display: block; margin: 18px 0 7px; }
.mail-editor { min-height: 330px !important; resize: vertical; line-height: 1.6; }
.ai-side { position: sticky; top: 18px; min-width: 0; }
.ai-panel { padding: 20px; max-height: calc(100vh - 36px); overflow: auto; }
.ai-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ai-toolbar .mini { color: var(--text); }

.fact-box { margin: 18px 0; padding: 18px; border: 1px solid rgba(103,232,249,.2); border-radius: 17px; background: rgba(103,232,249,.035); }
.fact-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.lock { opacity: .75; }
.fact-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.fact-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.fact-input[readonly] { color: var(--success); background: rgba(134,239,172,.05); }

.classification { padding: 13px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 6px; }
.classification.high { border-color: rgba(134,239,172,.35); }
.classification.medium { border-color: rgba(250,204,21,.35); }
.classification.low { border-color: rgba(251,113,133,.35); }
.classification span, .classification p { color: var(--muted); font-size: 12px; margin: 0; }
.confidence-bar { height: 4px; background: var(--line); border-radius: 9px; overflow: hidden; }
.confidence-bar i { display: block; height: 100%; background: var(--accent); }
.reference-head { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 9px; font-size: 12px; }
.reference-head span { color: var(--muted); }
.reference-cards { display: grid; gap: 8px; margin-bottom: 10px; }
.reference-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #0c1118; cursor: pointer; }
.reference-card:has(input:checked) { border-color: var(--accent); background: rgba(103,232,249,.05); }
.reference-card strong, .reference-card span, .reference-card p, .reference-card small { display: block; }
.reference-card span, .reference-card small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.reference-card p { color: #c3ccd8; font-size: 12px; line-height: 1.4; margin: 7px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.draft-chat { display: grid; gap: 7px; padding-top: 17px; margin-top: 17px; border-top: 1px solid var(--line); }
.draft-chat textarea { min-height: 75px; }
.ai-context { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(167,139,250,.04); }
.ai-context summary { cursor: pointer; color: var(--accent2); font-weight: 800; }
.ai-context dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin-bottom: 0; font-size: 12px; }
.ai-context dt { color: var(--muted); }.ai-context dd { margin: 0; }

.validation { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 6px; }
.validation span { color: var(--muted); font-size: 12px; }
.validation.green { border-color: rgba(134,239,172,.45); background: rgba(134,239,172,.06); }
.validation.yellow { border-color: rgba(250,204,21,.45); background: rgba(250,204,21,.05); }
.validation.red { border-color: rgba(251,113,133,.5); background: rgba(251,113,133,.06); }
.validation ul { margin: 5px 0 0; padding-left: 18px; }
.validation li { margin: 5px 0; font-size: 13px; }
.validation li.red { color: var(--danger); }
.approval-actions { justify-content: flex-end; margin-top: 14px; }

.chat-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: 18px; align-items: start; }
.chat-log { min-height: 420px; max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 0; }
.chat-bubble { max-width: 82%; padding: 12px 14px; border-radius: 15px; line-height: 1.5; white-space: pre-wrap; }
.chat-bubble.assistant { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); }
.chat-bubble.user { align-self: flex-end; background: var(--accent); color: #041014; }
.chat-input { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.chat-input textarea { min-height: 75px; }
.source-row, .mail-result, .memory-row { width: 100%; display: flex; justify-content: space-between; gap: 14px; text-align: left; color: var(--text); border: 1px solid var(--line); border-radius: 14px; background: #0c1118; padding: 13px; margin-bottom: 8px; }
.source-row:hover, .mail-result:hover, .memory-row:hover { border-color: rgba(103,232,249,.5); }
.source-row span, .mail-result span, .memory-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.mail-result p { color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.mail-result b { color: var(--accent); }
.search-bar { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin: 18px 0; }

.memory-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.accounts-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); gap: 18px; align-items: start; }
.provider-grid, .account-list { display: grid; gap: 12px; margin-top: 18px; }
.provider-card, .account-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #0c1118; }
.provider-card span, .provider-card small, .account-card span, .account-card small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; }
.provider-card small { grid-column: 2 / -1; overflow-wrap: anywhere; }
.provider-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; }
.provider-icon.google { background: #fff; color: #4285f4; }.provider-icon.microsoft { background: #0078d4; color: #fff; }
.provider-card a { text-decoration: none; padding: 10px 14px; border-radius: 12px; text-align: center; font-weight: 800; }
.provider-card .disabled { opacity: .4; pointer-events: none; }
.account-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.rule-row { display: flex; align-items: center; gap: 9px; padding: 10px; border-bottom: 1px solid var(--line); }
.rule-row div { flex: 1; }
.rule-row small { display: block; color: var(--muted); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.status-dot.red { background: var(--danger); }.status-dot.yellow { background: #facc15; }.status-dot.green { background: var(--success); }
.memory-detail { display: grid; gap: 9px; }
.memory-detail textarea { min-height: 80px; }
.field-summary { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.field-summary span { color: var(--muted); font-size: 12px; }
.code-editor { min-height: 420px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }

.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,4,8,.82); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(780px,96vw); max-height: 92vh; overflow: auto; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); }
.modal-close { position: absolute; top: 11px; right: 12px; width: 36px; height: 36px; color: var(--muted); background: transparent; border: 0; font-size: 24px; }
.mail-original { white-space: pre-wrap; overflow-wrap: anywhere; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #090d13; color: var(--text); font: 14px/1.55 Inter,system-ui,sans-serif; }
.preview dl { display: grid; grid-template-columns: 90px 1fr; gap: 7px 12px; }
.preview dt { color: var(--muted); }.preview dd { margin: 0; }
.human-note { color: var(--success); font-weight: 700; }
button:disabled { opacity: .35; cursor: not-allowed; }

/* Materialmännen login */
.login-mode { overflow: hidden; }
.login-mode .app-shell { visibility: hidden; }
.login-screen { position: fixed; z-index: 1000; inset: 0; overflow: hidden; color: #f7fbff; background: radial-gradient(circle at 18% 20%,#173b51 0,transparent 31%),radial-gradient(circle at 86% 82%,#3b2415 0,transparent 28%),#070a0d; transition: opacity .55s,transform .55s; }
.login-screen.authenticated { opacity: 0; transform: scale(1.035); pointer-events: none; }
.material-grid { position:absolute;inset:0;opacity:.17;background-image:linear-gradient(rgba(105,216,239,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(105,216,239,.25) 1px,transparent 1px);background-size:42px 42px;transform:perspective(700px) rotateX(58deg) scale(1.5) translateY(25%);animation:gridMove 14s linear infinite; }
@keyframes gridMove { to { background-position:0 84px,84px 0; } }
.steel-beam { position:absolute;width:65vw;height:70px;background:linear-gradient(#3d4850,#12181d 30%,#080b0d 72%,#313a40);border:1px solid #66727a;box-shadow:0 18px 45px #000;opacity:.55; }
.steel-beam:after { content:"";position:absolute;inset:28px 0;border-top:2px dashed rgba(255,255,255,.18); }
.beam-a { right:-18vw;top:8vh;transform:rotate(-27deg);animation:beamFloat 8s ease-in-out infinite; }.beam-b { left:-24vw;bottom:4vh;transform:rotate(22deg);animation:beamFloat 10s ease-in-out -3s infinite reverse; }
@keyframes beamFloat { 50% { translate:0 15px; } }
.sparks { position:absolute;right:13%;bottom:18%; }.sparks i { --angle:calc(var(--i)*20deg);position:absolute;width:4px;height:4px;border-radius:50%;background:#ffb339;box-shadow:0 0 12px #ff7b16;animation:spark 2.4s calc(var(--i)*-.11s) infinite ease-out; }
@keyframes spark { 0%{opacity:0;transform:rotate(var(--angle)) translateX(0)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(calc(65px + var(--i)*3px)) scale(.2)} }
.login-stage { position:relative;z-index:2;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,480px);align-items:center;gap:clamp(40px,8vw,130px);width:min(1320px,calc(100% - 48px));margin:auto;padding:34px 0; }
.login-story { animation:loginRise .8s cubic-bezier(.2,.8,.2,1) both; }.login-story img { width:min(700px,100%);display:block;margin-bottom:28px;filter:drop-shadow(0 18px 28px #000); }.login-story h1 { font-size:clamp(48px,6.8vw,104px);line-height:.87;margin:13px 0 25px;text-transform:uppercase;font-weight:950;letter-spacing:-.075em; }.login-story h1 span { color:#67e8f9;-webkit-text-stroke:1px rgba(255,255,255,.15); }.login-story p { max-width:620px;color:#aab8c3;font-size:18px;line-height:1.6; }
.material-tags { display:flex;flex-wrap:wrap;gap:9px;margin-top:28px; }.material-tags b { font-size:10px;letter-spacing:.17em;padding:8px 12px;border:1px solid #40515d;background:rgba(10,18,24,.65);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); }
.login-card { position:relative;padding:38px;border:1px solid #394753;border-top:3px solid #67e8f9;border-radius:5px;background:linear-gradient(145deg,rgba(20,28,34,.96),rgba(7,11,15,.98));box-shadow:0 45px 100px #000, inset 0 0 80px rgba(103,232,249,.025);animation:loginRise .8s .13s cubic-bezier(.2,.8,.2,1) both; }.login-card:before,.login-card:after { content:"";position:absolute;width:14px;height:14px;border:2px solid #64727b;border-radius:50%;top:14px; }.login-card:before{left:14px}.login-card:after{right:14px}.login-badge { color:#67e8f9;letter-spacing:.18em;font-size:10px;font-weight:900; }.login-card h2 { margin:12px 0 4px;font-size:32px;letter-spacing:-.04em; }.login-card>p { color:#8d9ba6;margin:0 0 28px; }.login-card label { display:grid;gap:7px;margin:15px 0;color:#aab6bf;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }.login-card .field { border-radius:4px;background:#080c10;padding:15px;border-color:#34424c; }.password-wrap { position:relative; }.password-wrap button { position:absolute;right:7px;top:7px;bottom:7px;width:40px;border:0;background:transparent;color:#87949d; }.password-wrap input { padding-right:48px; }
.login-submit { width:100%;margin-top:13px;padding:16px 18px;display:flex;justify-content:space-between;border:0;border-radius:3px;background:linear-gradient(90deg,#67e8f9,#4db9df);color:#051015;font-weight:950;letter-spacing:.09em;box-shadow:0 10px 30px rgba(64,202,233,.18);transition:.2s; }.login-submit:hover { transform:translateY(-2px);box-shadow:0 15px 40px rgba(64,202,233,.32); }.login-submit.working i { animation:working .7s infinite alternate; }.login-card>small { display:block;text-align:center;color:#65727c;margin-top:18px;font-size:10px; }.login-error { min-height:18px;color:#fb7185;font-size:12px; }.shake { animation:shake .4s!important; }
@keyframes loginRise { from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none} } @keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}} @keyframes working{to{transform:translateX(8px)}}
.admin-form { display:grid;gap:13px;margin-top:18px; }.admin-form label { display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700; }
@media(max-width:850px){.login-stage{grid-template-columns:1fr;width:min(540px,calc(100% - 28px));padding:22px 0}.login-story h1,.login-story p,.material-tags,.login-story .kicker{display:none}.login-story img{margin:0 auto -15px}.login-card{padding:28px}.sparks{display:none}}

/* Scroll-driven Materialmännen login journey */
.login-track { height:100%; transition:background 1s; }
.scroll-scene { position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(12%) scale(.97);transition:opacity .65s,transform 1.15s cubic-bezier(.7,0,.15,1),visibility 0s 1.2s;background:#080b0e; }
.scroll-scene.active { opacity:1;visibility:visible;transform:none;transition-delay:0s; }
.scroll-scene.leaving-up { opacity:0;visibility:visible;transform:translateY(-18%) scale(1.06); }
.scroll-scene.leaving-down { opacity:0;visibility:visible;transform:translateY(18%) scale(.94); }
.scene-dots { position:fixed;z-index:1100;right:24px;top:50%;translate:0 -50%;display:grid;gap:10px; }
.scene-dots button { width:9px;height:9px;padding:0;border:1px solid rgba(255,255,255,.48);background:transparent;rotate:45deg;transition:.35s; }
.scene-dots button.active { background:#67e8f9;border-color:#67e8f9;scale:1.45;box-shadow:0 0 18px #67e8f9; }
.scene-counter { position:absolute;right:24px;bottom:20px;color:rgba(255,255,255,.35);font:800 10px/1 ui-monospace,monospace;letter-spacing:.16em; }

.scene-intro { background:radial-gradient(circle at 50% 35%,#193747 0,transparent 38%),#070a0d; }
.intro-lockup { position:relative;z-index:4;width:min(1120px,86vw);margin:3vh auto 0;text-align:center; }
.intro-lockup img { display:block;width:min(900px,88vw);max-height:28vh;object-fit:contain;margin:0 auto 5vh;filter:drop-shadow(0 22px 35px #000);animation:introLogo 1.2s cubic-bezier(.2,.8,.2,1) both; }
.intro-lockup h1 { margin:14px 0 0;font-size:clamp(52px,8vw,125px);line-height:.84;text-transform:uppercase;font-weight:950;letter-spacing:-.075em; }
.intro-lockup h1 span { color:#67e8f9; }.intro-lockup .kicker { animation:fadeRise .8s .5s both; }.intro-lockup h1 { animation:fadeRise .9s .7s both; }
.scroll-instruction { position:absolute;z-index:5;bottom:4vh;left:50%;translate:-50% 0;display:grid;justify-items:center;gap:12px;color:#8ea0aa;font-size:10px;font-weight:900;letter-spacing:.17em;animation:fadeRise .8s 1.3s both; }
.scroll-instruction i { width:24px;height:38px;border:1px solid #6d7a82;border-radius:14px;position:relative; }.scroll-instruction i:after { content:"";position:absolute;left:10px;top:7px;width:2px;height:7px;background:#67e8f9;animation:scrollCue 1.5s infinite; }
@keyframes introLogo{from{opacity:0;transform:translateY(-70px) scale(.9);filter:blur(12px)}to{opacity:1;transform:none}} @keyframes fadeRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} @keyframes scrollCue{to{opacity:0;transform:translateY(14px)}}

.scene-deck { background:linear-gradient(125deg,#16100b,#080a0b);perspective:1000px; }
.deck-wall { position:absolute;inset:-3%;display:grid;grid-template-rows:repeat(11,1fr);gap:4px;transform:rotate(-2deg) scale(1.05); }
.deck-board { position:relative;display:block;background:linear-gradient(180deg,#bd8450,#8d592f 44%,#5d351d 48%,#9c6638 55%,#774523);border-top:1px solid #dfad75;border-bottom:2px solid #3a2112;box-shadow:0 7px 18px rgba(0,0,0,.5);transform:translateX(calc((var(--n) % 2)*200% - 100%)) rotateZ(calc((var(--n) - 5)*.35deg));opacity:0; }
.deck-board:before,.deck-board:after { content:"";position:absolute;width:11px;height:11px;border-radius:50%;top:50%;background:radial-gradient(circle at 35% 30%,#ccd2d2,#42484b 45%,#111);box-shadow:0 1px 5px #000; }.deck-board:before{left:7vw}.deck-board:after{right:7vw}.deck-board b { position:absolute;inset:0;background:repeating-radial-gradient(ellipse at calc(13% + var(--n)*7%) 50%,transparent 0 18px,rgba(55,26,8,.16) 20px 22px,transparent 24px 35px); }
.scene-deck.active .deck-board { animation:slamBoard .75s calc(var(--n)*.095s + .1s) cubic-bezier(.15,.8,.25,1.2) forwards; }
.scene-deck.leaving-up .deck-board { animation:ripBoard .75s calc((10 - var(--n))*.045s) ease-in forwards; }
@keyframes slamBoard{65%{opacity:1;transform:translateX(2%) rotateZ(0);filter:brightness(1.4)}100%{opacity:1;transform:none;filter:none}} @keyframes ripBoard{to{opacity:0;transform:translateX(calc((var(--n) % 2)*240% - 120%)) rotate(calc((var(--n) - 5)*4deg))}}
.deck-title { position:absolute;z-index:5;left:50%;top:50%;translate:-50% -50%;width:90%;text-align:center;text-shadow:0 8px 22px #2b1508;opacity:0;transform:scale(1.25); }.scene-deck.active .deck-title{animation:stampText .55s 1.2s cubic-bezier(.2,1.7,.4,1) forwards}.deck-title small{font-weight:950;letter-spacing:.3em;color:#29170c}.deck-title h2{margin:7px 0 0;font-size:clamp(46px,9vw,140px);letter-spacing:-.075em;line-height:.82;color:#f5e8d4}.deck-title p{margin:16px 0 0;font-size:clamp(22px,3vw,46px);font-weight:950;letter-spacing:.16em;color:#201108}@keyframes stampText{to{opacity:1;transform:none}}

.scene-fasteners { background:radial-gradient(circle,#263038 0,#0b0f12 52%,#040607 100%);perspective:750px; }
.dust-cloud { position:absolute;inset:-20%;background:radial-gradient(circle,rgba(196,151,101,.3),transparent 55%);opacity:0; }.scene-fasteners.active .dust-cloud{animation:dust 1.5s both}@keyframes dust{20%{opacity:1;scale:1.4}to{opacity:0;scale:2}}
.screw-tunnel { position:absolute;inset:0;transform-style:preserve-3d; }.flying-screw { position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:8px;height:70px;border-radius:4px;background:linear-gradient(90deg,#333,#e2e6e7 38%,#777 62%,#222);box-shadow:0 0 14px rgba(255,255,255,.25);opacity:0;transform:translateZ(-900px) rotate(calc(var(--r)*1deg)); }.flying-screw:before{content:"";position:absolute;left:-5px;top:-3px;width:18px;height:8px;border-radius:50%;background:linear-gradient(#e5e5e5,#34383a)}.flying-screw:after{content:"";position:absolute;inset:12px 0;background:repeating-linear-gradient(170deg,transparent 0 5px,#222 6px 8px)}.scene-fasteners.active .flying-screw{animation:screwFly 2.7s calc(var(--n)*-.075s) linear infinite}@keyframes screwFly{0%{opacity:0;transform:translateZ(-1000px) rotate(calc(var(--r)*1deg))}20%{opacity:.8}100%{opacity:0;transform:translateZ(600px) rotate(calc((var(--r) + 400)*1deg))}}
.fastener-copy { position:relative;z-index:3;width:min(1100px,86vw);margin:12vh auto; }.partner-stamp{display:inline-block;padding:9px 15px;background:#ed1c24;color:#fff;font-weight:950;letter-spacing:.05em;transform:rotate(-3deg);box-shadow:7px 7px 0 #611}.fastener-copy h2{font-size:clamp(55px,9vw,130px);line-height:.78;letter-spacing:-.07em;margin:28px 0}.fastener-copy h2 span{color:#f04444}.fastener-copy p{color:#a9b5bc;font-size:18px}.scene-fasteners.active .fastener-copy{animation:fastCopy 1s .35s both}@keyframes fastCopy{from{opacity:0;transform:translateX(-80px) skewX(-8deg)}to{opacity:1;transform:none}}

.scene-network { background:linear-gradient(135deg,#071018,#101923 55%,#080b0d); }
.scene-network:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(103,232,249,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.06) 1px,transparent 1px);background-size:55px 55px}.route-lines i{position:absolute;height:2px;width:65vw;left:35%;top:calc(18% + var(--i)*18%);background:linear-gradient(90deg,transparent,#67e8f9,transparent);transform-origin:left;transform:rotate(calc(-17deg + var(--i)*11deg)) scaleX(0);box-shadow:0 0 12px #67e8f9}.route-lines i:nth-child(1){--i:0}.route-lines i:nth-child(2){--i:1}.route-lines i:nth-child(3){--i:2}.route-lines i:nth-child(4){--i:3}.scene-network.active .route-lines i{animation:drawRoute .9s calc(var(--i)*.16s + .2s) forwards}@keyframes drawRoute{to{transform:rotate(calc(-17deg + var(--i)*11deg)) scaleX(1)}}
.network-copy { position:absolute;z-index:3;left:7vw;top:14vh;max-width:620px; }.network-copy small{color:#67e8f9;font-weight:900;letter-spacing:.2em}.network-copy h2{font-size:clamp(58px,8vw,118px);line-height:.82;letter-spacing:-.07em;margin:22px 0}.network-copy h2 span{color:#67e8f9}.network-copy p{max-width:500px;color:#91a0aa;font-size:18px;line-height:1.55}.scene-network.active .network-copy{animation:fadeRise .9s .2s both}
.supplier-stack { position:absolute;z-index:4;right:7vw;top:16vh;width:min(400px,36vw);display:grid;gap:12px;perspective:800px}.supplier-stack article{padding:18px 22px;border:1px solid #33434e;border-left:4px solid #67e8f9;background:rgba(8,13,18,.88);box-shadow:0 18px 34px rgba(0,0,0,.3);opacity:0;transform:translateX(100px) rotateY(-20deg)}.supplier-stack b,.supplier-stack span{display:block}.supplier-stack b{font-size:21px;letter-spacing:.03em}.supplier-stack span{color:#7f8e98;font-size:12px;margin-top:4px}.scene-network.active .supplier-stack article{animation:supplierIn .7s calc(.45s + var(--n)*.15s) forwards}.supplier-stack article:nth-child(1){--n:0}.supplier-stack article:nth-child(2){--n:1}.supplier-stack article:nth-child(3){--n:2}.supplier-stack article:nth-child(4){--n:3}@keyframes supplierIn{to{opacity:1;transform:none}}

.scene-login { background:radial-gradient(circle at 18% 20%,#173b51 0,transparent 31%),radial-gradient(circle at 86% 82%,#3b2415 0,transparent 28%),#070a0d}.scene-login .login-stage{opacity:0;transform:translateY(40px)}.scene-login.active .login-stage{animation:loginRise .9s .25s both}
@media(max-width:850px){.intro-lockup{margin-top:2vh}.intro-lockup img{max-height:20vh;margin-bottom:7vh}.intro-lockup h1{font-size:clamp(42px,13vw,74px)}.deck-title h2{font-size:14vw}.fastener-copy{margin-top:18vh}.fastener-copy h2{font-size:15vw}.network-copy{left:7vw;top:9vh}.network-copy h2{font-size:14vw}.supplier-stack{left:7vw;right:auto;top:52vh;width:86vw;grid-template-columns:1fr 1fr}.supplier-stack article{padding:12px}.scene-dots{right:10px}.scene-counter{right:12px}.scroll-instruction{width:90%;text-align:center}.scene-login .login-stage{padding-top:10vh}}
@media(prefers-reduced-motion:reduce){.scroll-scene,.deck-board,.flying-screw,.supplier-stack article,.route-lines i{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Login journey v2: falling timber, fastening transition and Materialmännen house */
.scroll-scene h1,.scroll-scene h2,.scroll-scene p { overflow:visible; }
.scroll-scene h1,.scroll-scene h2 { line-height:1.02!important;padding:.08em 0 .12em; }
.intro-lockup h1 { font-size:clamp(45px,7.2vw,112px);line-height:.96!important; }
.intro-lockup h1 span { display:inline-block;font-size:.62em;letter-spacing:-.045em; }

.deck-wall { inset:0;gap:3px;transform:none; }
.deck-board { transform:translate(-125vw,-45vh) rotate(-18deg);opacity:0;will-change:transform; }
.scene-deck.active .deck-board { animation:boardDrop .7s calc(var(--n)*.115s + .08s) cubic-bezier(.18,.75,.28,1.18) forwards; }
@keyframes boardDrop { 0%{opacity:0;transform:translate(-125vw,-45vh) rotate(-18deg)} 65%{opacity:1;transform:translate(0,13px) rotate(1.4deg);filter:brightness(1.35)} 78%{transform:translate(0,-7px) rotate(-.5deg)} 90%{transform:translate(0,3px)} 100%{opacity:1;transform:none;filter:none} }
.deck-impacts { position:absolute;inset:0;z-index:3;pointer-events:none; }
.deck-impacts i { position:absolute;left:7%;right:7%;top:calc((var(--n) + .85)*9.09%);height:10px;opacity:0;background:radial-gradient(ellipse,rgba(244,207,161,.7),rgba(151,97,48,.28) 35%,transparent 70%);filter:blur(3px);transform:scaleX(.15); }
.scene-deck.active .deck-impacts i { animation:boardImpact .42s calc(var(--n)*.115s + .56s) ease-out both; }
@keyframes boardImpact { 0%{opacity:0;transform:scaleX(.1) scaleY(.2)} 30%{opacity:1;transform:scaleX(1.2) scaleY(2)} 100%{opacity:0;transform:scaleX(1.8) scaleY(4);filter:blur(8px)} }
.scene-deck.active { animation:deckHit 1.36s .5s both; }
@keyframes deckHit { 0%,8%,18%,28%,38%,48%,58%,68%,78%,88%,100%{translate:0 0} 4%,14%,24%,34%,44%,54%,64%,74%,84%,94%{translate:0 2px} }
.deck-title { display:none; }
.deck-sign { position:absolute;z-index:7;left:50%;top:50%;width:min(900px,84vw);translate:-50% -50%;padding:clamp(20px,3vw,42px);opacity:0;transform:translate(-110vw,-65vh) rotate(-28deg) scale(1.25);background:linear-gradient(155deg,#101820,#25313a);border:8px solid #d6dde0;outline:3px solid #20282d;box-shadow:0 30px 70px #271508,10px 12px 0 rgba(0,0,0,.45);text-align:center; }
.deck-sign:before { content:"";position:absolute;inset:7px;border:1px dashed rgba(255,255,255,.23); }.deck-sign>i { position:absolute;top:18px;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1f1ed,#61696d 42%,#111 70%);box-shadow:0 2px 5px #000 }.deck-sign>i:first-child{left:22px}.deck-sign>i:nth-child(2){right:22px}
.deck-sign small{position:relative;color:#ffb449;font-weight:950;letter-spacing:.24em}.deck-sign h2{position:relative;margin:8px 0 0;color:#f7fbfd;font-size:clamp(38px,7.2vw,94px);letter-spacing:-.045em}.deck-sign p{position:relative;margin:5px 0 0;color:#67e8f9;font-size:clamp(18px,2.4vw,32px);font-weight:950;letter-spacing:.13em}.scene-deck.active .deck-sign{animation:throwSign .9s 1.48s cubic-bezier(.12,.8,.22,1.16) forwards}@keyframes throwSign{72%{opacity:1;transform:translate(20px,13px) rotate(2deg) scale(.98)}88%{transform:translate(-7px,-4px) rotate(-.6deg)}100%{opacity:1;transform:none}}

.fastener-photo { position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,8,.35),rgba(3,6,8,.05)),url('/static/fastener-workbench-v1.png?v=1') center/cover no-repeat;filter:saturate(.85) contrast(1.07);transform:scale(1.035); }
.scene-fasteners.active .fastener-photo { animation:photoReveal 1.3s both; } @keyframes photoReveal{from{opacity:0;transform:scale(1.13);filter:blur(12px)}to{opacity:1;transform:scale(1.035);filter:saturate(.85) contrast(1.07)}}
.nail-volley { position:absolute;z-index:6;inset:0;pointer-events:none;overflow:hidden; }.machine-nail { position:absolute;left:-160px;top:calc(var(--y)*1%);width:125px;height:8px;background:linear-gradient(#f4f5f2,#555 45%,#15191b 55%,#b8bec0);clip-path:polygon(0 0,100% 40%,100% 60%,0 100%);opacity:0;filter:drop-shadow(0 0 8px #fff); }.machine-nail:before{content:"";position:absolute;left:0;top:-5px;width:16px;height:18px;background:#aeb5b8}.scene-fasteners.active .machine-nail{animation:nailShot .48s calc(var(--n)*.13s + .05s) cubic-bezier(.1,.75,.2,1) 1 both}@keyframes nailShot{0%{opacity:0;transform:translateX(0)}12%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(calc(100vw + 320px))}}
.flying-screw { top:-120px!important;width:7px;height:72px;opacity:0;transform:translateX(calc((var(--x) - 50)*.15vw)) rotate(calc(var(--r)*1deg)); }
.scene-fasteners.active .flying-screw { animation:screwRain 1.25s calc(var(--n)*.028s + .35s) cubic-bezier(.22,.52,.38,1) 1 both; }
@keyframes screwRain{0%{opacity:0;top:-120px;transform:translateX(-35px) rotate(calc(var(--r)*1deg))}14%{opacity:.9}92%{opacity:.9}100%{opacity:0;top:112vh;transform:translateX(45px) rotate(calc((var(--r) + 420)*1deg))}}
.fastener-copy { position:absolute;z-index:8;left:3.5vw;top:4vh;width:min(480px,43vw);margin:0;padding:28px 30px 24px;background:linear-gradient(145deg,#171c20,#07090b);border:3px solid #dfe5e5;box-shadow:12px 15px 0 #171a1c,0 30px 70px #000;transform-origin:calc(100% - 26px) 18px; }
.fastener-copy .sign-screw { position:absolute;top:12px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#697174 45%,#0b0d0e 72%);box-shadow:0 2px 5px #000 }.fastener-copy .sign-screw.left{left:16px}.fastener-copy .sign-screw.right{right:16px}.fastener-copy h2{font-size:clamp(28px,3.4vw,52px);line-height:1.02!important;letter-spacing:-.035em;margin:15px 0 8px}.fastener-copy p{margin:0;font-size:13px}.scene-fasteners.active .fastener-copy{animation:fastCopy .85s .6s both}
.scene-fasteners.leaving-up { opacity:1;transform:none;visibility:visible;animation:fastenerSceneOut 2.35s forwards; }.scene-fasteners.leaving-up .fastener-copy{animation:signUnscrewFall 2.25s ease-in forwards}.scene-fasteners.leaving-up .sign-screw.left{animation:leftScrewOut .22s .12s forwards}.scene-fasteners.leaving-up .sign-screw.right{animation:rightScrewOut .2s 1.36s forwards}.scene-fasteners.leaving-up + .scene-house.active{animation:houseReveal 1s 1.42s both}
@keyframes signUnscrewFall{0%,8%{transform:none}22%{transform:rotate(13deg)}35%{transform:rotate(-8deg)}49%{transform:rotate(17deg)}61%{transform:rotate(-5deg)}67%{transform:rotate(14deg)}100%{transform:translate(28vw,125vh) rotate(88deg)}}@keyframes leftScrewOut{to{opacity:0;transform:translateY(55px) rotate(180deg)}}@keyframes rightScrewOut{to{opacity:0;transform:translateY(55px) rotate(180deg)}}@keyframes fastenerSceneOut{0%,68%{opacity:1}100%{opacity:0}}@keyframes houseReveal{from{opacity:0;transform:translateY(16%) scale(.96)}to{opacity:1;transform:none}}

.scene-house { background:linear-gradient(180deg,#c7e6ed 0,#80bdca 54%,#223b38 54%,#101b18 100%); }
.house-sun{position:absolute;right:12vw;top:9vh;width:14vw;height:14vw;border-radius:50%;background:#fff5bd;box-shadow:0 0 90px #fff1a5}.house-build{position:absolute;right:8vw;bottom:15vh;width:min(49vw,720px);height:min(58vh,600px)}.house-build i{position:absolute;display:block;opacity:0}.house-build .wall{bottom:0;height:62%;background:repeating-linear-gradient(90deg,#a8713e 0 22px,#70431f 23px 26px);border:5px solid #3b2617}.wall-a{left:4%;width:50%}.wall-b{right:4%;width:42%}.house-build .roof{z-index:4;left:0;top:3%;width:100%;height:42%;background:repeating-linear-gradient(170deg,#343b3e 0 15px,#111719 16px 19px);clip-path:polygon(50% 0,100% 100%,0 100%)}.house-build .door{z-index:5;left:22%;bottom:0;width:15%;height:37%;background:#183642;border:7px solid #e4d2b3}.house-build .window{z-index:5;right:14%;bottom:20%;width:18%;height:20%;background:linear-gradient(135deg,#daf8ff,#5ca8bc);border:7px solid #e4d2b3}.scene-house.active .wall-a{animation:housePart .65s .25s forwards}.scene-house.active .wall-b{animation:housePart .65s .48s forwards}.scene-house.active .roof{animation:roofDrop .75s .78s forwards}.scene-house.active .door,.scene-house.active .window{animation:housePart .5s 1.2s forwards}@keyframes housePart{from{opacity:0;transform:translateY(90px)}to{opacity:1;transform:none}}@keyframes roofDrop{from{opacity:0;transform:translateY(-150px) rotate(-8deg)}75%{opacity:1;transform:translateY(8px)}to{opacity:1;transform:none}}
.house-copy{position:absolute;z-index:7;left:6vw;top:16vh;width:min(600px,49vw)}.house-copy small{font-weight:950;letter-spacing:.22em;color:#122e36}.house-copy h2{font-size:clamp(48px,7vw,104px);letter-spacing:-.055em;margin:15px 0;color:#fff;text-shadow:0 5px 20px rgba(0,0,0,.25)}.house-copy h2 span{color:#153c44}.house-copy p{font-size:18px;font-weight:700;color:#17383e}.scene-house.active .house-copy{animation:fadeRise .8s .2s both}.department-belt{position:absolute;z-index:9;bottom:4vh;left:0;right:0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.department-belt b{padding:10px 15px;background:#101719;color:#dce9e9;border-bottom:3px solid #ffb449;font-size:11px;letter-spacing:.1em;opacity:0}.scene-house.active .department-belt b{animation:stampText .45s calc(.9s + var(--n)*.09s) forwards}.department-belt b:nth-child(1){--n:0}.department-belt b:nth-child(2){--n:1}.department-belt b:nth-child(3){--n:2}.department-belt b:nth-child(4){--n:3}.department-belt b:nth-child(5){--n:4}.department-belt b:nth-child(6){--n:5}
@media(max-width:850px){.deck-sign{width:88vw;border-width:4px}.deck-sign h2{font-size:11vw}.fastener-copy{left:4vw;top:3vh;width:74vw;padding:22px}.fastener-copy h2{font-size:7.5vw}.fastener-photo{background-position:62% center}.house-copy{left:6vw;top:8vh;width:88vw}.house-copy h2{font-size:12vw}.house-build{right:3vw;bottom:16vh;width:86vw;height:48vh}.department-belt{bottom:2vh}.department-belt b{padding:6px 8px;font-size:8px}.intro-lockup h1{line-height:1!important}}

/* Login journey v3: hinged planks, nailed sign and product room */
.deck-board { transform-origin:left center;transform:translateX(-4vw) rotate(-90deg);opacity:0; }
.scene-deck.active .deck-board { animation:hingedPlankFall .72s calc(var(--n)*.12s + .08s) cubic-bezier(.18,.76,.26,1.08) forwards; }
@keyframes hingedPlankFall { 0%{opacity:1;transform:translateX(-5vw) rotate(-90deg)} 72%{opacity:1;transform:translateX(0) rotate(4deg)} 84%{transform:rotate(-1.5deg)} 94%{transform:rotate(.5deg)} 100%{opacity:1;transform:none} }
.deck-impacts i { left:0;right:0;top:calc((var(--n) + .88)*9.09%);height:14px;background:radial-gradient(ellipse,rgba(250,220,179,.92),rgba(168,105,51,.42) 38%,transparent 72%); }
.scene-deck.active .deck-impacts i { animation:plankDustBurst .56s calc(var(--n)*.12s + .55s) ease-out both; }
@keyframes plankDustBurst { 0%{opacity:0;transform:translateX(-30%) scaleX(.05) scaleY(.3)} 20%{opacity:1} 55%{opacity:.78;transform:translateX(0) scaleX(1) scaleY(3)} 100%{opacity:0;transform:translateX(12%) scaleX(1.5) scaleY(6);filter:blur(11px)} }
.deck-sign { display:grid;place-items:center;text-align:center;transform:translate(-120vw,-50vh) rotate(-20deg); }
.deck-sign>div { width:100%;display:grid;place-items:center;text-align:center; }
.scene-deck.active .deck-sign { animation:signDirectHit .62s 1.52s cubic-bezier(.12,.72,.2,1) forwards; }
@keyframes signDirectHit { 0%{opacity:0;transform:translate(-120vw,-50vh) rotate(-20deg)} 96%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:1;transform:none} }
.deck-sign:after { content:"";position:absolute;inset:-18px;pointer-events:none;border:4px solid rgba(255,190,93,.9);opacity:0;box-shadow:0 0 45px #ff9d38,inset 0 0 35px #ff9d38; }
.scene-deck.active .deck-sign:after { animation:signImpactFlash .48s 2.1s ease-out both; }
@keyframes signImpactFlash { 0%{opacity:0;transform:scale(.82)} 22%{opacity:1;transform:scale(1.03)} 100%{opacity:0;transform:scale(1.13)} }
.deck-sign>i { z-index:6;opacity:0;top:18px; }
.scene-deck.active .deck-sign>i:first-child { animation:nailFromLeft .44s 2.34s cubic-bezier(.12,.8,.25,1.2) forwards; }
.scene-deck.active .deck-sign>i:nth-child(2) { animation:nailFromRight .44s 2.46s cubic-bezier(.12,.8,.25,1.2) forwards; }
@keyframes nailFromLeft { 0%{opacity:1;transform:translateX(-70vw) rotate(-540deg) scale(1.7)} 78%{transform:translateX(5px) rotate(12deg) scale(1.15)} 100%{opacity:1;transform:none} }
@keyframes nailFromRight { 0%{opacity:1;transform:translateX(70vw) rotate(540deg) scale(1.7)} 78%{transform:translateX(-5px) rotate(-12deg) scale(1.15)} 100%{opacity:1;transform:none} }

.scene-fasteners.leaving-up { z-index:30; }
.scene-fasteners.leaving-up + .scene-products.active { animation:productSceneReveal .75s 1.55s both; }
@keyframes productSceneReveal { from{opacity:0;transform:translateY(15%) scale(.97)} to{opacity:1;transform:none} }

.scene-products { background:#171311;perspective:1100px; }
.product-floor { position:absolute;z-index:1;inset:0;display:grid;grid-template-columns:repeat(14,1fr);background:#302016;transform-origin:center bottom;perspective:900px; }
.product-floor i { opacity:0;background:linear-gradient(90deg,#7f4f28,#c58a4d 42%,#8c582f 46%,#d3a166 74%,#6a3d20);border-left:2px solid #4b2b18;border-right:1px solid #e4b77c;transform:translateY(115vh) rotateX(40deg); }
.scene-products.active .product-floor i { animation:floorLay .42s calc(.35s + var(--n)*.045s) ease-out forwards; }
@keyframes floorLay { to{opacity:1;transform:none} }
.gutter { position:absolute;z-index:7;left:-5vw;right:-5vw;top:3vh;height:42px;opacity:0;background:linear-gradient(#f3f5f4,#8b9598 38%,#333b3e 48%,#bdc4c5 70%,#626b6e);border-radius:5px 5px 20px 20px;box-shadow:0 9px 17px rgba(0,0,0,.4) }.gutter:after{content:"";position:absolute;inset:8px 2%;border-top:3px solid rgba(255,255,255,.42)}.scene-products.active .gutter{animation:gutterThrow .62s .18s cubic-bezier(.15,.8,.2,1.15) forwards}@keyframes gutterThrow{from{opacity:0;transform:translateY(-130px) rotate(-7deg)}to{opacity:1;transform:none}}
.downpipe { position:absolute;z-index:8;right:4vw;top:3vh;width:46px;height:78vh;opacity:0;background:linear-gradient(90deg,#6f797c,#e1e4e2 42%,#555f62 72%,#20282b);border-radius:4px 4px 22px 22px;box-shadow:8px 12px 19px rgba(0,0,0,.45)}.downpipe i{position:absolute;left:-5px;right:-5px;height:14px;background:#8e999b;border:2px solid #333}.downpipe i:first-child{top:24%}.downpipe i:last-child{top:62%}.scene-products.active .downpipe{animation:pipeThrow .68s .42s cubic-bezier(.13,.76,.21,1.1) forwards}@keyframes pipeThrow{from{opacity:0;transform:translateX(170px) rotate(9deg)}to{opacity:1;transform:none}}
.product-stage { position:absolute;z-index:8;left:4vw;right:8vw;bottom:7vh;height:48vh;display:flex;align-items:flex-end;justify-content:space-around;gap:2vw;pointer-events:none }.product-stage article{position:relative;opacity:0;filter:drop-shadow(0 18px 15px rgba(0,0,0,.5))}.product-stage b{position:absolute;left:50%;bottom:8px;translate:-50% 0;color:#fff;font-size:10px;letter-spacing:.08em;text-shadow:0 2px 3px #000}.scene-products.active .product-stage article{animation:productToss .58s calc(1.02s + var(--n)*.12s) cubic-bezier(.15,.76,.25,1.17) forwards}.product-stage article:nth-child(1){--n:0}.product-stage article:nth-child(2){--n:1}.product-stage article:nth-child(3){--n:2}.product-stage article:nth-child(4){--n:3}.product-stage article:nth-child(5){--n:4}@keyframes productToss{0%{opacity:0;transform:translateY(-80vh) rotate(-18deg) scale(.7)}80%{opacity:1;transform:translateY(7px) rotate(2deg)}100%{opacity:1;transform:none}}
.paint-can{width:125px;height:155px;border-radius:8px 8px 16px 16px;background:linear-gradient(90deg,#d3d5d3,#fff 45%,#aeb3b2);border:5px solid #5a6262}.paint-can:before{content:"";position:absolute;left:12px;right:12px;top:-16px;height:20px;border:6px solid #646d70;border-bottom:0;border-radius:50%}.paint-can i{position:absolute;inset:34px 0 26px;background:#e34444}.timber-pack{width:180px;height:126px}.timber-pack i{display:block;height:36px;margin:3px;background:linear-gradient(#dfb071,#8b5428);border:2px solid #553218}.tool-case{width:155px;height:115px;border-radius:12px;background:#c4262d;border:7px solid #601014}.tool-case:before{content:"";position:absolute;left:48px;right:48px;top:-29px;height:27px;border:8px solid #3c4143;border-bottom:0;border-radius:9px}.tile-stack{width:135px;height:125px}.tile-stack i{display:block;height:38px;margin:-4px 0;background:linear-gradient(135deg,#e8e4d8,#8aa9af);border:3px solid #444;transform:skewX(-12deg)}.insulation{width:115px;height:150px;border-radius:50% 50% 10px 10px;background:repeating-linear-gradient(0deg,#f3cd42 0 8px,#b98916 9px 11px);border:5px solid #675018}.insulation i{position:absolute;inset:10px;border:2px dashed #fff;border-radius:50%}
.product-copy { position:absolute;z-index:15;left:50%;top:24%;translate:-50% -50%;width:min(900px,78vw);padding:24px;text-align:center;background:rgba(12,16,17,.88);border:3px solid #f3f5ef;box-shadow:9px 11px 0 #0b0e0f;opacity:0 }.product-copy small{color:#67e8f9;font-weight:950;letter-spacing:.2em}.product-copy h2{margin:8px 0 0;color:#fff;font-size:clamp(34px,5.6vw,78px);letter-spacing:-.04em;line-height:1.05!important}.scene-products.active .product-copy{animation:productCopyIn .55s 1.42s cubic-bezier(.16,.8,.25,1.2) forwards}@keyframes productCopyIn{from{opacity:0;transform:scale(1.45) rotate(-5deg)}to{opacity:1;transform:none}}
.paint-splash { position:absolute;z-index:16;left:12%;top:18%;width:170px;height:120px;opacity:0;background:#e54646;clip-path:polygon(49% 13%,61% 35%,89% 19%,76% 46%,100% 57%,72% 63%,88% 93%,56% 73%,42% 100%,34% 70%,3% 87%,25% 57%,0 40%,31% 39%)}.scene-products.active .paint-splash{animation:paintSplat .48s 1.67s ease-out forwards}@keyframes paintSplat{from{opacity:0;transform:scale(.05) rotate(-50deg)}to{opacity:.85;transform:none}}
.essve-falling-sign { position:absolute;z-index:35;left:16vw;top:-35vh;width:min(480px,62vw);padding:25px;background:#0a0d0f;border:3px solid #e5e8e7;box-shadow:10px 14px 0 #111;color:#fff;transform:rotate(14deg);opacity:0}.essve-falling-sign b,.essve-falling-sign span{display:block}.essve-falling-sign b{display:inline-block;background:#ed1c24;padding:7px 12px;font-size:25px}.essve-falling-sign span{margin-top:12px;font-weight:950;font-size:18px}.scene-products.active .essve-falling-sign{animation:continuedSignFall 2.35s ease-in forwards}@keyframes continuedSignFall{0%{opacity:1;transform:translateY(0) rotate(14deg)}35%{transform:translate(18vw,32vh) rotate(36deg)}100%{opacity:1;transform:translate(50vw,155vh) rotate(115deg)}}
.transition-screw-rain { position:absolute;z-index:34;inset:0;pointer-events:none}.transition-screw-rain i{position:absolute;left:calc(var(--x)*1%);top:-100px;width:8px;height:72px;opacity:0;background:linear-gradient(90deg,#282d30,#f0f1ef 40%,#666e71 68%,#181c1e);border-radius:4px;transform:rotate(calc(var(--r)*1deg))}.transition-screw-rain i:before{content:"";position:absolute;left:-5px;top:-4px;width:18px;height:9px;border-radius:50%;background:radial-gradient(circle,#eee,#50585b 65%,#171a1b)}.transition-screw-rain i:after{content:"";position:absolute;inset:12px 0;background:repeating-linear-gradient(170deg,transparent 0 5px,#202426 6px 8px)}.scene-products.active .transition-screw-rain i{animation:transitionScrewFall 2.35s calc(var(--n)*.045s) linear 1 both}@keyframes transitionScrewFall{0%{opacity:0;top:-100px}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:115vh;transform:rotate(calc((var(--r) + 620)*1deg))}}
@media(max-width:850px){.product-stage{left:2vw;right:10vw;height:40vh;gap:1vw;transform:scale(.72);transform-origin:center bottom}.product-copy{top:24%;width:82vw;padding:16px}.product-copy h2{font-size:9vw}.paint-splash{left:2%;top:16%;width:110px}.downpipe{right:2vw}.essve-falling-sign{left:5vw;width:74vw}.deck-sign>i{top:10px}.scene-deck.active .deck-sign>i:first-child{animation-name:nailFromLeft}.scene-deck.active .deck-sign>i:nth-child(2){animation-name:nailFromRight}}

/* Login journey v4: photographic materials + Materialmännen black/gold identity */
.login-screen { --mm-gold:#e8c96e;--mm-gold-light:#ffe49a;--mm-black:#050505;--mm-ink:#11100c; }
.login-screen .scene-intro,.login-screen .scene-login { background:radial-gradient(circle at 50% 30%,rgba(232,201,110,.2),transparent 39%),radial-gradient(circle at 86% 82%,rgba(127,91,30,.18),transparent 30%),#050505; }
.login-screen .material-grid { background-image:linear-gradient(rgba(232,201,110,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(232,201,110,.15) 1px,transparent 1px); }
.scene-dots button.active { background:var(--mm-gold);border-color:var(--mm-gold);box-shadow:0 0 18px var(--mm-gold); }
.intro-lockup h1 span,.scroll-instruction,.scene-login .login-story h1 span { color:var(--mm-gold); }
.scroll-instruction i:after { background:var(--mm-gold); }
.login-screen .kicker,.login-badge { color:var(--mm-gold); }
.login-submit { background:linear-gradient(90deg,var(--mm-gold),var(--mm-gold-light));box-shadow:0 10px 30px rgba(232,201,110,.2); }
.login-submit:hover { box-shadow:0 15px 40px rgba(232,201,110,.38); }
.login-card { border-top-color:var(--mm-gold); }
.material-tags b { border-color:rgba(232,201,110,.45);color:var(--mm-gold-light); }

.deck-board { background-image:url('/static/real-timber-wall-v1.png?v=1')!important;background-repeat:no-repeat!important;background-size:100% 1100%!important;background-position:center var(--p)!important;border-top:0!important;border-bottom:2px solid #2d1b0d!important;box-shadow:0 8px 20px rgba(0,0,0,.52)!important; }
.deck-board b,.deck-board:before,.deck-board:after { display:none!important; }
.deck-sign { background:linear-gradient(155deg,#050505,#17140c);border-color:var(--mm-gold);outline-color:#090806;box-shadow:0 30px 70px #271508,10px 12px 0 rgba(0,0,0,.58); }
.deck-sign:before { border-color:rgba(232,201,110,.35); }
.deck-sign small,.deck-sign p { color:var(--mm-gold); }.deck-sign h2{color:#fff4cf}.deck-sign:after{border-color:var(--mm-gold);box-shadow:0 0 45px var(--mm-gold),inset 0 0 35px var(--mm-gold)}

.scene-products { background:#050505; }
.product-photo { position:absolute;inset:0;background:url('/static/materialmannen-products-v2.png?v=1') center/cover no-repeat;transform:scale(1.025);filter:contrast(1.03) saturate(.93); }

/* The product scene keeps its paint can, but no paint may splash, rain or drip. */
.scene-products .paint-splash,
.scene-products .paint-rain,
.scene-products .paint-stains,
.scene-products .paint-runoff { display:none !important; animation:none !important; }
.scene-products.active .product-photo { animation:realProductReveal 1.25s 1.15s both; }
@keyframes realProductReveal { from{opacity:0;transform:scale(1.13);filter:blur(12px) brightness(.35)} to{opacity:1;transform:scale(1.025);filter:contrast(1.03) saturate(.93)} }
.product-vignette { position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),transparent 35%,transparent 72%,rgba(0,0,0,.18)),linear-gradient(0deg,rgba(0,0,0,.22),transparent 45%); }
.product-copy { left:50%;top:46%;width:min(860px,72vw);padding:26px 34px;background:rgba(3,3,3,.9);border:4px solid var(--mm-gold);box-shadow:10px 13px 0 rgba(0,0,0,.8),0 24px 65px rgba(0,0,0,.4); }
.product-copy:before { content:"";position:absolute;inset:8px;border:1px solid rgba(232,201,110,.35);pointer-events:none; }
.product-copy small { color:var(--mm-gold); }.product-copy h2{color:#fff5d6}.product-copy p{position:relative;margin:8px 0 0;color:#d9cfaf;font-size:14px;font-weight:700}.scene-products.active .product-copy{animation:realCopyIn .7s 1.72s cubic-bezier(.16,.8,.25,1.12) both}@keyframes realCopyIn{from{opacity:0;transform:translateY(35px) scale(.92)}to{opacity:1;transform:none}}

.essve-transition-overlay { position:fixed;z-index:2100;inset:0;visibility:hidden;pointer-events:none;overflow:hidden; }
.essve-dropping .essve-transition-overlay { visibility:visible; }
.essve-dropping .scene-fasteners .fastener-copy { visibility:hidden; }
.overlay-essve-sign { position:absolute;z-index:4;left:3.5vw;top:4vh;width:min(480px,43vw);padding:28px 30px 24px;background:linear-gradient(145deg,#171c20,#07090b);border:3px solid #dfe5e5;box-shadow:12px 15px 0 #171a1c,0 30px 70px #000;transform-origin:calc(100% - 24px) 18px; }
.overlay-essve-sign b{display:inline-block;padding:9px 15px;background:#ed1c24;color:white;font-size:24px;font-weight:950;transform:rotate(-3deg);box-shadow:6px 6px 0 #611}.overlay-essve-sign span{display:block;margin-top:16px;color:white;font-size:clamp(26px,3vw,46px);font-weight:950;line-height:1.05;letter-spacing:-.035em}.overlay-screw{position:absolute;z-index:5;top:12px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#697174 45%,#0b0d0e 72%);box-shadow:0 2px 5px #000}.overlay-screw.left{left:16px}.overlay-screw.right{right:16px}
.essve-dropping .overlay-essve-sign { animation:realEssveDrop 3.05s ease-in forwards; }.essve-dropping .overlay-screw.left{animation:realLeftScrew .26s .1s forwards}.essve-dropping .overlay-screw.right{animation:realRightScrew .24s 1.52s forwards}
@keyframes realEssveDrop { 0%,8%{transform:none} 19%{transform:rotate(14deg)} 31%{transform:rotate(-9deg)} 43%{transform:rotate(17deg)} 55%{transform:rotate(-6deg)} 63%{transform:rotate(20deg)} 68%{transform:rotate(20deg) translateY(0)} 100%{transform:translate(48vw,125vh) rotate(105deg)} }
@keyframes realLeftScrew { to{opacity:0;transform:translate(-30px,75px) rotate(540deg)} } @keyframes realRightScrew { to{opacity:0;transform:translate(28px,75px) rotate(540deg)} }
.overlay-screw-rain { position:absolute;z-index:3;inset:0; }.overlay-screw-rain>i{position:absolute;left:calc(var(--x)*1%);top:-110px;width:9px;height:82px;opacity:0;border-radius:4px;background:linear-gradient(90deg,#22282b,#f6f6f2 38%,#6d777a 68%,#15191b);box-shadow:0 0 9px rgba(255,255,255,.3);transform:rotate(calc(var(--r)*1deg))}.overlay-screw-rain>i:before{content:"";position:absolute;left:-6px;top:-4px;width:21px;height:10px;border-radius:50%;background:radial-gradient(circle,#f5f5f2,#687174 62%,#171a1b)}.overlay-screw-rain>i:after{content:"";position:absolute;inset:14px 0;background:repeating-linear-gradient(170deg,transparent 0 5px,#171b1d 6px 9px)}.essve-dropping .overlay-screw-rain>i{animation:realScrewRain 2.45s calc(var(--n)*.02s) linear 1 both}@keyframes realScrewRain{0%{opacity:0;top:-110px}10%{opacity:1}90%{opacity:1}100%{opacity:0;top:116vh;transform:rotate(calc((var(--r) + 760)*1deg))}}
.scene-fasteners.leaving-up + .scene-products.active { animation:realProductSceneReveal .8s 1.48s both; }@keyframes realProductSceneReveal{from{opacity:0;transform:translateY(13%) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:850px){.overlay-essve-sign{left:4vw;top:3vh;width:74vw;padding:20px}.overlay-essve-sign span{font-size:7vw}.product-copy{top:44%;width:82vw;padding:20px}.product-copy h2{font-size:9vw}.product-copy p{font-size:11px}.product-photo{background-position:center}}

/* Login journey v5: alternating timber, direct nails and accumulating paint */
.deck-board { transform:none;opacity:0; }
.scene-deck.active .deck-board:nth-child(odd) { animation:plankSlideLeft .82s calc(var(--n)*.105s + .05s) cubic-bezier(.12,.76,.2,1) both; }
.scene-deck.active .deck-board:nth-child(even) { animation:plankSlideRight .82s calc(var(--n)*.105s + .05s) cubic-bezier(.12,.76,.2,1) both; }
.scene-deck.active .deck-board.from-left { animation:plankSlideLeft .82s calc(var(--n)*.105s + .05s) cubic-bezier(.12,.76,.2,1) both!important; }
.scene-deck.active .deck-board.from-right { animation:plankSlideRight .82s calc(var(--n)*.105s + .05s) cubic-bezier(.12,.76,.2,1) both!important; }
@keyframes plankSlideLeft { 0%{opacity:1;transform:translate3d(-110vw,0,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }
@keyframes plankSlideRight { 0%{opacity:1;transform:translate3d(110vw,0,0)} 100%{opacity:1;transform:translate3d(0,0,0)} }
.scene-deck.active .deck-impacts i { animation:slideImpact .32s calc(var(--n)*.09s + .52s) ease-out both; }
@keyframes slideImpact { 0%{opacity:0;transform:scaleX(.1)} 30%{opacity:.8;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(1.5) scaleY(4);filter:blur(10px)} }
.plank-nail { position:absolute;z-index:4;top:50%;translate:0 -50%;width:13px;height:13px;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,#fff,#72797a 44%,#121414 72%);box-shadow:0 2px 5px #000; }
.plank-nail.left{left:7vw}.plank-nail.right{right:7vw}
.scene-deck.active .plank-nail.left { animation:plankNailFromRight .25s calc(1.12s + var(--n)*.095s) linear forwards; }
.scene-deck.active .plank-nail.right { animation:plankNailFromLeft .25s calc(1.17s + var(--n)*.095s) linear forwards; }
@keyframes plankNailFromRight { from{opacity:1;transform:translateX(110vw) rotate(360deg) scale(1.4)} to{opacity:1;transform:none} }
@keyframes plankNailFromLeft { from{opacity:1;transform:translateX(-110vw) rotate(-360deg) scale(1.4)} to{opacity:1;transform:none} }
.scene-deck.active .deck-sign>i:first-child { animation:signNailDirectLeft .28s 2.34s linear forwards; }
.scene-deck.active .deck-sign>i:nth-child(2) { animation:signNailDirectRight .28s 2.42s linear forwards; }
@keyframes signNailDirectLeft { from{opacity:1;transform:translateX(-75vw) rotate(-360deg)} to{opacity:1;transform:none} }
@keyframes signNailDirectRight { from{opacity:1;transform:translateX(75vw) rotate(360deg)} to{opacity:1;transform:none} }

.fastener-copy.express-sign { border-color:var(--mm-gold);background:linear-gradient(145deg,#050505,#17140c); }
.fastener-copy.express-sign small{color:var(--mm-gold);font-size:11px;font-weight:950;letter-spacing:.2em}.fastener-copy.express-sign h2{margin:9px 0 2px;color:#fff3ca;font-size:clamp(31px,3.7vw,56px)}.fastener-copy.express-sign p{color:var(--mm-gold-light);font-size:clamp(14px,1.35vw,20px);font-weight:800}.scene-fasteners.leaving-up{z-index:auto!important;animation:none!important}.scene-fasteners.leaving-up .fastener-copy{animation:none!important}.essve-transition-overlay{display:none!important}
.scene-fasteners.leaving-up .fastener-copy .sign-screw { animation:none!important;opacity:1!important;transform:none!important;visibility:visible!important; }

.paint-rain { position:absolute;z-index:18;left:14%;right:14%;top:0;height:49%;pointer-events:none;overflow:visible }.paint-rain i{position:absolute;left:calc(var(--x)*1%);top:-55px;width:calc(var(--s)*1px);height:calc(var(--s)*1.8px);border-radius:55% 55% 65% 65%;opacity:0;background:linear-gradient(90deg,#a91f14,#ef4b25 55%,#8d160f);filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}.scene-products.active .paint-rain i{animation:paintDropToSign 2.15s calc(.55s + var(--n)*.19s) ease-in infinite}@keyframes paintDropToSign{0%{opacity:0;transform:translateY(-30px) scale(.65)}10%{opacity:1}82%{opacity:1;transform:translateY(44vh) scaleY(1.35)}100%{opacity:0;transform:translateY(46vh) scale(1.7,.25)}}
.product-copy>small,.product-copy>h2,.product-copy>p{position:relative;z-index:3}.paint-stains{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}.paint-stains i{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--s)*1px);height:calc(var(--s)*.7px);border-radius:42% 58% 63% 37%/55% 42% 58% 45%;opacity:0;background:#d9361e;box-shadow:calc(var(--s)*.25px) calc(var(--s)*.12px) 0 calc(var(--s)*-.22px) #f05a2c}.scene-products.active .paint-stains i{animation:stainAccumulate .38s calc(1.5s + var(--n)*.34s) ease-out forwards}@keyframes stainAccumulate{from{opacity:0;transform:scale(.05) rotate(-40deg)}70%{opacity:.9;transform:scale(1.22) rotate(5deg)}to{opacity:.82;transform:none}}
.paint-runoff{position:absolute;z-index:4;left:0;right:0;top:100%;height:70vh;pointer-events:none}.paint-runoff i{position:absolute;left:calc(var(--x)*1%);top:-4px;width:calc(var(--s)*1px);height:calc(var(--s)*1.7px);border-radius:0 0 60% 60%;opacity:0;background:linear-gradient(#df3c20,#9f1b12)}.scene-products.active .paint-runoff i{animation:paintRunOff 2.4s calc(6.2s + var(--n)*.27s) ease-in infinite}@keyframes paintRunOff{0%{opacity:0;transform:translateY(0) scaleY(.4)}12%{opacity:.9}75%{opacity:.9;transform:translateY(57vh) scaleY(1.6)}100%{opacity:0;transform:translateY(72vh) scale(.7,1.8)}}
@media(max-width:850px){.paint-rain{left:9%;right:9%;height:47%}.scene-products.active .paint-rain i{animation-name:paintDropToSign}.plank-nail.left{left:4vw}.plank-nail.right{right:4vw}}

/* Purpose-built phone layout */
@media (max-width:850px) {
  .login-screen { touch-action:none;overscroll-behavior:none; }
  .scroll-scene { padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right); }
  .scene-dots { right:max(9px,env(safe-area-inset-right));gap:9px; }
  .scene-dots button { width:8px;height:8px; }
  .intro-lockup { width:91vw;margin-top:max(2vh,env(safe-area-inset-top)); }
  .intro-lockup img { width:92vw;max-height:18vh;margin-bottom:7vh; }
  .intro-lockup h1 { font-size:clamp(37px,11vw,66px);line-height:1.02!important; }
  .intro-lockup h1 span { font-size:.58em;line-height:1.15; }
  .scroll-instruction { bottom:max(3vh,env(safe-area-inset-bottom)); }
  .deck-board { background-size:auto 1100%!important; }
  .deck-sign { width:86vw;padding:20px 12px;border-width:4px; }
  .deck-sign h2 { font-size:10vw;line-height:1.08!important; }
  .deck-sign p { font-size:4.2vw;letter-spacing:.08em; }
  .deck-sign small { font-size:9px;letter-spacing:.15em; }
  .fastener-photo { background-position:68% center; }
  .fastener-copy.express-sign { left:5vw;top:max(3vh,env(safe-area-inset-top));width:82vw;padding:20px 18px; }
  .fastener-copy.express-sign h2 { font-size:9vw;line-height:1.05!important; }
  .fastener-copy.express-sign p { font-size:4.1vw;line-height:1.35; }
  .fastener-copy.express-sign small { font-size:9px; }
  .machine-nail { width:90px; }
  .product-photo { background-image:url('/static/materialmannen-products-mobile-v2.png?v=1');background-position:center;background-size:cover; }
  .product-vignette { background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.05) 27%,rgba(0,0,0,.35)); }
  .product-copy { top:43%;width:84vw;padding:19px 14px;border-width:3px; }
  .product-copy h2 { font-size:8.4vw;line-height:1.08!important; }
  .product-copy small { font-size:8px;letter-spacing:.12em; }
  .product-copy p { font-size:10px; }
  .paint-rain { left:8%;right:8%;height:46%; }
  .scene-products.active .paint-rain i { animation-name:paintDropToSignMobile; }
  @keyframes paintDropToSignMobile { 0%{opacity:0;transform:translateY(-30px) scale(.65)} 10%{opacity:1} 82%{opacity:1;transform:translateY(39vh) scaleY(1.35)} 100%{opacity:0;transform:translateY(41vh) scale(1.7,.25)} }
  .scene-login .login-stage { width:min(94vw,520px);height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding:max(8px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom));overflow:auto; }
  .scene-login .login-story { flex:0 0 auto;width:100%; }
  .scene-login .login-story img { width:min(82vw,430px);height:auto;max-height:72px;object-fit:contain;margin:0 auto -5px; }
  .scene-login .login-card { width:100%;padding:20px 22px; }
  .scene-login .login-card h2 { margin:8px 0 2px;font-size:27px; }
  .scene-login .login-card>p { margin-bottom:13px; }
  .scene-login .login-card label { margin:10px 0; }
  .scene-login .login-card .field { padding:12px; }
  .scene-login .login-submit { margin-top:7px;padding:13px 15px; }
  .scene-login .login-card>small { margin-top:10px; }
}
@media (max-height:600px) {
  .intro-lockup img { max-height:18vh;margin-bottom:2vh; }
  .intro-lockup h1 { font-size:clamp(32px,8vh,58px); }
  .scroll-instruction { display:none; }
  .scene-login .login-stage { display:grid;grid-template-columns:minmax(180px,.75fr) minmax(310px,1fr);gap:16px;width:min(94vw,850px);padding:8px 0; }
  .scene-login .login-story img { max-height:60px;width:100%; }
  .scene-login .login-card { padding:14px 18px; }
  .scene-login .login-card h2 { font-size:23px; }
  .scene-login .login-card>p,.scene-login .login-card>small { display:none; }
  .scene-login .login-card label { margin:7px 0; }
  .scene-login .login-card .field { padding:9px 11px; }
}

/* Login journey v6: precise centered sign + instant interactive product card */
.deck-sign>div { width:100%!important;justify-items:center!important;align-items:center!important;text-align:center!important; }
.deck-sign h2,.deck-sign p,.deck-sign small { display:block;width:100%;margin-left:auto!important;margin-right:auto!important;text-align:center!important;translate:0!important;transform:none!important; }
.scene-fasteners.leaving-up + .scene-products.active { animation:none!important;opacity:1!important;transform:none!important; }
.scene-products.active .product-photo { animation:none!important;opacity:1!important;transform:scale(1.025)!important;filter:contrast(1.03) saturate(.93)!important; }
.product-copy { cursor:pointer;transform-style:preserve-3d;will-change:transform;user-select:none; }
.scene-products.active .product-copy { opacity:1; }
.product-copy { height:clamp(285px,31vh,345px);padding:42px 38px;display:grid;place-content:center;align-items:center;transition:background .12s,border-color .12s,color .12s; }
.product-copy.flip-left { animation:productSignFlipLeft .72s cubic-bezier(.45,.02,.2,1)!important; }
.product-copy.alternate-face { background:linear-gradient(145deg,rgba(232,201,110,.97),rgba(166,127,46,.97));border-color:#080704;box-shadow:10px 13px 0 var(--mm-gold),0 24px 65px rgba(0,0,0,.5); }
.product-copy.alternate-face:before { border-color:rgba(0,0,0,.42); }
.product-copy.alternate-face small,.product-copy.alternate-face h2,.product-copy.alternate-face p { color:#090806; }
@keyframes productSignFlipLeft { 0%{transform:translateY(-5px) rotateY(0)} 49%{transform:translateY(-5px) rotateY(-90deg) scale(.96)} 51%{transform:translateY(-5px) rotateY(90deg) scale(.96)} 100%{transform:translateY(-5px) rotateY(0)} }
.product-copy:after { content:"KLICKA FÖR NÄSTA";position:absolute;z-index:5;right:12px;bottom:8px;color:rgba(232,201,110,.68);font-size:8px;font-weight:900;letter-spacing:.14em; }
@media(max-width:850px){.product-copy{height:260px;min-height:260px;max-height:260px;padding:34px 18px}.product-copy:after{right:8px;bottom:5px;font-size:7px}.scene-products.active .product-photo{transform:scale(1.01)!important}}

/* Product-sign nail easter egg */
.product-copy { cursor:default; }
.product-copy:after { content:none!important; }
.product-sign-nail { position:absolute;z-index:12;top:13px;width:24px;height:24px;padding:0;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 34% 28%,#fffdf1 0,#c9b879 18%,#6a5d37 48%,#15130e 72%,#000 100%);box-shadow:0 3px 7px #000,0 0 0 2px rgba(232,201,110,.34);transition:filter .18s,scale .18s; }
.product-sign-nail:before { content:"";position:absolute;left:5px;right:5px;top:10px;height:3px;border-radius:3px;background:#17140d;box-shadow:0 1px 0 rgba(255,255,255,.25);transform:rotate(-18deg); }
.product-sign-nail:hover { filter:brightness(1.35);scale:1.12; }
.product-sign-nail.left { left:15px; }.product-sign-nail.right { right:15px; }
.product-sign-nail.pulled { pointer-events:none;animation:nailPulledByGravity .48s ease-in forwards!important; }
@keyframes nailPulledByGravity { 0%{opacity:1;transform:none} 35%{transform:translateY(12px) rotate(90deg)} 100%{opacity:0;transform:translateY(95px) rotate(480deg)} }
.scene-products.active .product-copy.hanging-left:not(.fallen) { transform-origin:22px 24px;animation:hangFromLeftNail 2.15s ease-in-out infinite!important; }
.scene-products.active .product-copy.hanging-right:not(.fallen) { transform-origin:calc(100% - 22px) 24px;animation:hangFromRightNail 2.15s ease-in-out infinite!important; }
@keyframes hangFromLeftNail { 0%{transform:rotate(0)} 22%{transform:rotate(15deg)} 48%{transform:rotate(8deg)} 70%{transform:rotate(12deg)} 100%{transform:rotate(10deg)} }
@keyframes hangFromRightNail { 0%{transform:rotate(0)} 22%{transform:rotate(-15deg)} 48%{transform:rotate(-8deg)} 70%{transform:rotate(-12deg)} 100%{transform:rotate(-10deg)} }
.scene-products.active .product-copy.hanging-left.fallen { transform-origin:22px 24px;pointer-events:none;animation:signFallFromLeft .98s cubic-bezier(.55,.03,.85,.38) forwards!important; }
.scene-products.active .product-copy.hanging-right.fallen { transform-origin:calc(100% - 22px) 24px;pointer-events:none;animation:signFallFromRight .98s cubic-bezier(.55,.03,.85,.38) forwards!important; }
@keyframes signFallFromLeft { 0%{opacity:1;transform:rotate(10deg)} 100%{opacity:0;transform:translate(24vw,115vh) rotate(74deg)} }
@keyframes signFallFromRight { 0%{opacity:1;transform:rotate(-10deg)} 100%{opacity:0;transform:translate(-24vw,115vh) rotate(-74deg)} }
.product-copy.gone { display:none!important; }
@media(max-width:850px){.product-sign-nail{width:21px;height:21px;top:10px}.product-sign-nail.left{left:11px}.product-sign-nail.right{right:11px}.scene-products.active .product-copy.hanging-left:not(.fallen),.scene-products.active .product-copy.hanging-left.fallen{transform-origin:20px 20px}.scene-products.active .product-copy.hanging-right:not(.fallen),.scene-products.active .product-copy.hanging-right.fallen{transform-origin:calc(100% - 20px) 20px}}

/* Login journey v7: shared star-screw physics */
.gravity-screw { position:absolute;z-index:30;top:14px;width:24px;height:24px;padding:0;border:0;border-radius:50%;cursor:pointer;opacity:0;background:radial-gradient(circle at 34% 28%,#fffdf1 0,#d7d8d2 18%,#747b7c 48%,#171a1a 74%,#000 100%);box-shadow:0 3px 7px #000,0 0 0 2px rgba(232,201,110,.32); }
.gravity-screw.left{left:16px}.gravity-screw.right{right:16px}
.gravity-screw:before,.gravity-screw:after { content:"";position:absolute;left:5px;right:5px;top:10px;height:3px;border-radius:3px;background:#111513;box-shadow:0 1px 0 rgba(255,255,255,.3); }
.gravity-screw:before{transform:rotate(45deg)}.gravity-screw:after{transform:rotate(-45deg)}
.gravity-screw:hover{filter:brightness(1.35);scale:1.12}.gravity-screw.pulled{pointer-events:none;animation:starScrewPulled .55s ease-in forwards!important}
@keyframes starScrewPulled{0%{opacity:1;transform:rotate(0)}35%{transform:translateY(14px) rotate(180deg)}100%{opacity:0;transform:translateY(105px) rotate(720deg)}}

.scene-deck.active .deck-sign>.gravity-screw.left{animation:driveSignScrewLeft .34s 2.34s linear forwards}.scene-deck.active .deck-sign>.gravity-screw.right{animation:driveSignScrewRight .34s 2.43s linear forwards}
.scene-fasteners.active .express-sign>.gravity-screw.left{animation:driveSignScrewLeft .36s 1.12s linear forwards}.scene-fasteners.active .express-sign>.gravity-screw.right{animation:driveSignScrewRight .36s 1.25s linear forwards}
.scene-products.active .product-copy>.gravity-screw.left{animation:driveSignScrewLeft .36s .88s linear forwards}.scene-products.active .product-copy>.gravity-screw.right{animation:driveSignScrewRight .36s 1.02s linear forwards}
@keyframes driveSignScrewLeft{0%{opacity:1;transform:translateX(-90vw) rotate(-1080deg) scale(1.5)}85%{opacity:1;transform:translateX(0) rotate(-90deg) scale(1.2)}100%{opacity:1;transform:none}}
@keyframes driveSignScrewRight{0%{opacity:1;transform:translateX(90vw) rotate(1080deg) scale(1.5)}85%{opacity:1;transform:translateX(0) rotate(90deg) scale(1.2)}100%{opacity:1;transform:none}}

.plank-nail { width:16px;height:16px;background:radial-gradient(circle at 35% 28%,#fff,#777d7c 45%,#111 75%); }
.plank-nail:before,.plank-nail:after{content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;background:#161918;border-radius:2px}.plank-nail:before{transform:rotate(45deg)}.plank-nail:after{transform:rotate(-45deg)}
.machine-nail{width:118px!important;height:12px!important;clip-path:none!important;border-radius:5px 50% 50% 5px!important;background:repeating-linear-gradient(165deg,#dfe3e1 0 6px,#444b4d 7px 10px)!important;filter:drop-shadow(0 0 8px rgba(255,255,255,.48))!important}.machine-nail:before{left:-8px!important;top:-5px!important;width:22px!important;height:22px!important;border-radius:50%!important;background:linear-gradient(45deg,transparent 42%,#151818 43% 56%,transparent 57%),linear-gradient(-45deg,transparent 42%,#151818 43% 56%,transparent 57%),radial-gradient(circle at 35% 30%,#fff,#686f70 65%,#171a1b)!important;animation:starHeadSpin .22s linear infinite}.machine-nail:after{content:"";position:absolute;right:-10px;top:2px;border-left:13px solid #dfe3e1;border-top:4px solid transparent;border-bottom:4px solid transparent}@keyframes starHeadSpin{to{transform:rotate(360deg)}}

.scene-fasteners.active .express-sign { animation:expressSignShootIn .72s .28s cubic-bezier(.12,.77,.21,1.1) both!important; }
@keyframes expressSignShootIn{from{opacity:0;transform:translateZ(-900px) scale(.16) rotate(-7deg);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
.scene-products.active:not(.settled) .product-copy { animation:productSignShootIn .72s .18s cubic-bezier(.12,.77,.21,1.08) both!important; }
.scene-products.settled .product-copy:not(.hanging-left):not(.hanging-right):not(.fallen) { animation:none!important;transform:none; }
@keyframes productSignShootIn{from{opacity:0;transform:translateZ(-900px) scale(.18) rotate(6deg);filter:blur(13px)}to{opacity:1;transform:none;filter:none}}

.scene-deck.active .gravity-sign.hanging-left:not(.fallen):not(.swinging),.scene-fasteners.active .gravity-sign.hanging-left:not(.fallen):not(.swinging),.scene-products.active .gravity-sign.hanging-left:not(.fallen):not(.swinging){transform-origin:22px 24px;animation:gravityCatchLeft 1.05s cubic-bezier(.3,.02,.2,1) forwards!important}
.scene-deck.active .gravity-sign.hanging-right:not(.fallen):not(.swinging),.scene-fasteners.active .gravity-sign.hanging-right:not(.fallen):not(.swinging),.scene-products.active .gravity-sign.hanging-right:not(.fallen):not(.swinging){transform-origin:calc(100% - 22px) 24px;animation:gravityCatchRight 1.05s cubic-bezier(.3,.02,.2,1) forwards!important}
@keyframes gravityCatchLeft{0%{transform:rotate(0)}24%{transform:rotate(17deg)}49%{transform:rotate(6deg)}70%{transform:rotate(12.5deg)}86%{transform:rotate(9deg)}100%{transform:rotate(10deg)}}
@keyframes gravityCatchRight{0%{transform:rotate(0)}24%{transform:rotate(-17deg)}49%{transform:rotate(-6deg)}70%{transform:rotate(-12.5deg)}86%{transform:rotate(-9deg)}100%{transform:rotate(-10deg)}}
.scene-deck.active .gravity-sign.hanging-left.swinging:not(.fallen),.scene-fasteners.active .gravity-sign.hanging-left.swinging:not(.fallen),.scene-products.active .gravity-sign.hanging-left.swinging:not(.fallen){transform-origin:22px 24px;animation:seamlessSwingLeft 3.4s ease-in-out infinite!important}.scene-deck.active .gravity-sign.hanging-right.swinging:not(.fallen),.scene-fasteners.active .gravity-sign.hanging-right.swinging:not(.fallen),.scene-products.active .gravity-sign.hanging-right.swinging:not(.fallen){transform-origin:calc(100% - 22px) 24px;animation:seamlessSwingRight 3.4s ease-in-out infinite!important}
@keyframes seamlessSwingLeft{0%,100%{transform:rotate(10deg)}25%{transform:rotate(11.3deg)}50%{transform:rotate(10deg)}75%{transform:rotate(8.7deg)}}@keyframes seamlessSwingRight{0%,100%{transform:rotate(-10deg)}25%{transform:rotate(-11.3deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(-8.7deg)}}
.scene-deck.active .gravity-sign.hanging-left.fallen,.scene-fasteners.active .gravity-sign.hanging-left.fallen,.scene-products.active .gravity-sign.hanging-left.fallen{pointer-events:none;animation:gravitySignFallLeft 1.2s cubic-bezier(.55,.03,.85,.38) forwards!important}.scene-deck.active .gravity-sign.hanging-right.fallen,.scene-fasteners.active .gravity-sign.hanging-right.fallen,.scene-products.active .gravity-sign.hanging-right.fallen{pointer-events:none;animation:gravitySignFallRight 1.2s cubic-bezier(.55,.03,.85,.38) forwards!important}
@keyframes gravitySignFallLeft{from{opacity:1;transform:rotate(10deg)}to{opacity:0;transform:translate(24vw,125vh) rotate(86deg)}}@keyframes gravitySignFallRight{from{opacity:1;transform:rotate(-10deg)}to{opacity:0;transform:translate(-24vw,125vh) rotate(-86deg)}}
.gravity-sign.gone{display:none!important}
.scene-fasteners.leaving-up .gravity-screw.pulled{opacity:0!important;visibility:hidden!important}
@media(max-width:850px){.gravity-screw{width:21px;height:21px;top:10px}.gravity-screw.left{left:11px}.gravity-screw.right{right:11px}.gravity-screw:before,.gravity-screw:after{left:4px;right:4px;top:9px}.machine-nail{width:82px!important}}

/* Login journey v8: JavaScript-driven 90-degree gravity and plank support */
.scene-products.settled .product-copy:not(.fallen) { animation:none!important; }
.plank-nail { pointer-events:none; }

/* Keep a full halo around every removable sign while it rotates. */
.deck-sign,
.fastener-copy.express-sign,
.product-copy {
  box-shadow:
    0 0 22px 7px rgba(0,0,0,.72),
    0 -13px 24px rgba(0,0,0,.48),
    10px 14px 0 rgba(0,0,0,.76),
    0 30px 70px rgba(0,0,0,.68) !important;
}

/* Product sign: one entrance, then completely still with all copy inside its frame. */
.scene-products.active .product-copy {
  animation:none !important;
  box-sizing:border-box;
  overflow:hidden;
  height:clamp(300px,34vh,370px);
  padding:44px 42px 38px;
  grid-template-rows:auto auto auto;
  align-content:center;
  row-gap:8px;
}
.scene-products.active:not(.settled) .product-copy {
  animation:productSignShootIn .72s .18s cubic-bezier(.12,.77,.21,1.08) both !important;
}
.product-copy small,
.product-copy h2,
.product-copy p {
  max-width:100%;
  overflow-wrap:anywhere;
}
.product-copy h2 {
  margin:0 !important;
  font-size:clamp(28px,4.7vw,66px);
  line-height:1.02 !important;
}
.product-copy p { margin:0 !important; }

/* Keep the complete deck-sign copy on the exact visual centre of its frame. */
.deck-sign {
  box-sizing:border-box;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.deck-sign > div {
  position:relative;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.deck-sign small,
.deck-sign h2,
.deck-sign p {
  width:100%;
  text-align:center !important;
}
.deck-sign h2 {
  max-width:100%;
  margin-left:auto !important;
  margin-right:auto !important;
  font-size:clamp(30px,6.2vw,78px) !important;
  letter-spacing:-.065em !important;
  line-height:1.08 !important;
  white-space:nowrap;
}
@media(max-width:850px) {
  .scene-products.active .product-copy {
    width:88vw;
    height:clamp(280px,39vh,330px);
    min-height:280px;
    max-height:330px;
    padding:36px 20px 30px;
    row-gap:7px;
  }
  .product-copy h2 {
    font-size:clamp(23px,7vw,38px);
    line-height:1.04 !important;
  }
  .product-copy small { font-size:8px;line-height:1.35; }
  .product-copy p { font-size:10px;line-height:1.35; }
  .deck-sign h2 { font-size:clamp(25px,7.8vw,54px) !important; }
}
.gravity-sign.fallen,.deck-board.fallen { pointer-events:none; }
.gravity-sign.gone,.deck-board.gone { display:none!important; }

@media (max-width: 1100px) {
  .compose-layout, .chat-layout, .accounts-layout { grid-template-columns: 1fr; }
  .ai-side { position: static; }
  .ai-panel { max-height: none; }
}
@media (max-width: 760px) {
  .ai-hero, .memory-layout { grid-template-columns: 1fr; }
  .compose-fields { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr; }
  .chat-input, .search-bar { grid-template-columns: 1fr; }
  .modal-card { padding: 22px 16px; }
}