carries max-width:68ch for readable line length. Centring the text inside that box is not the same as centring the box on the page, which is how the hero eyebrow and the FAQ footer link both ended up left of centre. */ p.center,.fine.center{max-width:none;margin-inline:auto} .mt-0{margin-top:0}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)} .mb-0{margin-bottom:0} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:var(--sp-4);top:-3rem;z-index:100;background:var(--panel); color:#fff;padding:.6rem 1rem;border-radius:var(--r-sm);transition:top .15s} .skip-link:focus{top:var(--sp-4)} /* -- 14. Motion ---------------------------------------------------------- Restraint is the whole point. Things arrive once, from 10px below, on a single easing curve; nothing loops, nothing bounces, nothing slides in from the side. The page must still read perfectly with JavaScript off and with reduced motion on, so the resting state is the visible state and .reveal is only ever added by script once it knows an observer exists. ----------------------------------------------------------------------- */ :root{ --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); } /* Set by JS on the moment it decides to animate. Without it every [data-reveal] stays at its natural opacity, which is what no-JS gets. */ .js-motion [data-reveal]{ opacity:0; transform:translate3d(0,10px,0); transition:opacity .62s var(--ease-out),transform .62s var(--ease-out); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; } .js-motion [data-reveal].is-in{opacity:1;transform:none} .js-motion [data-reveal].is-in{will-change:auto} /* A group whose children arrive one after another. The delay is set per child in script so it survives any number of items. */ .js-motion [data-reveal-group] > *{ opacity:0; transform:translate3d(0,12px,0); transition:opacity .58s var(--ease-out),transform .58s var(--ease-out); transition-delay:var(--reveal-delay,0ms); } .js-motion [data-reveal-group].is-in > *{opacity:1;transform:none} /* The hero shot earns a slightly longer, slightly larger move — it is the one element the eye is waiting for. */ .js-motion [data-reveal="shot"]{transform:translate3d(0,22px,0) scale(.985);transition-duration:.85s} .js-motion [data-reveal="shot"].is-in{transform:none} @media (prefers-reduced-motion:reduce){ .js-motion [data-reveal], .js-motion [data-reveal-group] > *{opacity:1!important;transform:none!important;transition:none!important} } /* Header: a hairline and a little more opacity once the page has moved. */ .site-header{will-change:background-color} /* Nav underline that grows from the left rather than fading in. */ .nav-link{position:relative} .nav-link::before{ content:"";position:absolute;left:.6rem;right:.6rem;bottom:.18rem;height:1.5px; background:currentColor;transform:scaleX(0);transform-origin:left;opacity:.5; transition:transform .28s var(--ease-out); } .nav-link[aria-current="page"]::before{transform:scaleX(1)} @media (hover:hover){.nav-link:hover::before{transform:scaleX(1)}} @media (max-width:980px){.nav-link::before{display:none}} /* Buttons get a real press, not a colour swap. */ .btn{transform:translateZ(0)} .btn-primary,.btn-accent{position:relative;overflow:hidden} .btn-primary::after,.btn-accent::after{ content:"";position:absolute;inset:0;background:rgba(255,255,255,.14); opacity:0;transition:opacity .2s var(--ease-out); } .btn-primary:hover::after,.btn-accent:hover::after{opacity:1} /* Cards lift by one pixel. Any more and it reads as a template. */ .card{transform:translateZ(0)} @media (hover:hover){ .card:hover{transform:translateY(-1px)} .card{transition:border-color .16s ease,box-shadow .16s ease,transform .16s var(--ease-out)} } /* The screenshot frame responds to the pointer just enough to feel alive. */ @media (hover:hover){ .shot{transition:box-shadow .35s var(--ease-out),transform .35s var(--ease-out)} .shot:hover{transform:translateY(-2px)} } /* FAQ answers open rather than appear. details cannot be transitioned, so the inner block carries the motion after the browser has done the toggling. */ .faq-item[open] .a{animation:faq-in .34s var(--ease-out) both} @keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.faq-item[open] .a{animation:none}} /* A figure that counts up on arrival. The element keeps its final value in the markup, so no-JS and reduced-motion readers simply see the number. */ .stat-v{font-variant-numeric:tabular-nums} /* The one piece of ambient motion on the site: a hairline that draws itself across a section break. Slow, once, and only when it scrolls into view. */ .rule-draw{height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left; transition:transform 1s var(--ease-out)} .rule-draw.is-in{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){.rule-draw{transform:none}} /* Mobile menu slides down under its own header rather than popping. */ @media (max-width:980px){ .site-header.nav-open .nav{animation:menu-in .26s var(--ease-out) both} @keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} } @media (prefers-reduced-motion:reduce){ .site-header.nav-open .nav{animation:none} } /* Dropdown menus: already transitioned above; give the items a touch of stagger. */ .nav-menu a{transition:background .13s ease,transform .18s var(--ease-out)} @media (hover:hover){.nav-menu a:hover{transform:translateX(2px)}} /* -- 15. Corrections after the first look -------------------------------- Three things the first live pass got wrong. ----------------------------------------------------------------------- */ /* 1. The hero screenshot was ~530px wide holding a 2880px dashboard, which made every figure in it illegible — and an unreadable screenshot reads as a mock-up rather than as the product. The hero now stacks: the argument, then the product across the full width, large enough to actually read. */ .hero-stack{text-align:center} .hero-stack h1{max-width:19ch;margin-inline:auto} .hero-stack .lede-lg{margin-inline:auto;max-width:56ch} .hero-stack .btn-row,.hero-stack .trust-row{justify-content:center} /* .eyebrow is a
, so it inherited p{max-width:68ch}. justify-content then centred it inside that 68ch box rather than on the page, which put the label visibly left of the headline above it. */ .hero-stack .eyebrow{justify-content:center;max-width:none} .hero-stack .eyebrow::after{content:"";width:22px;height:1px;background:var(--line-strong);flex:0 0 auto} .shot-hero{ margin-top:clamp(2.5rem,2rem + 2vw,4rem); border-radius:var(--r-lg); /* A little wider than the text column, so it reads as the subject of the page rather than as an illustration beside it. */ max-width:1180px;margin-inline:auto; } /* Shown whole. At 1180px wide the capture is about 740px tall, which fits — and a screenshot sliced through the middle of a row reads as unfinished, which was the first thing wrong with it. */ .shot-hero .shot-inner{border-radius:inherit;overflow:hidden} .shot-hero img{width:100%;display:block} /* 2. The FAQ was set at the heading scale, which made six questions eat a whole screen on the home page. The compact variant is for pages where the FAQ is a footnote rather than the point. */ .faq-compact summary{font-size:1.02rem;font-weight:550;padding:var(--sp-4) 0;letter-spacing:-.01em} .faq-compact summary::after{width:9px;height:9px;margin-top:.4em} .faq-compact .a{padding-bottom:var(--sp-4);font-size:.96rem;line-height:1.6} .faq-compact .a p{margin-bottom:var(--sp-2)} /* Two columns on a wide screen, so six questions are one screen-third, not one screen. Each column keeps its own border so the rhythm survives the split. */ @media (min-width:860px){ .faq-compact{max-width:none;columns:2;column-gap:var(--sp-7)} .faq-compact .faq-item{break-inside:avoid;page-break-inside:avoid} } /* 3. Feature-row screenshots get the same treatment as the hero: a fixed crop so the interesting part is at a readable scale instead of the whole page being squeezed into a third of the width. */ .frow-media .shot img,.frow-media.shot img{display:block} .shot-tall{max-height:420px;overflow:hidden} .shot-tall img{object-fit:cover;object-position:top left} /* -- 16. Country panel ---------------------------------------------------- The first version put a 110px flag in the middle of an empty white box, which looked like a placeholder waiting for a real image. A country pack's substance is the facts, so the panel shows the flag at a size worth showing and then the facts themselves, set like a specification. ----------------------------------------------------------------------- */ .country-card{ border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:var(--surface);box-shadow:var(--sh-3); } .country-flag{ position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--raise); border-bottom:1px solid var(--line); } .country-flag svg{width:100%;height:100%;display:block;object-fit:cover} /* A hairline of shade along the bottom so a white flag field (CZ, FR, CH) does not simply dissolve into the card under it. */ .country-flag::after{ content:"";position:absolute;inset:auto 0 0 0;height:38%; background:linear-gradient(to top,rgba(10,11,13,.16),transparent); } .country-flag .country-name{ position:absolute;left:var(--sp-5);bottom:var(--sp-4);z-index:2; font-family:var(--font-display);font-size:clamp(1.4rem,1.1rem + 1vw,2rem); font-weight:600;letter-spacing:-.03em;color:#fff; text-shadow:0 1px 14px rgba(10,11,13,.5); } .country-facts{display:grid;grid-template-columns:1fr 1fr;gap:0} .country-facts div{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line)} .country-facts div:nth-child(odd){border-right:1px solid var(--line)} .country-facts dt{font-size:var(--t--2);font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-400);margin:0 0 .25rem} .country-facts dd{margin:0;font-family:var(--font-display);font-weight:600; font-size:1.05rem;letter-spacing:-.02em;color:var(--ink-900); font-variant-numeric:tabular-nums} /* The flag on the country index cards, given room rather than tucked in a corner. */ .country-tile-flag{display:block;width:100%;aspect-ratio:3/2;border-radius:var(--r-md); overflow:hidden;border:1px solid var(--line);margin-bottom:var(--sp-4)} .country-tile-flag svg{width:100%;height:100%;display:block} /* -- 14. Phones and tablets ----------------------------------------------- */ /* The grids in section 4 already collapse, and most sizes here are clamped against the viewport. What was left is the part that only shows up with a thumb: targets under 44px, comparison tables squeezing instead of scrolling, and call-to-action rows splitting into two half-width buttons. */ @media (max-width: 640px) { /* A button on a phone is hit, not clicked. 44px is the floor Apple and Google both publish, and everything here sat just under it. */ .btn { min-height: 44px; padding-block: .85em; } .btn-sm { min-height: 40px; } .btn-lg { min-height: 50px; width: 100%; } /* A pair of calls to action side by side gives each about 150px, which is narrower than the labels want and too narrow to hit reliably. Stacked, each one is the width of the screen and the order reads top to bottom. */ .btn-row { gap: var(--sp-2); } .btn-row > .btn { flex: 1 1 100%; } /* …except a quiet link, which is not a target the same way and reads better centred under the buttons than stretched across. */ .btn-row > .btn-quiet { flex: 1 1 auto; } /* Lists of links in the footer need vertical room between them or the wrong one gets tapped. */ .footer-col a, .footer-legal a { display: block; padding-block: .3rem; min-height: 38px; } } /* A comparison table is the one thing on this site that cannot be made narrow: five columns of ticks against a column of sentences. The wrapper was already set to scroll, but the table is `width:100%`, so it shrank to fit instead and the feature column came out three words to a line. A floor on its width makes the scroll the wrapper offers actually happen. */ @media (max-width: 760px) { .table-scroll > table.tbl { min-width: 620px; } table.tbl th, table.tbl td { padding: .7rem .8rem; font-size: .9rem; } /* What each row is about should stay readable while the ticks scroll past it. */ .table-scroll > table.tbl th:first-child, .table-scroll > table.tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); min-width: 200px; white-space: normal; } .table-scroll > table.tbl thead th:first-child { background: var(--raise); z-index: 2; } /* An edge that is cut off rather than faded looks like the end of the table. */ .table-scroll { scrollbar-width: thin; overscroll-behavior-x: contain; } } @media (max-width: 560px) { /* Two columns of facts on a country page come to about 150px each, which is not enough for "QR-Rechnung and ISO 20022". */ .country-facts { grid-template-columns: 1fr; } .country-facts div:nth-child(odd) { border-right: 0; } /* The eyebrow rules take a third of the line away from a short label. */ .eyebrow { gap: var(--sp-2); } .eyebrow.center::before, .eyebrow.center::after { width: 14px; } } /* iOS zooms in on any field under 16px and does not zoom back out. Nothing on the marketing site takes much typing, but the contact form and the newsletter box do, and both inherit the site's body size. */ @media (max-width: 991.98px) { input, select, textarea { font-size: max(16px, 1rem); } } /* -- 17. Home: a working demo ------------------------------------------------ The home page proves the product by letting the visitor use it on demo figures: book in a bill, sell a burger, reprice a dish. Every demo card carries a "Demo figures" pill and the plan it needs. ----------------------------------------------------------------------- */ /* Hero: the argument on the left, the chain that makes it on the right. */ .hx-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center} .hx h1{max-width:14ch} .hx .lede-lg{max-width:44ch} .hx-terms{margin-top:var(--sp-4);max-width:52ch} @media (max-width:900px){.hx-grid{grid-template-columns:minmax(0,1fr)}.hx h1{font-size:clamp(2.15rem,1.6rem + 3vw,3rem)} .hx-grid{gap:var(--sp-4)}.hx-copy{display:contents}.hx-copy > *{margin:0}.chain{margin:var(--sp-3) 0}.hx-copy > .eyebrow,.hx-copy > h1,.hx-copy > .lede-lg{order:0}.chain{order:1}.hx-copy > .btn-row{order:2;margin-top:0}.hx-copy > .hx-terms{order:3;margin-top:0}} /* A demo card: the product's own look, small enough to read at once. */ .dcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--sh-3);padding:clamp(1.25rem,1rem + 1vw,1.75rem);color:var(--ink-700)} .dcard p{margin:0;max-width:none} .dcard-sub{font-size:var(--t--2);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:var(--sp-4)!important} .demo-pill{position:absolute;top:var(--sp-3);right:var(--sp-3);font-size:var(--t--2);font-weight:600; padding:.15rem .55rem;border-radius:var(--r-pill);background:var(--raise);color:var(--ink-500);border:1px solid var(--line)} .plan-tag{display:inline-block;margin-top:var(--sp-4);font-size:var(--t--2);font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line); padding:.1rem .5rem;border-radius:var(--r-sm)} .pill{display:inline-flex;align-items:center;font-size:var(--t--2);font-weight:600;padding:.18rem .6rem; border-radius:var(--r-pill);background:var(--raise);color:var(--ink-600);border:1px solid var(--line);white-space:nowrap} .pill-pos{background:var(--pos-soft);color:var(--pos);border-color:transparent} .pill-warn{background:var(--warn-soft);color:var(--warn);border-color:transparent} .pill-accent{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)} .neg{color:var(--neg)} .link-btn{background:none;border:0;padding:var(--sp-3) 0 0;color:var(--accent);font-weight:550;cursor:pointer;min-height:44px} .demo-honest{margin-top:var(--sp-4);max-width:70ch} .demo-notes{list-style:none;padding:0;margin:var(--sp-5) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)} .demo-notes li{font-size:var(--t--1);color:var(--ink-500);line-height:1.5;padding-left:var(--sp-4);border-left:2px solid var(--line-strong)} @media (max-width:820px){.demo-notes{grid-template-columns:minmax(0,1fr)}} /* S1 chain */ .chain{max-width:480px;justify-self:end;width:100%} @media (max-width:900px){.chain{justify-self:stretch;max-width:none}} .chain-rows{list-style:none;margin:0;padding:0;position:relative} .chain-rows::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--line-strong)} .chain-row{display:grid;grid-template-columns:36px 1fr;gap:var(--sp-4);padding:var(--sp-3) 0;position:relative} .chain-ico{width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong); display:grid;place-items:center;color:var(--ink-600);position:relative;z-index:1} .chain-ico.is-neg{background:var(--neg-soft);border-color:transparent;color:var(--neg)} .chain-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .chain-k{font-size:var(--t--1);color:var(--ink-400);font-weight:550} .chain-v{color:var(--ink-700);font-size:.98rem;line-height:1.45} .chain-v.strong{color:var(--ink-900);font-weight:600} .chain-big{font-family:var(--font-display);font-size:var(--t-3);font-weight:600;letter-spacing:-.03em;line-height:1.15} .chain-money{font-weight:700;font-size:1.02rem; margin-top:var(--sp-2)!important;font-variant-numeric:tabular-nums} .chain.is-playing .chain-row{opacity:0;transform:translateY(8px);transition:opacity .3s ease-out,transform .3s ease-out} .chain.is-playing .chain-row.is-in{opacity:1;transform:none} /* S2 bill */ .billdemo{display:grid;grid-template-columns:5fr 7fr;gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start} @media (max-width:900px){.billdemo{grid-template-columns:minmax(0,1fr)}} .bill{position:relative;overflow:hidden;background:var(--raise);border:1px solid var(--line-strong);border-radius:var(--r-md); padding:var(--sp-5);font-family:var(--font-mono);font-size:.84rem;color:var(--ink-800);box-shadow:var(--sh-2);transform:rotate(-.6deg)} .bill p{margin:0 0 var(--sp-2);max-width:none} .bill-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-4)} .bill-qr{width:54px;height:54px;flex:0 0 auto;background: repeating-conic-gradient(var(--ink-900) 0 25%,transparent 0 50%) 0 0/9px 9px;border:3px solid var(--ink-900);opacity:.85} .bill-lines{width:100%;border-collapse:collapse;margin-bottom:var(--sp-3)} .bill-lines td{padding:.35rem .2rem;border-bottom:1px dashed var(--line-strong);white-space:nowrap} .bill-lines td:first-child{white-space:normal} .bill-lines td:last-child,.bill-lines td:nth-child(3){text-align:right} .bill-all{display:none} .bill-foot{font-size:.8rem;color:var(--ink-600)} .bill-foot span{white-space:nowrap} .bill-scan{position:absolute;left:0;right:0;top:-20%;height:18%;pointer-events:none;opacity:0; background:linear-gradient(to bottom,transparent,var(--accent-soft),transparent)} [data-state="read"] .bill-scan{animation:billscan .7s ease-in-out} @keyframes billscan{0%{top:-20%;opacity:1}100%{top:100%;opacity:1}} @media (max-width:640px){ .bill{transform:none;font-size:.8rem} .bill-lines .bill-more{display:none} .bill-all{display:block;margin-bottom:var(--sp-3)} .bill-all summary{cursor:pointer;color:var(--accent);min-height:36px} .bill-lines td:nth-child(3){display:none} } .bill-side{display:flex;flex-direction:column;gap:var(--sp-4)} .bill-go{align-self:flex-start} @media (max-width:640px){.bill-go{align-self:stretch}} .fields{margin:0;display:grid;gap:.45rem} .fields div{display:grid;grid-template-columns:9rem 1fr;gap:var(--sp-3);align-items:baseline;font-size:.93rem} .fields dt{color:var(--ink-500)} .fields dd{margin:0;color:var(--ink-900);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline} @media (max-width:480px){.fields div{grid-template-columns:minmax(0,1fr);gap:0}.fields dt{font-size:var(--t--2)}} .tag{font-size:var(--t--2);font-weight:600;padding:.05rem .45rem;border-radius:var(--r-pill);background:var(--raise);color:var(--ink-500)} .tag-pos{background:var(--pos-soft);color:var(--pos)} .acct{margin-top:var(--sp-4)!important;font-weight:600;font-size:.95rem} .acct-ok{color:var(--pos)} .acct-bad{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--neg-soft);color:var(--neg)} .acct-bad p{margin:0;font-weight:500} .chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)} .chip-in{font-size:var(--t--1);font-weight:600;padding:.2rem .6rem;border-radius:var(--r-pill);background:var(--pos-soft);color:var(--pos)} .catches{display:flex;flex-direction:column;gap:var(--sp-3)} .catch{border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);background:var(--surface);border-left-width:4px} .catch p{margin:0 0 .2rem;max-width:none} .catch-neg{border-left-color:var(--neg);background:var(--neg-soft)} .catch-warn{border-left-color:var(--warn);background:var(--warn-soft)} .catch-pos{border-left-color:var(--pos);background:var(--pos-soft)} .catch-k{font-size:var(--t--2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)} .catch-big{font-family:var(--font-display);font-weight:600;font-size:var(--t-1);color:var(--ink-900);letter-spacing:-.02em} .catch-neg .catch-big{color:var(--neg);font-size:var(--t-2)} .catch-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-2)} .switch{position:relative;display:flex;align-items:center;gap:var(--sp-3);cursor:pointer;font-size:.95rem;color:var(--ink-700);min-height:44px} .switch input{position:absolute;opacity:0;width:1px;height:1px} .switch-ui{width:42px;height:24px;border-radius:12px;background:var(--line-strong);position:relative;flex:0 0 auto;transition:background .2s} .switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s} .switch input:checked + .switch-ui{background:var(--neg)} .switch input:checked + .switch-ui::after{transform:translateX(18px)} .switch input:focus-visible + .switch-ui{outline:2px solid var(--focus);outline-offset:2px} .is-fraud .bill [data-iban]{color:var(--neg);font-weight:700} /* Steps of the bill: hidden until reached. */ [data-state="start"] [data-step="read"], [data-state="start"] [data-step="caught"], [data-state="start"] [data-step="stock"], [data-state="read"] [data-step="stock"], [data-state="read"] [data-step="caught"], [data-state="stock"] [data-step="caught"]{display:none} .home-js [data-bill] [data-step]{animation:stepin .4s ease-out} @keyframes stepin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* S3 till */ .till-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(1.25rem,1rem + 2vw,2.5rem);align-items:center;margin-bottom:var(--sp-5)} @media (max-width:760px){.till-grid{grid-template-columns:minmax(0,1fr)}} .till-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);width:100%;min-height:72px; border:0;border-radius:var(--r-lg);background:var(--ink-900);color:var(--paper);font:600 var(--t-1)/1.2 var(--font-display); padding:var(--sp-4);cursor:pointer;box-shadow:var(--sh-2);transition:transform .08s} .till-btn span:first-child{font-size:1.6rem} .till-btn:active{transform:scale(.98)} .till-sold{text-align:center;margin-top:var(--sp-3)!important;color:var(--ink-500);font-size:var(--t--1);font-variant-numeric:tabular-nums} .till-bars{display:flex;flex-direction:column;gap:var(--sp-3)} .bar{position:relative;display:grid;grid-template-columns:1fr auto;gap:.3rem var(--sp-3);align-items:baseline} .bar-k{font-size:.93rem;color:var(--ink-700)} .bar-v{font-size:.93rem;color:var(--ink-500);font-variant-numeric:tabular-nums} .bar-v b{color:var(--ink-900)} .bar-track{grid-column:1/-1;height:8px;border-radius:4px;background:var(--raise);overflow:hidden} .bar-track i{display:block;height:100%;background:var(--ink-700);border-radius:4px;transition:width .3s ease} .fly{position:absolute;right:5.5rem;top:-.1rem;font-size:var(--t--2);font-weight:700;color:var(--neg);background:var(--neg-soft); padding:.05rem .45rem;border-radius:var(--r-pill);opacity:0;pointer-events:none} .fly.is-on{animation:fly .9s ease-out} @keyframes fly{0%{opacity:0;transform:translateY(-10px)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(6px)}} .bar-cola{font-size:var(--t--1);color:var(--ink-500);padding:.4rem .6rem;border-radius:var(--r-sm);background:var(--raise);animation:stepin .4s ease-out} .till-line{font-size:.97rem;color:var(--ink-800);padding:.45rem 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums} .till-line.warn{color:var(--warn);font-weight:600} .dcard .fine{margin-top:var(--sp-2)} .tillstrip{margin-top:var(--sp-6)} .tillstrip ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} .tillstrip li{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap; padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:.95rem} .tillstrip li b{color:var(--ink-900);font-family:var(--font-display)} .tills-head{font-size:var(--t--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);margin-bottom:var(--sp-3)} @media (max-width:760px){.tillstrip ul{grid-template-columns:minmax(0,1fr)}} /* S4 menu prices */ .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:start} .menu-grid .mmap{grid-column:1/-1} @media (max-width:900px){.menu-grid{grid-template-columns:minmax(0,1fr)}} .worth-head{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center;padding-bottom:var(--sp-4); border-bottom:1px solid var(--line);margin-bottom:var(--sp-4)!important;padding-right:6rem;font-family:var(--font-display);color:var(--ink-900)} .worth-row{display:grid;grid-template-columns:1fr auto;gap:var(--sp-4);margin-bottom:var(--sp-4)} .worth-row p{font-size:.93rem;line-height:1.5} .worth-t{font-weight:600;color:var(--ink-900);font-size:1.02rem!important;margin-bottom:.3rem!important} .worth-v{font-family:var(--font-display);font-weight:600;font-size:var(--t-3);color:var(--pos);letter-spacing:-.03em; text-align:right;line-height:1.1;font-variant-numeric:tabular-nums} .worth-v small{display:block;font-size:var(--t--1);color:var(--ink-500);font-weight:500;letter-spacing:0} @media (max-width:480px){.worth-row{grid-template-columns:minmax(0,1fr)}.worth-v{text-align:left}.worth-head{padding-right:0;padding-top:var(--sp-5)}} .slider-k{font-weight:600;color:var(--ink-900);padding-right:6rem} .slider-body{position:relative;width:170px;height:170px;margin:var(--sp-4) auto} .ring{width:100%;height:100%;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:12} .ring-bg{stroke:var(--raise)} .ring-fg{stroke:var(--neg);stroke-linecap:round;transition:stroke-dashoffset .2s ease,stroke .2s} [data-state="warn"] .ring-fg{stroke:var(--warn)} [data-state="pos"] .ring-fg{stroke:var(--pos)} .ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ring-mid b{font-family:var(--font-display);font-size:var(--t-3);color:var(--ink-900);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .ring-mid span{font-size:var(--t--2);color:var(--ink-500);max-width:108px;text-align:center;line-height:1.25} .slider-price{text-align:center;font-family:var(--font-display);font-size:var(--t-2);color:var(--ink-900);margin-bottom:var(--sp-2)!important} .slider input[type=range],.calc2 input[type=range]{width:100%;height:44px;accent-color:var(--accent)} .slider-mark{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--t--2);color:var(--ink-500)} .slider-money{margin-top:var(--sp-4)!important;text-align:center;font-family:var(--font-display);font-weight:600; font-size:var(--t-2);color:var(--pos);font-variant-numeric:tabular-nums} .mmap-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3); padding:var(--sp-3) 0 var(--sp-6) var(--sp-6);margin-bottom:var(--sp-3)} .mmap-y,.mmap-x{position:absolute;font-size:var(--t--2);font-weight:600;color:var(--ink-400);letter-spacing:.04em;text-transform:uppercase} .mmap-y{left:0;top:50%;transform:translate(-42%,-50%) rotate(-90deg);white-space:nowrap} .mmap-x{right:0;bottom:var(--sp-2)} .mmap-dot{border:1px solid var(--line);border-radius:var(--r-md);background:var(--raise);padding:var(--sp-3) var(--sp-4)} .mmap-dot summary{cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);font-weight:600;color:var(--ink-900);min-height:32px;list-style:none} .mmap-dot summary::-webkit-details-marker{display:none} .mmap-head{margin-left:auto;font-size:var(--t--2);font-weight:600;color:var(--ink-500);white-space:nowrap} .dot-mark{width:12px;height:12px;border-radius:50%;background:var(--ink-400);flex:0 0 auto} .q-tr .dot-mark{background:var(--pos)} .q-br .dot-mark{background:var(--neg)} .q-tl .dot-mark{background:var(--accent)} .q-bl .dot-mark{background:var(--ink-300)} .mmap-dot p{margin-top:var(--sp-2)!important;font-size:.92rem;color:var(--ink-600);line-height:1.5} .mmap-dot[open]{background:var(--surface);box-shadow:var(--sh-2)} @media (max-width:640px){.mmap-grid{grid-template-columns:minmax(0,1fr);padding:var(--sp-5) 0 0}.mmap-y,.mmap-x{display:none}.mmap-dot summary{min-height:44px}} .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-6)} .cta-row p{margin:0} /* S5 calculator on the dark band */ .section-ink .eyebrow{color:var(--on-panel-muted)} .presets{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)} .chip-btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-700);border-radius:var(--r-pill); padding:.45rem .9rem;font:550 var(--t--1)/1.2 var(--font-text);cursor:pointer;min-height:40px} .chip-btn.is-on{background:var(--ink-900);color:var(--paper);border-color:var(--ink-900)} .section-ink .chip-btn{background:transparent;color:var(--on-panel);border-color:rgba(255,255,255,.3)} .section-ink .chip-btn.is-on{background:#fff;color:#0a0b0d;border-color:#fff} .calc2{background:var(--surface);color:var(--ink-700);border-radius:var(--r-xl);padding:clamp(1.25rem,1rem + 2vw,2.25rem); display:flex;flex-direction:column;gap:var(--sp-4);box-shadow:0 30px 80px -30px rgba(0,0,0,.6)} .calc2 .fine{margin:0} .calc-field{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--t--1);font-weight:600;color:var(--ink-600)} .calc-field > span:first-child{display:flex;justify-content:space-between;gap:var(--sp-3)} .calc-field b{color:var(--ink-900);font-variant-numeric:tabular-nums} .calc-field small{font-weight:400;color:var(--ink-500)} .calc-input{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--paper);padding-right:var(--sp-4)} .calc-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .calc-input input{flex:1;min-width:0;border:0;background:transparent;outline:0;color:var(--ink-900); font:600 var(--t-2)/1.2 var(--font-display);padding:.6rem var(--sp-4);font-variant-numeric:tabular-nums} .calc-input b{color:var(--ink-500)} .fc-bar{position:relative;display:flex;height:10px;border-radius:5px;background:var(--raise);margin:var(--sp-2) 0 var(--sp-4)} .fc-ok{display:block;width:33.3%;background:var(--pos);border-radius:5px 0 0 5px} .fc-over{display:block;background:var(--neg);transition:width .2s} .fc-bar em{position:absolute;left:33.3%;top:12px;transform:translateX(-50%);font-style:normal;font-size:var(--t--2);color:var(--ink-500)} .calc2-out{padding-top:var(--sp-4);border-top:1px solid var(--line)} .calc2-out p{margin:0} .calc2-big{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.3rem + 2vw,2.6rem);letter-spacing:-.03em;color:var(--ink-900);line-height:1.1;font-variant-numeric:tabular-nums} .calc2-year{color:var(--ink-500);margin-top:.3rem!important} .calc2-year span{color:var(--ink-900);font-weight:600} .calc2-over{margin-top:var(--sp-3)!important;color:var(--neg);font-weight:600} .calc2-ok{margin-top:var(--sp-3)!important;color:var(--pos);font-weight:600} /* S6 moments */ .moments3{align-items:start} .m3 > summary{list-style:none;cursor:default;display:flex;flex-direction:column;gap:var(--sp-2);padding-right:5.5rem} .m3 > summary::-webkit-details-marker{display:none} .m3 > summary h3{font-size:var(--t-1);margin:0} .m3 > summary .plan-tag{margin-top:0;align-self:flex-start} .m3 > .muted{margin:var(--sp-3) 0!important;font-size:.93rem} @media (max-width:640px){ .m3 > summary{cursor:pointer;padding-right:1.5rem;padding-top:var(--sp-5)} .m3 > summary::after{content:"+";position:absolute;right:var(--sp-4);bottom:var(--sp-4);font-size:1.3rem;color:var(--ink-400)} .m3[open] > summary::after{content:"\2212"} } .tips{margin-top:var(--sp-3)} .lane{display:grid;grid-template-columns:3.5rem 1fr auto;gap:var(--sp-3);align-items:center;padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.93rem} .lane span{color:var(--ink-500);font-size:var(--t--1)} .lane em{font-style:normal;font-weight:700;color:var(--pos);font-variant-numeric:tabular-nums} .coins{list-style:none;padding:0;margin:var(--sp-3) 0;display:flex;flex-direction:column;gap:.3rem;font-size:var(--t--1);color:var(--ink-600)} .is-running .coins li{opacity:.3;transition:opacity .3s} .is-running .coins li.is-in{opacity:1} .tips-sum{font-weight:600;color:var(--pos);font-size:.93rem;margin-bottom:var(--sp-3)!important} .mail{margin-top:var(--sp-3);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);font-size:.93rem;display:flex;flex-direction:column;gap:.35rem} .mail-removed{margin-top:var(--sp-2);padding-left:var(--sp-3);border-left:3px solid var(--neg)} .mail-removed p{color:var(--ink-600)} .fmt-tabs{display:flex;gap:var(--sp-2);overflow-x:auto;margin:var(--sp-3) 0;padding-bottom:2px;scrollbar-width:thin} .fmt-tabs .chip-btn{flex:0 0 auto} .tree{list-style:none;padding:0;margin:0 0 var(--sp-3);font-family:var(--font-mono);font-size:.82rem;color:var(--ink-700);display:flex;flex-direction:column;gap:.25rem} .tree details summary{cursor:pointer;color:var(--accent)} .tree details p{font-family:var(--font-text);font-size:var(--t--1);color:var(--ink-500);margin:.2rem 0 0 1.4rem} /* S7 first weeks */ .weeks{max-width:46rem;margin-top:0} .weeks li.is-key{background:var(--warn-soft);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3) var(--sp-3) 3rem} .weeks li.is-key::before{left:.8rem;top:calc(var(--sp-3) + .1em)} .weeks .pill{display:table;margin:.35rem 0 .1rem;white-space:normal} /* S8 prices, trust, close */ .prices3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);align-items:stretch} @media (max-width:820px){.prices3{grid-template-columns:minmax(0,1fr)}.p3-pop{order:-1;margin-top:var(--sp-3)}} .p3{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);background:var(--surface)} .p3 p{margin:0} .p3-pop{border:2px solid var(--accent);box-shadow:var(--sh-2)} .p3-pop .pill{position:absolute;top:-.8rem;left:var(--sp-5)} .p3-name{font-weight:700;color:var(--ink-900);letter-spacing:.02em} .p3-amt{font-family:var(--font-display);font-size:var(--t-4);font-weight:600;color:var(--ink-900);letter-spacing:-.03em;margin:var(--sp-2) 0!important} .p3-amt small{font-size:var(--t--1);font-family:var(--font-text);font-weight:500;color:var(--ink-500);letter-spacing:0} .p3 .muted{font-size:.93rem;line-height:1.5} .trust3{margin-top:var(--sp-7)} .trust3 > div{border-top:2px solid var(--ink-900);padding-top:var(--sp-4)} .trust3 h3{font-size:var(--t-1);margin-bottom:var(--sp-2)} .trust3 p{color:var(--ink-500);font-size:.95rem;margin:0} .cta-echo{font-family:var(--font-display);font-size:var(--t-2);color:#fff;margin-top:var(--sp-4)!important} .cta-terms{color:var(--on-panel-muted);margin:var(--sp-4) auto 0!important} @media (prefers-reduced-motion: reduce){ .chain .chain-row,[data-step],.bar-track i,.fly,.ring-fg,.fc-over,.bar-cola,.bill-scan{animation:none!important;transition:none!important} } /* S4b AI: how it works, then try it. Three steps left to right — the figures, the AI reading them, the answers — with dots travelling along the wires between them. */ .ai-flow{display:grid;grid-template-columns:1fr 64px 1fr 64px 1fr;align-items:center;gap:0;margin-bottom:clamp(2.5rem,2rem + 2vw,4rem)} .ai-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2); padding:var(--sp-5);height:100%;display:flex;flex-direction:column;gap:var(--sp-3)} .ai-step p{margin:0} .ai-step-n{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:600;font-size:var(--t-1);color:var(--ink-900)} .ai-step-n span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:var(--t--1);flex:0 0 auto} .ai-step-t{font-size:.93rem;color:var(--ink-500);line-height:1.5} .ai-src{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)} .ai-src li{display:flex;align-items:center;gap:var(--sp-2);padding:.45rem .7rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raise);font-size:.93rem;color:var(--ink-800)} .ai-src i{font-style:normal} .ai-step-core{align-items:center;text-align:center} .ai-step-core .ai-step-n{justify-content:center} .ai-core{position:relative;width:112px;height:112px;margin:var(--sp-3) auto;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 35% 30%,var(--accent),var(--accent-ink));color:#fff; font:700 2rem/1 var(--font-display);letter-spacing:-.03em;box-shadow:0 0 0 10px var(--accent-soft),0 18px 40px -12px var(--accent)} .ai-core::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--accent-line);animation:aipulse 2.4s ease-out infinite} @keyframes aipulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}} .ai-wire{position:relative;height:2px;background:var(--line-strong);margin:0 6px} .ai-wire i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:aiwire 1.8s linear infinite} .ai-wire i:nth-child(2){animation-delay:.6s} .ai-wire i:nth-child(3){animation-delay:1.2s} @keyframes aiwire{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}} .ai-out{display:grid;gap:var(--sp-2)} .ai-out-card{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;padding:.55rem .75rem;border-radius:var(--r-md);background:var(--raise);border:1px solid var(--line)} .ai-out-card small{flex:1 1 100%;font-size:var(--t--2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)} .ai-out-card b{font-family:var(--font-display);font-size:1.08rem;color:var(--ink-900);letter-spacing:-.01em} .ai-out-card b.pos{color:var(--pos)} .ai-out-card span{font-size:var(--t--1);color:var(--ink-500)} .pos{color:var(--pos)} @media (max-width:980px){ .ai-flow{grid-template-columns:minmax(0,1fr);gap:0} .ai-wire{width:2px;height:40px;margin:6px auto} .ai-wire i{left:-3px;top:0;animation-name:aiwirev} } @keyframes aiwirev{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 8px);opacity:0}} .ai-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:start} @media (max-width:900px){.ai-grid{grid-template-columns:minmax(0,1fr)}} .ai-try{font-size:var(--t-2);margin-bottom:var(--sp-4)} .ai-points{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-4)} .ai-points li{padding-left:var(--sp-5);position:relative;color:var(--ink-600);line-height:1.5} .ai-points li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--accent)} .ai-points b{display:block;color:var(--ink-900)} .ai-chat{display:flex;flex-direction:column;gap:var(--sp-4)} .ai-head{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--t--2);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);padding-right:7rem} .ai-dot{width:9px;height:9px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px var(--pos-soft)} .ai-log{display:flex;flex-direction:column;gap:var(--sp-3);min-height:12rem} .ai-msg{max-width:88%;padding:.7rem .95rem;border-radius:16px;line-height:1.5;font-size:.95rem;margin:0} .ai-me{align-self:flex-end;background:var(--ink-900);color:var(--paper);border-bottom-right-radius:4px} .ai-bot{align-self:flex-start;background:var(--accent-soft);color:var(--ink-800);border:1px solid var(--accent-line);border-bottom-left-radius:4px} .ai-bot.is-typing:empty::after{content:"• • •";letter-spacing:.2em;color:var(--accent);animation:aitype 1s steps(3) infinite} @keyframes aitype{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}} .ai-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)} .ai-chips .chip-btn{text-align:left;white-space:normal} .ai-form{display:flex;gap:var(--sp-2)} .ai-form input{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--paper);color:var(--ink-900);padding:.6rem .8rem;font:inherit} .ai-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .ai-chat .plan-tag{margin-top:0;align-self:flex-start} @media (prefers-reduced-motion: reduce){.ai-core::after,.ai-wire i,.ai-bot.is-typing:empty::after{animation:none!important}.ai-wire i{display:none}} /* S2 bill, as a modern invoice rather than a till receipt. */ .bill.inv{transform:none;font-family:var(--font-text);font-size:.93rem;background:var(--surface);color:var(--ink-800); border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:0;overflow:hidden} .inv-top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding:var(--sp-5); background:linear-gradient(135deg,var(--accent-soft),var(--surface));border-bottom:1px solid var(--line)} .inv-from{display:flex;align-items:center;gap:var(--sp-3)} .inv-from b{display:block;color:var(--ink-900);font-family:var(--font-display);font-size:1.05rem} .inv-from small,.inv-title small{display:block;font-size:var(--t--2);color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;font-weight:600} .inv-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--ink-900);color:var(--paper); font:700 .85rem/1 var(--font-display);letter-spacing:.02em;flex:0 0 auto} .inv-title{text-align:right} .inv-title b{font-family:var(--font-display);font-size:1.05rem;color:var(--ink-900);font-variant-numeric:tabular-nums} .inv-lines{width:100%;border-collapse:collapse;margin:0} .inv-lines th{font-size:var(--t--2);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400); text-align:left;padding:var(--sp-3) var(--sp-5) var(--sp-2)} .inv-lines td{padding:.6rem var(--sp-5);border-top:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap} .inv-lines td:first-child{white-space:normal;color:var(--ink-900);font-weight:550} .inv-lines th:not(:first-child),.inv-lines td:not(:first-child){text-align:right;padding-left:var(--sp-2)} .inv-lines td:not(:first-child){color:var(--ink-600)} .inv-lines td:last-child{color:var(--ink-900);font-weight:600} .inv .bill-all{padding:0 var(--sp-5)} .inv .bill-all .inv-lines td{padding-left:0;padding-right:0} .inv-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--sp-4) var(--sp-5);padding:var(--sp-5); border-top:1px solid var(--line);background:var(--raise)} .inv-pay{display:flex;align-items:center;gap:var(--sp-3)} .inv-pay p{margin:0;display:flex;flex-direction:column;gap:.1rem;font-variant-numeric:tabular-nums} .inv-pay small{font-size:var(--t--2);color:var(--ink-500)} .inv-pay span{font-weight:600;color:var(--ink-900);font-size:.88rem;white-space:nowrap} .inv-qr{width:72px;height:72px;border-radius:6px;flex:0 0 auto;box-shadow:0 0 0 1px var(--line)} .inv-sum{margin:0;display:grid;gap:.25rem;flex:1 1 12rem;min-width:0} .inv-sum div{display:flex;justify-content:space-between;gap:var(--sp-4);font-size:.88rem;color:var(--ink-600);font-variant-numeric:tabular-nums} .inv-sum dd{margin:0;white-space:nowrap} .inv-sum .inv-total{margin-top:.3rem;padding-top:.45rem;border-top:1px solid var(--line-strong);color:var(--ink-900);font-weight:700;font-size:1.05rem} .is-fraud .inv [data-iban]{color:var(--neg)} @media (max-width:640px){ .inv-top,.inv-bottom{padding:var(--sp-4)} .inv-lines th,.inv-lines td{padding-left:var(--sp-4);padding-right:var(--sp-4)} .inv-lines th:nth-child(3),.inv-lines td:nth-child(3){display:none} .inv .bill-all{padding:var(--sp-2) var(--sp-4)} .inv-bottom{flex-direction:column;align-items:stretch} .inv-sum{min-width:0} .inv-lines .bill-more{display:none} } /* S6, redrawn: the evening as a timeline, the morning email as an email, the pack as a ZIP. */ .tl{margin-top:var(--sp-4)} .tl p{margin:0} .tl-ruler{position:relative;height:18px;margin:0 3.4rem 0 3.4rem;font-size:var(--t--2);color:var(--ink-400);font-variant-numeric:tabular-nums} .tl-ruler span{position:absolute;top:0;transform:translateX(-50%)} .tl-ruler span:first-child{transform:none} .tl-lane{display:grid;grid-template-columns:3rem 1fr 3.4rem;align-items:center;gap:.4rem;height:40px} .tl-lane b{font-size:.9rem;color:var(--ink-900)} .tl-lane em{font-style:normal;font-weight:700;color:var(--pos);text-align:right;font-size:.88rem;font-variant-numeric:tabular-nums;white-space:nowrap} .tl-track{position:relative;height:100%;border-bottom:1px dashed var(--line)} .tl-shift{position:absolute;top:11px;height:16px;border-radius:8px;opacity:.9} .tl-shift.s1{background:var(--accent-soft);border:1px solid var(--accent-line)} .tl-shift.s2{background:var(--pos-soft);border:1px solid color-mix(in srgb,var(--pos) 30%,transparent)} .tl-shift.s3{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)} .tl-pool b{color:var(--ink-500);font-weight:600;font-size:.72rem;line-height:1.1} .tl-pool em{color:var(--ink-500);font-weight:600;font-size:.78rem} .coin{position:absolute;top:8px;transform:translateX(-50%);min-width:22px;height:22px;padding:0 5px;border-radius:11px; display:grid;place-items:center;background:#f5b700;color:#3a2a00;font:700 .68rem/1 var(--font-text); box-shadow:0 2px 6px rgba(160,110,0,.35);font-variant-numeric:tabular-nums} .is-running .coin{opacity:0;transform:translate(-50%,-14px)} .is-running .coin.is-in{opacity:1;transform:translate(-50%,0);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)} .tl-note{font-size:var(--t--2);color:var(--ink-400);margin:.4rem 0 .6rem 3.4rem!important} .tl .tips-sum{margin:var(--sp-2) 0 var(--sp-3)!important} .mail2{margin-top:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);overflow:hidden} .mail2 p{margin:0} .mail2-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);background:var(--surface)} .mail2-head b{display:block;font-size:.92rem;color:var(--ink-900)} .mail2-head small{font-size:var(--t--2);color:var(--ink-500)} .mail2-logo{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--ink-900);color:var(--paper);font:700 .9rem/1 var(--font-display)} .mail2-subj{padding:var(--sp-4) var(--sp-4) var(--sp-3);font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink-900);line-height:1.35} .mail2-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);padding:0 var(--sp-4)} .mail2-kpis div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.5rem .7rem} .mail2-kpis small{display:block;font-size:var(--t--2);color:var(--ink-500)} .mail2-kpis b{font-family:var(--font-display);font-size:1.25rem;color:var(--ink-900);font-variant-numeric:tabular-nums} .mail2-warn{margin:var(--sp-3) var(--sp-4) 0!important;padding:.45rem .7rem;border-radius:var(--r-md);background:var(--warn-soft);color:var(--warn);font-size:.88rem;font-weight:600} .mail2-removed{margin:var(--sp-3) var(--sp-4) var(--sp-4);padding:.55rem .75rem;border-radius:var(--r-md);background:var(--neg-soft);font-size:.88rem;color:var(--ink-700)} .mail2-removed p:first-child{color:var(--neg);margin-bottom:.15rem} .zip{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)} .zip-ico{width:42px;height:48px;border-radius:6px 14px 6px 6px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(160deg,#f5b700,#e08a00);color:#fff;font:800 .72rem/1 var(--font-display);letter-spacing:.06em} .zip b{display:block;font-size:.88rem;color:var(--ink-900);word-break:break-all} .zip small{font-size:var(--t--2);color:var(--ink-500)} .fmt-seg{display:flex;flex-wrap:nowrap;gap:2px;margin:var(--sp-3) 0;padding:4px;border-radius:var(--r-md);background:var(--raise)} .fmt-seg button{flex:1 1 auto;border:0;background:transparent;border-radius:7px;padding:.4rem .3rem;font:600 .74rem/1.2 var(--font-text);white-space:nowrap;color:var(--ink-600);cursor:pointer;min-height:34px} .fmt-seg button.is-on{background:var(--surface);color:var(--ink-900);box-shadow:var(--sh-1)} .files{list-style:none;padding:0;margin:0 0 var(--sp-3);display:flex;flex-direction:column} .files li{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);padding:.4rem 0;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:.8rem;color:var(--ink-700)} .files li > i{font-style:normal;font-family:var(--font-text);font-weight:700;color:var(--pos)} .files li.warn > i{color:var(--warn)} .files details summary{cursor:pointer;color:var(--accent);list-style:none} .files details p{font-family:var(--font-text);font-size:var(--t--1);color:var(--ink-500);margin:.2rem 0 0}