/* ==========================================================================
   Pawtrait — pawtraitselfie.com
   Built from the design handoff. Tokens, type scale, spacing and radii all
   follow design_handoff_pawtrait_website/README.md.
   ========================================================================== */

:root {
  --ink: #3B2A22;
  --blue: #0D97D4;
  --blue-light: #38b0e6;
  --pale: #D7ECFA;
  --cream: #FFF6E8;
  --amber: #E6A64C;
  --coral: #FF6B5E;
  --body: #6b5d51;
  --muted: #8a7c6d;
  --footer-muted: #a8988a;
  --blue-body: #5d6f7a;
  --border-cream: #ece1cc;
  --card: #fffdf7;
  --dont: #FBE0DC;
  --hairline: rgba(59, 42, 34, .1);
  --hairline-dark: rgba(255, 246, 232, .14);

  --shadow-tile: 0 14px 30px rgba(59, 42, 34, .12);
  --shadow-btn: 0 12px 26px rgba(59, 42, 34, .22);
  --shadow-phone: 0 30px 60px rgba(59, 42, 34, .32);
  --cutout-shadow: drop-shadow(0 24px 40px rgba(59, 42, 34, .22));

  --pad-x: 72px;
  --maxw: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }

/* The one place clipping belongs. Sections used to each carry overflow:hidden
   purely to stop their decorative blobs and drop-shadows causing a horizontal
   scrollbar — but that also sliced those decorations into hard straight edges.
   Clipping once at the viewport lets decoration bleed off the screen edge (which
   reads as intentional) while still killing the sideways scroll. overflow-x:clip
   rather than hidden: clip doesn't create a scroll container, so it can pair
   with a visible y-axis. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display, .btn, .nav a, .eyebrow {
  font-family: "Baloo 2", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { margin: 0; font-weight: 800; color: var(--ink); }
p { margin: 0 0 18px; color: var(--body); }
/* height:auto is essential, not cosmetic. The width/height attributes on each
   <img> are there to reserve space and stop layout shift, but the browser maps
   them to CSS width/height as presentational hints. Any rule below that sets
   only a width (e.g. .hero-dog) would override the width hint while leaving the
   height hint intact — rendering the image at its natural pixel height and
   stretching it vertically. */
img { max-width: 100%; display: block; height: auto; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ---------- shared bits ---------- */
.eyebrow {
  font-size: 15px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--blue);
  margin: 0 0 14px; display: block;
}
.eyebrow.amber { color: var(--amber); }
.eyebrow.ink { color: var(--ink); }
.eyebrow.coral { color: var(--coral); }

a { color: var(--blue); text-decoration: none; }
.prose a {
  border-bottom: 2px solid rgba(13, 151, 212, .3);
  transition: color .15s ease, border-color .15s ease;
}
.prose a:hover { color: var(--coral); border-bottom-color: rgba(255, 107, 94, .4); }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 18px; font-weight: 700; border-radius: 14px;
  padding: 15px 26px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--cream);
  box-shadow: var(--shadow-btn);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--blue); }
.btn:active { transform: translateY(1px); }
.btn.on-blue { background: var(--cream); color: var(--ink); }
.btn.on-blue:hover { background: var(--ink); color: var(--cream); }
.btn .apple { width: 24px; height: 24px; flex: none; }
.btn small { display: block; font-size: 12px; font-weight: 600; opacity: .8; line-height: 1.2; }
.btn .stack { text-align: left; line-height: 1.15; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; padding: 9px 18px;
  font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  background: var(--pale); color: var(--blue);
}
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); flex: none; }

/* ---------- nav ---------- */
.nav-outer { border-bottom: 1px solid var(--hairline); background: var(--cream); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 26px; padding-bottom: 26px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 38px; height: 38px; flex: none; }
.brand .word { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.brand .word .paw { color: var(--ink); }
.brand .word .trait { color: var(--blue); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 17px; font-weight: 600; color: var(--ink); transition: color .15s ease; }
.nav-links a:hover { color: var(--blue); }
.nav-links a.active { font-weight: 700; color: var(--blue); }
/* The colour declaration is load-bearing. `.nav-links a` (0,1,1) outranks the
   `.btn` rule (0,1,0), so without this the Download pill inherits --ink text on
   an --ink background and renders an empty rectangle — the Apple glyph
   disappears too, because it is filled with currentColor.
   Ink on coral, not cream on coral: cream only reaches 2.6:1 against #FF6B5E and
   would fail WCAG AA, whereas ink clears it at 4.9:1. */
.nav-links .btn {
  padding: 11px 20px; font-size: 16px; box-shadow: none;
  background: var(--coral); color: var(--ink);
}
.nav-links .btn:hover { background: var(--ink); color: var(--cream); }

/* ---------- hero ---------- */
/* No overflow:hidden — it was clipping the hero dog's drop-shadow into a hard
   line under her feet. The blobs below are kept inside the hero box vertically
   so nothing spills onto the blue band that follows. */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
        padding-top: 76px; padding-bottom: 88px; position: relative; }
