/* Product Pricer website — shared styles for every page.
   Layout: white paper sections, brand watercolor bands, torn cut-paper edges between them. */
:root {
  /* Brand colors (PP Style Guide) */
  --teal: #59a3af;
  --green: #89b551;
  --pink: #e45296;
  --yellow: #ffc93c;
  --coral: #f27357;

  /* Dashboard tile colors (from the Product Pricer app) */
  --app-orange: #e67728;
  --app-blue: #59a4b0;
  --app-green: #a1c474;
  --teal-deep: #2f6f7b;
  --note-bg: #fefbed;
  --note-line: #f3dc8a;
  --good: #3f7a22;
  --warn: #b0561d;

  /* Neutrals, nudged toward teal */
  --ink: #5c5c5c;
  --tile-ink: #1b2a2e; /* dark text on the colored dashboard tiles only */
  --ink-soft: #5c5c5c;
  --line: #dfe7e8;
  --paper: #ffffff;
  --paper-2: #f4f8f8;

  /* Type (PP Style Guide) */
  --font-display: "Lexend Deca", "Lexend", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1300px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 14px;
  --header-h: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* Whole site shown at 90% (desktop and phones) so it feels calmer */
html { zoom: 0.9; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* keep the footer at the bottom of the screen on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > main > section:last-child { flex: 1 0 auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--coral); color: #ffffff; box-shadow: 0 3px 0 #c4513a; text-shadow: 0 1px 1px rgba(120, 40, 20, .25); }
.btn-primary:hover { box-shadow: 0 5px 0 #c4513a; }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 #c4513a; }
.btn .arrow { width: 20px; height: 20px; flex: none; }
.btn-lg { min-height: 56px; padding: 15px 30px; font-size: 18px; }

/* ---------- Header ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper);
}
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand img { width: 44px; height: 44px; flex: none; }
.brand-name {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  color: var(--coral); letter-spacing: -0.01em; white-space: nowrap;
}
.brand-name sup { font-size: 0.5em; margin-left: 1px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.brand-tag { font-family: var(--font-display); font-weight: 400; font-size: 13px; color: #757575; white-space: nowrap; margin-top: 2px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 10px 12px; border-radius: 8px;
}
.nav a:not(.btn):hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav .btn { margin-left: 10px; min-height: 44px; padding: 10px 20px; font-size: 15px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter-r) 16px var(--gutter-l);
    box-shadow: 0 18px 30px -18px rgba(27, 42, 46, .35);
  }
  .nav[data-open="false"] { display: none; }
  .nav a:not(.btn) { padding: 14px 12px; font-size: 17px; }
  .nav .btn { margin: 8px 0 0; justify-content: center; min-height: 52px; font-size: 17px; }
}

/* ---------- Torn cut-paper edges ----------
   Add class "torn-bottom" to a section. Set --tear-to to the color of the section below. */
.torn-bottom { position: relative; padding-bottom: 34px; }
.torn-bottom::before,
.torn-bottom::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px;
  -webkit-mask: var(--tear) bottom / 100% 100% no-repeat;
          mask: var(--tear) bottom / 100% 100% no-repeat;
  pointer-events: none;
}
/* The rough white fibers of the torn paper, with a soft shadow for depth */
.torn-bottom::before {
  --tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44 L0 14.0 Q14 14.0 28 11.6 Q45 11.6 62 11.0 Q77 11.0 93 13.1 Q105 13.1 116 14.1 Q128 14.1 139 13.5 Q151 13.5 162 11.1 Q177 11.1 192 16.3 Q204 16.3 216 12.1 Q233 12.1 249 17.1 Q266 17.1 282 13.3 Q302 13.3 321 10.8 Q340 10.8 359 12.5 Q371 12.5 383 11.3 Q397 11.3 411 16.2 Q424 16.2 436 14.6 Q453 14.6 470 13.1 Q486 13.1 502 10.9 Q513 10.9 525 11.9 Q542 11.9 559 13.5 Q573 13.5 586 14.6 Q602 14.6 617 12.6 Q635 12.6 653 15.4 Q666 15.4 679 14.5 Q695 14.5 711 16.6 Q728 16.6 746 12.5 Q766 12.5 786 11.3 Q800 11.3 815 15.8 Q827 15.8 840 13.9 Q851 13.9 863 15.2 Q880 15.2 898 14.5 Q917 14.5 936 12.7 Q953 12.7 971 14.7 Q987 14.7 1003 13.7 Q1022 13.7 1040 17.1 Q1055 17.1 1071 15.1 Q1082 15.1 1094 15.4 Q1111 15.4 1127 17.5 Q1146 17.5 1164 12.5 Q1179 12.5 1193 15.2 Q1204 15.2 1216 13.7 Q1228 13.7 1241 11.3 Q1252 11.3 1264 15.9 Q1276 15.9 1288 12.2 Q1302 12.2 1317 16.6 Q1329 16.6 1340 13.6 Q1356 13.6 1372 16.7 Q1391 16.7 1409 16.5 Q1423 16.5 1436 13.4 Q1438 13.4 1440 16.7 L1440 44 Z'/%3E%3C/svg%3E");
  background: #ffffff;
  filter: drop-shadow(0 -2px 3px rgba(27, 42, 46, .22));
}
/* The next sheet of paper */
.torn-bottom::after {
  --tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44 L0 19.0 Q15 19.0 30 19.4 Q49 19.4 69 18.8 Q84 18.8 100 19.5 Q113 19.5 125 19.1 Q142 19.1 159 20.8 Q170 20.8 182 17.8 Q194 17.8 206 20.9 Q223 20.9 240 16.3 Q260 16.3 280 21.8 Q297 21.8 314 19.7 Q326 19.7 339 16.1 Q354 16.1 370 16.4 Q383 16.4 396 17.5 Q407 17.5 418 18.8 Q433 18.8 448 21.1 Q464 21.1 479 19.8 Q495 19.8 510 20.0 Q526 20.0 541 17.7 Q561 17.7 581 22.0 Q599 22.0 618 20.2 Q632 20.2 645 17.4 Q659 17.4 673 16.4 Q691 16.4 708 18.4 Q727 18.4 746 18.3 Q765 18.3 785 21.1 Q796 21.1 807 17.3 Q826 17.3 845 18.8 Q865 18.8 885 18.4 Q897 18.4 908 19.8 Q926 19.8 944 17.6 Q956 17.6 968 18.0 Q988 18.0 1007 20.5 Q1019 20.5 1031 17.5 Q1043 17.5 1055 16.4 Q1073 16.4 1091 17.1 Q1108 17.1 1124 18.7 Q1136 18.7 1149 20.4 Q1161 20.4 1173 19.9 Q1185 19.9 1197 18.5 Q1210 18.5 1223 17.6 Q1243 17.6 1263 20.8 Q1276 20.8 1290 21.3 Q1303 21.3 1316 18.4 Q1335 18.4 1353 19.9 Q1365 19.9 1377 21.9 Q1390 21.9 1403 17.5 Q1421 17.5 1439 18.0 Q1439 18.0 1440 16.4 L1440 44 Z'/%3E%3C/svg%3E");
  background: var(--tear-to, var(--paper));
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--teal);
  color: #ffffff;
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(60px, 6vw, 84px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.hero-copy { min-width: 0; }
.eyebrow {
  display: inline-block; margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--paper); color: var(--teal-deep);
  padding: 6px 14px 5px; border-radius: 3px;
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 5px rgba(27, 42, 46, .18);
  clip-path: polygon(0 4%, 3% 0, 97% 6%, 100% 0, 99% 92%, 96% 100%, 2% 95%, 0 100%);
}
.hero h1 {
  margin-top: 22px;
  font-weight: 600;
  font-size: clamp(36.1px, 4.94vw, 62.7px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 6px rgba(20, 60, 68, .25);
}
/* "in minutes." sits on a torn strip of coral watercolor paper */
.hero h1 .strip {
  display: inline-block; white-space: nowrap;
  margin-top: 8px; padding: 2px 16px 6px 12px;
  background: url("../img/wash-coral.jpg") center / cover, var(--coral);
  text-shadow: 0 1px 3px rgba(120, 40, 20, .3);
  transform: rotate(-1.5deg);
  clip-path: polygon(0 6%, 4% 0, 30% 5%, 62% 0, 96% 4%, 100% 12%, 98% 52%, 100% 94%, 70% 100%, 38% 95%, 6% 100%, 1% 90%, 2% 48%);
  filter: drop-shadow(0 3px 4px rgba(27, 42, 46, .2));
}
.hero-sub {
  margin: 26px 0 0;
  font-size: clamp(20px, calc(1.6vw + 2px), 23px);
  line-height: 1.32;
  max-width: 34ch;
  text-shadow: 0 1px 3px rgba(20, 60, 68, .3);
}
.hero-sub { font-weight: 600; }
.hero-sub strong { font-weight: 700; }
.hero-sub-2 { display: block; margin-top: .75em; font-weight: 400; } /* gap between the two pairs of lines, like the original site */
/* Hand-drawn yellow arrow from "Try it!" to the demo (desktop only; sized by main.js) */
.try-line { position: relative; white-space: nowrap; }
.try-arrow {
  position: absolute; left: calc(100% + 14px); top: 50%;
  height: 72px; margin-top: -40px; overflow: visible; pointer-events: none;
  color: var(--yellow); filter: drop-shadow(0 2px 2px rgba(20, 60, 68, .35));
  animation: try-nudge .7s ease-in-out infinite;
}
.try-arrow .try-arrow-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: try-draw .8s .2s ease-out forwards; }
.try-arrow .try-arrow-head { opacity: 0; animation: try-head .1s .95s ease-out forwards; }
@keyframes try-draw { to { stroke-dashoffset: 0; } }
@keyframes try-head { to { opacity: 1; } }
@keyframes try-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(18px); } }
.try-arrow.is-still { animation: none; }
@media (max-width: 900px) { .try-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .try-arrow .try-arrow-line { stroke-dashoffset: 0; }
  .try-arrow .try-arrow-head { opacity: 1; }
}
.hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.price-note { font-size: 16px; font-weight: 600; text-shadow: 0 1px 3px rgba(20, 60, 68, .3); }
.proof {
  margin: 30px 0 0; padding-top: 20px;
  border-top: 2px dashed rgba(255, 255, 255, .6);
  text-shadow: 0 1px 3px rgba(20, 60, 68, .3);
  font-size: 16px; font-weight: 500; max-width: 46ch;
  display: flex; gap: 10px; align-items: flex-start;
}
.proof svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* ---------- Live demo card (the hero visual): a working mini Product Pricer ---------- */
.demo-stack { position: relative; min-width: 0; width: 100%; max-width: 620px; justify-self: end; }
.demo-stack::before {
  /* coral cut-paper scrap peeking out behind the card */
  content: ""; position: absolute; inset: 22px -14px -16px 26px;
  background: url("../img/wash-coral.jpg") center / cover, var(--coral);
  transform: rotate(2.5deg);
  clip-path: polygon(1% 2%, 20% 0, 48% 2%, 77% 0, 99% 1%, 100% 30%, 98% 63%, 100% 99%, 70% 98%, 41% 100%, 12% 98%, 0 100%, 2% 66%, 0 33%);
  filter: drop-shadow(0 6px 10px rgba(27, 42, 46, .25));
}
.demo {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 22px);
  box-shadow: 0 2px 0 rgba(27, 42, 46, .06), 0 22px 40px -18px rgba(27, 42, 46, .55);
  transform: rotate(-0.8deg);
}
.demo-head { display: flex; align-items: center; gap: 10px; }
.demo-head img { width: 30px; height: 30px; flex: none; }
.demo-title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.demo-tag {
  flex: none; font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--paper-2); color: var(--ink-soft);
  padding: 5px 9px; border-radius: 999px;
}
.demo-product { margin: 6px 0 12px; font-size: 14px; color: var(--ink-soft); }
.demo-product b { color: var(--ink); font-weight: 600; }

