/* ===================== START (proposal form) ===================== */

/* core shows .idx-meter/.dot-nav via display rules that beat [hidden]; this page has no indexed sections */
.page-start .idx-meter[hidden], .page-start .dot-nav[hidden] { display: none; }

.start-hero { padding-bottom: clamp(36px, 5vw, 60px); }
.start-hero .h-display { font-size: clamp(42px, 5.8vw, 86px); max-width: 16ch; }
.resume { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(87, 242, 176, 0.35); background: rgba(87, 242, 176, 0.06); font-size: 12.5px; color: var(--muted); }
.resume[hidden] { display: none; }
.resume b { color: var(--text); font-weight: 500; }

.start-main { position: relative; padding-bottom: clamp(56px, 7vw, 90px); }
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(18px, 3vw, 36px); align-items: start; }
.start-aside { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1000px) { .start-grid { grid-template-columns: 1fr; } .start-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .start-aside { grid-template-columns: 1fr; } }

/* ---------- form shell ---------- */
.pf { overflow: hidden; }
.pf .wb-status { color: var(--accent); }
.pf-inner { padding: clamp(20px, 3.4vw, 40px); }
.pf-steps { display: flex; gap: 8px; }
.pf-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 14.5px; font-weight: 500; color: var(--dim); transition: all 0.4s var(--ease); }
.pf-steps .mono { font-size: 11.5px; }
.pf-steps li.is-current { color: var(--text); border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.1); }
.pf-steps li.is-done { color: var(--mint); border-color: rgba(87, 242, 176, 0.35); cursor: pointer; }
.pf-steps li.is-done:hover { background: rgba(87, 242, 176, 0.07); }
.pf-steps li.is-done .mono::after { content: " ✓"; }
.pf-bar { height: 3px; border-radius: 2px; background: var(--line); margin: 14px 0 0; overflow: hidden; }
.pf-bar i { display: block; height: 100%; width: 33.33%; background: var(--grad); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9); transition: width 0.7s var(--ease); }
.pf-summary { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; margin: 14px 0 6px; }
.pf-summary span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 11.5px; color: #b9cbff; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.3); animation: chipin 0.4s var(--ease); }
.pf-summary span.is-budget { color: var(--amber); background: rgba(255, 190, 92, 0.1); border-color: rgba(255, 190, 92, 0.3); }
@keyframes chipin { from { opacity: 0; transform: scale(0.85); } }

