/* Surveyor Instruction Pack page (7 Oct 2026). Built Logic brand only: the generated
   documents carry the user's brand, this page carries ours. Shared tool form styles
   (.blt-*) come from tools.css; this file lays out the page and the stepper. */

.ip-page { background: #FAFAF8; }
.ip-page main > section:first-of-type { padding-top: 132px; }
@media (max-width: 760px) { .ip-page main > section:first-of-type { padding-top: 104px; } }

.ip-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.ip-h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(36px, 5vw, 58px); line-height: 1.06; letter-spacing: -0.02em; color: #232A31; margin: 0 0 22px; max-width: 16ch; }
.ip-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.015em; color: #232A31; margin: 0 0 18px; }
.ip-h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 24px; line-height: 1.2; color: #232A31; margin: 0 0 10px; }
.ip-lead { font-size: 19px; line-height: 1.6; color: #586069; max-width: 56ch; margin: 0; }
.ip-body { font-size: 17px; line-height: 1.65; color: #232A31; max-width: 62ch; margin: 0 0 14px; }
.ip-small, .ip-intro-line { font-size: 14px; line-height: 1.5; color: #586069; margin: 12px 0 0; }
.ip-intro-line { font-size: 19px; margin: 0 0 28px; }

/* Hero */
.ip-hero { padding-bottom: 72px; }
.ip-hero__grid { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 440fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ip-hero__actions { margin-top: 32px; }
.ip-sheet { margin: 0; width: min(100%, 440px); min-height: 0; max-height: 550px; justify-self: end; background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 18px; padding: 34px 32px 26px; position: relative; }
.ip-sheet::before { content: ''; position: absolute; inset: -18px -18px auto auto; width: 180px; height: 180px; border-radius: 50%; background: rgba(175,196,221,0.28); z-index: -1; }
.ip-sheet__title { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 500; color: #1B3A5B; margin: 0 0 18px; }
.ip-sheet__list { list-style: none; counter-reset: ip; margin: 0; padding: 0; }
.ip-sheet__list li { counter-increment: ip; display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid #E5E5E2; font-size: 17px; color: #232A31; }
.ip-sheet__list li::before { content: '10.' counter(ip); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: #586069; min-width: 38px; }
.ip-sheet__gap { margin: 18px 0 0; font-size: 14px; color: #586069; }
.ip-sheet__gap span { background: rgba(175,196,221,0.45); color: #1B3A5B; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.ip-sheet__cap { margin-top: 18px; font-size: 14px; color: #586069; }
@media (prefers-reduced-motion: no-preference) {
  .ip-sheet__list li { animation: ip-settle 420ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  .ip-sheet__list li:nth-child(2) { animation-delay: 80ms; } .ip-sheet__list li:nth-child(3) { animation-delay: 160ms; }
  .ip-sheet__list li:nth-child(4) { animation-delay: 240ms; } .ip-sheet__list li:nth-child(5) { animation-delay: 320ms; }
  .ip-sheet__list li:nth-child(6) { animation-delay: 400ms; }
}
@keyframes ip-settle { from { opacity: 0.35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .ip-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ip-sheet { justify-self: start; }
}

/* Bands */
.ip-band { padding: 72px 0; }
.ip-pack { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ip-pack li { padding: 24px; }
.ip-pack h3 { font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 19px; color: #232A31; margin: 0 0 8px; }
.ip-pack p { font-size: 17px; line-height: 1.55; color: #232A31; margin: 0; }
@media (max-width: 960px) { .ip-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ip-pack { grid-template-columns: minmax(0, 1fr); } }

.ip-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ip-aside { padding: 28px; }
.ip-aside h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 24px; color: #232A31; margin: 0 0 10px; }
.ip-aside p { font-size: 17px; line-height: 1.6; color: #232A31; margin: 0 0 20px; }
@media (max-width: 899px) { .ip-split { grid-template-columns: minmax(0, 1fr); } }

.ip-points { padding: 24px 0 72px; }
.ip-points__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
@media (max-width: 899px) { .ip-points__grid { grid-template-columns: minmax(0, 1fr); } }

.ip-bridge-band { padding: 72px 0 96px; }
.ip-bridge-band__inner { text-align: center; }
.ip-bridge-band__inner > * { margin-left: auto; margin-right: auto; max-width: 680px; }
.ip-bridge-band .ip-lead { margin-bottom: 28px; }

/* Tool shell */
.ip-tool { padding: 72px 0; background: rgba(175,196,221,0.18); }
.ip-app { background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 20px; padding: clamp(18px, 3vw, 36px); }
.ip-nav-steps { overflow-x: auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.ip-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0 0 4px; }
.ip-step { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid #E5E5E2; border-radius: 11px; background: #FAFAF8; color: #586069; font: 600 14px/1.2 'Source Sans 3', system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.ip-step__n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }
.ip-step.is-done { color: #232A31; }
.ip-step.is-on { background: #232A31; border-color: #232A31; color: #FAFAF8; }
.ip-step:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ip-step:not(.is-on):hover { border-color: #232A31; color: #232A31; } }

.ip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 960px) { .ip-layout { grid-template-columns: minmax(0, 1fr); } .ip-panel { position: static !important; } }
.ip-count { font-size: 14px; color: #586069; margin: 0 0 6px; }
.ip-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 30px; color: #232A31; margin: 0 0 8px; }
.ip-title:focus { outline: none; }
.ip-intro { font-size: 17px; color: #586069; line-height: 1.6; max-width: 64ch; margin: 0 0 22px; }
.ip-main .blt-h3 { margin-top: 26px; }

.ip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0 0 8px; }
.ip-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ip-field--wide { grid-column: 1 / -1; }
.ip-field .blt-input, .ip-line, .ip-inline .blt-input { width: 100%; box-sizing: border-box; }
.ip-area { resize: vertical; min-height: 64px; }
@media (max-width: 620px) { .ip-grid { grid-template-columns: minmax(0, 1fr); } }

.ip-check { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: #232A31; padding: 6px 0; cursor: pointer; }
.ip-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: #1B3A5B; flex: none; }
.ip-multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0 0 12px; }
.ip-multi--stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .ip-multi { grid-template-columns: minmax(0, 1fr); } }

.ip-radios { display: grid; gap: 8px; }
.ip-radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid #E5E5E2; border-radius: 14px; background: #FAFAF8; cursor: pointer; }
.ip-radio input { margin-top: 4px; accent-color: #1B3A5B; flex: none; }
.ip-radio strong { display: block; font-weight: 600; font-size: 16px; color: #232A31; }
.ip-radio small { display: block; font-size: 14px; color: #586069; line-height: 1.45; margin-top: 2px; }
.ip-radio:has(input:checked) { border-color: #1B3A5B; background: rgba(175,196,221,0.18); }
@media (hover: hover) and (pointer: fine) { .ip-radio:hover { border-color: #232A31; } }

.ip-disciplines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ip-disc { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.ip-disc legend { font-weight: 600; font-size: 15px; color: #232A31; margin-bottom: 8px; padding: 0; }
@media (max-width: 760px) { .ip-disciplines { grid-template-columns: minmax(0, 1fr); } }

.ip-scope .blt-h3 { margin: 22px 0 8px; }
.ip-line-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 0 0 8px; }
.ip-line-row input[type=checkbox] { margin-top: 12px; width: 18px; height: 18px; accent-color: #1B3A5B; }
.ip-line-row.is-off .ip-line { color: #586069; background: #FAFAF8; }
.ip-line { resize: vertical; min-height: 48px; font-size: 16px; }
.ip-del { margin-top: 10px; }
.ip-add { margin-top: 18px; padding: 18px; border: 1px dashed #586069; border-radius: 14px; }
.ip-add .blt-h3 { margin-top: 0; }

.ip-inline { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.ip-disb .ip-inline { grid-template-columns: minmax(0, 1fr) 140px auto; }
@media (max-width: 620px) { .ip-inline, .ip-disb .ip-inline { grid-template-columns: minmax(0, 1fr); } }

.ip-scroll { overflow-x: auto; }
.ip-table { border-collapse: collapse; width: 100%; min-width: 420px; margin: 0 0 8px; }
.ip-table th { text-align: left; font-size: 14px; font-weight: 600; color: #586069; padding: 6px 8px 6px 0; }
.ip-table td { padding: 4px 8px 4px 0; vertical-align: middle; }
.ip-table .ip-num { max-width: 120px; }
.ip-team td:first-child { min-width: 170px; }

.ip-row { margin-top: 16px; }
.ip-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #E5E5E2; }

/* Live panel */
.ip-panel { position: sticky; top: 104px; background: #232A31; color: #FAFAF8; border-radius: 18px; padding: 22px; }
.ip-panel .blt-hint { color: #AFC4DD; }
.ip-panel__label { font-size: 14px; font-weight: 600; color: #AFC4DD; margin: 0 0 4px; }
.ip-panel__big { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 26px; margin: 0 0 6px; color: #FAFAF8; }
.ip-panel__dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; margin: 16px 0; }
.ip-panel__dl dt { color: #AFC4DD; }
.ip-panel__dl dd { margin: 0; text-align: right; }
.ip-margin { border-top: 1px solid rgba(175,196,221,0.3); padding-top: 14px; }
.ip-margin p { margin: 0 0 4px; font-size: 14px; }
.ip-margin[data-flag="red"] { margin: 0 -22px -22px; padding: 14px 22px 22px; background: #FAFAF8; color: #232A31; border-radius: 0 0 18px 18px; }
.ip-margin[data-flag="red"] .ip-panel__label, .ip-margin[data-flag="red"] .ip-panel__big { color: #232A31; }
.ip-margin[data-flag="red"] .ip-margin__msg { font-weight: 700; color: #232A31; }
.ip-margin[data-flag="red"] .ip-margin__msg::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #232A31; margin-right: 8px; }

/* Review */
.ip-gaps { border: 1px solid #586069; border-radius: 14px; padding: 16px 18px; margin: 0 0 20px; }
.ip-gaps .blt-h3 { margin: 0 0 8px; }
.ip-gaps ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 28px; font-size: 15px; color: #232A31; }
@media (max-width: 620px) { .ip-gaps ul { columns: 1; } }
.ip-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ip-tab { min-height: 40px; padding: 6px 12px; border: 1px solid #E5E5E2; border-radius: 11px; background: #FAFAF8; color: #232A31; font: 600 14px/1.2 'Source Sans 3', system-ui, sans-serif; cursor: pointer; }
.ip-tab.is-on { background: #1B3A5B; border-color: #1B3A5B; color: #FAFAF8; }
.ip-tab:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; }
.ip-preview-wrap { border: 1px solid #E5E5E2; border-radius: 14px; overflow: hidden; background: #E5E5E2; }
.ip-preview { display: block; width: 100%; height: 720px; border: 0; background: #FAFAF8; }
@media (max-width: 620px) { .ip-preview { height: 560px; } }
.ip-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 18px 0; }
.ip-polish, .ip-library { margin-top: 26px; padding-top: 18px; border-top: 1px solid #E5E5E2; }
.ip-lib { list-style: none; margin: 0; padding: 0; }
.ip-lib li { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid #E5E5E2; font-size: 16px; }
.ip-lib li span { flex: 1 1 220px; color: #232A31; }
.ip-bridge { margin-top: 26px; padding: 20px; border-radius: 16px; background: rgba(175,196,221,0.28); }
.ip-bridge p { margin: 0 0 6px; }
.ip-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ip-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: #232A31; color: #FAFAF8; padding: 12px 18px; border-radius: 12px; font-size: 15px; max-width: calc(100vw - 32px); }
.ip-toast[data-tone="warn"] { background: #FAFAF8; color: #232A31; border: 2px solid #232A31; }
.ip-toast[hidden] { display: none; }
@media (max-width: 620px) { .ip-team { min-width: 520px; } .ip-team .ip-num { min-width: 72px; } .ip-team td:first-child { min-width: 150px; } }
.ip-export-note { margin: 18px 0 0; }
/* Small print above the footer (Kristian, 7 Oct 2026): one line, small, not a callout. */
.ip-fine { font-size: 12px; line-height: 1.5; color: #586069; margin: 0 0 32px; max-width: 80ch; }

/* Start from the enquiry, and standard terms (Kristian, 7 Oct 2026) */
.ip-top { display: grid; gap: 12px; margin: 0 0 24px; }
.ip-top__box { border: 1px solid #E5E5E2; border-radius: 14px; background: transparent; padding: 14px 18px; }
.ip-top__box > summary { font: 600 17px 'Source Sans 3', system-ui, sans-serif; color: #232A31; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.ip-top__box[open] > summary { margin-bottom: 10px; }
.ip-top__box .ip-inline { margin-top: 10px; }
.ip-enquiry { width: 100%; }
.ip-mic[aria-pressed="true"] { background: #1B3A5B; color: #FAFAF8; border-color: #1B3A5B; }
.blt-input.is-filled, .ip-app .is-filled { background: rgba(175,196,221,0.32); border-color: #1B3A5B; }
.ip-filled-note { margin-bottom: 14px; }
.ip-folded { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; border: 1px dashed #AFC4DD; border-radius: 12px; padding: 12px 14px; margin: 8px 0 14px; font-size: 15px; color: #232A31; }
.ip-folded p { margin: 0; flex: 1 1 320px; }
.ip-hours { display: contents; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.ip-chip { font: 600 15px 'Source Sans 3', system-ui, sans-serif; padding: 8px 14px; border-radius: 999px; border: 1px solid #1B3A5B; background: #FAFAF8; color: #1B3A5B; cursor: pointer; min-height: 40px; }
.ip-chip:hover, .ip-chip:focus-visible { background: #AFC4DD; }

/* Fee decision */
.ip-decision { margin-top: 28px; padding: 18px; border-radius: 14px; background: rgba(175,196,221,0.18); }
.ip-decision__now p { margin: 0 0 10px; }
.ip-h4 { font: 600 16px 'Source Sans 3', system-ui, sans-serif; color: #232A31; margin: 18px 0 8px; }
.ip-decision__result { font-size: 15px; color: #232A31; margin: 10px 0; }

/* Send and history */
.ip-send { margin-top: 24px; padding-top: 18px; border-top: 1px solid #E5E5E2; }
.ip-lib .ip-status, .ip-status.blt-input { width: auto; flex: 0 0 auto; min-height: 36px; padding: 4px 8px; font-size: 14px; }
.ip-history { margin-top: 22px; }