/* Kerja website: the shared base. Mobile first; the desktop layout starts at 1080 px.
   Each page adds its own file after this one (welcome.css, how.css, promise.css, download.css).
   Colours are defined once, here, from the app's src/theme/tokens.ts.
   ::backdrop is listed so the menu's scrim can read them too. */
:root,
::backdrop {
  --cream: #FBF4E4;        /* cream */
  --sand: #F3E6CF;         /* creamDeep, the boards' sand */
  --ink: #1D1A14;          /* ink */
  --ink-2: #3D372D;        /* ink2, body text under headlines */
  --ink-soft: #6E665A;     /* inkSoft, small grey text */
  --orange: #FF5B14;       /* orange: pills only */
  --orange-shadow: #C23F06;/* orangeShadow: pill shadows and text links */
  --lemon: #FFE14D;        /* lemon: highlights */
  --lagoon: #2F8C7E;       /* lagoon: dots only */
  --hairline: #E3D9C6;     /* hairline */
  --dot: #E3D3B4;          /* quoteMark: the small sand dot of the lists */
  --handle: #D6CDBB;       /* handle: the menu sheet's handle */
  --white: #FFFFFF;        /* white */

  --scrim: color-mix(in srgb, var(--ink) 40%, transparent);
  --font-head: "Bricolage", system-ui, sans-serif;
  --font-title: "Bricolage Title", "Bricolage", system-ui, sans-serif;
  --font-body: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bar-h: 64px;
}

/* Fonts: Latin subsets of the app's static files (see docs/specs/type-scale.md in the app).
   Bricolage 800 = Display (opsz 96), 700 = Headline (opsz 48); "Bricolage Title" 700 = Title (opsz 24). */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-display.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-headline.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Title"; src: url("fonts/bricolage-title.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/jakarta-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/jakarta-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/jakarta-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/jakarta-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/jakarta-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cream); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/26px var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg.i { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { border-radius: 6px; }
.pill:focus-visible, .chip:focus-visible, .round:focus-visible, .copy-btn:focus-visible { border-radius: 999px; }

.skip {
  position: absolute; left: 12px; top: -200px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--ink); color: var(--cream);
  font: 700 16px/1 var(--font-body); text-decoration: none;
}
.skip:focus { top: 10px; }

.wrap { width: min(100% - 40px, 640px); margin-inline: auto; }
main { display: block; }
main:focus { outline: none; }

/* ---------- Type ---------- */
.h1 { font: 800 46px/50px var(--font-head); letter-spacing: -.035em; color: var(--ink); }
.h2 { font: 800 32px/36px var(--font-head); letter-spacing: -.03em; text-wrap: balance; color: var(--ink); }
.lede { margin-top: 14px; font: 400 17px/26px var(--font-body); color: var(--ink-2); text-wrap: pretty; }
.body { font: 400 17px/26px var(--font-body); color: var(--ink-2); text-wrap: pretty; }
.caption { margin-top: 10px; font: 500 12px/16px var(--font-body); color: var(--ink-soft); text-align: center; }

/* Text links: orangeShadow (4.8:1 on cream, 5.2:1 on white). Pills keep orange. */
.link {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  color: var(--orange-shadow); font: 700 16px/23px var(--font-body);
  text-decoration: none; white-space: nowrap;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.plain { font: 700 16px/23px var(--font-body); color: var(--ink); white-space: nowrap; }
.sep { color: var(--ink-soft); font: 500 15px/24px var(--font-body); }
.contact { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--orange); color: var(--white);
  font: 700 19px/1 var(--font-body); white-space: nowrap; text-decoration: none;
  box-shadow: 0 4px 0 var(--orange-shadow);
  transition: background-color .15s, transform .1s, box-shadow .1s;
}
.pill:hover { background: var(--orange-shadow); }
.pill:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-shadow); }
.pill-block { display: flex; width: 100%; }