/* Dashboard tiles, in the app's own colors */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.tile {
  appearance: none; border: 0; text-align: left; cursor: pointer;
  border-radius: 9px; padding: 9px 11px 8px; min-width: 0;
  color: var(--tile-ink); font-family: var(--font-display);
  display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(27, 42, 46, .18); }
.tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tile-ink); }
.tile-label { font-size: 13px; font-weight: 500; line-height: 1.2; display: flex; justify-content: space-between; gap: 4px; }
.tile-label i { font-style: normal; flex: none; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.55); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.tile-value {
  margin-top: 4px; font-family: var(--font-data); font-weight: 700;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.1;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.tile-delta { display: block; min-height: 1.25em; margin-top: 2px; font-family: var(--font-data); font-size: 12px; font-weight: 600; }
.tile--cost { background: var(--app-orange); }
.tile--rev { background: var(--app-blue); }
.tile--profit { background: var(--app-green); }
.tile-flag { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: #ffffff; color: var(--warn); font-family: var(--font-data); font-size: 12px; font-weight: 700; }
.tile.flash { animation: flash .6s ease; }
@keyframes flash { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

.tile-help {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  background: var(--note-bg); border: 1px solid var(--note-line);
  font-size: 14px; line-height: 1.45;
}
.tile-help b { font-family: var(--font-display); font-weight: 600; }

/* Tabs: the sections of the app */
.tabs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--line); }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink-soft);
  padding: 10px 10px 9px; min-height: 44px; margin-bottom: -2px;
  border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--coral); }
