/* Software site: builds on /assets/css/site.css. */

::selection { background: rgba(92, 200, 255, .32); color: #fff; }
input, textarea { caret-color: var(--accent); }

.preview-bar { padding: 8px 20px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 600; text-align: center; }

/* Software and industry rows */
.sw-section { padding: 120px 0; }
.sw-section h2 { max-width: 16ch; margin-bottom: 18px; }
.sw-section .sw-sub { max-width: 58ch; margin: 0; color: var(--muted-dark-bg); font-size: var(--fs-lede); line-height: 1.55; }
.sw-paper { background: var(--paper); color: var(--text-light-bg); }
.sw-paper .sw-sub { color: var(--muted-light-bg); }

.sw-rows { list-style: none; margin: 52px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sw-paper .sw-rows { border-top-color: var(--line-light); }
.sw-rows > li { border-bottom: 1px solid var(--line); }
.sw-paper .sw-rows > li { border-bottom-color: var(--line-light); }
.sw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 28px; align-items: baseline; padding: 28px 0; }
.sw-row strong { font-size: clamp(25px, 2.8vw, 38px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; color: #fff; transition: color .18s ease; }
.sw-paper .sw-row strong { color: var(--ink); }
.sw-row > span { color: var(--muted-dark-bg); font-size: 19px; line-height: 1.45; }
.sw-paper .sw-row > span { color: var(--muted-light-bg); }
.sw-arrow { justify-self: end; width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.sw-paper .sw-arrow { stroke: var(--ink); }
.sw-row-link:hover strong { color: var(--accent); }
.sw-paper .sw-row-link:hover strong { color: #16708f; }
.sw-row-link:hover .sw-arrow { transform: translateX(6px); }
.sw-rows-plain .sw-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 24px 0; }
.sw-rows-plain .sw-row strong { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; }

.sw-answer { max-width: 64ch; margin: 0 0 34px; color: var(--text-dark-bg); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; }
.page-hero h1 { max-width: 18ch; }

.sw-simple .section-heading { padding-bottom: 0; border-bottom: 0; }

/* Project blueprint */
.bp {
  --bp-ground: #0c1418;
  --bp-line: rgba(92, 200, 255, .62);
  --bp-grid: rgba(92, 200, 255, .075);
  --bp-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  padding: 120px 0 128px;
  scroll-margin-top: var(--nav-h);
}
.bp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bp-sprite symbol, .bp-ico, .bp-node-ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.bp-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; margin-bottom: 52px; }
.bp-head h2 { max-width: 15ch; margin: 0; }
.bp-intro p { margin: 0; color: var(--muted-dark-bg); font-size: var(--fs-lede); line-height: 1.55; }
.bp-intro .bp-direct { margin-top: 14px; font-size: 18px; }
.bp-direct a { color: #fff; font-weight: 700; border-bottom: 2px solid var(--accent); }

.bp-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: clip; border: 1px solid #3a3a35; border-radius: 18px; background: var(--deep); }
.bp-main { min-width: 0; padding: 34px 38px 38px; }

/* Step ruler */
.bp-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0 0 32px; padding: 0; }
.bp-progress[hidden] { display: none; }
.bp .bp-progress button { display: block; justify-self: stretch; width: 100%; min-height: 44px; margin: 0; padding: 0 0 10px; border: 0; border-bottom: 2px solid #3a3a35; border-radius: 0; background: none; color: var(--muted-dark-bg); font-size: 15px; font-weight: 600; text-align: left; transition: color .2s ease, border-color .2s ease; }
.bp .bp-progress button:hover:not(:disabled) { color: #fff; }
.bp .bp-progress button:disabled { color: #7d7c75; cursor: default; }
.bp .bp-progress button[aria-current="step"] { border-bottom-color: var(--accent); color: #fff; }
.bp-progress .is-done button { border-bottom-color: rgba(92, 200, 255, .5); color: #dcdbd4; }

/* Steps */
.bp fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bp-step + .bp-step { margin-top: 44px; }
.bp.is-live .bp-step { display: none; margin-top: 0; }
.bp.is-live .bp-step.is-current { display: block; animation: bp-step .45s var(--bp-ease) both; }
@keyframes bp-step { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.bp legend { display: block; width: 100%; margin: 0 0 8px; padding: 0; color: #fff; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.15; letter-spacing: -.025em; font-weight: 700; outline: 0; }
.bp-hint { margin: 0 0 20px; color: var(--muted-dark-bg); font-size: 17px; }
legend + .bp-pills, legend + .bp-grid2 { margin-top: 20px; }

/* Choice tiles */
.bp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bp .bp-tile, .bp .bp-pill { position: relative; display: block; margin: 0; font-weight: 500; cursor: pointer; }
.bp-tile input, .bp-pill input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; }
.bp-tile-face { display: flex; align-items: center; gap: 12px; min-height: 76px; height: 100%; padding: 12px 14px; border: 1.5px solid #41413b; border-radius: 10px; color: #dcdbd4; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.bp-tiles-tight .bp-tile-face { min-height: 58px; padding: 8px 12px; }
.bp-tile-text { display: grid; gap: 1px; min-width: 0; }
.bp-tile-text strong { color: #fff; font-size: 17px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
.bp-tile-text small { color: var(--muted-dark-bg); font-size: 14.5px; line-height: 1.3; }
.bp-ico { flex: none; width: 24px; height: 24px; }
.bp-tile:hover .bp-tile-face { border-color: #76756e; }
.bp-tile input:checked + .bp-tile-face { border-color: var(--accent); background: rgba(92, 200, 255, .11); color: var(--accent); }
.bp-tile input:focus-visible + .bp-tile-face, .bp-pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }

.bp-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.bp-pill span { display: inline-flex; align-items: center; min-height: 52px; padding: 0 18px; border: 1.5px solid #41413b; border-radius: 10px; color: #f1f0ea; font-size: 17px; font-weight: 600; transition: border-color .15s ease, background-color .15s ease; }
.bp-pill:hover span { border-color: #76756e; }
.bp-pill input:checked + span { border-color: var(--accent); background: rgba(92, 200, 255, .11); color: #fff; }

/* Text fields */
.bp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bp-field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.bp-tiles + .bp-field { margin-top: 18px; }
.bp .bp-field label { font-size: 16px; font-weight: 600; }
.bp .bp-field input, .bp .bp-field textarea { min-height: 54px; padding: 13px 15px; font-size: 18px; }
.bp .bp-field textarea { min-height: 92px; }
.bp .bp-field [aria-invalid="true"] { border-color: #ff9d78; }
.bp-when { margin-top: 22px; }
.bp-when-label { margin: 0 0 10px; color: #f1f0ea; font-size: 16px; font-weight: 600; }
.bp-when .bp-pill span { min-height: 48px; padding: 0 14px; font-size: 16px; }
.bp-err { margin: 10px 0 0; color: #ffc0a8; font-size: 16px; font-weight: 600; }
.bp-field .bp-err { margin-top: 0; font-size: 15px; }
.bp-err[hidden] { display: none; }
.bp form > .form-message { margin-bottom: 22px; }

/* Actions */
.bp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.bp .bp-actions button { margin: 0; min-height: 58px; white-space: nowrap; }
.bp .bp-actions button[hidden] { display: none; }
.bp .bp-back { border-color: #55554f; background: transparent; color: #fff; }
.bp .bp-back:hover { border-color: #fff; background: transparent; }
.bp .bp-next, .bp .bp-send { margin-left: auto !important; }
.bp:not(.is-live) .bp-send { margin-left: 0 !important; }
.sw-ar { flex: none; width: 1em; height: 1em; margin-left: 8px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.btn .sw-ar { margin-left: 0; }
.bp .bp-next:hover .sw-ar, .bp .bp-send:hover .sw-ar, .btn:hover .sw-ar { transform: translateX(4px); }
.bp .bp-send:disabled { opacity: .7; cursor: progress; }

/* Drawing sheet */
.bp-side { position: relative; min-width: 0; border-left: 1px solid #3a3a35; background: var(--bp-ground); }
.bp-side[hidden] { display: none; }
.bp-mini { display: none; }
.bp-sheet {
  position: relative;
  display: grid; grid-template-rows: 1fr auto;
  height: 100%;
  padding: 20px 20px 0;
  background-image:
    linear-gradient(to right, var(--bp-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 19px 19px;
}
.bp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bp-svg text { font-family: inherit; }

.bp-spine { fill: var(--bp-line); transform: scaleY(0); transition: transform .6s var(--bp-ease); }
.bp-core rect { fill: rgba(92, 200, 255, .12); stroke: var(--accent); stroke-width: 1.75; }
.bp-core-name { fill: #fff; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.bp-core-sub { fill: #bfe9ff; font-size: 15px; font-weight: 500; }

.bp-empty { transition: opacity .25s ease; }
.bp-empty.is-hidden { opacity: 0; }
.bp-empty rect { fill: none; stroke: rgba(92, 200, 255, .22); stroke-width: 1.25; stroke-dasharray: 5 7; }
.bp-empty text { fill: #a9c4d0; font-size: 18px; font-weight: 500; }

.bp-node { transition: transform .55s var(--bp-ease), opacity .2s ease; }
.bp-box { fill: rgba(12, 20, 24, .9); stroke: var(--bp-line); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp-node-type .bp-box { stroke: var(--accent); stroke-width: 1.75; }
.bp-link { fill: none; stroke: var(--bp-line); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease-out; }
.bp-dot { fill: var(--accent); opacity: 0; transition: opacity .2s ease; }
.bp-node-ico { color: var(--accent); opacity: 0; transition: opacity .3s ease .3s; }
.bp-node-label { fill: #fff; font-size: 17px; font-weight: 650; letter-spacing: -.01em; opacity: 0; transition: opacity .3s ease .25s; }
.bp-node-note { fill: #b6cdd8; font-size: 13.5px; opacity: 0; transition: opacity .3s ease .3s; }
.bp-node.is-in .bp-link { stroke-dashoffset: 0; }
.bp-node.is-in .bp-box { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--bp-ease) .15s; }
.bp-node.is-in .bp-dot, .bp-node.is-in .bp-node-ico, .bp-node.is-in .bp-node-label, .bp-node.is-in .bp-node-note { opacity: 1; }
.bp-node.is-out { opacity: 0; }

/* Phone drawing: fewer columns, so the type stays readable */
.bp-svg.is-compact .bp-core-name { font-size: 18px; }
.bp-svg.is-compact .bp-core-sub { font-size: 13.5px; }
.bp-svg.is-compact .bp-node-label { font-size: 15.5px; }
.bp-svg.is-compact .bp-node-note { font-size: 12.5px; }
.bp-svg.is-compact .bp-empty text { font-size: 15.5px; }

/* Title block, as on a real drawing */
.bp-title { display: grid; grid-template-columns: 1.5fr 1.5fr .6fr 1fr; margin: 8px -20px 0; border-top: 1px solid rgba(92, 200, 255, .34); background: var(--bp-ground); }
.bp-title div { min-width: 0; padding: 12px 14px 14px; border-left: 1px solid rgba(92, 200, 255, .2); }
.bp-title div:first-child { border-left: 0; padding-left: 20px; }
.bp-title dt { color: #a9c4d0; font-size: 13px; font-weight: 500; }
.bp-title dd { margin: 2px 0 0; color: #fff; font-size: 15.500px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; overflow-wrap: anywhere; }

/* Phones jump from the drawing to the details fields */
.bp-sheet-go { display: none; }

/* Confirmation */
.bp-main:has(.bp-done) { display: grid; align-items: center; }
.bp-done { padding: 40px 0; }
.bp-done h2 { margin-bottom: 14px; color: #fff; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.03em; font-weight: 800; }
.bp-done p { max-width: 42ch; margin: 0 0 14px; color: var(--text-dark-bg); }
.bp.bp-solo .bp-panel { grid-template-columns: minmax(0, 1fr); }

@media (prefers-reduced-motion: reduce) {
  .bp.is-live .bp-step.is-current { animation: none; }
  .bp-spine, .bp-node, .bp-link, .bp-box, .bp-dot, .bp-node-ico, .bp-node-label, .bp-node-note, .bp-node.is-in .bp-box { transition: none !important; }
}

/* Tablet and phone: the drawing folds into a strip above the form */
@media (max-width: 960px) {
  .sw-section { padding: 88px 0; }
  .sw-row { grid-template-columns: minmax(0, 1fr) 28px; gap: 6px 16px; padding: 22px 0; }
  .sw-row > span:not(.sw-arrow) { grid-column: 1; grid-row: 2; }
  .sw-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .sw-rows-plain .sw-row { grid-template-columns: minmax(0, 1fr); }

  .bp { padding: 84px 0 92px; }
  .bp-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .bp-panel { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .bp-main { order: 3; padding: 26px 22px 28px; }
  .bp-side { display: contents; }
  .bp-side[hidden] { display: none; }
  .bp-mini {
    order: 1; position: sticky; top: var(--nav-h); z-index: 5;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
    min-height: 66px; padding: 10px 14px 10px 18px;
    border-bottom: 1px solid #3a3a35; border-radius: 17px 17px 0 0; background: var(--bp-ground);
  }
  .bp-mini-count { grid-column: 1; grid-row: 1; color: #fff; font-size: 16px; font-weight: 650; }
  .bp-mini-line { grid-column: 1; grid-row: 1; justify-self: end; display: flex; flex-wrap: wrap; gap: 4px; align-self: center; max-width: 45%; }
  .bp-mini-last:empty { display: none; }
  .bp-mini-last { grid-column: 1; grid-row: 2; min-height: 22px; color: var(--accent); font-size: 14.5px; font-weight: 600; }
  .bp-mini-row { position: relative; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; animation: bp-row .35s var(--bp-ease) both; }
  .bp-mini-row .bp-ico { width: 16px; height: 16px; }
  .bp-mini-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform-origin: left; animation: bp-rule .5s var(--bp-ease) .1s both; }
  @keyframes bp-row { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes bp-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .bp-mini-line i { width: 8px; height: 8px; border-radius: 2px; background: rgba(92, 200, 255, .5); animation: bp-pop .3s var(--bp-ease) both; }
  .bp-mini-line i.is-type { background: var(--accent); }
  @keyframes bp-pop { from { transform: scale(0); } to { transform: none; } }
  .bp input, .bp textarea { scroll-margin-top: calc(var(--nav-h) + 90px); }
  .bp.is-reviewing .bp-sheet-go { grid-column: 2; grid-row: 1 / span 2; justify-self: end; display: inline-flex; align-items: center; width: auto; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 8px; background: var(--accent); color: var(--ink); font-size: 16px; }
  .bp.is-reviewing .bp-mini-toggle, .bp.is-reviewing .bp-mini-line, .bp.is-reviewing .bp-mini-last { display: none; }
  .bp[data-bp-sent] .bp-main { order: 0; }
  .bp[data-bp-sent] .bp-mini { display: none; }
  .bp[data-bp-sent] .bp-sheet { border-top: 1px solid #3a3a35; border-bottom: 0; }
  .bp .bp-mini-toggle { grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: auto; min-height: 44px; margin: 0; padding: 0 16px; border: 1.5px solid rgba(92, 200, 255, .6); border-radius: 8px; background: transparent; color: #fff; font-size: 16px; }
  .bp-sheet { order: 2; height: auto; grid-template-rows: auto auto; display: none; padding: 14px 12px 0; background-color: var(--bp-ground); border-bottom: 1px solid #3a3a35; }
  .bp-sheet.is-open { display: grid; }
  .bp-title { margin: 6px -12px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-title div:nth-child(odd) { border-left: 0; padding-left: 16px; }
  .bp-title div:nth-child(n+3) { border-top: 1px solid rgba(92, 200, 255, .2); }
}

@media (max-width: 560px) {
  .bp-main { padding: 22px 16px 24px; }
  .bp-tiles, .bp-grid2 { grid-template-columns: minmax(0, 1fr); }
  .bp-tile-face { min-height: 64px; }
  .bp-tiles-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-tiles-tight .bp-tile-face { min-height: 62px; }
  .bp-tiles-tight .bp-tile-text strong { font-size: 15.500px; }
  .bp-tiles-tight .bp-ico { width: 20px; height: 20px; }
  .bp-pill span { min-height: 50px; padding: 0 14px; }
  .bp .bp-actions { flex-wrap: nowrap; }
  .bp .bp-actions button { width: auto; padding: 0 16px; font-size: 17.5px; }
  .bp .bp-next, .bp .bp-send { flex: 1 1 0; min-width: 0; padding: 0 10px; margin-left: 0 !important; }
  .bp:not(.is-live) .bp-send { width: 100%; }
}

/* Compact link lists and notes */
.sw-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 28px; margin: 36px 0 0; padding: 0; list-style: none; }
.sw-links a { display: flex; align-items: center; min-height: 44px; color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -.01em; border-bottom: 1px solid var(--line); transition: color .15s ease; }
.sw-links a:hover { color: var(--accent); }
.sw-paper .sw-links a { color: var(--ink); border-bottom-color: var(--line-light); }
.sw-paper .sw-links a:hover { color: #16708f; }
.sw-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; color: #fff; font-size: 19px; font-weight: 700; border-bottom: 2px solid var(--accent); }
.sw-more .sw-ar { margin: 0; }
.sw-paper .sw-more { color: var(--ink); border-bottom-color: var(--ink); }
.sw-group-title { margin: 56px 0 0; color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sw-paper .sw-group-title { color: var(--ink); }
.sw-group-title + .sw-rows, .sw-group-title + .sw-links { margin-top: 16px; }
.sw-local { max-width: 64ch; margin: 0 0 30px; color: var(--muted-dark-bg); font-size: 19px; line-height: 1.55; }
.footer-inner.sw-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 960px) {
  .sw-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner.sw-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sw-links { gap: 2px 18px; }
  .sw-links a { font-size: 17px; line-height: 1.25; }
  .crumbs a:first-child, .crumbs a:first-child + span { display: none; }
}

/* Industry hero with a sample mockup */
.sw-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; align-items: center; }
.sw-hero-mock { padding: 64px 0 76px; }
.sw-hero-mock h1 { max-width: 15ch; font-size: clamp(38px, 4.1vw, 60px); }
.sw-hero-mock .sw-answer { font-size: clamp(18px, 1.4vw, 20px); }
.sw-mock { margin: 0; min-width: 0; }
.sw-mock img { display: block; width: 100%; height: auto; }
.sw-mock figcaption { margin-top: 12px; color: var(--muted-dark-bg); font-size: 15px; }
@media (max-width: 1000px) {
  .sw-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sw-hero-mock { padding: 48px 0 60px; }
}

.ad-mode .footer-inner.sw-footer { grid-template-columns: 1.4fr 1fr; }