/* ---------- Top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: var(--cream); box-shadow: 0 1px 0 var(--hairline); }
.bar-in { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; }
.logo { display: flex; align-items: center; min-height: 44px; flex: none; border-radius: 8px; }
.logo img { height: 34px; width: auto; }
.bar-end { display: flex; align-items: center; gap: 8px; }
.nav { display: none; }
.bar-pill { height: 44px; padding: 0 18px; box-shadow: 0 3px 0 var(--orange-shadow); }
.round {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink);
}
@media (max-width: 339px) { .bar-pill { display: none; } }

/* ---------- Menu (mobile) ---------- */
html:has(.menu[open]) { overflow: hidden; }
.menu {
  position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0;
  width: 100%; max-width: none; max-height: 100dvh; overflow-y: auto;
  border: 0; padding: 0; background: var(--cream); color: var(--ink);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}
.menu::backdrop { background: var(--scrim); }
.menu-in { padding: 8px 20px 34px; }
.handle { width: 36px; height: 5px; border-radius: 3px; background: var(--handle); margin: 0 auto; }
.menu-head { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }
.menu-links { margin-top: 16px; }
.menu-links a {
  display: flex; align-items: center; height: 72px; border-bottom: 1px solid var(--hairline);
  font: 800 30px/1 var(--font-head); letter-spacing: -.03em; color: var(--orange-shadow); text-decoration: none;
}
.menu-links a[aria-current="page"] { color: var(--ink); }
.menu .pill { margin-top: 28px; }

/* ---------- Shared blocks ---------- */
.dots { display: flex; flex-direction: column; gap: 10px; }
.dots li { display: flex; gap: 12px; align-items: flex-start; font: 400 16px/24px var(--font-body); color: var(--ink-2); text-wrap: pretty; }
.dots li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--dot); }

.strip { padding: 22px 18px; border-radius: 24px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline); }
.strip ul { display: flex; flex-direction: column; gap: 12px; }
.strip li { display: flex; gap: 12px; align-items: flex-start; font: 600 17px/26px var(--font-body); color: var(--ink); text-wrap: pretty; }
.strip li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--lagoon); }
.strip .link { margin-top: 6px; margin-bottom: -10px; }

.phone { display: block; margin-inline: auto; }

.cs { margin-top: 88px; }
.cs-row {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: -20px; padding: 0 20px; scroll-padding-inline: 20px; scrollbar-width: none;
}
.cs-row::-webkit-scrollbar { display: none; }
.cs-row li {
  flex: none; width: 168px; min-height: 150px; padding: 14px; border-radius: 20px; background: var(--sand);
  display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start;
}
.badge {
  align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--lemon); color: var(--ink); font: 800 12px/1 var(--font-body); white-space: nowrap;
}
.cs-row p { font: 600 15px/21px var(--font-body); color: var(--ink); text-wrap: pretty; }

.last { margin-top: 88px; padding: 28px 24px 26px; border-radius: 28px; background: var(--lemon); }
.last .pill { margin-top: 24px; }

/* ---------- Footer ---------- */
.foot { margin-top: 88px; border-top: 1px solid var(--hairline); }
.foot-in {
  padding: 36px 0 44px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 18px;
  grid-template-areas: "logo" "tag" "links" "contact" "meaning" "small";
}
.foot .logo { grid-area: logo; justify-self: start; }
.foot .logo img { height: 32px; }
.foot-tag { grid-area: tag; font: 600 16px/24px var(--font-body); color: var(--ink); }
.foot-links { grid-area: links; display: flex; flex-wrap: wrap; column-gap: 22px; margin: -11px 0; }
.foot-links .link, .foot .contact .link, .foot .contact .plain { font-size: 15px; line-height: 22px; }
.foot .contact { grid-area: contact; margin: -11px 0; }
.foot-meaning { grid-area: meaning; font: 400 14px/20px var(--font-body); color: var(--ink-2); }
.foot-small { grid-area: small; display: flex; flex-direction: column; gap: 4px; font: 400 12px/18px var(--font-body); color: var(--ink-soft); }

/* A page's top block under the bar (How it works, Our promise). */
.page-top { padding-top: 40px; }

/* Section rhythm: the gap between a page's sections (88 on mobile, 150 on desktop). */
.sec { margin-top: 88px; }

/* ---------- 404 ---------- */
.lost { min-height: calc(100svh - var(--bar-h)); padding: 0 0 40px; display: flex; flex-direction: column; justify-content: center; }
.lost-icon { width: 88px; height: 88px; border-radius: 50%; background: var(--sand); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.lost .h1 { margin-top: 0; text-wrap: balance; }
.lost .link { align-self: flex-start; margin-top: 11px; font-size: 18px; line-height: 26px; }
main:has(> .lost) + .foot { margin-top: 0; }

/* ---------- Desktop ---------- */
@media (min-width: 1080px) {
  :root { --bar-h: 80px; }
  .wrap { width: min(100% - 80px, 1200px); }
  .bar-in { width: min(100% - 80px, 1200px); margin-inline: auto; padding: 0; }
  .logo img { height: 40px; }
  .bar-end { gap: 32px; }
  .nav { display: flex; align-items: center; gap: 32px; }
  .nav a { display: inline-flex; align-items: center; height: 44px; font: 700 16px/1 var(--font-body); color: var(--orange-shadow); text-decoration: none; }
  .nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .nav a[aria-current="page"] { color: var(--ink); }
  .bar-pill { padding: 0 20px; }
  .menu-btn, .menu { display: none !important; }

  .h1 { font-size: 84px; line-height: 88px; letter-spacing: -.04em; }
  .h2 { font-size: 56px; line-height: 60px; letter-spacing: -.035em; }
  .lede { margin-top: 20px; font-size: 22px; line-height: 34px; text-wrap: balance; }
  .body { font-size: 21px; line-height: 32px; }
  .pill { height: 60px; padding: 0 32px; }
  .pill-block { display: inline-flex; width: auto; }
  .link { font-size: 18px; line-height: 26px; }
  .plain { font-size: 18px; line-height: 26px; }
  .dots li { font-size: 18px; line-height: 28px; }
  .dots li::before { margin-top: 10px; }

  .strip { padding: 32px 40px; border-radius: 32px; }
  .strip ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 48px; }
  .strip li { font-size: 19px; line-height: 29px; }
  .strip li::before { margin-top: 10px; }
  .strip .link { margin-top: 10px; font-size: 17px; line-height: 25px; }

  .cs { margin-top: 150px; }
  .cs-row { display: flex; gap: 16px; overflow: visible; margin: 0; padding: 0; }
  .cs-row li { flex: 1 1 0; min-width: 0; width: auto; min-height: 176px; padding: 20px; border-radius: 24px; }
  .cs-row p { font-size: 17px; line-height: 25px; }

  .last { margin-top: 150px; padding: 72px 80px; border-radius: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; }
  .last .h2 { max-width: 700px; font-size: 60px; line-height: 64px; letter-spacing: -.04em; }
  .last .pill { margin-top: 0; flex: none; }

  .sec { margin-top: 150px; }
  .page-top { padding-top: 96px; }
  .foot { margin-top: 150px; }
  .foot-in {
    padding: 56px 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; row-gap: 14px;
    grid-template-areas: "logo links" "tag contact" "meaning ." "small small";
  }
  .foot .logo img { height: 40px; }
  .foot-tag { font-size: 18px; line-height: 27px; }
  .foot-meaning { font-size: 15px; line-height: 22px; }
  .foot-links, .foot .contact { margin: 0; align-self: center; }
  .foot-links .link, .foot .contact .link, .foot .contact .plain { font-size: 16px; line-height: 23px; }
  .foot-small { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--hairline); flex-direction: row; justify-content: space-between; font-size: 13px; line-height: 18px; }
}

/* One orange pill on screen (47e-4): the timelines the bar pill follows. The page's last pill
   (the Last call card, Our promise's closing pill) and, on Welcome, the hero pill. */
@supports (animation-timeline: view()) {
  body { timeline-scope: --hero-cta, --end-cta; }
  .last .pill, .pr-pill { view-timeline: --end-cta block; }
}

/* ---------- Effects: only when the visitor allows motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .menu[open] { animation: sheet-up .22s cubic-bezier(.2, .7, .2, 1); }
  .menu[open]::backdrop { animation: fade-in .22s ease-out; }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  @supports (animation-timeline: view()) {
    /* Blocks fade and rise as they scroll in (Welcome and How it works, never the first screen). */
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 160px; }
    @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

    /* The bar pill fades out while the page's last pill comes into view, so the two are never on screen together.
       Without support, or with reduced motion, both simply show. */
    body:has(.last .pill, .pr-pill) .bar-pill { animation: bar-pill-out linear forwards; animation-timeline: --end-cta; animation-range: entry 0% entry 100%; }
    @keyframes bar-pill-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
  }
}