/* khulani.app: one stylesheet, no framework. Palette and type are the approved mockups'. Fonts are self-hosted. */
@font-face { font-family: 'Outfit'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/outfit-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/space-mono-latin-400-normal.woff2') format('woff2'); }

:root {
  --bark: #2B2519;
  --bone: #F1E8D6;
  --sand: #E4D8C0;
  --green: #4E5B3A;
  --green-deep: #3F4A2F;
  --gold: #C79A3E;
  --gold-text: #7A5A12; /* gold for text on light surfaces: the bright gold is never used for text on Bone or white */
  --muted: #5E5748; /* secondary text on light surfaces */
  --muted-on-dark: #B3AB99;
  --line: #C9BB9E;
  --white: #FFFFFF;
  --night: #14110B;
  --card-dark: #352E21;
  --sans: 'Outfit', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bone); color: var(--bark); font-family: var(--sans); font-size: 18px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--bark); }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--bark); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: #E8C77C; }
.on-dark a { color: var(--bone); }
.on-dark a:hover { color: #E8C77C; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--bone); color: var(--bark); padding: 12px 16px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

h1, h2, h3 { margin: 0; font-weight: 500; }
h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; letter-spacing: -0.8px; }
h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.3; }
p { margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 104px 32px; }
.wrap-narrow { max-width: 900px; margin: 0 auto; padding: 104px 32px; }
.row { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.col { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-side { flex: 0 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.col-shot { flex: 0 1 360px; min-width: 0; display: flex; justify-content: center; }
.stack-40 { display: flex; flex-direction: column; gap: 40px; }
.intro { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.bg-sand { background: var(--sand); }
.bg-bark { background: var(--bark); color: var(--bone); }
.bg-green { background: var(--green); color: var(--bone); }

/* header, footer */
.site-header { background: var(--bark); color: var(--bone); }
.nav { max-width: 1200px; margin: 0 auto; padding: 20px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bone); min-height: 44px; }
.brand span { font-weight: 500; font-size: 24px; letter-spacing: 0.2px; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 16px; }
.nav-links a { color: var(--sand); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav-links a:hover { color: var(--bone); }
.nav-links a[aria-current='page'] { color: var(--bone); border-bottom: 2px solid var(--gold); min-height: 0; padding: 2px 0; }
.nav-links a.signin { color: var(--bone); border: 1px solid #8a8272; border-radius: 10px; padding: 10px 18px; }
.site-footer { background: var(--bark); color: var(--sand); font-size: 15px; border-top: 1px solid #4a4436; }
.site-footer .inner { max-width: 1200px; margin: 0 auto; padding: 48px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.site-footer .name { font-weight: 500; font-size: 20px; color: var(--bone); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: flex-start; }
.site-footer a { color: var(--sand); min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a:hover { color: var(--bone); }

/* buttons */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 14px 26px; border-radius: 12px; text-decoration: none; font-weight: 500; }
.btn-gold { background: var(--gold); color: var(--bark); }
.on-dark a.btn-gold, a.btn-gold { color: var(--bark); }
a.btn-gold:hover, .on-dark a.btn-gold:hover { background: #D8AB52; color: var(--bark); }
.btn-ghost { color: var(--bone); border: 1px solid #8a8272; font-weight: 400; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.link-strong { font-weight: 500; color: var(--green); }

/* hero: a centred read (pill, headline, paragraph, buttons), then a stage of three phones over a rising sun. The stage clips
   everything in it, so the phones are cut off by the hero's bottom edge and the sun never widens the page. Every size in the
   stage is a multiple of --s, which is 1 on a laptop and smaller on a phone. */
.hero { background: var(--bark); color: var(--bone); position: relative; }
.hero-inner { max-width: 1200px; margin: 0 auto; padding: 88px 32px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.hero h1 { max-width: 100%; }
.hero .lede { font-size: 21px; line-height: 1.6; color: var(--sand); max-width: 780px; text-wrap: balance; }
.hero .cta-row { justify-content: center; gap: 12px 28px; }
.beta-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; background: #352E21; border: 1px solid #4a4436; border-radius: 999px; color: var(--sand); font-size: 15px; line-height: 1.4; }
.beta-pill .chip { background: var(--gold); color: var(--bark); font-weight: 500; font-size: 14px; line-height: 1; padding: 6px 12px; border-radius: 999px; }
.link-quiet { display: inline-flex; align-items: center; min-height: 48px; color: var(--bone); font-weight: 500; text-decoration: none; }
.on-dark a.link-quiet { color: var(--bone); }
.on-dark a.link-quiet:hover { color: #E8C77C; }
.small-print { font-size: 14px; color: var(--muted-on-dark); }

.hero-stage { --s: 1; position: relative; height: calc(560px * var(--s)); margin-top: calc(48px * var(--s)); overflow: hidden; }
.hero-stage .sun { position: absolute; left: 50%; top: calc(250px * var(--s)); width: calc(760px * var(--s)); height: calc(760px * var(--s)); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle closest-side, rgba(199, 154, 62, 0.5) 0%, rgba(199, 154, 62, 0.18) 42%, rgba(199, 154, 62, 0) 68%); }
.hero-stage .horizon { position: absolute; left: 0; right: 0; top: calc(250px * var(--s)); height: 1px; background: #5a5242; }
.stage-phone { position: absolute; left: 50%; background: #14110B; border: 1px solid #4a4436; border-radius: calc(42px * var(--s)); padding: calc(10px * var(--s)); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35); }
.stage-phone picture, .stage-phone img { display: block; width: 100%; height: auto; border-radius: calc(32px * var(--s)); }
.stage-phone.centre { width: calc(320px * var(--s)); top: calc(30px * var(--s)); transform: translateX(-50%); z-index: 3; }
.stage-phone.left { width: calc(250px * var(--s)); top: calc(96px * var(--s)); transform: translateX(calc(-50% - 215px * var(--s))) rotate(-7deg); z-index: 2; }
.stage-phone.right { width: calc(250px * var(--s)); top: calc(96px * var(--s)); transform: translateX(calc(-50% + 215px * var(--s))) rotate(7deg); z-index: 2; }

/* frames */
.phone { width: 320px; max-width: 100%; background: var(--night); border-radius: 46px; padding: 10px; box-shadow: 0 30px 60px rgba(20, 17, 11, 0.35); }
.phone.small { width: 300px; }
.phone img, .phone picture { display: block; width: 100%; height: auto; border-radius: 36px; }
.browser { background: var(--white); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px rgba(43, 37, 25, 0.18); }
.browser .dots { display: flex; gap: 8px; padding: 12px 16px; background: var(--bone); border-bottom: 1px solid var(--sand); }
.browser .dots i { width: 11px; height: 11px; border-radius: 6px; background: var(--line); display: block; }
.browser img, .browser picture { display: block; width: 100%; height: auto; }

/* cards and boxes */
.tile { background: var(--white); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.tile.dark { background: var(--bark); color: var(--bone); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.tile.dark .eyebrow { color: #E0B65E; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: var(--bone); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.card p { color: var(--muted); }
.card.outline { background: transparent; border: 1px solid var(--line); color: var(--bark); }
.step { background: var(--white); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.step .num { font-family: var(--mono); font-size: 14px; color: var(--gold-text); }
.step p { color: var(--muted); }
.steps { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.label-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; background: var(--card-dark); border-radius: 14px; padding: 16px 18px; }
.label-row .tag { font-family: var(--mono); font-size: 14px; color: var(--sand); }
.label-row .tag.fresh { color: #E0B65E; }
.label-row.dashed { background: transparent; border: 1px dashed #8a8272; }
.label-row .tag.warn { color: #F0A55A; }
.note-box { background: var(--green-deep); border-radius: 16px; padding: 20px 22px; color: var(--bone); }
.list-lines { flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; }
.list-lines li { list-style: none; border-bottom: 1px solid #8B9A70; padding: 14px 0; }
.list-lines li:last-child { border-bottom: 0; }
.list-lines { margin: 0; padding: 0; }
.tag-small { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* comparison table */
.scroll { overflow-x: auto; border-radius: 18px; background: var(--white); box-shadow: 0 24px 50px rgba(43, 37, 25, 0.12); }
.scroll:focus-visible { outline-offset: 2px; }
table.compare { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 16px; line-height: 1.45; text-align: left; }
.compare th, .compare td { padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--sand); }
.compare thead th { font-weight: 500; font-size: 16px; background: var(--bone); border-bottom: 2px solid var(--line); }
.compare thead th.us { background: var(--bark); color: var(--bone); }
.compare tbody th { font-weight: 500; width: 26%; }
.compare td.us { background: #F7F1E3; font-weight: 500; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-weight: 500; font-size: 20px; line-height: 1.35; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 8px; top: 16px; font-size: 28px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 44px 24px 0; max-width: 720px; }

/* long reading */
.article { max-width: 720px; margin: 0 auto; padding: 96px 32px 112px; display: flex; flex-direction: column; gap: 26px; line-height: 1.7; font-size: 19px; }
.article h2 { margin-top: 18px; }
.article ul { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.article .rule { width: 64px; height: 2px; background: var(--gold); margin: 14px 0; }
.article .big { font-weight: 500; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; letter-spacing: -0.8px; }
.article .big span { border-bottom: 6px solid var(--gold); }
.signed { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-weight: 500; }
.lede-line { font-size: 21px; color: var(--muted); }

.center-page { max-width: 720px; margin: 0 auto; padding: 120px 32px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 720px) {
  body { font-size: 17px; }
  .wrap, .wrap-narrow { padding: 64px 20px; }
  .hero-inner { padding: 48px 20px 0; gap: 22px; }
  .hero-stage { --s: 0.8; }
  .row { gap: 36px; }
  .nav { padding: 14px 20px; }
  .nav-links { gap: 0 14px; font-size: 15px; }
  .nav-links a.signin { padding: 10px 14px; }
  .article { padding: 56px 20px 72px; }
  .hero .lede { font-size: 19px; }
  .site-footer .inner { padding: 32px 20px; }
  .center-page { padding: 72px 20px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }