/* Yardage Book — shared signup + article pieces (v2).
   Used by the homepage, /free-guide/, /start/ and every /learn/ article.
   Colors match the v2 homepage: pine ground, cream paper, flag gold. */

.yb-signup [hidden], .yb-card [hidden] { display:none !important; }
.yb-signup { --yb-pine:#12372A; --yb-ink:#14231B; --yb-gold:#D8B04A; --yb-gold-hi:#E6C25E; --yb-paper:#F2EDE4; --yb-card:#FBF8F1; --yb-muted:#56604F; --yb-miss:#A8361F; }

.yb-form { display:flex; gap:10px; width:100%; max-width:580px; position:relative; margin:0; }
.yb-form input[type="email"] {
  flex:1; min-width:0; height:58px; padding:0 18px; border-radius:14px;
  font-family:inherit; font-size:17px; font-weight:500; line-height:1.2; outline:none;
  transition:border-color .15s ease, background-color .15s ease;
}
.yb-form button {
  height:58px; padding:0 22px; border:0; border-radius:14px; cursor:pointer;
  font-family:inherit; font-size:17px; font-weight:700; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .15s ease, background-color .15s ease;
}
.yb-form button:hover { transform:translateY(-2px); }
.yb-form button[disabled] { opacity:.7; cursor:progress; transform:none; }
.yb-form .yb-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.yb-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* On dark grounds */
.yb-signup--dark .yb-form input[type="email"] { border:1.5px solid rgba(242,237,228,.38); background:rgba(242,237,228,.06); color:#F2EDE4; }
.yb-signup--dark .yb-form input[type="email"]::placeholder { color:rgba(242,237,228,.55); }
.yb-signup--dark .yb-form input[type="email"]:focus { border-color:var(--yb-gold); background:rgba(242,237,228,.1); }
.yb-signup--dark .yb-form button { background:var(--yb-gold); color:var(--yb-ink); }
.yb-signup--dark .yb-form button:hover { background:var(--yb-gold-hi); }
.yb-signup--dark .yb-note { color:#9FB0A5; }
.yb-signup--dark .yb-done { background:rgba(216,176,74,.14); border:1.5px solid rgba(216,176,74,.5); color:#F2EDE4; }

/* On light grounds */
.yb-signup--light .yb-form input[type="email"] { border:2px solid var(--yb-ink); background:#fff; color:var(--yb-ink); }
.yb-signup--light .yb-form input[type="email"]::placeholder { color:#7C8479; }
.yb-signup--light .yb-form input[type="email"]:focus { border-color:var(--yb-pine); box-shadow:0 0 0 3px rgba(18,55,42,.15); }
.yb-signup--light .yb-form button { background:var(--yb-pine); color:#F2EDE4; }
.yb-signup--light .yb-form button:hover { background:#1D4D3A; }
.yb-signup--light .yb-note { color:var(--yb-muted); }
.yb-signup--light .yb-done { background:var(--yb-card); border:2px solid var(--yb-ink); color:var(--yb-ink); }

.yb-note { font-size:14px; line-height:1.45; margin:10px 0 0; }
.yb-err { font-size:14.5px; line-height:1.45; margin:10px 0 0; color:#E27A62; }
.yb-signup--light .yb-err { color:var(--yb-miss); }
.yb-err a { color:inherit; font-weight:700; }
.yb-done { display:flex; gap:12px; align-items:center; max-width:580px; padding:16px 18px; border-radius:14px; font-size:16px; line-height:1.45; }
.yb-done-tick { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--yb-gold); color:var(--yb-ink); display:flex; align-items:center; justify-content:center; }

@media (max-width: 560px) {
  .yb-form { flex-direction:column; }
  .yb-form input[type="email"], .yb-form button { flex:none; width:100%; height:56px; }
}
.yb-signup--center { max-width:580px; margin:0 auto; text-align:center; }
.yb-signup--center .yb-form, .yb-signup--center .yb-done { margin-inline:auto; text-align:left; }
.yb-signup--stack .yb-form { flex-direction:column; }
.yb-signup--stack .yb-form input[type="email"], .yb-signup--stack .yb-form button { flex:none; width:100%; }

.yb-signup button:focus-visible, .yb-signup input:focus-visible, .yb-sticky a:focus-visible, .yb-sticky button:focus-visible { outline:3px solid #D8B04A; outline-offset:3px; }

/* ── Article: the inline card (inserted after the "Save this" links) ── */
.yb-card {
  margin:2.5rem 0; padding:24px 26px; border:2px solid #14231B; border-radius:20px;
  background:#E8E0D1; color:#14231B; box-shadow:8px 8px 0 #14231B;
  display:grid; grid-template-columns:112px minmax(0,1fr); gap:24px; align-items:center;
}
.yb-card h3 { margin:0 0 6px; font-size:1.45rem; line-height:1.15; color:#14231B; font-weight:800; letter-spacing:-.01em; }
.yb-card p.yb-card-sub { margin:0 0 14px; font-size:1rem; line-height:1.5; color:#39443B; }
.yb-card-mini { width:112px; height:128px; background:#F6F1E7; border-radius:10px; transform:rotate(-4deg); box-shadow:0 14px 24px -14px rgba(0,0,0,.5); padding:10px; display:flex; flex-direction:column; gap:6px; }
.yb-card-mini b { display:block; font-size:10px; font-weight:900; letter-spacing:.04em; border-bottom:1.5px solid #14231B; padding-bottom:4px; }
.yb-card-mini i { display:block; height:8px; border-radius:2px; background:#E7C9BE; }
.yb-card-mini i:first-of-type { background:#CFDDB8; }
@media (max-width: 640px) {
  .yb-card { grid-template-columns:1fr; box-shadow:5px 5px 0 #14231B; padding:20px; }
  .yb-card-mini { display:none; }
}

/* ── Phone: sticky bar ── */
.yb-sticky {
  position:fixed; left:0; right:0; bottom:0; z-index:60; padding:12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(242,237,228,0), rgba(242,237,228,.96) 34%);
  transform:translateY(120%); transition:transform .3s ease; pointer-events:none;
}
.yb-sticky.is-on { transform:translateY(0); pointer-events:auto; }
.yb-sticky-in { max-width:560px; margin:0 auto; background:#12372A; color:#F2EDE4; border-radius:18px; padding:10px 8px 10px 14px; display:flex; align-items:center; gap:12px; box-shadow:0 18px 34px -16px rgba(0,0,0,.6); }
.yb-sticky-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.yb-sticky-txt b { font-size:15px; }
.yb-sticky-txt > span { font-size:12.5px; color:#C9D3CB; }
.yb-sticky-txt .yb-st-short { display:none; }
@media (max-width:380px) { .yb-sticky-txt .yb-st-long { display:none; } .yb-sticky-txt .yb-st-short { display:inline; } }
.yb-sticky-go { height:44px; padding:0 16px; border-radius:12px; background:#D8B04A; color:#14231B; font-weight:700; font-size:15px; text-decoration:none; display:flex; align-items:center; }
.yb-sticky-x { width:40px; height:40px; border:0; background:none; color:#C9D3CB; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:10px; }
@media (min-width: 721px) { .yb-sticky { display:none; } }
@media (prefers-reduced-motion: reduce) { .yb-sticky, .yb-form button { transition:none; } }