/* ============================================================
   Dogalicious — Free Trial base primitives
   A scoped subset of homepage/styles.css (.wrap/.eyebrow/.sec-head/.btn),
   since those utilities are NOT globally present in the live theme.
   The reset rules are scoped to .dga-ft so they never leak into the
   Blocksy global header/footer that also render on this page.
   Design tokens (--teal, --font-*, --r-*, --shadow-*) come from the
   site-wide dogalicious-tokens.css.
   ============================================================ */

.dga-ft, .dga-ft * { box-sizing: border-box; }
.dga-ft img { max-width: 100%; display: block; }
.dga-ft a { color: inherit; text-decoration: none; }
.dga-ft { background: var(--cream); color: var(--ink); }

/* Inner content width */
.dga-ft .wrap { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 720px) { .dga-ft .wrap { padding-left: 20px; padding-right: 20px; } }

/* English secondary line */
.dga-ft .en { font-family: var(--font-ui); letter-spacing: 0.01em; }

/* Section eyebrow */
.dga-ft .eyebrow {
  font-family: var(--font-ui); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--forest);
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
}

/* Shared section heading block */
.dga-ft .sec-head { margin-bottom: 28px; }
.dga-ft .sec-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
.dga-ft .sec-head .en-sub {
  font-family: var(--font-ui); font-weight: 600; font-size: 16px;
  color: var(--charcoal); margin: 8px 0 0;
}

/* Intro heading ("Hong Kong's first fresh pet food brand") — same display
   font/weight as the other section headings (it had no font rule). */
.dga-ft .intro h2 {
  font-family: var(--font-display); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.01em; color: var(--ink);
}

/* ----- Buttons ----- */
.dga-ft .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  border: 3px solid var(--ink); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sticker); padding: 13px 26px;
  cursor: pointer; text-align: center;
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.dga-ft .btn:hover { transform: translate(-1px,-2px); box-shadow: 6px 7px 0 var(--ink); }
.dga-ft .btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }
.dga-ft .btn-primary { background: var(--brand, var(--teal)); color: #fff; }
.dga-ft .btn-primary:hover { background: var(--brand-hover, #00a7b6); }
.dga-ft .btn-ghost { background: var(--white); color: var(--ink); }
.dga-ft .btn-ghost:hover { background: var(--paper); }
.dga-ft .btn-sm { font-size: 13px; padding: 8px 16px; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }

/* ----- Inline auth error / notice (added for real wiring) ----- */
.dga-ft .ft-msg {
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  border-radius: var(--r-md); padding: 9px 12px; margin: 2px 0 0; line-height: 1.4;
  display: none;
}
.dga-ft .ft-msg.show { display: block; }
.dga-ft .ft-msg.error { background: color-mix(in oklab, #e5484d 14%, var(--white)); color: #b42318; border: 2px solid #e5484d; }
.dga-ft .ft-msg.info  { background: color-mix(in oklab, var(--mint) 40%, var(--white)); color: var(--forest); border: 2px solid var(--forest); }
.dga-ft .btn.is-loading { opacity: .7; pointer-events: none; }