/* Shiro public website */
@import url('/assets/css/brand.css');

body { background: var(--white); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
section { scroll-margin-top: 80px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.section { padding: 84px 0; }
.section.alt { background: var(--cream); }
.section.dark { background: var(--teal-900); color: #fff; }
.section.dark .muted { color: rgba(255, 255, 255, .72); }
/* White cards inside dark sections keep dark, readable text. */
.section.dark .statement .muted, .section.dark .tile.light .muted, .section.dark .price-card .muted { color: var(--muted); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(30px, 4.6vw, 46px); margin-top: 10px; }
.section-head p { font-size: 18px; margin-top: 12px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Header ---------- */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 241, .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(19, 44, 42, .07); view-transition-name: site-header; }
.navbar { display: flex; align-items: center; gap: 18px; padding: 12px 20px; max-width: 1280px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 40px; width: 40px; }
.brand span { font-family: var(--display); font-weight: 800; font-size: 23px; color: var(--teal-900); }
nav.links { display: none; align-items: center; gap: 20px; margin-left: 12px; }
nav.links a { font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--text); opacity: .8; white-space: nowrap; }
nav.links a:hover, nav.links a[aria-current="page"] { opacity: 1; color: var(--accent-ink); }
.nav-cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nav-cta .btn { min-height: 42px; padding: 9px 18px; font-size: 14.5px; }
.lang-select { border: 1.5px solid var(--line); background: transparent; border-radius: 999px; padding: 8px 10px; font-weight: 700; font-size: 13px; color: var(--text); min-height: 42px; }
.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; border-radius: 12px; }
.menu-btn svg { width: 26px; height: 26px; }
.mobile-menu { display: none; padding: 8px 20px 20px; border-top: 1px solid var(--line); background: var(--cream); }
.mobile-menu.open { display: grid; gap: 4px; }
.mobile-menu a { padding: 12px 8px; font-weight: 700; text-decoration: none; border-radius: 10px; }
.mobile-menu a:hover { background: rgba(19, 44, 42, .05); }
.hide-sm { display: none; }
.hide-md { display: none; }
@media (min-width: 900px) { .hide-md { display: inline-flex; } }
/* Try Demo — a distinct outlined style with a "live" dot, so it's never confused with Get Started */
.btn-demo { background: transparent; color: var(--teal-800); border: 2px dashed var(--gold-deep); gap: 8px; }
.btn-demo:hover { background: var(--gold-100); }
.hero .btn-demo, .cta-band .btn-demo, .section.dark .btn-demo { color: #fff; border-color: var(--gold); }
.hero .btn-demo:hover, .cta-band .btn-demo:hover { background: rgba(232, 169, 63, .15); }
.demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(232, 169, 63, .7); animation: demoPulse 1.8s infinite; }
@keyframes demoPulse { 70% { box-shadow: 0 0 0 8px rgba(232, 169, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 169, 63, 0); } }
.demo-note { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .75); max-width: 560px; }
.mobile-menu .btn-demo { justify-content: center; margin-bottom: 6px; }
/* "More" menu */
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 14.5px; opacity: .8; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: ' ▾'; font-size: 11px; }
.nav-more[open] summary, .nav-more summary:hover { opacity: 1; }
.nav-more-menu { position: absolute; top: calc(100% + 12px); left: -12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; display: grid; min-width: 180px; z-index: 60; }
.nav-more-menu a { padding: 10px 12px; border-radius: 10px; opacity: 1 !important; }
.nav-more-menu a:hover { background: var(--cream); }
@media (min-width: 1140px) { nav.links { display: flex; } .menu-btn { display: none; } .mobile-menu { display: none !important; } }
@media (min-width: 640px) { .hide-sm { display: inline-flex; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 110% at 80% 0%, var(--teal-700), var(--teal-900) 60%, var(--teal-950)); color: #fff; padding: 56px 0 72px; }
.hero::before { content: ''; position: absolute; inset: 0; background: url('/assets/img/pattern.svg') center/260px repeat; opacity: .06; }
.hero .wrap { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 980px) { .hero .wrap { grid-template-columns: 1.1fr .9fr; } .hero { padding: 84px 0 96px; } }
.hero .eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(40px, 7.4vw, 74px); font-weight: 800; margin: 14px 0 18px; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lead { font-size: clamp(17px, 2.2vw, 20px); color: rgba(255, 255, 255, .85); max-width: 580px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero .trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.hero .trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero .trust svg { width: 18px; height: 18px; color: var(--gold); }

/* Phone mock with the live conversation */
.phone { position: relative; width: min(360px, 88vw); margin: 0 auto; border-radius: 40px; padding: 12px; background: #06201f; box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.phone-screen { border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, var(--teal-950), var(--teal-900)); min-height: 560px; display: flex; flex-direction: column; }
.phone-top { display: flex; align-items: center; gap: 8px; padding: 18px 18px 8px; font-weight: 800; font-family: var(--display); font-size: 18px; }
.phone-top img { width: 28px; }
.phone-top .st { margin-left: auto; font-size: 11px; letter-spacing: .05em; background: rgba(255, 255, 255, .1); padding: 4px 10px; border-radius: 999px; font-family: var(--sans); }
.chat { flex: 1; padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; padding: 11px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: .35s var(--ease); }
.msg.show { opacity: 1; transform: none; }
.msg.u { align-self: flex-end; background: var(--gold); color: var(--teal-900); font-weight: 600; border-bottom-right-radius: 6px; }
.msg.s { align-self: flex-start; background: rgba(255, 255, 255, .1); border-bottom-left-radius: 6px; }
.mini-card { align-self: stretch; background: #fff; color: var(--text); border-radius: 18px; padding: 12px 14px; font-size: 13px; opacity: 0; transition: .35s var(--ease); }
.mini-card.show { opacity: 1; }
.mini-card .big { font-family: var(--display); font-weight: 800; font-size: 28px; }
.mini-card .r { display: flex; justify-content: space-between; padding: 2px 0; }
.mini-card .r b.g { color: var(--green); } .mini-card .r b.o { color: var(--terracotta); }
.phone-orb { display: grid; place-items: center; padding: 16px 0 22px; }
.phone-orb span { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, #ffd98c, var(--gold) 52%, var(--gold-deep)); color: var(--teal-900); position: relative; }
.phone-orb span svg { width: 30px; height: 30px; }
/* The finger that taps the mic in the hero demo; the orb dips as it is pressed. */
.phone-orb { position: relative; }
.phone-orb span { transition: transform .15s ease, box-shadow .15s ease; }
.phone-orb span.press { transform: scale(.88); box-shadow: 0 0 0 10px rgba(232, 169, 63, .22); }
.finger { position: absolute; left: 50%; top: 50%; width: 42px; margin-left: -21px; margin-top: -2px; opacity: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); transform-origin: 50% 0; }
.finger svg { display: block; width: 100%; height: auto; }
.finger.tap { animation: fingerTap 1.15s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes fingerTap {
  0% { opacity: 0; transform: translate(90px, 30px) rotate(-58deg); }
  38% { opacity: 1; transform: translate(8px, 4px) rotate(-50deg); }
  52% { opacity: 1; transform: translate(2px, 1px) rotate(-48deg) scale(.95); }
  66% { opacity: 1; transform: translate(10px, 5px) rotate(-50deg); }
  100% { opacity: 0; transform: translate(96px, 34px) rotate(-58deg); }
}
@media (prefers-reduced-motion: reduce) { .finger { display: none; } }
.phone-orb span.live::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(232, 169, 63, .5); animation: ring 1.6s infinite; }
@keyframes ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.bars { display: flex; gap: 3px; align-items: center; height: 26px; justify-content: center; margin-bottom: 4px; }
.bars i { width: 4px; border-radius: 2px; background: var(--gold); height: 6px; opacity: .5; }
.bars.live i { animation: bar 0.9s infinite ease-in-out; opacity: 1; }
.bars i:nth-child(2n) { animation-delay: .15s; } .bars i:nth-child(3n) { animation-delay: .3s; } .bars i:nth-child(5n) { animation-delay: .45s; }
@keyframes bar { 50% { height: 24px; } }

/* ---------- Content blocks ---------- */
.grid-3 { display: grid; gap: 18px; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.section.alt .tile { background: #fff; }
.section.dark .tile { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.tile h3 { font-size: 21px; margin: 12px 0 8px; }
.tile .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--teal-50); color: var(--accent-ink); }
.section.dark .tile .ic { background: rgba(232, 169, 63, .15); color: var(--gold); }
.tile .ic svg { width: 24px; height: 24px; }
.step-num { font-family: var(--display); font-size: 44px; font-weight: 800; color: var(--gold); line-height: 1; }
.quote { font-family: var(--display); font-size: clamp(24px, 3.4vw, 36px); line-height: 1.25; max-width: 820px; margin: 40px auto 0; text-align: center; }
.quote small { display: block; font-family: var(--sans); font-size: 15px; color: var(--muted); margin-top: 10px; font-weight: 500; }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } .split.rev > :first-child { order: 2; } }
.check-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 32px; }
.check-list li::before { content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px; background: var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E9E5A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; }
.section.dark .check-list li::before { background-color: rgba(30, 158, 90, .25); }
.statement { background: #fff; border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); color: var(--text); }
.statement h4 { font-size: 16px; margin-bottom: 10px; }
.statement table { width: 100%; border-collapse: collapse; font-size: 15px; }
.statement td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.statement td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.statement tr.t td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--text); }
.pipeline { display: flex; flex-wrap: wrap; gap: 8px; }
.pipeline span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); font-size: 14px; font-weight: 600; }
.section:not(.dark) .pipeline span { background: var(--teal-50); border-color: transparent; color: var(--teal-800); }
.pipeline span.hl { background: var(--gold); color: var(--teal-900); border-color: var(--gold); }
.lang-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.lang-tabs button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer; min-height: 44px; }
.lang-tabs button[aria-selected="true"] { background: var(--teal-900); color: #fff; border-color: var(--teal-900); }
.lang-tabs button .soon { font-size: 11px; opacity: .7; margin-left: 4px; }
.convo { display: grid; gap: 12px; }
.convo .you, .convo .shiro { border-radius: 18px; padding: 16px 18px; }
.convo .you { background: var(--gold-100); }
.convo .shiro { background: var(--teal-900); color: #fff; }
.convo small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; opacity: .7; margin-bottom: 4px; text-transform: uppercase; }
.price-card { max-width: 520px; margin: 0 auto; background: #fff; color: var(--text); border-radius: var(--r-xl); padding: 34px 28px; box-shadow: var(--shadow); border: 2px solid var(--gold); position: relative; }
.price-card .tag { position: absolute; top: -14px; left: 28px; background: var(--gold); color: var(--teal-900); font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.price { font-family: var(--display); font-size: 64px; font-weight: 800; line-height: 1; }
.price small { font-size: 22px; color: var(--muted); font-weight: 700; }
.bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.bundles div { border: 1.5px solid var(--line); border-radius: 16px; padding: 12px; text-align: center; }
.bundles b { display: block; font-size: 20px; font-family: var(--display); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { font-weight: 700; font-size: 18px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; font-size: 24px; color: var(--gold-ink); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: 10px; color: var(--muted); font-size: 16.5px; }
.cta-band { background: linear-gradient(135deg, var(--teal-900), var(--teal-700)); color: #fff; border-radius: var(--r-xl); padding: 48px 28px; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(30px, 5vw, 48px); }
.cta-band p { color: rgba(255, 255, 255, .8); margin: 12px auto 24px; max-width: 560px; font-size: 18px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.page-hero { background: var(--cream); padding: 60px 0 48px; }
.page-hero h1 { font-size: clamp(36px, 6vw, 58px); margin-top: 10px; }
.page-hero p { font-size: 19px; color: var(--muted); max-width: 720px; margin-top: 14px; }
.prose { max-width: 780px; font-size: 17px; }
.prose h2 { font-size: 28px; margin: 38px 0 12px; }
.prose h3 { font-size: 21px; margin: 26px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--cream); }
.note { background: var(--gold-100); border-radius: 16px; padding: 14px 18px; font-size: 15px; }
.form { display: grid; gap: 14px; max-width: 560px; }
.form label { display: grid; gap: 6px; font-weight: 600; }
.form input, .form select, .form textarea { min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); font: inherit; font-size: 16px; background: #fff; }
.form textarea { min-height: 130px; }
.post-card { text-decoration: none; }
.post-card .tag { font-size: 12px; font-weight: 800; color: var(--gold-ink); text-transform: uppercase; letter-spacing: .06em; }
.who { display: flex; flex-wrap: wrap; gap: 8px; }
.who span { padding: 8px 14px; background: #fff; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.persona { display: grid; gap: 6px; }
.persona b { font-size: 18px; }

/* ---------- Meet Shiro AI demo ---------- */
.ai-questions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ai-q { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 700; cursor: pointer; min-height: 44px; font-size: 14.5px; }
.ai-q[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--teal-900); }
.mock-dash { background: var(--teal-900); color: #fff; border-radius: var(--r-xl); padding: 20px; box-shadow: var(--shadow); }
.md-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.md-top img { width: 30px; } .md-top span { margin-left: auto; font-size: 13px; opacity: .7; }
.md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.md-tile { background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 14px; transition: .35s var(--ease); }
.md-tile span { display: block; font-size: 13px; opacity: .75; } .md-tile b { font-family: var(--display); font-size: clamp(20px, 3vw, 28px); }
.md-tile.accent { background: rgba(232, 169, 63, .12); }
.md-tile.lit { border-color: var(--gold); background: rgba(232, 169, 63, .22); transform: scale(1.04); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.md-ask { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 8px 14px 8px 8px; font-size: 14px; opacity: .85; }
.md-orb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--teal-900); }
.md-orb svg { width: 18px; height: 18px; }
/* ---------- Founder ---------- */
@media (max-width: 959px) { .founder-photo img { max-width: 220px !important; } }
@media (min-width: 960px) { .split.founder { grid-template-columns: 320px 1fr; gap: 56px; align-items: start; } }
.founder-photo img { width: 100%; height: auto; max-width: 320px; border-radius: var(--r-xl); box-shadow: var(--shadow); margin: 0 auto; aspect-ratio: 640 / 667; object-fit: cover; }

/* ---------- Footer ---------- */
footer.site { background: var(--teal-950); color: rgba(255, 255, 255, .75); padding: 64px 0 34px; font-size: 15px; }
footer.site .cols { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
footer.site .cols > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { footer.site .cols { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } footer.site .cols > :first-child { grid-column: auto; } }
footer.site h4 { color: #fff; font-family: var(--sans); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
footer.site a { display: block; text-decoration: none; padding: 4px 0; overflow-wrap: anywhere; }
footer.site a:hover { color: var(--gold); }
footer.site .legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 22px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.tagline { margin-top: 12px; font-weight: 800; color: var(--gold); }

/* ---------- Contact details ---------- */
.contact-list { list-style: none; padding: 0; margin: 20px 0 8px; display: grid; gap: 10px; }
.contact-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--text); font-weight: 700; min-width: 0; }
.contact-list a:hover { border-color: var(--gold); background: var(--gold-100); }
.contact-list svg { width: 22px; height: 22px; flex: none; color: var(--accent-ink); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-list span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.contact-list small { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Visual refresh: "Market Sunrise" ---------- */
header.site { background: rgba(250, 246, 238, .86); border-bottom-color: rgba(16, 42, 40, .08); }
.hero { background: var(--grad-hero); isolation: isolate; }
.hero::after { content: ''; position: absolute; width: 620px; height: 620px; right: -180px; top: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 92, .30), rgba(255, 201, 92, 0) 62%); pointer-events: none; z-index: -1; }
.hero h1 em, .grad-text { background: linear-gradient(100deg, #FFE1A0 0%, #FFC95C 40%, #F4B23E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .eyebrow, .hero .trust svg { color: var(--gold-bright); }
.hero .lead { color: rgba(255, 255, 255, .88); }
.section.alt { background: linear-gradient(180deg, var(--cream) 0%, #F5EEDF 100%); }
.section.dark { background: var(--grad-hero); }
.section-head h2 { color: var(--teal-900); }
.section.dark .section-head h2 { color: #fff; }
/* Cards lift gently; feature icons each carry one meaning colour (never the only cue — every tile has a title). */
.tile { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
@media (hover: hover) { .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(28, 149, 133, .28); } }
.grid-3 > .tile:nth-child(6n+1) .ic, .grid-4 > .tile:nth-child(6n+1) .ic { background: var(--teal-50); color: var(--accent-ink); }
.grid-3 > .tile:nth-child(6n+2) .ic, .grid-4 > .tile:nth-child(6n+2) .ic { background: var(--gold-100); color: var(--gold-ink); }
.grid-3 > .tile:nth-child(6n+3) .ic, .grid-4 > .tile:nth-child(6n+3) .ic { background: var(--green-bg); color: var(--green); }
.grid-3 > .tile:nth-child(6n+4) .ic, .grid-4 > .tile:nth-child(6n+4) .ic { background: var(--blue-bg); color: var(--blue); }
.grid-3 > .tile:nth-child(6n+5) .ic, .grid-4 > .tile:nth-child(6n+5) .ic { background: var(--purple-bg); color: var(--purple); }
.grid-3 > .tile:nth-child(6n+6) .ic, .grid-4 > .tile:nth-child(6n+6) .ic { background: var(--terracotta-bg); color: var(--terracotta); }
.section.dark .tile .ic { background: rgba(255, 201, 92, .14) !important; color: var(--gold-bright) !important; }
.step-num { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.msg.u, .pipeline span.hl, .ai-q[aria-pressed="true"], .price-card .tag { background: var(--grad-gold); color: #231803; border-color: transparent; }
.md-orb, .phone-orb span { background: radial-gradient(circle at 32% 28%, #FFE3A3, var(--gold) 52%, #D98E17); }
.lang-tabs button[aria-selected="true"] { background: var(--grad-teal); border-color: var(--teal-800); }
.price-card { background: var(--grad-warm); border-color: var(--gold); }
.cta-band { background: var(--grad-hero); isolation: isolate; box-shadow: var(--shadow); }
.cta-band::after { content: ''; position: absolute; inset: auto -120px -160px auto; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 92, .28), rgba(255, 201, 92, 0) 65%); z-index: -1; }
.convo .shiro { background: var(--grad-teal); }
.note { background: var(--gold-100); border-left: 4px solid var(--gold); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(28, 149, 133, .16); }
footer.site { background: linear-gradient(180deg, var(--teal-950) 0%, #041514 100%); border-top: 3px solid var(--gold); }
footer.site a:hover { color: var(--gold-bright); }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } .msg, .mini-card { transition: none; opacity: 1; transform: none; } }

/* =====================================================================
   Shiro narrator: talks on its own. A voice bar at the bottom of the screen shows what Shiro is saying;
   it opens into a panel for questions. On phones it docks along the bottom edge, never over page buttons.
   ===================================================================== */
.narrator { position: fixed; z-index: 80; left: 16px; bottom: 16px; view-transition-name: narrator; font-size: 15px; }
.n-pill { display: flex; align-items: center; gap: 12px; width: min(460px, calc(100vw - 32px)); padding: 8px; border-radius: 999px; background: var(--teal-950); color: #fff; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.n-av { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, #FFE3A3, var(--gold) 52%, #D98E17); border: 0; cursor: pointer; padding: 0; }
.n-av img { width: 32px; height: 32px; border-radius: 50%; }
.n-av::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.narrator.talking .n-av::after { animation: talkRing 1.3s infinite; }
@keyframes talkRing { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.n-line { flex: 1; min-width: 0; line-height: 1.35; }
.n-line b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gold-bright); font-weight: 700; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.wave i { width: 2px; height: 4px; border-radius: 2px; background: var(--gold); opacity: .55; }
.wave i:nth-child(2) { animation-delay: .12s; } .wave i:nth-child(3) { animation-delay: .24s; } .wave i:nth-child(4) { animation-delay: .36s; } .wave i:nth-child(5) { animation-delay: .48s; }
.narrator.talking .wave i { animation: wave .9s infinite ease-in-out; opacity: 1; }
@keyframes wave { 50% { height: 12px; } }
.n-line .n-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, .9); font-size: 14px; }
.n-tap { font-size: 13px; color: var(--gold-bright); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; animation: tapHint 1.6s ease-in-out infinite; }
.n-tap::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(232, 169, 63, .7); animation: demoPulse 1.6s infinite; flex: none; }
@keyframes tapHint { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .n-tap, .n-tap::before { animation: none; } }
.n-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.n-btn:hover { background: rgba(255, 255, 255, .18); }
.n-btn svg { width: 18px; height: 18px; }
.n-panel { width: min(400px, calc(100vw - 32px)); margin-bottom: 10px; background: #fff; color: var(--text); border-radius: 22px; padding: 16px; box-shadow: 0 30px 60px -20px rgba(6, 32, 31, .5); border: 1px solid var(--line); }
.n-panel[hidden] { display: none; }
.n-panel .n-full { font-size: 16px; line-height: 1.5; max-height: 34vh; overflow-y: auto; background: var(--cream); border-radius: 14px; padding: 12px 14px; }
.n-panel .n-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
.n-panel .n-tools a, .n-panel .n-tools button, .n-panel select { border: 1.5px solid var(--line); background: #fff; color: var(--text); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.n-panel .n-tools svg { width: 16px; height: 16px; flex: none; }
.n-panel form { display: flex; gap: 6px; margin-top: 12px; }
.n-panel form input { flex: 1; min-width: 0; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line); padding: 0 16px; font: inherit; font-size: 15px; }
.n-panel form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--teal-900); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.n-panel form button svg { width: 18px; height: 18px; }
/* First visit: Shiro asks which language to speak, with three buttons right in the bar. */
.narrator.asking .n-pill { border-radius: 26px; align-items: center; }
.n-ask b { margin-bottom: 6px; }
.n-choose { display: flex; flex-wrap: wrap; gap: 6px; }
.n-choose button { border: 1.5px solid var(--gold); background: transparent; color: #fff; border-radius: 999px; padding: 6px 13px; min-height: 36px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.n-choose button:hover, .n-choose button:focus-visible { background: var(--gold); color: var(--teal-950); }
/* Movable: drag the bar or the bubble; while dragging it lifts slightly. */
.n-pill { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.narrator.dragging .n-pill { cursor: grabbing; transform: scale(1.03); box-shadow: 0 26px 50px -12px rgba(0, 0, 0, .6); }
/* Bubble: after Shiro finishes talking it shrinks to just its face, and grows back when it speaks or is tapped. */
.narrator.mini .n-pill { width: auto; padding: 6px; }
.narrator.mini .n-line, .narrator.mini .n-btn { display: none; }
.narrator.mini .n-av { width: 56px; height: 56px; }
.narrator.mini .n-av img { width: 40px; height: 40px; }
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; } /* lets the bar animate between bubble and full width */
  .n-pill { transition: width .35s var(--ease), padding .35s var(--ease), transform .15s; }
  .n-line { animation: nIn .3s var(--ease) both; }
  @keyframes nIn { from { opacity: 0; } }
}

/* Smooth page-to-page transitions on browsers that support them; off for people who prefer less motion. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-in both vtOut; }
::view-transition-new(root) { animation: 280ms ease-out both vtIn; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Phones & small screens: everything fits the screen width ---------- */
html, body { overflow-x: clip; max-width: 100%; }
h1, h2, h3, h4, p, li, a, td, th, label, summary { overflow-wrap: break-word; }
video, iframe, canvas { max-width: 100%; }
table { max-width: 100%; }
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .navbar { gap: 8px; padding: 10px 14px; }
  .brand { gap: 8px; }
  .brand img { height: 34px; width: 34px; }
  .brand span { font-size: 20px; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { min-height: 40px; padding: 8px 13px; font-size: 13.5px; }
  .lang-select { min-height: 40px; padding: 6px 6px; font-size: 12.5px; }
  .menu-btn { width: 40px; height: 40px; }
  .mobile-menu { padding: 8px 16px 18px; max-height: calc(100dvh - 64px); overflow-y: auto; }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 28px; }
  .section-head p { font-size: 16.5px; }
  .hero { padding: 40px 0 56px; }
  .hero .ctas > .btn, .cta-actions > .btn { flex: 1 1 100%; justify-content: center; }
  .narrator { left: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .narrator.mini { width: auto; }
  .n-pill, .n-panel { width: 100%; }
  body { padding-bottom: 76px; }
}
@media (max-width: 380px) {
  .brand span { display: none; }
  .nav-cta .btn { padding: 8px 11px; font-size: 13px; }
  .hero h1 { font-size: 36px; }
}

/* ---------- Hero phone: a shorter phone with a six-screen tour of the app ---------- */
.phone { width: min(340px, 88vw); }
.phone-screen { min-height: 0; height: 500px; }
.phone-top { padding: 14px 16px 6px; font-size: 17px; }
.phone-tabs { display: flex; gap: 4px; padding: 2px 10px 8px; overflow-x: auto; scrollbar-width: none; }
.phone-tabs::-webkit-scrollbar { display: none; }
.phone-tabs button { flex: none; border: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .78); }
.phone-tabs button[aria-selected="true"] { background: var(--gold); color: var(--teal-900); }
@media (max-width: 400px) { .phone-tabs { gap: 3px; padding: 2px 8px 8px; } .phone-tabs button { padding: 5px 7px; font-size: 10.5px; } }
.scenes { position: relative; flex: 1; min-height: 0; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 4px 12px 12px; opacity: 0; transform: translateX(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; overflow: hidden; }
.scene.on { opacity: 1; transform: none; pointer-events: auto; }
.scene[data-scene="0"] { padding: 0; gap: 0; }
.chat { overflow: hidden; justify-content: flex-end; padding: 6px 12px; gap: 8px; }
.msg { font-size: 13.5px; padding: 9px 12px; }
.mini-card { padding: 10px 12px; }
.mini-card .big { font-size: 24px; }
.bars { height: 20px; margin: 2px 0; }
.phone-orb { padding: 6px 0 12px; }
.phone-orb span { width: 58px; height: 58px; }
.phone-orb span svg { width: 24px; height: 24px; }

/* Mini screens, styled like the real app */
.ps-greet { font-size: 13px; color: rgba(255, 255, 255, .8); text-align: center; }
.ps-hero { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.ps-hero b { display: block; font-family: var(--display); font-size: 17px; }
.ps-hero small { font-size: 12px; color: rgba(255, 255, 255, .75); }
.ps-mic { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--teal-900); background: radial-gradient(circle at 32% 28%, #FFE3A3, var(--gold) 52%, #D98E17); box-shadow: 0 0 0 5px rgba(244, 178, 62, .18); }
.ps-mic svg { width: 22px; height: 22px; }
.ps-card { background: #fff; color: var(--text); border-radius: 14px; padding: 10px 12px; }
.ps-card-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.ps-card-head span { font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--muted); }
.ps-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line); }
.ps-row:first-of-type { border-top: 0; }
.ps-row b { margin-left: auto; font-family: var(--display); font-size: 15px; }
.ps-row i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.ps-row i svg { width: 14px; height: 14px; }
.ic-g { background: #11703A; } .ic-b { background: #1D5FC2; } .ic-o { background: #D98E17; }
.ps-card b.g { color: var(--green); } .ps-card b.o { color: var(--terracotta); } .ps-card b.gold { color: #8A5A06; }
.ps-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ps-doors span { border-radius: 12px; padding: 10px 6px; text-align: center; font-size: 12px; font-weight: 800; color: #fff; }
.ps-doors .inc { background: #11703A; } .ps-doors .exp { background: #B23A0A; } .ps-doors .owe { background: var(--gold); color: var(--teal-900); } .ps-doors .rep { background: var(--teal-700); }
.ps-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; border-bottom: 1px dashed var(--line); }
.ps-line b { font-variant-numeric: tabular-nums; }
.ps-line.t { font-weight: 800; }
.ps-line.big { border-bottom: 0; border-top: 2px solid var(--text); margin-top: 2px; padding-top: 6px; font-size: 14px; }
.ps-note { font-size: 11.5px; color: rgba(255, 255, 255, .72); text-align: center; line-height: 1.4; }
.ps-tip { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; padding: 5px 0; line-height: 1.35; }
.ps-tip svg { width: 16px; height: 16px; flex: none; color: var(--teal-700); margin-top: 1px; }
.ps-wa { background: #E7FFDB; color: #10261A; border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.ps-wa-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11.5px; color: #075E54; margin-bottom: 4px; }
.ps-wa-head svg { width: 14px; height: 14px; }
.ps-actions { display: flex; gap: 8px; }
.ps-actions span { flex: 1; text-align: center; padding: 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, .1); }
.ps-actions .send { background: #25D366; color: #0B2E13; }
/* The answer arrives after the question, like a real reply */
.scene.on .ps-later { animation: psIn .4s .8s both; }
.scene.on .ps-later2 { animation: psIn .4s 1.4s both; }
@keyframes psIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) { .phone-screen { height: 470px; } }
@media (prefers-reduced-motion: reduce) { .scene { transition: none; } .scene.on .ps-later, .scene.on .ps-later2 { animation: none; } }

/* ================= Motion graphics (home page) =================
   Decorative only. Everything stops under prefers-reduced-motion, and nothing hides content unless JS is running. */
.hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Still glows: soft gradients only (no blur filter, no movement), so they cost nothing to draw. */
.hero-fx .blob { position: absolute; border-radius: 50%; }
.hero-fx .b1 { width: 620px; height: 620px; top: -240px; right: -180px; background: radial-gradient(circle, rgba(232, 169, 63, .26), transparent 62%); }
.hero-fx .b2 { width: 560px; height: 560px; bottom: -260px; left: -200px; background: radial-gradient(circle, rgba(46, 176, 155, .32), transparent 62%); }
/* The Shiro mark, big and see-through behind the phone, as on the first site. */
.hero-mark { position: absolute; right: -6%; top: 50%; width: min(700px, 54vw); height: auto; transform: translateY(-50%); opacity: .17; }
@media (max-width: 979px) { .hero-mark { right: -22%; top: 70px; width: min(520px, 92vw); transform: none; opacity: .13; } }
/* With the mark there, the old background pattern only needs to whisper. */
.hero::before { opacity: .035; }
.hero-wave { position: absolute; left: 0; bottom: 4%; width: 200%; height: 180px; }
.hero-wave path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-wave .w1 { stroke: rgba(232, 169, 63, .35); stroke-width: 1.5; animation: waveFlow 30s linear infinite; }
@keyframes waveFlow { to { transform: translateX(-50%); } }
@media (max-width: 979px) { .hero-wave { display: none; } }

/* Hero copy arrives in a gentle stagger */
.hero-copy > * { animation: riseIn .8s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.hero-copy > :nth-child(6) { animation-delay: .4s; }
.phone-stage { animation: phoneIn 1s .2s var(--ease) both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes phoneIn { from { opacity: 0; transform: translateY(40px) rotate(-2deg) scale(.96); } }

/* Floating cards around the phone: what Shiro just did */
.phone-stage { position: relative; }
.chips { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: rgba(255, 255, 255, .96); color: var(--teal-900); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 16px 34px rgba(0, 0, 0, .28); animation: chipIn .7s var(--ease) both; }
.chip strong { font-weight: 800; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip .dot.g { background: #1f9d6a; } .chip .dot.o { background: #e07a2e; } .chip .dot.y { background: var(--gold); } .chip .dot.t { background: #2aa79b; }
.chip.c1 { top: 14%; left: -10%; animation-delay: 1s; }
.chip.c2 { bottom: 16%; right: -10%; animation-delay: 1.6s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@media (max-width: 979px) { .phone-stage { margin: 18px 0; } .chip.c1 { left: 4%; top: -20px; } .chip.c2 { right: 4%; bottom: -18px; } }
@media (max-width: 420px) { .chip { font-size: 12px; padding: 7px 11px; } }
/* Phones: the mock phone a little narrower, and nothing may ever push the page sideways. */
@media (max-width: 640px) { .phone { width: min(310px, 82vw); } }
html, body { overflow-x: clip; }

/* Ribbon of things traders say */
.say-strip { background: var(--teal-950, #052120); color: #fff; padding: 26px 0 30px; overflow: hidden; position: relative; }
.say-strip::before, .say-strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.say-strip::before { left: 0; background: linear-gradient(90deg, var(--teal-950, #052120), transparent); }
.say-strip::after { right: 0; background: linear-gradient(270deg, var(--teal-950, #052120), transparent); }
.say-label { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; padding: 0 16px; text-align: center; }
.say-mic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--teal-900); position: relative; flex: none; }
.say-mic svg { width: 15px; height: 15px; }
.say-mic::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(232, 169, 63, .55); animation: ring 1.8s infinite; }
.say-row { display: flex; overflow: hidden; }
.say-row + .say-row { margin-top: 10px; }
.say-track { display: flex; gap: 10px; flex: none; padding-right: 10px; animation: marquee 48s linear infinite; }
.say-row.r2 .say-track { animation-duration: 56s; animation-direction: reverse; }
.say-track span { flex: none; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font-size: 15px; white-space: nowrap; }
.say-row.r2 .say-track span { background: rgba(232, 169, 63, .12); border-color: rgba(232, 169, 63, .25); color: #ffe7b8; }
.say-strip:hover .say-track, .say-strip.offscreen .say-track, .hero.offscreen .hero-wave path { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Scroll reveal: added by site.js only, so the page is complete without JavaScript */
.motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rv-delay, 0s); }
.motion .rv.in { opacity: 1; transform: none; }
.motion .convo.rv > * { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.motion .convo.rv.in > * { opacity: 1; transform: none; }
.motion .convo.rv.in > :nth-child(2) { transition-delay: .7s; } .motion .convo.rv.in > :nth-child(3) { transition-delay: 1.4s; } .motion .convo.rv.in > :nth-child(4) { transition-delay: 2.1s; }
.tile { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
@media (hover: hover) { .tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(6, 32, 31, .12); } .tile:hover .ic { animation: icPop .5s var(--ease); } }
/* Cards fill with colour when pointed at (or focused with the keyboard): each card takes the deep shade of its own
   icon colour (teal, amber, green, blue, purple, terracotta), with white text and a white icon box.
   The .section.alt selectors are needed: the home page's cream sections set the card background more specifically. */
.tile, .leader { --hov: #0A3431; --hov-ic: var(--gold, #E8A93F); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.grid-3 > .tile:nth-child(6n+1), .grid-4 > .tile:nth-child(6n+1) { --hov: #0A3431; --hov-ic: #0A3431; }
.grid-3 > .tile:nth-child(6n+2), .grid-4 > .tile:nth-child(6n+2) { --hov: #8C5A12; --hov-ic: #8C5A12; }
.grid-3 > .tile:nth-child(6n+3), .grid-4 > .tile:nth-child(6n+3) { --hov: #166534; --hov-ic: #166534; }
.grid-3 > .tile:nth-child(6n+4), .grid-4 > .tile:nth-child(6n+4) { --hov: #1E40AF; --hov-ic: #1E40AF; }
.grid-3 > .tile:nth-child(6n+5), .grid-4 > .tile:nth-child(6n+5) { --hov: #5B21B6; --hov-ic: #5B21B6; }
.grid-3 > .tile:nth-child(6n+6), .grid-4 > .tile:nth-child(6n+6) { --hov: #9A3412; --hov-ic: #9A3412; }
.leaders > .leader:nth-child(3n+1) { --hov: #0A3431; } .leaders > .leader:nth-child(3n+2) { --hov: #8C5A12; } .leaders > .leader:nth-child(3n+3) { --hov: #1E40AF; }
.tile h3, .tile .muted, .tile p, .tile b, .tile .step-num, .tile .ic, .leader h3, .leader .muted, .leader-org, .leader .eyebrow { transition: color .3s var(--ease), background-color .3s var(--ease); }
@media (hover: hover) {
  .tile:hover, .section .tile:hover, .section.alt .tile:hover, .leader:hover { background: var(--hov); border-color: var(--hov); color: #fff; box-shadow: 0 22px 44px rgba(6, 32, 31, .28); }
  .tile:hover h3, .tile:hover b, .leader:hover h3 { color: #fff; }
  .tile:hover .muted, .tile:hover p, .leader:hover .muted { color: rgba(255, 255, 255, .85); }
  .tile:hover .step-num, .leader:hover .leader-org, .leader:hover .eyebrow { color: #ffe7b8; }
  .tile:hover a { color: #ffe7b8; }
  .tile:hover .ic, .grid-3 > .tile:hover .ic, .grid-4 > .tile:hover .ic { background: #fff; color: var(--hov-ic); }
  .leader:hover { transform: translateY(-4px); }
  .leader:hover .leader-photo { border-color: rgba(255, 255, 255, .5); }
  /* On dark sections the cards are already dark: they light up gold instead. */
  .section.dark .tile:hover { background: rgba(232, 169, 63, .18); border-color: rgba(232, 169, 63, .5); }
  .section.dark .tile:hover .ic { background: var(--gold, #E8A93F) !important; color: #0A3431 !important; }
}
/* Touch screens: the card in the middle of the screen, or the one tapped, lights up (class set by site.js). */
@media (hover: none), (pointer: coarse) {
  .tile.lit, .section .tile.lit, .section.alt .tile.lit, .leader.lit { background: var(--hov); border-color: var(--hov); color: #fff; box-shadow: 0 22px 44px rgba(6, 32, 31, .28); }
  .tile.lit h3, .tile.lit b, .leader.lit h3 { color: #fff; }
  .tile.lit .muted, .tile.lit p, .leader.lit .muted { color: rgba(255, 255, 255, .85); }
  .tile.lit .step-num, .leader.lit .leader-org, .leader.lit .eyebrow { color: #ffe7b8; }
  .tile.lit a { color: #ffe7b8; }
  .tile.lit .ic, .grid-3 > .tile.lit .ic, .grid-4 > .tile.lit .ic { background: #fff; color: var(--hov-ic); }
  .leader.lit { transform: translateY(-4px); }
  .leader.lit .leader-photo { border-color: rgba(255, 255, 255, .5); }
  /* On dark sections the cards are already dark: they light up gold instead. */
  .section.dark .tile.lit { background: rgba(232, 169, 63, .18); border-color: rgba(232, 169, 63, .5); }
  .section.dark .tile.lit .ic { background: var(--gold, #E8A93F) !important; color: #0A3431 !important; }
}
.tile:focus-within, .section.alt .tile:focus-within, .leader:focus-within { background: var(--hov); color: #fff; }
.tile:focus-within h3, .leader:focus-within h3 { color: #fff; }
.tile:focus-within .muted, .leader:focus-within .muted { color: rgba(255, 255, 255, .8); }
@keyframes icPop { 40% { transform: scale(1.15) rotate(-6deg); } }
.who span { transition: transform .25s var(--ease), background .25s; }
@media (hover: hover) { .who span:hover { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-wave path, .chip, .say-track, .say-mic::after, .hero-copy > *, .phone-stage { animation: none !important; }
  .hero-flow { display: none; } .phone-stage .phone { transform: none; }
  .motion .rv, .motion .convo.rv > * { opacity: 1; transform: none; transition: none; }
  .say-row { overflow-x: auto; }
}

/* ---- Flowing light streams behind the hero (canvas drawn by site.js; follows the pointer and the scroll) ---- */
.hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-flow.on { opacity: 1; }
/* The phone leans gently towards the pointer (set by site.js on devices with a mouse). */
.phone-stage .phone { transition: transform .5s var(--ease); transform: perspective(1200px) rotateY(var(--tilt-y, 0deg)) rotateX(var(--tilt-x, 0deg)); will-change: transform; }

/* ---- Built for: real traders ---- */
.traders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trader { position: relative; margin: 0; border-radius: var(--r-lg, 20px); overflow: hidden; aspect-ratio: 4 / 5; background: var(--teal-900); box-shadow: 0 18px 40px rgba(6, 32, 31, .14); }
.trader img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.trader figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 14px; color: #fff; background: linear-gradient(to top, rgba(5, 33, 32, .92) 0%, rgba(5, 33, 32, .6) 55%, transparent 100%); display: grid; gap: 4px; }
.trader figcaption b { font-size: 16px; }
.trader-says { font-size: 14px; line-height: 1.4; color: #ffe7b8; }
.trader small { font-size: 10.5px; opacity: .6; }
@media (hover: hover) { .trader:hover img { transform: scale(1.05); } }
.who-more { margin-top: 18px; color: var(--muted, #5b6b69); font-size: 15px; text-align: center; }
@media (max-width: 979px) { .traders { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px) { .trader figcaption { padding: 46px 12px 10px; } .trader figcaption b { font-size: 14px; } .trader-says { font-size: 12.5px; } }

/* ---- Leadership ---- */
.leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.leaders .leader { flex-direction: column; align-items: center; text-align: center; }
.leader { display: flex; gap: 20px; align-items: flex-start; padding: 22px; border-radius: var(--r-lg, 20px); background: #fff; box-shadow: 0 14px 36px rgba(6, 32, 31, .08); }
.leader-photo { flex: none; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid var(--gold-100, #fbedd2); }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.leader h3 { font-size: 21px; margin-top: 4px; }
.leader-org { font-weight: 700; font-size: 13.5px; color: var(--teal-700, #11635c); margin: 2px 0 8px; }
.leader .muted { font-size: 15px; }
@media (max-width: 979px) { .leaders { grid-template-columns: 1fr; } .leaders .leader { flex-direction: row; align-items: flex-start; text-align: left; } }
@media (max-width: 520px) { .leader { flex-direction: column; align-items: center; text-align: center; } }
.founder-photo img { object-fit: cover; }

/* "Coming soon" on plan features that are included but still being built */
.soon-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--gold-100, #fbedd2); color: var(--gold-deep, #8a5a0b); font-size: 11px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.check-list .soon-li { opacity: .85; }

/* ---- Pricing: five plans ---- */
.tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--white, #fff); border: 1.5px solid var(--line, #e7e2d6); border-radius: var(--r-xl, 24px); padding: 26px 20px 20px; }
.tier.popular { border-color: var(--gold); box-shadow: 0 18px 44px rgba(6, 32, 31, .12); }
.tier .tag { position: absolute; top: -13px; left: 20px; background: var(--gold); color: var(--teal-900); font-weight: 800; font-size: 12px; padding: 5px 12px; border-radius: 999px; }
.tier h3 { font-size: 20px; }
.tier .price { font-family: var(--display); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tier .price small { font-size: 14px; font-weight: 600; color: var(--muted); }
.tier-sub { font-size: 13px; min-height: 2.6em; }
.tier .check-list { flex: 1; margin: 6px 0 16px; font-size: 14px; }
/* Pricing boxes fill with their own colour when pointed at, like the feature cards. */
.tier { --hov: #0A3431; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.tiers > .tier:nth-child(5n+1) { --hov: #0A3431; } .tiers > .tier:nth-child(5n+2) { --hov: #166534; } .tiers > .tier:nth-child(5n+3) { --hov: #8C5A12; }
.tiers > .tier:nth-child(5n+4) { --hov: #1E40AF; } .tiers > .tier:nth-child(5n+5) { --hov: #5B21B6; }
.tier h3, .tier .price, .tier .price small, .tier-sub, .tier .check-list li { transition: color .3s var(--ease); }
@media (hover: hover) {
  .tier:hover, .section .tier:hover, .section.alt .tier:hover { background: var(--hov); border-color: var(--hov); color: #fff; transform: translateY(-4px); box-shadow: 0 24px 48px rgba(6, 32, 31, .28); }
  .tier:hover h3, .tier:hover .price, .tier:hover .check-list li { color: #fff; }
  .tier:hover .price small, .tier:hover .tier-sub, .tier:hover .muted { color: rgba(255, 255, 255, .8); }
  .tier:hover .check-list li::before { background-color: rgba(255, 255, 255, .92); }
  .tier:hover .soon-tag { background: rgba(255, 255, 255, .18); color: #ffe7b8; }
  .tier:hover .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
  .tier:hover .btn-ghost:hover { background: #fff; color: var(--hov); }
  .tier.popular:hover .tag { background: #fff; color: var(--hov); }
  .tier:hover .btn-gold { background: #fff; color: var(--hov); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
}
/* Touch screens: the card in the middle of the screen, or the one tapped, lights up (class set by site.js). */
@media (hover: none), (pointer: coarse) {
  .tier.lit, .section .tier.lit, .section.alt .tier.lit { background: var(--hov); border-color: var(--hov); color: #fff; transform: translateY(-4px); box-shadow: 0 24px 48px rgba(6, 32, 31, .28); }
  .tier.lit h3, .tier.lit .price, .tier.lit .check-list li { color: #fff; }
  .tier.lit .price small, .tier.lit .tier-sub, .tier.lit .muted { color: rgba(255, 255, 255, .8); }
  .tier.lit .check-list li::before { background-color: rgba(255, 255, 255, .92); }
  .tier.lit .soon-tag { background: rgba(255, 255, 255, .18); color: #ffe7b8; }
  .tier.lit .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
  .tier.lit .btn-ghost.lit { background: #fff; color: var(--hov); }
  .tier.popular.lit .tag { background: #fff; color: var(--hov); }
  .tier.lit .btn-gold { background: #fff; color: var(--hov); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
}
.tier:focus-within { border-color: var(--hov); box-shadow: 0 0 0 3px rgba(232, 169, 63, .35); }
.tiers-note { text-align: center; max-width: 760px; margin: 22px auto 0; font-size: 14px; }
.section.dark .tier { color: var(--text); }
/* Enterprise: a wide strip under the four self-serve plans. */
.tier.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 900px) {
  .tiers { grid-template-columns: repeat(4, 1fr); }
  .tier.wide { grid-template-columns: minmax(180px, 1fr) 2fr minmax(180px, auto); align-items: center; column-gap: 28px; }
  .tier.wide h3, .tier.wide .price, .tier.wide .tier-sub { grid-column: 1; }
  .tier.wide .check-list { grid-column: 2; grid-row: 1 / span 3; columns: 2; margin: 0; }
  .tier.wide .btn { grid-column: 3; grid-row: 1 / span 3; }
}

.motion .tile.rv.in, .motion .leader.rv.in, .motion .tier.rv.in { transition: opacity .7s var(--ease), transform .3s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); transition-delay: 0s; }

/* ================= "On your phone": iPhone + Android showcase, like an app advert =================
   Everything moves with transform/opacity only (cheap on phones), plays when the section comes into view
   (class "play" from site.js), pauses off screen, and stays still for people who ask for reduced motion. */
.showcase { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 40%, rgba(46, 176, 155, .16), transparent 60%), radial-gradient(80% 70% at 10% 90%, rgba(232, 169, 63, .14), transparent 60%); }
.sc-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.sc-copy h2 { font-size: clamp(32px, 4.8vw, 52px); line-height: 1.05; margin-top: 10px; }
.sc-copy h2 em { font-style: normal; color: var(--gold-deep, #B7791F); }
.sc-lead { font-size: 18px; margin-top: 14px; max-width: 520px; }
.sc-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.sc-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.sc-points svg { width: 20px; height: 20px; flex: none; padding: 7px; box-sizing: content-box; border-radius: 12px; background: var(--teal-50, #e6f4f1); color: var(--teal-700, #11635c); }
.sc-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: flex-start; }
.sc-badge { background: #0A3431; color: #fff; border-radius: 16px; min-width: 190px; box-shadow: 0 12px 28px rgba(6, 32, 31, .22); transition: transform .25s var(--ease); }
.sc-badge:hover { transform: translateY(-3px); }
.sc-badge summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px; cursor: pointer; }
.sc-badge summary::-webkit-details-marker { display: none; }
.sc-badge summary small { display: block; font-size: 11px; opacity: .75; letter-spacing: .04em; }
.sc-badge summary b { display: block; font-size: 19px; font-family: var(--display); line-height: 1.1; }
.sc-bic svg { width: 26px; height: 26px; color: var(--gold, #E8A93F); }
.sc-badge ol { margin: 0; padding: 0 18px 16px 36px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 260px; }
.sc-badge[open] { box-shadow: 0 18px 40px rgba(6, 32, 31, .3); }
.sc-soon { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--muted, #5b6b69); }
.sc-soon svg { width: 16px; height: 16px; }

/* The stage: two phones, overlapping a little, with floating notifications */
.sc-stage { position: relative; height: 560px; }
.sc-phone { position: absolute; top: 40px; width: 236px; cursor: pointer; animation: scBob 6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.sc-phone.ios { left: 6%; --rot: -6deg; z-index: 2; }
.sc-phone.android { right: 6%; top: 90px; --rot: 6deg; animation-delay: -3s; z-index: 1; }
@keyframes scBob { 0%, 100% { transform: translateY(0) rotate(var(--rot)); } 50% { transform: translateY(-16px) rotate(var(--rot)); } }
.sc-frame { position: relative; border-radius: 42px; padding: 10px; background: #111; box-shadow: 0 40px 70px rgba(6, 32, 31, .35), inset 0 0 0 2px #2c2c2c; transition: transform .35s var(--ease); }
.android .sc-frame { border-radius: 30px; background: #1b1d1f; }
@media (hover: hover) { .sc-phone:hover .sc-frame { transform: translateY(-8px) rotate(calc(var(--rot) * -1)) scale(1.03); } }
.sc-phone.bounce .sc-frame { animation: scBounce .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes scBounce { 0% { transform: scale(1); } 30% { transform: scale(.92, .95); } 60% { transform: scale(1.05, 1.03); } 100% { transform: scale(1); } }
.sc-island { position: absolute; top: 18px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 12px; background: #000; z-index: 2; }
.sc-cam { position: absolute; top: 18px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #2a2a2a; z-index: 2; }
.sc-screen { position: relative; height: 470px; border-radius: 33px; overflow: hidden; padding: 44px 14px 14px; background: linear-gradient(180deg, #f7f3ea, #fff 40%); color: #0A3431; font-size: 12.5px; }
.android .sc-screen { border-radius: 22px; background: linear-gradient(180deg, #0c3a36, #072826); color: #fff; }
.sc-status { position: absolute; top: 14px; left: 22px; right: 18px; display: flex; align-items: center; gap: 6px; font-size: 11px; }
.sc-status b { margin-right: auto; }
.ios .sc-status { top: 20px; left: 26px; right: 22px; }
.sc-sig { display: inline-flex; gap: 2px; align-items: flex-end; height: 9px; }
.sc-sig i { width: 3px; background: currentColor; border-radius: 1px; }
.sc-sig i:nth-child(1) { height: 3px; } .sc-sig i:nth-child(2) { height: 5px; } .sc-sig i:nth-child(3) { height: 7px; } .sc-sig i:nth-child(4) { height: 9px; }
.sc-bat { width: 20px; height: 9px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; }
.sc-bat::after { content: ''; position: absolute; inset: 1px 5px 1px 1px; background: currentColor; border-radius: 1px; }
.sc-hi { font-family: var(--display); font-weight: 800; font-size: 17px; margin: 6px 2px 12px; }
.sc-card { background: #0A3431; color: #fff; border-radius: 18px; padding: 14px; }
.sc-card small { opacity: .75; }
.sc-card > b { display: block; font-family: var(--display); font-size: 26px; margin-top: 2px; }
.sc-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 10px; }
.sc-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ffd98c, #E8A93F); transform-origin: bottom; transform: scaleY(.15); }
.sc-row { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 14px; padding: 11px 12px; margin-top: 9px; box-shadow: 0 6px 16px rgba(6, 32, 31, .08); }
.sc-row b.g { color: #1a8a55; } .sc-row b.o { color: #c4561c; }
.sc-mic { position: absolute; left: 50%; bottom: 18px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, #ffe3a3, #E8A93F 55%, #c98415); color: #0A3431; box-shadow: 0 10px 22px rgba(232, 169, 63, .45); }
.sc-mic svg { width: 24px; height: 24px; }
.sc-mic::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(232, 169, 63, .55); animation: ring 1.8s infinite; }
.sc-msg { max-width: 82%; padding: 9px 12px; border-radius: 16px; margin-top: 10px; line-height: 1.35; opacity: 0; transform: translateY(14px) scale(.9); }
.sc-msg.u { margin-left: auto; background: linear-gradient(135deg, #ffd98c, #E8A93F); color: #231803; border-bottom-right-radius: 5px; }
.sc-msg.s { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); border-bottom-left-radius: 5px; }
.sc-saved { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 16px auto 0; width: max-content; padding: 9px 16px; border-radius: 999px; background: #1a8a55; color: #fff; font-weight: 800; opacity: 0; transform: scale(.4); }
.sc-saved svg { width: 16px; height: 16px; }
.sc-wave { position: absolute; left: 0; right: 0; bottom: 88px; display: flex; justify-content: center; align-items: center; gap: 3px; height: 26px; }
.sc-wave i { width: 3px; height: 6px; border-radius: 2px; background: #E8A93F; animation: bar .9s ease-in-out infinite; }
.sc-wave i:nth-child(2n) { animation-delay: .15s; } .sc-wave i:nth-child(3n) { animation-delay: .3s; }
.sc-label { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #5b6b69); }

/* Floating notifications and badges */
.sc-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #fff; color: #0A3431; font-weight: 700; font-size: 13px; box-shadow: 0 18px 36px rgba(6, 32, 31, .22); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; }
.sc-float small { display: block; font-weight: 600; color: var(--muted, #5b6b69); }
.sc-float svg { width: 16px; height: 16px; color: #1a8a55; }
.sc-app img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.sc-float.f1 { top: 0; right: 2%; }
.sc-float.f2 { top: 44%; left: -2%; background: #1a8a55; color: #fff; font-family: var(--display); font-size: 18px; }
.sc-float.f3 { bottom: 26px; right: 0; }
.sc-float.f4 { top: 22%; left: 44%; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffe3a3, #E8A93F 60%, #c98415); color: #5a3a06; font-family: var(--display); font-size: 22px; }

/* Playing: things spring into place one after another, then keep gently floating */
.showcase.play .sc-bars i { animation: scGrow .9s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(.4s + var(--d)); }
@keyframes scGrow { to { transform: scaleY(1); } }
.showcase.play .sc-msg, .showcase.play .sc-saved { animation: scPop .6s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.showcase.play .m1 { animation-delay: .5s; } .showcase.play .m2 { animation-delay: 1.4s; } .showcase.play .m3 { animation-delay: 2.4s; } .showcase.play .sc-saved { animation-delay: 3.1s; }
@keyframes scPop { to { opacity: 1; transform: none; } }
.showcase.play .sc-float { animation: scPop .7s cubic-bezier(.3, 1.6, .5, 1) forwards, scFloat 4.5s ease-in-out infinite; }
.showcase.play .f1 { animation-delay: 1.2s, 1.9s; } .showcase.play .f2 { animation-delay: 2.8s, 3.5s; } .showcase.play .f3 { animation-delay: 3.6s, 4.3s; } .showcase.play .f4 { animation-delay: .8s, 1.5s; }
@keyframes scFloat { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-10px); } }
.showcase.offscreen *, .showcase.offscreen .sc-phone { animation-play-state: paused !important; }

@media (max-width: 979px) {
  .sc-wrap { grid-template-columns: 1fr; gap: 10px; }
  .sc-stage { height: 470px; max-width: 420px; width: 100%; margin: 0 auto; }
  .sc-phone { width: 184px; top: 30px; }
  .sc-phone.ios { left: 0; } .sc-phone.android { right: 0; top: 64px; }
  .sc-screen { height: 368px; padding: 40px 11px 11px; font-size: 11px; }
  .sc-hi { font-size: 14px; } .sc-card > b { font-size: 21px; } .sc-bars { height: 48px; }
  .sc-mic { width: 46px; height: 46px; margin-left: -23px; } .sc-wave { bottom: 72px; }
  .sc-float { font-size: 12px; padding: 8px 11px; } .sc-float.f2 { font-size: 15px; left: 0; } .sc-float.f1 { right: 0; top: -6px; }
  .sc-badge { min-width: 0; flex: 1 1 160px; }
  .sc-row.r2, .sc-wave { display: none; } /* small phones: keep the screens uncluttered */
}
@media (prefers-reduced-motion: reduce) {
  .sc-phone, .sc-mic::before, .sc-wave i { animation: none !important; }
  .sc-bars i, .sc-msg, .sc-saved, .sc-float { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ================= Home v2: calmer type, fewer words, real people ================= */
/* A smaller, steadier type scale everywhere (feedback: "the fonts are too massive"). */
.hero h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; margin: 12px 0 14px; }
.hero .lead { font-size: clamp(16px, 1.6vw, 18px); max-width: 460px; }
.section-head h2 { font-size: clamp(24px, 3vw, 34px); }
.page-hero h1 { font-size: clamp(28px, 4vw, 42px); }
.page-hero p { font-size: 17px; }
.cta-band h2 { font-size: clamp(24px, 3.2vw, 34px); }
.quote { font-size: clamp(20px, 2.4vw, 26px); }
.sc-copy h2 { font-size: clamp(26px, 3.4vw, 38px); }
.sc-lead { font-size: 16px; }
.tile h3 { font-size: 18px; }
.split h2[style*="font-size"], .wrap > div > h2[style*="font-size"] { font-size: clamp(24px, 3vw, 34px) !important; }
main p[style*="font-size:18px"], main p[style*="font-size: 18px"], main p[style*="font-size:17px"] { font-size: 16px !important; }
.section { padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(48px, 7vw, 80px); }
.center-link { text-align: center; margin-top: 22px; }

/* Hero: a slow photo slider of small businesses behind the words, a market woman with her phone in front */
.hero-v2 { padding: 0; min-height: clamp(560px, 86vh, 760px); display: grid; align-items: center; background: #062523; }
.hero-v2::before { display: none; }
.hero-slides { position: absolute; inset: 0; }
.hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 7s ease-out; }
.hero-slides img.on { opacity: 1; transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 33, 32, .94) 0%, rgba(5, 33, 32, .82) 42%, rgba(5, 33, 32, .45) 75%, rgba(5, 33, 32, .55) 100%), linear-gradient(0deg, rgba(5, 33, 32, .7), transparent 40%); }
.hero-v2 .hero-grid { position: relative; z-index: 1; padding: 56px 20px 64px; display: grid; gap: 34px; align-items: center; }
@media (min-width: 980px) { .hero-v2 .hero-grid { grid-template-columns: 1.15fr .85fr; padding: 72px 24px; } }
.hero-v2 .trust { margin-top: 22px; }
.hero-person { position: relative; margin: 0 auto; width: min(380px, 78vw); }
.st-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 28px; border: 4px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); background: #2a1a10; isolation: isolate; }
.hero-person .st-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--teal-900); font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 16px 34px rgba(0, 0, 0, .3); animation: chipIn .7s var(--ease) both; }
.hp-chip strong { font-weight: 800; }
.hp-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #1f9d6a; }
.hp-chip.c1 { left: -12%; top: 18%; animation-delay: .8s; }
.hp-chip.c2 { right: -10%; bottom: 14%; animation-delay: 1.4s; }
.hp-mic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--teal-900); }
.hp-mic svg { width: 14px; height: 14px; }
@media (max-width: 979px) { .hero-person { width: min(300px, 74vw); } .hp-chip.c1 { left: -6%; } .hp-chip.c2 { right: -6%; } .hp-chip { font-size: 12.5px; padding: 8px 11px; } }
.hero-dots { position: absolute; z-index: 1; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; }
.hero-dots i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); transition: background .4s; }
.hero-dots i.on { background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .hero-slides img { transition: none; transform: none; } }

/* Three steps */
.steps3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step3 { position: relative; }
.step3 .step-num { position: absolute; top: 20px; right: 22px; font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--line); }

/* A clear Stop button on Shiro's bar while Shiro is talking (stops now and keeps Shiro quiet) */
.n-stop { display: none; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-radius: 999px; border: 0; background: #fff; color: var(--teal-900); font: 700 13px/1 var(--sans, inherit); cursor: pointer; }
.n-stop svg { width: 12px; height: 12px; fill: currentColor; }
.narrator.talking .n-stop { display: inline-flex; }


/* ---- Hero story: zoom into her hand, tap Shiro, ask, see the answer (played by site.js) ---- */
.story .st-photo { transform-origin: 53% 48%; transition: transform 1.5s cubic-bezier(.6, 0, .25, 1), filter 1.5s; will-change: transform; }
.story[data-step="zoom"] .st-photo, .story.closeup .st-photo { transform: scale(3.2); filter: blur(1px) brightness(.85); }
.story .hp-chip { transition: opacity .4s, transform .4s; }
.story:not([data-step="photo"]) .hp-chip { animation: none; opacity: 0; transform: translateY(8px); pointer-events: none; }
.st-close { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .7s; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(232, 169, 63, .25), transparent 60%), linear-gradient(180deg, rgba(10, 30, 28, .55), rgba(10, 30, 28, .85)); }
.story.closeup .st-close { opacity: 1; }
.st-phone { container-type: inline-size; width: 56%; aspect-ratio: 9 / 18; border-radius: 9cqw; padding: 2.4cqw; background: #0b0f10; box-shadow: 0 0 0 1.5px #3a4446, 0 24px 50px rgba(0, 0, 0, .55);
  transform: translateY(14%) scale(.9) rotate(-4deg); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.story.closeup .st-phone { transform: none; }
.st-screen { position: relative; height: 100%; border-radius: 7cqw; overflow: hidden; background: linear-gradient(160deg, #13403b, #0a2422 60%, #2b1d0b); color: #fff; font-family: var(--sans, system-ui, sans-serif); }
.st-status { display: flex; justify-content: space-between; padding: 5cqw 7cqw 0; font-size: 5cqw; opacity: .9; }
.st-status span { letter-spacing: -.5cqw; font-size: 4cqw; }
.st-home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7cqw 3cqw; padding: 12cqw 6cqw 0; transition: opacity .3s, transform .4s; }
.st-app { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; }
.st-app i { width: 15cqw; height: 15cqw; border-radius: 4.5cqw; display: grid; place-items: center; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .3); }
.st-app svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-app small { font-size: 3.6cqw; line-height: 1; min-height: 3.6cqw; opacity: .9; }
.st-shiro i { background: #fff; padding: 1.5cqw; transition: transform .15s; }
.st-shiro img { width: 100%; height: 100%; object-fit: contain; }
.story.tapped .st-shiro i { transform: scale(.86); }
.st-ripple { position: absolute; width: 20cqw; height: 20cqw; margin: -10cqw 0 0 -10cqw; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; transform: scale(.2); pointer-events: none; }
.st-ripple.go { animation: stRipple .55s ease-out; }
@keyframes stRipple { 0% { opacity: .8; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }
.st-open { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqw; padding: 13cqw 5cqw 6cqw; background: #f7f3ea; color: #0b2b28;
  opacity: 0; transform: scale(.12); transform-origin: var(--ox, 50%) var(--oy, 40%); transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.story.open .st-open { opacity: 1; transform: none; }
.story.open .st-home { opacity: 0; transform: scale(1.1); }
.st-top { display: flex; align-items: center; gap: 2.5cqw; font-size: 6.2cqw; }
.st-top img { width: 8cqw; height: 8cqw; border-radius: 2cqw; }
.st-lang { margin-left: auto; font-size: 3.6cqw; font-weight: 700; padding: 1cqw 2.5cqw; border-radius: 99px; background: #e4ede9; color: #0e5a52; }
.st-ask { align-self: flex-end; max-width: 88%; padding: 3.2cqw 4cqw; border-radius: 5cqw 5cqw 1.5cqw 5cqw; background: #0e5a52; color: #fff; font-size: 5cqw; line-height: 1.3; opacity: 0; transform: translateY(3cqw); transition: opacity .3s, transform .3s; }
.story.asking .st-ask, .story.answer .st-ask { opacity: 1; transform: none; }
.st-caret { display: inline-block; width: .8cqw; height: 4.6cqw; margin-left: .6cqw; vertical-align: -.6cqw; background: #f6c766; animation: stBlink .8s steps(2) infinite; }
.story.answer .st-caret { display: none; }
@keyframes stBlink { 50% { opacity: 0; } }
.st-ans { padding: 4cqw; border-radius: 5cqw; background: #fff; box-shadow: 0 2cqw 6cqw rgba(11, 43, 40, .12); opacity: 0; transform: translateY(6cqw); transition: opacity .45s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.story.answer .st-ans { opacity: 1; transform: none; }
.st-ans-h { display: block; font-size: 3.8cqw; font-weight: 700; color: #5b6f6b; text-transform: uppercase; letter-spacing: .3cqw; }
.st-ans-big { display: block; font-size: 10cqw; line-height: 1.15; font-weight: 800; color: #0e5a52; font-variant-numeric: tabular-nums; }
.st-ans-l { list-style: none; margin: 2cqw 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; }
.st-ans-l li { display: flex; justify-content: space-between; gap: 2cqw; font-size: 4.2cqw; padding-top: 1.6cqw; border-top: 1px solid #ece6d8; opacity: 0; transform: translateX(-3cqw); transition: opacity .3s, transform .3s; }
.story.answer .st-ans-l li { opacity: 1; transform: none; }
.st-ans-l li:nth-child(2) { transition-delay: .12s; } .st-ans-l li:nth-child(3) { transition-delay: .24s; }
.st-ans-l b { font-variant-numeric: tabular-nums; }
.st-ans-f { margin: 2.4cqw 0 0; font-size: 3.8cqw; font-weight: 600; color: #a86a0a; }
.st-micbar { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.st-mic { width: 17cqw; height: 17cqw; border-radius: 50%; display: grid; place-items: center; background: #f4b23e; color: #0b2b28; box-shadow: 0 2cqw 5cqw rgba(168, 106, 10, .35); transition: transform .15s; }
.st-mic svg { width: 45%; height: 45%; }
.story.listening .st-mic { animation: stPulse 1s ease-in-out infinite; }
.story.pressing .st-mic { transform: scale(.88); }
@keyframes stPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 178, 62, .55); } 50% { box-shadow: 0 0 0 4cqw rgba(244, 178, 62, 0); } }
.st-wave { display: flex; gap: 1.2cqw; height: 6cqw; align-items: center; opacity: 0; transition: opacity .3s; }
.st-wave i { width: 1.2cqw; height: 30%; border-radius: 1cqw; background: #0e5a52; }
.story.listening .st-wave { opacity: 1; }
.story.listening .st-wave i { animation: stWave .7s ease-in-out infinite alternate; }
.st-wave i:nth-child(2) { animation-delay: .1s; } .st-wave i:nth-child(3) { animation-delay: .2s; } .st-wave i:nth-child(4) { animation-delay: .3s; } .st-wave i:nth-child(5) { animation-delay: .4s; }
@keyframes stWave { to { height: 100%; } }
.st-finger { position: absolute; left: 0; top: 0; width: 15%; z-index: 3; pointer-events: none; opacity: 0; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
  transform: translate(var(--fx, 60%), 130%) rotate(-12deg); transition: transform .75s cubic-bezier(.3, .7, .3, 1), opacity .4s; }
.st-finger svg { display: block; width: 100%; height: auto; }
.story.st-point .st-finger { opacity: 1; transform: translate(var(--fx), var(--fy)) rotate(-12deg) scale(var(--fs, 1)); }
.story.st-press .st-finger { --fs: .9; transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) { .story .st-photo, .st-close, .st-phone, .st-open, .st-finger { transition: none; } }

/* Website CTA: talk to an expert on WhatsApp */
.cta-band .btn-ghost-light { color: #fff; border: 2px solid rgba(255, 255, 255, .55); background: transparent; }
.cta-band .btn-ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }


/* ==== Calm theme (Oct 2026): quiet, spacious, premium =================================================================
   Soft off-white pages, one calm heading font (Figtree), centred section headings, generous space, big rounded
   buttons with a soft teal gradient, a see-through menu over the home photo that turns solid when you scroll.
   Everything is scoped to body.calm so it can be switched off in one place. */
body.calm {
  --calm-bg: #F7F6F2; --calm-ink: #10302C; --calm-head: #0D3B36; --calm-muted: #5B6F6B;
  --calm-grad: linear-gradient(135deg, #12786D 0%, #1F9E83 55%, #36B58F 100%);
  --calm-grad-hover: linear-gradient(135deg, #0E6A60 0%, #1A8E76 55%, #2FA683 100%);
  background: var(--calm-bg); color: var(--calm-ink);
}
body.calm h1, body.calm h2, body.calm h3, body.calm .section-head h2 { font-family: 'Figtree', 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.015em; }
body.calm .section { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); }
body.calm .section.alt { background: #EEF3F0; }
body.calm .section-head { margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; max-width: 760px; }
body.calm .section-head h2 { color: var(--calm-head); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; }
body.calm .section-head .eyebrow { color: #1A8E76; letter-spacing: .12em; font-size: 12.5px; }
body.calm .section-head .eyebrow::before { display: none; }
body.calm .center-link { text-align: center; }

/* Buttons: big rounded pills */
body.calm .btn { border-radius: 999px; font-weight: 700; padding: 14px 26px; letter-spacing: .005em; }
body.calm .btn-gold { background: var(--calm-grad); color: #fff; border: 0; box-shadow: 0 12px 28px -12px rgba(18, 120, 109, .6); }
body.calm .btn-gold:hover { background: var(--calm-grad-hover); color: #fff; transform: translateY(-1px); }
body.calm .btn-ghost { background: #fff; color: var(--calm-head); border: 1.5px solid #D9E2DF; }
body.calm .btn-ghost:hover { border-color: #1F9E83; color: #12786D; }
body.calm .btn-xl { padding: 18px 34px; font-size: 17px; min-width: 210px; justify-content: center; }

/* Cards: soft, borderless, gently lifted */
body.calm .tile { border: 0; border-radius: 24px; box-shadow: 0 1px 2px rgba(16, 48, 44, .04), 0 12px 32px -16px rgba(16, 48, 44, .18); }

/* Header: see-through over the home photo, solid once you scroll */
body.calm header.site { background: rgba(247, 246, 242, .9); border-bottom: 1px solid rgba(16, 48, 44, .06); transition: background .35s, box-shadow .35s, border-color .35s; }
body.calm.scrolled header.site { box-shadow: 0 8px 24px -18px rgba(16, 48, 44, .5); }
body.calm[data-page="index"] header.site { position: fixed; left: 0; right: 0; top: 0; }
body.calm[data-page="index"]:not(.scrolled) header.site { background: linear-gradient(180deg, rgba(4, 28, 26, .55), rgba(4, 28, 26, 0)); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.calm[data-page="index"]:not(.scrolled) header.site .brand span,
body.calm[data-page="index"]:not(.scrolled) header.site nav.links a,
body.calm[data-page="index"]:not(.scrolled) header.site .nav-more summary,
body.calm[data-page="index"]:not(.scrolled) header.site .menu-btn { color: #fff; }
body.calm[data-page="index"]:not(.scrolled) header.site .lang-select { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
body.calm[data-page="index"]:not(.scrolled) header.site .btn-demo { color: #fff; border-color: rgba(255, 255, 255, .6); }
body.calm[data-page="index"]:not(.scrolled) header.site .btn-gold { background: #fff; color: var(--calm-head); box-shadow: none; }
body.calm[data-page="index"] header.site .lang-select option { color: #10302C; }
/* The "More" dropdown is a white card: its links stay dark even while the menu bar is see-through over the photo. */
body.calm[data-page="index"] header.site nav.links .nav-more .nav-more-menu a { color: var(--calm-head); }
body.calm[data-page="index"] header.site nav.links .nav-more .nav-more-menu a:hover { color: #12786D; }

/* Hero: a peaceful photo, one centred message */
body.calm .hero-v2 { min-height: clamp(600px, 92vh, 860px); background: #0B2F2B; }
body.calm .hero-v2 .hero-shade { background:
  radial-gradient(ellipse 62% 46% at 50% 46%, rgba(4, 28, 26, .58), transparent 72%),
  linear-gradient(180deg, rgba(4, 28, 26, .45) 0%, rgba(4, 28, 26, .25) 35%, rgba(4, 28, 26, .55) 72%, rgba(4, 28, 26, .82) 100%); }
body.calm .hero-center { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; padding: 140px 20px 110px; }
body.calm .hero-center { grid-template-columns: minmax(0, 1fr) !important; max-width: none; }
body.calm .hero-center .hero-copy { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
body.calm .hero-center h1 { color: #fff; font-size: clamp(38px, 6.2vw, 72px); font-weight: 800; line-height: 1.04; letter-spacing: -.025em; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
body.calm .hero-center h1 em { font-style: normal; color: #FFD27A; }
body.calm .hero-center .lead { color: rgba(255, 255, 255, .92); font-size: clamp(17px, 2vw, 21px); margin-top: 18px; max-width: 560px; }
body.calm .hero-center .ctas { justify-content: center; margin-top: 34px; gap: 14px; flex-wrap: wrap; }
body.calm .hero-center .btn-demo { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); backdrop-filter: blur(6px); }
body.calm .hero-center .btn-demo:hover { background: rgba(255, 255, 255, .22); }
body.calm .hero-center .trust { justify-content: center; margin-top: 30px; color: rgba(255, 255, 255, .86); gap: 10px 22px; }
body.calm .hero-v2 .hero-dots { bottom: 26px; }

/* "Things traders say" strip: light and calm */
body.calm .say-strip { background: var(--calm-bg); color: var(--calm-head); padding: 30px 0; }
body.calm .say-strip::before { background: linear-gradient(90deg, var(--calm-bg), transparent); }
body.calm .say-strip::after { background: linear-gradient(270deg, var(--calm-bg), transparent); }
/* The two moving rows of things traders say: solid, readable chips on the light page (white, then warm gold). */
body.calm .say-strip .say-track span { background: #fff; color: #0D3B36; border: 1px solid #D8E3DF; font-weight: 600; box-shadow: 0 6px 16px -12px rgba(16, 48, 44, .35); }
body.calm .say-strip .say-row.r2 .say-track span { background: #FFF1D2; color: #6B4300; border-color: #EBCB8B; }
body.calm .say-strip .say-label { color: #12786D; }
body.calm .say-strip .say-mic { background: #E3F2EC; color: #12786D; }

/* How it works: the rice seller using Shiro, beside three quiet steps */
body.calm .how-calm { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; max-width: 1040px; margin: 0 auto; }
body.calm .how-calm .hero-person { width: 100%; max-width: 400px; margin: 0 auto; }
body.calm .how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
body.calm .how-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
body.calm .hs-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #E3F2EC; color: #12786D; }
body.calm .hs-ic svg { width: 26px; height: 26px; }
body.calm .hs-n { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1A8E76; margin-bottom: 4px; }
body.calm .how-steps h3 { font-size: 22px; color: var(--calm-head); margin: 0 0 4px; }
body.calm .how-steps p { color: var(--calm-muted); font-size: 16.5px; line-height: 1.55; margin: 0; }
@media (max-width: 860px) {
  body.calm .how-calm { grid-template-columns: minmax(0, 1fr); }
  body.calm .how-calm .hero-person { max-width: 320px; }
}

/* Features: icon, short title, one line (no boxes) */
body.calm #features .tile { background: transparent; box-shadow: none; padding: 8px 6px; text-align: left; }
body.calm #features .tile .ic { background: #E3F2EC; color: #12786D; border-radius: 16px; }
body.calm #features .tile h3 { color: var(--calm-head); font-size: 20px; }

/* Final call to action: a soft teal gradient band */
body.calm .cta-band { background: linear-gradient(135deg, #0F5A52 0%, #12786D 50%, #1F9E83 100%); border-radius: 32px; box-shadow: 0 30px 60px -30px rgba(15, 90, 82, .6); }
body.calm .cta-band .btn-gold { background: #fff; color: var(--calm-head); }

/* Footer: deep and quiet */
body.calm footer.site { background: #08231F; border-top: 0; }

@media (max-width: 640px) {
  body.calm .hero-center { padding: 120px 18px 90px; }
  body.calm .btn-xl { width: 100%; min-width: 0; }
  body.calm .hero-center .ctas { width: 100%; max-width: 360px; }
}

/* Shiro's guide bar never blocks the page: fades and lets taps through while scrolling, compact on phones,
   moved only by her round face, and the page ends with room so the last links are never under her. */
.narrator { transition: opacity .25s, transform .25s; }
.narrator.scrolling { opacity: .18; transform: translateY(10px); pointer-events: none; }
.narrator .n-pill { touch-action: auto; }
.narrator .n-av { touch-action: none; cursor: grab; }
@media (max-width: 640px) {
  .narrator:not(.mini) .n-pill { max-width: calc(100vw - 32px); }
  body.calm footer.site { padding-bottom: 96px; }
}

/* With the menu bar fixed on the home page, a jump to a section lands below it, not under it. */
body.calm section[id] { scroll-margin-top: 84px; }

/* Talking while the visitor scrolls on a phone: just her face, Stop and sound (the words are on the page anyway). */
@media (max-width: 640px) { .narrator.compact:not(.mini) { width: auto; } .narrator.compact:not(.mini) .n-line { display: none; } .narrator.compact:not(.mini) .n-pill { width: auto; } }
/* The bar itself is not a drag handle any more (only her face is): normal pointer, normal scrolling. */
.narrator .n-pill { cursor: default; }

/* Phones: the hero photos are wide, so show them whole as a picture on top (same shape as on a computer),
   with the words underneath, instead of blowing them up to fill a tall, narrow screen. */
@media (max-width: 640px), (orientation: portrait) and (max-width: 1100px) {
  body.calm .hero-v2 { display: block; min-height: 0; }
  body.calm .hero-v2 .hero-slides { position: relative; inset: auto; width: 100%; aspect-ratio: 1280 / 760; overflow: hidden; }
  body.calm .hero-v2 .hero-shade { inset: 0 0 auto 0; height: calc(100vw * 760 / 1280); background: linear-gradient(to bottom, rgba(6, 37, 35, .55) 0%, transparent 35%, transparent 70%, #0B2F2B 100%); }
  body.calm .hero-v2 .hero-dots { top: calc(100vw * 760 / 1280 - 22px); bottom: auto; }
  body.calm .hero-center { padding: 26px 18px 48px; }
}

/* Calm design on phones: the card in the middle of the screen lifts gently with a soft green ring.
   Its colours never change, so no text or button can ever turn white-on-white. */
body.calm .tile.glow, body.calm .leader.glow, body.calm .tier.glow { transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(18, 120, 109, .28), 0 18px 40px -18px rgba(16, 48, 44, .35); }
body.calm #features .tile.glow { box-shadow: none; transform: none; }
body.calm #features .tile.glow .ic { background: #12786D; color: #fff; }

/* Team cards on phones: photo on top, words underneath across the full card width. */
@media (max-width: 560px) {
  .leaders .leader { flex-direction: column; align-items: center; text-align: center; padding: 26px 22px; }
  .leaders .leader .leader-photo { width: 112px; height: 112px; }
}
/* Feature list on phones: two neat columns instead of one long list. */
@media (max-width: 640px) {
  body.calm #features .grid-3 { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  body.calm #features .tile h3 { font-size: 17px; margin: 10px 0 4px; }
  body.calm #features .tile .muted { font-size: 14px; line-height: 1.45; }
}

/* Footer email: wrap only after the @, never mid-word. */
footer.site a[href^="mailto:"] { overflow-wrap: normal; word-break: normal; }

/* Menu bar: 'More' and its arrow stay on one line. */
header.site nav.links .nav-more summary { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
header.site nav.links > a { white-space: nowrap; }