/* Live prices and Ask Midas (added 11 Oct 2026). Built only from the site's
   existing pieces: the pink pill button, Inter 600, #FBFBF9 and #282828 /
   #353535, 1px rgba(0,0,0,.5) hairlines, the uppercase heading style, the
   pink hover line, and --border-radius-m / --shadow-m. */

/* The price ticker (13 Oct 2026): a static bar above the header, styled like
   the app's Ticker (goldie-app preview/components/Ticker.tsx + the app
   theme), approved by Greg on 13 Oct 2026 as the one exception to the
   landing's existing-blocks rule: Inter Medium 500 at 12.5px, line-height
   15px, letter-spacing -0.25px, quotes 20px apart in a row, 12px above and
   below, name and price in the app's body text #414042, the move (caret +
   %) in the app's deep pink #D60078, no border and no background of its own.
   Centred in the page (Greg, 13 Oct: "top middle instead of on the left").
   Nothing moves. The bar stays hidden until prices arrive and hides again
   when they can't be fetched. The weight-500 face is the same variable Inter
   file the site already loads, declared under its own family name ("Inter
   Ticker") so that only the ticker gets it: the rest of the site keeps
   resolving its weight-500 body text to the 600 face, as before. */
@font-face{font-family:"Inter Ticker";src:url(/build/assets/Inter-latin-wght-f052ee44.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
[data-goldie-ticker][hidden]{display:none!important}
.goldie-ticker goldie-ticker{display:block}
.goldie-ticker__row{display:flex;justify-content:center;gap:0 20px;margin:0;padding:12px 0;overflow:hidden;white-space:nowrap;font-family:"Inter Ticker",Inter,sans-serif;font-size:12.5px;line-height:15px;font-weight:500;letter-spacing:-.25px;color:#414042}
.goldie-ticker__quote{flex:none}
.goldie-ticker__metal{text-transform:uppercase}
.goldie-ticker__move{color:#d60078}

/* Live prices: a block-text item; the rows are plain paragraphs. The section
   stays hidden until prices arrive. */
[data-goldie-prices][hidden]{display:none!important}
.goldie-prices__rows{display:grid;gap:.5em;margin-bottom:1em}
.goldie-prices__rows p{display:flex;justify-content:space-between;gap:1em;max-width:25rem;padding-bottom:.5em;border-bottom:1px solid rgba(0,0,0,.5)}
.goldie-prices__metal{text-transform:uppercase}
.goldie-prices__note{color:#353535}

/* Ask Midas: the pill button, bottom right. */
.goldie-midas-open{position:fixed;right:20px;bottom:20px;z-index:150}
html.site-menu-open .goldie-midas-open,html.goldie-midas-is-open .goldie-midas-open{display:none}
.goldie-midas-open:focus-visible,.goldie-midas__close:focus-visible,.goldie-midas__send:focus-visible,.goldie-midas__input:focus-visible,.goldie-midas a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* The panel: full width at the bottom on phones, a 380px card from 744px. */
.goldie-midas{position:fixed;left:0;right:0;bottom:0;z-index:160;display:flex;flex-direction:column;max-height:min(80vh,640px);padding:16px 20px 20px;background:#fbfbf9;color:#353535;border-top:1px solid rgba(0,0,0,.5);box-shadow:var(--shadow-m)}
.goldie-midas[hidden]{display:none}
@media (min-width:744px){.goldie-midas{left:auto;right:20px;bottom:20px;width:380px;border:1px solid rgba(0,0,0,.5);border-radius:var(--border-radius-m)}}
.goldie-midas__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.5)}
.goldie-midas__title{margin:0;font-size:20px;line-height:1;text-transform:uppercase;color:#282828}
.goldie-midas__close{display:grid;place-content:center;width:46px;height:46px;margin-right:-12px;padding:0;border:0;background:transparent;color:#282828;font:inherit;font-size:34px;line-height:1;cursor:pointer}
.goldie-midas__log{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:16px 0;display:grid;align-content:start;gap:12px}
.goldie-midas__log p{margin:0}
.goldie-midas__a{display:grid;gap:.6em}
.goldie-midas__q{justify-self:end;max-width:85%;padding:10px 16px;border:1px solid var(--pink);border-radius:25px;color:#282828}
.goldie-midas__wait{color:#353535}
.goldie-midas__links{display:grid;gap:.4em;margin:0;padding:0;list-style:none}
.goldie-midas a{color:#282828;text-decoration:none;background-image:linear-gradient(var(--pink),var(--pink));background-position:0 100%;background-repeat:no-repeat;background-size:0 2px;transition:background-size .6s}
.goldie-midas a:hover,.goldie-midas a:focus-visible{background-size:100% 2px}
.goldie-midas__links a,.goldie-midas__small a{background-size:100% 2px}
.goldie-midas__links a:hover,.goldie-midas__small a:hover{background-size:0 2px}
.goldie-midas__form{padding-top:12px;border-top:1px solid rgba(0,0,0,.5)}
.goldie-midas__label{display:block;margin-bottom:8px;text-transform:uppercase;font-size:14px;color:#282828}
.goldie-midas__row{display:flex;gap:8px;align-items:flex-end}
.goldie-midas__input{flex:1 1 auto;min-width:0;min-height:46px;max-height:120px;padding:12px 20px;border:1px solid var(--pink);border-radius:25px;background:#fff;color:#282828;font:inherit;line-height:1.3;resize:none}
.goldie-midas__send{flex:none;font:inherit}
.goldie-midas__send[aria-disabled="true"]{opacity:.5;cursor:default}
.goldie-midas__small{margin:12px 0 0;font-size:14px;line-height:1.4;color:#353535}
@media (prefers-reduced-motion:reduce){.goldie-midas a{transition:none}}
.goldie-midas__retry{justify-items:start}
.goldie-midas__again{font:inherit}

/* Phone sections on phones and tablets (Greg, 13 Oct 2026: "the phone's
   picture must change on scroll on mobile too", both blocks). Under 1200px
   the block uses its desktop mechanism stacked in one column: the phone
   sticks at the top of the section (the 270px frame scaled to .58 = 157 x
   318px, in a 408px box on the page background that starts under the 78px
   header), each text item is one viewport tall with its copy starting under
   the phone, and the picture steps as the item's title comes into view: the
   same JS and the same --slide-height geometry as on desktop. The swipe
   carousel and its dots are hidden. From 1200px nothing changes. */
@media (max-width:1199px){
.block-phone-section{--phone-box:408px;--phone-scale:.58}
.block-phone-section__slider{display:none}
.block-phone-section__inner{display:grid;grid-template-columns:1fr;gap:0}
.block-phone-section__phone{position:sticky;top:0;z-index:2;width:100%;height:var(--phone-box);justify-self:stretch;display:grid;place-content:start center;padding-top:var(--app-header-height);background:#fbfbf9;overflow:hidden}
.block-phone-section .block-phone-section__phone .mockup-iphone{width:270px;max-width:none;height:549px;transform:scale(var(--phone-scale));transform-origin:top center;border-radius:40px}
.block-phone-section__item{min-height:100vh;padding:24px 0 0;place-content:start center;place-items:center;text-align:center}
.block-phone-section__text{text-align:center}
}
/* The old stylesheet makes the whole phone section sticky (top:-50vh under
   1200px, -300vh from 1200px) so the next section slides over it. With the
   section now several viewports tall on phones, that -50vh would freeze it
   half a screen in and the later items could never scroll into view, so under
   1200px the section scrolls normally like every other section. */
@media (max-width:1199px){.section.is-phone-section{position:relative;top:auto;z-index:2}}

/* Three quotes (gold, silver, platinum; Cam, 13 Oct 2026) need about 470px
   at the app's 12.5px, more than a phone is wide, so under the 744px tablet
   breakpoint the row wraps onto a second centred line (two lines, 54px bar)
   instead of clipping. From 744px it is one line. */
@media (max-width:743px){.goldie-ticker__row{flex-wrap:wrap;row-gap:0}}