/* Market research page (/research -> public/industries/research.html).
   Layout and behaviour ported from the owner-approved reference clone;
   every colour, font, radius and shadow comes from /solutions/v7/tokens.css.
   Class prefix rh- so nothing here can reach the other industry pages.

   Proportions, type scale and timings follow the reference specs in
   scratchpad/clone-lab/research/specs: L1 (hero), L3 (how it works),
   L5 (use cases), C8 (proof band), C11 (FAQ).

   Motion contract: every animated piece below ships a complete static
   state under html:not(.js) and under prefers-reduced-motion. */

/* ---------------------------------------------------------------- shell */
.rh-wrap{width:min(1180px,100% - 48px);margin:0 auto}
.rh-wide{width:min(1380px,100% - 48px);margin:0 auto}
.rh-sec{padding:clamp(64px,9vh,110px) 0}
/* no overflow here: body already clips the x axis, and an overflow other
   than visible on an ancestor would break the sticky panel stack */
.rh-page{position:relative;background:var(--bg);--rh-stick:96px}
/* reference h2 is 40px at 1440 (L3/L5), not the 46 this page shipped */
.rh-page h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance;max-width:20ch;margin:0}
.rh-page h2 em{font-style:italic;color:var(--accent)}

/* soft ground + grain, the same treatment the other city pages use */
.rh-tex{position:relative;isolation:isolate}
.rh-tex::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.rh-tex-a::before{content:"";position:absolute;inset:0;z-index:-2;background:
 radial-gradient(60% 46% at 8% 4%,rgba(183,217,192,.28),transparent 60%),
 radial-gradient(50% 40% at 96% 92%,rgba(46,107,68,.07),transparent 62%)}