.panel { padding-top: 12px; }
.panel-intro { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); }

.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field label, .field .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.field .goal-status { font-family: var(--font-data); font-size: 12.5px; font-weight: 700; }
.goal-met { color: var(--good); }
.goal-miss { color: var(--warn); }
.input {
  display: flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: 9px; background: var(--paper);
  min-height: 44px; padding: 0 10px; gap: 4px;
}
.input:focus-within { border-color: var(--ink); }
.input span { color: var(--ink-soft); font-size: 15px; font-weight: 500; }
.input input, .input select {
  flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-data); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; padding: 0; min-height: 40px;
  -moz-appearance: textfield;
}
.input select { cursor: pointer; font-family: var(--font-body); }
.input input:focus, .input select:focus { outline: none; }
.input input::-webkit-outer-spin-button, .input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field--wide { grid-column: 1 / -1; }
.locked { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.locked li {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 12px; border-radius: 9px;
  background: var(--paper-2); border: 1.5px dashed #b9c7c9; color: #6b7d81;
  font-size: 14.5px; font-weight: 600;
}
.locked li svg { width: 17px; height: 17px; flex: none; color: var(--coral); }
.locked li span { flex: 1; min-width: 0; }
.locked li em { font-style: normal; color: #9aabae; }
.unlock-btn { margin-top: 10px; width: 100%; justify-content: center; text-align: center; min-height: 46px; font-size: 16px; }
.unlock-btn svg { width: 18px; height: 18px; flex: none; }
.unlock-note { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.input.has-stepper { padding: 0; overflow: hidden; gap: 0; }
.input.has-stepper > span { padding-left: 6px; }
.input.has-stepper input { text-align: center; padding: 0 2px; }
.step-btn {
  flex: none; width: 36px; min-height: 44px; border: 0; cursor: pointer;
  background: var(--paper-2); color: var(--ink); font-size: 20px; font-weight: 600; line-height: 1;
}
.step-btn:hover { background: var(--line); }
.step-btn:active { background: var(--app-blue); color: #ffffff; }

.sumline {
  margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  background: var(--note-bg); border: 1px solid var(--note-line);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sumline small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.goals-badge {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; vertical-align: 2px;
}
.goals-badge.met { background: var(--app-green); color: var(--tile-ink); }
.goals-badge.miss { background: var(--note-bg); border: 1px solid var(--note-line); color: var(--warn); }

.whatif { margin-top: 12px; }
.whatif-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1.5px dashed var(--ink-soft); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 7px 12px; min-height: 40px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
}
.chip:hover { background: var(--paper-2); }
.chip[aria-pressed="true"] { border-style: solid; border-color: var(--teal-deep); background: var(--teal-deep); color: #ffffff; }

/* Everything else in the full app */
.more {
  margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--line);
}
.more-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.more li {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-2); border-radius: 999px; padding: 5px 11px 5px 8px;
  font-size: 13px; font-weight: 500;
}
.more li svg { width: 15px; height: 15px; flex: none; color: var(--teal-deep); }
.demo-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles .tile:last-child { grid-column: 1 / -1; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; font-size: 14px; padding-inline: 8px; }
}

/* ---------- "Built for" scrolling craft strip (white, brand teal text, Lexend Deca) ---------- */
.crafts-strip { background: var(--paper); padding-top: 0; }
.crafts-strip.torn-bottom { padding-bottom: 34px; }
.cs-inner { position: relative; z-index: 2; margin-top: -16px; /* centers the text between the two torn edges */ display: flex; align-items: center; gap: 18px; padding-left: max(var(--gutter-l), calc((100% - var(--wrap)) / 2 + 16px)); }
.cs-label { flex: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.1vw, 16px); color: var(--ink); }
.cs-viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 60px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 60px), transparent);
}
.cs-track { display: flex; width: max-content; animation: cs-scroll 110s linear infinite; }
.cs-viewport:hover .cs-track, .cs-viewport.is-paused .cs-track { animation-play-state: paused; }
.cs-list { list-style: none; margin: 0; padding: 0; display: flex; }
.cs-list li {
  white-space: nowrap; padding: 3px 0;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); color: var(--ink);
}
.cs-list li::after { content: "•"; color: var(--teal); margin: 0 12px; }
@keyframes cs-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) { .cs-inner { gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .cs-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .cs-track { animation: none; }
  .cs-list[aria-hidden="true"] { display: none; }
}

/* ---------- Testimonials: torn paper notes. 3 columns on desktop; on phones they stack up as you scroll ---------- */
.testimonials {
  position: relative;
  background: var(--green);
  color: #ffffff;
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(60px, 6vw, 80px);
}
.t-title {
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 6px rgba(40, 70, 20, .25);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.t-stack {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px);
  align-items: start;
}
.t-card { min-width: 0; filter: drop-shadow(0 8px 12px rgba(27, 42, 46, .25)); }
.t-card:nth-child(1) { transform: rotate(-1.5deg); }
.t-card:nth-child(2) { transform: rotate(1.2deg); }
.t-card:nth-child(3) { transform: rotate(-1deg); }
.t-paper {
  margin: 0;
  background: var(--paper); color: var(--ink);
  padding: 20px 20px 32px;
  clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - 11px), 97.1% calc(100% - 13px), 93.7% calc(100% - 12px), 90.4% calc(100% - 2px), 88.1% calc(100% - 15px), 85.4% calc(100% - 15px), 84.0% calc(100% - 9px), 82.2% calc(100% - 10px), 79.7% calc(100% - 2px), 78.0% calc(100% - 6px), 74.7% calc(100% - 13px), 73.1% calc(100% - 13px), 71.6% calc(100% - 11px), 70.1% calc(100% - 2px), 66.9% calc(100% - 5px), 65.2% calc(100% - 16px), 62.0% calc(100% - 6px), 58.6% calc(100% - 10px), 55.8% calc(100% - 5px), 52.5% calc(100% - 12px), 49.0% calc(100% - 15px), 47.2% calc(100% - 7px), 45.6% calc(100% - 4px), 44.2% calc(100% - 6px), 41.6% calc(100% - 2px), 38.9% calc(100% - 7px), 37.0% calc(100% - 13px), 34.7% calc(100% - 6px), 32.4% calc(100% - 12px), 31.0% calc(100% - 16px), 29.8% calc(100% - 12px), 26.6% calc(100% - 2px), 23.6% calc(100% - 7px), 21.1% calc(100% - 2px), 19.8% calc(100% - 5px), 16.4% calc(100% - 5px), 13.4% calc(100% - 15px), 10.1% calc(100% - 7px), 8.1% calc(100% - 9px), 5.1% calc(100% - 4px), 2.2% calc(100% - 13px), 0 calc(100% - 9px));
}
.t-paper blockquote {
  margin: 0; font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: 16px; line-height: 1.5;
}
.t-paper blockquote p { margin: 0 0 8px; }
.t-paper blockquote p:last-child { margin-bottom: 0; }
.t-paper figcaption { margin-top: 12px; font-family: var(--font-body); font-style: italic; font-size: 15px; font-weight: 600; }

