/*
  BeckTech LLC — styles.css

  Palette (per DESIGN.md — five values total; no color is used anywhere on
  the page outside what's listed here):
    --color-bg       #FFFFFF  page background, edge to edge. The only
                               background at the page-section level —
                               sections are separated by whitespace alone.
                               The product tile's own fill (--color-tile-bg,
                               below) is the one exception, scoped to that
                               single element.
    --color-text     #1A1A1A  headings (h1/h2/h3) + body paragraphs,
                               including the address block
    --color-muted    #595959  hero tagline, footer copyright line, and the
                               tile's domain caption (.tile-domain)
    --color-accent   #1E3A8A  links (text + underline) and the link focus
                               outline
    --color-border   #595959  same value as --color-muted, kept as its own
                               property since border and secondary-text are
                               different roles that happen to share a value
                               today. Used for the product tile's own outline
                               and the .tile-demo-q chip's outline — both
                               reference this property, so a future
                               border-only change has one obvious place to
                               land. A flat color, not a tint: changed
                               2026-09-03 from a low-opacity tint of
                               --color-text (rgba(26,26,26,0.14), ~1.33:1
                               against white) after that tint failed WCAG
                               1.4.11's 3:1 boundary-contrast floor.
    --color-tile-bg  #F5F5F5  the product tile's own background fill —
                               nowhere else on the page. Added 2026-09-03,
                               after the strengthened, contrast-passing
                               border above was still confirmed — twice,
                               directly by the site owner — not enough on
                               its own for the tile to read as a distinct
                               card at a glance. See DESIGN.md's revision
                               notes for the full reasoning, the fill values
                               compared, and the recalculated contrast table.
*/

:root {
  --color-bg: #FFFFFF;
  --color-text: #1A1A1A;
  --color-muted: #595959;
  --color-accent: #1E3A8A;
  --color-border: #595959;
  --color-tile-bg: #F5F5F5;

  /* Tight: heading -> following content, consecutive paragraphs/links
     within a section. Loose: header/main/footer gaps + between sections. */
  --space-tight: 1rem;
  --space-loose: 4rem;

  --content-width: 42.5rem;
  --side-padding: 1.5rem;
  --tile-radius: 0.75rem;
}

@media (min-width: 600px) {
  :root {
    --space-loose: 6rem;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  overflow-wrap: break-word;
}

.wrap {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--side-padding);
}

header {
  padding-top: var(--space-loose);
}

main {
  margin-top: var(--space-loose);
}

footer {
  margin-top: var(--space-loose);
  padding-bottom: var(--space-loose);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-text);
  font-weight: 700;
}

h1 {
  font-size: 2rem;
  line-height: 1.15;
}

@media (min-width: 600px) {
  h1 {
    font-size: 2.75rem;
  }
}

h2 {
  font-size: 1.5rem;
  line-height: 1.3;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.3;
}

p {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

address {
  margin: 0;
  color: var(--color-text);
  font-style: normal;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

header p {
  color: var(--color-muted);
  font-size: 1.125rem;
  line-height: 1.4;
}

footer p {
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

a {
  color: var(--color-accent);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: inherit;
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Tight spacing: a heading to the content that follows it, and between
   consecutive paragraphs/links/address within the same section or header. */
.wrap > * + *,
section > * + * {
  margin-top: var(--space-tight);
}

/* The single product tile in "What We Build" — an outlined card with a flat
   background fill (added 2026-09-03, see DESIGN.md's revision note: the
   border alone, though contrast-verified, still wasn't enough to read as a
   distinct region). No shadow — the fill stays inside the page's flat-color
   language rather than introducing a simulated-elevation effect. */
.tile {
  background-color: var(--color-tile-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--tile-radius);
  padding: var(--side-padding);
}

.tile > * + * {
  margin-top: var(--space-tight);
}

/* The tile is itself the link — same idea as a link-preview card in iMessage
   or Slack: the whole card is tappable, not a piece of text inside it. */
.tile-link {
  display: block;
  text-decoration: none;
}

.tile-link:hover {
  border-color: var(--color-accent);
}

/* The domain line reads as a caption, the way a link preview shows the
   source underneath the title/description — not as an inline text link,
   since the whole card already carries that role. */
.tile-domain {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* A small illustrated example — the same question/answer BetterBudget's own
   link-preview image uses, rebuilt here in the tile's own palette instead of
   embedded as an image, so the card shows the product doing something
   rather than only describing it. */
.tile-demo-q {
  width: fit-content;
  margin-left: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--tile-radius);
  padding: 0.5rem 0.875rem;
}

.tile-demo-a {
  color: var(--color-accent);
  font-weight: 700;
}

/* Loose spacing between the three sections inside main (overrides the
   tight rule above via higher specificity, regardless of source order). */
main .wrap > section + section {
  margin-top: var(--space-loose);
}