@font-face {
font-family: "Kufam";
font-style: normal;
font-weight: 500 900;
font-display: swap;
src: url("/fonts/kufam-arabic.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: "Kufam";
font-style: normal;
font-weight: 500 900;
font-display: swap;
src: url("/fonts/kufam-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/plex-arabic-400.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/plex-arabic-700.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/plex-latin-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/plex-latin-700.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--paper: #f5f1e8;
--paper-2: #ece6d9;
--sheet: #fffdf8;
--ink: #121212;
--ink-2: #34312c;
--ink-3: #5f5a52;
--rule: #d9d1c1;
--rule-2: #b9ae99;
--hl: #ffe14d;
--hl-2: #f5cf1c;
--gain: #0b7a46;
--on-ink: #f5f1e8;
--on-ink-2: #bdb6a8;
--f-d: "Kufam", "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif;
--f-b: "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
--fs-0: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
--fs-1: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
--fs-2: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
--fs-3: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4rem);
--fs-4: clamp(1.625rem, 1.25rem + 1.7vw, 2.5rem);
--fs-5: clamp(2.25rem, 1.35rem + 4.1vw, 4.5rem);
--r-1: 6px;
--r-2: 10px;
--r-3: 16px;
--gut: clamp(16px, 4vw, 40px);
--max: 1180px;
--mast-h: 64px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--mast-h) + 16px);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 400 var(--fs-2) / 1.8 var(--f-b);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
text-decoration-thickness: 1.5px;
text-underline-offset: 0.3em;
}
a:hover {
text-decoration-color: var(--hl-2);
}
button,
input {
font: inherit;
color: inherit;
}
bdi {
unicode-bidi: isolate;
}
:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
border-radius: 2px;
}
::selection {
background: var(--hl);
color: var(--ink);
}
.sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.ico {
width: 1.4em;
height: 1.4em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ico--s {
width: 1.15em;
height: 1.15em;
}
.vh {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.skip {
position: absolute;
inset-inline-start: 12px;
top: -60px;
z-index: 100;
background: var(--ink);
color: var(--paper);
padding: 10px 16px;
border-radius: var(--r-2);
text-decoration: none;
}
.skip:focus {
top: 12px;
}
.wrap {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gut);
}
.narrow > * {
max-width: 760px;
}
.h1,
.h2,
.h3 {
font-family: var(--f-d);
color: var(--ink);
text-wrap: balance;
}
.h1 {
font-size: var(--fs-5);
font-weight: 900;
line-height: 1.32;
letter-spacing: -0.01em;
}
.h1__rest {
display: block;
font-weight: 700;
font-size: 0.62em;
line-height: 1.5;
margin-top: 0.2em;
color: var(--ink-2);
}
.h2 {
font-size: var(--fs-4);
font-weight: 800;
line-height: 1.45;
}
.h3 {
font-size: var(--fs-3);
font-weight: 700;
line-height: 1.5;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--fs-0);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ink-2);
margin-bottom: 18px;
}
.kicker::before {
content: "";
width: 22px;
height: 2px;
background: var(--ink);
}
.lede {
font-size: var(--fs-3);
line-height: 1.85;
color: var(--ink-2);
max-width: 40em;
margin-top: 22px;
}
.prose > * + * {
margin-top: 1.1em;
}
.prose .h2 {
margin-top: 1.8em;
}
.prose .h2:first-child {
margin-top: 0;
}
.prose p {
max-width: 44em;
}
.prose a,
.sheet__sub a,
.plans__note a {
font-weight: 700;
}
mark,
.hl {
color: inherit;
background: none;
}
.hl {
background-image: linear-gradient(var(--hl), var(--hl));
background-repeat: no-repeat;
background-position: 100% 88%;
background-size: 100% 0.62em;
padding-inline: 0.12em;
margin-inline: -0.12em;
border-radius: 0.12em 0.4em 0.18em 0.5em / 0.5em 0.2em 0.4em 0.16em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.act {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 10px 20px;
border: 1.5px solid var(--ink);
border-radius: var(--r-2);
font-family: var(--f-b);
font-weight: 700;
font-size: var(--fs-1);
line-height: 1.3;
text-decoration: none;
cursor: pointer;
background: transparent;
color: var(--ink);
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s;
}
.act:hover {
transform: translate(2px, -2px);
box-shadow: -3px 3px 0 var(--ink);
}
.act:active {
transform: none;
box-shadow: none;
}
.act--ink {
background: var(--ink);
color: var(--paper);
}
.act--ink:hover {
box-shadow: -3px 3px 0 var(--hl);
}
.act--hl {
background: var(--hl);
}
.act--s {
min-height: 40px;
padding: 6px 14px;
font-size: var(--fs-0);
}
.stores {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.stores__a {
display: block;
border-radius: 9px;
transition: transform 0.18s var(--ease);
}
.stores__a:hover {
transform: translateY(-2px);
}
.stores img {
height: auto;
}
.stores--l img {
max-height: 54px;
width: auto;
}
.stores--m img {
max-height: 46px;
width: auto;
}
.stores--s img {
max-height: 40px;
width: auto;
}
.storenote,
.noapp {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: var(--fs-0);
line-height: 1.7;
color: var(--ink-3);
}
.storenote .ico,
.noapp .ico {
margin-top: 0.2em;
}
.storenote strong {
color: var(--ink);
}
.noapp {
color: var(--ink-2);
font-weight: 700;
}
.noapp .ico {
stroke: var(--gain);
stroke-width: 2.2;
}
.plan {
display: inline-block;
padding: 1px 9px;
border: 1.5px solid var(--ink);
border-radius: var(--r-1);
font-family: var(--f-b);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.6;
white-space: nowrap;
}
.plan--pro {
background: var(--hl);
}
.brand {
position: relative;
display: inline-block;
font-family: var(--f-d);
font-weight: 900;
font-size: 1.9rem;
line-height: 1;
padding-bottom: 0.2em;
color: var(--ink);
}
.brand__word {
display: block;
}
.brand__dots {
position: absolute;
inset-inline-end: 0.04em;
bottom: -0.04em;
display: flex;
gap: 0.07em;
}
.brand__dots i {
width: 0.19em;
height: 0.19em;
border-radius: 50%;
background: var(--ink);
}
.brand__dots i:first-child {
background: var(--hl);
box-shadow: 0 0 0 1.5px var(--ink);
}
.mast {
position: sticky;
top: 0;
z-index: 40;
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.mast__in {
display: flex;
align-items: center;
gap: 28px;
min-height: var(--mast-h);
}
.mast__brand {
text-decoration: none;
display: block;
padding-top: 4px;
}
.mast__nav {
margin-inline-start: auto;
}
.mast__nav ul {
display: flex;
gap: 4px;
}
.mast__nav a {
display: block;
padding: 8px 12px;
border-radius: var(--r-1);
font-size: var(--fs-1);
font-weight: 700;
text-decoration: none;
color: var(--ink-2);
}
.mast__nav a:hover {
color: var(--ink);
background: var(--paper-2);
}
.mast__nav a[aria-current="page"] {
color: var(--ink);
box-shadow: inset 0 -3px 0 var(--hl);
}
.mast__more {
display: none;
}
.mast__more summary {
list-style: none;
cursor: pointer;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1.5px solid var(--ink);
border-radius: var(--r-2);
}
.mast__more summary::-webkit-details-marker {
display: none;
}
.mast__drawer {
position: absolute;
inset-inline: 0;
top: 100%;
background: var(--paper);
border-bottom: 2px solid var(--ink);
padding: 8px var(--gut) 20px;
}
.mast__drawer a {
display: block;
padding: 14px 0;
border-bottom: 1px solid var(--rule);
font-family: var(--f-d);
font-weight: 700;
font-size: var(--fs-3);
text-decoration: none;
}
.mast__drawer p {
display: flex;
gap: 8px;
align-items: center;
margin-top: 16px;
font-size: var(--fs-0);
color: var(--ink-3);
}
@media (max-width: 960px) {
.mast__nav {
display: none;
}
.mast__get {
margin-inline-start: auto;
}
.mast__more {
display: block;
}
.mast__more[open] summary {
background: var(--ink);
color: var(--paper);
}
}
@media (max-width: 400px) {
.mast__get {
padding-inline: 12px;
}
.mast__get span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.trail ol {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: var(--fs-0);
color: var(--ink-3);
margin-bottom: 26px;
}
.trail li + li::before {
content: "/";
margin-inline-end: 6px;
color: var(--rule-2);
}
.trail a {
text-decoration: none;
font-weight: 700;
color: var(--ink-2);
}
.foot {
border-top: 3px solid var(--ink);
padding-block: 56px 28px;
background: var(--paper);
}
.foot__grid {
display: grid;
grid-template-columns: 1.4fr 0.8fr 1fr;
gap: 40px;
}
.foot__brand {
text-decoration: none;
display: inline-block;
margin-bottom: 16px;
}
.foot__about p {
font-size: var(--fs-1);
color: var(--ink-2);
max-width: 34em;
}
.foot__h {
font-family: var(--f-d);
font-weight: 800;
font-size: var(--fs-2);
margin-bottom: 12px;
}
.foot__nav li + li {
margin-top: 6px;
}
.foot__nav a {
font-size: var(--fs-1);
text-decoration: none;
color: var(--ink-2);
}
.foot__nav a:hover {
color: var(--ink);
text-decoration: underline;
}
.foot__get .stores {
margin-bottom: 12px;
}
.foot__legal {
margin-top: 44px;
padding-top: 20px;
border-top: 1px solid var(--rule);
display: flex;
flex-wrap: wrap;
gap: 6px 24px;
font-size: 0.8125rem;
color: var(--ink-3);
}
@media (max-width: 820px) {
.foot__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.foot {
padding-bottom: 96px;
}
}
.dock {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 50;
padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
background: var(--paper);
border-top: 1.5px solid var(--ink);
transform: translateY(110%);
transition: transform 0.3s var(--ease);
display: none;
}
.dock.is-on {
transform: none;
}
.dock__a {
width: 100%;
}
@media (max-width: 820px) {
.dock {
display: block;
}
}
.qrsheet {
width: min(380px, calc(100vw - 32px));
padding: 28px 28px 24px;
border: 2px solid var(--ink);
border-radius: var(--r-3);
background: var(--sheet);
color: var(--ink);
text-align: center;
box-shadow: -8px 8px 0 var(--ink);
}
.qrsheet::backdrop {
background: rgba(18, 18, 18, 0.55);
}
.qrsheet form {
position: absolute;
inset-inline-end: 12px;
top: 12px;
}
.qrsheet__x {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--r-2);
background: transparent;
cursor: pointer;
}
.qrsheet__x:hover {
background: var(--paper-2);
}
.qrsheet__t {
font-family: var(--f-d);
font-weight: 800;
font-size: var(--fs-3);
}
.qrsheet__qr {
width: 220px;
margin: 18px auto;
padding: 10px;
border: 1.5px solid var(--ink);
border-radius: var(--r-2);
background: #fff;
}
.qrsheet__s {
font-size: var(--fs-0);
color: var(--ink-3);
margin-bottom: 16px;
}
.qrsheet .stores {
justify-content: center;
margin-bottom: 12px;
}
.qrsheet .storenote {
justify-content: center;
}
.qr {
width: 100%;
height: auto;
}
.hero {
padding-top: clamp(36px, 6vw, 80px);
border-bottom: 1px solid var(--rule);
}
.hero__in {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.hero__copy .noapp {
margin-top: 22px;
}
.hero__acts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-top: 26px;
margin-bottom: 14px;
}
.hero__visual {
position: relative;
display: grid;
justify-items: center;
padding-block: 8px 40px;
}
.hero__visual .receipt {
position: absolute;
inset-inline-end: max(-8px, calc(50% - 250px));
bottom: 14px;
width: 210px;
transform: rotate(-4deg);
}
.facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: clamp(28px, 4vw, 52px);
border-top: 1px solid var(--rule);
}
.facts li {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 16px;
font-size: var(--fs-1);
font-weight: 700;
color: var(--ink-2);
}
.facts li + li {
border-inline-start: 1px solid var(--rule);
}
@media (max-width: 960px) {
.hero__in {
grid-template-columns: 1fr;
}
.facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.facts li:nth-child(3) {
border-inline-start: 0;
}
.facts li:nth-child(n + 3) {
border-top: 1px solid var(--rule);
}
}
@media (max-width: 520px) {
.facts li {
padding: 14px 8px;
font-size: var(--fs-0);
}
.hero__visual .receipt {
width: 168px;
inset-inline-end: -4px;
}
}
.phone {
width: 300px;
max-width: 100%;
aspect-ratio: 300 / 610;
flex: none;
}
.phone__body {
position: relative;
height: 100%;
padding: 11px;
border-radius: 50px;
background: var(--ink);
box-shadow: inset 0 0 0 2px #3a3833, -10px 14px 0 rgba(18, 18, 18, 0.08);
}
.phone__island {
position: absolute;
top: 22px;
left: 50%;
width: 92px;
height: 26px;
margin-left: -46px;
border-radius: 20px;
background: #000;
z-index: 3;
}
.phone__bar {
position: absolute;
top: 25px;
inset-inline: 34px;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
z-index: 2;
font: 700 13px/1 var(--f-b);
color: var(--ink);
}
.phone__sig {
display: flex;
align-items: flex-end;
gap: 2px;
height: 11px;
}
.phone__sig i {
width: 3px;
background: currentColor;
border-radius: 1px;
}
.phone__sig i:nth-child(1) { height: 4px; }
.phone__sig i:nth-child(2) { height: 6px; }
.phone__sig i:nth-child(3) { height: 8px; }
.phone__sig i:nth-child(4) { height: 11px; }
.phone__screen {
height: 100%;
overflow: hidden;
border-radius: 40px;
background: #fff;
padding: 62px 14px 18px;
}
.phone--hero {
width: 290px;
}
@media (max-width: 520px) {
.phone--hero {
width: 250px;
}
}
.wscreen__h {
display: flex;
align-items: center;
gap: 6px;
font: 800 22px/1.2 var(--f-d);
margin-bottom: 14px;
padding-inline: 2px;
}
.wscreen__note {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 10px 12px;
border-radius: 12px;
background: #f1f0ed;
font: 700 13px/1.4 var(--f-b);
color: var(--ink);
}
.wscreen__note .ico {
stroke: var(--gain);
stroke-width: 2.4;
}
.wpass {
--p-bg: #3b2416;
--p-fg: #f6e9d7;
--p-mute: #d2b99c;
--p-acc: var(--hl);
border-radius: 14px;
padding: 14px 14px 12px;
background: var(--p-bg);
color: var(--p-fg);
font-family: var(--f-b);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 18px -10px rgba(0, 0, 0, 0.45);
}
.wpass--night {
--p-bg: #17191f;
--p-fg: #ffffff;
--p-mute: #a3a8b4;
}
.wpass--olive {
--p-bg: #3e4a2b;
--p-fg: #f3efdc;
--p-mute: #c4c7a4;
}
.wpass__top {
display: flex;
align-items: center;
gap: 8px;
}
.wpass__glyph {
width: 26px;
height: 26px;
padding: 3px;
border-radius: 7px;
background: var(--p-fg);
stroke: var(--p-bg);
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.wpass__name {
font: 800 15px/1.2 var(--f-d);
}
.wpass__tag {
margin-inline-start: auto;
font-size: 11px;
color: var(--p-mute);
}
.wpass__big {
display: flex;
align-items: baseline;
gap: 8px;
margin: 20px 0 14px;
}
.wpass__big b {
font: 900 46px/1 var(--f-d);
font-variant-numeric: tabular-nums;
transition: color 0.4s;
}
.wpass__big span {
font-size: 14px;
color: var(--p-mute);
}
.wpass__stamps {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
gap: 8px;
margin: 18px 0 14px;
}
.wpass__stamps i {
aspect-ratio: 1;
border-radius: 50%;
border: 1.5px dashed var(--p-mute);
transition: background-color 0.3s, border-color 0.3s;
}
.wpass__stamps i.is-on {
background: var(--p-acc);
border: 1.5px solid var(--p-acc);
}
.wpass__row {
display: flex;
justify-content: space-between;
gap: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wpass__f span {
display: block;
font-size: 10.5px;
color: var(--p-mute);
}
.wpass__f b {
font-size: 13px;
font-weight: 700;
}
.wpass__foot {
display: grid;
place-items: center;
margin-top: 14px;
}
.wpass__code {
width: 92px;
border-radius: 6px;
}
.wpass.is-bump .wpass__big b {
color: var(--p-acc);
}
.receipt {
width: 240px;
filter: drop-shadow(-6px 8px 0 rgba(18, 18, 18, 0.1));
}
.receipt__edge {
display: block;
width: 100%;
height: 8px;
fill: var(--sheet);
}
.receipt__edge--t {
transform: scaleY(1);
}
.receipt__edge--b {
transform: scaleY(-1);
}
.receipt__paper {
background: var(--sheet);
padding: 10px 16px 12px;
font: 400 12.5px/1.6 var(--f-b);
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.receipt__store {
text-align: center;
font: 800 14px/1.4 var(--f-d);
color: var(--ink);
}
.receipt__meta {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--ink-3);
padding-bottom: 8px;
border-bottom: 1px dashed var(--rule-2);
}
.receipt__items {
padding-block: 8px;
border-bottom: 1px dashed var(--rule-2);
}
.receipt__items li {
display: flex;
justify-content: space-between;
}
.receipt__items li.is-new {
animation: print 0.5s var(--ease) both;
}
.receipt__total {
display: flex;
justify-content: space-between;
padding-top: 8px;
font-weight: 700;
color: var(--ink);
}
.receipt__earn {
margin-top: 10px;
text-align: center;
}
.receipt__earn span {
display: inline-block;
padding: 2px 12px;
font: 800 15px/1.6 var(--f-d);
color: var(--ink);
background: var(--hl);
border-radius: 4px 10px 5px 12px / 10px 5px 10px 4px;
}
.sheet {
padding-block: clamp(56px, 8vw, 104px);
}
.sheet--rule {
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: var(--paper-2);
}
.sheet__grid {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(28px, 5vw, 80px);
align-items: start;
}
.sheet__grid > .sheet__head {
position: sticky;
top: calc(var(--mast-h) + 24px);
margin-bottom: 0;
}
.sheet__head {
margin-bottom: clamp(28px, 4vw, 48px);
max-width: 46em;
}
.sheet__no {
display: inline-block;
font: 900 clamp(2.6rem, 2rem + 2.4vw, 4rem) / 1.1 var(--f-d);
color: var(--ink);
padding-inline: 0.14em;
margin-bottom: 14px;
background-image: linear-gradient(var(--hl), var(--hl));
background-repeat: no-repeat;
background-position: 0 88%;
background-size: 100% 0.34em;
}
.sheet__sub {
margin-top: 14px;
font-size: var(--fs-2);
color: var(--ink-2);
max-width: 40em;
}
@media (max-width: 900px) {
.sheet__grid {
grid-template-columns: 1fr;
}
.sheet__grid > .sheet__head {
position: static;
}
}
.define {
font-size: var(--fs-3);
line-height: 1.9;
color: var(--ink);
padding-inline-start: 18px;
border-inline-start: 4px solid var(--hl);
}
.rails {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 2px solid var(--ink);
}
.rail {
padding: 28px 0 0;
}
.rail + .rail {
border-inline-start: 1px solid var(--rule-2);
padding-inline-start: clamp(20px, 4vw, 48px);
}
.rail:first-child {
padding-inline-end: clamp(20px, 4vw, 48px);
}
.rail__h {
font: 800 var(--fs-3) / 1.4 var(--f-d);
margin-bottom: 22px;
}
.rail ol {
counter-reset: step;
}
.rail li {
counter-increment: step;
position: relative;
padding-inline-start: 58px;
padding-bottom: 24px;
}
.rail li::before {
content: counter(step, arabic-indic);
position: absolute;
inset-inline-start: 0;
top: 0;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
font: 800 18px/1 var(--f-d);
}
.rail + .rail li::before {
background: var(--paper);
color: var(--ink);
box-shadow: inset 0 0 0 1.5px var(--ink);
}
.rail li:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-start: 19px;
top: 46px;
bottom: 6px;
border-inline-start: 1.5px dashed var(--rule-2);
}
.rail b {
display: block;
font: 700 var(--fs-2) / 1.5 var(--f-d);
}
.rail span {
display: block;
color: var(--ink-2);
font-size: var(--fs-1);
margin-top: 4px;
}
@media (max-width: 760px) {
.rails {
grid-template-columns: 1fr;
}
.rail + .rail {
border-inline-start: 0;
border-top: 1px solid var(--rule-2);
padding-inline-start: 0;
}
.rail:first-child {
padding-inline-end: 0;
}
}
.sheet--ink {
background: var(--ink);
color: var(--on-ink);
}
.sheet--ink .h2 {
color: var(--on-ink);
}
.sheet--ink .sheet__no {
color: var(--hl);
background-image: none;
}
.sheet--ink .sheet__sub {
color: var(--on-ink-2);
}
.demo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(28px, 5vw, 72px);
align-items: start;
}
.demo__rules {
border: 0;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.demo__rules legend {
font: 800 var(--fs-2) / 1.4 var(--f-d);
margin-bottom: 14px;
padding: 0;
}
.demo__rules label {
position: relative;
cursor: pointer;
}
.demo__rules input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}
.demo__rules span {
display: flex;
align-items: center;
min-height: 52px;
padding: 10px 14px;
border: 1.5px solid #4a4741;
border-radius: var(--r-2);
font-weight: 700;
font-size: var(--fs-1);
line-height: 1.4;
transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.demo__rules label:hover span {
border-color: var(--on-ink-2);
}
.demo__rules input:checked + span {
background: var(--hl);
border-color: var(--hl);
color: var(--ink);
}
.demo__rules input:focus-visible + span {
outline: 3px solid var(--hl);
outline-offset: 3px;
}
.demo__bill {
display: block;
margin-top: 22px;
}
.demo__bill span {
display: block;
font: 800 var(--fs-2) / 1.4 var(--f-d);
margin-bottom: 10px;
}
.demo__bill input {
width: 100%;
max-width: 260px;
min-height: 56px;
padding: 8px 16px;
border: 1.5px solid var(--on-ink-2);
border-radius: var(--r-2);
background: transparent;
color: var(--on-ink);
font: 800 26px/1 var(--f-d);
font-variant-numeric: tabular-nums;
}
.demo__bill input:focus {
outline: none;
border-color: var(--hl);
box-shadow: 0 0 0 3px rgba(255, 225, 77, 0.35);
}
.demo__bill input:disabled {
opacity: 0.4;
}
.demo__go {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.sheet--ink .act--ink {
background: var(--hl);
border-color: var(--hl);
color: var(--ink);
}
.sheet--ink .act--ink:hover {
box-shadow: -3px 3px 0 var(--on-ink);
}
.sheet--ink .act--line {
border-color: var(--on-ink-2);
color: var(--on-ink);
}
.sheet--ink .act--line:hover {
box-shadow: -3px 3px 0 var(--on-ink-2);
}
.demo__fine {
margin-top: 16px;
font-size: var(--fs-0);
color: var(--on-ink-2);
}
.demo__out {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.demo__out .receipt {
width: 100%;
transform: rotate(2deg);
filter: none;
}
.demo__pass {
max-width: 320px;
}
@media (scripting: none) {
.demo__ctl {
display: none;
}
}
@media (max-width: 960px) {
.demo {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.demo__out {
grid-template-columns: 1fr;
}
.demo__out .receipt {
max-width: 260px;
transform: none;
}
}
.ledger {
border-top: 2px solid var(--ink);
}
.ledger__row {
display: grid;
grid-template-columns: 11em minmax(0, 1fr);
gap: 18px;
padding: 18px 0;
border-bottom: 1px solid var(--rule);
}
.ledger dt {
font: 800 var(--fs-2) / 1.5 var(--f-d);
}
.ledger dd {
color: var(--ink-2);
}
@media (max-width: 560px) {
.ledger__row {
grid-template-columns: 1fr;
gap: 4px;
}
}
.prose--duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 36px;
}
.prose--duo > * + * {
margin-top: 0;
}
.prose--duo .h3 {
margin-bottom: 8px;
}
@media (max-width: 680px) {
.prose--duo {
grid-template-columns: 1fr;
}
}
.spec {
width: 100%;
border-collapse: collapse;
border-top: 2px solid var(--ink);
font-size: var(--fs-1);
}
.spec thead th {
text-align: start;
font-size: var(--fs-0);
font-weight: 700;
color: var(--ink-3);
padding-block: 12px;
padding-inline: 0 12px;
border-bottom: 1px solid var(--rule-2);
}
.spec tbody th,
.spec td {
text-align: start;
vertical-align: top;
padding-block: 16px;
padding-inline: 0 12px;
border-bottom: 1px solid var(--rule-2);
}
.spec tbody th {
font: 700 var(--fs-2) / 1.5 var(--f-d);
white-space: nowrap;
}
.spec tbody th > * {
vertical-align: middle;
}
.spec tbody th .ico {
display: inline-block;
margin-inline-end: 10px;
}
.spec td {
color: var(--ink-2);
}
.spec td:last-child {
width: 1%;
white-space: nowrap;
}
@media (max-width: 700px) {
.spec thead {
display: none;
}
.spec tr {
display: grid;
grid-template-columns: 1fr auto;
border-bottom: 1px solid var(--rule-2);
padding: 14px 0;
}
.spec tbody th,
.spec td {
border: 0;
padding: 0;
white-space: normal;
}
.spec td:nth-child(2) {
grid-column: 1 / -1;
grid-row: 2;
margin-top: 6px;
}
.spec td:last-child {
grid-column: 2;
grid-row: 1;
width: auto;
}
}
.spec--compact tbody th {
white-space: nowrap;
}
@media (max-width: 700px) {
.spec--compact tr {
grid-template-columns: 1fr 1fr 1fr;
}
.spec--compact td:nth-child(2),
.spec--compact td:last-child {
grid-column: auto;
grid-row: auto;
margin-top: 0;
}
}
.plans {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--rule-2);
}
.plans__col {
padding: 28px 0 32px;
}
.plans__col:first-child {
padding-inline-end: clamp(20px, 4vw, 48px);
}
.plans__col--pro {
border-inline-start: 1px solid var(--rule-2);
padding-inline-start: clamp(20px, 4vw, 48px);
position: relative;
}
.plans__col--pro::before {
content: "";
position: absolute;
top: -2px;
inset-inline: 0;
height: 8px;
background: var(--hl);
}
.plans__name {
font: 800 var(--fs-3) / 1.4 var(--f-d);
}
.plans__price {
font: 900 clamp(2.4rem, 1.8rem + 2vw, 3.4rem) / 1.2 var(--f-d);
margin: 6px 0 18px;
font-variant-numeric: tabular-nums;
}
.plans__price small {
font-size: 0.36em;
font-weight: 700;
color: var(--ink-3);
}
.plans li {
position: relative;
padding: 8px 0 8px;
padding-inline-start: 28px;
border-top: 1px dashed var(--rule);
}
.plans li::before {
content: "";
position: absolute;
inset-inline-start: 2px;
top: 0.95em;
width: 12px;
height: 7px;
border-inline-start: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
transform: rotate(-45deg) scaleX(-1);
}
.plans__note {
margin-top: 20px;
font-size: var(--fs-1);
color: var(--ink-3);
max-width: 52em;
}
@media (max-width: 680px) {
.plans {
grid-template-columns: 1fr;
}
.plans__col:first-child {
padding-inline-end: 0;
}
.plans__col--pro {
border-inline-start: 0;
border-top: 1px solid var(--rule-2);
padding-inline-start: 0;
}
}
.checks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 clamp(24px, 4vw, 56px);
counter-reset: chk;
border-top: 2px solid var(--ink);
}
.checks li {
counter-increment: chk;
display: grid;
grid-template-columns: 2.4em minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 14px;
padding: 20px 0;
border-bottom: 1px solid var(--rule-2);
}
.checks li::before {
content: counter(chk, arabic-indic);
grid-row: 1 / span 2;
font: 900 2rem/1.1 var(--f-d);
color: var(--ink);
}
.checks b {
font: 700 var(--fs-2) / 1.5 var(--f-d);
}
.checks span {
color: var(--ink-2);
font-size: var(--fs-1);
}
@media (max-width: 700px) {
.checks {
grid-template-columns: 1fr;
}
}
.qa {
border-top: 2px solid var(--ink);
}
.qa__item {
border-bottom: 1px solid var(--rule-2);
}
.qa__item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
}
.qa__item summary::-webkit-details-marker {
display: none;
}
.qa__item h3 {
font: 700 var(--fs-2) / 1.6 var(--f-d);
}
.qa__ico {
transition: transform 0.25s var(--ease);
}
.qa__item[open] .qa__ico {
transform: rotate(45deg);
}
.qa__item summary:hover h3 {
text-decoration: underline;
text-decoration-color: var(--hl-2);
text-decoration-thickness: 3px;
text-underline-offset: 0.35em;
}
.qa__a {
padding: 0 0 22px;
color: var(--ink-2);
max-width: 44em;
}
.closer {
background: var(--hl);
border-top: 2px solid var(--ink);
padding-block: clamp(56px, 8vw, 96px);
}
.closer__in {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 40px;
align-items: center;
}
.closer .h2 {
font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
font-weight: 900;
max-width: 16em;
}
.closer__copy > p {
font-size: var(--fs-3);
margin: 16px 0 26px;
max-width: 34em;
color: var(--ink);
}
.closer .storenote {
color: var(--ink);
margin-top: 14px;
}
.closer__qr {
width: 230px;
text-align: center;
font-size: var(--fs-0);
font-weight: 700;
}
.closer__qrbox {
background: #fff;
border: 2px solid var(--ink);
border-radius: var(--r-3);
padding: 12px;
margin-bottom: 12px;
box-shadow: -6px 6px 0 var(--ink);
}
@media (max-width: 820px) {
.closer__in {
grid-template-columns: 1fr;
}
.closer__qr {
display: none;
}
}
.pagehead {
padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 72px);
border-bottom: 1px solid var(--rule);
}
.pagehead .noapp {
margin-top: 20px;
}
.pagehead__acts {
margin: 24px 0 12px;
}
.feats {
padding-block: clamp(24px, 4vw, 48px);
}
.feat {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(28px, 6vw, 96px);
align-items: center;
padding-block: clamp(40px, 6vw, 72px);
border-bottom: 1px solid var(--rule);
}
.feat:last-child {
border-bottom: 0;
}
.feat--flip .feat__shot {
order: 2;
}
.feat--tight {
padding-block: 0;
border-bottom: 0;
}
.feat__shot {
display: grid;
justify-items: center;
}
.feat__shot--pass .wpass {
width: 100%;
max-width: 320px;
}
.feat__copy .h2 {
margin-bottom: 14px;
}
.feat__copy p + p {
margin-top: 12px;
}
.feat__copy > p {
color: var(--ink-2);
max-width: 34em;
}
.feat__n {
display: flex;
align-items: center;
gap: 12px;
font: 900 1.1rem/1 var(--f-d);
color: var(--ink-3);
margin-bottom: 14px;
letter-spacing: 0.06em;
}
.feat__n::after {
content: "";
flex: 0 0 48px;
height: 2px;
background: var(--ink);
order: -1;
}
@media (max-width: 820px) {
.feat {
grid-template-columns: 1fr;
}
.feat--flip .feat__shot {
order: 0;
}
}
.phone--app {
width: 268px;
}
.phone--app .phone__screen {
background: #f7f6f3;
padding: 58px 12px 14px;
}
.app {
font: 400 13px/1.55 var(--f-b);
color: var(--ink);
}
.app__top {
display: grid;
grid-template-columns: 28px 1fr 28px;
align-items: center;
margin-bottom: 14px;
}
.app__top b {
text-align: center;
font: 800 15px/1.3 var(--f-d);
}
.app__back .ico {
transform: scaleX(-1);
}
.app__cam {
position: relative;
height: 300px;
border-radius: 18px;
background: #1b1a18;
display: grid;
place-items: center;
overflow: hidden;
}
.app__cam .wpass__code {
width: 110px;
border-radius: 8px;
}
.app__corner {
position: absolute;
width: 34px;
height: 34px;
border: 3px solid var(--hl);
}
.app__corner--a { top: 64px; left: 50px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.app__corner--b { top: 64px; right: 50px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.app__corner--c { bottom: 64px; left: 50px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.app__corner--d { bottom: 64px; right: 50px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.app__beam {
position: absolute;
left: 56px;
right: 56px;
top: 50%;
height: 2px;
background: var(--hl);
box-shadow: 0 0 0 1px rgba(255, 225, 77, 0.25);
}
.app__hint {
text-align: center;
margin-top: 14px;
color: var(--ink-3);
}
.app__who {
background: #fff;
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 10px;
}
.app__who b {
display: block;
font: 800 16px/1.4 var(--f-d);
}
.app__who span {
color: var(--ink-3);
font-size: 12px;
}
.app__field,
.app__calc {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 10px;
}
.app__field b {
font: 900 24px/1 var(--f-d);
}
.app__field small {
font-size: 12px;
color: var(--ink-3);
}
.app__calc {
background: var(--ink);
color: var(--paper);
}
.app__calc b {
color: var(--hl);
font: 800 15px/1 var(--f-d);
}
.app__btn {
display: block;
text-align: center;
margin-top: 16px;
padding: 12px;
border-radius: 12px;
background: var(--ink);
color: var(--paper);
font-weight: 700;
}
.app__search {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-radius: 12px;
background: #ebe9e4;
color: var(--ink-3);
margin-bottom: 12px;
}
.app__list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 4px;
border-bottom: 1px solid #e5e2dc;
}
.app__list b {
font-weight: 700;
}
.app__list span {
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.app__seg {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 3px;
border-radius: 10px;
background: #ebe9e4;
margin-bottom: 12px;
font-size: 12px;
text-align: center;
}
.app__seg span {
padding: 6px 2px;
border-radius: 8px;
}
.app__seg .is-on {
background: #fff;
font-weight: 700;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.app__msg {
background: #fff;
border-radius: 14px;
padding: 12px 14px;
min-height: 132px;
}
.app__msg span {
font-size: 11px;
color: var(--ink-3);
}
.app__msg p {
margin-top: 4px;
font-size: 14px;
}
.app__note {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 12px;
color: var(--ink-3);
}
.app__kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.app__kpis div {
background: #fff;
border-radius: 14px;
padding: 12px;
}
.app__kpis span {
display: block;
font-size: 11px;
color: var(--ink-3);
}
.app__kpis b {
font: 900 26px/1.2 var(--f-d);
}
.app__bars {
display: flex;
align-items: flex-end;
gap: 9px;
height: 150px;
margin-top: 12px;
padding: 14px 14px 0;
background: #fff;
border-radius: 14px;
}
.app__bars i {
flex: 1;
border-radius: 5px 5px 0 0;
background: var(--ink);
}
.app__bars i:nth-child(5) {
background: var(--hl);
box-shadow: inset 0 0 0 1.5px var(--ink);
}
.app__bars .h3 { height: 30%; }
.app__bars .h4 { height: 40%; }
.app__bars .h5 { height: 50%; }
.app__bars .h6 { height: 62%; }
.app__bars .h7 { height: 75%; }
.app__bars .h8 { height: 90%; }
.app__export {
display: flex;
gap: 8px;
margin-top: 12px;
}
.app__export span {
flex: 1;
text-align: center;
padding: 9px;
border-radius: 10px;
border: 1.5px solid var(--ink);
font-weight: 700;
font-family: var(--f-b);
}
.app__toggles {
background: #fff;
border-radius: 14px;
padding: 0 14px;
}
.app__toggles li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #ece9e3;
}
.app__toggles li:last-child {
border-bottom: 0;
}
.app__toggles i {
width: 40px;
height: 24px;
border-radius: 12px;
background: #d8d5ce;
position: relative;
flex: none;
}
.app__toggles i::after {
content: "";
position: absolute;
top: 2px;
inset-inline-end: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.app__toggles i.is-on {
background: var(--gain);
}
.app__toggles i.is-on::after {
inset-inline-end: auto;
inset-inline-start: 2px;
}
.app__toggles b {
font: 900 16px/1 var(--f-d);
padding: 4px 12px;
border-radius: 8px;
background: var(--hl);
}
.bmap {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
margin-top: 32px;
padding: 28px 0 0;
border-top: 2px solid var(--ink);
}
.bmap__node,
.bmap__card {
display: grid;
justify-items: center;
text-align: center;
gap: 4px;
padding: 16px 12px;
}
.bmap__node {
border: 1.5px solid var(--ink);
border-radius: var(--r-2);
background: var(--sheet);
}
.bmap__card {
position: relative;
margin-inline: 24px;
padding: 18px 20px;
border-radius: var(--r-3);
background: var(--ink);
color: var(--paper);
}
.bmap__card::before,
.bmap__card::after {
content: "";
position: absolute;
top: 50%;
width: 24px;
border-top: 2px dashed var(--ink);
}
.bmap__card::before {
inset-inline-start: -26px;
}
.bmap__card::after {
inset-inline-end: -26px;
}
.bmap__card .ico {
stroke: var(--hl);
}
.bmap b {
font: 800 var(--fs-1) / 1.4 var(--f-d);
}
.bmap span {
font-size: var(--fs-0);
color: var(--ink-3);
}
.bmap__card span {
color: var(--hl);
font-weight: 700;
}
.bmap figcaption {
grid-column: 1 / -1;
margin-top: 16px;
text-align: center;
font-size: var(--fs-0);
color: var(--ink-3);
}
@media (max-width: 560px) {
.bmap {
grid-template-columns: 1fr;
gap: 22px;
}
.bmap__card {
margin-inline: 0;
}
.bmap__card::before,
.bmap__card::after {
top: auto;
left: 50%;
width: 0;
height: 20px;
border-top: 0;
border-left: 2px dashed var(--ink);
}
.bmap__card::before {
top: -22px;
inset-inline-start: auto;
}
.bmap__card::after {
bottom: -22px;
inset-inline-end: auto;
}
}
.perms {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 18px;
border-top: 2px solid var(--ink);
}
.perms li {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--rule-2);
font-weight: 700;
}
@media (max-width: 520px) {
.perms {
grid-template-columns: 1fr;
}
}
.getpage {
padding-block: clamp(48px, 8vw, 96px);
}
.getpage__in {
display: grid;
justify-items: start;
gap: 18px;
}
.getpage__status {
font-size: var(--fs-3);
color: var(--ink-2);
}
.getpage__qr {
display: flex;
align-items: center;
gap: 18px;
margin-top: 16px;
font-size: var(--fs-1);
color: var(--ink-3);
}
.getpage__qr .closer__qrbox {
width: 150px;
margin: 0;
}
.nf {
padding-block: clamp(48px, 8vw, 96px);
}
.nf__in {
display: grid;
gap: 14px;
justify-items: start;
}
.nf__pass {
width: 260px;
transform: rotate(-3deg);
margin-bottom: 20px;
}
.nf__links {
border-top: 2px solid var(--ink);
width: 100%;
margin-top: 10px;
}
.nf__links a {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 0;
border-bottom: 1px solid var(--rule-2);
font: 700 var(--fs-2) / 1.5 var(--f-d);
text-decoration: none;
}
.pg-about .prose .stores,
.pg-about .prose .storenote {
margin-top: 18px;
}
@keyframes draw {
from {
background-size: 0% 0.62em;
}
}
.hero .hl,
.pagehead .hl {
animation: draw 0.9s 0.25s var(--ease) both;
}
@keyframes print {
from {
opacity: 0;
transform: translateY(-6px);
}
}
@keyframes bump {
40% {
transform: scale(1.08);
}
}
.wpass.is-bump .wpass__big b,
.wpass__stamps i.is-new {
display: inline-block;
animation: bump 0.45s var(--ease);
}
.receipt__earn span.is-new {
animation: bump 0.45s var(--ease);
}
@keyframes beam {
0%,
100% {
transform: translateY(-58px);
}
50% {
transform: translateY(58px);
}
}
.app__beam {
animation: beam 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}