/* Get Ready to Write — landing page v2 (matches the redesigned book: pencil buddy, pattern colours, dotted lanes).
   Loads after styles.css + tracing.css and only styles .rw2-* classes. */
:root { --p1: #1B7F8C; --p2: #EE7F24; --p3: #DB4D6E; --p4: #5A8C4D; --p5: #7857A8; --p6: #2973BD; --lane: #E8EBEF; --cream: #FFF8EE; }

.rw2-brand svg { width: 30px; height: 30px; flex: 0 0 30px; }
.rw2-brand { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1rem; text-decoration: none; }

/* buddy + speech bubble */
.rw2-say { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.rw2-say > svg { width: 58px; height: 58px; flex: 0 0 58px; }
.rw2-bubble { position: relative; background: #fff; border: 1.5px solid var(--bc, var(--p1)); border-radius: 16px; padding: .55rem .85rem; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.rw2-bubble::before { content: ""; position: absolute; left: -8px; top: 50%; width: 14px; height: 14px; background: #fff; border-left: 1.5px solid var(--bc, var(--p1)); border-bottom: 1.5px solid var(--bc, var(--p1)); transform: translateY(-50%) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .rw2-bob { animation: rw2bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes rw2bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
}

/* hero */
.rw2-hero { position: relative; overflow: hidden; background: var(--cream); padding: 1.3rem 0 2rem; }
.rw2-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.rw2-hero .tp-wrap { position: relative; }
.rw2-hero__grid { display: grid; gap: 1.2rem; }
.rw2-cover { position: relative; max-width: 330px; margin: 0 auto; }
.rw2-cover img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 18px 40px rgba(31,33,51,.22), 0 2px 6px rgba(31,33,51,.12); }
.rw2-star { position: absolute; right: -14px; top: -16px; width: 96px; height: 96px; }
.rw2-star svg { width: 100%; height: 100%; }
.rw2-star span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; font-weight: 700; line-height: 1.05; font-size: .82rem; padding-top: 6px; }
.rw2-star b { display: block; font-size: 1.15rem; }
.rw2-buddybig { position: absolute; left: -26px; bottom: -18px; width: 92px; height: 92px; }
.rw2-h1 { font-size: clamp(2.1rem, 8.4vw, 3.3rem); line-height: 1.02; margin: 0 0 .55rem; font-weight: 700; letter-spacing: -.01em; }
.rw2-h1 span { color: var(--p1); position: relative; white-space: nowrap; }
.rw2-h1 span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .14em; border-radius: 99px; background: var(--p2); opacity: .85; }

/* section titles with coloured number badge */
.rw2-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .35rem; }
.rw2-title i { font-style: normal; flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1rem; background: var(--tc, var(--p1)); }
.rw2-title h2 { margin: 0; font-size: clamp(1.35rem, 5.4vw, 1.95rem); line-height: 1.15; }

