/* v65 (2026-11-07): tile checklists sit inside their card, coming-soon shelf items blur, O-mark draw, hero reveal */

/* 1. Product tiles: "What you'll be able to do" / "You walk away with" is a closed panel inside the card,
      with breathing room on every side, instead of a top rule that runs into the card's bottom edge. */
.bento .product .pf .wy{
  margin:auto 0 0!important;
  padding:14px 16px 14px!important;
  border:1px solid rgba(227,194,122,.22)!important;
  border-radius:14px!important;
  background:linear-gradient(160deg,rgba(227,174,70,.07),rgba(227,174,70,.015))!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.08)!important;
  min-width:0;max-width:100%;box-sizing:border-box
}
.bento .product .pf .wy li{overflow-wrap:anywhere}

/* 2. Field Guide page shelf: coming-soon workbooks are blurred like the locked tiles; the label stays sharp */
.shelf-soon{overflow:hidden;opacity:1!important}
.shelf-soon b,.shelf-soon span{filter:blur(6px) saturate(.8);opacity:.75;user-select:none;pointer-events:none}
.shelf-soon i{left:50%;top:50%;bottom:auto;translate:-50% -50%;white-space:nowrap;padding:9px 16px;border-radius:999px;color:#1a1204;font-weight:700;letter-spacing:.18em;background:linear-gradient(180deg,#ffe9a8,#e3b955);box-shadow:0 10px 26px -12px rgba(246,200,90,.7)}

/* 3. The Bespoke O drawn by the gold line between "masterpiece." and the timeline */
.o-draw{position:absolute;left:0;top:0;pointer-events:none;z-index:2;overflow:visible}
.o-draw .od-ln{fill:none;stroke:#f3cf78;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9;filter:drop-shadow(0 0 4px rgba(255,214,120,.55))}
.o-draw .od-img{opacity:0;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1);transform-box:fill-box;transform-origin:50% 50%;transform:scale(.96)}
.o-draw.od-done .od-img{opacity:1;transform:none}
.o-draw.od-done .od-ln{opacity:.35;transition:opacity 1.2s ease}
@media (prefers-reduced-motion:reduce){.o-draw .od-img{transition:none}}

/* 4. Hero statement ("Built by an agency. Made for your ideas."): the words and the line under them
      play in quickly once the block is on screen, instead of scrubbing word by word with the scroll
      (which left half-blurred text whenever you stopped). */
html.anim .s-hero.hsb-play .hs-b .w{--wk:1;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .55s ease;transition-delay:calc(var(--i)*70ms)}
html.anim .s-hero.hsb-play .hs-sub{--q3:1;opacity:1;transform:none;filter:none;transition:opacity .6s ease .55s,transform .7s cubic-bezier(.2,.8,.2,1) .55s,filter .6s ease .55s}
html.anim .s-hero.hsb-play .hs-b .hs-per::after{opacity:1;transition:opacity .4s ease .6s}
/* the hero buttons and note leave once the statement reaches the middle, so they never hang under the header */
html.anim .s-hero.hsa-off .hs-a .actions,html.anim .s-hero.hsa-off .hs-a .hero-note,html.anim .s-hero.hsa-off .hs-a .hero-for{opacity:0!important;pointer-events:none}
html.anim .s-hero .hs-a .actions,html.anim .s-hero .hs-a .hero-note,html.anim .s-hero .hs-a .hero-for{transition:opacity .35s ease}

/* 5. Two-row headlines: the whole bottom row is in the gold italic serif. The serif runs a little wider than
      the sans, so the two longest rows step down slightly to stay on one line. */
.mp-say h2>em{font-size:.94em}
#pkgH>em{font-size:.94em}
@media (max-width:480px){.method>h2>em{font-size:.9em}}


/* ---------- v66 · "Put it on anything" tiles: the icon sits beside the title, off the art panel's edge ---------- */
.gu-grid .gu{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;row-gap:0;align-content:start}
.gu-grid .gu>.bp{grid-column:1/-1;grid-row:1;margin:0 0 18px}
.gu-grid .gu>.gu-ic{grid-column:1;grid-row:2;align-self:center;width:54px!important;height:54px!important;margin:0 0 0 4px!important;position:relative;z-index:1}
.gu-grid .gu>.gu-ic img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.gu-grid .gu>b{grid-column:2;grid-row:2;align-self:center;padding-inline:0 8px!important;line-height:1.15}
.gu-grid .gu>span{grid-column:1/-1;grid-row:3;margin-top:12px}
@media(max-width:560px){.gu-grid .gu>.gu-ic{width:48px!important;height:48px!important}}
/* v66 · weather chips: the selected chip kept dark label text after its fill was removed, so "Fog", "Rain" etc. vanished. Label now takes the chip's light ring tint. Snow keeps its own filled style. */
.wxl-wx button[aria-pressed=true]:not([data-m=snow]){color:var(--wc-b,#fff6dd)!important}