/* ==========================================================================
   Receipts — Design Tokens & Base Styles
   Brand: Aqua Mint primary, Obsidian Teal/Charcoal darks, Cobalt/Navy/Chartreuse secondary accents
   Type: Axiforma (display/headings), Figtree (body/UI)
   ========================================================================== */

@font-face { font-family:'Axiforma'; src:url('/assets/fonts/Axiforma-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Axiforma'; src:url('/assets/fonts/Axiforma-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Axiforma'; src:url('/assets/fonts/Axiforma-Heavy.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

:root{
  /* Brand colors — from Receipts Brand Guidelines v2 (authoritative: Aqua Mint primary) */
  --mint:#43bfbb;        /* Primary — Aqua Mint */
  --obsidian:#00343d;    /* Primary — Obsidian Teal (dark) */
  --charcoal:#231f20;    /* Primary — Dark Charcoal */
  --cobalt-blue:#2b3a9f; /* Secondary — Cobalt Blue */
  --navy-blue:#0d175c;   /* Secondary — Navy Blue */
  --chartreuse:#dee049;  /* Secondary — Chartreuse Yellow */
  --burnt-orange:#ce4911;/* Tertiary */
  --canary:#f8d605;      /* Tertiary */
  --slate:#6d6e71;       /* Tertiary — Medium Slate Gray */
  --off-white:#f1f2f2;   /* Tertiary */
  --mint-light:#8fdcd8;  /* UI tint of Aqua Mint, for highlights on dark backgrounds */

  /* Legacy aliases kept so component rules below don't need renaming;
     these now map to the correct authoritative palette. */
  --cobalt:var(--mint);
  --navy:var(--obsidian);
  --sky:var(--mint-light);
  --ocean:var(--cobalt-blue);

  /* Semantic tokens (light mode default) */
  --bg:#ffffff;
  --bg-alt:var(--off-white);
  --bg-dark:var(--obsidian);
  --bg-dark-2:var(--charcoal);
  --text:var(--charcoal);
  --text-muted:var(--slate);
  --text-on-dark:#ffffff;
  --text-on-dark-muted:#a9d4d1;
  --border:#e4e5ea;
  --accent:var(--mint);
  --accent-2:var(--mint-light);

  --font-display:'Axiforma', 'Figtree', -apple-system, sans-serif;
  --font-body:'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-marker:'Fraunces', 'Georgia', serif;

  --container:1200px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:28px;
  --shadow-sm:0 2px 8px rgba(0,52,61,.06);
  --shadow-md:0 8px 30px rgba(0,52,61,.10);
  --shadow-lg:0 24px 60px rgba(0,52,61,.16);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-size:17px;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem, 4.6vw, 4.2rem); font-weight:800; letter-spacing:-0.02em; }
h2{ font-size:clamp(1.9rem, 3.2vw, 2.75rem); }
h3{ font-size:1.4rem; }
p{ margin:0 0 1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cobalt);
  margin-bottom:18px; padding:7px 14px 7px 8px; border-radius:999px;
  background:rgba(67,191,187,.08); border:1px solid rgba(67,191,187,.18);
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--cobalt); display:inline-block; flex-shrink:0; }
.on-dark .eyebrow{ color:var(--chartreuse); background:rgba(222,224,73,.12); border-color:rgba(222,224,73,.28); }
.on-dark .eyebrow::before{ background:var(--chartreuse); }

/* Marker-script accent — a handwritten flourish for one emphasised phrase
   per key headline; never a whole sentence. */
.marker{
  font-family:var(--font-marker); font-weight:500; font-style:italic;
  color:var(--cobalt); display:inline-block; line-height:1.15;
  letter-spacing:0;
}
.hero-dark .marker, .on-dark .marker{ color:var(--chartreuse); }
h1 .marker{ font-size:1.18em; }
h2 .marker{ font-size:1.22em; }
.section-kicker{ font-size:2rem; margin-bottom:10px; font-weight:500; }
.section-head.center .section-kicker{ display:block; }

/* "Heart of Doha" — a small hand-drawn heart doodle beside the marker word */
.page-hero .marker{ color:var(--chartreuse); }
.heart-word{ position:relative; padding-right:.32em; }
.heart-doodle{
  width:.42em; height:.42em; position:absolute; top:-.32em; right:-.06em;
  color:var(--chartreuse); transform:rotate(8deg);
  animation:heartBeat 2.6s ease-in-out .6s infinite;
}
@keyframes heartBeat{ 0%,100%{ transform:rotate(8deg) scale(1); } 15%{ transform:rotate(8deg) scale(1.18); } 30%{ transform:rotate(8deg) scale(1); } }
@media (prefers-reduced-motion:reduce){ .heart-doodle{ animation:none; } }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .18s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--cobalt); color:#fff; box-shadow:0 10px 24px rgba(67,191,187,.28); }
.btn-primary:hover{ background:var(--navy); }
.btn-light{ background:#fff; color:var(--cobalt); box-shadow:0 10px 24px rgba(0,0,0,.10); }
.btn-outline{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-outline:hover{ border-color:var(--cobalt); color:var(--cobalt); }
.on-dark .btn-outline{ color:#fff; border-color:rgba(255,255,255,.28); }
.on-dark .btn-outline:hover{ border-color:#fff; }
.btn-sm{ padding:10px 18px; font-size:.88rem; }

/* Header */
.masthead-bar{ height:4px; background:var(--navy-blue); }
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:92px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ height:30px; width:auto; }
.brand-divider{ width:1px; height:26px; background:var(--border); flex-shrink:0; }
.brand-subtitle{ font-family:var(--font-display); font-weight:600; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav a{
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--text); padding:12px 14px; border-radius:0;
  border-bottom:2px solid transparent;
}
.main-nav a:hover{ color:var(--cobalt); background:none; border-bottom-color:var(--cobalt); }
.main-nav .active > a{ color:var(--cobalt); border-bottom-color:var(--cobalt); }
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
  background:#fff; border:1px solid var(--border); border-radius:8px;
  box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.16s ease;
}
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:10px 12px; border-radius:6px; font-size:.88rem; font-family:var(--font-body); font-weight:600; text-transform:none; letter-spacing:0; border-bottom:0; }
.dropdown a:hover{ background:var(--bg-alt); }
.header-cta{ display:flex; align-items:center; gap:10px; padding-left:18px; border-left:1px solid var(--border); }
.header-cta .btn{ border-radius:8px; }
.nav-toggle{ display:none; }

/* Footer */
.site-footer{ background:var(--navy); color:var(--text-on-dark); padding:80px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand img{ height:24px; margin-bottom:18px; }
.footer-brand p{ color:var(--text-on-dark-muted); max-width:280px; font-size:.94rem; }
.footer-col h4{ font-family:var(--font-display); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.footer-col a{ display:block; color:var(--text-on-dark-muted); font-size:.94rem; padding:6px 0; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:28px; flex-wrap:wrap; gap:16px; }
.footer-bottom p{ color:var(--text-on-dark-muted); font-size:.85rem; margin:0; }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--cobalt); }
.social-row svg{ width:16px; height:16px; }

/* Sections */
section{ padding:100px 0; }
.section-tight{ padding:64px 0; }
.on-dark{ background:var(--navy); color:#fff; }
.on-dark h1,.on-dark h2,.on-dark h3{ color:#fff; }
.on-dark p{ color:var(--text-on-dark-muted); }
.bg-alt{ background:var(--bg-alt); }
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Grids & cards */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:32px; transition:.2s ease; }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent; }
.icon-badge{ width:52px; height:52px; border-radius:14px; background:rgba(67,191,187,.08); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease; }
.icon-badge svg{ width:26px; height:26px; color:var(--cobalt); transition:transform .25s ease; }
.card:hover .icon-badge, .icon-badge:hover{ transform:translateY(-3px) rotate(-4deg); }
.card:hover .icon-badge svg{ transform:scale(1.08); }
/* Branded icon variants — cycle the palette instead of one mint tone everywhere */
.icon-badge.c-cobalt{ background:rgba(67,191,187,.10); } .icon-badge.c-cobalt svg{ color:var(--mint); }
.icon-badge.c-navy{ background:rgba(43,58,159,.08); } .icon-badge.c-navy svg{ color:var(--cobalt-blue); }
.icon-badge.c-chartreuse{ background:rgba(222,224,73,.16); } .icon-badge.c-chartreuse svg{ color:#9a9c1f; }
.icon-badge.c-orange{ background:rgba(206,73,17,.09); } .icon-badge.c-orange svg{ color:var(--burnt-orange); }
.icon-badge.c-canary{ background:rgba(248,214,5,.14); } .icon-badge.c-canary svg{ color:#a67e00; }
.icon-badge.c-obsidian{ background:rgba(0,52,61,.07); } .icon-badge.c-obsidian svg{ color:var(--obsidian); }
.tag{ display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:rgba(67,191,187,.08); color:var(--cobalt); }

/* Hero */
.hero{ position:relative; overflow:hidden; padding-top:72px; padding-bottom:0; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-bottom:80px; }
.hero-copy p.lead{ font-size:1.2rem; color:var(--text-muted); max-width:520px; }
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:56px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--navy); }
.hero-stats .stat span{ font-size:.85rem; color:var(--text-muted); }
.hero-visual{ position:relative; }
.blob{ position:absolute; inset:-10% -10% auto auto; width:640px; height:640px; background:radial-gradient(circle at 30% 30%, rgba(143,220,216,.30), rgba(67,191,187,.10) 60%, transparent 70%); z-index:-1; border-radius:50%; filter:blur(6px); }

/* Hero — dark editorial variant */
.hero-dark{
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(67,191,187,.20), transparent 60%),
    linear-gradient(160deg, var(--obsidian) 0%, var(--charcoal) 100%);
  color:#fff; padding-top:64px; padding-bottom:0;
}
.hero-dark .hero-copy .lead{ color:rgba(241,242,242,.72); }
.hero-dark .hero-stats .stat b{ color:#fff; }
.hero-dark .hero-stats .stat span{ color:rgba(241,242,242,.6); }
.hero-dark .hero-stats{ border-top:1px solid rgba(255,255,255,.14); padding-top:28px; }
.hero-dark .btn-primary{ box-shadow:0 10px 26px rgba(67,191,187,.34); }
.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:26px 0 34px; font-family:var(--font-display); font-weight:600;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(241,242,242,.5);
}
.scroll-cue svg{ width:14px; height:14px; animation:cueBob 1.8s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
@media (prefers-reduced-motion:reduce){ .scroll-cue svg{ animation:none; } }

/* Live receipts feed — a working stand-in for the actual product's own
   live transaction feed, used in the hero in place of an invented dashboard. */
.feed-widget{ background:var(--off-white); color:var(--charcoal); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:26px 24px 20px; max-width:420px; margin:0 auto; }
.feed-head{ padding-bottom:18px; margin-bottom:16px; border-bottom:1px dashed var(--border); }
.feed-label{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.feed-label::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(67,191,187,.22); }
.feed-total{ font-family:var(--font-display); font-weight:800; font-size:2.1rem; color:var(--charcoal); margin:8px 0 2px; font-variant-numeric:tabular-nums; }
.feed-total-currency{ font-size:1.05rem; font-weight:700; color:var(--text-muted); margin-right:6px; }
.feed-sub{ font-size:.78rem; color:var(--text-muted); }
.feed-rows{ display:flex; flex-direction:column; gap:10px; min-height:216px; }
.feed-row{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; background:#fff; border:1px solid var(--border); animation:feedIn .45s ease; }
@keyframes feedIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }
.feed-avatar{ width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.76rem; }
.feed-info{ flex:1; min-width:0; }
.feed-info b{ display:block; font-family:var(--font-display); font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-info span{ font-size:.72rem; color:var(--text-muted); }
.feed-amt{ display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:.86rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.feed-check{ width:16px; height:16px; border-radius:50%; background:var(--mint); color:#fff; font-style:normal; font-size:.62rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
@media (prefers-reduced-motion:reduce){ .feed-row{ animation:none; } }
@media (max-width:620px){ .feed-widget{ max-width:100%; } }

/* Logo strip */
.logo-strip{ padding:48px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.logo-strip .label{ font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); text-align:center; margin-bottom:32px; }
.logo-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:32px; opacity:.7; }
.logo-row .placeholder-logo{ height:28px; display:flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--slate); letter-spacing:-.02em; }

/* Feature row (alt image/text like fiskaly) */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.feature-row.reverse .feature-media{ order:2; }
.feature-media{ position:relative; }
.feature-media .art{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.feature-list{ margin-top:24px; }
.feature-list li{ display:flex; gap:12px; padding:10px 0; font-size:.98rem; color:var(--text-muted); }
.feature-list svg{ width:20px; height:20px; color:var(--cobalt); flex-shrink:0; margin-top:2px; }

/* CTA band */
.cta-band{ background:linear-gradient(135deg, var(--cobalt), var(--navy)); border-radius:var(--radius-lg); padding:64px; text-align:center; color:#fff; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:var(--text-on-dark-muted); max-width:520px; margin-left:auto; margin-right:auto; }
.cta-actions{ display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* Page header (inner pages) */
.page-hero{ padding:64px 0 72px; background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.page-hero h1{ color:#fff; max-width:760px; }
.page-hero p.lead{ color:var(--text-on-dark-muted); font-size:1.15rem; max-width:640px; }
.breadcrumb{ font-size:.85rem; color:var(--text-on-dark-muted); margin-bottom:18px; }
.breadcrumb a:hover{ color:#fff; }

/* Blog / press cards */
.post-card{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:.2s ease; background:#fff; }
.post-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.post-thumb{ aspect-ratio:16/10; background:linear-gradient(135deg, var(--cobalt), var(--sky)); position:relative; }
.post-thumb.alt{ background:linear-gradient(135deg, var(--navy), var(--cobalt)); }
.post-thumb.alt2{ background:linear-gradient(135deg, var(--ocean), var(--sky)); }
.post-body{ padding:26px; }
.post-meta{ display:flex; gap:10px; align-items:center; font-size:.8rem; color:var(--text-muted); margin-bottom:12px; }
.post-body h3{ margin-bottom:10px; }
.post-body p{ color:var(--text-muted); font-size:.95rem; }

.press-item{ display:flex; gap:24px; padding:28px 0; border-bottom:1px solid var(--border); }
.press-date{ min-width:110px; font-family:var(--font-display); font-weight:600; color:var(--cobalt); font-size:.85rem; }
.press-item h3{ font-size:1.15rem; margin-bottom:8px; }
.press-item p{ color:var(--text-muted); margin-bottom:10px; }

.notice-banner{ background:rgba(67,191,187,.06); border:1px dashed rgba(67,191,187,.35); border-radius:var(--radius-sm); padding:16px 20px; font-size:.88rem; color:var(--navy); display:flex; gap:10px; align-items:flex-start; margin-bottom:40px; }
.notice-banner svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; color:var(--cobalt); }

.featured-logo-card{ border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; display:flex; align-items:center; justify-content:center; height:120px; }
.featured-logo-card span{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--slate); }

/* Interactive "As Featured In / Trusted By" tab switcher */
.feat-tabs{ display:flex; gap:10px; justify-content:center; margin-bottom:44px; flex-wrap:wrap; }
.feat-tab{ font-family:var(--font-display); font-weight:600; font-size:.92rem; padding:12px 28px; border-radius:999px; border:1.5px solid var(--border); background:#fff; color:var(--text-muted); cursor:pointer; transition:all .2s ease; }
.feat-tab .count{ display:inline-block; margin-left:6px; font-size:.78rem; opacity:.7; }
.feat-tab.active{ background:var(--obsidian); border-color:var(--obsidian); color:#fff; box-shadow:var(--shadow-sm); }
.feat-tab:hover:not(.active){ border-color:var(--mint); color:var(--obsidian); transform:translateY(-1px); }

.feat-panel{ display:none; }
.feat-panel.active{ display:block; animation:featFadeUp .45s ease; }
@keyframes featFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

.logo-badge-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px; }
.logo-badge{ display:flex; align-items:center; gap:14px; padding:22px 20px; border:1px solid var(--border); border-radius:var(--radius-md); background:#fff; transition:all .25s ease; }
.logo-badge:hover{ border-color:var(--mint); box-shadow:var(--shadow-md); transform:translateY(-5px); }
.logo-badge .mono{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; flex-shrink:0; letter-spacing:-.01em; }
.logo-badge .name{ font-family:var(--font-display); font-weight:600; font-size:.96rem; color:var(--text); line-height:1.3; }
.logo-badge .tag{ display:block; font-family:var(--font-body); font-weight:400; font-size:.76rem; color:var(--text-muted); margin-top:2px; }

.quote-card{ background:var(--bg-alt); border-radius:var(--radius-md); padding:32px; }
.quote-card p{ font-size:1.05rem; color:var(--text); font-style:italic; }
.quote-card .who{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--cobalt),var(--sky)); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--font-display); font-weight:600; font-size:.85rem; margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; padding:14px 16px; border-radius:10px; border:1px solid var(--border);
  font-family:var(--font-body); font-size:.98rem; background:#fff;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--cobalt); outline-offset:1px; }
.contact-info-card{ background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:40px; }
.contact-info-card .row{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-info-card .row:last-child{ border-bottom:none; }
.contact-info-card svg{ width:20px; height:20px; color:var(--sky); flex-shrink:0; }

/* Timeline (about) */
.timeline{ position:relative; padding-left:32px; border-left:2px solid var(--border); }
.timeline-item{ position:relative; padding-bottom:44px; }
.timeline-item::before{ content:''; position:absolute; left:-38px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--cobalt); border:3px solid #fff; box-shadow:0 0 0 2px var(--cobalt); }
.timeline-item .year{ font-family:var(--font-display); font-weight:700; color:var(--cobalt); margin-bottom:6px; display:block; }

/* Stats band */
.stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stats-band .stat{ text-align:center; }
.stats-band b{ display:block; font-family:var(--font-display); font-size:2.4rem; }
.stats-band span{ font-size:.85rem; color:var(--text-on-dark-muted); }

/* Utility */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-12{ gap:12px; }

/* Dashboard mockup (hero / technology visual) */
.dash-mock{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; display:flex; border:1px solid var(--border); }
.dash-side{ width:64px; background:var(--navy); display:flex; flex-direction:column; align-items:center; padding:20px 0; gap:22px; flex-shrink:0; }
.dash-side img{ width:24px; margin-bottom:6px; }
.dash-side .dot{ width:22px; height:22px; border-radius:8px; background:rgba(255,255,255,.14); }
.dash-side .dot.on{ background:var(--sky); }
.dash-main{ flex:1; padding:24px 26px; min-width:0; }
.dash-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.dash-top h4{ font-family:var(--font-display); font-size:1rem; margin:0; }
.dash-top span{ font-size:.78rem; color:var(--text-muted); }
.dash-btn{ background:var(--cobalt); color:#fff; font-size:.76rem; font-family:var(--font-display); font-weight:600; padding:8px 14px; border-radius:999px; }
.dash-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.dash-card{ background:var(--bg-alt); border-radius:10px; padding:12px 14px; }
.dash-card span{ font-size:.68rem; color:var(--text-muted); display:block; margin-bottom:4px; }
.dash-card b{ font-family:var(--font-display); font-size:1.05rem; }
.dash-rows{ display:flex; flex-direction:column; gap:10px; }
.dash-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--bg-alt); border-radius:10px; font-size:.82rem; }
.dash-row .who{ display:flex; align-items:center; gap:10px; }
.dash-row .sw{ width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--cobalt),var(--sky)); flex-shrink:0; }
.dash-row b{ font-family:var(--font-display); }
.float-chip{ position:absolute; background:#fff; color:var(--charcoal); border-radius:14px; box-shadow:var(--shadow-md); padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:.82rem; font-family:var(--font-display); font-weight:600; }
.float-chip svg{ width:18px; height:18px; color:var(--cobalt); }

/* App preview — a faithful, interactive recreation of the real sign-in/sign-up
   screen at app.getreceipts.co (colors, radii and type pulled from the live
   product's own CSS), used in place of an invented dashboard mockup. */
.app-preview{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); overflow:hidden; max-width:420px; margin:0 auto; }
.app-chrome{ display:flex; align-items:center; gap:6px; padding:12px 16px; background:var(--off-white); border-bottom:1px solid var(--border); }
.app-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.app-dot.r{ background:#e4837a; } .app-dot.y{ background:var(--canary); } .app-dot.g{ background:var(--mint); }
.app-url{ margin-left:10px; font-size:.72rem; color:var(--text-muted); font-family:var(--font-body); letter-spacing:.01em; }
.app-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--off-white); border-radius:999px; padding:6px; margin:18px 20px 0; }
.app-tab{ appearance:none; border:0; background:transparent; padding:10px 12px; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:.82rem; color:var(--text-muted); cursor:pointer; transition:.15s ease; }
.app-tab.active{ background:#fff; color:#0024be; box-shadow:var(--shadow-sm); }
.app-panel{ padding:20px 24px 26px; }
.app-panel h4{ font-family:var(--font-display); font-size:1.15rem; margin:0 0 4px; }
.app-panel > p{ font-size:.8rem; color:var(--text-muted); margin:0 0 18px; }
.app-field{ margin-bottom:14px; }
.app-field label{ display:block; font-family:var(--font-body); font-weight:600; font-size:.76rem; margin-bottom:6px; }
.app-input{ border:1px solid #dce4e4; background:#fff; border-radius:8px; padding:9px 12px; font-size:.82rem; color:var(--text-muted); }
.app-input.muted{ color:#b7bdbd; }
.app-btn{ margin-top:6px; background:var(--mint); color:#fff; text-align:center; font-family:var(--font-body); font-weight:600; font-size:.86rem; padding:11px; border-radius:8px; cursor:pointer; transition:.15s ease; }
.app-btn:hover{ background:#39a9a5; }
@media (max-width:620px){ .app-preview{ max-width:100%; } }
.tech-dash-grid{ display:grid; grid-template-columns:1.35fr .95fr; gap:28px; align-items:start; }
.tech-dash-caption{ text-align:center; font-size:.78rem; color:var(--text-muted); margin:14px 0 0; }
@media (max-width:980px){ .tech-dash-grid{ grid-template-columns:1fr; } }

/* FAQ accordion */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.faq-q svg{ width:20px; height:20px; flex-shrink:0; transition:transform .2s ease; color:var(--cobalt); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:340px; }
.faq-a p{ padding-bottom:24px; color:var(--text-muted); margin:0; max-width:700px; }

/* Code block (technology page) */
.code-block{ background:var(--charcoal); border-radius:var(--radius-md); padding:26px 28px; overflow-x:auto; box-shadow:var(--shadow-lg); }
.code-block pre{ margin:0; font-family:'SF Mono', Menlo, Consolas, monospace; font-size:.86rem; line-height:1.7; color:#e7e7ea; }
.code-block .c1{ color:#7fd9c4; } .code-block .c2{ color:#7fb0f0; } .code-block .c3{ color:#f0c674; }
.code-dots{ display:flex; gap:6px; margin-bottom:16px; }
.code-dots span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); }

/* Mobile nav panel */
.mobile-panel{ display:none; flex-direction:column; gap:2px; padding:14px 28px 24px; border-top:1px solid var(--border); }
.mobile-panel.open{ display:flex; }
.mobile-panel a{ padding:12px 0; font-family:var(--font-body); font-weight:600; border-bottom:1px solid var(--border); }
.mobile-panel-label{ padding:14px 0 4px; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.mobile-panel-label:first-child{ padding-top:0; }

/* Scroll-reveal — content is visible by default (this rule never sets a
   .reveal element to opacity:0 on its own). main.js opts a page into the
   animated entrance by adding .will-reveal at the same moment it starts
   observing the element, with a hard timeout fallback that forces every
   element visible regardless of whether the observer ever fires — so a
   slow device, a scripting error, or a headless render still shows full
   content, it just skips the animation. */
.reveal.will-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.will-reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal.will-reveal{ opacity:1; transform:none; transition:none; }
}

/* Copy-to-clipboard button — generic, used on brand swatches, boilerplate
   text and the API code sample. */
.copy-btn{
  display:inline-flex; align-items:center; gap:6px; appearance:none; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  border:1px solid var(--border); background:#fff; color:var(--text);
  padding:7px 12px; border-radius:999px; transition:.15s ease;
}
.copy-btn:hover{ border-color:var(--cobalt); color:var(--cobalt); }
.copy-btn svg{ width:13px; height:13px; }
.copy-btn.is-copied{ border-color:var(--mint); color:var(--mint); background:rgba(67,191,187,.08); }
.code-block .copy-btn{ background:transparent; border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.75); }
.code-block .copy-btn:hover{ border-color:#fff; color:#fff; }
.code-block .copy-btn.is-copied{ border-color:var(--mint); color:var(--mint); }
.contact-info-card .copy-btn{ background:transparent; border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.8); padding:5px 10px; font-size:.72rem; margin-left:auto; align-self:center; }
.contact-info-card .copy-btn:hover{ border-color:#fff; color:#fff; }
.contact-info-card .copy-btn.is-copied{ border-color:var(--mint); color:var(--mint); }
.contact-info-card .row{ align-items:center; }
.code-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }

/* Brand color swatches (media kit) — click to copy the hex value */
.swatch{ padding:0; overflow:hidden; cursor:pointer; text-align:left; border:1px solid var(--border); background:#fff; border-radius:var(--radius-md); transition:.2s ease; }
.swatch:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.swatch-fill{ height:88px; position:relative; }
.swatch-body{ padding:14px 16px; }
.swatch-body b{ display:block; font-family:var(--font-display); font-size:.92rem; }
.swatch-hex{ display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.82rem; margin-top:2px; }
.swatch-copied{ display:none; color:var(--mint); font-weight:600; }
.swatch.is-copied .swatch-hex{ display:none; }
.swatch.is-copied .swatch-copied{ display:flex; align-items:center; gap:6px; }

/* Timeline — click an item to expand a bit more detail (about.html, news.html) */
.timeline-item{ cursor:pointer; }
.timeline-item h3{ display:flex; align-items:center; gap:8px; }
.timeline-item .expand-icon{ width:16px; height:16px; flex-shrink:0; color:var(--text-muted); transition:transform .2s ease; }
.timeline-item.open .expand-icon{ transform:rotate(45deg); color:var(--cobalt); }
.timeline-detail{ max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--text-muted); font-size:.94rem; }
.timeline-item.open .timeline-detail{ max-height:200px; margin-top:8px; }
.timeline-item::before{ transition:background .2s ease, box-shadow .2s ease; }
.timeline-item.open::before{ background:var(--mint); box-shadow:0 0 0 2px var(--mint); }

/* In-page tab nav with scroll-spy (use-cases.html, legal.html) */
.page-nav{ position:sticky; top:96px; z-index:20; display:flex; gap:8px; flex-wrap:wrap; padding:10px; background:#fff; border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-sm); width:fit-content; margin:0 auto 56px; }
.page-nav a{ font-family:var(--font-display); font-weight:600; font-size:.85rem; padding:9px 16px; border-radius:999px; color:var(--text-muted); transition:.15s ease; }
.page-nav a:hover{ color:var(--cobalt); }
.page-nav a.active{ background:var(--cobalt); color:#fff; }

/* Press releases — click "Read release" to expand the excerpt in place */
.press-item .btn.is-open svg{ transform:rotate(180deg); }
.press-item .btn svg{ transition:transform .2s ease; }
.press-detail{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.press-item.open .press-detail{ max-height:400px; margin-top:14px; }
.press-detail p{ color:var(--text-muted); font-size:.94rem; padding:16px; background:var(--bg-alt); border-radius:var(--radius-sm); margin:0; }

/* Blog category filter chips */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.filter-chip{ appearance:none; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.82rem; padding:9px 16px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--text-muted); transition:.15s ease; }
.filter-chip:hover{ border-color:var(--cobalt); color:var(--cobalt); }
.filter-chip.active{ background:var(--cobalt); border-color:var(--cobalt); color:#fff; }
.post-card.is-hidden{ display:none; }

/* "How it works" process flow (technology.html) — an interactive vertical
   stepper inspired by payment-gateway "transaction to receipt" flows;
   built from scratch to match the Receipts API/product story rather than
   copied art. Click a step to pin it open with extra technical detail. */
.flow-steps{ position:relative; max-width:760px; margin:0 auto; padding-left:8px; }
.flow-step{ position:relative; display:flex; gap:22px; padding-bottom:8px; cursor:pointer; }
.flow-step::before{ content:''; position:absolute; left:23px; top:52px; bottom:-8px; width:2px; background:var(--border); }
.flow-step:last-child::before{ display:none; }
.flow-num{
  flex-shrink:0; width:48px; height:48px; border-radius:50%; background:#fff;
  border:2px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text-muted);
  transition:.2s ease; position:relative; z-index:1;
}
.flow-step.active .flow-num{ background:var(--mint); border-color:var(--mint); color:#fff; transform:scale(1.08); }
.flow-body{ flex:1; padding:6px 0 32px; }
.flow-tag{ font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mint); margin-bottom:4px; }
.flow-body h3{ font-size:1.15rem; margin:0 0 6px; }
.flow-body p{ color:var(--text-muted); margin:0; max-width:520px; }
.flow-extra{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.flow-step.active .flow-extra{ max-height:120px; margin-top:10px; }
.flow-extra p{ font-size:.86rem; background:var(--bg-alt); border-radius:var(--radius-sm); padding:12px 14px; margin:0; }
@media (max-width:620px){ .flow-num{ width:40px; height:40px; font-size:1rem; } .flow-step{ gap:16px; } .flow-step::before{ left:19px; } }

/* Receipt delivery — three interactive delivery methods (SMS link, QR code,
   email), each with a small live-updating preview. Concept inspired by
   payment-terminal receipt-delivery UIs; visuals and copy are original and
   scoped to how Receipts actually delivers today. */
.delivery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.delivery-tabs{ display:flex; flex-direction:column; gap:12px; }
.delivery-tab{
  display:flex; align-items:flex-start; gap:16px; text-align:left; width:100%;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px; cursor:pointer; transition:.2s ease;
}
.delivery-tab .icon-badge{ margin-bottom:0; }
.delivery-tab h3{ font-size:1.02rem; margin:0 0 4px; }
.delivery-tab p{ color:var(--text-muted); font-size:.88rem; margin:0; }
.delivery-tab:hover{ border-color:var(--mint); }
.delivery-tab.active{ border-color:var(--mint); box-shadow:0 0 0 1px var(--mint); background:rgba(67,191,187,.05); }
.delivery-preview{ position:relative; min-height:340px; }
.delivery-panel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.delivery-panel.active{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }

/* SMS-link preview: a phone frame with a receipt notification toast */
.phone-mock{ width:240px; background:var(--charcoal); border-radius:32px; padding:10px; box-shadow:var(--shadow-lg); }
.phone-mock .screen{ background:linear-gradient(160deg,var(--obsidian),var(--navy-blue)); border-radius:24px; padding:20px 14px 28px; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; }
.phone-mock .toast{ background:#fff; border-radius:14px; padding:14px; display:flex; gap:10px; align-items:flex-start; box-shadow:var(--shadow-md); animation:toastIn .5s ease both; }
.phone-mock .toast .icon-badge{ width:34px; height:34px; border-radius:10px; margin-bottom:0; flex-shrink:0; }
.phone-mock .toast .icon-badge svg{ width:18px; height:18px; }
.phone-mock .toast-body{ min-width:0; }
.phone-mock .toast-body b{ display:block; font-family:var(--font-display); font-size:.82rem; }
.phone-mock .toast-body span{ display:block; font-size:.78rem; color:var(--text-muted); margin-top:2px; }
.phone-mock .toast-time{ font-size:.66rem; color:var(--text-on-dark-muted); text-align:right; margin-bottom:8px; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:translateY(0) scale(1);} }

/* QR preview: a generated-look card (decorative pattern, not a scannable code) */
.qr-mock{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px; text-align:center; width:240px; }
.qr-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; width:140px; margin:0 auto 16px; }
.qr-grid span{ aspect-ratio:1; border-radius:2px; background:var(--charcoal); }
.qr-grid span.off{ background:transparent; }
.qr-mock b{ display:block; font-family:var(--font-display); font-size:.86rem; }
.qr-mock span.qr-caption{ display:block; font-size:.76rem; color:var(--text-muted); margin-top:4px; }

/* Email preview: a compact inbox-style card */
.email-mock{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:280px; overflow:hidden; }
.email-mock .email-head{ padding:16px 18px; border-bottom:1px solid var(--border); }
.email-mock .email-head b{ display:block; font-family:var(--font-display); font-size:.88rem; }
.email-mock .email-head span{ display:block; font-size:.74rem; color:var(--text-muted); margin-top:2px; }
.email-mock .email-body{ padding:16px 18px; }
.email-mock .email-row{ display:flex; justify-content:space-between; font-size:.8rem; padding:7px 0; border-bottom:1px dashed var(--border); }
.email-mock .email-row:last-child{ border-bottom:none; font-family:var(--font-display); font-weight:700; }
@media (max-width:860px){ .delivery-grid{ grid-template-columns:1fr; } .delivery-preview{ min-height:auto; padding:20px 0; } }

/* Responsive */
@media (max-width: 980px){
  .page-nav{ position:static; overflow-x:auto; flex-wrap:nowrap; width:auto; margin:0 0 32px; }
  .main-nav, .header-cta .btn-outline{ display:none; }
  .brand-subtitle, .brand-divider{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-grid, .feature-row, .feature-row.reverse .feature-media, .contact-grid{ grid-template-columns:1fr; }
  .feature-row.reverse .feature-media{ order:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .stats-band{ grid-template-columns:repeat(2,1fr); }
  section{ padding:64px 0; }
  .cta-band{ padding:40px 24px; }
}
@media (max-width: 620px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .grid-4, .grid-3{ grid-template-columns:1fr; }
  .press-item{ flex-direction:column; gap:8px; }
}

/* ==========================================================================
   Homepage: moving & interactive visuals
   Marquees, an annotated receipt diagram, an animated "Ask Receipts" mock,
   a loyalty journey path, and a social-proof marquee. All motion respects
   prefers-reduced-motion (paused/instant), and every section stays fully
   legible with JS/animation disabled.
   ========================================================================== */

/* Decorative blurred gradient blobs — pure CSS, purely ambient. */
.bg-blob{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; opacity:.55; }
.section-relative{ position:relative; overflow:hidden; }

/* --- Moving receipts marquee --- */
.marquee-wrap{ overflow:hidden; padding:26px 0; background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.marquee-track{ display:flex; gap:16px; width:max-content; animation:marqueeLeft 34s linear infinite; }
.marquee-track.reverse{ animation-name:marqueeRight; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marqueeRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.mini-receipt{
  flex-shrink:0; display:flex; align-items:center; gap:12px; white-space:nowrap;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 18px;
  box-shadow:var(--shadow-sm); font-family:var(--font-body);
}
.mini-receipt .mini-dot{ width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.72rem; }
.mini-receipt b{ font-family:var(--font-display); font-size:.86rem; }
.mini-receipt .mini-sub{ display:block; font-size:.72rem; color:var(--text-muted); }
.mini-receipt .mini-amt{ font-family:var(--font-display); font-weight:700; color:var(--mint); margin-left:6px; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* --- Receipt anatomy: a real, live-interactive receipt demo --- */
.anatomy-grid{ display:grid; grid-template-columns:.86fr 1.14fr; gap:56px; align-items:center; }
.anatomy-receipt{ position:relative; display:flex; flex-direction:column; align-items:center; }
.demo-frame-label{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:.78rem; color:var(--mint); margin-bottom:14px; }
.demo-frame-label .pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); position:relative; }
.demo-frame-label .pulse-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--mint); animation:hotspotPing 2s ease-out infinite; }
.demo-frame{
  width:100%; max-width:340px; height:600px; border-radius:36px; padding:12px;
  background:linear-gradient(160deg,var(--charcoal),#000); box-shadow:var(--shadow-lg);
}
.demo-frame iframe{ width:100%; height:100%; border:0; border-radius:26px; background:#f2f2f4; }
.demo-frame-caption{ font-size:.76rem; color:var(--text-muted); margin-top:14px; text-align:center; max-width:320px; }
@media (prefers-reduced-motion:reduce){ .demo-frame-label .pulse-dot::after{ animation:none; } }
@media (max-width:640px){ .demo-frame{ height:520px; } }
.anatomy-receipt-legacy{ position:relative; display:flex; justify-content:center; }
.receipt-paper{
  position:relative; width:280px; background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:26px 22px 20px;
  background-image:
    linear-gradient(90deg, transparent 0, transparent 100%);
  clip-path:polygon(0 0,100% 0,100% 96%,96% 100%,92% 96%,88% 100%,84% 96%,80% 100%,76% 96%,72% 100%,68% 96%,64% 100%,60% 96%,56% 100%,52% 96%,48% 100%,44% 96%,40% 100%,36% 96%,32% 100%,28% 96%,24% 100%,20% 96%,16% 100%,12% 96%,8% 100%,4% 96%,0 100%);
}
.receipt-paper .r-top{ text-align:center; margin-bottom:14px; }
.receipt-paper .r-top img{ width:26px; margin-bottom:8px; }
.receipt-paper .r-top b{ display:block; font-family:var(--font-display); font-size:.94rem; }
.receipt-paper .r-top span{ display:block; font-size:.7rem; color:var(--text-muted); }
.receipt-paper .r-lines{ border-top:1px dashed var(--border); border-bottom:1px dashed var(--border); padding:12px 0; margin-bottom:10px; }
.receipt-paper .r-line{ display:flex; justify-content:space-between; font-size:.76rem; padding:4px 0; color:var(--text-muted); }
.receipt-paper .r-total{ display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:.9rem; margin-bottom:14px; }
.receipt-paper .r-qr{ width:56px; height:56px; margin:0 auto 12px; display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }
.receipt-paper .r-qr span{ background:var(--charcoal); border-radius:1px; }
.receipt-paper .r-qr span.off{ background:transparent; }
.receipt-paper .r-foot{ text-align:center; font-family:var(--font-marker); font-size:1rem; color:var(--mint); transform:rotate(-1deg); }
.hotspot{
  position:absolute; width:26px; height:26px; border-radius:50%; background:var(--mint); color:#fff;
  border:3px solid #fff; box-shadow:var(--shadow-md); font-family:var(--font-display); font-weight:700; font-size:.76rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s ease; z-index:2;
}
.hotspot::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--mint); opacity:.5; animation:hotspotPing 2.4s ease-out infinite; }
.hotspot:hover, .hotspot.active{ background:var(--burnt-orange); transform:scale(1.12); }
.hotspot.active::after{ display:none; }
@keyframes hotspotPing{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.7); opacity:0; } }
.anatomy-copy{ display:flex; flex-direction:column; gap:6px; }
.anatomy-item{ display:flex; gap:16px; padding:16px; border-radius:var(--radius-md); cursor:pointer; transition:.2s ease; border:1px solid transparent; }
.anatomy-item:hover{ background:var(--bg-alt); }
.anatomy-item.active{ background:rgba(67,191,187,.07); border-color:rgba(67,191,187,.24); }
.anatomy-num{ flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--off-white); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.82rem; transition:.2s ease; }
.anatomy-item.active .anatomy-num{ background:var(--mint); color:#fff; }
.anatomy-item h3{ font-size:1rem; margin:0 0 4px; }
.anatomy-item p{ margin:0; color:var(--text-muted); font-size:.9rem; }
@media (prefers-reduced-motion:reduce){ .hotspot::after{ animation:none; } }
@media (max-width:900px){ .anatomy-grid{ grid-template-columns:1fr; } }

/* --- "How smart does it get" — animated Ask Receipts mock --- */
.ai-mock{
  background:var(--charcoal); border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow-lg);
  max-width:520px; margin:0 auto; position:relative; overflow:hidden;
}
.ai-mock-head{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.ai-mock-head .dot{ width:9px; height:9px; border-radius:50%; background:var(--mint); }
.ai-mock-head span{ font-family:var(--font-display); font-weight:600; font-size:.8rem; color:rgba(255,255,255,.6); }
.ai-row{ margin-bottom:16px; }
.ai-q{ display:flex; justify-content:flex-end; }
.ai-q span{ background:var(--mint); color:#fff; border-radius:14px 14px 2px 14px; padding:10px 16px; font-size:.86rem; font-family:var(--font-body); display:inline-block; }
.ai-typewriter{ display:inline-block; overflow:hidden; white-space:nowrap; width:0; vertical-align:bottom; }
.ai-mock.play .ai-typewriter{ animation:aiType 1.6s steps(38,end) .3s forwards; }
@keyframes aiType{ to{ width:100%; } }
.ai-a{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:2px 14px 14px 14px; padding:16px; opacity:0; transform:translateY(6px); }
.ai-mock.play .ai-a{ animation:aiFadeIn .5s ease 2s forwards; }
@keyframes aiFadeIn{ to{ opacity:1; transform:translateY(0); } }
.ai-bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:.76rem; color:rgba(255,255,255,.7); }
.ai-bar-row span{ width:118px; flex-shrink:0; font-family:var(--font-body); }
.ai-bar-track{ flex:1; height:8px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.ai-bar{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--mint),var(--mint-light)); }
.ai-mock.play .ai-bar{ animation:aiBarGrow 1s cubic-bezier(.2,.8,.3,1) forwards; animation-delay:calc(2.2s + var(--i) * .15s); }
@keyframes aiBarGrow{ to{ width:var(--w); } }
.ai-summary{ margin:14px 0 0; font-size:.82rem; color:rgba(255,255,255,.78); border-top:1px solid rgba(255,255,255,.09); padding-top:12px; opacity:0; }
.ai-mock.play .ai-summary{ animation:aiFadeIn .5s ease 3.1s forwards; }
.ai-cursor{ display:inline-block; width:2px; height:14px; background:#fff; margin-left:2px; vertical-align:middle; animation:aiBlink .9s step-end infinite; }
@keyframes aiBlink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .ai-typewriter{ width:auto; animation:none!important; } .ai-a, .ai-summary{ opacity:1; transform:none; animation:none!important; }
  .ai-bar{ animation:none!important; width:var(--w); } .ai-cursor{ display:none; }
}

/* --- "Your customers keep coming back" — loyalty journey path --- */
.loyalty-path{ position:relative; padding-top:8px; }
.loyalty-line{ display:block; width:100%; height:70px; overflow:visible; margin-bottom:-18px; }
.loyalty-line path{ fill:none; stroke:var(--border); stroke-width:2; stroke-dasharray:2 10; stroke-linecap:round; }
.loyalty-dot{
  width:14px; height:14px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 5px rgba(67,191,187,.18);
  offset-path:path('M20,40 C200,0 600,80 780,40'); offset-rotate:0deg;
  animation:loyaltyTravel 6s ease-in-out infinite;
}
@keyframes loyaltyTravel{ 0%{ offset-distance:0%; } 50%{ offset-distance:100%; } 100%{ offset-distance:0%; } }
.loyalty-stops{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.loyalty-stops .icon-badge{ margin:0 auto 16px; }
.loyalty-stops h3{ font-size:.98rem; margin:0 0 6px; }
.loyalty-stops p{ margin:0; color:var(--text-muted); font-size:.86rem; }
.loyalty-points{ max-width:340px; margin:52px auto 0; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:22px 24px; }
.loyalty-points-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.loyalty-points-head b{ font-family:var(--font-display); }
.loyalty-points-head span{ font-size:.78rem; color:var(--text-muted); }
.loyalty-bar-track{ height:10px; background:var(--bg-alt); border-radius:999px; overflow:hidden; margin-bottom:8px; }
.loyalty-bar{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--chartreuse),var(--mint)); transition:width 1.4s cubic-bezier(.2,.8,.3,1); }
.loyalty-points.in-view .loyalty-bar{ width:68%; }
.loyalty-points-caption{ font-size:.76rem; color:var(--text-muted); margin:0; }
@media (prefers-reduced-motion:reduce){ .loyalty-dot{ animation:none; offset-distance:35%; } .loyalty-bar{ transition:none; } }
@media (max-width:900px){ .loyalty-stops{ grid-template-columns:repeat(2,1fr); row-gap:32px; } .loyalty-line{ display:none; } }

/* --- Social proof marquee (sample content, clearly marked) --- */
.social-card{
  flex-shrink:0; width:300px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 20px; box-shadow:var(--shadow-sm); white-space:normal;
}
.social-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.social-avatar{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.86rem; flex-shrink:0; }
.social-head b{ display:block; font-family:var(--font-display); font-size:.86rem; line-height:1.25; }
.social-head span{ display:block; font-size:.74rem; color:var(--text-muted); }
.social-badge{ width:15px; height:15px; color:var(--mint); margin-left:auto; flex-shrink:0; }
.social-card p{ font-size:.86rem; color:var(--text); margin:0 0 12px; line-height:1.5; }
.social-foot{ display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--text-muted); }
.social-foot .stars{ color:var(--canary); letter-spacing:1px; }

/* ==========================================================================
   teya.com-inspired pass: a dark utility bar, a hand-drawn squiggle CTA
   accent, a scrolling city strip and a click-to-open FAQ — playful,
   confident interactive brand elements layered onto the existing palette
   and type system rather than a literal copy of teya's own branding.
   ========================================================================== */

/* --- Announcement bar: slim dark utility strip above the header --- */
.announce-bar{
  background:var(--obsidian); color:var(--off-white);
  font-family:var(--font-display); font-weight:600; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid rgba(241,242,242,.08);
}
.announce-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:11px; padding-bottom:11px; }
.announce-bar .announce-label{ display:flex; align-items:center; gap:10px; color:var(--mint-light); min-width:0; }
.announce-bar .announce-label span{ color:var(--off-white); font-weight:500; letter-spacing:.02em; text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.announce-bar a.announce-link{ display:inline-flex; align-items:center; gap:8px; color:var(--off-white); text-transform:none; letter-spacing:.01em; font-size:.82rem; font-weight:600; flex-shrink:0; padding-left:18px; border-left:1px solid rgba(241,242,242,.18); }
.announce-bar a.announce-link svg{ width:13px; height:13px; transition:transform .18s ease; }
.announce-bar a.announce-link:hover{ color:var(--mint-light); }
.announce-bar a.announce-link:hover svg{ transform:translateX(3px); }
.announce-bar .announce-close{ background:none; border:0; color:rgba(241,242,242,.45); cursor:pointer; padding:4px; display:flex; flex-shrink:0; }
.announce-bar .announce-close:hover{ color:#fff; }
.announce-bar .announce-close svg{ width:14px; height:14px; }
@media (max-width:640px){ .announce-bar .announce-label span{ display:none; } .announce-bar a.announce-link span{ display:none; } }

/* --- Squiggle CTA accent: a hand-drawn underline flourish, teya-style --- */
.btn-squiggle{ position:relative; padding-bottom:22px; }
.btn-squiggle::after{
  content:''; position:absolute; left:26px; right:26px; bottom:11px; height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M2 6 Q10 1 18 6 T34 6 T50 6 T58 6' fill='none' stroke='%23dee049' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:30px 6px; opacity:.95;
}
.btn-outline.btn-squiggle::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M2 6 Q10 1 18 6 T34 6 T50 6 T58 6' fill='none' stroke='%2343bfbb' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.btn-squiggle:hover::after{ animation:squiggleWiggle .5s ease; }
@keyframes squiggleWiggle{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ .btn-squiggle:hover::after{ animation:none; } }

/* --- City marquee: "built for merchants across ..." scrolling strip --- */
.city-marquee-wrap{ overflow:hidden; background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 0; }
.city-marquee-label{ text-align:center; font-family:var(--font-display); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.city-marquee-track{ display:flex; width:max-content; animation:marqueeLeft 46s linear infinite; }
.city-marquee-wrap:hover .city-marquee-track{ animation-play-state:paused; }
.city-chip{ display:flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text); padding:0 26px; white-space:nowrap; }
.city-chip::after{ content:'\2022'; margin-left:26px; color:var(--mint); font-weight:700; }
@media (prefers-reduced-motion:reduce){ .city-marquee-track{ animation:none; } }
@media (max-width:640px){ .city-chip{ font-size:.92rem; padding:0 18px; } .city-chip::after{ margin-left:18px; } }

/* FAQ accordion (homepage): reuses the .faq-item/.faq-q/.faq-a component
   and click-to-open script already established on technology.html — see
   the base rules earlier in this file. */
.faq-list{ max-width:760px; margin:0 auto; }

/* --- "Ask Receipts" cursive + highlighter wordmark --- */
.ai-mock-title{
  font-family:var(--font-marker); font-weight:700; font-style:italic;
  font-size:1.3rem; color:#fff; position:relative; display:inline-block; padding:0 5px;
}
.ai-mock-title::before{
  content:''; position:absolute; left:-3px; right:-3px; bottom:1px; height:.5em;
  background:var(--chartreuse); opacity:.55; z-index:-1; transform:rotate(-1.5deg); border-radius:2px;
}

/* --- Interactive merchant portal mock (feature-row visual) --- */
.portal-mock{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.portal-tabs{ display:flex; border-bottom:1px solid var(--border); }
.portal-tab{ flex:1; appearance:none; cursor:pointer; background:none; border:0; padding:16px 12px; font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--text-muted); border-bottom:2px solid transparent; transition:.18s ease; }
.portal-tab:hover{ color:var(--cobalt); }
.portal-tab.active{ color:var(--cobalt); border-bottom-color:var(--cobalt); background:rgba(67,191,187,.05); }
.portal-body{ padding:22px 22px 24px; }
.portal-panel{ display:none; }
.portal-panel.active{ display:block; }
.portal-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed var(--border); font-size:.86rem; }
.portal-row:last-child{ border-bottom:none; }
.portal-row .portal-dot{ width:28px; height:28px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.66rem; }
.portal-row b{ display:block; font-family:var(--font-display); font-size:.84rem; }
.portal-row span.portal-sub{ display:block; font-size:.72rem; color:var(--text-muted); }
.portal-row .portal-status{ margin-left:auto; font-family:var(--font-display); font-weight:600; font-size:.7rem; padding:4px 10px; border-radius:999px; background:rgba(67,191,187,.10); color:var(--mint); white-space:nowrap; }

/* --- Perks & promotions --- */
.perks-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.perk-card{ position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; overflow:hidden; }
.perk-ribbon{
  position:absolute; top:18px; right:-34px; background:var(--burnt-orange); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 40px; transform:rotate(40deg); box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.perk-card.tennis .perk-ribbon{ background:var(--chartreuse); color:var(--charcoal); }
.perk-icon{ width:52px; height:52px; border-radius:14px; background:rgba(67,191,187,.08); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.perk-icon svg{ width:26px; height:26px; color:var(--cobalt); }
.perk-card h3{ margin-bottom:8px; }
.perk-card p{ color:var(--text-muted); font-size:.92rem; margin-bottom:22px; }
.stamp-row{ display:flex; gap:10px; }
.stamp{ width:34px; height:34px; border-radius:50%; border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stamp svg{ width:16px; height:16px; color:transparent; }
.stamp.filled{ border-style:solid; border-color:var(--mint); background:var(--mint); }
.stamp.filled svg{ color:#fff; }
.stamp.reward{ border-color:var(--chartreuse); border-style:dashed; }
.stamp.reward svg{ color:var(--chartreuse); }
.perk-card.play .stamp.filled{ animation:stampPop .45s cubic-bezier(.34,1.56,.64,1) backwards; }
.perk-card.play .stamp.filled:nth-child(1){ animation-delay:.1s; }
.perk-card.play .stamp.filled:nth-child(2){ animation-delay:.28s; }
.perk-card.play .stamp.filled:nth-child(3){ animation-delay:.46s; }
@keyframes stampPop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.tennis-track{ display:flex; align-items:center; gap:12px; }
.tennis-ball{ width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #e9f97a, var(--chartreuse)); position:relative; flex-shrink:0; animation:tennisBounce 1.6s ease-in-out infinite; }
.tennis-ball::after{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(255,255,255,.55); }
@keyframes tennisBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.tennis-progress{ flex:1; height:8px; border-radius:999px; background:var(--bg-alt); overflow:hidden; }
.tennis-progress-fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--chartreuse),var(--mint)); transition:width 1.4s cubic-bezier(.2,.8,.3,1); }
.perk-card.play .tennis-progress-fill{ width:70%; }
@media (prefers-reduced-motion:reduce){ .tennis-ball{ animation:none; } .perk-card.play .stamp.filled{ animation:none; } }
@media (max-width:760px){ .perks-grid{ grid-template-columns:1fr; } }

/* --- Blog: brand visuals & interactive touches --- */
.post-thumb{ position:relative; overflow:hidden; }
.post-thumb::after{
  content:''; position:absolute; right:-14px; bottom:-18px; width:120px; height:120px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2'%3E%3Cpath d='M4 4v16l3-2 3 2 3-2 3 2 3-2 3 2V4l-3 2-3-2-3 2-3-2-3 2-3-2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; opacity:.16; transform:rotate(-8deg); transition:transform .35s ease; pointer-events:none;
}
.post-card:hover .post-thumb::after{ transform:rotate(-3deg) scale(1.08); }
.post-thumb-tag{
  position:absolute; top:14px; left:14px; background:rgba(255,255,255,.94); color:var(--charcoal);
  font-family:var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; z-index:1;
}
.reading-progress{ position:sticky; top:80px; z-index:90; height:4px; background:var(--bg-alt); }
.reading-progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--mint),var(--chartreuse)); }
@media (max-width:980px){ .reading-progress{ top:0; } }