/* Expentio landing page — redesign
 *
 * Palette and contrast rules come from the app's own design tokens
 * (lib/theme/tokens.dart) so site and product look like one thing:
 *   brand     #FFB300  accent only: never body text, never a focus ring on light
 *   brandNavy #334F65  headings, links, focus rings, dark surfaces
 *   ink       #1B1F24  body text
 * No framework: this file is the whole stylesheet, and it is deliberately small.
 */

:root {
  --brand: #FFB300;
  --brand-ink: #1B1F24;
  --navy: #334F65;
  --navy-deep: #26394A;
  --ink: #1B1F24;
  --muted: #5C6672;
  --surface: #FFFFFF;
  --surface-alt: #F7F8FA;
  --bg: #F2F4F7;
  --border: #E4E7EC;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(27, 31, 36, .06), 0 12px 32px rgba(27, 31, 36, .08);
  --shadow-lg: 0 24px 60px rgba(27, 31, 36, .16);
  --wrap: 1140px;
  --font-display: "Gloock", Georgia, "Times New Roman", serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 400; line-height: 1.15;
  margin: 0 0 .6em; letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* brandNavy on focus, because the token comment reserves amber for surfaces only */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 .75rem;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 14px 22px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-lg { padding: 17px 28px; font-size: 1.06rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 18px rgba(255, 179, 0, .35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 179, 0, .45); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-alt); transform: translateY(-2px); }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.brand { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); text-decoration: none; }
.menu-toggle {
  display: none; background: none; border: 0; padding: 8px; color: var(--ink);
  border-radius: var(--radius-sm); cursor: pointer;
}
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; }
.site-nav a { text-decoration: none; color: var(--ink); font-size: .96rem; }
.site-nav ul a:hover { color: var(--navy); text-decoration: underline; }

/* hero */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(255, 179, 0, .16), transparent 60%),
    linear-gradient(180deg, var(--surface-alt), var(--surface));
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-copy h1 { margin-bottom: 1.1rem; }

/* the amber underline from the old hero, drawn on load */
.mark { position: relative; white-space: nowrap; z-index: 0; }
.mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .34em;
  background: var(--brand); border-radius: 3px;
  transform: scaleX(0); transform-origin: left center;
  animation: draw .7s .15s ease-out forwards; z-index: -1;
}
@keyframes draw { to { transform: scaleX(1); } }

