@font-face { font-family: "Roboto Mono"; src: url("/fonts/RobotoMono-Variable.woff2") format("woff2"); font-style: normal; font-weight: 100 700; font-display: swap; }

:root {
  font-family: "Roboto Mono", monospace;
  color: #17304a;
  background: #eeeae1;
  font-synthesis: none;
  --ink: #17304a;
  --muted: #718092;
  --line: #ddd8ce;
  --paper: #fbfaf6;
  --cream: #f2eee5;
  --blue: #1769aa;
  --blue-dark: #0f527f;
  --green: #3f7e55;
  --red: #bb493d;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #eeeae1; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app { min-height: 100vh; }
.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: rgba(251, 250, 246, .96);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px 12px 4px 12px; display: grid; place-items: center; color: white; font: 700 22px "Roboto Mono", monospace; background: var(--blue); box-shadow: inset -8px -8px 0 rgba(0,0,0,.08); }
.brand-logo { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #fff; }
.brand strong { display: block; font: 700 22px "Roboto Mono", monospace; letter-spacing: -.4px; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.top-actions { display: flex; gap: 16px; align-items: center; }
.account-link { color: inherit; text-decoration: none; }
.autosave { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 7px; }
.autosave i { width: 7px; height: 7px; background: #5d9a68; border-radius: 50%; box-shadow: 0 0 0 4px rgba(93,154,104,.12); }

.workspace { display: grid; grid-template-columns: 300px minmax(560px, 1fr) 310px; min-height: calc(100vh - 72px); max-width: 1900px; margin: 0 auto; }
.sidebar { background: var(--paper); }
.controls-panel { border-right: 1px solid var(--line); }
.result-panel { border-left: 1px solid var(--line); padding: 20px; }
.controls-panel, .result-panel { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 72px); overflow-y: auto; scrollbar-width: thin; }
.control-section { padding: 20px 17px; border-bottom: 1px solid var(--line); }
.control-section.attention { position: relative; background: #fff7df; box-shadow: inset 4px 0 #d5912c; animation: control-attention 1.1s ease-out 2; }
@keyframes control-attention { 0%, 100% { background: #fff7df; } 50% { background: #ffedb9; } }
.section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-heading > span { color: #9a6b43; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.section-heading b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .055em; }
.section-heading small { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }

.segmented { display: grid; gap: 4px; padding: 4px; border-radius: 10px; background: #ebe6dc; margin-bottom: 15px; }
.segmented.four { grid-template-columns: repeat(4, 1fr); }
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented button, .view-tabs button, .floor-selector button { border: 0; border-radius: 7px; background: transparent; font-size: 11px; padding: 8px 5px; cursor: pointer; font-weight: 600; }
.segmented button.active { background: #fff; color: var(--blue); box-shadow: 0 1px 5px rgba(27,46,64,.1); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field { display: block; margin-bottom: 11px; min-width: 0; }
.field > span:first-child { display: block; font-size: 10.5px; color: #5f7080; font-weight: 600; margin-bottom: 5px; }
input, select, textarea { width: 100%; border: 1px solid #cfd5d9; border-radius: 7px; padding: 9px 10px; color: var(--ink); background: #fff; outline: 0; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,170,.1); }
textarea { resize: vertical; line-height: 1.45; }
.input-with-suffix { display: flex !important; position: relative; }
.input-with-suffix input { padding-right: 36px; }
.input-with-suffix em { position: absolute; right: 9px; top: 10px; font-size: 10px; color: #8994a0; font-style: normal; pointer-events: none; }
.hint { color: #7b8792; font-size: 10px; line-height: 1.55; margin: 9px 0 0; }
.hint.warning { color: #8a6037; }
.optional-cadastre { margin-top: 15px; border: 1px solid #d8d2c6; border-radius: 11px; background: #faf8f3; overflow: hidden; }
.optional-cadastre.open { border-color: #a9bdc9; background: #f6fafc; }
.optional-cadastre-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent; padding: 13px 14px; color: var(--blue); text-align: left; cursor: pointer; }
.optional-cadastre-toggle span { display: grid; gap: 3px; }
.optional-cadastre-toggle b { font-size: 12px; }
.optional-cadastre-toggle small { color: #78838a; font-size: 10px; font-weight: 500; }
.optional-cadastre-toggle em { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #e4edf1; font-size: 18px; font-style: normal; line-height: 1; }
.optional-cadastre-body { padding: 3px 14px 14px; border-top: 1px solid #e1e7e9; }
.optional-cadastre-body .field { margin-top: 11px; }
.skip-cadastre { display: block; margin: 10px auto 0; border: 0; background: transparent; color: #66757e; font: inherit; font-size: 10px; text-decoration: underline; cursor: pointer; }
.cadastre-error { margin: 9px 0 0; padding: 8px 9px; border-radius: 7px; background: #fff0ed; color: #a43f36; font-size: 10px; line-height: 1.4; }
.cadastre-result { margin-top: 11px; padding: 11px; border: 1px solid #b9d2c2; border-radius: 9px; background: #f4fbf6; }
.cadastre-result-title { display: grid; gap: 2px; margin-bottom: 9px; }
.cadastre-result-title span { color: #3f805c; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cadastre-result-title b { font-size: 13px; color: var(--blue); }
.cadastre-result dl { display: grid; grid-template-columns: 65px 1fr; gap: 6px 8px; margin: 0 0 11px; font-size: 9.5px; line-height: 1.35; }
.cadastre-result dt { color: #73818a; }
.cadastre-result dd { margin: 0; color: #304758; overflow-wrap: anywhere; }
.cadastre-source { display: block; margin-top: 9px; color: var(--blue); font-size: 9.5px; text-align: center; }
.cadastre-access { display: block; margin-top: 5px; color: #71827a; font-size: 8.5px; line-height: 1.35; text-align: center; }
.pzz-result { margin: 0 0 11px; padding: 9px; border-radius: 7px; background: #eef4f7; color: #385365; font-size: 9px; line-height: 1.4; }
.pzz-result.act-found { background: #e9f6ed; color: #315f43; }
.pzz-result.unavailable { background: #fff4e3; color: #805d2d; }
.pzz-result > b { display: block; margin-bottom: 6px; font-size: 10px; }
.pzz-result p { display: grid; grid-template-columns: 52px 1fr; gap: 6px; margin: 4px 0; }
.pzz-result p span { color: #71818b; }
.pzz-result small { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(80, 110, 90, .18); font-size: 8.5px; line-height: 1.45; }
.fgistp-result { display: grid; gap: 6px; margin: 0 0 11px; padding: 9px; border: 1px solid #c7d7df; border-radius: 7px; background: #f2f7f9; color: #385365; font-size: 8.5px; line-height: 1.4; }
.fgistp-result.found { border-color: #b9d6c2; background: #eff8f1; color: #315f43; }
.fgistp-result.unavailable { border-color: #e4d1af; background: #fff7e9; color: #805d2d; }
.fgistp-result > b { font-size: 10px; }
.fgistp-result > small { color: #708089; }
.fgistp-result article { display: grid; gap: 3px; padding-top: 7px; border-top: 1px solid rgba(80, 110, 90, .18); }
.fgistp-result article > a:first-child { color: #155f7d; font-size: 9px; font-weight: 700; }
.fgistp-result article span, .fgistp-result article small { color: #63757e; }
.fgistp-result .fgistp-file { color: #287148; font-weight: 700; }
.fgistp-result .fgistp-search-link { color: var(--blue); font-weight: 700; }
.project-pzz-status { display: grid; gap: 4px; margin: 2px 0 11px; padding: 9px 10px; border: 1px solid #c5d5de; border-radius: 8px; background: #f1f7fa; font-size: 9px; line-height: 1.4; }
.project-pzz-status.act-found { border-color: #b9d6c2; background: #eff8f1; }
.project-pzz-status.unavailable { border-color: #e4d1af; background: #fff7e9; }
.project-pzz-status b { color: #315b70; font-size: 10px; }
.project-pzz-status.act-found b { color: #37714b; }
.project-pzz-status small { color: #6c7d86; }
.project-pzz-status a { color: var(--blue); }

.button { border: 1px solid #cdd4da; background: #fff; border-radius: 8px; padding: 9px 11px; cursor: pointer; font-weight: 700; font-size: 11px; transition: transform .1s, background .15s, border-color .15s; }
.button:hover:not(:disabled) { transform: translateY(-1px); border-color: #9faebb; }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { opacity: .48; cursor: not-allowed; }
.button.primary { color: #fff; border-color: var(--blue); background: var(--blue); }
.button.primary:hover:not(:disabled) { background: var(--blue-dark); }
.button.secondary { background: #fff; }
.button.soft { background: #f3f0e9; border-color: #e0dacf; }
.button.ghost { background: transparent; }
.button.compact { padding: 7px 11px; }
.button.danger { color: #a43f36; }
.button.icon { padding: 8px 5px; background: #fff; }
.button.full { width: 100%; }
.button.large { padding: 13px; font-size: 12px; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.project-history { margin-top: 9px; padding: 9px; border: 1px solid #dfe4e6; border-radius: 9px; background: #f7f8f6; }
.project-history .field { margin-top: 0; }
.rotation-row { grid-template-columns: repeat(4, 1fr); }
.checks-inline { display: flex; flex-wrap: wrap; gap: 9px 12px; font-size: 10px; color: #516273; }
.checks-inline input { width: auto; }
.upload-box { min-height: 82px; border: 1px dashed #aebac4; border-radius: 10px; background: #f7f5ef; display: grid; place-items: center; cursor: pointer; text-align: center; padding: 12px; }
.upload-box input { display: none; }
.upload-box span { font-size: 11px; font-weight: 700; color: var(--blue); }
.plan-preview { width: 100%; max-height: 170px; object-fit: contain; border-radius: 8px; margin-top: 10px; background: #eee; }

.stage { padding: 18px; min-width: 0; }
.view-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.view-tabs button { border: 1px solid #d2d7d9; background: rgba(255,255,255,.68); padding: 9px 17px; font-size: 11px; }
.view-tabs button.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.stage-card { min-height: 620px; background: #fff; border-radius: 4px; box-shadow: 0 10px 30px rgba(32,42,48,.1); overflow: hidden; position: relative; }
.preview-watermark { position: absolute; inset: -8%; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; align-items: center; justify-items: center; overflow: hidden; pointer-events: none; user-select: none; }
.preview-watermark span { color: rgba(24, 61, 88, .095); font: 800 clamp(14px, 1.65vw, 24px)/1.1 Georgia, serif; letter-spacing: .04em; white-space: nowrap; transform: rotate(-28deg); }
.preview-license { position: absolute; z-index: 21; right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 9px; border: 1px solid rgba(25, 73, 101, .18); border-radius: 6px; background: rgba(255,255,255,.82); color: rgba(21, 66, 92, .72); font-size: 9px; font-weight: 700; pointer-events: none; backdrop-filter: blur(5px); }
.stage-caption { display: flex; justify-content: space-between; color: #8b8e8b; font-size: 10px; padding: 10px 4px; }
.canvas-shell { position: relative; background: #fbfaf6; }
.plan-canvas { display: block; width: 100%; min-height: 600px; touch-action: none; user-select: none; }
.canvas-tip { position: absolute; bottom: 12px; left: 16px; padding: 7px 10px; background: rgba(255,255,255,.88); border: 1px solid rgba(213,208,197,.8); border-radius: 6px; color: #697581; font-size: 10px; backdrop-filter: blur(8px); }
.dimension-label { fill: #566b7c; font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #fbfaf6; stroke-width: 4px; stroke-linejoin: round; }
.edge-hit { cursor: pointer; }
.vertex-handle { fill: #fff; stroke: #1771b7; stroke-width: 3; cursor: grab; }
.house-object, .garage-object, .tree-object, .neighbor-house { cursor: grab; touch-action: none; }
.house-label { fill: #fff; font-size: 13px; font-weight: 800; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.garage-label { fill: #fff; font-size: 10px; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: rgba(46,39,33,.45); stroke-width: 2px; }
.plan-focus { animation: plan-focus 1s ease-in-out infinite alternate; }
.plan-focus > polygon, polygon.plan-focus { stroke: #e1251b !important; stroke-width: 7px !important; filter: drop-shadow(0 0 7px rgba(225,37,27,.52)); }
@keyframes plan-focus { to { opacity: .62; } }
.object-label { fill: #fff; font-size: 10px; font-weight: 700; pointer-events: none; }
.neighbor-house { fill: #9a9b99; stroke: #5c6268; stroke-width: 2; }
.north-mark path { fill: none; stroke: #173654; stroke-width: 2.5; }
.north-mark text { fill: #173654; font-size: 14px; font-weight: 800; }
.sun-mark circle { fill: #f3bc45; stroke: #d99b25; stroke-width: 2; }
.sun-mark text { fill: #84672f; font-size: 11px; }

.three-view { width: 100%; height: 660px; position: relative; }
.three-view canvas { display: block; width: 100%; height: 100%; }
.view-overlay { position: absolute; left: 15px; bottom: 15px; z-index: 2; padding: 7px 10px; background: rgba(255,255,255,.82); border-radius: 6px; color: #677583; font-size: 10px; pointer-events: none; }
.view-loading { min-height: 620px; display: grid; place-items: center; color: #6f7d89; font-size: 12px; background: #f7f4ed; }
.drawing-view svg { display: block; width: 100%; min-height: 590px; }
.drawing-title { fill: #17304a; font: 700 22px "Roboto Mono", monospace; }
.drawing-note { fill: #6c7985; font-size: 12px; }
.room-name { fill: #263b50; font-size: 13px; font-weight: 700; }
.room-area { fill: #60717f; font-size: 11px; }
.floor-selector { display: flex; gap: 6px; padding: 10px 12px; background: #f5f2eb; border-bottom: 1px solid #e0dacf; }
.floor-selector button { background: #fff; border: 1px solid #d2d6d8; padding: 7px 14px; }
.floor-selector button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; padding: 9px 12px; background: #f5f2eb; border-bottom: 1px solid #e0dacf; color: #526575; font-size: 10px; }
.plan-controls .floor-selector { padding: 0; border: 0; margin-right: 3px; }
.plan-controls label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.plan-controls input[type="number"] { width: 52px; padding: 6px 7px; }
.plan-controls select { width: auto; padding: 6px 26px 6px 7px; }
.plan-controls input[type="checkbox"] { width: auto; }

.result-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.result-heading small { color: #85909a; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.result-heading h2 { margin: 6px 0 0; font: 700 21px "Roboto Mono", monospace; }
.status-dot { width: 13px; height: 13px; border-radius: 50%; }
.status-dot.ok { background: #4f9362; box-shadow: 0 0 0 7px rgba(79,147,98,.12); }
.status-dot.bad { background: #bd4c41; box-shadow: 0 0 0 7px rgba(189,76,65,.12); }
.status-dot.pending { background: #c38a38; box-shadow: 0 0 0 7px rgba(195,138,56,.13); }
.check-list { padding: 7px 0; }
.check-row { appearance: none; width: 100%; color: inherit; text-align: left; font: inherit; background: transparent; border: 0; display: grid; grid-template-columns: 23px 1fr; gap: 8px; padding: 11px 4px; border-bottom: 1px dashed #e0dbd2; cursor: pointer; border-radius: 7px; transition: background .15s, transform .15s; }
.check-row:hover { background: #f3f0e8; transform: translateX(2px); }
.check-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.check-row.active { background: #fff5d9; box-shadow: inset 3px 0 #cf8d2e; }
.check-icon { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: white; font-size: 11px; font-weight: 800; margin-top: 1px; }
.check-row.ok .check-icon { background: #4e8c5e; }
.check-row.error .check-icon { background: #bb493d; }
.check-row.warning .check-icon { background: #c38a38; }
.check-row.info .check-icon { background: #607d96; }
.check-row b { display: block; font-size: 11px; line-height: 1.35; }
.check-row b i { float: right; color: #8a98a4; font-style: normal; font-size: 13px; }
.check-row small { display: block; color: #798692; font-size: 9.5px; line-height: 1.45; margin-top: 2px; }
.check-row small.basis { color: #586a79; margin-top: 5px; padding-left: 7px; border-left: 2px solid #d5dce1; }
.check-content { display: block; min-width: 0; }
.check-action { display: block; margin-top: 8px; padding: 8px 9px; border-radius: 6px; background: #fff; color: #455a6b; font-size: 9.5px; line-height: 1.5; box-shadow: 0 1px 5px rgba(31,45,58,.08); }
.check-action strong { display: block; color: #9a5c16; margin-bottom: 2px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.optimize-check { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 34px; margin-top: 8px; padding: 7px 12px; border: 0; border-radius: 6px; background: var(--blue); color: #fff; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 10px rgba(19, 91, 121, .2); transition: transform .15s, background .15s; }
.optimize-check:hover { background: #0b4660; transform: translateY(-1px); }
.optimize-check:focus-visible { outline: 2px solid #c98224; outline-offset: 2px; }
.notice-box { margin: 11px 0 20px; padding: 13px; border: 1px solid #c9d9e5; border-radius: 9px; background: #eef5f9; }
.notice-box b { font-size: 11px; }
.notice-box p { margin: 5px 0 0; font-size: 9.5px; line-height: 1.55; color: #5f7180; }
.metrics, .exports { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 12px; }
.metrics h3, .exports h3 { margin: 0 0 12px; text-transform: uppercase; font-size: 10px; letter-spacing: .07em; color: #7b8791; }
.metric-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e2ded5; font-size: 10px; }
.metric-row span { color: #667480; }
.metric-row b { text-align: right; }
.exports .button + .button { margin-top: 7px; }
.document-list { margin: 12px 0 0; padding-left: 18px; color: #5f7080; font-size: 9.5px; line-height: 1.55; }
.document-list li + li { margin-top: 3px; }
.confirm-rules { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0; color: #4f6273; font-size: 10px; line-height: 1.45; }
.confirm-rules input { width: auto; margin-top: 2px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100; max-width: min(560px, calc(100vw - 30px)); padding: 12px 18px; background: #172f47; color: #fff; border-radius: 9px; box-shadow: 0 10px 32px rgba(0,0,0,.25); font-size: 12px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(17,31,44,.58); backdrop-filter: blur(5px); }
.modal-card { width: min(720px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.modal-title { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.modal-title small { color: #8a6b4d; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.modal-title h2 { margin: 5px 0 0; font: 700 23px "Roboto Mono", monospace; }
.modal-title > button { border: 0; background: transparent; color: #667480; font-size: 28px; line-height: 1; cursor: pointer; }
.modal-body { overflow-y: auto; padding: 18px 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); background: #f5f2eb; }
.legal-note { margin-top: 8px; padding: 11px 12px; border-left: 3px solid #b98945; background: #f4eddf; color: #6f604d; font-size: 10px; line-height: 1.5; }

@media (max-width: 1220px) {
  .workspace { grid-template-columns: 270px minmax(500px, 1fr); }
  .result-panel { position: static; max-height: none; overflow: visible; grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 22px; }
  .result-heading, .check-list, .notice-box { grid-column: 1; }
  .metrics { grid-column: 2; grid-row: 1 / span 3; border-top: 0; margin: 0; padding: 0; }
  .exports { grid-column: 3; grid-row: 1 / span 3; border-top: 0; margin: 0; padding: 0; }
}

@media (max-width: 820px) {
  .topbar { position: static; height: auto; min-height: 66px; padding: 12px 14px; }
  .brand small, .autosave { display: none; }
  .brand strong { font-size: 19px; }
  .workspace { display: flex; flex-direction: column; }
  .stage { order: 1; padding: 10px; }
  .controls-panel { position: static; max-height: none; overflow: visible; order: 2; border-right: 0; border-top: 1px solid var(--line); }
  .result-panel { order: 3; display: block; }
  .view-tabs { overflow-x: auto; padding-bottom: 2px; }
  .view-tabs button { white-space: nowrap; padding: 8px 13px; }
  .stage-card { min-height: 430px; }
  .plan-canvas { min-height: 430px; }
  .three-view { height: 500px; }
  .stage-caption { display: none; }
  .result-panel .metrics, .result-panel .exports { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
}

@media print {
  .topbar, .controls-panel, .result-panel, .view-tabs, .stage-caption { display: none !important; }
  .workspace { display: block; }
  .stage { padding: 0; }
  .stage-card { box-shadow: none; }
}

/* Landing */
.landing { min-height: 100vh; overflow: hidden; background: #f7f4ed; color: #17304a; }
.landing-header { width: min(1420px, calc(100% - 48px)); height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.landing-brand { color: inherit; text-decoration: none; flex: 0 0 auto; }
.landing-header nav { display: flex; align-items: center; gap: clamp(16px, 2.3vw, 36px); }
.landing-header nav a { color: #506477; text-decoration: none; font-size: 12px; font-weight: 600; }
.landing-header nav a:hover { color: #1769aa; }
.landing-header-actions { display: flex; align-items: center; gap: 18px; }
.landing-account-link { color: #17304a; font-size: 11px; font-weight: 800; text-decoration: none; }
.landing-button { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 0 22px; border: 1px solid #17304a; border-radius: 8px; color: #17304a; text-decoration: none; font-size: 12px; font-weight: 800; transition: transform .15s, background .15s, color .15s; }
.landing-button:hover { transform: translateY(-2px); }
.landing-button.small { min-height: 39px; padding: 0 17px; }
.landing-button.primary { color: #fff; background: #1769aa; border-color: #1769aa; box-shadow: 0 9px 24px rgba(23,105,170,.18); }
.landing-button.primary:hover { background: #0f527f; }
.landing-button.text { border-color: transparent; padding-inline: 8px; }
.landing-button.text span { margin-left: 10px; }
.landing-button.dark { color: #fff; background: #17304a; }
.landing-button.pale { color: #17304a; background: #fff; border-color: #fff; }
.landing-button.large { min-height: 54px; padding-inline: 30px; font-size: 13px; }

.landing-hero { width: min(1420px, calc(100% - 48px)); min-height: 720px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(38px, 5vw, 84px); padding: 70px 0 96px; }
.eyebrow, .section-kicker { color: #98704d; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 28px; height: 1px; background: #98704d; }
.hero-copy h1 { max-width: 680px; margin: 23px 0 25px; font: 700 clamp(42px, 4.6vw, 68px)/1 "Roboto Mono", monospace; letter-spacing: -.055em; }
.hero-copy > p { max-width: 620px; color: #5f7180; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 15px; margin-top: 33px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 20px 30px; margin-top: 40px; padding-top: 22px; border-top: 1px solid #dcd6cb; }
.hero-facts span { color: #71808d; font-size: 10px; }
.hero-facts b { display: block; color: #17304a; font-size: 13px; margin-bottom: 3px; }
.landing-visual { position: relative; margin: 0; border: 1px solid #d9d3c8; border-radius: 18px; background: #fff; box-shadow: 0 34px 80px rgba(41,48,51,.16); transform: rotate(1deg); overflow: hidden; isolation: isolate; }
.landing-visual > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.visual-proof { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 10px; max-width: 280px; padding: 12px 14px; border: 1px solid rgba(218,213,203,.9); border-radius: 10px; background: rgba(255,255,255,.92); color: #17304a; box-shadow: 0 10px 28px rgba(23,48,74,.14); backdrop-filter: blur(8px); }
.visual-proof > span { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: #4f925e; box-shadow: 0 0 0 4px rgba(79,146,94,.12); }
.visual-proof b, .visual-proof small, .model-proof b, .model-proof span { display: block; }
.visual-proof b { font-size: 12px; }
.visual-proof small { margin-top: 3px; color: #667783; font-size: 8px; line-height: 1.45; }
.model-proof { position: absolute; left: 18px; bottom: 18px; padding: 11px 14px; border-radius: 8px; background: rgba(23,48,74,.92); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.19); backdrop-filter: blur(8px); }
.model-proof b { font-size: 12px; }
.model-proof span { margin-top: 2px; color: #c3cfd7; font-size: 8px; }

.trust-line { min-height: 82px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 42px; padding: 15px 24px; color: #7b8791; border-top: 1px solid #ded8cd; border-bottom: 1px solid #ded8cd; background: #efeae1; font-size: 10px; }
.trust-line span { color: #9a6d47; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.trust-line b { color: #516474; font-size: 11px; }
.landing-section { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0; }
.section-intro { display: grid; grid-template-columns: 170px 1fr; align-items: start; margin-bottom: 62px; }
.section-intro h2 { max-width: 760px; margin: 0; font: 700 clamp(38px, 4.5vw, 64px)/1.03 "Roboto Mono", monospace; letter-spacing: -.045em; }
.section-intro > p { color: #95a3af; line-height: 1.7; }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #d7d1c7; border-bottom: 1px solid #d7d1c7; }
.pain-grid article { min-height: 260px; padding: 30px; border-right: 1px solid #d7d1c7; }
.pain-grid article:last-child { border-right: 0; }
.pain-grid article > span, .feature-grid article > span { color: #aa7e58; font-size: 10px; font-weight: 800; }
.pain-grid h3, .feature-grid h3 { margin: 58px 0 13px; font: 700 23px "Roboto Mono", monospace; }
.pain-grid p, .feature-grid p { color: #6d7b87; font-size: 12px; line-height: 1.65; }

.how-section { width: 100%; padding-inline: max(24px, calc((100% - 1280px) / 2)); color: #fff; background: #172f47; }
.section-intro.light { grid-template-columns: 170px 1fr .7fr; }
.section-intro.light .section-kicker { color: #b79675; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); }
.steps article { padding: 30px 32px 40px; border-right: 1px solid rgba(255,255,255,.16); }
.steps article:last-child { border-right: 0; }
.steps article > b { color: #9d8064; font-size: 10px; }
.steps h3 { margin: 22px 0 10px; font: 700 24px "Roboto Mono", monospace; }
.steps p { color: #aebbc5; font-size: 12px; line-height: 1.65; }
.step-visual { position: relative; aspect-ratio: 3 / 2; margin: 28px 0; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #0b2338; box-shadow: 0 14px 32px rgba(2,13,24,.22); overflow: hidden; }
.step-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #d8d2c8; border: 1px solid #d8d2c8; }
.feature-grid article { min-height: 275px; padding: 28px; position: relative; background: #f7f4ed; }
.feature-grid h3 { margin-top: 58px; }
.feature-arrow { position: absolute; right: 25px; top: 24px; color: #8695a1; font-size: 18px; }
.landing-showcase { min-height: 760px; display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 70px; padding: 110px max(24px, calc((100% - 1340px)/2)); background: #dce6dc; }
.landing-showcase h2 { margin: 18px 0; font: 700 clamp(40px, 4vw, 64px)/1.03 "Roboto Mono", monospace; }
.landing-showcase p { color: #526a5c; line-height: 1.7; }
.landing-showcase .landing-visual { transform: rotate(-1deg); }
.business-card { min-height: 470px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; padding: clamp(42px, 6vw, 80px); color: #fff; background: #9b6848; border-radius: 5px; }
.business-card h2 { margin: 18px 0 20px; font: 700 clamp(38px, 4.2vw, 62px)/1.04 "Roboto Mono", monospace; }
.business-card p { max-width: 660px; color: #eadbd0; line-height: 1.7; }
.business-card .section-kicker { color: #f0d9c7; }
.business-points { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.business-points > span { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.22); color: #eadbd0; font-size: 11px; }
.business-points > span b { display: block; margin-bottom: 4px; color: #fff; font-size: 13px; }
.business-points .landing-button { margin-top: 28px; align-self: flex-start; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.price-grid article { padding: 36px; border: 1px solid #d8d2c8; background: #fff; }
.price-grid article + article { border-left: 0; }
.price-grid article.featured { color: #fff; background: #17304a; border-color: #17304a; transform: translateY(-18px); box-shadow: 0 22px 48px rgba(22,45,66,.2); }
.price-type { color: #9a704c; font-size: 9px; letter-spacing: .12em; font-weight: 800; }
.featured .price-type { color: #c1a283; }
.price-grid h3 { margin: 15px 0 28px; font: 700 30px "Roboto Mono", monospace; }
.price { display: flex; align-items: baseline; gap: 10px; padding-bottom: 25px; border-bottom: 1px solid #ded9d0; }
.featured .price { border-color: rgba(255,255,255,.2); }
.price b { font: 700 34px "Roboto Mono", monospace; }
.price small { color: #7f8c97; font-size: 10px; }
.price-grid ul { min-height: 180px; margin: 25px 0; padding: 0; list-style: none; }
.price-grid li { padding: 7px 0 7px 19px; position: relative; color: #657683; font-size: 11px; }
.price-grid li::before { content:"✓"; position:absolute; left:0; color:#4f8e5d; font-weight:800; }
.featured li { color: #bcc8d1; }
.price-grid .landing-button { width: 100%; }
.faq-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
.faq-section .section-intro { display: block; }
.faq-section .section-intro h2 { margin-top: 18px; }
.faq-list { border-top: 1px solid #d5cfc4; }
.faq-list details { border-bottom: 1px solid #d5cfc4; }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; font-size: 14px; font-weight: 800; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: #a27551; font-size: 22px; font-weight: 400; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list p { max-width: 760px; margin: -4px 50px 25px 0; color: #687985; font-size: 12px; line-height: 1.7; }
.final-cta { padding: 125px 24px; text-align: center; color: #fff; background: #17304a; }
.final-cta .section-kicker { color: #b69676; }
.final-cta h2 { margin: 19px 0; font: 700 clamp(44px, 5vw, 72px)/1 "Roboto Mono", monospace; }
.final-cta p { color: #adbac5; }
.final-cta .landing-button { margin-top: 24px; }
.landing-footer { min-height: 290px; display: grid; grid-template-columns: 1.5fr .6fr .8fr 1.4fr; gap: 50px; padding: 62px max(24px, calc((100% - 1280px)/2)); background: #10263a; color: #fff; }
.landing-footer .landing-brand { align-self: start; }
.landing-footer > div:not(.brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.landing-footer > div b { margin-bottom: 8px; color: #8fa1af; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.landing-footer a { color: #c0cbd3; text-decoration: none; font-size: 10px; }
.landing-footer p { margin: 0; color: #7e909e; font-size: 10px; line-height: 1.65; }
.session-notice { position: fixed; z-index: 150; left: 20px; right: 20px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1120px; margin: auto; padding: 17px 19px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(16,38,58,.97); color: #fff; box-shadow: 0 18px 55px rgba(0,0,0,.32); backdrop-filter: blur(12px); }
.session-notice b { font-size: 12px; }
.session-notice p { max-width: 760px; margin: 5px 0; color: #c0cbd3; font-size: 10px; line-height: 1.5; }
.session-notice a { color: #fff; font-size: 9px; }
.session-notice-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.session-notice button { min-height: 38px; padding: 0 13px; border: 1px solid #7c8e9c; border-radius: 7px; background: transparent; color: #fff; cursor: pointer; font-size: 9px; font-weight: 800; }
.session-notice button.accept { border-color: #fff; background: #fff; color: #17304a; }

@media (max-width: 1000px) {
  .landing-header nav { display: none; }
  .landing-hero, .landing-showcase { grid-template-columns: 1fr; }
  .landing-hero { padding-top: 50px; }
  .landing-visual { max-width: 760px; }
  .section-intro, .section-intro.light { grid-template-columns: 130px 1fr; }
  .section-intro.light p { grid-column: 2; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .business-card { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; gap: 12px; }
  .price-grid article + article { border-left: 1px solid #d8d2c8; }
  .price-grid article.featured { transform: none; }
  .faq-section { grid-template-columns: 1fr; }
  .landing-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .landing-header, .landing-hero, .landing-section { width: min(100% - 28px, 1280px); }
  .landing-header .landing-button { display: none; }
  .landing-header-actions { margin-left: auto; }
  .session-notice { left: 10px; right: 10px; bottom: 10px; display: block; }
  .session-notice-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; }
  .landing-hero { min-height: auto; padding: 55px 0 68px; }
  .hero-copy h1 { font-size: 38px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .landing-button { width: 100%; }
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .trust-line { justify-content: flex-start; gap: 13px 20px; }
  .landing-section { padding: 82px 0; }
  .section-intro, .section-intro.light { display: block; }
  .section-intro h2 { margin-top: 17px; font-size: 42px; }
  .pain-grid, .steps, .feature-grid { grid-template-columns: 1fr; }
  .pain-grid article, .steps article { border-right: 0; border-bottom: 1px solid #d7d1c7; }
  .how-section { width: 100%; padding-inline: 14px; }
  .steps article { border-color: rgba(255,255,255,.16); }
  .landing-showcase { padding: 82px 14px; gap: 45px; }
  .visual-proof { right: 10px; bottom: 10px; max-width: 220px; padding: 9px 10px; }
  .visual-proof small { display: none; }
  .model-proof { left: 10px; bottom: 10px; }
  .business-card { padding: 34px 25px; }
  .price-grid article { padding: 28px 24px; }
  .faq-section { gap: 0; }
  .landing-footer { grid-template-columns: 1fr; padding-inline: 24px; }
}
.session-notice[hidden] { display: none !important; }