/* stroke -> letter cards */
.rw2-strokes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; }
.rw2-stroke { border-radius: 16px; padding: .7rem .75rem .8rem; background: #fff; border: 1.5px solid var(--sc); }
.rw2-stroke svg { width: 100%; height: auto; display: block; }
.rw2-stroke b { display: block; font-size: .92rem; color: var(--sc); margin-top: .3rem; }
.rw2-stroke span { font-size: .82rem; color: var(--tp-muted); }
.rw2-stroke em { font-style: normal; font-weight: 700; color: var(--tp-ink); letter-spacing: .06em; }

/* 10 pattern cards (header band like the book) */
.rw2-pats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.rw2-pat { background: #fff; border: 1.5px solid var(--pc); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.rw2-pat__top { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem; background: var(--pt); }
.rw2-pat__top i { font-style: normal; flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .78rem; background: var(--pc); }
.rw2-pat__top b { font-size: .88rem; line-height: 1.15; }
.rw2-pat svg { width: 100%; height: auto; display: block; padding: .3rem .4rem 0; }
.rw2-pat p { margin: 0; padding: .2rem .65rem .45rem; font-size: .76rem; color: var(--tp-muted); line-height: 1.35; flex: 1; }
.rw2-chips { display: flex; gap: .25rem; padding: 0 .6rem .65rem; flex-wrap: wrap; }
.rw2-chips span { font-size: .64rem; font-weight: 700; border: 1px solid var(--pc); color: var(--pc); border-radius: 99px; padding: .08rem .42rem; }
.rw2-chips span:first-child { background: var(--pc); color: #fff; }

/* dots -> drawing */
.rw2-modes { display: grid; gap: .6rem; }
.rw2-mode { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .7rem; align-items: center; background: #fff; border: 1.5px solid var(--mc); border-radius: 16px; padding: .7rem .8rem; }
.rw2-mode i { font-style: normal; width: 38px; height: 38px; border-radius: 50%; background: var(--mc); color: #fff; font-weight: 700; display: grid; place-items: center; }
.rw2-mode b { display: block; font-size: .98rem; }
.rw2-mode span { font-size: .82rem; color: var(--tp-muted); }
.rw2-mode svg { grid-column: 1 / -1; width: 100%; height: auto; display: block; }

/* routine timeline */
.rw2-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.rw2-steps::before { content: ""; position: absolute; left: 18px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: repeating-linear-gradient(180deg, var(--lane) 0 8px, transparent 8px 14px); }
.rw2-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .5rem 0; }
.rw2-steps li i { font-style: normal; width: 40px; height: 40px; border-radius: 50%; background: var(--sc); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .82rem; z-index: 1; }
.rw2-steps li b { display: block; font-size: .98rem; }
.rw2-steps li span { font-size: .82rem; color: var(--tp-muted); }
.rw2-steps li svg { width: 34px; height: 34px; }

/* stories */
.rw2-stories { display: grid; gap: .6rem; }
.rw2-story { border-radius: 18px; padding: .9rem 1rem; background: #fff; border: 1.5px solid var(--sc); border-left-width: 8px; }
.rw2-story b { display: block; font-size: 1.02rem; margin-bottom: .2rem; }
.rw2-story p { margin: 0 0 .45rem; font-size: .88rem; color: var(--tp-muted); line-height: 1.45; }
.rw2-story em { font-style: normal; font-size: .76rem; font-weight: 700; color: #fff; background: var(--sc); border-radius: 99px; padding: .15rem .6rem; }

/* price box extras */
.rw2-box { position: relative; }
.rw2-box .rw2-boxbuddy { position: absolute; right: 10px; top: -36px; width: 66px; height: 66px; }

.rw2-final .rw2-say { justify-content: center; }
.rw2-final .rw2-bubble { color: var(--tp-ink); }

@media (min-width: 760px) {
  .rw2-hero { padding: 2.6rem 0 3rem; }
  .rw2-hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; }
  .rw2-hero__grid .rw2-cover { order: 2; }
  .rw2-strokes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rw2-pats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rw2-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rw2-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rw2-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
  .rw2-steps::before { display: none; }
  .rw2-steps li { grid-template-columns: 1fr; text-align: center; justify-items: center; background: #fff; border: 1px solid var(--tp-line); border-radius: 16px; padding: .9rem .6rem; }
}
.rw2-star { right: 6px; top: -18px; width: 88px; height: 88px; }
.rw2-star span { font-size: .72rem; padding-top: 8px; }
.rw2-star b { font-size: 1.05rem; }
.rw2-min { font-size: .7rem; font-weight: 700; color: var(--sc); border: 1px solid var(--sc); border-radius: 99px; padding: .05rem .45rem; margin-left: .3rem; white-space: nowrap; }
/* hero price badge: round, readable, top-left of the cover (the cover art has its own buddy on the right) */
.rw2-star { left: -12px; right: auto; top: -14px; width: 86px; height: 86px; border-radius: 50%; background: var(--p3); box-shadow: 0 8px 18px rgba(219,77,110,.35); transform: rotate(-8deg); }
.rw2-star span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; font-weight: 700; font-size: .74rem; line-height: 1.05; padding: 0; }
.rw2-star b { font-size: 1.35rem; }
.rw2-star { left: -22px; top: -34px; width: 78px; height: 78px; }
.rw2-star b { font-size: 1.2rem; }
.rw2-hero { padding-top: 2.2rem; }