/* DM Sans and Manrope (SIL Open Font License), self-hosted so no visitor data goes to Google. */
@font-face {
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/dmsans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/dmsans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.hero>*,.app-shell>*,.result-layout>* {
  min-width:0;
}

.scene {
  overflow:hidden;
}

.eyebrow {
  flex-wrap:wrap;
}

@media(max-width:400px) {
  .computer {
    width:245px;
  }
  .orbit {
    width:260px;
    height:260px;
  }
  .scene .float {
    padding:9px;
    gap:6px;
  }
  .scene .float strong {
    font-size:10px;
  }
  .scene .float span {
    font-size:9px;
  }
  .scene .float .symbol {
    font-size:15px;
  }
  .choices {
    grid-template-columns:1fr;
  }
  .result-top {
    flex-wrap:wrap;
  }
  .monitor-choices {
    grid-template-columns:1fr!important;
  }
  .hero h1 {
    font-size:39px;
  }
  .trust {
    gap:10px;
  }
}

:root {
  --bg:#f8f8f4;
  --ink:#25263a;
  --muted:#707184;
  --purple:#5945bd;
  --pale:#eeebfa;
  --line:#e3e3e9;
  --green:#38664f;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.6;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #8d79e4;
  outline-offset:4px;
}

a {
  color:inherit;
}

header {
  max-width:1240px;
  margin:auto;
  padding:25px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-family:Manrope,sans-serif;
  font-size:24px;
  font-weight:800;
  text-decoration:none;
  letter-spacing:-1.2px;
  white-space:nowrap;
}

.brand-dot {
  color:var(--purple);
  margin-left:-9px;
}

.brand-icon {
  display:flex;
  background:var(--purple);
  width:31px;
  height:31px;
  border-radius:9px;
}

.brand-icon svg {
  width:100%;
  height:100%;
}

.brand.small {
  font-size:19px;
}

nav {
  display:flex;
  gap:26px;
  align-items:center;
}

nav button {
  background:none;
  border:0;
  color:var(--muted);
  font-size:13px;
}

.prototype,.tag {
  font-size:11px;
  letter-spacing:.4px;
  background:#eeedf4;
  padding:5px 10px;
  border-radius:30px;
}

.prototype {
  border:1px solid #dedce8;
  color:#6b627f;
}

main {
  min-height:70vh;
}

.landing {
  max-width:1180px;
  margin:0 auto;
  padding:66px 30px 40px;
}

.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  align-items:center;
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:11px;
  font-weight:700;
  color:var(--purple);
  display:flex;
  align-items:center;
  gap:9px;
}

.eyebrow:before {
  content:'';
  width:7px;
  height:7px;
  background:#9f90d8;
  border-radius:50%;
}

h1,h2,h3 {
  font-family:Manrope,sans-serif;
  line-height:1.18;
  letter-spacing:-1.6px;
}

h1 {
  font-size:58px;
  font-weight:800;
  margin:20px 0 22px;
}

h1 em {
  font-style:normal;
  color:var(--purple);
}

.hero p {
  color:var(--muted);
  font-size:17px;
  max-width:450px;
}

.actions {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:28px;
  flex-wrap:wrap;
}

.primary,.secondary,.text-button {
  border-radius:9px;
  padding:13px 20px;
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  gap:20px;
  justify-content:center;
  align-items:center;
  text-decoration:none;
}

.primary {
  background:var(--purple);
  border:1px solid var(--purple);
  color:white;
  box-shadow:0 4px 10px #5945bd12;
}

.primary:hover {
  background:#47349e;
}

.secondary {
  background:white;
  border:1px solid var(--line);
  color:var(--ink);
}

.secondary:hover {
  border-color:#a69acb;
}

.text-button {
  background:transparent;
  border:0;
  color:var(--muted);
}

.tiny {
  font-size:12px;
  color:var(--muted);
}

.hero .tiny {
  font-size:12px;
  margin-top:14px;
}

