/* pay.thatwebdude.me - one stylesheet. Bootstrap 5 comes from a CDN for layout;
   everything brand-level lives here. Mobile first, no build step.
   Conventions: no em dashes in copy, no inline style overrides, single-column on phones. */

:root {
  --ink: #0b0b0b;
  --paper: #ffffff;
  --dim: #5f6368;
  --line: #e6e6e4;
  --accent: #12855a;
  --warn: #b45309;
  --danger: #b3261e;
  --radius: 0;
  --wrap: 1080px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.01em; }
h1 { font-size: 34px; }
h2 { font-size: 24px; margin-top: 0; }
h3 { font-size: 17px; }
p { margin: 0 0 14px; }
a { color: var(--ink); }

/* ---------- header / footer ---------- */
.site-header { border-bottom: 2px solid var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.brand { font-weight: 800; letter-spacing: -0.03em; font-size: 22px; text-decoration: none; }
.site-header .brand { white-space: nowrap; }
.site-header nav a { margin-left: 16px; font-size: 14px; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
/* The public header on a phone. The wordmark is never allowed to break, so it is the nav that gives
   way: at 390px it closes its spacing and stays on one row, and below that it wraps to two lines
   exactly as it did before the name grew. Measured, not guessed: tests/wordmark-fit-check.js. */
@media (max-width: 430px) {
  .site-header nav a { margin-left: 8px; }
}

.site-footer { border-top: 1px solid var(--line); margin-top: 60px; padding: 24px 0 40px; color: var(--dim); font-size: 13px; }
.site-footer .fine a { margin-right: 14px; color: var(--dim); }
/* The maker's mark, under the dashboard: the wordmark, centred, with the links every marketing page
   carries under it. Scoped to .centred so the marketing footers keep their own left-aligned shape. */
.site-footer.centred { text-align: center; }
.site-footer.centred .credit { display: block; width: 120px; margin: 0 auto 14px; }
.site-footer.centred .credit img { display: block; width: 100%; height: auto; }
.site-footer.centred .fine { margin: 0; }
.site-footer.centred .fine a { margin: 0 8px; }
.fine { color: var(--dim); font-size: 12.5px; }
/* Off-screen rather than display:none: a bot that fills every field it can find fills this one, and
   the better ones skip a field that is not in the layout at all. A person never meets it. */
.decoy { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- hero ---------- */
.hero { padding: 52px 0 40px; border-bottom: 1px solid var(--line); }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 700; color: var(--dim); margin-bottom: 12px; }
.hero h1 { font-size: 40px; max-width: 20ch; }
.accent { color: var(--accent); }
.lede { font-size: 17px; max-width: 58ch; color: #26312c; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }

.btn-solid, .btn-quiet {
  display: inline-block; padding: 13px 20px; font-weight: 700; font-size: 15px;
  text-decoration: none; border-radius: var(--radius); border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer;
}
.btn-quiet { background: var(--paper); color: var(--ink); }
.btn-solid:hover { background: #222; }
.btn-quiet:hover { background: #f4f4f2; }

/* ---------- sections ---------- */
section { padding: 44px 0; }
.strip { border-bottom: 1px solid var(--line); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.steps li { border-left: 3px solid var(--ink); padding-left: 16px; }
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
.card { border: 1px solid var(--line); padding: 20px; }
.card.featured { border: 2px solid var(--ink); }
.price { font-size: 30px; font-weight: 800; margin: 4px 0 10px; }
.price span { font-size: 14px; font-weight: 400; color: var(--dim); }
.small-note { color: var(--dim); font-size: 13px; }

/* ---------- the product screens, as a slideshow ----------
   Real screens, captured from the app at phone width, shown whole and one at a time. The pictures are tall
   and three of them stacked is a page of scrolling, so they rotate instead: dots, arrows and a pause
   button, all of them things you can tap. Nothing moves by swipe alone, because a finger on a phone is
   never the only way in and a phone never hovers.
   Bootstrap's carousel is already loaded on these pages, so the behaviour is its own and this is only looks. */
.shots-carousel { margin-top: 20px; }
/* No gutter for the arrows on a phone: at 390px wide, 80px of gutter shrinks the screenshot to two thirds
   and the point of it is that the words on the screen can be read. The arrows sit over the frame instead,
   which is where Bootstrap puts them anyway. Desktops get the gutter, below. */
.shots-carousel .carousel-inner { padding: 0; }
/* Only the three margins a bare <figure> brings with it are zeroed. Bootstrap's own margin-right of -100%
   is what overlaps one slide on the next and carries it out as the next comes in; overriding that (a plain
   `margin: 0` did) stacks the two slides during the transition instead, which doubles the section's height
   for the length of the animation and shoves the page down and back. */
.shots-carousel .shot { margin-top: 0; margin-bottom: 0; margin-left: 0; text-align: center; }
.shots-carousel figcaption {
  color: var(--dim); font-size: 13.5px; line-height: 1.45;
  max-width: 340px; margin: 12px auto 0; text-align: left;
}
.shots-carousel .carousel-indicators { position: static; margin: 18px 0 0; }
.shots-carousel .carousel-indicators [data-bs-target] {
  width: 9px; height: 9px; margin: 0 5px; border: 0; border-radius: 50%;
  background-color: var(--line); opacity: 1;
}
.shots-carousel .carousel-indicators .active { background-color: var(--ink); }
.shots-carousel .carousel-control-prev,
.shots-carousel .carousel-control-next { width: 40px; opacity: 1; }
.shots-carousel .carousel-control-prev-icon,
.shots-carousel .carousel-control-next-icon { width: 20px; height: 20px; filter: invert(1) grayscale(1); }
.shots-controls { margin: 16px 0 0; text-align: center; }
.shots-pause {
  padding: 6px 14px; font: inherit; font-size: 13px; color: var(--dim); cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
}
.shots-pause:hover { color: var(--ink); border-color: var(--ink); }
/* The little bar above each screen is the point of the frame: a phone screen ends where the phone ends,
   so these are not crops that went wrong, and the shape says so before a word is read. */
.phone {
  display: block; border: 1px solid var(--line); border-radius: 20px;
  padding: 9px 9px 11px; background: var(--paper);
  max-width: 340px; margin: 0 auto; text-align: left;
}
.phone::before {
  content: ""; display: block; width: 46px; height: 4px; margin: 1px auto 8px;
  border-radius: 3px; background: var(--line);
}
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }

/* ---------- auth pages ----------
   The auth views render inside layouts/public, which loads this sheet and nothing
   else, so every rule they depend on has to live here. */
.auth-wrap { max-width: 460px; margin: 40px auto; padding: 0 20px; }
.auth-card { border: 1px solid var(--line); background: var(--paper); padding: 26px 22px; }
.auth-card h1 { font-size: 24px; }
.auth-card .lede { font-size: 15px; color: var(--dim); margin-bottom: 4px; }
.auth-card form { margin-top: 18px; }
.auth-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
.auth-card input {
  width: 100%; padding: 12px; border: 2px solid var(--ink); border-radius: var(--radius);
  font: inherit; background: var(--paper);
}
.auth-card input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* A country select sits in the same stack as the text fields, so it takes the same box rather than
   the browser's own. Its native appearance is kept on purpose: the picker a phone opens for a
   native select is one tap and no custom JavaScript, which is what this form wants. */
.auth-card select {
  width: 100%; padding: 12px; border: 2px solid var(--ink); border-radius: var(--radius);
  font: inherit; background: var(--paper);
}
.auth-card select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.auth-card button { margin-top: 20px; width: 100%; }
.auth-card .fine { margin: 16px 0 0; }
.auth-card .fine a { margin-right: 12px; }
/* An inline complaint has to be visible on the field itself, not only under it. */
.auth-card input.is-invalid { border-color: var(--danger); }
.auth-card input.is-invalid:focus { outline-color: var(--danger); }
.auth-card select.is-invalid { border-color: var(--danger); }
.auth-card select.is-invalid:focus { outline-color: var(--danger); }
/* The terms tick. Every input in an auth card is sized for a text field, so a checkbox inherits a
   100% width and a field's padding and renders as a wide empty box: give it its own box, and let
   the sentence sit beside it rather than under a label. */
.auth-card .check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; }
.auth-card .check input { width: 20px; height: 20px; flex: none; padding: 0; margin: 3px 0 0; }
.auth-card .check label { margin: 0; font-weight: 500; line-height: 1.4; }
.field-error[hidden] { display: none; }

.form-error { color: var(--danger); border: 1px solid #f3c2c0; background: #fdf2f2; padding: 10px 12px; font-size: 13.5px; }
.field-error { color: var(--danger); font-size: 12.5px; margin: 4px 0 0; }
.hint { color: var(--dim); font-size: 12px; margin: 4px 0 0; }

/* ---------- error pages ---------- */
.error-page { padding: 60px 0; }
.error-page h1 { font-size: 28px; }
.error-page p { max-width: 60ch; color: #26312c; }

/* ---------- desktop ---------- */
@media (min-width: 760px) {
  h1 { font-size: 44px; }
  .hero h1 { font-size: 52px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .phone, .shots-carousel figcaption { max-width: 360px; }
  .shots-carousel .carousel-inner { padding: 0 48px; }
}