.pf-step { border: 0; margin: 0; padding: 0; min-width: 0; }
html.js .pf-step:not(.is-current) { display: none; }
html.js .pf-step.is-entering { animation: stepin 0.55s var(--ease); }
html.js .pf-step.is-entering.from-left { animation-name: stepin-l; }
@keyframes stepin { from { opacity: 0; transform: translateX(28px); } }
@keyframes stepin-l { from { opacity: 0; transform: translateX(-28px); } }
html:not(.js) .pf-step + .pf-step { margin-top: 34px; }
.pf-legend { display: block; width: 100%; padding: 0; margin: 10px 0 20px; font-size: clamp(21px, 2.1vw, 27px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.pf-legend > .mono { display: block; font-size: 12px; font-weight: 500; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 8px; }
.pf-legend em { display: block; font-style: normal; font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 6px; }

/* chips (checkbox) */
.pf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-chip-group { flex-basis: 100%; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin: 6px 0 -2px; }
.pf-chip-group:not(:first-child) { margin-top: 14px; }
.pf-mode { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(5, 10, 28, 0.6); }
.pf-mode button { height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: background 0.3s, color 0.3s; }
.pf-mode button[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.pf-radios[hidden] { display: none; }
.pf-chip { position: relative; cursor: pointer; }
.pf-chip input, .pf-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pf-chip span { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 15.5px; font-weight: 500; color: var(--muted); transition: all 0.3s var(--ease); user-select: none; }
.pf-chip span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--dim); transition: all 0.3s var(--ease); }
.pf-chip:hover span { color: var(--text); border-color: rgba(var(--accent-rgb), 0.6); }
.pf-chip input:checked + span { color: #fff; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); box-shadow: 0 0 24px -8px rgba(var(--accent-rgb), 0.9); }
.pf-chip input:checked + span::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='%23050a1c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--accent); }
.pf-chip input:focus-visible + span, .pf-radio input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* radio cards */
.pf-radios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-radio { position: relative; cursor: pointer; }
.pf-radio span { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); transition: all 0.3s var(--ease); height: 100%; }
.pf-radio b { font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pf-radio em { font-style: normal; font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); }
.pf-radio:hover span { border-color: rgba(var(--accent-rgb), 0.6); }
.pf-radio input:checked + span { border-color: var(--amber); background: rgba(255, 190, 92, 0.08); box-shadow: 0 0 26px -10px rgba(255, 190, 92, 0.9); }
.pf-radio input:checked + span em { color: var(--amber); }
.pf-hint { margin-top: 16px; font-size: 12px; }

/* fields */
.pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.pf-field { display: flex; flex-direction: column; gap: 7px; }
.pf-wide { grid-column: 1 / -1; }
.pf-field label { font-size: 14px; font-weight: 500; color: var(--muted); }
.pf-field label span { color: var(--accent); }
.pf-field input, .pf-field textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(5, 10, 28, 0.6); color: var(--text); font-size: 16px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.pf-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.pf-field input::placeholder, .pf-field textarea::placeholder { color: var(--dim); }
.pf-field input:focus, .pf-field textarea:focus { border-color: rgba(var(--accent-rgb), 0.85); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16); }
.pf-field [aria-invalid="true"] { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255, 111, 134, 0.12); }
.pf-error { font-size: 13.5px; color: var(--rose); margin-top: 10px; }
.pf-field .pf-error { margin-top: 0; }
.pf-error::before { content: "! "; font-family: var(--f-mono); font-weight: 600; }
.pf-error[hidden] { display: none; }
.pf-chips.is-shake { animation: shake 0.45s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pf-privacy { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* nav */
.pf-nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.pf-nav [hidden] { display: none; }
.pf-count { margin-right: auto; font-size: 12px; color: var(--dim); }
.pf-nav [data-pf-back] + .pf-count { margin-left: 4px; }
html:not(.js) [data-pf-next], html:not(.js) [data-pf-back], html:not(.js) .pf-steps, html:not(.js) .pf-bar, html:not(.js) .pf-count { display: none; }
.btn.is-busy { pointer-events: none; opacity: 0.7; }
.pf-send-error { margin-top: 14px; }
.pf-send-error a { color: var(--cyan); text-decoration: underline; }
@media (max-width: 700px) {
  .pf-radios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-fields { grid-template-columns: 1fr; }
  .pf-steps li { justify-content: center; padding: 9px 6px; font-size: 13px; }
  .pf-nav { flex-wrap: wrap; }
  .pf-nav .btn { flex: 1; }
  .pf-count { order: -1; width: 100%; }
  .pf-chip span { height: 42px; padding: 0 14px; font-size: 14.5px; }
}

/* success */
.pf-success { padding: clamp(28px, 5vw, 56px) clamp(22px, 4vw, 48px) clamp(30px, 5vw, 50px); text-align: center; outline: none; }
.pf-success[hidden] { display: none; }
.ok-mark { position: relative; width: 96px; height: 96px; margin: 0 auto 22px; }
.ok-mark svg { position: relative; z-index: 1; width: 100%; height: 100%; }
.ok-mark circle { fill: rgba(87, 242, 176, 0.08); stroke: var(--mint); stroke-width: 3; stroke-dasharray: 214; stroke-dashoffset: 214; animation: okdraw 0.9s var(--ease) forwards; filter: drop-shadow(0 0 10px rgba(87, 242, 176, 0.6)); }
.ok-mark path { fill: none; stroke: var(--mint); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: okdraw 0.6s var(--ease) 0.6s forwards; }
@keyframes okdraw { to { stroke-dashoffset: 0; } }
.ok-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(87, 242, 176, 0.6); animation: sonar 3s var(--ease) infinite; opacity: 0; }
.ok-ring:nth-child(2) { animation-delay: 1.5s; }
.pf-success .h-3 { font-size: clamp(28px, 3.2vw, 40px); margin: 10px 0 10px; }
.ok-text { color: var(--muted); max-width: 52ch; margin: 0 auto; }
.ok-fallback { margin-top: 20px; }
.ok-fallback .btn-row { justify-content: center; margin-top: 10px; }
.ok-fallback .mono { font-size: 12px; }
.ok-next { display: grid; gap: 10px; max-width: 520px; margin: 28px auto 0; text-align: left; }
.ok-next li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); font-size: 15px; color: var(--muted); opacity: 0; transform: translateY(10px); animation: okitem 0.6s var(--ease) forwards; }
.ok-next li:nth-child(1) { animation-delay: 0.9s; } .ok-next li:nth-child(2) { animation-delay: 1.05s; } .ok-next li:nth-child(3) { animation-delay: 1.2s; }
@keyframes okitem { to { opacity: 1; transform: none; } }
.ok-next .mono { font-size: 11.5px; color: var(--mint); padding-top: 3px; }
.ok-while { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin-top: 26px; font-size: 14.5px; color: var(--muted); }

/* ---------- aside ---------- */
.aside-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.promises { display: grid; gap: 14px; margin-top: 6px; }
.promises li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.promises .mono { font-size: 11.5px; color: var(--mint); padding-top: 3px; }
.promises b { font-size: 15.5px; }
.promises p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.direct { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); transition: color 0.3s; }
.direct:last-child { border-bottom: 0; padding-bottom: 0; }
.direct .mono { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.direct b { font-size: 19px; letter-spacing: -0.02em; }
.direct:hover b { color: var(--cyan); }
.office { padding: 6px 0; }
.office b { font-size: 15px; }
.office address { font-style: normal; color: var(--muted); font-size: 14px; margin-top: 2px; }
.aside-split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 14px; }
.aside-split > div { display: flex; flex-direction: column; gap: 8px; }
.ext { font-size: 14.5px; color: var(--muted); transition: color 0.3s; }
.ext:hover { color: var(--text); }