.scene {
  position:relative;
  height:390px;
  background:radial-gradient(ellipse at center,#e4ddf8,#f0eef7 60%,transparent 72%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.computer {
  position:relative;
  width:325px;
  transform:rotate(-5deg);
  margin-top:20px;
}

.screen {
  height:205px;
  background:#292832;
  border-radius:15px 15px 5px 5px;
  padding:11px;
  box-shadow:15px 25px 35px #3e315124;
}

.screen-inner {
  height:100%;
  border-radius:6px;
  background:linear-gradient(135deg,#c8bbea,#e5dff7 48%,#f7efda);
  padding:23px;
  position:relative;
  overflow:hidden;
}

.screen-inner:after {
  content:'';
  position:absolute;
  border:35px solid #fff5;
  width:160px;
  height:160px;
  right:-50px;
  bottom:-100px;
  border-radius:50%;
}

.screen-inner .mini-label {
  font-size:10px;
  color:#625280;
}

.screen-inner strong {
  font-size:23px;
  line-height:1.2;
  display:block;
  max-width:160px;
  margin-top:7px;
}

.mini-bars {
  display:flex;
  gap:7px;
  margin-top:22px;
}

.mini-bars i {
  display:block;
  width:45px;
  height:6px;
  background:#fff8;
  border-radius:5px;
}

.mini-bars i:first-child {
  background:var(--purple);
}

.base {
  height:12px;
  background:linear-gradient(#d1cfd9,#a9a6b6);
  margin:0 -22px;
  border-radius:2px 2px 50% 50%;
}

.float {
  position:absolute;
  background:#fffffff5;
  border:1px solid #eee9f6;
  border-radius:12px;
  padding:12px 15px;
  box-shadow:0 9px 25px #332c5610;
  display:flex;
  gap:12px;
  align-items:center;
  z-index:1;
}

.float span {
  display:block;
  font-size:10px;
  color:var(--muted);
}

.float strong {
  font-size:12px;
}

.float .symbol {
  background:#ece9f8;
  color:var(--purple);
  border-radius:9px;
  font-size:20px;
  padding:5px 10px;
}

.float.a {
  left:0;
  top:27px;
}

.float.b {
  right:0;
  bottom:42px;
}

.float.b .symbol {
  background:#e7f0e9;
  color:var(--green);
}

.orbit {
  position:absolute;
  width:340px;
  height:340px;
  border:1px dashed #cfc6e7;
  border-radius:50%;
}

.trust {
  display:flex;
  gap:27px;
  margin-top:34px;
  font-size:12px;
  color:#66677a;
}

.trust span:before {
  content:'✓';
  color:var(--green);
  margin-right:8px;
}

.journey {
  border-top:1px solid var(--line);
  margin-top:54px;
  padding-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.journey article {
  display:flex;
  gap:16px;
}

.number {
  font:600 13px Manrope;
  color:#8d83ac;
  padding-top:4px;
}

.journey h3 {
  font-size:15px;
  letter-spacing:-.3px;
  margin:0 0 6px;
}

.journey p {
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.journey-label {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.7px;
  color:#9992aa;
  margin-top:32px;
}

.app-shell {
  max-width:1150px;
  margin:44px auto 60px;
  display:grid;
  grid-template-columns:240px 1fr;
  gap:64px;
  padding:0 30px;
}

.sidebar {
  padding-top:12px;
}

.sidebar h3 {
  font-size:18px;
  letter-spacing:-.5px;
  margin-top:0;
}

.sidebar p {
  color:var(--muted);
  font-size:13px;
}

.steps {
  padding:18px 0;
  display:grid;
  gap:20px;
}

.step {
  display:flex;
  align-items:center;
  gap:12px;
  color:#9694a2;
  font-size:13px;
}

.step b {
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:10px;
}

.step.active {
  color:var(--purple);
  font-weight:700;
}

.step.active b {
  background:var(--purple);
  border-color:var(--purple);
  color:white;
}

.step.done b {
  background:#e5ede6;
  border-color:#e5ede6;
  color:var(--green);
}

.aside-note {
  padding:19px;
  border-radius:12px;
  background:#efedf6;
  font-size:12px;
  color:#766a8d;
  margin-top:20px;
}

.aside-note strong {
  display:block;
  color:#594c79;
  margin-bottom:6px;
}

.content h1 {
  font-size:35px;
  margin:14px 0;
}

.intro {
  color:var(--muted);
  margin:0 0 28px;
  max-width:590px;
}

.section-label {
  display:block;
  font-weight:600;
  font-size:13px;
  margin:24px 0 10px;
}

.choices {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px;
}

.choice {
  background:white;
  border:1px solid var(--line);
  padding:17px;
  text-align:left;
  border-radius:11px;
  color:var(--ink);
  display:flex;
  gap:13px;
  align-items:center;
  position:relative;
  min-height:76px;
}

.choice:hover {
  border-color:#a899d7;
}

.choice.selected {
  border-color:var(--purple);
  background:#f2effc;
  box-shadow:0 0 0 1px var(--purple);
}

.choice .icon {
  background:#f5f4f8;
  border-radius:8px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:#74648f;
  font-size:19px;
  flex-shrink:0;
}

.choice.selected .icon {
  background:#e6dff9;
  color:var(--purple);
}

.choice strong {
  display:block;
  font-size:13px;
  font-weight:600;
}

.choice small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
  line-height:1.45;
}

.choice .check {
  margin-left:auto;
  color:#b5b1c0;
  font-size:16px;
}

.choice.selected .check {
  color:var(--purple);
}

.row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

label {
  display:block;
  font-size:13px;
  font-weight:600;
  margin:18px 0 6px;
}

input,select,textarea {
  width:100%;
  padding:12px 14px;
  border:1px solid #dcdbe5;
  background:white;
  border-radius:8px;
  color:var(--ink);
}

textarea {
  resize:vertical;
  min-height:92px;
}

.pills {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.pill {
  border:1px solid var(--line);
  background:white;
  color:#626174;
  border-radius:30px;
  padding:8px 15px;
  font-size:12px;
}

.pill.selected {
  background:var(--pale);
  border-color:var(--purple);
  color:var(--purple);
}

.bottom-actions {
  display:flex;
  justify-content:space-between;
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.notice {
  padding:14px 17px;
  border:1px solid #e2dbed;
  background:#f1eef7;
  color:#70637f;
  border-radius:10px;
  font-size:12px;
  margin:20px 0;
}

.notice.warning {
  background:#fff5e8;
  border-color:#ecdcc5;
  color:#8c693f;
}

.error {
  color:#a03d4c;
  font-size:13px;
  min-height:22px;
}

.progress-track {
  height:4px;
  border-radius:3px;
  background:#e7e2f0;
  margin-bottom:25px;
}

.progress-track span {
  height:100%;
  display:block;
  background:var(--purple);
  border-radius:3px;
}

.result {
  max-width:1120px;
  margin:45px auto 60px;
  padding:0 30px;
}

.result-top {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
}

.result h1 {
  font-size:40px;
  margin:14px 0;
}

.result-layout {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:25px;
  margin-top:24px;
}

.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:15px;
  padding:27px;
  margin-bottom:20px;
}

.panel h2 {
  font-size:22px;
  letter-spacing:-.7px;
  margin:10px 0 15px;
}

.panel h3 {
  font-size:16px;
  letter-spacing:-.3px;
}

.panel p {
  font-size:13px;
  color:var(--muted);
}

.spec-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:23px 0;
}

.spec-grid small {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}

.spec-grid strong {
  display:block;
  font-size:19px;
  letter-spacing:-.5px;
  margin-top:6px;
}

.reasons {
  display:grid;
  gap:12px;
  list-style:none;
  padding:0;
  font-size:13px;
}

.reasons li {
  display:flex;
  gap:10px;
}

.reasons li:before {
  content:'✓';
  color:var(--green);
}

.upgrade {
  background:#eeebf9;
  border:1px solid #ded7f1;
  border-radius:15px;
  padding:25px;
}

.upgrade h2 {
  font-size:23px;
  letter-spacing:-.7px;
  margin:14px 0;
}

.upgrade p,.upgrade li {
  font-size:13px;
  color:#706786;
}

.upgrade ul {
  padding-left:18px;
  line-height:2;
}

.price {
  font-size:42px;
  font-family:Manrope;
  font-weight:800;
}

.price small {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:0;
}

.full {
  width:100%;
}

.monitor-choices {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.monitor-choice {
  border:1px solid var(--line);
  background:white;
  text-align:left;
  border-radius:10px;
  padding:14px;
  color:var(--ink);
}

.monitor-choice.selected {
  border-color:var(--purple);
  background:#f2effb;
}

.monitor-icon {
  width:53px;
  height:32px;
  border:3px solid #a299b7;
  border-radius:4px;
  margin:12px 0 18px;
  position:relative;
  background:#f0ecfa;
}

.monitor-icon:after {
  content:'';
  position:absolute;
  width:24px;
  height:7px;
  border-bottom:3px solid #a299b7;
  border-left:3px solid #a299b7;
  bottom:-9px;
  left:12px;
}

.monitor-choice strong {
  display:block;
  font-size:13px;
}

.monitor-choice small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
}

.badge {
  display:inline-block;
  font-size:10px;
  background:#e7e1f6;
  color:var(--purple);
  padding:3px 7px;
  border-radius:5px;
}

.guide-block {
  margin:22px 0;
  border-bottom:1px solid var(--line);
  padding-bottom:17px;
}

.guide-block h3 {
  font-size:16px;
}

.guide-block p {
  font-size:13px;
  color:var(--muted);
}

dialog {
  width:min(640px,calc(100% - 28px));
  max-height:90vh;
  border:1px solid var(--line);
  border-radius:18px;
  padding:35px;
  background:var(--bg);
  color:var(--ink);
}

dialog::backdrop {
  background:#22203770;
  backdrop-filter:blur(5px);
}

dialog h2 {
  font-size:28px;
  padding-right:18px;
}

dialog p,dialog li {
  font-size:14px;
  color:var(--muted);
}

.close {
  position:absolute;
  right:15px;
  top:12px;
  border:0;
  background:none;
  font-size:27px;
  color:var(--muted);
}

footer {
  max-width:1160px;
  margin:auto;
  padding:25px 20px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  color:#93909e;
}

button:disabled {
  cursor:not-allowed;
  opacity:.5;
}

h1:focus {
  outline:none;
}

@media(max-width:900px) {
  .hero {
    gap:20px;
  }
  h1 {
    font-size:46px;
  }
  .scene {
    transform:scale(.85);
  }
  .app-shell {
    grid-template-columns:180px 1fr;
    gap:28px;
  }
  .result-layout {
    grid-template-columns:1fr 270px;
  }
  .monitor-choices {
    grid-template-columns:1fr;
  }
  .monitor-choice {
    display:block;
  }
  .monitor-icon {
    display:none;
  }
  .trust {
    gap:13px;
  }
  .journey {
    gap:20px;
  }
}

@media(max-width:680px) {
  header {
    padding:18px 20px;
  }
  .brand {
    font-size:19px;
  }
  nav {
    gap:10px;
  }
  nav button {
    display:none;
  }
  .prototype {
    font-size:9px;
  }
  .landing {
    padding:36px 22px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:0;
  }
  h1 {
    font-size:43px;
  }
  .hero p {
    font-size:16px;
  }
  .scene {
    height:310px;
    transform:scale(.9);
    margin:15px -10px 0;
  }
  .float.a {
    left:0;
  }
  .float.b {
    right:0;
  }
  .trust {
    font-size:11px;
    flex-wrap:wrap;
    margin-top:22px;
  }
  .journey {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:20px;
  }
  .app-shell {
    display:block;
    margin-top:24px;
    padding:0 20px;
  }
  .sidebar {
    display:none;
  }
  .content h1 {
    font-size:29px;
  }
  .choices {
    gap:9px;
  }
  .choice {
    padding:13px 10px;
    gap:8px;
    min-height:84px;
  }
  .choice .icon {
    width:27px;
    height:27px;
    font-size:15px;
  }
  .choice .check {
    display:none;
  }
  .choice strong {
    font-size:12px;
  }
  .choice small {
    font-size:10px;
  }
  .row {
    grid-template-columns:1fr;
    gap:0;
  }
  .result {
    padding:0 20px;
    margin-top:28px;
  }
  .result-top {
    align-items:flex-start;
  }
  .result-top .secondary {
    font-size:11px;
    padding:8px 10px;
    white-space:nowrap;
  }
  .result h1 {
    font-size:31px;
  }
  .result-layout {
    grid-template-columns:1fr;
  }
  .panel {
    padding:21px;
  }
  .monitor-choices {
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }
  .monitor-choice {
    padding:10px;
  }
  .monitor-choice strong {
    font-size:11px;
  }
  .spec-grid strong {
    font-size:16px;
  }
  footer {
    flex-wrap:wrap;
    padding:25px 22px;
  }
  footer span:last-child {
    width:100%;
  }
  .primary,.secondary {
    padding:12px 15px;
  }
  dialog {
    padding:26px;
  }
  .progress-track {
    margin-bottom:20px;
  }
}

@media print {
  header,footer,.bottom-actions,.upgrade,.actions,.close,button {
    display:none!important;
  }
  body {
    background:white;
  }
  dialog[open] {
    position:static;
    max-height:none;
    width:100%;
    border:0;
  }
  body:has(dialog[open]) main {
    display:none;
  }
}

.hero>*,.app-shell>*,.result-layout>* {
  min-width:0;
}

.scene {
  overflow:hidden;
}

.eyebrow {
  flex-wrap:wrap;
}

@media(max-width:400px) {
  .computer {
    width:245px;
  }
  .orbit {
    width:260px;
    height:260px;
  }
  .scene .float {
    padding:9px;
    gap:6px;
  }
  .scene .float strong {
    font-size:10px;
  }
  .scene .float span {
    font-size:9px;
  }
  .scene .float .symbol {
    font-size:15px;
  }
  .choices {
    grid-template-columns:1fr;
  }
  .result-top {
    flex-wrap:wrap;
  }
  .monitor-choices {
    grid-template-columns:1fr!important;
  }
  .hero h1 {
    font-size:39px;
  }
  .trust {
    gap:10px;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.2px;
  }
  header {
    padding:16px 12px;
  }
}

/* A useful stopping point, with optional depth. */
.step {
  border:0;
  background:none;
  padding:0;
  text-align:left;
}

.step:hover {
  color:var(--purple);
}

.pace-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.pace-bar .text-button {
  font-size:12px;
  padding:7px 0;
}

.bottom-actions {
  gap:12px;
  flex-wrap:wrap;
}

.exit-link {
  display:block;
  margin:10px auto 0;
  font-size:12px;
}

.overview {
  margin-top:12px;
  max-width:860px;
}

.overview h2 {
  font-size:25px;
}

.overview .spec-grid {
  max-width:640px;
}

.decision-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.pro-invitation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:860px;
  padding:22px 26px;
  background:var(--pale);
  border:1px solid #ded7f1;
  border-radius:15px;
  margin:22px 0;
}

.pro-invitation h3 {
  font-size:18px;
  letter-spacing:-.5px;
  margin:10px 0;
}

.pro-invitation p {
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.pro-invitation button {
  flex-shrink:0;
}

.result>details,.result>.panel,.result>.budget-box,.result>.notice {
  max-width:860px;
}

.panel summary,.guide-block summary {
  cursor:pointer;
  font-family:Manrope,sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:-.3px;
  line-height:1.5;
}

.panel summary span {
  float:right;
  color:var(--muted);
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:400;
  margin-left:12px;
}

.panel summary:focus-visible,.guide-block summary:focus-visible {
  outline:3px solid #8d79e4;
  outline-offset:5px;
}

.topic-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.topic-links button {
  font-size:12px;
  justify-content:space-between;
}

.topic-links span {
  color:var(--purple);
  font-size:10px;
}

.offer-price {
  display:flex;
  align-items:center;
  gap:16px;
  margin:24px 0;
}

.offer-price strong {
  font:800 42px Manrope,sans-serif;
}

.offer-price span {
  color:var(--muted);
  font-size:12px;
}

.finish-screen {
  max-width:760px;
  padding-top:28px;
  padding-bottom:60px;
}

.finish-screen p {
  color:var(--muted);
}

.guide-block summary {
  font-size:15px;
}

.guide-block {
  padding:14px 0;
  margin:0;
}

.guide-block p {
  margin-bottom:0;
}

dialog .actions {
  margin-bottom:22px;
}

.result .spec-grid strong {
  text-transform:none;
}

.panel details {
  margin:12px 0;
}

@media(max-width:680px) {
  .pace-bar {
    align-items:flex-start;
  }
  .pro-invitation {
    display:block;
    padding:21px;
  }
  .pro-invitation button {
    margin-top:16px;
  }
  .decision-actions {
    display:grid;
    grid-template-columns:1fr;
  }
  .panel summary {
    font-size:14px;
  }
  .panel summary span {
    float:none;
    display:block;
    margin:4px 0 0 17px;
  }
  .topic-links {
    display:grid;
    grid-template-columns:1fr;
  }
  .overview .spec-grid {
    grid-template-columns:1fr 1fr;
  }
  .overview .spec-grid>div:last-child {
    grid-column:1/-1;
  }
  .bottom-actions .primary {
    gap:8px;
    font-size:12px;
  }
  .pace-bar .tiny {
    font-size:10px;
  }
  .pace-bar .text-button {
    font-size:11px;
    white-space:nowrap;
  }
  .finish-screen {
    padding-top:5px;
  }
}

/* Research, recovery and guide views use the same visual language as the original prototype. */
.save-status {
  max-width:1160px;
  margin:0 auto;
  padding:6px 20px;
  font-size:12px;
  color:var(--muted);
  min-height:30px;
}

.save-warning {
  color:#8b411b;
  background:#fff0df;
}

.resume-banner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  margin-bottom:35px;
  border:1px solid #d6cfee;
  border-radius:12px;
  background:var(--pale);
}

.budget-box {
  padding:22px;
  background:#f1f3f0;
  border:1px solid #d7dfd8;
  border-radius:12px;
  margin:24px 0;
}

.budget-box h3 {
  font-size:22px;
  letter-spacing:-.6px;
  margin:10px 0;
}

.budget-box p {
  margin:10px 0;
}

.budget-box.over,.notice.warning {
  background:#fff2e6;
  border:1px solid #e9c5a6;
  color:#633c22;
}

.notice.warning li {
  margin:8px 0;
}

.source-list {
  padding-left:22px;
}

.source-list li {
  margin:15px 0;
}

.source-list a {
  overflow-wrap:anywhere;
  color:var(--purple);
}

.source-list small {
  display:block;
  color:var(--muted);
  font-size:12px;
}

.candidate {
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

.candidate h3 {
  letter-spacing:-.5px;
  font-size:19px;
  margin:8px 0;
}

.candidate p {
  margin:8px 0;
}

.candidate a {
  font-size:13px;
  color:var(--purple);
}

.pro-benefits {
  padding-left:20px;
}

.pro-benefits li {
  margin:16px 0;
}

.guide-block ul {
  padding-left:21px;
}

.guide-block li {
  margin:12px 0;
  overflow-wrap:anywhere;
}

.guide-block summary {
  font-weight:700;
}

.guide-block {
  padding:15px 0;
}

.guide-block[open] {
  border-bottom:1px solid var(--line);
}

#modal {
  max-height:88vh;
  width:min(820px,94vw);
}

#modal h2 {
  padding-right:24px;
}

button,summary {
  touch-action:manipulation;
}

summary:focus-visible {
  outline:3px solid #8d79e4;
  outline-offset:4px;
}

.result h1 {
  font-size:43px;
}

.result,.content {
  overflow-wrap:break-word;
}

.error:empty {
  display:none;
}

.pro-invitation {
  margin:28px 0;
}

.candidate .text-button {
  white-space:normal;
}

input,textarea,select {
  max-width:100%;
}

@media(max-width:600px) {
  header {
    padding:18px 20px;
  }
  nav {
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  nav button {
    padding:4px;
  }
  .prototype {
    display:none;
  }
  .resume-banner {
    flex-direction:column;
    align-items:flex-start;
  }
  .result h1 {
    font-size:34px;
  }
  .budget-box {
    padding:18px;
  }
  .save-status {
    font-size:11px;
  }
  .pro-invitation {
    align-items:flex-start;
    gap:16px;
  }
  .pro-invitation .secondary {
    align-self:flex-start;
  }
  .pace-bar {
    gap:8px;
  }
  .pace-bar .text-button {
    padding:8px;
    font-size:12px;
  }
  .guide-block summary {
    font-size:16px;
  }
  .source-list {
    padding-left:18px;
  }
  #modal {
    padding:28px 22px;
  }
  .spec-grid strong {
    font-size:20px!important;
  }
  .row {
    grid-template-columns:1fr;
  }
  .actions button {
    max-width:100%;
  }
}

@media(max-width:680px) {
  nav button {
    display:inline-block;
  }
  header {
    gap:12px;
  }
  nav button {
    font-size:12px;
  }
}

.screen-inner>* {
  position:relative;
  z-index:1;
}

.field-note {
  margin:6px 0 0;
}

.field-error {
  margin:8px 0 0;
}

.panel.candidate {
  padding:27px;
}

@media(max-width:680px) {
  .panel.candidate {
    padding:21px;
  }
}

.more-examples {
  max-width:860px;
  margin:4px 0 20px;
}

.more-examples>summary {
  cursor:pointer;
  font-family:Manrope,sans-serif;
  font-weight:700;
  font-size:15px;
  margin:0 0 16px;
}

/* Version 2: line icons, the three picks, the Pro moment and the landing sections. */
.ico {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
}
.choice .check {
  min-width:18px;
}
.choice .check .ico {
  width:18px;
  height:18px;
  color:var(--purple);
}
.choices.three {
  grid-template-columns:repeat(3,1fr);
}
.picks {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:26px 0;
}
.picks.in-modal {
  grid-template-columns:1fr;
  margin:18px 0;
}
.pick {
  background:white;
  border:1px solid var(--line);
  border-radius:15px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pick:first-child {
  border-color:var(--purple);
  box-shadow:0 0 0 1px var(--purple),0 12px 30px #5945bd14;
}
.pick .role {
  align-self:flex-start;
  font-size:11px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--purple);
  background:var(--pale);
  border-radius:30px;
  padding:4px 10px;
}
.pick h3 {
  font-size:17px;
  letter-spacing:-.4px;
  line-height:1.3;
  margin:8px 0 0;
}
.pick-price {
  margin:2px 0 0;
}
.pick-price strong {
  font-family:Manrope,sans-serif;
  font-size:26px;
  letter-spacing:-1px;
}
.pick-price span {
  color:var(--muted);
  font-size:13px;
}
.pick .tiny {
  margin:0;
}
.why {
  list-style:none;
  padding:0;
  margin:10px 0 4px;
  display:grid;
  gap:8px;
  font-size:13px;
}
.why li {
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.why .ico {
  width:16px;
  height:16px;
  color:var(--green);
  flex-shrink:0;
  margin-top:2px;
}
.tradeoff {
  font-size:12px;
  color:#8c693f;
  background:#fff5e8;
  border-radius:8px;
  padding:8px 10px;
  margin:4px 0 0;
}
.pick .notice {
  margin:6px 0 0;
}
.shop-link {
  margin-top:auto;
  padding-top:12px;
  font-weight:600;
  color:var(--purple);
  text-decoration:none;
}
.shop-link:hover {
  text-decoration:underline;
}
.pro-sample {
  font-size:13px;
  font-style:italic;
  color:var(--ink)!important;
  margin-top:10px!important;
}
.budget-advice h2,.monitor-pick h3,.next-steps h3,.overview h2 {
  margin-top:0;
}
.monitor-pick summary,.overview details summary {
  cursor:pointer;
  font-weight:600;
  margin-top:12px;
}
.text-button.inline {
  padding:0;
  font-size:inherit;
  text-decoration:underline;
}
.how-we-choose,.faq {
  max-width:860px;
  margin:46px 0 0;
}
.how-we-choose h2,.faq h2 {
  font-size:22px;
  letter-spacing:-.6px;
}
.how-we-choose ul {
  padding-left:20px;
  color:var(--muted);
}
.how-we-choose li {
  margin:8px 0;
}
.faq details {
  border-top:1px solid var(--line);
  padding:14px 0;
}
.faq summary {
  cursor:pointer;
  font-weight:600;
}
.faq p {
  color:var(--muted);
  margin:8px 0 0;
}
@media(max-width:900px) {
  .picks {
    grid-template-columns:1fr;
  }
}
@media(max-width:680px) {
  .choices.three {
    grid-template-columns:1fr;
  }
  .bottom-actions {
    position:sticky;
    bottom:0;
    background:var(--bg);
    padding:12px 0;
    margin-top:20px;
    border-top:1px solid var(--line);
    z-index:5;
  }
}

/* Readability: body and form fields at 16px (iPhones zoom into smaller fields), secondary text at least 14px,
   short capital labels at least 12px, tap targets at least 44px and grey text at 4.5:1 or better. */
:root {
  --muted:#646578;
}

body,
input,select,textarea {
  font-size:16px;
}

.choice strong {
  font-size:15px;
}

.tiny,.hero .tiny,.notice,.aside-note,.trust,.price small,.tradeoff,.why,.pick-price span,.section-label,label,
.panel p,.reasons,.journey p,.sidebar p,.upgrade p,.upgrade li,.guide-block p,.pro-sample,.pro-invitation p,
.error,.candidate a,.source-list small,.exit-link,.pace-bar .text-button,.topic-links button,.offer-price span,
.save-status,.result-top .secondary,.monitor-choice strong,.choice small,.step,.pill,nav button,footer {
  font-size:14px;
}

.eyebrow,.prototype,.tag,.pick .role,.badge,.journey-label,.step b,.spec-grid small,.monitor-choice small,
.topic-links span,.panel summary span,.pace-bar .tiny,.screen-inner .mini-label {
  font-size:12px;
}

.pill,nav button,.text-button {
  min-height:44px;
}

.pill {
  padding:10px 16px;
}

.journey-label,.step,footer {
  color:var(--muted);
}

@media(max-width:680px) {
  .bottom-actions .primary {
    font-size:15px;
  }
}

.text-button.inline {
  min-height:0;
}

/* Phones: keep the header on one line. "How it works" is also on the home page. */
@media(max-width:400px) {
  nav button[data-action="how"] {
    display:none;
  }
}

/* Footer links and the company line, on every page. */
footer {
  flex-wrap:wrap;
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}
.footer-links a {
  color:var(--muted);
  text-decoration:none;
}
.footer-links a:hover {
  text-decoration:underline;
}
footer .legal {
  width:100%;
  margin:0;
  line-height:1.5;
  color:var(--muted);
}

/* Trust pages: about, how we make money, contact, privacy, terms. */
nav .nav-link {
  color:var(--purple);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
}
nav .nav-link:hover {
  text-decoration:underline;
}
.doc {
  max-width:760px;
  margin:0 auto;
  padding:48px 24px 72px;
}
.doc h1 {
  font-family:Manrope,sans-serif;
  font-size:40px;
  line-height:1.15;
  letter-spacing:-1.5px;
  margin:0 0 14px;
}
.doc h2 {
  font-family:Manrope,sans-serif;
  font-size:22px;
  letter-spacing:-.4px;
  margin:36px 0 8px;
}
.doc p,.doc li,.doc address {
  font-size:16px;
  line-height:1.7;
}
.doc ul {
  padding-left:22px;
}
.doc li {
  margin:6px 0;
}
.doc .lead {
  font-size:19px;
  color:var(--muted);
}
.doc .updated {
  font-size:14px;
  color:var(--muted);
  margin:0 0 10px;
}
.doc address {
  font-style:normal;
}
.doc a {
  color:var(--purple);
}
@media(max-width:680px) {
  .doc {
    padding:32px 20px 56px;
  }
  .doc h1 {
    font-size:32px;
  }
}

/* Blog: post list, price cards filled by blog.js, and the closing call to action. */
.doc .back {
  font-size:14px;
  margin:0 0 18px;
}
.doc .back a {
  text-decoration:none;
}
.post-card {
  border-top:1px solid var(--line);
  padding:18px 0 4px;
}
.post-card h2 {
  margin:0 0 6px;
}
.post-card h2 a {
  color:var(--ink);
  text-decoration:none;
}
.post-card h2 a:hover {
  color:var(--purple);
}
.deal-list {
  display:grid;
  gap:12px;
  margin:18px 0 10px;
}
.deal {
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:16px 18px;
}
.deal h3 {
  font-family:Manrope,sans-serif;
  font-size:18px;
  letter-spacing:-.3px;
  margin:0 0 4px;
}
.doc .deal p {
  margin:4px 0;
  font-size:15px;
  line-height:1.5;
}
.deal-price strong {
  font-size:20px;
}
.deal-was {
  color:#2f7d46;
  font-weight:600;
}
.doc .deal-facts {
  color:var(--muted);
}
.doc .deal-meta {
  font-size:13px;
  color:var(--muted);
}
.deal .shop-link {
  display:inline-block;
  padding-top:6px;
}
.doc .deal-none {
  color:var(--muted);
}
.doc .cta {
  margin:36px 0 0;
  padding:18px 20px;
  border-radius:12px;
  background:#f2effb;
}
.doc .cta a {
  font-weight:700;
}

/* Blog articles: comparison tables, sub-headings and the source list. */
.doc h3 {
  font-family:Manrope,sans-serif;
  font-size:18px;
  margin:26px 0 6px;
}
/* Headings on text pages: the site-wide heading rules are tighter, which pushed words together here. */
.doc h1 {
  letter-spacing:-.8px;
  word-spacing:.04em;
}
.doc h2,.doc h3 {
  letter-spacing:-.2px;
  word-spacing:.04em;
}
.hero-figure {
  margin:22px 0 8px;
}
.hero-figure svg {
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
}
.hero-figure figcaption {
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
}
.table-wrap {
  overflow-x:auto;
  margin:16px 0;
}
.guide-table {
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.5;
}
.guide-table th,.guide-table td {
  text-align:left;
  vertical-align:top;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.guide-table th {
  font-family:Manrope,sans-serif;
  background:#f2effb;
}
.doc .sources li {
  font-size:14px;
}

/* Blog posts: headings with a touch of colour, so long articles are easy to scan. */
.post h2 {
  position:relative;
  padding-left:16px;
  margin-top:44px;
}
.post h2::before {
  content:'';
  position:absolute;
  left:0;
  top:.18em;
  bottom:.18em;
  width:5px;
  border-radius:3px;
  background:linear-gradient(180deg,#7b61ff,#5945bd);
}
.post h3 {
  color:var(--purple);
}
.post h1 {
  background:linear-gradient(90deg,#25263a 55%,#5945bd);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}