.hero h1 { font-size: 76px; line-height: .98; letter-spacing: -.5px; margin: 18px 0 22px; }
.hero h1 .blue { color: var(--blue); display: block; }
.hero .lead { font-size: 21px; line-height: 1.6; max-width: 520px; }
.hero .reassure { font-size: 16px; color: var(--muted); margin: 18px 0 0; line-height: 1.5; }
.hero-stage { position: relative; min-height: 600px; display: flex; align-items: flex-end; justify-content: center; }
.hero-blob { position: absolute; border-radius: 50%; background: var(--pale); z-index: 0; }
/* Free to bleed sideways now (html clips at the viewport), but pinned inside the
   hero vertically: above and the nav's opaque cream background hides them, below
   and they'd paint over the blue band. */
.hero-blob.a { width: 420px; height: 420px; top: -20px; right: -150px; opacity: .7; }
.hero-blob.b { width: 300px; height: 300px; bottom: 0; left: -70px; opacity: .45; }
.hero-dog { position: absolute; left: 0; bottom: 0; width: 320px; z-index: 1; filter: var(--cutout-shadow); }
.phone {
  position: relative; z-index: 2; width: 280px; height: 583px; margin-left: auto;
  background: var(--ink); border-radius: 44px; padding: 12px;
  box-shadow: var(--shadow-phone);
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #000; }
.phone-screen video, .phone-screen img.poster { width: 100%; height: 100%; object-fit: cover; }
.phone-screen .overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ---------- attention cue band ---------- */
.band { background: var(--blue); color: var(--cream); }
.band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
              padding-top: 66px; padding-bottom: 66px; }
.band h2 { font-size: 42px; line-height: 1.02; color: var(--cream); }
.cue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cue {
  border-radius: 999px; padding: 12px 8px; text-align: center;
  font-family: "Baloo 2", sans-serif; font-size: 15px; font-weight: 700;
  background: rgba(255, 246, 232, .2); color: var(--cream);
}
.cue.cream { background: var(--cream); color: var(--blue); }
.cue.amber { background: var(--amber); color: var(--ink); }