.rh-tex-b::before{content:"";position:absolute;inset:0;z-index:-2;background:
 linear-gradient(178deg,#f4f2ed 0%,#f0f3ee 55%,#faf9f6 100%)}
.rh-tex-c::before{content:"";position:absolute;inset:0;z-index:-2;background:
 radial-gradient(56% 44% at 92% 8%,rgba(183,217,192,.22),transparent 58%),
 radial-gradient(44% 38% at 4% 94%,rgba(46,107,68,.06),transparent 60%)}

/* scroll reveal, opt-in per block */
html.js .rh-rv{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
html.js .rh-rv.is-in{opacity:1;transform:none}
/* research.js sets html.gsap when GSAP loaded and took the reveals over; the
   CSS transition then has to get out of its way or the two fight over the
   same two properties */
html.js.gsap .rh-rv{transition:none}

/* ----------------------------------------------------------------- hero
   L1 values: h1 88/88 at 1440, subline 16/22, a 12px pill in a small
   capsule, form 48px tall. The clip reveal is L1's own appear effect and is
   driven from research.js with GSAP, 0.65s cubic-bezier(.14,1,.3,1) and
   0.4 / 0.45 / 0.5s delays; without it the hero renders in place. */
.rh-hero{padding:158px 0 0;text-align:center}
.rh-pill{display:inline-flex;align-items:center;gap:9px;min-height:30px;padding:0 13px 0 12px;border:1px solid var(--line);border-radius:999px;background:#fffffff2;box-shadow:0 1px 2px rgba(17,20,24,.03)}
.rh-pill b{color:#79837c;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.rh-pill img{display:block;height:17px;width:auto}
.rh-pill span{color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:-.005em}
/* 16ch is the narrowest measure that still lets the headline fall on two
   lines at 1440 and 1280 ("Customer understanding," / "loud and clear").
   Below 1024 it returns to three lines, which is the natural wrap there. */
.rh-hero h1{margin:24px auto 0;max-width:16ch;font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,86px);line-height:1;letter-spacing:-.038em;text-wrap:balance}
.rh-hero .rh-sub{margin:20px auto 0;max-width:52ch;color:var(--muted);font-size:16.5px;line-height:1.45;letter-spacing:-.01em}

/* inline email form */
.rh-form{display:flex;justify-content:center;gap:10px;margin:30px auto 0;max-width:500px;flex-wrap:wrap}
.rh-form input[type=email]{flex:1 1 240px;min-width:0;min-height:50px;padding:0 17px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px}
.rh-form input[type=email]::placeholder{color:#8c95a1}
.rh-form input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.rh-form button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:16px;font-weight:600;cursor:pointer;transition:background .2s ease}
.rh-form button:hover{background:var(--accent-strong)}
.rh-form button[disabled]{opacity:.6;cursor:default}
.rh-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rh-gotcha{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.rh-formnote{margin:14px auto 0;max-width:46ch;color:var(--muted);font-size:14px;min-height:1.3em}
.rh-formnote a{color:var(--accent);font-weight:600}
.rh-thanks{margin:30px auto 0;max-width:46ch;font-size:16.5px;line-height:1.55}
/* the second offer is a line of its own, not a tail on the first sentence */
.rh-thanks a{display:block;margin-top:6px;color:var(--accent);font-weight:600}
.rh-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------- portrait slideshow
   L1: five items at 1440, three from 810, one below, each about 0.74 wide
   to tall with a hairline gap. This page keeps a soft radius instead of the
   reference's square corners, because every other surface here is rounded. */
.rh-show{margin-top:clamp(40px,5.5vh,68px);padding-bottom:clamp(56px,8vh,96px)}
.rh-viewport{overflow:hidden}
.rh-track{display:flex;gap:10px;--vis:1}
.rh-slide{position:relative;flex:0 0 calc((100% - (var(--vis) - 1) * 10px) / var(--vis));border-radius:12px;overflow:hidden;background:var(--bg-soft);box-shadow:var(--shadow-card)}
.rh-slide img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
html.js .rh-track{will-change:transform;transition:transform .65s cubic-bezier(.16,1,.3,1)}
html.js .rh-track.is-instant{transition:none}
@media(min-width:810px){.rh-track{--vis:3}}
@media(min-width:1200px){.rh-track{--vis:5}}

/* the floating insight card on the active slide */
.rh-ins{position:absolute;left:8px;right:8px;bottom:8px;padding:10px 12px 11px;border:1px solid var(--line);border-radius:10px;background:#fffffff5;box-shadow:var(--shadow-card);text-align:left;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.js .rh-ins{opacity:0;transform:translateY(calc(100% + 10px));transition:opacity .42s ease,transform .65s cubic-bezier(.16,1,.3,1)}
html.js .rh-slide.is-active .rh-ins{opacity:1;transform:none}
.rh-ins .rh-ins-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px}
.rh-ins .rh-ins-h b{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.rh-ins .rh-ins-h small{color:var(--muted);font-size:10px;font-weight:500;white-space:nowrap}
.rh-ins p{margin:0;color:var(--ink);font-size:12.5px;line-height:1.4}
.rh-ins q{font-family:var(--serif);font-style:italic}

/* the identity line under a quote. No names anywhere: this page's own FAQ
   promises quotes are attributed by interview number, so the card says the
   same thing the report says. */
.rh-who{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.rh-av{flex:0 0 24px;width:24px;height:24px;border-radius:50%;overflow:hidden;background:var(--bg-soft)}
.rh-av img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.rh-who-t{display:grid;min-width:0}
.rh-who-t b{color:var(--ink);font-size:11px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.rh-who-t em{color:var(--muted);font-size:10.5px;font-style:normal;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* three labelled bars, each row a label and its share above the track */
.rh-bars{display:grid;gap:7px;margin:0}
.rh-bars div{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:8px;row-gap:3px}
.rh-bars span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:10.5px;line-height:1.2}
.rh-bars em{color:var(--muted);font-size:10.5px;font-style:normal;line-height:1.2;font-variant-numeric:tabular-nums}
.rh-bars i{grid-column:1/-1;display:block;height:4px;border-radius:99px;background:var(--accent-soft);overflow:hidden}
.rh-bars i b{display:block;height:100%;border-radius:99px;background:var(--accent);width:var(--w,50%)}

/* the tag row both card types close on */
.rh-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.rh-tags span{padding:2px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:9.5px;font-weight:600;letter-spacing:.01em;line-height:1.5;white-space:nowrap}

/* ---------------------------------------------------------- logo ticker */
.rh-logos{padding:clamp(40px,6vh,64px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.rh-logos p{margin:0 0 26px;text-align:center;color:var(--muted);font-size:14px}
.rh-tick-view{overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.rh-tick{display:flex;width:max-content}
html.js .rh-tick.is-running{animation:rh-tick var(--tick-dur,44s) linear infinite}
@keyframes rh-tick{to{transform:translateX(-50%)}}
.rh-tick-grp{display:flex;align-items:center;gap:clamp(38px,5vw,72px);padding-right:clamp(38px,5vw,72px)}
.rh-logo{display:flex;align-items:center;flex:0 0 auto}
.rh-logo img{display:block;width:auto;height:var(--h,26px);filter:grayscale(1) brightness(.62) contrast(1.15);opacity:.82}
/* No logo in this row sits on a tile. The two that arrived light-on-dark were
   fixed at the source instead, the Hort mark cut out of its navy plate and the
   Yield Summit lockup recoloured from white to ink, so the single greyscale
   treatment below carries the whole row. */

/* --------------------------------------------------------- how it works
   L3 geometry: a heading block, then panels that stick and stack. Each
   panel is a narrow text column (number 88px, title 32px, description 20px,
   bottom-aligned) beside a wide product screenshot. The text column is
   opaque and masked at the top, so an arriving panel wipes the one under it
   with a soft edge instead of crossing through it. The section ground is
   flat rather than a gradient, because that mask has to match it exactly. */
.rh-how{background:var(--bg)}
.rh-how-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;padding-bottom:clamp(48px,7vh,84px)}
.rh-how-head h2{max-width:16ch}
.rh-how-head p{margin:6px 0 0;max-width:46ch;color:var(--muted);font-size:17px;line-height:1.5}

/* plain block flow, not a grid: a grid item's containing block is its grid
   area, which leaves position:sticky nowhere to travel */
.rh-stack{display:block}
/* a real box in the flow, not container padding: the sticky travel rectangle
   is the containing block's CONTENT box, so padding gives panel 04 nowhere
   to stick */
.rh-stack-tail{height:clamp(200px,32vh,340px)}

.rh-panel{position:sticky;top:var(--rh-stick);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,3.6vw,52px);align-items:stretch}
.rh-panel + .rh-panel{margin-top:clamp(180px,26vh,260px)}
.rh-panel-copy{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px;background:var(--bg);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%);
 mask-image:linear-gradient(to bottom,transparent 0,#000 24%)}
.rh-panel-copy b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(54px,6vw,88px);line-height:.95;letter-spacing:-.045em;color:var(--accent)}
.rh-panel-copy h3{margin:16px 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(23px,2.2vw,32px);line-height:1.18;letter-spacing:-.022em}
.rh-panel-copy p{margin:10px 0 0;max-width:34ch;color:var(--muted);font-size:clamp(16px,1.4vw,20px);line-height:1.4;letter-spacing:-.012em}
.rh-panel-vis{align-self:center;min-width:0}

/* ---------------------------------------------- Studio screenshot frame */
.rh-shot{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow-deep);overflow:hidden}
.rh-shot-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-bottom:1px solid var(--line);background:#f6f4ef}
.rh-shot-bar i{width:9px;height:9px;border-radius:50%;background:#dcd8d0}
.rh-shot-bar em{margin-left:14px;font-style:normal;color:#9aa3ad;font-size:11.5px;letter-spacing:.005em}
/* one frame ratio for all four steps (L3 uses 1.68 throughout), and a per
   screenshot crop on top of it: --z enlarges the picture box beyond the
   frame, --l and --t slide it, --pos picks the part of a picture that is
   wider or taller than the box. The frame itself never changes shape. */
.rh-shot-view{position:relative;display:block;overflow:hidden;aspect-ratio:1.68;background:var(--bg-soft)}
.rh-shot-view img{position:absolute;top:var(--t,0);left:var(--l,0);width:calc(100% * var(--z,1));height:calc(100% * var(--z,1));object-fit:cover;object-position:var(--pos,top center)}

/* ----------------------------------------------------------- proof band
   C8 shape: cards on a soft inset panel, each closing on a large Fraunces
   figure in a tinted box. */
.rh-proof{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rh-proof-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px;border:1px solid var(--line);border-radius:20px;background:var(--bg);box-shadow:0 1px 1px rgba(17,20,24,.04)}
.rh-pcard{display:flex;flex-direction:column;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.rh-pcard-top{padding:22px 22px 0}
.rh-pcard-top h3{margin:0;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;letter-spacing:-.022em}
.rh-pcard-top p{margin:11px 0 0;color:var(--muted);font-size:14.5px;line-height:1.45}
.rh-pcard-fig{margin:0 8px 8px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.rh-pcard-fig b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.1vw,27px);line-height:1.15;letter-spacing:-.028em;color:var(--accent)}
.rh-pcard-fig span{display:block;margin-top:7px;color:var(--muted);font-size:13.5px;line-height:1.4}

/* ------------------------------------------------------------ use cases
   L5: a 5/7 split, number and title at the same size, and an image frame
   whose pairs cross-fade over 0.65s cubic-bezier(.16,1,.3,1). */
.rh-uses .rh-wrap>h2{margin-bottom:38px}
/* align-items:start, not stretch. Stretch tied the image frame's height to
   the accordion column, and the accordion column changes height on every row
   change (the opening row reaches its content height early in the ease, the
   closing row gives its height back late, and .rh-prog appears outright), so
   the picture grew and shrank on each swap. Started, the frame's height is
   its own aspect ratio and nothing about a row change can reach it. */
.rh-acc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.rh-rows{display:flex;flex-direction:column;justify-content:center}
.rh-row{border-top:1px solid var(--line)}
.rh-row:last-child{border-bottom:1px solid var(--line)}
.rh-row .rh-head{display:flex;align-items:baseline;gap:16px;width:100%;padding:19px 2px;border:0;background:none;text-align:left;font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.9vw,24px);line-height:1.22;letter-spacing:-.02em;color:var(--muted);cursor:pointer;transition:color .22s ease}
.rh-row .rh-head em{flex:0 0 auto;font-style:normal;font-size:inherit;font-weight:500;color:#9aa3ad;font-variant-numeric:tabular-nums;transition:color .22s ease}
.rh-row.is-on .rh-head{color:var(--ink)}
.rh-row.is-on .rh-head em{color:var(--accent)}
/* Every open description is the same height, --uc-body, which research.js
   measures as the tallest of the six once the webfonts have landed. The list
   is then the same height in every state, and stays that height all the way
   through a swap, because the closing row gives back exactly what the
   opening row takes on the same easing. A max-height clamp used to sit here
   and it is what made the page jump: 170px is far more than any description
   needs, so for the first fifth of the tween both rows were fully open and
   everything below the section moved down and back up again. */
.rh-row .rh-body{overflow:hidden;height:0}
html.js .rh-row .rh-body{transition:height .65s cubic-bezier(.16,1,.3,1)}
.rh-row.is-on .rh-body{height:var(--uc-body,64px)}
html:not(.js) .rh-row.is-on .rh-body{height:auto}
.rh-row .rh-body p{margin:0;padding:0 2px 16px 52px;color:var(--muted);font-size:16px;line-height:1.45}
.rh-prog{display:none;height:2px;margin:0 2px 18px 52px;border-radius:2px;background:var(--line);overflow:hidden}
.rh-row.is-on .rh-prog{display:block}
.rh-prog i{display:block;height:100%;width:0;background:var(--accent)}
html.js .rh-row.is-on .rh-prog i{animation:rh-fill 4s linear forwards}
@keyframes rh-fill{to{width:100%}}

/* One frame, one ratio, nothing else governing its height. No min-height
   next to the aspect ratio, because two rules for one dimension is how the
   frame changes size between breakpoints. */
.rh-stage{position:relative;aspect-ratio:1.74;width:100%;border-radius:16px;overflow:hidden;background:var(--bg-soft)}
/* the layers cross-fade on opacity alone: no transform, no scale, no filter,
   nothing that could change the rendered size of a picture mid-swap */
.rh-pair{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0}
html.js .rh-pair{transition:opacity .65s cubic-bezier(.16,1,.3,1)}
.rh-pair.is-on{opacity:1}
/* the single-picture set, once research.js finds it */
.rh-pair.is-single{grid-template-columns:1fr;gap:0}
.rh-pair img{display:block;width:100%;height:100%;object-fit:cover}
html:not(.js) .rh-stage{position:static;aspect-ratio:auto;display:grid;border-radius:16px}
html:not(.js) .rh-pair{position:static;opacity:1;aspect-ratio:1.74}
html:not(.js) .rh-pair:not(:first-of-type){display:none}

/* --------------------------------------------------------------- try it
   The conversation itself on the left, the recorded example on the right.
   No card and no frame around the orb: it sits on the page's own ground,
   which is why nothing here paints a background. */
.rh-try .rh-wrap>h2{margin:0 0 clamp(30px,4.5vh,44px)}
.rh-try-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,64px);align-items:start}
.rh-try-l{min-width:0}
.rh-live{display:flex;flex-direction:column;align-items:center;gap:0;padding:clamp(10px,2vh,20px) 0 0}
/* the line under the orb reserves its own height in every state, so the
   phone row under it does not move when the wording changes */
.rh-live-state{margin:clamp(16px,2.4vh,22px) 0 0;min-height:2.9em;max-width:34ch;text-align:center;color:var(--muted);font-size:15px;line-height:1.45}
.rh-live-state a{color:var(--accent);font-weight:600}
/* The end button holds its place in every state instead of appearing and
   disappearing. visibility, not display or the hidden attribute, because it
   takes the button out of the tab order and the accessibility tree while
   still reserving the row, so starting a conversation does not shove the
   phone number down the page. */
.rh-live-end{visibility:hidden;opacity:0;min-height:40px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer;transition:opacity .25s ease,color .2s ease,border-color .2s ease}
[data-phase="listening"] .rh-live-end,[data-phase="speaking"] .rh-live-end{visibility:visible;opacity:1}
.rh-live-end:hover{color:var(--ink);border-color:var(--ink)}

/* the orb. One link, so with no JS a click simply opens the conversation in
   the Studio. */
.rh-orb-cta{display:flex;flex-direction:column;align-items:center;padding:0;text-decoration:none;color:inherit}
/* the hover lift is on the shadow and not on a transform, because the orb is
   already being transformed by the breathing keyframes and the two would
   fight over the same property */
.rh-orb{position:relative;display:grid;place-items:center;width:clamp(184px,22vw,248px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 18px 46px rgba(46,107,68,.16),0 3px 10px rgba(17,20,24,.05);transition:box-shadow .28s ease}
.rh-orb-cta:hover .rh-orb{box-shadow:0 26px 64px rgba(46,107,68,.26),0 5px 14px rgba(17,20,24,.08)}
/* the colour lives on its own layer so the blur that softens it never
   touches the play triangle sitting above */
.rh-orb-g{position:absolute;inset:-14%;border-radius:50%;filter:blur(13px);background:
 radial-gradient(52% 52% at 30% 24%,#fff 0%,#fdf7ef 42%,rgba(253,247,239,0) 74%),
 radial-gradient(56% 56% at 76% 78%,#e7c5a0 0%,rgba(231,197,160,0) 68%),
 radial-gradient(64% 64% at 70% 26%,#8fc7bb 0%,rgba(143,199,187,0) 70%),
 radial-gradient(100% 100% at 50% 50%,#d5e7dd 0%,#b7d9c0 100%)}
.rh-orb-play{position:relative;width:clamp(30px,3.4vw,40px);height:auto;fill:#fff;filter:drop-shadow(0 2px 6px rgba(17,20,24,.22));transition:opacity .3s ease}
.rh-orb-cta:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:50%}

/* --- what the orb does while a conversation is running -------------------
   Three states, all on the orb itself and none of them on layout: the play
   triangle fades out once there is a conversation to be in, a ring pulses
   outward while Lina is talking, and the breathing slows while she is
   listening. Nothing here moves anything else on the page. */
.rh-orb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(46,107,68,.5);opacity:0;pointer-events:none}
[data-phase="connecting"] .rh-orb-play,
[data-phase="listening"] .rh-orb-play,
[data-phase="speaking"] .rh-orb-play{opacity:0}
html.js [data-phase="connecting"] .rh-orb-ring{animation:rh-orb-pulse 1.4s ease-out infinite}
html.js [data-phase="speaking"] .rh-orb-ring{animation:rh-orb-pulse 1.9s ease-out infinite}
html.js [data-phase="listening"] .rh-orb{animation:rh-orb-breathe 9s ease-in-out infinite}
@keyframes rh-orb-pulse{0%{opacity:.85;transform:scale(.86)}100%{opacity:0;transform:scale(1)}}

/* the second way in. It sits under the card and carries no card of its own,
   so the white frame belongs to the orb alone. A plain form with a real
   action, so it posts with no JS exactly as the demo form at the top of the
   page does. */
.rh-try-alt{max-width:720px;margin:clamp(20px,3.4vh,28px) auto 0;text-align:center}
.rh-try-alt-l{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.45}
.rh-callme{display:flex;justify-content:center;gap:9px;max-width:430px;margin:0 auto;flex-wrap:wrap}
.rh-callme input[type=tel]{flex:1 1 210px;min-width:0;min-height:46px;padding:0 15px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:15.5px}
.rh-callme input[type=tel]::placeholder{color:#8c95a1}
.rh-callme input[type=tel]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.rh-callme button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 21px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:15.5px;font-weight:600;cursor:pointer;transition:background .2s ease}
.rh-callme button:hover{background:var(--accent-strong)}
.rh-callme button[disabled]{opacity:.6;cursor:default}
.rh-callnote{margin:11px auto 0;max-width:42ch;min-height:1.3em;color:var(--muted);font-size:13.5px;line-height:1.45}
.rh-callnote a{color:var(--accent);font-weight:600}
/* a slow breath and a slower colour drift, both on the orb only, both off
   under prefers-reduced-motion (see the block at the end of this file) */
@keyframes rh-orb-breathe{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-7px,0) scale(1.025)}}
@keyframes rh-orb-turn{to{transform:rotate(360deg)}}
html.js .rh-orb{animation:rh-orb-breathe 6.5s ease-in-out infinite}
html.js .rh-orb-g{animation:rh-orb-turn 34s linear infinite}
.rh-try-r{display:grid;justify-items:center}
.rh-try-shot{margin:0;width:100%;max-width:290px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-deep)}
.rh-try-shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.rh-player-lab{margin:18px 0 10px;color:var(--muted);font-size:14px}

/* audio player: native controls without JS, the waveform transport with it */
.rh-player{width:100%;max-width:330px}
.rh-player audio{display:block;width:100%}
html.js .rh-player audio{display:none}
.rh-player-ui{display:none}
html.js .rh-player-ui{display:flex;align-items:center;gap:13px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow-card)}
.rh-play{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;padding:0;transition:background .2s ease}
.rh-play:hover{background:var(--accent-strong)}
.rh-play svg{width:14px;height:14px;display:block;fill:currentColor}
.rh-play .rh-pause-i{display:none}
.rh-player.is-playing .rh-play .rh-pause-i{display:block}
.rh-player.is-playing .rh-play .rh-play-i{display:none}
.rh-seek{position:relative;flex:1;min-width:0;height:30px;border:0;background:none;padding:0;cursor:pointer}
.rh-wave{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.rh-wave i{flex:1 1 0;min-width:0;height:var(--h,40%);border-radius:2px;background:#d8d5cd}
.rh-wave-fill{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 100% 0 0)}
html.js .rh-wave-fill{transition:clip-path .12s linear}
.rh-wave-fill .rh-wave i{background:var(--accent)}
.rh-time{flex:0 0 auto;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- faq
   The site-wide component, copied class for class and rule for rule from
   the block saas.html / home.html / pricing.html carry inline, so this page
   reads the same as every other page in the set. It is native <details>
   with no handler at all, which is why research.js has no FAQ code. */
.faq-section{padding:96px 0;background:var(--paper);color:var(--ink)}
.faq-section .in{max-width:1120px;margin:0 auto;padding:0 28px}
.faq-section h2{margin:0 0 36px;font-family:var(--serif);font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.045em}
.faq-section h2 em{font-style:italic;color:var(--accent)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.faq-column{display:grid;gap:10px;align-content:start}
.faq-item{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:20px 22px;cursor:pointer;color:var(--ink);font:600 16px/1.3 var(--sans);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:0 0 28px;color:var(--accent);font:400 26px/1 var(--serif)}
.faq-item[open] summary::after{content:"-"}
.faq-item summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.faq-item p{margin:0;padding:0 54px 22px 22px;color:var(--muted);font:400 15px/1.6 var(--sans)}
@media(hover:hover) and (pointer:fine){.faq-item:hover{border-color:var(--accent);box-shadow:0 10px 24px rgba(46,107,68,.12);transform:translateY(-2px)}.faq-item:hover summary::after{background:var(--accent);color:#fff}}
@media(prefers-reduced-motion:no-preference){.faq-item{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.faq-item summary::after{transition:background-color .18s ease,color .18s ease}}
@media(prefers-reduced-motion:reduce){.faq-item{transition:none}.faq-item summary::after{transition:none}}
@media(prefers-reduced-motion:reduce){.faq-item:hover{transform:none}}
@media(max-width:700px){.faq-grid{grid-template-columns:1fr;gap:10px}.faq-section{padding:64px 0}.faq-section .in{padding:0 18px}.faq-section h2{margin-bottom:28px}.faq-item summary{min-height:68px;padding:18px}.faq-item p{padding:0 46px 20px 18px}}

/* --------------------------------------------------------- closing band */
.rh-close{background:var(--ink);color:#faf9f6;text-align:center}
.rh-close .rh-wrap{padding:clamp(70px,10vh,116px) 0}
.rh-close h2{margin:0 auto;max-width:18ch;color:#faf9f6}
.rh-close h2 em{color:#b7d9c0}
.rh-close a{display:inline-flex;align-items:center;gap:9px;min-height:54px;margin-top:30px;padding:0 28px;border-radius:10px;background:#b7d9c0;color:var(--ink);font-size:16.5px;font-weight:600;text-decoration:none;transition:background .2s ease}
.rh-close a:hover{background:#cfe2d3}

/* --------------------------------------------------------- breakpoints */
@media(max-width:1023px){
  .rh-how-head{grid-template-columns:1fr;gap:16px}
  .rh-acc{grid-template-columns:1fr}
  .rh-try-grid{grid-template-columns:1fr;gap:52px}
}
@media(max-width:809px){
  /* L3 below its breakpoint: no sticking, screenshot above the copy,
     number and title on one line */
  .rh-stack-tail{display:none}
  .rh-panel{position:static;top:auto;display:flex;flex-direction:column-reverse;gap:14px}
  .rh-panel + .rh-panel{margin-top:44px}
  .rh-panel-copy{display:block;padding-bottom:0;background:none;-webkit-mask-image:none;mask-image:none}
  .rh-panel-copy b{display:inline;font-size:24px;line-height:1.4;letter-spacing:-.02em;margin-right:12px}
  .rh-panel-copy h3{display:inline;margin:0;font-size:24px}
  .rh-panel-copy p{margin-top:10px;max-width:none;font-size:16px}
  /* align-self:center is a cross-axis rule, so in the stacked column layout
     it would shrink the screenshot to its intrinsic width */
  .rh-panel-vis{align-self:stretch}
  .rh-proof-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .rh-hero{padding-top:126px}
  .rh-hero .rh-sub{font-size:16px}
  .rh-form{gap:9px}
  .rh-form input[type=email],.rh-form button{flex:1 1 100%}
  .rh-callme input[type=tel],.rh-callme button{flex:1 1 100%}
  .rh-proof-panel{grid-template-columns:1fr}
  .rh-row .rh-body p,.rh-prog{padding-left:0;margin-left:0}
  .rh-row .rh-head{gap:12px}
  .rh-logos p{margin-bottom:20px}
  .rh-stage{aspect-ratio:1.5}
  html:not(.js) .rh-pair{aspect-ratio:1.5}
}

/* ------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  html.js .rh-rv{opacity:1;transform:none;transition:none}
  html.js .rh-track{transition:none}
  html.js .rh-ins{opacity:1;transform:none;transition:none}
  html.js .rh-tick.is-running{animation:none}
  html.js .rh-row .rh-body{transition:none}
  html.js .rh-row.is-on .rh-prog i{animation:none;width:100%}
  html.js .rh-pair{transition:none}
  html.js .rh-wave-fill{transition:none}
  html.js .rh-orb,html.js .rh-orb-g{animation:none}
  /* the live states stop moving and say what they are in words instead:
     the ring holds at full size and the state line under the orb carries
     the rest */
  html.js [data-phase] .rh-orb,html.js [data-phase] .rh-orb-ring{animation:none}
  [data-phase="connecting"] .rh-orb-ring,[data-phase="speaking"] .rh-orb-ring{opacity:.85;transform:none}
  .rh-form button,.rh-close a,.rh-play,.rh-row .rh-head,.rh-row .rh-head em,.rh-callme button,.rh-orb,.rh-live-end,.rh-orb-play{transition:none}
}