/* easynowdog.com, direction B (Doodle Buddies). Shared by all pages.
   Based on the approved mockup brand/mockups/src/signup.html. Three widths:
   base (600–899px, tablets) = the mockup as approved; phones (≤599px) get a compact first screen with the form on top;
   desktop (≥900px) = two columns. */
:root { --butter:#FFE27A; --coral:#FF7A6B; --coral-d:#E85F50; --sky:#8EC9F2; --plum:#3A2650; --cream:#FFF8EA; --ink2:#5D4F70; --white:#FFFFFF;
  --disp:"Shantell Sans","Comic Sans MS",sans-serif; --body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --wob:255px 15px 225px 15px / 15px 225px 15px 255px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; background:var(--cream); color:var(--plum); font:400 17px/1.55 var(--body); overflow-x:hidden; }
p, li, .get span, .lead { text-wrap:pretty; }
a { color:var(--plum); }
.bg { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bg i { position:absolute; display:block; }
.bg .b1 { width:520px; height:500px; right:-200px; top:-180px; background:var(--butter); border-radius:48% 52% 55% 45% / 50% 42% 58% 50%; }
.bg .b2 { width:300px; height:280px; left:-150px; bottom:-60px; background:var(--sky); opacity:.45; border-radius:55% 45% 40% 60% / 45% 55% 45% 55%; }
header, main, footer { position:relative; z-index:1; }
header { max-width:1160px; margin:0 auto; padding:18px 20px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
header .lock { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--plum); font:800 1.6rem/1 var(--disp); }
header .lock img { width:48px; height:48px; display:block; }
main { max-width:1160px; margin:0 auto; padding:18px 20px 40px; display:grid; gap:22px; grid-template-areas: "hero" "side" "details"; }
.hero { grid-area:hero; }
.side { grid-area:side; display:grid; gap:0; }
.details { grid-area:details; }
.sticker { display:inline-block; background:var(--coral); color:#fff; font:800 14px/1 var(--disp); letter-spacing:.03em;
  padding:8px 14px 9px; border-radius:999px; transform:rotate(-4deg); box-shadow:0 3px 0 var(--plum); margin:4px 0 14px; }
/* The FREE GUIDE sticker exists twice in free.html: in the header row (phones only) and above the h1 (everything else). */
header .sticker { display:none; margin:0; transform:rotate(3deg); }
h1 { margin:0; font:800 clamp(2.4rem, 9vw, 4.1rem)/0.98 var(--disp); letter-spacing:-.01em; text-wrap:balance; }
h1 .u { position:relative; color:var(--coral); white-space:nowrap; }
h1 .u svg { position:absolute; left:2%; bottom:-.2em; width:96%; height:.32em; }
.lead { margin:18px 0 0; font:700 1.15rem/1.45 var(--body); max-width:34ch; }
.cover { display:flex; justify-content:center; position:relative; z-index:2; margin-bottom:-56px; }
.cover img { width:min(62%, 260px); height:auto; display:block; transform:rotate(-3deg); border-radius:6px;
  box-shadow:0 2px 0 var(--plum), 0 16px 30px rgba(58,38,80,.22); }
.formcard { position:relative; z-index:1; background:var(--white); border:3px solid var(--plum); border-radius:22px; padding:78px 20px 18px; box-shadow:6px 6px 0 var(--plum); }
.formcard h2 { margin:0 0 4px; font:800 1.5rem/1.15 var(--disp); }
.formcard .sub { margin:0 0 16px; color:var(--ink2); font-weight:600; }
label { display:block; font:700 .9rem/1.2 var(--body); margin:0 0 6px; }
input { width:100%; font:600 1.05rem/1.2 var(--body); color:var(--plum); background:var(--cream); border:3px solid var(--plum);
  border-radius:var(--wob); padding:14px 16px; margin:0 0 14px; outline:none; }
input::placeholder { color:#9a8fab; }
input:focus { background:#fff; box-shadow:0 0 0 4px var(--butter); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Turnstile runs in interaction-only mode: the box only appears when Cloudflare needs a click, so usually it takes no space. */
.turnstile { margin:0; min-height:0; }
.turnstile:not(:empty) { margin:0 0 14px; }
.btn, button { display:block; width:100%; text-align:center; text-decoration:none; font:800 1.3rem/1 var(--disp); color:#fff; background:var(--coral); border:3px solid var(--plum); border-radius:var(--wob);
  padding:17px 16px 18px; box-shadow:5px 5px 0 var(--plum); transform:rotate(-.6deg); cursor:pointer; margin-top:4px; }
.btn:hover, button:hover { background:var(--coral-d); }
.btn:active, button:active { transform:translate(3px,3px) rotate(-.6deg); box-shadow:2px 2px 0 var(--plum); }
button[disabled] { opacity:.7; cursor:wait; }
.btn.alt { background:var(--butter); color:var(--plum); }
.btn.alt:hover { background:#F9D55A; }
.msg { margin:12px 0 0; padding:10px 14px; border-radius:12px; font-weight:700; display:none; }
.msg.err { display:block; background:#FFE3DF; color:#8C2F24; border:2px solid var(--coral); }
.fine { margin:14px 0 0; font:600 .82rem/1.45 var(--body); color:var(--ink2); text-align:center; }
.details h3 { margin:0 0 10px; font:800 1.3rem/1.2 var(--disp); }
.inside { list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px; }
.inside li { display:grid; grid-template-columns:28px 1fr; gap:8px; font-weight:600; }
.inside li::before { content:""; width:22px; height:20px; margin-top:3px; background:var(--coral);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C5 15 1 11.5 1 7a5.5 5.5 0 0 1 11-1 5.5 5.5 0 0 1 11 1c0 4.5-4 8-11 14z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C5 15 1 11.5 1 7a5.5 5.5 0 0 1 11-1 5.5 5.5 0 0 1 11 1c0 4.5-4 8-11 14z'/%3E%3C/svg%3E") center/contain no-repeat; }
.get { background:var(--butter); border-radius:18px; padding:16px 18px; display:grid; gap:10px; transform:rotate(.4deg); }
.get div { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; font-weight:600; }
.get b.n { width:30px; height:30px; border-radius:50%; background:var(--plum); color:var(--butter); display:grid; place-items:center; font:800 1rem/1 var(--disp); }
footer { max-width:1160px; margin:0 auto; padding:10px 20px 34px; display:grid; grid-template-columns:40px 1fr; align-items:center; gap:12px; color:var(--ink2); font:600 .9rem/1.4 var(--body); }
footer .m { width:40px; height:40px; display:block; }
footer b { color:var(--plum); font-family:var(--disp); font-weight:800; font-size:1.05rem; }
footer .links { display:block; font-size:.85rem; }
footer .links a { color:var(--ink2); }

/* Simple pages (thanks, guide-only, privacy, 404): one card in the middle. */
main.simple { grid-template-areas:none; grid-template-columns:1fr; justify-items:center; padding-top:34px; }
.card { width:100%; max-width:560px; background:var(--white); border:3px solid var(--plum); border-radius:22px; padding:28px 22px 24px; box-shadow:6px 6px 0 var(--plum); }
.card h1 { font-size:clamp(2rem, 7vw, 2.8rem); margin-bottom:10px; }
.card p { margin:10px 0; }
.card .big { font-weight:700; font-size:1.1rem; }
.card .btn { margin-top:18px; }
.card .quiet { color:var(--ink2); font-weight:600; font-size:.95rem; }
.card .tip { background:var(--butter); border-radius:14px; padding:12px 16px; margin:18px 0 0; transform:rotate(-.4deg); font-weight:600; }
.card .tip b { font-family:var(--disp); font-weight:800; }
/* Long-text pages (privacy) */
.prose h2 { margin:22px 0 6px; font:800 1.25rem/1.2 var(--disp); }
.prose ul { margin:8px 0; padding-left:22px; }
.prose li { margin:4px 0; }
.prose li b { color:var(--plum); }

/* Phones: most visitors arrive from a TikTok/Instagram bio in an in-app browser (about 390x650 visible).
   Goal: the signup button is in the first screen. The sticker moves into the header row, the headline and lead are
   a little tighter, the form card comes before the cover (smaller), and the "(PDF)" subtitle is dropped. */
@media (max-width: 599px) {
  header { padding-top:14px; }
  header .lock img { width:44px; height:44px; }
  header .sticker { display:inline-block; }
  .hero .sticker { display:none; }
  main { padding-top:10px; gap:16px; }
  h1 { font-size:clamp(2.1rem, 8.6vw, 4.1rem); }
  .lead { margin-top:10px; font-size:1.05rem; line-height:1.4; }
  .formcard { order:1; padding:16px 16px 14px; }
  .formcard h2 { margin-bottom:10px; font-size:1.4rem; }
  .formcard .sub { display:none; }
  .cover { order:2; margin:22px 0 0; }
  .cover img { width:min(44%, 180px); }
  label { margin-bottom:4px; }
  input { padding:12px 14px; margin-bottom:10px; }
  .turnstile:not(:empty) { margin-bottom:10px; }
}

@media (min-width: 900px) {
  body { font-size:18px; }
  header { padding-top:26px; }
  header .lock { font-size:1.9rem; }
  header .lock img { width:58px; height:58px; }
  main:not(.simple) { grid-template-columns: 1.1fr .9fr; grid-template-rows: auto 1fr; grid-template-areas: "hero side" "details side"; column-gap:72px; row-gap:30px; padding-top:28px; align-items:start; }
  .side { align-self:start; }
  .cover img { width:min(64%, 270px); }
  .formcard { padding:84px 26px 20px; }
  .card { padding:36px 34px 30px; }
  .bg .b1 { width:760px; height:720px; right:-160px; top:-240px; }
  .bg .b2 { width:420px; height:400px; left:-180px; bottom:-120px; }
}
@media (prefers-reduced-motion: reduce) { .sticker, .cover img, .get, .btn, button, .card .tip { transform:none; } }