/* The First 30 Days™. On theme.css's tokens and v3.css's pieces; green is
   this page's accent for "new to testing", as the brief asks. */
body:has(.f30) { background:var(--v3-page, #f4f6f8) }
.f30 { --f30-green:var(--v3-green, #1f7a4d); padding-bottom:48px }
.f30-sec { margin-top:24px }
.f30-h2 { font-size:clamp(1.4rem, 2.2vw, 1.9rem); margin:4px 0 14px }
.f30-h3 { font-family:var(--fb); font-size:1.1rem; font-weight:800; margin:0 0 10px }
.f30-muted { color:var(--muted); margin:-6px 0 14px }

.f30-open { background:linear-gradient(135deg, #e9f6ef, #fff 60%); border-bottom:1px solid var(--hair) }
.f30-open__row { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:32px; align-items:center; padding-top:28px; padding-bottom:28px }
.f30-label { background:var(--f30-green) }
.f30-open h1 { font-size:clamp(1.9rem, 3.2vw, 2.7rem); line-height:1.12; margin:12px 0 10px }
.f30-open__lede { color:var(--muted); margin:0; max-width:58ch }
.f30-buy { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px }
.f30-buy__p { display:flex; flex-direction:column; margin-right:6px }
.f30-buy__p b { font-size:2rem; line-height:1; color:var(--navy) }
.f30-buy__p small { color:var(--muted); font-size:.8rem }
.f30 .btn { min-height:48px; padding:10px 22px; font-size:1rem; white-space:nowrap }
.f30 .btn--sm { min-height:42px; padding:8px 16px; font-size:.92rem }
.f30-ticks { list-style:none; display:flex; flex-wrap:wrap; gap:6px 20px; margin:16px 0 0; padding:0; font-size:.9rem; font-weight:700; color:var(--f30-green) }
.f30-ticks li, .f30-list li { display:flex; gap:8px; align-items:baseline }
.f30-ticks li::before, .f30-list li::before { content:''; flex:none; width:10px; height:5px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg) translateY(-3px) }
.f30-open__img { position:relative; margin:0 }
.f30-open__img img { width:100%; height:auto; max-height:440px; object-fit:cover; border-radius:var(--v3-r, 14px); display:block }
.f30-open__img figcaption { position:absolute; left:14px; bottom:14px; background:#fff; border-radius:10px; padding:8px 12px; font-size:.85rem; display:flex; flex-direction:column; box-shadow:var(--shadow-lift) }
.f30-open__img figcaption span { color:var(--muted); font-size:.78rem }

.f30-jump { position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--hair) }
.f30-jump__row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:8px; padding-bottom:8px }
.f30-jump__links { display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; white-space:nowrap; font-size:.92rem; font-weight:700 }
.f30-jump__links::-webkit-scrollbar { display:none }
.f30-jump__links a { color:var(--navy); padding:6px 0 }
.f30-jump__links a.is-on { color:var(--blue); box-shadow:inset 0 -2px 0 var(--blue) }
[id="box"], [id="begin"], [id="guide"], [id="after"], [id="questions"] { scroll-margin-top:200px }

.f30-items { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px }
.f30-item { display:flex; gap:12px; border:1px solid var(--hair); border-radius:12px; padding:12px; align-items:flex-start }
.f30-item img { width:64px; height:64px; object-fit:contain; flex:none; background:var(--mist); border-radius:8px }
.f30-item div { display:flex; flex-direction:column; gap:2px; font-size:.9rem }
.f30-item small { color:var(--muted) }
.f30-item em { font-style:normal; font-weight:800; color:var(--blue) }
.f30-item--inc em { color:var(--f30-green) }
.f30-item__ic { width:64px; height:64px; flex:none; border-radius:8px; background:#e9f6ef; color:var(--f30-green); display:grid; place-items:center; font-weight:800; font-size:1.3rem }
.f30-item__ic--case::before { content:''; width:26px; height:18px; border:2px solid currentColor; border-radius:4px; box-shadow:inset 0 6px 0 -4px currentColor }
.f30-sum { margin-top:14px; background:var(--mist); border-radius:10px; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.f30-sum p { margin:0; flex:1; min-width:240px; font-size:.92rem }

.f30-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; counter-reset:f30s }
.f30-steps li { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r, 14px); padding:16px; counter-increment:f30s; display:flex; flex-direction:column; gap:4px }
.f30-steps li::before { content:counter(f30s); width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800 }
.f30-steps li:nth-child(3)::before { background:var(--navy-deep) }
.f30-steps li:nth-child(4)::before { background:var(--f30-green) }
.f30-steps__w { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.f30-steps p { margin:0; color:var(--muted); font-size:.92rem }

.f30-guide-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap }
.f30-tabs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:6px 0 16px }
.f30-tab { border:1px solid var(--hair); background:#fff; border-radius:10px; padding:10px 12px; text-align:left; color:var(--navy); cursor:pointer; display:flex; flex-direction:column; font:inherit; min-height:56px }
.f30-tab small { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.f30-tab[aria-selected="true"] { color:#fff; border-color:transparent }
.f30-tab[aria-selected="true"] small { color:#fff; opacity:.9 }
.f30-tab--w1[aria-selected="true"] { background:#1f6fb8 }
.f30-tab--w2[aria-selected="true"] { background:#0f5d9e }
.f30-tab--w3[aria-selected="true"] { background:var(--navy-deep) }
.f30-tab--w4[aria-selected="true"] { background:var(--f30-green) }
.f30-week { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px }
.f30-week h3 { font-family:var(--fb); font-size:1.2rem; font-weight:800; margin:4px 0 6px }
.f30-week p { color:var(--muted); margin:0 }
.f30-lessons { list-style:none; margin:0; padding:0 }
.f30-lessons li { border-bottom:1px solid var(--hair); padding:10px 0; font-weight:700; color:var(--navy) }
.f30-lessons li:last-child { border-bottom:0 }

.f30-after { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px }
.f30-card { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r, 14px); padding:16px; display:flex; flex-direction:column; gap:6px }
.f30-card > b { font-size:1.05rem }
.f30-card__p { font-size:1.4rem; font-weight:800; color:var(--navy); margin:0 }
.f30-card__p small { font-size:.85rem; font-weight:400; color:var(--muted) }
.f30-card p:not(.f30-card__p) { margin:0 0 6px; color:var(--muted); font-size:.92rem; flex:1 }
.f30-two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px }
.f30-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.f30-list li::before { color:var(--f30-green) }
.f30-list--info li::before { color:var(--blue) }
.f30-faq { padding:0; max-width:none }
.f30-faq summary { font-size:1.05rem; padding:14px 18px }
.f30-faq p { font-size:1rem; padding:0 18px 14px; margin-top:0 }
.f30-author { display:flex; gap:18px; align-items:center }
.f30-author .author-photo { width:96px; height:96px; flex:none; margin:0 }
.f30-author b { display:block; font-size:1.1rem }
.f30-author p { margin:4px 0 0; color:var(--muted) }
.f30-help { background:var(--navy-deep); color:#fff; border-radius:var(--v3-r, 14px); padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.f30-help p { margin:4px 0 0; opacity:.92; max-width:60ch }
.f30-help__btns { display:flex; gap:10px; flex-wrap:wrap }
.f30-disclaimer { font-size:.85rem; color:var(--muted); margin:14px 0 0 }

@media (max-width:1100px) {
  .f30-items { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .f30-steps { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .f30-after { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:700px) {
  .f30-open__row { grid-template-columns:minmax(0, 1fr) }
  .f30-buy .btn { flex:1 1 100% }
  .f30-jump__links { display:none }
  .f30-jump__row { justify-content:flex-end }
  .f30-items, .f30-steps, .f30-after, .f30-two, .f30-week { grid-template-columns:minmax(0, 1fr) }
  .f30-tabs { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .f30-author { flex-direction:column; align-items:flex-start }
  .f30-help__btns .btn { flex:1 1 100%; white-space:normal }
}