@font-face {
font-family: "Schibsted Grotesk";
src: url(/assets/fonts/schibsted-latin.woff2) format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
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: "Schibsted Grotesk";
src: url(/assets/fonts/schibsted-latin-ext.woff2) format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Martian Mono";
src: url(/assets/fonts/martian-latin.woff2) format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
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: "Martian Mono";
src: url(/assets/fonts/martian-latin-ext.woff2) format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Noto Nastaliq Urdu";
src: url(/assets/fonts/nastaliq-subset.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
:root {
--paper: #FFFFFF;
--mist: #EEF1F6;
--mist-2: #F6F8FB;
--ink: #10131A;
--ink-2: #394152;
--muted: #5C6475;
--line: #DADFE7;
--line-strong: #C3CAD6;
--field: #7A8394;
--lapis: #1F3FD1;
--lapis-deep: #1834B0;
--lapis-soft: #E7EBFD;
--lapis-line: #B9C4F5;
--carbon: #FFD43B;
--carbon-soft: #FFF3C4;
--carbon-ink: #7A5B00;
--ready: #0E8A5B;
--ready-ink: #0E7A50;
--ready-soft: #E3F4EC;
--crit: #B3261E;
--crit-soft: #FCE9E7;
--brand: #EA580C;
--brand-lift: #FF8A3D;
--foyer: #1F3FD1;
--quill: #0B7C86;
--nazm: #BE185D;
--setup: #C99A00;
--ink-raise: #161A23;
--ink-line: #2A303C;
--paper-ink: #F3F5F9;
--on-ink: #C3CAD6;
--on-ink-2: #9AA3B4;
--lapis-lift: #7D93FF;
--lapis-lift-2: #9DB0FF;
--sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--urdu: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-22: 1.375rem;
--fs-28: 1.75rem;
--fs-36: 2.25rem;
--fs-48: 3rem;
--fs-64: 4rem;
--r-ui: 8px;
--r-card: 12px;
--r-btn: 10px;
--shadow-device: 0 1px 0 rgba(16, 19, 26, .05), 0 22px 44px -22px rgba(16, 19, 26, .38);
--shadow-float: 0 1px 0 rgba(16, 19, 26, .04), 0 10px 28px -14px rgba(16, 19, 26, .28);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease: cubic-bezier(.2, 0, 0, 1);
--gutter: clamp(16px, 4vw, 40px);
--max: 1200px;
--header-h: 64px;
}
@media (max-width: 719px) {
:root { --header-h: 56px; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 400 var(--fs-18)/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 {
font-family: var(--sans);
color: var(--ink);
text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }
.h1 {
font-size: clamp(2.5rem, 1.55rem + 3.6vw, var(--fs-64));
font-weight: 800;
line-height: 1.03;
letter-spacing: -0.032em;
}
.h2 {
font-size: clamp(var(--fs-28), 1.35rem + 1.6vw, var(--fs-36));
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.022em;
}
.h3 {
font-size: var(--fs-22);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.012em;
}
.lead {
font-size: clamp(var(--fs-18), 1.05rem + 0.35vw, 1.3125rem);
line-height: 1.55;
color: var(--ink-2);
max-width: 60ch;
}
.body { color: var(--ink-2); max-width: 64ch; }
.body + .body { margin-top: 1rem; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-16); }
.note { font-size: var(--fs-16); color: var(--muted); max-width: 70ch; }
.kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--fs-16);
font-weight: 600;
color: var(--lapis);
margin-bottom: 14px;
}
.kicker::before {
content: "";
width: 8px;
height: 8px;
margin: 0 2px;
background: currentColor;
transform: rotate(45deg);
flex: none;
}
.rh {
display: inline-block;
width: 8px;
height: 8px;
background: var(--lapis);
transform: rotate(45deg);
flex: none;
}
.num {
font-family: var(--mono);
font-weight: 500;
font-size: max(0.86em, 14px);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
a { color: var(--lapis); }
.link {
color: var(--lapis);
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
padding-bottom: 1px;
transition: background-size .25s var(--ease), color .15s;
}
.link:hover { background-size: 100% 2px; color: var(--lapis-deep); }
.body a, .lead a, .prose a, .note a {
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.body a:hover, .lead a:hover, .prose a:hover, .note a:hover { text-decoration-thickness: 2px; }
:focus-visible {
outline: 3px solid var(--lapis);
outline-offset: 3px;
border-radius: 3px;
}
strong, b { font-weight: 700; }
.sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip {
position: absolute;
left: 12px;
top: -60px;
z-index: 100;
padding: 12px 16px;
background: var(--ink);
color: var(--paper);
font-weight: 600;
border-radius: var(--r-ui);
text-decoration: none;
transition: top .15s var(--ease);
}
.skip:focus { top: 12px; }
.wrap {
width: 100%;
max-width: calc(var(--max) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: clamp(64px, 5rem + 3vw, 112px); }
.section--mist { background: var(--mist-2); }
.section--tight { padding-block: clamp(48px, 3rem + 2vw, 72px); }
.section--flush-top { padding-top: 0; }
.section__head { max-width: 760px; margin-bottom: clamp(32px, 3vw, 48px); }
.h2 + .body, .h2 + .lead { margin-top: 18px; }
::placeholder { color: #767F8F; opacity: 1; }
.section__head .lead { margin-top: 16px; }
main { display: block; }
@media (min-width: 900px) {
:root { --header-h: 72px; }
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .97);
border-bottom: 1px solid transparent;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
view-transition-name: site-header;
}
.is-scrolled .site-header,
.site-header:has(.menu.is-open) {
border-bottom-color: var(--line);
box-shadow: 0 8px 24px -20px rgba(16, 19, 26, .45);
}
.site-header__inner {
position: relative;
height: var(--header-h);
display: flex;
align-items: center;
gap: 20px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
color: var(--ink);
text-decoration: none;
font-weight: 800;
font-size: 1.5rem;
line-height: 1;
letter-spacing: -0.035em;
margin-right: auto;
}
.mark { width: 30px; height: 30px; flex: none; }
.mark__bowl { fill: currentColor; }
.mark__dot { fill: var(--brand); }
.mark--ink .mark__dot { fill: var(--brand-lift); }
.brand__e { color: var(--brand); }
.brand--ink .brand__e { color: var(--brand-lift); }
.mark--sm { width: 20px; height: 20px; }
.brand--ink { color: var(--paper-ink); }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__item { position: relative; }
.has-menu--wide { position: static; }
.nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 12px;
color: var(--ink);
text-decoration: none;
font-weight: 500;
font-size: var(--fs-16);
border-radius: var(--r-ui);
transition: color .15s, background-color .15s;
}
.nav__link:hover { background: var(--mist); }
.nav__link[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--lapis); border-radius: 0; }
.nav__link[aria-expanded="true"] { background: var(--mist); border-radius: var(--r-ui); box-shadow: none; }
.chev { width: 14px; height: 14px; flex: none; transition: transform .2s var(--ease); }
.chev path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__item--cta { display: none; }
.menu { display: none; }
.menu.is-open { display: block; animation: menu-in .2s var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu--wide, .menu--drop {
position: absolute;
top: 100%;
background: var(--paper);
border: 1px solid var(--line);
border-top: 0;
border-radius: 0 0 20px 20px;
box-shadow: 0 1px 0 rgba(16, 19, 26, .04), 0 22px 44px -24px rgba(16, 19, 26, .35);
}
.menu--wide { left: var(--gutter); right: var(--gutter); padding: 24px; }
.menu--drop { left: 0; width: 380px; padding: 12px; }
.menu__grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) 280px;
gap: 20px;
}
.menu__col + .menu__col { border-left: 1px solid var(--mist); padding-left: 12px; }
.menu__h { padding: 0 16px 6px; font-size: var(--fs-14); font-weight: 600; color: var(--muted); }
.menu__list { list-style: none; display: grid; gap: 2px; }
.menu__item {
display: flex;
flex-direction: column;
gap: 5px;
padding: 12px 16px;
border-radius: 12px;
color: var(--ink);
text-decoration: none;
transition: background-color .15s;
}
.menu__item:hover { background: var(--mist-2); }
.menu__item:hover .menu__label, .menu__item:hover .pname { color: var(--lapis); }
.menu__pname { font-size: var(--fs-18); }
.menu__label { font-size: var(--fs-16); font-weight: 700; transition: color .15s; }
.menu__line { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.menu .menu__status { font-size: var(--fs-14); }
.menu__uses { margin-top: 2px; font-size: var(--fs-14); }
.menu__uses .pname { font-size: var(--fs-14); font-weight: 700; }
.menu__foot { margin: 6px 16px 8px; padding-top: 12px; border-top: 1px solid var(--mist); font-size: var(--fs-16); color: var(--ink-2); }
.menu__foot .link { font-weight: 600; }
.menu__card {
background: var(--ink);
color: var(--paper-ink);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.menu__card .mark { width: 28px; height: 28px; }
.menu__card-h { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.menu__card-p { font-size: 0.9375rem; line-height: 1.55; color: var(--on-ink); flex: 1; }
.menu__card .btn { margin-top: 8px; }
@media (min-width: 900px) and (max-width: 1159px) {
.menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu__card { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.menu__card-p { flex: 1 1 320px; }
.menu__card .btn { margin-top: 0; }
}
.nav-toggle { display: none; }
@media (max-width: 899px) {
.site-header__inner { gap: 10px; }
.nav {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
max-height: calc(100dvh - var(--header-h));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: 0 18px 30px -24px rgba(16, 19, 26, .5);
}
.nav.is-open { display: block; }
.nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; }
.nav__item { position: static; border-bottom: 1px solid var(--line); }
.nav__item:last-child { border-bottom: 0; }
.nav__link { width: 100%; min-height: 52px; font-size: var(--fs-18); padding: 0 4px; border-radius: 0; }
.nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--lapis); padding-left: 14px; }
.nav__trigger { min-height: 40px; padding-top: 14px; font-size: var(--fs-14); font-weight: 700; color: var(--muted); }
.nav__trigger .chev { display: none; }
.nav__trigger[aria-current="page"] { color: var(--ink); }
.menu, .menu.is-open { display: block; position: static; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 10px; width: auto; animation: none; }
.menu__grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.menu__col + .menu__col { border-left: 0; padding-left: 0; }
.menu__col--trades, .menu__card, .menu .menu__status, .menu__uses, .menu__foot { display: none; }
.menu--wide .menu__col:first-child .menu__h { display: none; }
.menu__h { padding: 8px 4px 2px; }
.menu__item { padding: 10px 4px; border-radius: 8px; gap: 2px; }
.menu__pname { font-size: var(--fs-18); }
.menu__line { font-size: var(--fs-14); }
.nav__item--cta { display: block; border-bottom: 0; padding-top: 16px; }
.nav__item--cta .btn { width: 100%; }
.nav-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
min-width: 44px;
padding: 0 8px;
color: var(--ink);
font: 600 var(--fs-16)/1 var(--sans);
text-decoration: none;
background: none;
border: 0;
border-radius: var(--r-ui);
cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
display: block;
width: 18px;
height: 2px;
background: currentColor;
transition: transform .2s var(--ease), opacity .2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 380px) {
.nav-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.brand { font-size: 1.3125rem; }
.brand .mark { width: 26px; height: 26px; }
}
.site-footer {
background: var(--ink);
color: var(--on-ink);
padding-block: clamp(56px, 4rem + 2vw, 80px) 32px;
}
.site-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 4fr);
gap: 40px clamp(32px, 4vw, 64px);
}
.site-footer__brand .brand { margin-right: 0; }
.site-footer__brand > p { margin-top: 16px; max-width: 30ch; font-size: var(--fs-16); line-height: 1.6; }
.site-footer__contact { list-style: none; margin-top: 18px; display: grid; gap: 4px; font-size: var(--fs-16); }
.site-footer__contact a { color: #FFFFFF; text-underline-offset: 3px; }
.site-footer__contact a:hover { text-decoration-thickness: 2px; }
.site-footer__note { color: var(--on-ink-2); font-size: var(--fs-14); }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.site-footer__h { font-size: var(--fs-14); font-weight: 700; color: #FFFFFF; margin-bottom: 10px; }
.site-footer__list { list-style: none; display: grid; gap: 2px; }
.site-footer__list a {
display: inline-flex;
align-items: center;
min-height: 36px;
color: var(--on-ink);
font-size: 0.9375rem;
text-decoration: none;
}
.site-footer__list a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.site-footer :focus-visible { outline-color: var(--lapis-lift); }
.site-footer__legal {
margin-top: clamp(40px, 3rem + 1vw, 56px);
padding-top: 24px;
border-top: 1px solid var(--ink-line);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 32px;
font-size: var(--fs-14);
color: var(--on-ink-2);
}
.site-footer__legal p { max-width: 80ch; }
.site-footer__legal a { color: var(--on-ink); }
@media (max-width: 959px) {
.site-footer__grid { grid-template-columns: minmax(0, 1fr); }
.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
padding: 0 22px;
border-radius: var(--r-btn);
border: 2px solid transparent;
font: 600 var(--fs-16)/1.1 var(--sans);
text-decoration: none;
cursor: pointer;
transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s, transform .15s var(--ease);
}
.btn:active { transform: scale(.975); }
.btn--primary { background: var(--lapis); color: #FFFFFF; }
.btn--primary:hover { background: var(--lapis-deep); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 0.9375rem; }
.btn--light { background: #FFFFFF; color: var(--lapis-deep); }
.btn--light:hover { background: var(--lapis-soft); }
.btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .75); }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.btn[disabled] { opacity: .6; cursor: progress; }
.arr { width: 16px; height: 16px; flex: none; }
.arr path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pname {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
color: var(--ink);
}
.pdot {
display: inline-block;
width: 0.5em;
height: 0.5em;
min-width: 8px;
min-height: 8px;
transform: rotate(45deg);
background: var(--ink);
flex: none;
}
.pname--foyer .pdot, .plockup--foyer .pdot { background: var(--foyer); }
.pname--quill .pdot, .plockup--quill .pdot { background: var(--quill); }
.pname--nazm .pdot, .plockup--nazm .pdot { background: var(--nazm); }
.status {
display: flex;
gap: 10px;
align-items: baseline;
font-size: var(--fs-16);
line-height: 1.45;
color: var(--ink-2);
}
.status::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ready);
transform: translateY(-1px);
}
.status--open::before { background: var(--lapis); }
.status--setup::before { background: var(--setup); }
.terms {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 32px;
}
.terms li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); font-size: var(--fs-16); line-height: 1.45; }
.terms li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--lapis); transform: translateY(-2px) rotate(45deg); }
@media (max-width: 599px) { .terms { grid-template-columns: minmax(0, 1fr); } }
.also__h { font-size: var(--fs-16); font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.also__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pcard {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 22px 24px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
color: var(--ink);
text-decoration: none;
transition: border-color .2s, box-shadow .2s;
}
.pcard:hover { border-color: var(--lapis); box-shadow: var(--shadow-float); }
.pcard__body { display: flex; flex-direction: column; gap: 8px; }
.pcard .pname { font-size: 1.25rem; }
.pcard__line { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.pcard .arr { color: var(--lapis); transition: transform .2s var(--ease); }
.pcard:hover .arr { transform: translateX(3px); }
@media (max-width: 899px) { .also__grid { grid-template-columns: minmax(0, 1fr); } }
.proof { display: grid; gap: 1px; background: var(--ink-line); border-radius: 14px; overflow: hidden; }
.proof__list { display: grid; gap: 1px; }
.proof__list > div { background: var(--ink-raise); padding: 20px 22px; display: flex; align-items: baseline; gap: 16px; }
.proof dt { font-size: 2.25rem; line-height: 1; color: #FFFFFF; min-width: 3ch; }
.proof dd { font-size: 0.9375rem; line-height: 1.45; color: var(--on-ink); }
.proof__note { background: var(--ink-raise); padding: 16px 22px; font-size: var(--fs-14); line-height: 1.5; color: var(--on-ink-2); }
.means { margin-top: clamp(48px, 4vw, 72px); }
.means__h { font-size: var(--fs-22); font-weight: 700; letter-spacing: -0.012em; margin-bottom: 20px; }
.means__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.means__item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
}
.means__item b { font-size: var(--fs-18); line-height: 1.3; }
.means__item p { color: var(--ink-2); font-size: var(--fs-16); line-height: 1.55; flex: 1; }
.means__item .link { align-self: flex-start; font-weight: 600; font-size: var(--fs-16); }
.means__none { margin-top: 20px; display: flex; align-items: baseline; gap: 12px; color: var(--ink); font-weight: 600; max-width: 70ch; }
.means__none .rh { transform: translateY(-2px) rotate(45deg); }
@media (max-width: 899px) { .means__list { grid-template-columns: minmax(0, 1fr); } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 479px) {
.actions .btn { width: 100%; }
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px 5px 8px;
border-radius: 999px;
font: 600 var(--fs-14)/1.1 var(--sans);
white-space: nowrap;
background: var(--mist);
color: var(--ink-2);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip--new { background: var(--carbon); color: var(--ink); }
.chip--wait { background: var(--carbon-soft); color: var(--carbon-ink); }
.chip--due { background: var(--carbon); color: var(--ink); }
.chip--own { background: var(--lapis-soft); color: var(--lapis); }
.chip--done { background: var(--ready-soft); color: var(--ready-ink); }
.parts {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-card);
overflow: hidden;
}
.part {
background: var(--paper);
padding: clamp(24px, 2.4vw, 36px);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 4px 18px;
align-content: start;
}
.part__n {
grid-row: span 2;
display: grid;
place-items: center;
width: 36px;
height: 36px;
background: var(--ink);
color: var(--paper);
font: 500 var(--fs-14)/1 var(--mono);
}
.part:first-child .part__n { background: var(--lapis); }
.part h3 { margin-top: 4px; }
.part p { color: var(--ink-2); margin-top: 6px; }
@media (max-width: 719px) {
.parts { grid-template-columns: minmax(0, 1fr); }
}
.limit {
margin-top: 24px;
padding: 20px 24px;
border-left: 4px solid var(--ink);
background: var(--mist-2);
max-width: 820px;
}
.limit p { color: var(--ink-2); }
.limit b { color: var(--ink); }
.path {
list-style: none;
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
counter-reset: step;
}
.path::before, .path::after {
content: "";
position: absolute;
left: 10px;
top: 9px;
height: 2px;
width: calc((100% + 32px) * 2 / 3);
background: var(--line-strong);
}
.path::after {
background: var(--lapis);
transform-origin: left center;
transform: scaleX(1);
transition: transform 1.6s var(--ease-out);
}
.path__step { position: relative; padding-top: 40px; }
.path__mark {
position: absolute;
top: 2px;
left: 3px;
width: 16px;
height: 16px;
background: var(--lapis);
border: 2px solid var(--lapis);
transform: rotate(45deg);
transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease-out);
transition-delay: calc(var(--i) * .55s);
}
.path__step h3 { margin-bottom: 8px; }
.path__step p { color: var(--ink-2); }
.js .path:not(.is-lit)::after { transform: scaleX(0); }
.js .path:not(.is-lit) .path__mark { background: var(--paper); border-color: var(--line-strong); transform: rotate(45deg) scale(.7); }
.path__step:nth-child(1) { --i: 0; }
.path__step:nth-child(2) { --i: 1; }
.path__step:nth-child(3) { --i: 2; }
@media (max-width: 719px) {
.path { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 40px; }
.path::before, .path::after { left: 9px; top: 10px; width: 2px; height: calc(100% - 20px); }
.path::after { transform-origin: center top; transform: scaleY(1); }
.js .path:not(.is-lit)::after { transform: scaleY(0); }
.path__step { padding-top: 0; }
.path__mark { left: -40px; }
}
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
min-height: 64px;
padding: 16px 0;
cursor: pointer;
font-size: var(--fs-18);
font-weight: 600;
color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
flex: none;
width: 12px;
height: 12px;
border-right: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
transform: translateY(-3px) rotate(45deg);
transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq summary:hover { color: var(--lapis); }
.faq__a { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; }
.faq__a p + p { margin-top: 10px; }
.faq details[open] .faq__a { animation: faq-in .3s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.founder__grid {
display: grid;
grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
gap: clamp(32px, 6vw, 88px);
align-items: center;
}
.founder__text .terms { margin-top: 28px; }
.founder__photo {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
background: var(--mist);
border-radius: 20px;
}
.founder__text .lead { margin-top: 18px; }
.founder__name { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.founder__name b { font-size: var(--fs-18); }
.founder__name span { color: var(--muted); }
.founder__links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.founder__links .link { min-height: 32px; display: inline-flex; align-items: center; font-weight: 600; }
@media (max-width: 719px) {
.founder__grid { grid-template-columns: minmax(0, 1fr); }
.founder__photo { width: 200px; }
}
.founder--compact {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 20px;
align-items: center;
padding: 20px;
background: var(--mist-2);
border: 1px solid var(--line);
border-radius: var(--r-card);
}
.founder--compact .founder__photo { width: 96px; border-radius: 12px; }
.founder--compact .founder__name { margin: 0 0 4px; }
.founder--compact p { color: var(--ink-2); }
.founder--compact .founder__links { margin-top: 6px; }
@media (max-width: 479px) {
.founder--compact { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; align-items: start; }
.founder--compact .founder__photo { width: 64px; border-radius: 10px; }
}
.facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-card);
overflow: hidden;
}
.facts > div { background: var(--paper); padding: 16px 20px; }
.facts dt { font-size: var(--fs-14); font-weight: 600; color: var(--muted); }
.facts dd { margin-top: 2px; color: var(--ink); }
@media (max-width: 599px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.cta { background: var(--lapis); color: #FFFFFF; }
.cta__inner { padding-block: clamp(64px, 4rem + 3vw, 104px); }
.cta .h2 { color: #FFFFFF; max-width: 22ch; }
.cta .lead { color: #E7EBFD; margin-top: 16px; }
.cta .btn--primary { background: #FFFFFF; color: var(--ink); }
.cta .btn--primary:hover { background: var(--lapis-soft); }
.cta .btn--secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, .8); }
.cta .btn--secondary:hover { background: #FFFFFF; color: var(--lapis); border-color: #FFFFFF; }
.cta :focus-visible { outline-color: #FFFFFF; }
.cta__note { margin-top: 18px; font-size: var(--fs-16); color: #DCE2FC; }
.leak { margin: 0; max-width: 720px; }
.leak__rows { list-style: none; border-top: 1px solid var(--line); }
.leak__row {
display: grid;
grid-template-columns: minmax(120px, 170px) minmax(24px, 1fr) auto auto;
align-items: center;
gap: 12px;
min-height: 60px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.leak__in { font-weight: 600; }
.leak__line { height: 2px; background: var(--line-strong); position: relative; }
.leak__line::after {
content: "";
position: absolute;
right: -1px;
top: -4px;
border: 5px solid transparent;
border-left: 7px solid var(--line-strong);
border-right: 0;
}
.leak__out { color: var(--ink-2); }
.leak__gone {
justify-self: start;
font-size: var(--fs-14);
font-weight: 700;
color: var(--crit);
background: var(--crit-soft);
padding: 3px 9px;
border-radius: 999px;
}
.is-lost .leak__line {
background: repeating-linear-gradient(90deg, var(--crit) 0 5px, transparent 5px 10px);
}
.is-lost .leak__line::after { border-left-color: var(--crit); }
.is-lost .leak__out { color: var(--crit); font-weight: 600; }
.leak__cap { margin-top: 14px; font-size: var(--fs-16); color: var(--muted); }
@media (max-width: 479px) {
.leak__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.leak__line { display: none; }
.leak__out::before { content: "\2192\00a0"; color: var(--muted); }
.leak__gone { grid-column: 2; grid-row: 1; justify-self: end; }
.leak__out { grid-column: 1 / -1; }
}
.routes { list-style: none; border-top: 1px solid var(--line); }
.route {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 2px 20px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.route__k { font-weight: 700; grid-row: span 2; padding-top: 2px; }
.route__v { font-size: var(--fs-22); font-weight: 600; overflow-wrap: anywhere; }
.route__link { color: var(--lapis); text-decoration: none; }
.route__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.route__n { color: var(--muted); font-size: var(--fs-16); }
.route__v--plain { font-size: var(--fs-18); font-weight: 500; }
@media (max-width: 479px) {
.route { grid-template-columns: minmax(0, 1fr); }
.route__k { grid-row: auto; font-size: var(--fs-16); color: var(--muted); }
.route__v { font-size: var(--fs-18); }
}
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.field__hint { font-size: var(--fs-16); color: var(--muted); }
.field input, .field textarea {
width: 100%;
font: 400 var(--fs-18)/1.4 var(--sans);
color: var(--ink);
background: var(--paper);
border: 1.5px solid var(--field);
border-radius: var(--r-ui);
padding: 13px 14px;
min-height: 52px;
transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible {
outline: none;
border-color: var(--lapis);
box-shadow: 0 0 0 3px var(--lapis-soft);
}
.field [aria-invalid="true"] { border-color: var(--crit); }
.field__error { color: var(--crit); font-size: var(--fs-16); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form__small { font-size: var(--fs-16); color: var(--muted); }
.form__status { font-size: var(--fs-16); }
.form__status--err { color: var(--crit); font-weight: 600; }
.sent {
border: 1px solid var(--line);
border-left: 4px solid var(--ready);
border-radius: var(--r-ui);
padding: 22px 24px;
background: var(--paper);
}
.sent h3 { margin-bottom: 6px; }
.sent p { color: var(--ink-2); }
.sent .num { color: var(--ink); }
.mini {
border-radius: var(--r-ui);
overflow: hidden;
font-size: 0.8125rem;
line-height: 1.35;
box-shadow: var(--shadow-float);
}
.mini__bar { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; font-weight: 600; }
.mini__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; align-items: baseline; padding: 9px 12px; border-top: 1px solid var(--line); }
.mini__row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mini__row span { grid-column: 1 / -1; color: var(--ink-2); }
.mini__row em { font-style: normal; color: var(--muted); white-space: nowrap; }
.mini .num { font-size: 0.75rem; }
.mini--list, .mini--sheet { background: var(--paper); border: 1px solid var(--line); }
.mini--list .mini__bar, .mini--sheet .mini__bar { background: var(--mist-2); color: var(--ink-2); }
.mini__row em.is-soon { color: var(--carbon-ink); font-weight: 700; }
.mini__row span.is-good { color: var(--ready-ink); font-weight: 600; }
.mini__row--empty { background: repeating-linear-gradient(135deg, var(--paper) 0 8px, var(--mist-2) 8px 16px); }
.mini__row--empty span { color: var(--muted); }
.mini--till { background: var(--ink); color: #E9ECF2; padding-bottom: 12px; }
.mini--till .mini__bar { color: #C3C9D4; }
.mini__tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px; }
.mini--foyer { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px; font-size: var(--fs-14); }
.mini--foyer .mini__bar { padding: 0 2px 12px; font-size: var(--fs-18); font-weight: 800; letter-spacing: -0.01em; }
.mini--foyer .mini__bar span + span { font-size: var(--fs-14); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.mini__lines { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mini__line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 13px; background: var(--mist-2); border-radius: 10px; }
.mini__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini__who b { font-size: 0.9375rem; font-weight: 700; }
.mini__who span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.mini__end .num { font-size: var(--fs-14); color: var(--ink-2); }
.work {
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.work-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 20px;
transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.work-card:hover { border-color: var(--lapis-line); box-shadow: var(--shadow-float); }
.work-card:has(a:focus-visible) { outline: 3px solid var(--lapis); outline-offset: 3px; }
.work-card .mini { margin-bottom: 20px; }
.work-card__kind { font-size: var(--fs-14); font-weight: 600; color: var(--muted); }
.work-card .h3 { margin-top: 4px; }
.work-card .h3 a { color: var(--ink); text-decoration: none; }
.work-card .h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.work-card .h3 a:focus-visible { outline: none; }
.work-card:hover .h3 a { color: var(--lapis); }
.work-card p { color: var(--ink-2); margin-top: 8px; font-size: var(--fs-16); }
.work-card__status {
margin-top: auto;
padding-top: 16px;
font-size: var(--fs-14);
color: var(--muted);
display: flex;
gap: 8px;
align-items: flex-start;
}
.work-card__status::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; background: var(--ready); border-radius: 50%; }
.work-card .work-card__go { margin-top: 12px; font-weight: 600; color: var(--lapis); font-size: var(--fs-16); }
.work-card .work-card__go::after { content: " \2192"; }
@media (max-width: 959px) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .work { grid-template-columns: minmax(0, 1fr); } }
.points {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.points li {
padding: 20px 22px;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--paper);
}
.points b { display: block; margin-bottom: 4px; }
.points p { color: var(--ink-2); font-size: var(--fs-16); }
@media (max-width: 719px) { .points { grid-template-columns: minmax(0, 1fr); } }
.split {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 24px clamp(32px, 5vw, 80px);
align-items: start;
}
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); } }
.edemo, .odemo { margin: 0; }
.demo-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 14px;
border-radius: var(--r-ui);
border: 1.5px solid var(--field);
background: var(--paper);
color: var(--ink);
font: 600 var(--fs-14)/1 var(--sans);
cursor: pointer;
flex: none;
}
.demo-btn::before { content: ""; width: 10px; height: 10px; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.demo-btn[data-state="paused"]::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.demo-btn:hover { border-color: var(--lapis); color: var(--lapis); }
.edemo__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
margin-top: 16px;
}
.edemo__cap { font-size: var(--fs-14); color: var(--muted); max-width: 60ch; }
.edemo__stage {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: 22px;
align-items: center;
transition: opacity .35s var(--ease);
}
.edemo[data-flags~="fade"] .edemo__stage,
.odemo[data-flags~="fade"] .odemo__stage { opacity: 0; }
.edemo[data-flags~="reset"] *,
.odemo[data-flags~="reset"] * { transition: none !important; animation: none !important; }
@media (max-width: 719px) {
.edemo__stage { grid-template-columns: minmax(0, 1fr); }
.edemo .phone { display: none; }
}
.phone {
width: 100%;
max-width: 232px;
justify-self: center;
background: #0E1117;
border-radius: 34px;
padding: 8px;
box-shadow: var(--shadow-device);
}
.phone__screen {
position: relative;
height: 452px;
border-radius: 27px;
overflow: hidden;
background: #F2F4F8;
color: var(--ink);
font: 400 0.8125rem/1.38 var(--sans);
}
.phone__view {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
transition: opacity .4s var(--ease), transform .55s var(--ease-out);
}
.phone__url {
margin: 14px 14px 0;
padding: 7px 12px;
border-radius: 999px;
background: #FFFFFF;
color: var(--ink-2);
font-size: 0.75rem;
text-align: center;
box-shadow: 0 1px 0 rgba(16, 19, 26, .06);
}
.phone__page { flex: 1; display: flex; flex-direction: column; gap: 9px; margin: 12px 10px 12px; padding: 14px 12px; background: #FFFFFF; border-radius: 16px; }
.phone__h { font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 2px; }
.pf { display: grid; gap: 3px; }
.pf__l { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.pf__v { display: block; min-height: 30px; padding: 6px 8px; border: 1.2px solid #C8CED8; border-radius: 7px; background: #FFFFFF; }
.pf--msg .pf__v { min-height: 84px; }
.pf__t {
display: block;
clip-path: inset(0 100% 0 0);
transition: clip-path .9s cubic-bezier(.45, .05, .55, .95);
}
.pf--msg .pf__t { clip-path: none; opacity: 0; transform: translateY(4px); transition: opacity .9s var(--ease), transform .9s var(--ease-out); }
.edemo[data-flags~="f2"] .pf--msg .pf__t { opacity: 1; transform: none; }
.edemo[data-flags~="f1"] .pf-1,
.edemo[data-flags~="f2"] .pf-2 { clip-path: inset(0 0 0 0); }
.phone__send {
margin-top: auto;
padding: 10px;
border-radius: 9px;
background: var(--lapis);
color: #FFFFFF;
font-weight: 700;
text-align: center;
transition: transform .15s var(--ease), background-color .2s;
}
.edemo[data-flags~="send"] .phone__send { transform: scale(.95); background: var(--lapis-deep); }
.phone__msgs { opacity: 0; transform: translateX(24px); }
.edemo[data-flags~="sent"] .phone__web { opacity: 0; transform: translateX(-24px); }
.edemo[data-flags~="sent"] .phone__msgs { opacity: 1; transform: none; }
.phone__bar {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 14px 11px;
background: #FFFFFF;
border-bottom: 1px solid #DDE2EA;
}
.phone__bar b { display: block; font-size: 0.875rem; }
.phone__bar small { display: block; color: var(--muted); font-size: 0.75rem; }
.phone__av {
width: 32px;
height: 32px;
flex: none;
border-radius: 50%;
background: var(--lapis);
color: #FFFFFF;
display: grid;
place-items: center;
font: 700 0.75rem/1 var(--sans);
}
.phone__thread { flex: 1; display: flex; flex-direction: column; padding: 6px 11px 12px; overflow: hidden; }
.phone__thread--end { justify-content: flex-end; }
.bw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.bw > div { overflow: hidden; min-height: 0; }
.bub {
margin-top: 8px;
max-width: 88%;
width: max-content;
padding: 8px 11px;
border-radius: 15px;
border-bottom-left-radius: 5px;
background: #FFFFFF;
box-shadow: 0 1px 0 rgba(16, 19, 26, .07);
opacity: 0;
transform: translateY(8px);
transition: opacity .3s var(--ease), transform .45s var(--ease-out);
}
.bw--me .bub { margin-left: auto; background: #D9E0FF; border-bottom-left-radius: 15px; border-bottom-right-radius: 5px; }
.edemo[data-flags~="ack"] .b-ack,
.edemo[data-flags~="rep"] .b-rep,
.edemo[data-flags~="yes"] .b-yes { grid-template-rows: 1fr; }
.edemo[data-flags~="ack"] .b-ack .bub,
.edemo[data-flags~="rep"] .b-rep .bub,
.edemo[data-flags~="yes"] .b-yes .bub { opacity: 1; transform: none; }
.board {
--row-h: 64px;
--row-gap: 8px;
min-width: 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--shadow-device);
padding: 14px 14px 16px;
}
.board__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 12px; }
.board__title { font-weight: 800; font-size: var(--fs-18); letter-spacing: -0.01em; }
.board__meta { color: var(--muted); font-size: var(--fs-14); }
.board__list {
list-style: none;
position: relative;
height: calc(4 * var(--row-h) + 3 * var(--row-gap));
}
.row {
--pos: 0;
--enter: 0px;
--strip: var(--lapis);
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--row-h);
display: grid;
grid-template-columns: 4px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding-right: 12px;
background: var(--mist-2);
border-radius: var(--r-ui);
overflow: hidden;
transform: translateY(calc(var(--pos) * (var(--row-h) + var(--row-gap)) + var(--enter)));
transition: transform .7s var(--ease-out), opacity .35s var(--ease), background-color .3s var(--ease);
}
.row__strip { align-self: stretch; background: var(--strip); transition: background-color .3s var(--ease); }
.row__body { min-width: 0; display: grid; gap: 1px; }
.row__who { font-weight: 700; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__said { color: var(--ink-2); font-size: var(--fs-14); }
.row__said em { font-style: normal; font-weight: 600; color: var(--ink); }
.row__said em::after { content: " \00b7"; font-weight: 400; color: var(--muted); }
.row__side { display: grid; justify-items: end; gap: 3px; }
.row__time { color: var(--muted); font-size: 0.75rem; }
.board .chip { font-size: 0.8125rem; }
.swap { display: grid; min-width: 0; }
.swap > .sw {
grid-area: 1 / 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transition: opacity .3s var(--ease);
}
.swap--end > .sw { justify-self: end; }
.row__said .sw-0,
.row--priya .sw-0,
.row--ahmed .sw-0,
.row--sam .sw-new,
.row--kerry .sw-wait { opacity: 1; }
.row--priya { --pos: 0; }
.row--ahmed { --pos: 1; }
.row--kerry { --pos: 2; --strip: #F2D675; }
.row--sam { --pos: 0; --enter: -14px; --strip: var(--carbon); opacity: 0; }
.edemo[data-flags~="arrive"] .row--sam { --enter: 0px; opacity: 1; }
.edemo[data-flags~="arrive"] .row--priya { --pos: 1; }
.edemo[data-flags~="arrive"] .row--ahmed { --pos: 2; }
.edemo[data-flags~="arrive"] .row--kerry { --pos: 3; }
.edemo[data-flags~="rise"] .row--kerry { --pos: 0; --strip: var(--carbon); background: var(--carbon-soft); }
.edemo[data-flags~="rise"] .row--sam { --pos: 1; }
.edemo[data-flags~="rise"] .row--priya { --pos: 2; }
.edemo[data-flags~="rise"] .row--ahmed { --pos: 3; }
.edemo[data-flags~="rise"] .row--kerry .sw-wait { opacity: 0; }
.edemo[data-flags~="rise"] .row--kerry .sw-due { opacity: 1; }
.edemo[data-flags~="rise"]:not([data-flags~="kown"]) .row--kerry .chip--due { animation: due-ping 1s ease-out 2; }
.edemo[data-flags~="kown"] .row--kerry { --strip: var(--lapis); background: var(--mist-2); }
.edemo[data-flags~="kown"] .row--kerry .sw-due { opacity: 0; }
.edemo[data-flags~="kown"] .row--kerry .sw-kown { opacity: 1; }
.edemo[data-flags~="ack"] .row--sam .sw-0 { opacity: 0; }
.edemo[data-flags~="ack"] .row--sam .sw-1 { opacity: 1; }
.edemo[data-flags~="own"] .row--sam { --strip: var(--lapis); }
.edemo[data-flags~="own"] .row--sam .sw-new { opacity: 0; }
.edemo[data-flags~="own"] .row--sam .sw-own { opacity: 1; }
.edemo[data-flags~="rep"] .row--sam .sw-1 { opacity: 0; }
.edemo[data-flags~="rep"] .row--sam .sw-2 { opacity: 1; }
.edemo[data-flags~="rep"] .row--sam .sw-own { opacity: 0; }
.edemo[data-flags~="rep"] .row--sam .sw-rep { opacity: 1; }
.edemo[data-flags~="yes"] .row--sam .sw-2 { opacity: 0; }
.edemo[data-flags~="yes"] .row--sam .sw-3 { opacity: 1; }
.edemo[data-flags~="bkd"] .row--sam { --strip: var(--ready); }
.edemo[data-flags~="bkd"] .row--sam .sw-rep { opacity: 0; }
.edemo[data-flags~="bkd"] .row--sam .sw-bkd { opacity: 1; }
@keyframes due-ping {
0% { box-shadow: 0 0 0 0 rgba(255, 212, 59, .95); }
100% { box-shadow: 0 0 0 10px rgba(255, 212, 59, 0); }
}
@media (max-width: 479px) {
.board { padding: 12px 10px 12px; --row-h: 66px; }
.row { gap: 10px; padding-right: 10px; }
.row__who { font-size: var(--fs-14); }
.row__said { font-size: 0.8125rem; }
.board .chip { font-size: 0.75rem; padding: 4px 8px 4px 7px; }
}
.steps { position: relative; margin-top: 22px; }
.steps__line { position: absolute; left: 10%; right: 10%; top: 7px; height: 2px; background: var(--line-strong); }
.steps__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--lapis); transition: width .6s var(--ease-out); }
.steps ol { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps li { display: grid; justify-items: center; gap: 8px; font-size: var(--fs-14); line-height: 1.25; color: var(--muted); text-align: center; transition: color .3s; }
.steps i {
width: 16px;
height: 16px;
background: var(--paper);
border: 2px solid var(--line-strong);
transition: background-color .3s, border-color .3s, transform .35s var(--ease-out);
}
.edemo[data-flags~="s1"] .s1, .edemo[data-flags~="s2"] .s2, .edemo[data-flags~="s3"] .s3, .edemo[data-flags~="s4"] .s4, .edemo[data-flags~="s5"] .s5,
.odemo[data-flags~="b1"] .s1, .odemo[data-flags~="b2"] .s2, .odemo[data-flags~="b3"] .s3, .odemo[data-flags~="b4"] .s4, .odemo[data-flags~="b5"] .s5 { color: var(--ink); }
.edemo[data-flags~="s1"] .s1 i, .edemo[data-flags~="s2"] .s2 i, .edemo[data-flags~="s3"] .s3 i, .edemo[data-flags~="s4"] .s4 i, .edemo[data-flags~="s5"] .s5 i,
.odemo[data-flags~="b1"] .s1 i, .odemo[data-flags~="b2"] .s2 i, .odemo[data-flags~="b3"] .s3 i, .odemo[data-flags~="b4"] .s4 i, .odemo[data-flags~="b5"] .s5 i {
background: var(--lapis);
border-color: var(--lapis);
transform: scale(1.1);
}
.edemo[data-flags~="s2"] .steps__fill, .odemo[data-flags~="b2"] .steps__fill { width: 25%; }
.edemo[data-flags~="s3"] .steps__fill, .odemo[data-flags~="b3"] .steps__fill { width: 50%; }
.edemo[data-flags~="s4"] .steps__fill, .odemo[data-flags~="b4"] .steps__fill { width: 75%; }
.edemo[data-flags~="s5"] .steps__fill, .odemo[data-flags~="b5"] .steps__fill { width: 100%; }
@media (max-width: 559px) {
.steps__line { top: 31px; }
.steps li { grid-template-rows: 18px 16px 18px; gap: 6px; font-size: 0.8125rem; white-space: nowrap; }
.steps li span { grid-row: 3; }
.steps li i { grid-row: 2; }
.steps li:nth-child(even) span { grid-row: 1; }
}
.odemo__stage {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: 22px;
align-items: center;
transition: opacity .35s var(--ease);
}
@media (max-width: 779px) { .odemo__stage { grid-template-columns: minmax(0, 1fr); } }
.phone--chat .phone__screen { display: flex; flex-direction: column; background: #E9EDF3; }
.phone--chat .phone__thread { padding-bottom: 10px; }
.od-lnk { display: block; margin-top: 7px; padding: 7px 9px; border-radius: 9px; background: var(--mist); border-left: 3px solid var(--lapis); transition: background-color .2s; }
.od-lnk b { display: block; font-size: 0.8125rem; }
.od-lnk small { display: block; font-size: 0.75rem; color: var(--muted); }
.od-input { position: relative; display: flex; align-items: center; margin: 0 10px 11px; padding: 0 12px; height: 38px; border-radius: 19px; background: #FFFFFF; color: #8A93A3; overflow: hidden; }
.od-ph, .od-typed { position: absolute; left: 12px; right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s; }
.od-typed { color: var(--ink); opacity: 0; }
.od-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 76%;
background: #FFFFFF;
border-radius: 20px 20px 0 0;
box-shadow: 0 -12px 30px rgba(16, 19, 26, .2);
padding: 10px 13px 13px;
display: flex;
flex-direction: column;
gap: 6px;
transform: translateY(106%);
transition: transform .55s var(--ease-out);
}
.od-grab { width: 38px; height: 4px; border-radius: 2px; background: #D5DAE2; margin: 0 auto 6px; }
.od-sh b { display: block; font-size: 0.9375rem; }
.od-sh small { display: block; color: var(--muted); font-size: 0.75rem; margin-bottom: 4px; }
.od-it { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #F2F4F8; transition: background-color .3s var(--ease); }
.od-it .num { color: var(--ink-2); font-size: 0.72rem; }
.od-q { position: relative; justify-self: end; width: 28px; height: 24px; }
.od-q span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7px; font: 600 0.75rem/1 var(--mono); transition: opacity .25s, transform .35s var(--ease-out); }
.od-q .add { background: #FFFFFF; color: var(--lapis); border: 1px solid #C9D1F7; }
.od-q .n { background: var(--lapis); color: #FFFFFF; opacity: 0; transform: scale(.6); }
.od-send { margin-top: auto; border-radius: 12px; background: var(--lapis); color: #FFFFFF; font: 700 0.875rem/1 var(--sans); padding: 13px; text-align: center; transition: transform .15s var(--ease), background-color .2s; }
.od-send .num { font-size: 0.78rem; }
.till { min-width: 0; background: #10131A; color: #E9ECF2; border-radius: 16px; padding: 12px 12px 14px; box-shadow: var(--shadow-device); --gap: 8px; --th: 92px; --colh: 30px; }
.till__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-14); padding: 2px 4px 10px; color: #C3C9D4; }
.till__top b { color: #FFFFFF; font-weight: 700; }
.till__top .num { font-size: 0.75rem; }
.till__cols { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); min-height: calc(var(--colh) + var(--gap) + 2 * var(--th) + var(--gap)); }
.till__col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.till__h { height: var(--colh); display: flex; align-items: center; gap: 7px; padding: 0 9px; border-radius: 8px; background: #1A202B; font: 600 0.8125rem/1 var(--sans); color: #C3C9D4; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--new { background: var(--carbon); }
.dot--acc { background: #8FA2FF; }
.dot--rdy { background: #3FCB8E; }
.tk {
--strip: #8A93A3;
position: relative;
height: var(--th, 92px);
background: #FFFFFF;
color: var(--ink);
border-radius: 8px;
padding: 11px 9px 8px;
display: flex;
flex-direction: column;
gap: 3px;
font-size: 0.75rem;
line-height: 1.3;
overflow: hidden;
}
.tk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--strip); transition: background-color .3s; }
.tk__no { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font: 700 0.9375rem/1 var(--mono); }
.tk__no span { font: 500 0.6875rem/1 var(--mono); color: var(--ink-2); }
.tk__who { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk__act { margin-top: auto; align-self: flex-start; position: relative; height: 22px; }
.tk__act span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-weight: 600; font-size: 0.6875rem; white-space: nowrap; }
.tk--acc { --strip: var(--lapis); }
.tk--rdy { --strip: var(--ready); }
.tk--47, .tk--static { --strip: var(--carbon); }
.a-acc { background: var(--lapis); color: #FFFFFF; }
.a-rdy { background: var(--lapis-soft); color: var(--lapis); }
.a-col { background: var(--ready-soft); color: var(--ready-ink); }
.till .tk--47 {
position: absolute;
top: calc(var(--colh) + var(--gap));
left: 0;
width: calc((100% - 2 * var(--gap)) / 3);
opacity: 0;
transform: translate(0, -18px);
transition: transform .75s var(--ease-out), opacity .35s var(--ease);
}
.till .tk--47 .tk__act span { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .2s; }
.till .tk--47 .tk__act .a-acc { position: relative; opacity: 1; }
.odemo[data-flags~="typing"] .od-typed { opacity: 1; }
.odemo[data-flags~="typing"] .od-ph { opacity: 0; }
.odemo[data-flags~="msg"] .b-msg, .odemo[data-flags~="link"] .b-link, .odemo[data-flags~="sent"] .b-sent,
.odemo[data-flags~="accepted"] .b-acc, .odemo[data-flags~="ready"] .b-rdy { grid-template-rows: 1fr; }
.odemo[data-flags~="msg"] .b-msg .bub, .odemo[data-flags~="link"] .b-link .bub, .odemo[data-flags~="sent"] .b-sent .bub,
.odemo[data-flags~="accepted"] .b-acc .bub, .odemo[data-flags~="ready"] .b-rdy .bub { opacity: 1; transform: none; }
.odemo[data-flags~="sheet"] .od-lnk { background: var(--lapis-soft); }
.odemo[data-flags~="sheet"] .od-sheet { transform: none; }
.odemo[data-flags~="item1"] .i1, .odemo[data-flags~="item2"] .i2 { background: var(--lapis-soft); }
.odemo[data-flags~="item1"] .i1 .n, .odemo[data-flags~="item2"] .i2 .n { opacity: 1; transform: none; }
.odemo[data-flags~="item1"] .i1 .add, .odemo[data-flags~="item2"] .i2 .add { opacity: 0; }
.odemo[data-flags~="send"] .od-send { transform: scale(.97); background: var(--lapis-deep); }
.odemo[data-flags~="ticket"] .till .tk--47 { opacity: 1; transform: translate(0, 0); }
.odemo[data-flags~="ticket"]:not([data-flags~="accepted"]) .till .tk--47 { animation: tk-ping 1.1s ease-out .35s 2; }
.odemo[data-flags~="accepted"] .till .tk--47 { transform: translate(calc(100% + var(--gap)), calc(var(--th) + var(--gap))); --strip: var(--lapis); }
.odemo[data-flags~="ready"] .till .tk--47 { transform: translate(calc(200% + 2 * var(--gap)), calc(var(--th) + var(--gap))); --strip: var(--ready); }
.odemo[data-flags~="accepted"] .till .tk--47 .a-acc { opacity: 0; }
.odemo[data-flags~="accepted"]:not([data-flags~="ready"]) .till .tk--47 .a-rdy { opacity: 1; }
.odemo[data-flags~="ready"] .till .tk--47 .a-col { opacity: 1; }
@keyframes tk-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 212, 59, .85); } 100% { box-shadow: 0 0 0 12px rgba(255, 212, 59, 0); } }
@media (max-width: 479px) {
.till { padding: 10px 8px 12px; --gap: 6px; }
.tk { padding: 10px 7px 7px; }
.tk__no span { display: none; }
.tk__act span { padding: 0 6px; font-size: 0.65rem; }
.till__h { padding: 0 7px; font-size: 0.75rem; }
}
.hero { padding-block: clamp(36px, 2rem + 3vw, 80px) clamp(56px, 3.5rem + 3vw, 104px); }
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(32px, 4vw, 64px);
align-items: center;
}
.hero .h1 { font-size: clamp(2.5rem, 1.1rem + 3.2vw, 3.625rem); max-width: 13ch; }
.hero .lead { margin-top: 22px; }
.hero__aside { margin-top: 24px; color: var(--ink-2); font-size: var(--fs-16); }
.hero__aside .link { font-weight: 600; margin-left: 4px; }
.hero__trust { margin-top: 10px; color: var(--muted); font-size: var(--fs-14); }
.hero__trust a { color: var(--ink-2); }
.hero__demo { min-width: 0; }
@media (max-width: 1099px) {
.hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero .h1 { max-width: 16ch; }
.hero__demo { max-width: 760px; }
}
.pagehead { padding-block: clamp(40px, 2rem + 4vw, 104px) clamp(40px, 2rem + 3vw, 80px); }
.pagehead .h1 { max-width: 18ch; }
.pagehead .h1.pagehead__wide { max-width: 22ch; }
.pagehead .lead { margin-top: 20px; }
.pagehead--narrow .h1 { max-width: none; }
.lead--big { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); color: var(--ink); max-width: 30ch; }
.pagehead__grid {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: 32px clamp(32px, 5vw, 80px);
align-items: end;
}
@media (max-width: 959px) { .pagehead__grid { grid-template-columns: minmax(0, 1fr); } }
.pagehead--split .leak { width: 100%; }
.crumb { color: var(--lapis); text-decoration: none; margin-right: 2px; }
.crumb::after { content: "\2192"; margin-left: 8px; color: var(--muted); }
.crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
.kicker:has(.crumb)::before { display: none; }
.status-line {
margin-top: 22px;
display: flex;
gap: 10px;
align-items: baseline;
color: var(--ink-2);
font-size: var(--fs-16);
max-width: 70ch;
}
.status-line::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ready); transform: translateY(-1px); }
.prose .status-line { margin-top: 24px; }
.updated { margin-top: 12px; color: var(--muted); }
.problem__lead { margin-top: 20px; }
.problem__after { margin-top: 16px; font-weight: 600; color: var(--ink); }
.section--mist .leak__row { border-color: var(--line-strong); }
.section--mist .leak__rows { border-color: var(--line-strong); }
.section__head--row {
max-width: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 12px 32px;
}
.section__more { font-weight: 600; }
.prose .body + .body { margin-top: 14px; }
.prose > .lead + .body { margin-top: 16px; }
.prose > * + .founder__links { margin-top: 18px; }
.prose--intro { max-width: 820px; }
.prose--intro .body { margin-top: 18px; }
.cost__after { margin-top: 18px; }
.founder-slot { max-width: 860px; }
.work--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 4vw, 64px); align-items: center; }
.showcase .section__head { margin-bottom: 0; }
@media (max-width: 1099px) {
.showcase { grid-template-columns: minmax(0, 1fr); }
.showcase .edemo { max-width: 760px; }
}
.page-nazm .odemo { max-width: 980px; }
.contact__intro .founder--compact { margin-top: 32px; }
.screen {
margin: 0;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--paper);
box-shadow: var(--shadow-device);
overflow: hidden;
}
.screen__bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid var(--line);
background: var(--mist-2);
font-weight: 700;
font-size: var(--fs-16);
}
.screen__live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 600; color: var(--ready-ink); }
.screen__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ready); }
.screen__cap { padding: 12px 18px; border-top: 1px solid var(--line); font-size: var(--fs-14); color: var(--muted); }
.dash { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 420px; font-size: var(--fs-14); }
.dash__side { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--mist-2); }
.dash__side span { padding: 8px 10px; border-radius: 6px; color: var(--ink-2); }
.dash__side .is-on { background: var(--lapis-soft); color: var(--lapis); font-weight: 600; }
.dash__user { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.dash__user i, .job em i {
font-style: normal;
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
font-size: 0.6875rem;
font-weight: 700;
}
.dash__main { padding: 18px 20px 20px; display: grid; gap: 16px; align-content: start; }
.dash__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dash__top b { font-size: var(--fs-18); }
.dash__btn { padding: 7px 12px; border-radius: 8px; background: var(--lapis); color: #FFFFFF; font-weight: 600; }
.dash__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash__tiles p { border: 1px solid var(--line); border-radius: var(--r-ui); padding: 12px 14px; display: grid; gap: 2px; }
.dash__tiles span { color: var(--muted); }
.dash__tiles b { font-size: 1.5rem; font-weight: 600; }
.dash__tiles small { color: var(--muted); font-size: 0.75rem; }
.dash__cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.dash__panel { border: 1px solid var(--line); border-radius: var(--r-ui); }
.dash__h { padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--line); }
.dash__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.dash__row:last-child { border-bottom: 0; }
.dash__row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__row span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__row em { font-style: normal; color: var(--muted); white-space: nowrap; }
.dash__row em.soon { color: var(--carbon-ink); font-weight: 700; }
.dash__act { padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.dash__act:last-child { border-bottom: 0; }
.dash__act small { display: block; color: var(--muted); font-size: 0.75rem; }
@media (max-width: 899px) {
.dash { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.dash__side { display: none; }
.dash__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
.dash__main { padding: 14px 12px; }
.dash__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dash__tiles p { padding: 8px; }
.dash__tiles b { font-size: 1.1rem; }
.dash__row { grid-template-columns: minmax(0, 1fr) auto; }
.dash__row span { display: none; }
}
.jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.jobs__col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; display: grid; gap: 8px; align-content: start; }
.jobs__h { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--fs-14); padding: 2px 2px 4px; }
.jobs__h .num { color: var(--muted); }
.job { border: 1px solid var(--line); border-left: 4px solid var(--lapis); border-radius: var(--r-ui); padding: 10px 12px; display: grid; gap: 2px; font-size: var(--fs-14); background: var(--paper); }
.job b { font-weight: 600; }
.job > span { color: var(--ink-2); }
.job em { font-style: normal; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; color: var(--muted); }
.job--soon { border-left-color: var(--carbon); }
.job--soon em .num { color: var(--carbon-ink); font-weight: 700; }
.job--done { border-left-color: var(--ready); }
.job--done em > span { color: var(--ready-ink); font-weight: 700; }
@media (max-width: 899px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .jobs { grid-template-columns: minmax(0, 1fr); } }
.lookup__why { margin-top: 18px; }
.lookup { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-float); padding: 20px; }
.lookup label { display: block; font-weight: 600; margin-bottom: 6px; }
.lookup__row { display: flex; gap: 10px; }
.lookup input {
flex: 1;
min-width: 0;
font: 500 var(--fs-18)/1 var(--mono);
padding: 10px 12px;
min-height: 46px;
border: 1.5px solid var(--field);
border-radius: var(--r-ui);
color: var(--ink);
}
.lookup input:focus-visible { outline: none; border-color: var(--lapis); box-shadow: 0 0 0 3px var(--lapis-soft); }
.lookup__out { margin-top: 16px; border-top: 1px solid var(--line); }
.lookup__out > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lookup__out dt { color: var(--muted); font-size: var(--fs-16); }
.lookup__out dd { min-height: 1.6em; font-weight: 600; }
.lookup__out dd.is-in { animation: fill-in .45s var(--ease-out); }
.lookup__msg { margin-top: 12px; font-size: var(--fs-16); color: var(--ink-2); min-height: 1.6em; }
.lookup__note { margin-top: 14px; }
@keyframes fill-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) { .lookup__out > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.chase { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-float); padding: 20px; }
.chase__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.chase__t { font-weight: 700; }
.chase__s { color: var(--muted); font-size: var(--fs-16); }
.chase__items { list-style: none; margin-top: 14px; border-top: 1px solid var(--line); }
.chase__items li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.chase__items label { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.chase__items input { width: 24px; height: 24px; accent-color: var(--lapis); flex: none; }
.chase__items em { font-style: normal; font-size: var(--fs-14); font-weight: 600; color: var(--carbon-ink); }
.chase__items li.is-in span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.chase__items li.is-in em { color: var(--ready-ink); }
.chase__line { margin-top: 16px; }
.chase__lbl { font-size: var(--fs-14); font-weight: 600; color: var(--muted); }
.chase__line ol { list-style: none; display: flex; gap: 8px; margin-top: 8px; }
.chase__line li { padding: 6px 10px; border-radius: 999px; background: var(--lapis-soft); color: var(--lapis); font-size: var(--fs-14); font-weight: 600; transition: background-color .3s, color .3s; }
.chase__end { margin-top: 10px; font-size: var(--fs-16); color: var(--ink-2); }
.chase__line.is-stopped li { background: var(--mist); color: var(--muted); text-decoration: line-through; }
.chase__line.is-stopped .chase__end { color: var(--ready-ink); font-weight: 600; }
.chase__reset { margin-top: 14px; }
.chase__reset::before { display: none; }
.log { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.log__card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; background: var(--paper); }
.log__h { font-size: var(--fs-14); font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.log__plain { font-size: var(--fs-18); }
.log__card--code { background: var(--ink); color: #E9ECF2; border-color: var(--ink); }
.log__card--code .log__h { color: #AEB6C4; }
.log__card--code dl { font: 400 0.8125rem/1.5 var(--mono); display: grid; gap: 4px; }
.log__card--code dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
.log__card--code dt { color: #8FA2FF; }
.log__card--code dd { overflow-wrap: anywhere; }
@media (max-width: 719px) { .log { grid-template-columns: minmax(0, 1fr); } }
.checks { list-style: none; border-top: 1px solid var(--line); }
.check {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 8px 20px;
padding: 24px 0;
border-bottom: 1px solid var(--line);
}
.check__n { font-size: var(--fs-16); color: var(--lapis); padding-top: 4px; }
.check p { margin-top: 6px; color: var(--ink-2); max-width: 70ch; }
@media (max-width: 479px) { .check { grid-template-columns: minmax(0, 1fr); } }
.ask__why { margin-top: 18px; }
.ask { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; box-shadow: var(--shadow-float); }
.ask__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ask__out {
margin-top: 18px;
padding: 18px 20px;
border-radius: var(--r-ui);
background: var(--mist-2);
border-left: 4px solid var(--lapis);
font-size: var(--fs-22);
line-height: 1.4;
font-weight: 500;
}
.ask__out b { color: var(--lapis); font-weight: 700; }
.ask__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
@media (max-width: 479px) { .ask__fields { grid-template-columns: minmax(0, 1fr); } }
.lastrow { display: grid; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; }
.lastrow .btn { justify-self: start; }
.about-head__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.about-head__person { margin: 0; }
.about-head__person img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--mist); }
.about-head__person figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.about-head__person figcaption span { color: var(--muted); }
@media (max-width: 899px) {
.about-head__grid { grid-template-columns: minmax(0, 1fr); }
.about-head__person { max-width: 280px; }
}
.name__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.name__pair > div { border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 22px 22px; background: var(--paper); }
.name__pair dt {
font-family: var(--urdu);
font-size: clamp(2.75rem, 2rem + 2.4vw, 3.75rem);
line-height: 2.1;
color: var(--lapis);
text-align: right;
overflow: hidden;
}
.name__pair dd b { display: block; font-size: var(--fs-22); color: var(--ink); margin-bottom: 4px; }
.name__pair dd { color: var(--ink-2); }
.name .lead { margin-top: 24px; }
@media (max-width: 479px) { .name__pair { grid-template-columns: minmax(0, 1fr); } }
.facts__why { margin-top: 16px; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.contact .lead { margin-bottom: 28px; }
.contact__side { display: grid; gap: 24px; }
.contact__side .form, .helps { background: var(--mist-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(20px, 3vw, 28px); }
.contact__side .form .h3, .helps .h3 { margin-bottom: 4px; }
.helps dl { margin-top: 12px; display: grid; gap: 14px; }
.helps dt { font-weight: 700; }
.helps dd { color: var(--ink-2); }
.helps .actions { margin-top: 20px; }
.helps .btn { overflow-wrap: anywhere; }
@media (max-width: 959px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
.legal { max-width: 46rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 1rem; }
.legal h2 { font-size: var(--fs-22); font-weight: 700; margin: 2.5rem 0 .75rem; }
.legal ul { padding-left: 1.25rem; display: grid; gap: .5rem; }
.legal strong { color: var(--ink); }
.legal a { color: var(--lapis); text-underline-offset: 3px; }
.legal__card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 20px 18px; background: var(--mist-2); }
.legal__card dt { font-weight: 600; font-size: var(--fs-16); color: var(--ink); margin-top: 12px; }
.legal__card dd { color: var(--ink-2); }
.runs { list-style: none; counter-reset: run; display: grid; gap: 0; border-top: 1px solid var(--line); }
.runs li { counter-increment: run; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.runs li::before {
content: counter(run);
grid-row: span 2;
display: grid;
place-items: center;
width: 36px;
height: 36px;
background: var(--ink);
color: var(--paper);
font: 500 var(--fs-14)/1 var(--mono);
}
.runs p { color: var(--ink-2); }
.notfound { min-height: 50vh; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -6px; margin-bottom: clamp(22px, 3vw, 34px); font-size: var(--fs-14); color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--lapis); }
.crumbs [aria-current] { color: var(--ink); }
.phead { padding-block: clamp(28px, 1.5rem + 2vw, 56px) clamp(56px, 3rem + 3vw, 104px); }
.phead__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 40px clamp(40px, 5vw, 72px);
align-items: center;
}
.phead__grid--text { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.phead .h1 { margin-top: 26px; font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.375rem); line-height: 1.03; letter-spacing: -0.035em; }
.phead .lead { margin-top: 20px; }
.phead .actions { margin-top: 28px; }
.phead__visual { min-width: 0; }
.phead__visual .mini { box-shadow: var(--shadow-device); }
.phead__visual .mini--foyer { padding: 20px; }
.phead__cap { margin-top: 12px; font-size: var(--fs-14); color: var(--muted); }
@media (max-width: 1023px) {
.phead__grid { grid-template-columns: minmax(0, 1fr); }
.phead__visual { max-width: 640px; }
}
.plockup__name {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: clamp(2.25rem, 1.7rem + 1.6vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
}
.plockup__name .pdot { width: 17px; height: 17px; }
.plockup__by { margin-top: 10px; padding-left: 32px; font-size: var(--fs-14); color: var(--muted); }
.plockup--service .plockup__name { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); }
.plockup--service .pdot { background: var(--ink); width: 13px; height: 13px; }
.plockup--service .plockup__by { padding-left: 28px; }
.standbox { margin-top: 28px; padding: 14px 16px; background: var(--mist-2); border: 1px solid var(--line); border-radius: 12px; max-width: 560px; }
.stands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stand { padding: clamp(24px, 2.4vw, 32px); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 10px; }
.stand .kicker { margin-bottom: 4px; }
.stand .h3 { font-size: var(--fs-22); }
.stand p { color: var(--ink-2); font-size: var(--fs-16); }
.stands + .also { margin-top: clamp(40px, 4vw, 56px); }
@media (max-width: 759px) { .stands { grid-template-columns: minmax(0, 1fr); } }
.fits {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
gap: 28px clamp(32px, 5vw, 64px);
align-items: center;
padding: clamp(24px, 3vw, 40px);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 20px;
}
.fits .pname { font-size: 1.75rem; }
.fits__text { display: flex; flex-direction: column; gap: 14px; }
.fits__text p { color: var(--ink-2); }
.fits__text .actions { margin-top: 8px; }
.fits .mini { box-shadow: var(--shadow-device); }
@media (max-width: 899px) { .fits { grid-template-columns: minmax(0, 1fr); } }
.week { list-style: none; border-top: 1px solid var(--line); }
.week li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 24px; padding: clamp(22px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); }
.week__n { display: grid; place-items: center; width: 40px; height: 40px; grid-row: span 3; }
.week__n::before { content: ""; position: absolute; width: 28px; height: 28px; background: var(--lapis); transform: rotate(45deg); }
.week__n { position: relative; color: #FFFFFF; font: 500 var(--fs-14)/1 var(--mono); }
.week__n span { position: relative; }
.week h3 { margin-top: 6px; }
.week p { color: var(--ink-2); max-width: 70ch; }
.week p + p { margin-top: 6px; }
.week small { display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-14); }
@media (max-width: 479px) { .week li { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; } }
.inkcard {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 32px 48px;
align-items: center;
padding: clamp(28px, 3vw, 44px);
background: var(--ink);
border-radius: 20px;
color: var(--on-ink);
}
.inkcard .h2 { color: #FFFFFF; }
.inkcard p { color: var(--on-ink); }
.inkcard p + p { margin-top: 12px; }
@media (max-width: 899px) { .inkcard { grid-template-columns: minmax(0, 1fr); } }
.dash--compact { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.dash--compact .dash__side { display: none; }
.dash--compact .dash__cols { grid-template-columns: minmax(0, 1fr); }
.dash--compact .dash__panel + .dash__panel { display: none; }
.lockup-bi {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 22px;
margin-bottom: 28px;
padding: clamp(24px, 3vw, 36px);
background: var(--mist-2);
border: 1px solid var(--line);
border-radius: 16px;
color: var(--ink);
}
.mark--xl { width: 64px; height: 64px; }
.lockup-bi__en { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.lockup-bi__ur { font-family: var(--urdu); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); line-height: 1; color: var(--ink); padding-bottom: .3em; margin-left: auto; }
.ur--ink { color: var(--ink); }
.name__mark { margin-top: 18px; }
.more { margin-top: 28px; font-weight: 600; }
.section > .wrap > .means:first-child { margin-top: 0; }
.h2--xl {
font-size: clamp(2rem, 1.25rem + 2.3vw, 3rem);
line-height: 1.05;
letter-spacing: -0.032em;
}
.head-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px clamp(32px, 5vw, 64px);
align-items: end;
margin-bottom: clamp(32px, 3vw, 48px);
}
.head-split .lead { max-width: 46ch; }
@media (max-width: 899px) { .head-split { grid-template-columns: minmax(0, 1fr); } }
.home-hero {
padding-block: clamp(36px, 1.5rem + 3.5vw, 88px) clamp(56px, 3rem + 3.5vw, 104px);
overflow-x: clip;
}
.home-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
gap: clamp(40px, 5vw, 72px);
align-items: center;
}
.name-line { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 0.9375rem; color: var(--ink-2); }
.name-line__ur { font-family: var(--urdu); font-size: 1.625rem; line-height: 1; color: var(--ink); padding-bottom: .35em; }
.name-line__rule { width: 24px; height: 1px; background: var(--line-strong); flex: none; }
.home-hero .h1 {
font-size: clamp(2.75rem, 1.1rem + 4.7vw, 4.625rem);
line-height: .98;
letter-spacing: -0.04em;
}
.stop {
display: inline-block;
width: .16em;
height: .16em;
margin-left: .09em;
vertical-align: .035em;
background: var(--brand);
transform: rotate(45deg);
}
.home-hero .lead { margin-top: 26px; max-width: 35em; }
.home-hero__trust { margin-top: 20px; font-size: var(--fs-14); color: var(--muted); }
.home-hero__trust a { color: var(--ink-2); }
@media (max-width: 1099px) {
.home-hero__grid { grid-template-columns: minmax(0, 1fr); }
.home-hero .ordering { max-width: 620px; }
}
.ordering { margin: 0; }
.ordering__sheet {
position: relative;
background: var(--mist-2);
border-radius: 20px;
padding: 18px 20px 14px;
}
.ordering__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 2px 0 12px 36px;
}
.ordering__title { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-18); font-weight: 800; letter-spacing: -0.01em; }
.ordering__title .mark { width: 22px; height: 22px; margin-left: -32px; margin-right: 10px; }
.ordering__done { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 600; color: var(--ready-ink); white-space: nowrap; }
.ordering__done::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ready); }
.ordering__margin {
position: absolute;
top: 58px;
bottom: 18px;
left: 50px;
width: 1.5px;
background: var(--lapis-line);
transform-origin: top;
}
.ordering__list { list-style: none; position: relative; }
.slip {
position: relative;
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
align-items: center;
gap: 0 12px;
min-height: 60px;
padding: 5px 0;
}
.slip::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: #DFE4EC;
transform-origin: left;
}
.slip__dot { justify-self: center; width: 9px; height: 9px; background: var(--lapis); transform: rotate(45deg); }
.slip__card {
justify-self: start;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
padding: 7px 12px;
border: 1px solid transparent;
border-radius: 10px;
}
.slip__from { font-size: var(--fs-14); color: var(--muted); }
.slip__from .num { font-size: var(--fs-14); color: var(--muted); }
.slip__what { font-size: var(--fs-16); font-weight: 600; line-height: 1.3; color: var(--ink); }
.slip__chip { justify-self: end; }
.slip--1 { --i: 0; --x: 40px; --y: 188px; --r: -8deg; }
.slip--2 { --i: 1; --x: 232px; --y: 10px; --r: 6deg; }
.slip--3 { --i: 2; --x: 128px; --y: 146px; --r: -3deg; }
.slip--4 { --i: 3; --x: 246px; --y: -134px; --r: 9deg; --card: var(--carbon-soft); }
.slip--5 { --i: 4; --x: 14px; --y: -226px; --r: -6deg; }
.slip--6 { --i: 5; --x: 196px; --y: -166px; --r: 4deg; }
.slip--7 { --i: 6; --x: 70px; --y: -196px; --r: -10deg; }
.ordering__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 14px; }
.ordering__cap { font-size: var(--fs-14); color: var(--muted); }
.js .home-hero.is-play:not(.is-seen) .slip__card {
transform: translate(var(--x), var(--y)) rotate(var(--r));
background-color: var(--card, var(--paper));
border-color: var(--line-strong);
box-shadow: 0 14px 26px -14px rgba(16, 19, 26, .45);
}
.js .home-hero.is-play:not(.is-seen) .slip__dot { transform: rotate(45deg) scale(0); }
.js .home-hero.is-play:not(.is-seen) .slip__chip,
.js .home-hero.is-play:not(.is-seen) .ordering__in,
.js .home-hero.is-play:not(.is-seen) .ordering__done { opacity: 0; }
.js .home-hero.is-play:not(.is-seen) .slip::after { transform: scaleX(0); }
.js .home-hero.is-play:not(.is-seen) .ordering__margin { transform: scaleY(0); }
html:not(.js) .home-hero.is-play .ordering__margin, .home-hero.is-play.is-seen .ordering__margin { animation: draw-down .6s var(--ease-out) .95s both; }
html:not(.js) .home-hero.is-play .slip::after, .home-hero.is-play.is-seen .slip::after { animation: draw-across .5s var(--ease-out) both; animation-delay: calc(1.05s + var(--i) * .05s); }
html:not(.js) .home-hero.is-play .slip__card, .home-hero.is-play.is-seen .slip__card { animation: settle .95s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(1.5s + var(--i) * .16s); }
html:not(.js) .home-hero.is-play .slip__dot, .home-hero.is-play.is-seen .slip__dot { animation: press .4s var(--ease-out) both; animation-delay: calc(2.15s + var(--i) * .16s); }
html:not(.js) .home-hero.is-play .slip__chip, .home-hero.is-play.is-seen .slip__chip { animation: slide-in .35s var(--ease-out) both; animation-delay: calc(2.3s + var(--i) * .16s); }
html:not(.js) .home-hero.is-play .ordering__in, .home-hero.is-play.is-seen .ordering__in { animation: fade-in .5s var(--ease) 3.4s both; }
html:not(.js) .home-hero.is-play .ordering__done, .home-hero.is-play.is-seen .ordering__done { animation: fade-in .5s var(--ease) 3.65s both; }
.home-hero.is-play .stop { animation: stop-press .55s var(--ease-out) 3.9s both; }
@keyframes settle {
0%, 10% {
transform: translate(var(--x), var(--y)) rotate(var(--r));
background-color: var(--card, var(--paper));
border-color: var(--line-strong);
box-shadow: 0 14px 26px -14px rgba(16, 19, 26, .45);
}
100% { transform: none; background-color: rgba(255, 255, 255, 0); border-color: rgba(195, 202, 214, 0); box-shadow: 0 0 0 0 rgba(16, 19, 26, 0); }
}
@keyframes draw-down { from { transform: scaleY(0); } to { transform: none; } }
@keyframes draw-across { from { transform: scaleX(0); } to { transform: none; } }
@keyframes press {
0% { transform: rotate(45deg) scale(0); }
60% { transform: rotate(45deg) scale(1.4); }
100% { transform: rotate(45deg) scale(1); }
}
@keyframes slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes stop-press {
0% { opacity: 0; transform: translateY(-.7em) rotate(45deg) scale(.5); }
60% { opacity: 1; transform: translateY(.03em) rotate(45deg) scale(1.25); }
100% { opacity: 1; transform: rotate(45deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
html:not(.js) .home-hero.is-play .ordering__margin, .home-hero.is-play.is-seen .ordering__margin,
html:not(.js) .home-hero.is-play .slip::after, .home-hero.is-play.is-seen .slip::after { animation: soft-in .6s ease 2.9s both !important; }
html:not(.js) .home-hero.is-play .slip__card, .home-hero.is-play.is-seen .slip__card { animation: dissolve 3.4s linear both !important; }
html:not(.js) .home-hero.is-play .slip__dot, .home-hero.is-play.is-seen .slip__dot { animation: soft-in .5s ease 3s both !important; }
html:not(.js) .home-hero.is-play .slip__chip, .home-hero.is-play.is-seen .slip__chip { animation: soft-in .5s ease 3.15s both !important; }
html:not(.js) .home-hero.is-play .ordering__in, .home-hero.is-play.is-seen .ordering__in { animation: soft-in .5s ease 3.3s both !important; }
html:not(.js) .home-hero.is-play .ordering__done, .home-hero.is-play.is-seen .ordering__done { animation: soft-in .5s ease 3.5s both !important; }
.home-hero.is-play .stop { animation: soft-in .5s ease 3.7s both !important; }
}
@keyframes dissolve {
0%, 62% {
transform: translate(var(--x), var(--y)) rotate(var(--r));
background-color: var(--card, var(--paper));
border-color: var(--line-strong);
box-shadow: 0 14px 26px -14px rgba(16, 19, 26, .45);
opacity: 1;
}
74% {
transform: translate(var(--x), var(--y)) rotate(var(--r));
background-color: var(--card, var(--paper));
border-color: var(--line-strong);
box-shadow: 0 14px 26px -14px rgba(16, 19, 26, .45);
opacity: 0;
}
75% { transform: none; background-color: rgba(255, 255, 255, 0); border-color: rgba(195, 202, 214, 0); box-shadow: 0 0 0 0 rgba(16, 19, 26, 0); opacity: 0; }
90%, 100% { transform: none; background-color: rgba(255, 255, 255, 0); border-color: rgba(195, 202, 214, 0); box-shadow: 0 0 0 0 rgba(16, 19, 26, 0); opacity: 1; }
}
@keyframes soft-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 599px) {
.ordering__sheet { padding: 14px 12px 10px; border-radius: 16px; }
.ordering__head { padding-left: 30px; }
.ordering__title .mark { margin-left: -28px; margin-right: 6px; }
.ordering__done { display: none; }
.ordering__margin { left: 36px; top: 50px; }
.slip { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 8px; min-height: 64px; }
.slip__card { padding: 6px 10px; }
.slip__what { font-size: 0.9375rem; }
.slip__chip .chip { padding: 4px 8px 4px 7px; }
.slip--6, .slip--7 { display: none; }
.slip--1 { --x: 22px; --y: 150px; }
.slip--2 { --x: 70px; --y: 12px; }
.slip--3 { --x: 40px; --y: 112px; }
.slip--4 { --x: 64px; --y: -118px; }
.slip--5 { --x: 6px; --y: -196px; }
}
@media (max-width: 399px) {
.slip { grid-template-columns: 18px minmax(0, 1fr); }
.slip__chip { grid-column: 2; justify-self: start; margin: 0 0 6px 10px; }
}
.lost { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lost-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(24px, 2.4vw, 32px);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
}
.lost-card__n { font-size: var(--fs-14); color: var(--muted); }
.lost-card .h3 { font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); letter-spacing: -0.018em; }
.lost-card p { color: var(--ink-2); font-size: var(--fs-16); }
.lost-card__to {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--mist);
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
color: var(--ink);
text-decoration: none;
}
.lost-card__to small { display: block; margin-bottom: 8px; font-size: var(--fs-14); color: var(--muted); }
.lost-card__to .pname { font-size: 1.125rem; }
.lost-card__go { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--lapis); white-space: nowrap; }
.lost-card__to:hover .lost-card__go { color: var(--lapis-deep); }
.lost-card__to:hover .arr { transform: translateX(3px); }
.lost-card__to .arr { transition: transform .2s var(--ease); }
@media (max-width: 959px) { .lost { grid-template-columns: minmax(0, 1fr); } }
.measure-band { background: var(--ink); color: var(--on-ink); overflow: hidden; }
.measure-band__grid {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
.measure-band .kicker { color: var(--lapis-lift-2); }
.measure-band .h2 { color: #FFFFFF; }
.measure-band__text p { margin-top: 20px; font-size: var(--fs-18); line-height: 1.65; color: var(--on-ink); max-width: 44ch; }
.measure-band__text p.measure-band__turn { color: #FFFFFF; font-weight: 600; }
.ur { font-family: var(--urdu); font-size: 1.2em; line-height: 1; }
.measure-band .ur { color: #FFFFFF; }
.measure { margin: 0; }
.measure__svg { width: 100%; max-width: 460px; margin-inline: auto; overflow: visible; }
.measure__grid line { stroke: var(--ink-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.measure__ghost { fill: rgba(243, 245, 249, .06); }
.measure__pen { fill: none; stroke: var(--paper-ink); stroke-width: 5; stroke-dasharray: 100; stroke-dashoffset: 0; }
.measure__unit { fill: none; stroke: var(--brand-lift); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.measure__dot { fill: var(--brand-lift); transform-box: fill-box; transform-origin: center; transform: translate(0, 0) rotate(45deg); }
.measure__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 28px; font-size: var(--fs-14); color: var(--on-ink-2); }
.measure__key { display: inline-flex; align-items: center; gap: 8px; }
.measure__key::before { content: ""; width: 10px; height: 10px; flex: none; }
.measure__key--unit::before { border: 1.5px dashed var(--brand-lift); }
.measure__key--bowl::before { background: var(--paper-ink); }
.measure__key--dot::before { background: var(--brand-lift); transform: rotate(45deg) scale(.85); }
.measure.is-waiting .measure__grid,
.measure.is-waiting .measure__ghost,
.measure.is-waiting .measure__unit,
.measure.is-waiting .measure__cap { opacity: 0; }
.measure.is-waiting .measure__pen { stroke-dashoffset: 100; }
.measure.is-waiting .measure__dot { opacity: 0; transform: translate(0, 17.75px) rotate(0deg); }
.measure.is-drawn .measure__grid { transition: opacity .8s var(--ease); }
.measure.is-drawn .measure__ghost { transition: opacity .6s var(--ease) .3s; }
.measure.is-drawn .measure__unit { transition: opacity .4s var(--ease) .5s; }
.measure.is-drawn .measure__dot { transition: opacity .3s var(--ease) .75s, transform .9s cubic-bezier(.3, .7, .2, 1) 2.3s; }
.measure.is-drawn .measure__pen { transition: stroke-dashoffset 1.3s cubic-bezier(.45, .05, .3, 1) 1s; }
.measure.is-drawn .measure__cap { transition: opacity .6s var(--ease) 3s; }
.measure.is-gentle.is-waiting .measure__pen { stroke-dashoffset: 0; opacity: 0; }
.measure.is-gentle.is-waiting .measure__dot { opacity: 0; transform: translate(0, 0) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
.measure.is-drawn .measure__grid { transition: opacity .8s ease !important; }
.measure.is-drawn .measure__ghost { transition: opacity .6s ease .3s !important; }
.measure.is-drawn .measure__unit { transition: opacity .4s ease .5s !important; }
.measure.is-drawn .measure__pen { transition: opacity .9s ease 1s !important; }
.measure.is-drawn .measure__dot { transition: opacity .6s ease 2s !important; }
.measure.is-drawn .measure__cap { transition: opacity .6s ease 2.6s !important; }
}
@media (max-width: 899px) {
.measure-band__grid { grid-template-columns: minmax(0, 1fr); }
.measure__svg { max-width: 300px; }
}
.how-home .path { margin-top: 8px; }
.built { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bcard {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(24px, 2.4vw, 32px);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 18px;
}
.bcard .mini { margin-bottom: 8px; }
.bcard .pname { font-size: 1.625rem; }
.bcard__for { font-size: 0.9375rem; color: var(--muted); }
.bcard .h3 { font-size: 1.375rem; line-height: 1.22; }
.bcard__go { margin-top: auto; padding-top: 4px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.bcard__go::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.bcard:has(.bcard__go:hover) { border-color: var(--lapis); box-shadow: var(--shadow-float); }
.bcard:has(.bcard__go:focus-visible) { outline: 3px solid var(--lapis); outline-offset: 3px; }
.bcard__go:focus-visible { outline: none; }
.bcard--wide {
grid-column: span 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
gap: 20px 36px;
align-items: center;
background: var(--mist-2);
}
.bcard--wide .bcard__text { display: flex; flex-direction: column; gap: 14px; }
.bcard--wide .pname { font-size: 1.875rem; }
.bcard--wide .h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); letter-spacing: -0.022em; line-height: 1.15; }
.bcard--wide p.bcard__body { color: var(--ink-2); font-size: var(--fs-16); }
.bcard--wide .mini { margin: 0; box-shadow: var(--shadow-device); }
.bcard--custom {
grid-column: span 2;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 32px 48px;
align-items: center;
background: var(--ink);
border-color: var(--ink);
color: #FFFFFF;
padding: clamp(28px, 3vw, 44px);
}
.bcard--custom .kicker { color: var(--lapis-lift-2); margin-bottom: 0; }
.bcard--custom .h3 { color: #FFFFFF; font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.375rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.bcard--custom p { color: var(--on-ink); font-size: 1.0625rem; line-height: 1.6; }
.bcard--custom .bcard__text { display: flex; flex-direction: column; gap: 16px; }
.bcard--custom .btn { align-self: flex-start; margin-top: 4px; }
.svc { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.svc-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
gap: 24px;
align-items: center;
padding: 26px 30px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 18px;
}
.svc-card--plain { grid-template-columns: minmax(0, 1fr); }
.svc-card__text { display: flex; flex-direction: column; gap: 8px; }
.svc-card__for { font-size: 0.9375rem; color: var(--muted); }
.svc-card .h3 { font-size: 1.375rem; }
.svc-card p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.svc-card .status { font-size: var(--fs-14); }
.svc-card .mini { box-shadow: var(--shadow-float); }
.svc-card:has(.bcard__go:hover) { border-color: var(--lapis); box-shadow: var(--shadow-float); }
.svc-card:has(.bcard__go:focus-visible) { outline: 3px solid var(--lapis); outline-offset: 3px; }
@media (max-width: 1099px) {
.built { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
.built, .svc { grid-template-columns: minmax(0, 1fr); }
.bcard--wide, .bcard--custom { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}
.trades { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.trade {
height: 100%;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
padding: 24px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
color: var(--ink);
text-decoration: none;
transition: border-color .2s, box-shadow .2s;
}
.trade:hover { border-color: var(--lapis); box-shadow: var(--shadow-float); }
.trade__name { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.trade__line { display: block; margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.trade__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.trade__foot .pname { font-size: var(--fs-16); }
.trade__foot .arr { color: var(--lapis); transition: transform .2s var(--ease); }
.trade:hover .arr { transform: translateX(3px); }
@media (max-width: 1099px) { .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade { min-height: 190px; } }
@media (max-width: 439px) { .trades { grid-template-columns: minmax(0, 1fr); } .trade { min-height: 0; } }
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .25s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}