/* toExpense — landing page (home IT and EN). Builds on base.css. */

/* Header: same black as the hero. It opens tall with the large logo and
   shrinks with the scroll (--p goes 0 → 1, set by site.js). The logo keeps
   its square aspect ratio; the Download button keeps its size and its place,
   8px from the top, at every step. */
:root { --p: 0; --bar-min: 56px; --logo-min: 44px; --logo-max: 168px; }
@media (max-width: 860px) { :root { --logo-max: 124px; } }
html { scroll-padding-top: calc(var(--bar-min) + 8px); }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: #000; color: #f5f5f7;
  height: calc(var(--logo-max) + 16px - (var(--logo-max) - var(--logo-min) + 4px) * var(--p));
  box-shadow: 0 1px 0 rgba(255, 255, 255, calc(.12 * var(--p))); }
.nav .wrap { height: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nav-brand { position: relative; display: block; margin-top: calc(8px - 2px * var(--p)); margin-left: -6px; text-decoration: none; color: #f5f5f7; }
.nav-brand img { display: block; width: calc(var(--logo-max) - (var(--logo-max) - var(--logo-min)) * var(--p)); height: auto; aspect-ratio: 1; }
/* Brand name next to the compact logo. It takes no layout space and fades
   and slides in over the last 40% of the shrink, so it never sits beside
   the large logo (opacity outside 0–1 is clamped by the browser). */
.nav-wordmark { position: absolute; left: calc(100% + 8px); top: 50%; white-space: nowrap; pointer-events: none; cursor: pointer;
  font: 800 22px/1 var(--font-round); letter-spacing: .01em;
  opacity: calc((var(--p) - .6) / .4); transform: translate(calc((1 - var(--p)) * -12px), -50%); }
/* Clickable, like the logo it sits beside, once it starts showing. */
.nav.is-condensed .nav-wordmark { pointer-events: auto; }
.nav-actions { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.nav-lang { font-weight: 600; font-size: 15px; text-decoration: none; color: #f5f5f7; padding: 10px 2px; }
.nav-lang:hover { text-decoration: underline; }
.btn-capsule.compact { min-height: 40px; padding: 0 20px; font-size: 15px; background: var(--orange);
  box-shadow: inset 0 0 0 3px var(--white), 0 0 0 1.5px var(--black); }

/* Hero */
.hero { background: #000; color: #f5f5f7; padding: calc(var(--logo-max) + 16px) 0 0; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; }
.hero h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .lead { color: #a1a1a8; margin-top: 22px; max-width: 560px; }
.hero .cta-row { margin-top: 32px; }
/* Official Apple badge (white lockup on the black sections), shown as is:
   never recolored or animated; 54px tall, above Apple's 40px minimum. */
.appstore-link { display: inline-block; line-height: 0; border-radius: 9px; }
.appstore-link img { height: 54px; width: auto; }
.hero .price-note { color: #8e8e93; margin-top: 16px; }
.hero-copy { padding: 24px 0 72px; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 8px; }
}

/* CSS iPhone */
.phone { position: relative; width: 300px; max-width: 78vw; aspect-ratio: 9 / 19.5; margin: 0 auto;
  border-radius: 48px; background: #1c1c1e; padding: 12px; box-shadow: 0 0 0 2px #3a3a3c, 0 40px 80px rgba(0, 0, 0, .5); }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%); background: #000; border-radius: 20px; z-index: 3; }
.screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #f2f2f7; color: #1d1d1f; font-size: 13px; }
/* Hero iPhone, shortened (300×536) so it ends 24px above the banner edge with
   rounded bottom corners, like the top. Same position and width as before.
   To go back to the previous version (full 9:19.5 phone running 90px past the
   banner, bottom cut off), replace the rule below with:
     .hero .phone { margin-bottom: -90px; }                                    */
.hero .phone { aspect-ratio: auto; height: 536px; margin-bottom: 24px; }
/* Desktop: 20px taller (556px) and centred on the text from the title to the
   price note. The copy has 24px padding on top and 72px below, so the phone sits
   24px above the row's centre. Margins keep its layout box at 560px (536 + 24, as
   before), so the banner height does not change at any width. From 1100px only:
   on narrower windows the text is shorter and the header would cover the top.
   To go back to the 536px phone resting 24px above the banner edge, delete this block. */
@media (min-width: 1100px) {
  .hero .phone { height: 556px; margin-top: -22px; margin-bottom: 26px; align-self: center; }
}

.scan-view { position: absolute; inset: 0; padding: 62px 16px 16px; display: flex; flex-direction: column; gap: 12px; background: #1c1c1e; }
.receipt { position: relative; background: #fff; border-radius: 6px; padding: 14px 14px 18px; font: 11px/1.5 ui-monospace, Menlo, monospace; color: #333; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.receipt b { display: block; text-align: center; font-size: 12px; }
.receipt .r { display: flex; justify-content: space-between; }
.receipt hr { border: 0; border-top: 1px dashed #bbb; margin: 6px 0; }
.scanline { position: absolute; left: -6px; right: -6px; height: 3px; background: var(--orange); box-shadow: 0 0 14px 4px rgba(255, 153, 51, .7); top: 0; animation: scan 2.4s ease-in-out infinite; }
@keyframes scan { 0%, 100% { top: 4%; } 50% { top: 94%; } }
.extract { background: #fff; border-radius: 14px; padding: 6px 12px; }
.extract div { display: flex; justify-content: space-between; padding: 6px 0; gap: 8px; }
.extract div + div { border-top: 1px solid #e5e5ea; }
.extract span { color: #6e6e73; }
.extract b { font-variant-numeric: tabular-nums; transition: color .3s; }
.extract b.filled { color: #0a7a37; }

/* Scroll story */
.story { padding: 120px 0 40px; }
.story-intro { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.story-intro .lead { margin-top: 16px; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.story-phone { position: sticky; top: 90px; height: calc(100vh - 120px); max-height: 680px; display: grid; place-items: center; }
.story-screen { position: absolute; inset: 0; padding: 62px 16px 16px; opacity: 0; transition: opacity .5s ease; display: flex; flex-direction: column; gap: 10px; }
.story-screen.active { opacity: 1; }
.story-screen h3 { font-size: 22px; font-weight: 800; padding: 0 4px; }
.card { background: #fff; border-radius: 14px; padding: 10px 12px; }
.li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.li + .li { border-top: 1px solid #e5e5ea; }
.li .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.li .ic svg { width: 16px; height: 16px; }
.ic--orange { background: #ff9f0a; }
.ic--indigo { background: #5e5ce6; }
.ic--blue { background: #0a84ff; }
.ic--ink { background: #1d1d1f; }
.ic--red { background: #ff453a; }
.ic--green { background: #30b158; }
.li .amt { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.li small { display: block; color: #6e6e73; font-size: 11px; }
.ok { color: #0a7a37; }
.synced { display: flex; align-items: center; gap: 8px; justify-content: center; color: #0a7a37; font-weight: 600; padding: 6px; }
.synced svg { width: 18px; height: 18px; }
/* App icon at the top of every phone screen. On the privacy screen a
   brand-green badge (cloud and lock) overlaps its corner; the white ring and
   black edge echo the onboarding badges. */
.app-mark { position: relative; width: 92px; height: 92px; margin: 18px auto 28px; }
.app-mark img { display: block; width: 100%; height: 100%; border-radius: 22%; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.app-mark .privacy-badge { position: absolute; right: -22px; bottom: -16px; width: 40px; height: 40px; border-radius: 12px;
  background: var(--green); color: #000; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #000; }
.app-mark .privacy-badge svg { width: 28px; height: 28px; stroke-width: 2.2; }
.center { text-align: center; }

.steps { display: grid; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.step .num { font: 800 15px/1 var(--font); color: var(--accent-text); letter-spacing: .06em; text-transform: uppercase; }
.step h2 { margin: 12px 0 16px; }
.step .lead { margin-bottom: 22px; }
.step .tile { display: none; }
@media (max-width: 860px) {
  .story { padding-top: 140px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-phone { display: none; }
  .step { min-height: 0; padding: 36px 0; border-top: 1px solid var(--line); }
  .step .tile { display: grid; margin-bottom: 16px; }
}

/* CSV preview */
.csv { background: var(--bg-soft); padding: 100px 0; }
.csv .lead { max-width: 680px; margin-top: 16px; }
.csv .table-scroll { margin-top: 36px; overflow-x: auto; border-radius: var(--radius-sm); background: var(--bg-card); box-shadow: var(--shadow); }
.csv .table-scroll table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }
.csv .table-scroll th, .csv .table-scroll td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.csv .table-scroll th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); background: var(--bg-soft); }
.csv .table-scroll td.num { text-align: right; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.chip svg { width: 18px; height: 18px; color: var(--orange-deep); }

/* Savings calculator */
.savings { padding: 100px 0; }
.savings .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.savings h2 { margin-top: 10px; }
.savings .lead { margin-top: 16px; }
@media (max-width: 860px) { .savings { padding: 64px 0; } .savings .wrap { grid-template-columns: 1fr; gap: 28px; } }
.calc { background: var(--bg-card); border-radius: 28px; padding: 28px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.calc label { display: flex; justify-content: space-between; margin-top: 18px; font-weight: 600; font-size: 15px; }
.calc label:first-child { margin-top: 0; }
.calc label output { font-variant-numeric: tabular-nums; }
.calc input[type=range] { width: 100%; margin-top: 10px; accent-color: var(--orange-deep); height: 28px; }
.bars { display: grid; gap: 14px; margin-top: 24px; }
.bar-label { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
.bar-label b { color: var(--text); font-variant-numeric: tabular-nums; }
.bar { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; border-radius: 999px; transition: width .4s ease; }
.bar .cloud { background: #8e8e93; }
.bar .ours { background: var(--orange); }
.saving { margin-top: 22px; padding: 16px; border-radius: 16px; background: var(--orange); color: #000; text-align: center; }
.saving strong { display: block; font: 800 36px/1.1 var(--font-round); font-variant-numeric: tabular-nums; }
.calc .small { margin-top: 12px; color: var(--text-2); }

/* The splash tagline as three pillars */
.pillars-section { background: var(--orange); color: #000; padding: 96px 0 0; }
.pillars-section .title-1 { text-align: center; max-width: 760px; margin: 0 auto; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 48px auto 0; max-width: 1040px; }
.pillar { background: #000; color: #fff; border-radius: var(--radius) var(--radius) 0 0; padding: 26px 24px 34px; }
.pillar .icon-tile { background: var(--orange); margin-bottom: 18px; }
.pillar h3 { font-size: 30px; font-weight: 800; }
.pillar h3 em { font-style: normal; color: var(--orange); }
.pillar p { margin-top: 10px; color: #d8d8dc; }
@media (max-width: 760px) {
  .pillars-section { padding-top: 64px; }
  .pillars { grid-template-columns: 1fr; gap: 0; }
  .pillar { border-radius: 0; border-top: 1px solid #2a2a2a; }
  .pillar:first-child { border-radius: var(--radius) var(--radius) 0 0; border-top: 0; }
}

/* Closing call to action */
.final { background: #000; color: #f5f5f7; text-align: center; padding: 110px 0; }
.final .wrap > img { width: 140px; height: auto; aspect-ratio: 1; margin: 0 auto 24px; }
.final .lead { color: #a1a1a8; margin: 18px auto 0; max-width: 620px; }
.final .cta-row { justify-content: center; margin-top: 34px; }
.final .price-note { color: #8e8e93; margin-top: 16px; }

/* Support page */
.page-head { background: #000; color: #f5f5f7; padding: calc(var(--logo-max) + 16px) 0 56px; }
.page-head .lead { color: #a1a1a8; margin-top: 16px; max-width: 640px; }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: -32px; }
.contact-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.contact-card h2 { font-size: 20px; margin: 14px 0 6px; }
.contact-card a { color: var(--accent-text); font-weight: 600; }
.faq { padding: 72px 0 96px; }
.faq h2, .faq details { max-width: 820px; }
.faq h2 { margin-bottom: 20px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 600; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 26px; font-weight: 400; color: var(--text-2); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 20px; color: var(--text-2); }
.faq details > div p + p { margin-top: 10px; }
.faq details > div ul { margin: 8px 0 10px; padding-left: 20px; }
.faq details > div li + li { margin-top: 4px; }
.faq details a { color: var(--accent-text); }

/* 404 */
.not-found { min-height: 100vh; background: #000; color: #f5f5f7; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.not-found img { width: 160px; height: auto; aspect-ratio: 1; margin: 0 auto 24px; }
.not-found p { color: #a1a1a8; margin: 14px 0 28px; }
.not-found .cta-row { justify-content: center; }