/* Terry's pop-up question bubble on the homepage "Ready to Begin?" box.
   Ported from the Claude Design source "Terry Ready to Begin.dc.html"
   (project 1cce0403-24ea-4819-89ab-c6127d18c2d3). The dc-runtime bindings are
   flattened: {{ }} values become classes toggled by /final-cta-terry.js and
   style-hover attributes become :hover rules. Sizes follow the shipped
   sticker scale in homepage.css, not the design canvas's own robot height. */

/* Keep the approved copy and actions above the art and its hit area. */
#pricing .home-final-cta > div:not([data-terry-bubble]){z-index:2}
#pricing .home-final-cta h2,#pricing .home-final-cta p{z-index:2}

/* --- Terry: pop-in, then duck down when the bubble is open --- */
#pricing .home-final-cta.terry-clip{overflow:hidden!important}
/* Finish the sideways entrance before the landing bounce. A coupled spring
   overshot X; the old 2px seam cover then slid left when clipping ended. */
@keyframes terry-enter{
  0%{transform:translate(66%,100%) rotate(-24deg)}
  55%{transform:translateY(-2%)}
  80%{transform:translateY(.5%)}
  100%{transform:none}
}
#pricing .home-final-cta [data-robot="peek"].terry-armed{transform:translate(66%,100%) rotate(-24deg)}
#pricing .home-final-cta.terry-clip [data-robot="peek"].terry-pop{animation:terry-enter 1400ms cubic-bezier(.2,.8,.2,1)}
#pricing .home-final-cta [data-robot="peek"].terry-pop{transform:none;transition:transform 700ms cubic-bezier(.3,1.12,.35,1)}
#pricing .home-final-cta.is-asking [data-robot="peek"].terry-pop{animation:none;transform:translateY(46%);transition:transform 700ms cubic-bezier(.3,1.12,.35,1)}

/* Transparent hit area over the sticker: tap or tab to Terry to ask. */
#pricing .terry-poke{position:absolute;right:0;bottom:0;height:min(88%,520px);width:calc(min(88%,520px) * .667);padding:0;margin:0;border:0;background:transparent;cursor:pointer;z-index:1}
#pricing .terry-poke:focus-visible{outline:2px solid #060708;outline-offset:-6px;border-radius:12px}
#pricing .home-final-cta.is-asking .terry-poke{pointer-events:none}

/* --- The bubble --- */
#pricing .terry-bubble{position:absolute;right:24px;bottom:calc(min(88%,520px) * .54 + 14px);width:min(320px,calc(100vw - 48px));text-align:left;z-index:4;transform:scale(0);transform-origin:calc(60% + 30px) 100%;opacity:0;pointer-events:none;transition:transform 520ms cubic-bezier(.2,1.35,.4,1),opacity 260ms linear}
#pricing .terry-bubble.is-open{transform:scale(1);opacity:1;pointer-events:auto}
#pricing .terry-card{position:relative;background:#f2f3f4;border:2px solid #060708;border-radius:12px;padding:20px 36px 18px 20px;color:#060708;filter:drop-shadow(3px 3px 0 #060708)}
#pricing .terry-card::after{content:"";position:absolute;bottom:-11px;right:calc(40% - 30px);width:18px;height:18px;background:#f2f3f4;border-bottom:2px solid #060708;border-right:2px solid #060708;transform:rotate(45deg)}
#pricing .terry-close{position:absolute;top:6px;right:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#060708;font-size:18px;line-height:1;cursor:pointer;transition:color 90ms linear}
#pricing .terry-close:hover,#pricing .terry-close:focus-visible{color:#f4692e}
#pricing .terry-content{transition:opacity 180ms linear,transform 180ms ease}
#pricing .terry-content.is-fading{opacity:0;transform:translateY(6px)}
#pricing .terry-title{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px}
#pricing .terry-row{display:flex;align-items:flex-end;gap:10px}
#pricing .terry-row input{flex:1;min-width:0;height:40px;border:0;border-bottom:2px solid #060708;background:transparent;color:#060708;font-family:inherit;font-size:15px;line-height:1.4;padding:0 0 2px}
#pricing .terry-row input::placeholder{color:#4a5b5e}
#pricing .terry-row input:focus{outline:none;border-bottom-color:#f4692e}
/* Override the shared important Ice outline only for the question field.
   Its Ember underline remains the focus cue; other controls keep outlines. */
#pricing .terry-row input[data-terry-field="question"]:focus,
#pricing .terry-row input[data-terry-field="question"]:focus-visible{outline:none!important;border-bottom:2px solid #f4692e;caret-color:#060708}
#pricing .terry-trap{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
#pricing .terry-send{flex:none;width:40px;height:40px;border:0;background:#060708;color:#f2f3f4;font-family:inherit;font-size:18px;font-weight:700;cursor:pointer;transition:background 90ms linear,color 90ms linear}
#pricing .terry-send:hover,#pricing .terry-send:focus-visible{background:#f4692e;color:#060708}
#pricing .terry-note{font-size:15px;line-height:1.5;color:#0a2a2f;margin-bottom:10px}
#pricing .terry-book{display:inline-block;font-size:14px;font-weight:700;color:#060708;text-decoration:underline;text-underline-offset:6px}
#pricing .terry-book:hover,#pricing .terry-book:focus-visible{color:#f4692e}
#pricing .terry-step[hidden]{display:none}

/* Open bubble reserves its own column instead of covering the copy. */
@media(min-width:901px){
  #pricing .home-final-cta{transition:padding 600ms cubic-bezier(.2,.8,.2,1)}
  #pricing .home-final-cta.is-asking{padding-right:min(340px,34vw)}
}
@media(min-width:640px) and (max-width:900px){
  #pricing .terry-poke{height:280px;width:187px}
  #pricing .terry-bubble{bottom:165px}
  #pricing .home-final-cta.is-asking{padding-right:min(340px,46vw)!important}
}
/* Phones reserve separate normal-flow rows for the prompt and original pose.
   Desktop's absolute bubble and 46% duck cannot share mobile's image lane:
   transforms do not reserve space and the 280px image painted only 116px wide. */
@media(max-width:639px){
  #pricing .home-final-cta{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(156px,auto) auto}
  #pricing .home-final-cta > h2{grid-row:1}
  #pricing .home-final-cta > p{grid-row:2;justify-self:center}
  #pricing .home-final-cta > div:not([data-terry-bubble]){grid-row:3}
  #pricing .home-final-cta [data-robot="peek"]{grid-row:5;justify-self:end;width:min(90vw,340px)!important;max-width:none;height:auto!important;margin:0 -24px 0 0}
  #pricing .home-final-cta.is-asking [data-robot="peek"].terry-pop{transform:none}
  #pricing .terry-poke{height:min(135vw,510px);width:min(90vw,340px)}
  #pricing .terry-bubble{position:relative;grid-row:4;grid-column:1;justify-self:end;align-self:end;right:auto;bottom:auto;width:min(320px,100%);margin:20px 0 16px}
}
@media(prefers-reduced-motion:reduce){
  :where(html:not([data-ios-motion])) #pricing .home-final-cta,:where(html:not([data-ios-motion])) #pricing .home-final-cta [data-robot="peek"],:where(html:not([data-ios-motion])) #pricing .terry-bubble,:where(html:not([data-ios-motion])) #pricing .terry-content{animation:none!important;transition:none!important}
}