/* ---------- feature grid ---------- */
.section { padding-top: 92px; padding-bottom: 92px; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.section-head h2 { font-size: 54px; line-height: 1.03; }
.section-head p { font-size: 19px; margin-top: 16px; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.tile {
  border-radius: 26px; padding: 34px; min-height: 400px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-tile);
}
.tile h3 { font-size: 46px; line-height: .98; margin-bottom: 14px; }
.tile p { font-size: 18px; line-height: 1.5; font-weight: 600; margin: 0; }
.tile.blue { background: radial-gradient(120% 120% at 28% 22%, var(--blue-light), var(--blue) 62%); color: var(--cream); }
.tile.blue2 { background: radial-gradient(120% 120% at 72% 26%, var(--blue-light), var(--blue) 62%); color: var(--cream); }
.tile.cream { background: var(--cream); border: 2px solid var(--border-cream); box-shadow: none; }
.tile.brown { background: var(--ink); color: var(--cream); }
.tile.amber { background: var(--amber); color: var(--ink); }
.tile.coral { background: var(--coral); color: var(--cream); }
.tile.blue h3, .tile.blue2 h3, .tile.brown h3, .tile.coral h3 { color: var(--cream); }
.tile.amber h3 { color: var(--cream); }
.tile.blue p, .tile.blue2 p, .tile.brown p, .tile.coral p { color: rgba(255, 246, 232, .88); }
.tile.amber p { color: rgba(59, 42, 34, .8); }
.tile.cream p { color: var(--body); }
.tile .accent-blue { color: var(--blue); }
.tile .accent-amber { color: var(--amber); }
.tile .accent-coral { color: var(--coral); }
.tile .accent-cream { color: var(--cream); }
.tile .accent-ink { color: var(--ink); }

/* ---------- how it works ---------- */
.how { background: var(--pale); }
.how h2, .how .section-head h2 { color: var(--ink); }
.how .section-head p { color: var(--blue-body); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.step .num {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Baloo 2", sans-serif; font-size: 28px; font-weight: 800; color: var(--cream);
}
.step:nth-child(1) .num { background: var(--blue); }
.step:nth-child(2) .num { background: var(--amber); }
.step:nth-child(3) .num { background: var(--coral); }
.step h3 { font-size: 28px; margin-bottom: 10px; }
.step p { font-size: 18px; color: var(--blue-body); margin: 0; }

/* ---------- mascot lineup ---------- */
.mascots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px; }
.mascot { text-align: center; }
.mascot img { width: 100%; border-radius: 50%; aspect-ratio: 1; object-fit: cover; background: var(--pale); }
.mascot span { display: block; margin-top: 12px; font-size: 15px; font-weight: 700;
               font-family: "Baloo 2", sans-serif; color: var(--ink); line-height: 1.25; }

/* ---------- closing CTA ---------- */
.cta {
  background: radial-gradient(110% 130% at 30% 20%, var(--blue-light), var(--blue) 62%);
  color: var(--cream); position: relative; overflow: hidden;
}
.cta-inner { padding-top: 88px; padding-bottom: 88px; max-width: 720px; }
.cta h2 { font-size: 58px; line-height: 1.03; color: var(--cream); margin-bottom: 18px; }
.cta h2 .cream-em { color: #fff; }
.cta p { color: rgba(255, 246, 232, .9); font-size: 21px; margin-bottom: 30px; }
.cta-dog {
  position: absolute; right: 60px; bottom: 0; width: 340px; z-index: 1;
  filter: var(--cutout-shadow);
}

/* ---------- footer ---------- */
footer { background: var(--ink); color: var(--cream); }
.footer-inner { padding-top: 68px; padding-bottom: 40px; display: grid;
                grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer-brand .word { font-size: 23px; font-weight: 800; font-family: "Baloo 2", sans-serif; }
.footer-brand .word .paw { color: var(--cream); }
.footer-brand .word .trait { color: var(--blue-light); }
.footer-brand p { color: var(--footer-muted); font-size: 16px; margin: 12px 0 0; max-width: 320px; }
.footer-col h4 { font-family: "Baloo 2", sans-serif; font-size: 15px; font-weight: 800;
                 letter-spacing: 3px; text-transform: uppercase; color: var(--amber); margin: 0 0 16px; }
.footer-col a, .footer-col span { display: block; color: var(--cream); font-size: 16px;
                                  margin-bottom: 10px; transition: color .15s ease; }
.footer-col a:hover { color: var(--blue-light); }
.footer-col span { color: var(--footer-muted); }
.footer-rule { border-top: 1px solid var(--hairline-dark); }
.footer-legal { padding-top: 24px; padding-bottom: 40px; font-size: 15px; color: var(--footer-muted); }

/* ---------- policy + support pages ---------- */
.page-head { padding-top: 72px; padding-bottom: 30px; position: relative; }
.page-head h1 { font-size: 60px; line-height: 1; margin-bottom: 20px; }
.page-head .lead { font-size: 21px; line-height: 1.6; max-width: 720px; }
/* Sized by height, not width: a full-body portrait cutout has to be told how
   tall it may be, or it dictates the header's height. bottom:0 rather than a
   negative offset so the drop-shadow falls clear of the section boundary. */
.page-head .head-dog { position: absolute; right: 72px; bottom: 0; height: 250px; width: auto; filter: var(--cutout-shadow); }
.page-head.has-dog { min-height: 322px; }
/* Keeps the lead from running underneath the dog at narrow desktop widths. */
.page-head.has-dog .lead { max-width: 560px; }
/* top:0, not a negative offset. The blob sits at z-index:-1 so it paints beneath
   every block background, which means anything poking above this header lands
   behind the nav's opaque cream and vanishes along a hard horizontal line —
   the exact "cut off" look we're removing. Sideways it may bleed freely. */
.page-head .blob { position: absolute; width: 300px; height: 300px; border-radius: 50%;
                   background: var(--pale); top: 0; right: -110px; opacity: .55; z-index: -1; }

.updated {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(59, 42, 34, .06); border-radius: 999px;
  padding: 9px 18px; font-size: 15px; font-weight: 700; color: var(--ink);
  font-family: "Baloo 2", sans-serif;
}
.updated .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }

.callout {
  background: var(--pale); border-radius: 22px; border-left: 6px solid var(--blue);
  padding: 30px 34px; margin: 36px 0 8px; max-width: 900px;
}
.callout p { font-size: 19px; line-height: 1.65; font-weight: 600; color: var(--ink); margin: 0; }

.rule { border: 0; border-top: 2px solid var(--hairline); margin: 46px 0 0; }

.prose { max-width: 720px; padding-bottom: 40px; }
.prose h2 { font-size: 32px; line-height: 1.15; margin: 46px 0 14px; }
.prose p, .prose li { font-size: 19px; line-height: 1.75; color: var(--body); }
.prose ol { padding-left: 22px; }
.prose ol li { margin-bottom: 10px; }

.list-card {
  background: var(--card); border: 2px solid var(--border-cream); border-radius: 16px;
  padding: 18px 22px; margin-bottom: 12px; display: flex; gap: 14px; align-items: flex-start;
}
.list-card .dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 11px; flex: none; }
.list-card .dot.blue { background: var(--blue); }
.list-card .dot.amber { background: var(--amber); }
.list-card p { margin: 0; font-size: 18px; line-height: 1.6; }
.list-card strong { color: var(--ink); }

.dont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 900px; }
.dont {
  background: var(--dont); border-radius: 14px; padding: 15px 20px;
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; font-weight: 700; color: var(--ink);
}
.dont .x { color: var(--coral); font-weight: 800; font-size: 19px; flex: none; }