@media (max-width: 900px) {
  .t-stack { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .t-card { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 16px); }
}
/* No white paper fibers where the hero tears into the testimonials */
.hero.torn-bottom::before,
.testimonials.torn-bottom::before,
.clear.torn-bottom::before,
.know.torn-bottom::before,
.crafts-strip.torn-bottom::before,
.every.torn-bottom::before,
.dream.torn-bottom::before,
.f-body.torn-bottom::before { display: none; }

/* ---------- Get clear on your pricing ---------- */
.clear {
  background: var(--paper);
  color: var(--ink);
  padding-top: 0;
  padding-bottom: clamp(64px, 6.5vw, 88px);
}
.clear-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.clear-media { min-width: 0; }
.clear-video { display: block; width: 420px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--paper-2); box-shadow: 0 18px 36px -18px rgba(27, 42, 46, .45); }
.clear-copy { min-width: 0; }
.clear-title {
  margin-bottom: clamp(14px, 2vw, 22px);
  font-weight: 600;
  font-size: clamp(36.1px, 4.94vw, 62.7px); /* same as the hero headline */
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.clear-body { min-width: 0; font-size: clamp(18px, 1.5vw, 20px); font-weight: 500; line-height: 1.55; }
.clear-body p { margin: 0 0 12px; max-width: 52ch; }
.clear-body .clear-strong { font-weight: 700; font-size: 1.1em; margin: 18px 0 22px; }
.clear-body .btn { text-shadow: 0 1px 1px rgba(120, 40, 20, .25); }

@media (max-width: 900px) {
  .clear-grid { grid-template-columns: minmax(0, 1fr); }
  .clear-media { order: 2; }
  .clear-video { width: 100% !important; }
}

/* ---------- Know your real costs → See your actual profit ---------- */
.know {
  background: var(--pink);
  color: #ffffff;
  padding-top: 0; /* same as the other sections */
  padding-bottom: clamp(56px, 6vw, 80px);
}
.know-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.know-title {
  font-weight: 600;
  font-size: clamp(36.1px, 4.94vw, 62.7px); /* same as the other headers */
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 6px rgba(110, 20, 60, .25);
}
/* Smaller line under the big "See your actual profit." */
.know-kicker { display: block; margin-top: 0.405em; font-size: 0.378em; /* keeps this line the same size as before */ font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.know-body { min-width: 0; text-shadow: 0 1px 3px rgba(110, 20, 60, .25); }
.know-lead { margin: 0 0 12px; font-size: clamp(20px, calc(1.6vw + 2px), 23px); font-weight: 700; }
.know-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.know-list li { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(18px, 1.5vw, 20px); font-weight: 500; line-height: 1.4; }
.know-check {
  flex: none; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%;
  background: #ffffff; color: var(--pink); display: grid; place-items: center;
}
.know-check svg { width: 17px; height: 17px; }
.know-body .btn { text-shadow: 0 1px 1px rgba(120, 40, 20, .25); }

@media (max-width: 900px) {
  .know-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .know-title { font-size: clamp(34.2px, 12.48vw, 49.59px); } /* phone headers 10% smaller */
}

/* ---------- Every Maker. Every Platform. ---------- */
.every {
  background: var(--paper);
  color: var(--ink);
  padding-top: 0; /* same as the Get clear section */
  padding-bottom: clamp(56px, 6vw, 80px);
}
.every-title {
  margin-bottom: clamp(14px, 2vw, 22px); /* same as Get clear */
  font-weight: 600;
  font-size: clamp(36.1px, 4.94vw, 62.7px); /* same as the hero headline */
  line-height: 1.05;
  letter-spacing: -0.03em;
}
/* Same text style as the Get clear section */
.every-body { font-size: clamp(18px, 1.5vw, 20px); font-weight: 500; line-height: 1.35; }
.every-body p { margin: 0 0 22px; max-width: 90%; }
.every-body .every-strong { font-weight: 700; font-size: 1.1em; }
/* The full sentence is kept for screen readers and Google; the tags show it visually */
.every-from { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tags-label { margin: clamp(22px, 3vw, 34px) 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.5vw, 20px); }
.tags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  color: #ffffff; font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.3vw, 17px);
  padding: 9px 16px 8px; border-radius: 3px;
  clip-path: polygon(0 4%, 4% 0, 96% 5%, 100% 0, 99% 94%, 95% 100%, 3% 96%, 0 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.tag:nth-child(odd) { transform: rotate(-1.2deg); }
.tag:nth-child(even) { transform: rotate(1deg); }
.tag--teal { background: url("../img/wash-teal.jpg") center / cover, var(--teal); }
.tag--coral { background: url("../img/wash-coral.jpg") center / cover, var(--coral); }
.tag--green { background: url("../img/wash-green.jpg") center / cover, var(--green); }
.tag--pink { background: url("../img/wash-pink.jpg") center / cover, var(--pink); }
/* Trying all tags in the teal (brand blue) watercolor. Delete this line to go back to four colors. */
.tags .tag { background: url("../img/wash-teal.jpg") center / cover, var(--teal); }
.every-end { margin: 18px 0 0; font-size: clamp(18px, 1.5vw, 20px); font-weight: 600; }
.every .btn { margin-top: 0; }

@media (max-width: 600px) {
  .every-title { font-size: clamp(34.2px, 12.48vw, 49.59px); } /* phone headers 10% smaller */
}

/* ---------- Features page ---------- */
.f-hero {
  background: var(--teal);
  color: #ffffff;
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(64px, 6vw, 84px);
  text-shadow: 0 2px 6px rgba(20, 60, 68, .25);
}
.f-hero.torn-bottom::before { display: none; }
.f-title { font-weight: 600; font-size: clamp(36.1px, 4.94vw, 62.7px); line-height: 1.05; letter-spacing: -0.03em; }
.f-sub { margin: 14px 0 0; font-size: clamp(20px, calc(1.6vw + 2px), 23px); font-weight: 700; }
.f-intro { margin: 10px 0 0; max-width: 62ch; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; }
.f-body { background: var(--paper); color: var(--ink); padding-bottom: clamp(48px, 6vw, 80px); }
.f-grid { columns: 3 320px; column-gap: clamp(16px, 2vw, 24px); }
.f-card { background: var(--paper-2); border-radius: 10px; padding: 22px 22px 18px; min-width: 0; break-inside: avoid; margin-bottom: clamp(16px, 2vw, 24px); }
.f-card-title { font-weight: 600; font-size: clamp(21px, 1.8vw, 24px); line-height: 1.2; margin-bottom: 14px; }
.f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; }
.f-check { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--teal); color: #ffffff; display: grid; place-items: center; }
.f-check svg { width: 13px; height: 13px; }
.f-cta { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.f-cta-line { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.01em; }
@media (max-width: 600px) { .f-title { font-size: clamp(34.2px, 12.48vw, 49.59px); } } /* phone headers 10% smaller */
/* ---------- Legal pages (Privacy, Terms) ---------- */
.legal { max-width: 720px; font-size: 15.5px; line-height: 1.6; }
.legal h2 { font-weight: 600; font-size: 19px; margin: 26px 0 8px; }
.legal h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 18px 0 4px; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.legal a { color: var(--teal-deep); }
.legal > p:first-child { margin-top: 0; }
.legal-date { margin: 8px 0 0; font-size: 15px; font-weight: 500; }

/* ---------- FAQ page (same look as the Features page; tap a question to open it) ---------- */
.faq-list { max-width: 860px; display: grid; gap: 12px; }
.faq-item { background: var(--paper-2); border-radius: 10px; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; min-height: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:hover { background: var(--line); }
.faq-ans { padding: 2px 22px 20px; font-size: 16.5px; line-height: 1.6; }
.faq-ans p { margin: 0 0 12px; }
.faq-ans p:last-child { margin-bottom: 0; }
.faq-ans ul { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 4px; }
.faq-ans strong { font-weight: 700; }

/* ---------- Final section: dreams (inspired by acquisition.com's ending) ---------- */
.dream {
  background: var(--paper-2);
  color: var(--ink);
  padding-top: 0; /* same as the other light sections */
  padding-bottom: clamp(56px, 6vw, 80px);
  text-align: center;
}
.dream-inner { display: flex; flex-direction: column; align-items: center; }
.dream-kicker { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); }
.dream-title {
  margin-top: clamp(14px, 2vw, 22px);
  font-weight: 700;
  font-size: clamp(36.1px, 5.7vw, 79.8px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.dream-sub { margin: clamp(18px, 2.4vw, 28px) 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; }
.dream-help { margin: 8px 0 0; font-size: clamp(22px, 2.1vw, 27px); font-weight: 700; }
.dream-actions { margin-top: clamp(24px, 3vw, 34px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; }
.dream-link { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--teal-deep); text-decoration: none; padding: 10px 4px; }
.dream-link:hover { text-decoration: underline; }
.dream-title .br-m { display: none; }
@media (max-width: 600px) { .dream-title .br-m { display: inline; } .dream-title .br-d { display: none; } }
/* Words shown only on phones / only on bigger screens */
.only-m { display: none; }
@media (max-width: 600px) { .only-m { display: inline; } .only-d { display: none; } }
.dream-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.dream-links .dream-link { padding-block: 3px; }
@media (max-width: 600px) { .dream-links { align-items: center; } }
.dream-note { margin: 10px 0 0; font-size: 15px; }

/* ---------- Footer (teal, white lettering) ---------- */
.site-footer {
  background: var(--teal);
  color: #ffffff;
  padding-top: clamp(18px, 2.2vw, 26px);
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  text-shadow: 0 1px 2px rgba(20, 60, 68, .25);
}
.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px clamp(24px, 4vw, 56px); }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 21px; }
.footer-logo img { width: 40px; height: 40px; background: #ffffff; border-radius: 50%; }
.footer-logo sup { font-size: .5em; }
.footer-name { display: flex; flex-direction: column; line-height: 1.15; }
.footer-tag { font-family: var(--font-display); font-weight: 400; font-size: 14px; margin-top: 2px; }
.footer-contact { margin: 6px 0 0; font-size: 15px; line-height: 1.35; }
.footer-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.footer-head { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.footer-col a { font-size: 15px; padding: 3px 0; line-height: 1.35; }
.footer-bottom { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .45); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 14px; }
.footer-bottom p { margin: 0; }
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Profit Tips pop-up ---------- */
.tips-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(27, 42, 46, .55);
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  animation: tips-fade .25s ease;
}
.tips-overlay[hidden] { display: none; }
@keyframes tips-fade { from { opacity: 0; } to { opacity: 1; } }
/* torn-paper note, slightly tilted, like the testimonials */
.tips-card {
  position: relative; width: 100%; max-width: 360px; max-height: 100%;
  transform: rotate(-1.2deg);
  filter: drop-shadow(0 16px 26px rgba(27, 42, 46, .4));
  animation: tips-up .3s ease;
}
@keyframes tips-up { from { transform: translateY(16px) rotate(-1.2deg); } to { transform: rotate(-1.2deg); } }
.tips-paper {
  position: relative; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--paper); color: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - 2px), 95.8% calc(100% - 4px), 92.1% calc(100% - 2px), 87.6% calc(100% - 5px), 83.8% calc(100% - 4px), 80.7% calc(100% - 1px), 77.3% calc(100% - 4px), 74.6% calc(100% - 5px), 71.5% calc(100% - 2px), 68.9% calc(100% - 6px), 64.6% calc(100% - 5px), 60.6% calc(100% - 1px), 57.2% calc(100% - 3px), 54.4% calc(100% - 6px), 51.0% calc(100% - 2px), 46.5% calc(100% - 2px), 41.7% calc(100% - 3px), 37.8% calc(100% - 3px), 34.1% calc(100% - 2px), 31.5% calc(100% - 5px), 28.4% calc(100% - 5px), 25.4% calc(100% - 6px), 20.6% calc(100% - 5px), 16.2% calc(100% - 4px), 11.9% calc(100% - 2px), 8.2% calc(100% - 5px), 5.2% calc(100% - 6px), 0.5% calc(100% - 3px), 0 calc(100% - 4px));
}
.tips-close {
  position: absolute; top: 14px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center;
}
.tips-close:hover { background: var(--paper-2); }
.tips-close svg { width: 20px; height: 20px; }
.tips-body { padding: 22px 22px 28px; text-align: center; }
.tips-logo { margin: 0 auto 8px; width: 42px; height: 42px; }
.tips-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.tips-sub { margin: 8px 0 0; font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: 15.5px; line-height: 1.4; }
#tipsFormEl { margin-top: 14px; display: grid; gap: 5px; text-align: left; }
#tipsFormEl .tips-input + .tips-label { margin-top: 6px; }
.tips-label { font-size: 13.5px; font-weight: 600; }
.tips-input {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%;
}
.tips-input:focus { outline: none; border-color: var(--teal-deep); }
.tips-btn { width: 100%; justify-content: center; margin-top: 6px; min-height: 48px; font-size: 16px; }
.tips-small { margin: 12px 0 0; font-size: 13.5px; font-style: italic; }
.tips-error { margin: 0; font-size: 14px; color: var(--warn); font-weight: 600; }
.tips-hp { position: absolute; left: -9999px; }
#tipsDone .tips-btn { margin-top: 20px; }
/* phones: a smaller card, easy to read and close */
@media (max-width: 600px) {
  .tips-card { max-width: 310px; }
  .tips-body { padding: 20px 18px 26px; }
  .tips-logo { width: 36px; height: 36px; margin-bottom: 6px; }
  .tips-title { font-size: 23px; }
  .tips-sub { font-size: 15px; }
  .tips-input { font-size: 16px; padding: 9px 12px; min-height: 44px; }
  .tips-btn { min-height: 46px; font-size: 16px; }
  .tips-close { top: 6px; right: 4px; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-stack { justify-self: center; margin-top: 4px; }
  .hero-sub { max-width: 40ch; }
}
/* Phones: headline keeps the same size ratio to the lines under it as on desktop (about 2.9 to 1) */
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(34.2px, 12.48vw, 49.59px); } /* phone headers 10% smaller */
  .clear-title { font-size: clamp(34.2px, 12.48vw, 49.59px); } /* phone headers 10% smaller */
  /* final section: as close to its desktop size ratio as fits in 4 clean lines (Your work / should pay / for your / dreams.) */
  .dream-title { font-size: clamp(34.2px, 12.14vw, 53.01px); } /* phone headers 10% smaller */
  .dream-help { font-size: 23px; }
}
@media (max-width: 420px) {
  .brand-name { font-size: 19px; }
  .brand-tag { font-size: 11.5px; }
  .brand img { width: 38px; height: 38px; }
  .demo-stack::before { inset: 14px -6px -12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}