/* Tankroo website · shared styles (all pages) */
/* Self-hosted fonts (SIL Open Font License 1.1, texts in ../fonts/) */
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;src:url('../fonts/figtree-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url('../fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2')}
body{margin:0;background:#FFF7EE}
.tk *{box-sizing:border-box}
.tk a{color:var(--ember);text-underline-offset:3px}
.tk a:hover{color:var(--link-hover)}
.tk :focus-visible{outline:2px solid var(--switch);outline-offset:3px;border-radius:8px}
.tk h1,.tk h2,.tk h3,.tk .display{font-family:'Bricolage Grotesque','Figtree',ui-sans-serif,system-ui,sans-serif;margin:0;letter-spacing:-0.02em;text-wrap:balance}
.tk p{margin:0;text-wrap:pretty}
.tk .wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.tk .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ember)}
.tk .eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.tk .btn:hover{transform:translateY(-2px)}
.tk a.btn-primary:hover{background:var(--hover);color:var(--ink)}
.tk .card{background:#FFFFFF;border:1px solid var(--line);border-radius:24px}
.tk .nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:10px 4px;position:relative}
.tk .nav-links a::after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:2px;border-radius:2px;background:var(--sunset);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--out)}
.tk .foot a{color:#F4E4D2;text-decoration:none;font-size:15px}
.tk .foot a:hover{color:#FFFFFF;text-decoration:underline}
.tk .rise-1{animation:rise .9s var(--out) .05s both}
.tk .rise-2{animation:rise .9s var(--out) .15s both}
.tk .rise-3{animation:rise .9s var(--out) .25s both}
.tk.still *,.tk.still *::before,.tk.still *::after{animation:none !important;transition:none !important}

/* launch state: <html data-launch="live"> shows store buttons, "soon" shows the notify form */
.launch-live,.launch-soon{display:contents}
html[data-launch="soon"] .launch-live{display:none}
html:not([data-launch="soon"]) .launch-soon{display:none}

/* placeholder: keep in-page targets (#download, #enquire, ...) clear of the sticky 76px header */
html{scroll-padding-top:96px}
/* placeholder: brand-kit logo images */
.tk img{max-width:100%;height:auto;display:block}