.contact-card {
  background: var(--card); border: 2px solid var(--border-cream); border-radius: 22px;
  padding: 28px 32px; max-width: 720px; margin-top: 12px;
}
.contact-card p { margin: 0; font-size: 18px; }

/* ---------- support: form + faq ---------- */
.form-card {
  background: var(--card); border: 2px solid var(--border-cream); border-radius: 22px;
  padding: 36px; max-width: 720px;
}
.form-card h2 { font-size: 32px; margin: 0 0 8px; }
.form-card .hint { font-size: 17px; color: var(--muted); margin-bottom: 26px; }
.field { margin-bottom: 20px; }
.field label {
  display: block; font-family: "Baloo 2", sans-serif; font-size: 14px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.field label .opt { color: var(--muted); font-weight: 700; }
.field input, .field textarea {
  width: 100%; background: var(--cream); border: 2px solid var(--border-cream); border-radius: 14px;
  padding: 14px 16px; font-family: inherit; font-size: 17px; color: var(--ink);
  transition: border-color .15s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field textarea { min-height: 150px; resize: vertical; }
.field .err { display: none; margin: 7px 0 0; font-size: 15px; color: #c0392b; font-weight: 700; }
.field.invalid input, .field.invalid textarea { border-color: var(--coral); }
.field.invalid .err { display: block; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-foot .note { font-size: 15px; color: var(--muted); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: 14px; padding: 16px 20px; font-size: 17px; font-weight: 700; margin-bottom: 22px; display: none; }
.form-status.ok { display: block; background: var(--pale); color: var(--ink); border-left: 6px solid var(--blue); }
.form-status.bad { display: block; background: var(--dont); color: var(--ink); border-left: 6px solid var(--coral); }

.faq { max-width: 800px; }
.faq-item { border-top: 2px solid var(--hairline); padding: 28px 0; }
.faq-item h3 { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
.faq-item p { font-size: 19px; margin: 0; max-width: 760px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .mascots { grid-template-columns: repeat(4, 1fr); }
  .hero h1 { font-size: 60px; }
  .section-head h2 { font-size: 44px; }
}

@media (max-width: 900px) {
  :root { --pad-x: 22px; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; padding-bottom: 52px; }
  .hero-stage { min-height: 0; padding-top: 20px; }
  .hero-dog { width: 200px; left: -6px; }
  .band-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 46px; padding-bottom: 46px; }
  .cue-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding-top: 52px; padding-bottom: 52px; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 46px; }
  .cta-dog { display: none; }
  .cta-inner { padding-top: 52px; padding-bottom: 52px; }
  .page-head .head-dog { display: none; }
  .page-head.has-dog { min-height: 0; }
  .page-head.has-dog .lead { max-width: 720px; }
  .dont-grid { grid-template-columns: 1fr; }
  .nav-links .btn { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .tiles { grid-template-columns: 1fr; }
  .mascots { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .hero h1 { font-size: 42px; }
  .hero .lead { font-size: 18px; }
  .section-head h2 { font-size: 34px; }
  .band h2 { font-size: 30px; }
  .tile { min-height: 300px; padding: 26px; }
  .tile h3 { font-size: 34px; }
  .tile p { font-size: 16px; }
  .cta h2 { font-size: 36px; }
  .cta p { font-size: 18px; }
  .page-head h1 { font-size: 38px; }
  .page-head .lead { font-size: 18px; }
  .prose h2 { font-size: 24px; line-height: 1.18; }
  .prose p, .prose li { font-size: 16px; }
  .callout { padding: 22px 24px; }
  .callout p { font-size: 17px; }
  .faq-item h3 { font-size: 22px; }
  .faq-item p { font-size: 16px; }
  .form-card { padding: 24px; }
  .eyebrow { font-size: 12px; letter-spacing: 2px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 14px; }
  .brand .word { font-size: 22px; }
  .mascot span { font-size: 13px; }
  .step h3 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}