.lede { font-size: 1.12rem; color: var(--muted); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 1.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.chips li {
  font-size: .82rem; color: var(--navy); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
}

.hero-visual { position: relative; }
.device {
  margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: float 7s ease-in-out infinite;
}
.device-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.device-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.device-bar span:first-child { background: #F0B4AE; }
.device-bar span:nth-child(2) { background: #F3D9A4; }
.device-bar span:nth-child(3) { background: #BBD9BE; }
.device-bar em { margin-left: 8px; font-style: normal; font-size: .74rem; color: var(--muted); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.float-card {
  position: absolute; right: -8px; bottom: -16px;
  background: var(--navy); color: #fff; border-radius: var(--radius-sm);
  padding: .7rem 1rem; box-shadow: var(--shadow); display: grid; gap: 2px; max-width: 250px;
}
.float-card strong { font-size: .95rem; color: var(--brand); }
.float-card span { font-size: .78rem; opacity: .92; }

/* trust strip */
.strip { background: var(--navy); color: #fff; padding: 26px 0; }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.strip-grid div { display: grid; gap: 2px; }
.strip-grid strong { font-size: .98rem; color: var(--brand); font-weight: 700; }
.strip-grid span { font-size: .86rem; opacity: .88; }

/* sections */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-alt { background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 46em; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .sub { font-size: 1.06rem; color: var(--muted); margin: 0; }
.fineprint { margin-top: 2rem; font-size: .9rem; color: var(--muted); max-width: 60em; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #D8DDE4; }
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 50%;
  /* ink on amber: 9.2:1, which is why the tokens forbid white here */
  background: var(--brand); color: var(--brand-ink);
}
.card h3 { margin-bottom: .5rem; }
.card p { margin: 0; color: var(--muted); font-size: .98rem; }

/* product tour */
.tour { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tour-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .6rem; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.tour-tabs button {
  font-family: var(--font-body); font-size: .92rem; font-weight: 600; color: var(--muted);
  background: transparent; border: 0; padding: 10px 16px; border-radius: 999px; cursor: pointer;
}
.tour-tabs button:hover { color: var(--ink); background: var(--surface); }
.tour-tabs button.is-active { background: var(--navy); color: #fff; }
.tour-panels { position: relative; }
.tour-panel { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2rem; align-items: center; padding: 1.6rem; }
.tour-panel[hidden] { display: none; }
.tour-panel figure { margin: 0; }
.tour-panel img { border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* iPhone screen.
   The radius is the iPhone display corner: about 55pt on a 393pt-wide screen, which is
   what this 1179x2556 capture is. Percentages resolve against each axis separately, so the
   first value is R/W and the second is R/H - a single percentage would draw an ellipse and
   squash the arc vertically. Change both together to keep the corner circular.
   `figure.phone-shot img` is deliberately a notch more specific than `.tour-panel img`
   above, so the clip wins wherever the phone is used without depending on file order.
   Kept apart from the tour layout below so the same screen can also sit beside the hero
   browser once the app is on the App Store. */
figure.phone-shot img {
  width: auto;
  border-radius: 13.9% / 6.4%;
}

/* The phone is the tour's only portrait image, so it takes the narrow column and is capped
   by height rather than width. */
.tour-panel.tour-panel-phone { grid-template-columns: .58fr 1.42fr; }
.tour-panel.tour-panel-phone figure { justify-self: center; }
.tour-panel.tour-panel-phone figure.phone-shot img { max-height: 470px; }
.tour-copy h3 { margin-bottom: .5rem; }
.tour-copy p { margin: 0; color: var(--muted); }
/* panels fade in when switched (no autoplay, nothing moves on its own) */
.tour-panel.is-active { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: step; }
.steps li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 700; margin-bottom: 1rem;
}
.steps h3 { margin-bottom: .5rem; }
.steps p { margin: 0; color: var(--muted); font-size: .98rem; }

/* pricing */
.pricing-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.checklist { list-style: none; display: grid; gap: .6rem; margin-top: 1.2rem; }
.checklist li { position: relative; padding-left: 1.9rem; font-size: .98rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(-45deg);
}
.price-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 2rem; text-align: center;
}
.price { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: 0 0 .25rem; font-family: var(--font-display); }
.price .currency { font-size: 1.6rem; color: var(--navy); }
.price .amount { font-size: 3.4rem; line-height: 1; }
.price .period { font-size: 1rem; color: var(--muted); }
.price-note { font-size: .85rem; color: var(--muted); margin: 0 0 1.4rem; }
.price-foot { font-size: .85rem; color: var(--muted); margin: 1rem 0 0; }

/* faq */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; align-items: start; }
.faq-grid details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.3rem;
}
.faq-grid summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; color: var(--navy); font-weight: 700; font-size: 1.2rem; }
.faq-grid details[open] summary::after { content: "\2013"; }
.faq-grid p { margin: .8rem 0 0; color: var(--muted); font-size: .96rem; }

/* closing band */
.cta-band { background: linear-gradient(135deg, var(--navy), var(--navy-deep)); color: #fff; padding: clamp(48px, 7vw, 88px) 0; }
.cta-inner { text-align: center; }
.cta-inner h2 { color: #fff; margin-bottom: .5rem; }
.cta-inner p { color: rgba(255, 255, 255, .88); margin-bottom: 1.6rem; }

/* footer */
.site-footer { background: var(--surface-alt); border-top: 1px solid var(--border); padding: clamp(40px, 5vw, 64px) 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.footer-brand { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .6rem; }
.footer-head {
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: .8rem;
}
.site-footer ul { list-style: none; display: grid; gap: .5rem; }
.site-footer p { font-size: .94rem; }
.muted { color: var(--muted); font-size: .88rem; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.footer-legal p { font-size: .8rem; color: var(--muted); margin: 0; }

/* reveal on scroll: the hidden state only applies when the script is running */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="2"] { transition-delay: .1s; }
.js .reveal[data-delay="3"] { transition-delay: .2s; }
.js .reveal[data-delay="4"] { transition-delay: .3s; }

/* responsive */
@media (max-width: 980px) {
  .hero-grid, .pricing-grid, .tour-panel, .tour-panel.tour-panel-phone { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .cards, .faq-grid, .steps { grid-template-columns: 1fr; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .float-card { right: 8px; bottom: -12px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none;
    flex-direction: column; align-items: stretch; gap: .5rem;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 1rem 24px 1.4rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: .2rem; }
  .site-nav ul a { display: block; padding: .6rem 0; }
  .site-nav .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* pricing tier chips and the hero tier note */
.tier-note { font-size: .92rem; color: var(--muted); max-width: 42em; margin: 0; }
.tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin: 0 0 .7rem;
}
/* Literal colours, and the selector doubled up, on purpose: this label sits inside
   .tour-copy, whose `p` rule (0,1,1) would otherwise win and paint it muted grey on
   navy. Amber on navy is the pairing the floating card already uses. */
.tag.tag-paid { background: #334F65; color: #FFB300; }

/* respect a user's motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .mark::after { transform: scaleX(1); }
}