/* ---------- trust + browse ---------- */
.start-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(5, 10, 28, 0.55); padding: 22px 0; }
.start-trust .container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; font-weight: 600; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: -0.02em; color: rgba(243, 245, 252, 0.5); }
.start-trust .mono { font-size: 12px; font-weight: 400; letter-spacing: 0.04em; }
.browse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.browse-card { display: flex; flex-direction: column; gap: 6px; min-height: 190px; }
.browse-card .code { margin-bottom: auto; padding-bottom: 22px; }
.browse-card h3 { margin-bottom: 4px; }
.bc-go { position: absolute; right: 22px; top: 20px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); transform: rotate(-45deg); transition: all 0.4s var(--ease); }
.browse-card:hover .bc-go { transform: rotate(0deg); background: var(--accent); border-color: var(--accent); color: var(--bg); }
@media (max-width: 900px) { .browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .browse-grid { grid-template-columns: 1fr; } .browse-card { min-height: 0; } }

/* ---------- day theme ---------- */
/* the proposal form is real UI, not a mockup: give it the day palette instead of the dark-island one */
html[data-theme="light"] .window.pf {
  color-scheme: light;
  --bg: #f5f7fc; --bg-2: #eaeffa; --bg-3: #dee6f7;
  --surface: rgba(40, 70, 160, 0.04); --surface-2: rgba(40, 70, 160, 0.075);
  --line: rgba(30, 50, 120, 0.12); --line-2: rgba(30, 50, 120, 0.22);
  --text: #0a1130; --muted: #4a5577; --dim: #5a6482;
  --accent: #2d55e0; --accent-rgb: 45, 85, 224;
  --violet: #7356ee; --cyan: #06728d; --mint: #077a53; --amber: #925807; --rose: #bd2c49;
  --grad: linear-gradient(100deg, #3461f0 0%, #7356ee 48%, #0a9cc4 100%);
  color: var(--text);
  background: #fff;
  box-shadow: 0 30px 80px -40px rgba(20, 40, 110, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
html[data-theme="light"] .window.pf .window-bar i { background: rgba(10, 17, 48, 0.12); }
html[data-theme="light"] .window.pf .btn-primary { color: #fff; }
html[data-theme="light"] .window.pf .btn-ghost { background: #fff; }
html[data-theme="light"] .pf-bar i { box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.45); }
html[data-theme="light"] .pf-summary span { color: var(--accent); }
html[data-theme="light"] .pf-summary span.is-budget { color: var(--amber); background: rgba(180, 111, 12, 0.08); border-color: rgba(180, 111, 12, 0.3); }
html[data-theme="light"] .pf-mode { background: var(--bg-2); }
html[data-theme="light"] .pf-mode button[aria-pressed="true"] { color: #fff; }
html[data-theme="light"] .pf-chip span, html[data-theme="light"] .pf-radio span { background: #fff; }
html[data-theme="light"] .pf-chip input:checked + span { color: var(--text); background: rgba(var(--accent-rgb), 0.08); box-shadow: 0 8px 20px -12px rgba(var(--accent-rgb), 0.7); }
html[data-theme="light"] .pf-chip input:checked + span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme="light"] .pf-radio input:checked + span { background: rgba(180, 111, 12, 0.07); box-shadow: 0 8px 20px -12px rgba(180, 111, 12, 0.6); }
html[data-theme="light"] .pf-field input, html[data-theme="light"] .pf-field textarea { background: #fff; }
html[data-theme="light"] .ok-mark circle { fill: rgba(11, 149, 102, 0.08); filter: drop-shadow(0 0 6px rgba(11, 149, 102, 0.35)); }
html[data-theme="light"] .ok-ring { border-color: rgba(11, 149, 102, 0.45); }
html[data-theme="light"] .ok-next li { background: #fff; }
html[data-theme="light"] .resume { border-color: rgba(11, 149, 102, 0.35); background: rgba(11, 149, 102, 0.06); }
html[data-theme="light"] .start-trust { background: rgba(255, 255, 255, 0.65); }
html[data-theme="light"] .start-trust .container { color: rgba(10, 17, 48, 0.6); }

/* result of a no-JavaScript form post (/start/?sent=1 or ?error=…) */
.pf-notice { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 111, 134, 0.45); background: rgba(255, 111, 134, 0.08); font-size: 15px; }
.pf-notice.is-ok { border-color: rgba(87, 242, 176, 0.45); background: rgba(87, 242, 176, 0.08); }
.pf-notice a { color: var(--cyan); text-decoration: underline; }

/* privacy policy link in the reassurance line next to the contact fields */
.pf-privacy a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }