/* Apple design layer — loaded last.
   Response on press, materials for chrome, size-specific type, and motion that
   materializes along symmetric paths. Gesture motion itself is spring-driven in apple.js. */

:root{
  /* CSS stand-in for a critically damped spring, for non-gesture UI (fades, reveals). */
  --apple-ease:cubic-bezier(.32,.72,0,1);
  --apple-press:100ms ease-out;
}

/* ---------- 1. Response: no tap delay, feedback on pointer-down ---------- */
a,button,summary,[role="tab"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.button,.circle-button,.survey-submit,.back-top,.menu-toggle,
.loyalty-tabs button,.network-tabs button,.carousel-dots button{
  transition:transform .35s var(--apple-ease),background-color .25s ease,box-shadow .35s var(--apple-ease),color .25s ease,opacity .25s ease;
}
.button:active,.survey-submit:active,.draft-button:active,
.loyalty-tabs button:active,.network-tabs button:active{transform:scale(.97);transition:transform var(--apple-press)}
.circle-button:active,.back-top:active,.menu-toggle:active,.rating-picker button:active{transform:scale(.92);transition:transform var(--apple-press)}
.carousel-dots button:active{transform:scale(.8);transition:transform var(--apple-press)}
/* Restraint: hover hints, it doesn't leap. */
.button:hover{transform:translateY(-1px)}
.button:hover:active{transform:scale(.97)}
.text-link span,.login-link span,.console-link{transition:transform .35s var(--apple-ease)}
.text-link:hover span,.login-link:hover span{transform:translate(2px,-2px)}

/* ---------- 2. Materials: translucent chrome, scroll edge instead of a divider ---------- */
.header{transition:background-color .45s var(--apple-ease),color .45s var(--apple-ease),box-shadow .45s var(--apple-ease)}
.header.is-light{background:rgba(255,255,255,.78);box-shadow:none;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.header.is-dark.scrolled{background:rgba(8,9,12,.6);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.header::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,rgba(10,10,20,.07),transparent);transition:opacity .45s var(--apple-ease)}
.header.scrolled::after{opacity:1}
.header.is-dark::after{background:linear-gradient(to bottom,rgba(0,0,0,.28),transparent)}
.toast{background:rgba(35,28,16,.82);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border-color:rgba(255,214,150,.16)}

/* Mobile menu: a material sheet anchored to the button that opened it. */
@media(max-width:600px){
  /* Solid, not glass: a backdrop-filter nested inside the header's material can't see the page behind it. */
  .nav-links{transform-origin:calc(100% - 30px) 0;background:#141115}
  .header.is-light .nav-links{background:#fff}
  .menu-toggle span{transition:transform .4s var(--apple-ease),opacity .25s ease}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}

/* ---------- 3. Typography: tracking scales with size, leading tightens as type grows ---------- */
body{font-optical-sizing:auto;font-kerning:normal;text-rendering:optimizeLegibility}
.hero h1{letter-spacing:-.045em;line-height:1.03}
.section-heading h2,.social h2,.faq h2{letter-spacing:-.038em;line-height:1.07}
.contact-inner h2{letter-spacing:-.04em;line-height:1.04}
.survey-body h2,.survey-thanks h2{letter-spacing:-.035em}
h3{letter-spacing:-.018em}
.section-heading>p,.hero-description,.social-copy>p{letter-spacing:-.005em;line-height:1.6}

/* ---------- 4. Motion: materialize (blur + scale + fade together), symmetric paths ---------- */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .js-ready .reveal{opacity:0;transform:translateY(22px) scale(.985);filter:blur(6px);
    transition:opacity .9s var(--apple-ease),transform 1s var(--apple-ease),filter .9s var(--apple-ease)}
  .js-ready .reveal.visible{opacity:1;transform:none;filter:none}

  @keyframes apple-materialize{from{opacity:0;transform:translateY(10px) scale(.97);filter:blur(6px)}}
  .survey-thanks:not([hidden]),#draft-area:not([hidden]){animation:apple-materialize .55s var(--apple-ease) both}

  @keyframes apple-toast-in{from{opacity:0;transform:translate(-50%,18px) scale(.96);filter:blur(6px)}}
  .toast:not([hidden]){animation:apple-toast-in .5s var(--apple-ease) both}

  @keyframes apple-sheet-in{from{opacity:0;transform:translateY(-6px) scale(.97);filter:blur(8px)}}
  @media(max-width:600px){.nav-links.open{animation:apple-sheet-in .42s var(--apple-ease) both}}
}

/* ---------- 5. Accessibility: gentler equivalents, not just "off" ---------- */
@media(prefers-reduced-motion:reduce){
  .js-ready .reveal{filter:none}
  .feature-art{transform:none!important}
  .survey-thanks:not([hidden]),#draft-area:not([hidden]),.toast:not([hidden]){animation:apple-fade .2s ease both}
  @keyframes apple-fade{from{opacity:0}}
}
@media(prefers-reduced-transparency:reduce){
  .header.is-light,.header.is-light .nav-links{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .header.is-dark.scrolled,.nav-links{background:#0f0d11;-webkit-backdrop-filter:none;backdrop-filter:none}
  .toast{background:#231c10;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-contrast:more){
  .header.is-light{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.35)}
  .header.is-dark.scrolled{background:#08090c;box-shadow:0 1px 0 rgba(255,255,255,.35)}
  .header::after{display:none}
  .toast{background:#1a140a;border-color:#ffd696}
}

/* ---------- Sheet edge: the features section rises over the hero with rounded top corners ---------- */
.features{margin-top:-48px;border-radius:48px 48px 0 0;z-index:2;box-shadow:0 -1px 0 rgba(255,255,255,.04)}
.hero{z-index:1}
.hero .scroll-hint{bottom:72px}
@media(max-width:800px){.features{margin-top:-36px;border-radius:36px 36px 0 0}.hero .scroll-hint{bottom:58px}}
@media(max-width:600px){.features{margin-top:-28px;border-radius:28px 28px 0 0}.hero .scroll-hint{bottom:46px}}

/* ---------- Hero stays put while the features sheet slides over it (hero-stack.js) ---------- */
/* --hero-stick lets a hero taller than the screen scroll to its bottom edge before it holds still. */
.hero-stack{position:sticky;top:var(--hero-stick,0px);z-index:0;background:#000}
.hero-stack.is-covered{visibility:hidden}
.hero{transform-origin:50% var(--hero-origin,50%)}
.hero::after{content:"";position:absolute;inset:0;z-index:30;background:#000;opacity:var(--hero-dim,0);pointer-events:none}

/* ---------- Plain labels: sentence case, normal tracking (no all-caps template chrome) ---------- */
.scene-label,.sample-caption,.survey-step,.tiny-label,.stamp-caption,.mini-toolbar>span:last-child{letter-spacing:.005em!important;text-transform:none}
.scene-label{font-weight:600}

/* One-color headlines: emphasis comes from the words, not from tinting one of them. */
h1 em,h2 em,h3 em,.dark h2 em,.hero h1 em{color:inherit!important}

/* ---------- Live survey iPhone ---------- */
/* Tilt is spring-driven from live-survey.js; CSS must not transition it. */
.iphone,.iphone:hover,.iphone:focus-within{transition:box-shadow .5s var(--apple-ease)}
.iphone{transform:perspective(1200px) rotateX(9deg) rotateY(-17deg) rotateZ(4deg);will-change:transform;
  box-shadow:inset 0 0 0 1.5px #0d0d0f,inset 0 0 0 3px #4a4a4f,calc(var(--tilt,1)*-26px) calc(30px + var(--tilt,1)*14px) 70px #000b,0 0 0 1px #ffffff12}
.iphone::after{content:'';position:absolute;inset:7px;border-radius:43px;pointer-events:none;z-index:6;
  background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 28%,transparent 70%,rgba(255,255,255,.05));opacity:calc(var(--tilt,1)*.9)}
.iphone-screen{isolation:isolate}
.survey-mock{display:flex;flex-direction:column;flex:1;min-height:0}
/* Rendered at a real iPhone Pro Max width (430px), then scaled to the mock screen, so the page lays out exactly as on a phone. */
.iphone .live-survey{position:absolute;left:0;top:44px;width:430px;height:calc((100% - 44px) / var(--screen-scale,.59));transform:scale(var(--screen-scale,.59));transform-origin:0 0;border:0;background:#fff;z-index:2;
  opacity:0;pointer-events:none;transition:opacity .5s var(--apple-ease)}
.iphone.is-live .live-survey{opacity:1;pointer-events:auto}
/* While the live survey loads, the phone looks like a page loading on a real iPhone: a white
   screen with an activity indicator. The built-in demo only appears if the survey can't load. */
.iphone:not(.is-fallback) .iphone-screen{background:#fff}
.iphone:not(.is-fallback) .survey-mock{visibility:hidden}
.iphone:not(.is-fallback) .iphone-status{background:#fff;color:#111}
.iphone:not(.is-fallback) .phone-home{background:#111;opacity:.7}
.iphone.is-fallback .live-survey{display:none}
.iphone:not(.is-live):not(.is-fallback) .iphone-screen::after{content:'';position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:1;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 10%,#8e8e93 100%);-webkit-mask:radial-gradient(circle,transparent 7px,#000 7.5px);mask:radial-gradient(circle,transparent 7px,#000 7.5px);
  animation:apple-spin .9s linear infinite}
@keyframes apple-spin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.iphone .iphone-screen::after{animation-duration:2.4s}}
.iphone .phone-home{pointer-events:none}
/* While someone is using the phone it holds still. */
.phone-float.is-engaged{animation-play-state:paused}
.live-survey-open{display:none}

/* Small screens: the phone opens the survey in a sheet. */
@media(max-width:600px){
  .iphone .live-survey{pointer-events:none!important}
  .iphone.is-live{cursor:pointer}
  .live-survey-open:not([hidden]){display:block;margin:10px auto 0;position:relative;z-index:6;font:inherit;font-size:13px;font-weight:600;color:#111;background:var(--amber-bright);border:0;border-radius:100px;padding:11px 20px;transition:transform .35s var(--apple-ease)}
  .live-survey-open:active{transform:scale(.97);transition:transform var(--apple-press)}
}
.survey-sheet{position:fixed;inset:0;z-index:300}
.survey-sheet[hidden]{display:none}
.survey-sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0}
.survey-sheet-panel{position:absolute;left:0;right:0;bottom:0;height:calc(100% - 44px);background:#fff;border-radius:16px 16px 0 0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(0,0,0,.35);will-change:transform}
.survey-sheet-bar{position:relative;flex-shrink:0;height:54px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eee;color:#111;touch-action:none;cursor:grab}
.survey-sheet-bar strong{font-size:15px;font-weight:600}
.survey-sheet-grabber{position:absolute;top:6px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:#d4d4d8}
.survey-sheet-close{position:absolute;right:10px;top:50%;translate:0 -50%;font:inherit;font-size:15px;font-weight:600;color:#a46f00;background:none;border:0;padding:10px}
.survey-sheet-frame{flex:1;width:100%;border:0}
html.sheet-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.iphone{transform:none!important}.iphone::after{display:none}}
.iphone.is-live~*,.hero-product #survey-caption{font-size:11px;letter-spacing:0!important;color:#8d8690}
.hero-product #survey-caption{display:none}
@media(max-width:600px){
  .hero-product #survey-caption{display:none}
  /* The phone is the button: a pill over its screen says so. */
  .live-survey-open:not([hidden]){position:absolute;left:50%;bottom:118px;translate:-50% 0;margin:0;z-index:8;box-shadow:0 8px 24px rgba(0,0,0,.35)}
}
/* Start over: the screen fades to white while the survey reloads, then the first question fades in. */
.iphone.is-reloading .live-survey,.survey-sheet-panel.is-reloading .survey-sheet-frame{opacity:0!important;transition:opacity .2s ease}
.survey-sheet-frame{transition:opacity .45s var(--apple-ease)}
.live-survey-restart{display:none}
@media(min-width:601px){
  .live-survey-restart:not([hidden]){display:block;margin:10px auto 0;position:relative;z-index:6;font:inherit;font-size:12px;font-weight:600;color:#e9e4ec;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:8px 16px;cursor:pointer;
    animation:apple-materialize .45s var(--apple-ease) both}
  .live-survey-restart:hover{background:rgba(255,255,255,.14)}
  .live-survey-restart:active{transform:scale(.96);transition:transform var(--apple-press)}
}
.survey-sheet-restart{position:absolute;left:10px;top:50%;translate:0 -50%;font:inherit;font-size:15px;color:#a46f00;background:none;border:0;padding:10px}

/* ---------- Scribble note pointing at the live phone ---------- */
@font-face{font-family:'Gochi Hand';src:url(/assets/gochi-hand.woff2) format('woff2');font-display:swap}
.scribble-note,.scribble-arrow{display:none}
.hero.has-scribble .scribble-note,.hero.has-scribble .scribble-arrow{display:block}
.hero.has-scribble #survey-caption{display:none}
.scribble-note{position:absolute;z-index:3;pointer-events:none;font-family:'Gochi Hand',cursive;font-size:23px;line-height:1.15;color:#f2e6cf;
  transform:rotate(-4deg);transform-origin:0 50%;opacity:0;translate:0 6px}
.scribble-arrow{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.scribble-line,.scribble-echo,.scribble-head{fill:none;stroke:var(--amber-bright);stroke-linecap:round;stroke-linejoin:round}
.scribble-line{stroke-width:2.6}
.scribble-echo{stroke-width:1.3;opacity:.45}
.scribble-head{stroke-width:2.8;opacity:0}
.hero.scribble-in .scribble-note{opacity:1;translate:0 0;transition:opacity .5s var(--apple-ease),translate .6s var(--apple-ease)}
.hero.scribble-in .scribble-line,.hero.scribble-in .scribble-echo{stroke-dashoffset:0!important;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.25,1) .35s}
.hero.scribble-in .scribble-head{opacity:1;transition:opacity .2s ease 1.4s}
@media(prefers-reduced-motion:reduce){.hero.scribble-in .scribble-note,.hero.scribble-in .scribble-head{transition:none}}

/* ---------- Amber only: no muted gold ----------
   Fills and accents use the brand amber. Small text on white uses ink instead, because amber
   text on white is too faint to read; amber is kept for text only on dark backgrounds. */
.carousel-controls>.circle-button{background:var(--amber-bright);color:#111;box-shadow:0 6px 20px rgba(255,176,0,.28)}
.carousel-controls>.circle-button:hover{background:var(--amber)}
.carousel-dots button.active{background:var(--amber)}
.typing-letter.emphasis{color:#e6e4e8}
.typing-letter.emphasis.is-typed{color:var(--amber)}
.typing-letter{transition:color .22s ease}
@media(prefers-reduced-motion:reduce){.typing-letter{transition:none}.typing-letter.emphasis{color:var(--amber)}}
.motion-enabled .typing-caret{background:var(--amber)}
.statement-trace i{background:linear-gradient(90deg,var(--amber-bright),var(--amber))}
.statement-trace b{background:var(--amber);box-shadow:0 0 0 7px rgba(255,176,0,.12)}
.story-copy .eyebrow,.story-copy-panel .eyebrow{color:var(--ink);opacity:.55}
.story-copy .text-link,.story-copy-panel .text-link{color:var(--ink)}
.section-nav a.active{color:var(--ink)}
.section-nav.on-dark a.active{color:var(--amber-bright)}
.faq-list summary>span,.faq-list details[open] summary>span{color:var(--amber-bright)}
.draft-button{background:rgba(255,176,0,.12);border-color:rgba(255,176,0,.35);color:var(--amber-bright)}
.draft-button:hover{background:rgba(255,176,0,.2)}
.flow-label b{background:var(--amber);color:#111;box-shadow:0 4px 10px rgba(255,176,0,.25)}
.flow-label>span{background:var(--amber-bright);color:#111;box-shadow:0 5px 16px rgba(255,176,0,.15)}
.survey-sheet-close,.survey-sheet-restart{color:var(--ink)}
.signal-field span{color:#c98a00;border-color:rgba(255,176,0,.22);box-shadow:0 8px 25px rgba(255,176,0,.06)}
.signal-field svg{stroke:rgba(255,176,0,.3)}

/* Circular chevron controls, matching the reference shape with existing colors. */
.carousel-controls>.circle-button,.loyalty-showcase .circle-button{
  padding:0;border:0;border-radius:50%;box-shadow:none;
}
.circle-button .button-chevron{
  display:block;width:44%;height:44%;pointer-events:none;
}

/* Keep navigation controls anchored through hover, press, and release. */
.carousel-controls>.circle-button,
.carousel-controls>.circle-button:hover,
.carousel-controls>.circle-button:active,
.loyalty-showcase .circle-button,
.loyalty-showcase .circle-button:hover,
.loyalty-showcase .circle-button:active{transform:none}

/* Keep the dashboard close to its heading and reserve room beside the laptop. */
.platform>.section-heading{margin-bottom:24px}
@media(min-width:601px){
  .platform .dashboard-stage{margin-top:0;max-width:1280px}
  .platform .flow-label-one,.platform .flow-label-three{width:max-content;max-width:none;white-space:nowrap}
  .platform .flow-label-one b,.platform .flow-label-three b{flex-shrink:0}
  .platform .flow-label-one>span,.platform .flow-label-three>span{flex-shrink:0;white-space:nowrap;text-align:center}
}

/* A restrained, flat hover treatment for the capability icons. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .platform-pillars .pillar-mark img{
    transform:translateY(0) scale(1);
    transition:transform 300ms cubic-bezier(.2,.65,.3,1);
  }
  .platform-pillars .pillar:hover .pillar-mark img{
    transform:translateY(-3px) scale(1.035);
  }
}

/* Reference hero composition in Feedlytics amber, fading into black. */
.hero{
  background:linear-gradient(180deg,#402c00 0%,#291c00 13%,#150e00 25%,#000 39%,#000 100%);
}

/* Give the hero phone more presence while leaving room for its tilt and captions. */
.hero .hero-product{top:-24px}
@media(min-width:601px){
  .hero{min-height:900px}
  .hero .phone-float{scale:1.12}
}
@media(min-width:1600px){
  .hero{min-height:960px}
  .hero .phone-float{scale:1.2}
}
@media(min-width:801px) and (max-width:1100px){
  .hero{min-height:840px}
  .hero .phone-float{scale:1}
}
@media(min-width:601px) and (max-width:800px){
  .hero{min-height:800px}
  .hero .phone-float{scale:.94}
}
@media(max-width:600px){
  .hero .phone-float{scale:.94}
  .hero .hero-product{height:600px}
}
@media(max-width:370px){
  .hero .phone-float{scale:.88}
  .hero .hero-product{height:565px}
}
.hero .hero-glow{
  inset:0;
  background:radial-gradient(ellipse 27% 47% at 72% 56%,rgba(255,176,0,.16) 0%,rgba(255,176,0,.06) 42%,rgba(0,0,0,0) 78%);
}

/* Continuous scrolling; anchors clear the fixed header. */
html{scroll-snap-type:none;scroll-padding-top:64px}
@media(max-width:600px){html{scroll-padding-top:66px}}

@media(max-width:600px){
  .hero .hero-glow{
    background:radial-gradient(ellipse 65% 36% at 53% 70%,rgba(255,176,0,.16) 0%,rgba(255,176,0,.06) 42%,rgba(0,0,0,0) 78%);
  }
}

/* Tighter gap between the platform pillars and the "Comment cards get thrown away" headline. */
.platform{padding-bottom:50px}

/* Side rail: the active label replaces its dash and has no box, so it sits on any section background. */
.section-nav a span,.section-nav.on-dark a span{background:transparent}
.section-nav a.active{border-top-color:transparent}

/* ---------- Top bar (desktop): logo left, links centred, actions right ---------- */
@media(min-width:801px){
  .header{--nav-text:rgba(255,255,255,.72);--nav-text-hover:#fff;--nav-line:rgba(255,255,255,.14)}
  .header.is-light{--nav-text:rgba(20,18,22,.66);--nav-text-hover:#141216;--nav-line:rgba(20,18,22,.12)}
  .header::after{display:none}
  .header.scrolled{box-shadow:0 .5px 0 var(--nav-line)}
  .nav{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center}
  .brand{gap:9px;font-size:18px;font-weight:650;letter-spacing:-.035em}
  .brand img{width:28px;height:28px}
  .nav-links{justify-self:center;gap:34px;font-size:13px;letter-spacing:-.005em}
  .header .nav-links a,.header.is-light .nav-links a{color:var(--nav-text);transition:color .25s var(--apple-ease)}
  .header .nav-links a:hover,.header .nav-links a.current{color:var(--nav-text-hover)}
  .nav-actions{justify-self:end;margin-left:0;gap:22px}
  .login-link{font-size:13px;color:var(--nav-text);transition:color .25s var(--apple-ease)}
  .login-link:hover{color:var(--nav-text-hover)}
  .login-link span{display:none}
  .button-nav{min-height:34px;padding:0 16px;font-size:13px;font-weight:500;letter-spacing:-.005em}
}

/* ---------- Footer: readable type, quiet columns, hairline rules ---------- */
.footer{padding:72px 0 28px;background:#fff;color:#141216;border-top:1px solid rgba(20,18,22,.08)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px}
.footer-brand .brand{color:#141216;font-size:18px;font-weight:650;letter-spacing:-.035em;gap:9px}
.footer-brand>p{max-width:300px;margin:16px 0 22px;font-size:14px;line-height:1.6;color:rgba(20,18,22,.6)}
.footer .linkedin{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(20,18,22,.16);color:rgba(20,18,22,.65);transition:color .25s var(--apple-ease),border-color .25s var(--apple-ease),background-color .25s var(--apple-ease)}
.footer .linkedin:hover{color:#141216;border-color:rgba(20,18,22,.4);background:rgba(20,18,22,.04)}
.footer-grid>div>h3{margin:4px 0 14px;font-size:12px;font-weight:600;letter-spacing:0;color:#141216}
.footer-grid>div:not(:first-child)>a{display:block;margin:0;padding:6px 0;font-size:13px;line-height:1.4;color:rgba(20,18,22,.62);transition:color .25s var(--apple-ease)}
.footer-grid>div:not(:first-child)>a:hover{color:#141216}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:56px;padding-top:22px;border-top:1px solid rgba(20,18,22,.1);font-size:12px;line-height:1.5;color:rgba(20,18,22,.5)}
.footer-bottom a{color:rgba(20,18,22,.72);white-space:nowrap;transition:color .25s var(--apple-ease)}
.footer-bottom a:hover{color:#141216}
@media(max-width:800px){
  .footer{padding:56px 0 24px}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
  .footer-brand{grid-column:1/-1}
  .footer-grid>div:last-child{grid-column:auto}
  .footer-grid>div:last-child a{display:block;margin-right:0}
  .footer-bottom{flex-wrap:wrap;margin-top:40px}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>div:last-child{grid-column:1/-1}
  .footer-bottom{font-size:11px}
}

/* Even spacing around the closing call to action: FAQ above, footer below. */
.faq{padding-bottom:56px}
.contact{min-height:0;padding-top:80px;padding-bottom:88px}
@media(max-width:800px){.faq{padding-bottom:44px}.contact{padding-top:64px;padding-bottom:72px}}

/* Footer is a rounded sheet that rises over the closing call to action, like the Features sheet over the hero. */
.footer{position:relative;z-index:8;margin-top:-48px;border-radius:48px 48px 0 0;background:#fff;border-top:1px solid rgba(20,18,22,.08);padding-top:80px}
.contact{padding-bottom:136px}
@media(max-width:800px){.footer{margin-top:-36px;border-radius:36px 36px 0 0;padding-top:64px}.contact{padding-bottom:108px}}
@media(max-width:600px){.footer{margin-top:-28px;border-radius:28px 28px 0 0}.contact{padding-bottom:100px}}

/* ---------- "Email our team": a considered hover and a small address popup ---------- */
.contact-actions .button-outline{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--apple-ease),background-color .35s var(--apple-ease),border-color .35s var(--apple-ease),box-shadow .35s var(--apple-ease)}
.contact-actions .button-outline::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .35s var(--apple-ease);
  background:radial-gradient(120% 140% at 50% 0%,rgba(255,196,64,.22),rgba(255,196,64,0) 70%)}
.contact-actions .button-outline:hover,.email-pop:has(:focus-visible) .button-outline{background:rgba(255,255,255,.07);border-color:rgba(255,214,150,.5);box-shadow:0 10px 30px -12px rgba(255,176,0,.35)}
.contact-actions .button-outline:hover::before,.email-pop:has(:focus-visible) .button-outline::before,.email-pop.is-open .button-outline::before{opacity:1}
.email-pop{position:relative;display:inline-flex}
.email-menu{position:absolute;left:50%;bottom:calc(100% + 14px);z-index:20;width:290px;padding:16px 16px 14px;text-align:left;border-radius:20px;
  background:rgba(26,22,18,.94);border:1px solid rgba(255,214,150,.2);color:#f5f2f8;
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 .5px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px) scale(.96);transform-origin:50% 100%;
  transition:opacity .22s var(--apple-ease),transform .32s var(--apple-ease),visibility 0s linear .32s}
/* Keeps the pointer inside the hover area while crossing from the button to the popup. */
.email-menu::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px}
.email-menu::before{content:'';position:absolute;left:50%;top:100%;width:12px;height:12px;margin:-6px 0 0 -6px;transform:rotate(45deg);background:rgb(26,22,18);border:solid rgba(255,214,150,.18);border-width:0 1px 1px 0;border-radius:0 0 3px 0}
.email-pop:hover .email-menu,.email-pop:has(:focus-visible) .email-menu,.email-pop.is-open .email-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition-delay:0s}
.email-menu-label{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.55)}
.email-menu-address{display:block;margin:4px 0 14px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:#fff;user-select:all}
.email-menu-actions{display:flex;gap:8px}
.email-copy,.email-write{flex:1;display:inline-grid;place-items:center;min-height:38px;padding:0 14px;border-radius:100px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background-color .25s var(--apple-ease),border-color .25s var(--apple-ease),transform .25s var(--apple-ease),color .25s var(--apple-ease)}
.email-copy{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;position:relative}
.email-copy:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.email-copy .swap-from,.email-copy .swap-to{grid-area:1/1;transition:opacity .2s var(--apple-ease),transform .3s var(--apple-ease)}
.email-copy .swap-to{opacity:0;transform:translateY(6px)}
.email-copy.is-copied .swap-from{opacity:0;transform:translateY(-6px)}
.email-copy.is-copied .swap-to{opacity:1;transform:none;color:#ffd987}
.email-write{background:var(--amber-bright);border:1px solid transparent;color:#111}
.email-write:hover{background:#ffd256}
.email-copy:active,.email-write:active{transform:scale(.97)}
.email-copy:focus-visible,.email-write:focus-visible{outline:2px solid #ffd987;outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.email-menu{transition:opacity .15s linear,visibility 0s}.email-menu,.email-pop:hover .email-menu,.email-pop:has(:focus-visible) .email-menu,.email-pop.is-open .email-menu{transform:translate(-50%,0)}}
@media(max-width:600px){.email-menu{width:min(290px,calc(100vw - 40px));left:auto;right:0;transform:translate(0,8px) scale(.96);transform-origin:80% 100%}
  .email-pop:hover .email-menu,.email-pop:has(:focus-visible) .email-menu,.email-pop.is-open .email-menu{transform:translate(0,0) scale(1)}
  .email-menu::before{left:auto;right:56px}}

/* Category line inside the hero H1, above the tagline: names what Feedlytics is for search engines and first-time visitors. */
.hero-kicker{display:block;margin-bottom:20px;font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.4;color:var(--amber-bright)}
.hero-tagline{display:block}
@media (max-width:600px){.hero-kicker{margin-bottom:14px;font-size:12px}}

/* Phones: keep small supporting text readable (at least 11-13px). */
@media (max-width:600px){
  html .hero-buttons .text-link{font-size:13px}
  html .hero-note{font-size:11px}
  html .carousel-caption{font-size:11px}
  html .console-link{font-size:12px;padding:6px 0}
  html .story-copy .text-link,html .story-copy-panel .text-link{font-size:12px}
  html .loyalty>.text-link,html .loyalty-info>.text-link{font-size:12px}
  html .flow-label>span{font-size:9px}
}

/* Phones and tablets: cards stacked behind the front card show only their coloured edge.
   Their text fades out as they move away from the front, so no stray words peek out from underneath. */
@media (max-width:820px){
  .story-scene .scene-screen,.story-scene .scene-title{opacity:calc(1 - var(--near,0) * 2.5)}
  #feature-carousel .feature-card>*{opacity:calc(1 - var(--depth,0) * 2.5)}
}