/* Daybreak Digital (Pty) Ltd - rebuilt 14 Oct 2026 against WebsiteRules G-100..G-111.
   Reference: Azends landing structure + BLUNT scale (WebsiteRules\_RULES.txt REFERENCES).
   Every colour, size and space is a token. Zero JavaScript. */

@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  /* colour - every text pairing checked >= 4.5:1 */
  --bg: #F6F3EE;            /* warm off-white */
  --surface: #FFFFFF;
  --ink: #17140F;           /* 16.6:1 on bg */
  --muted: #5F574C;         /* 6.4:1 on bg */
  --line: #E4DED4;
  --dark: #16130F;          /* warm near-black, never pure black */
  --dark-text: #F6F3EE;     /* 16.7:1 */
  --dark-muted: #ADA597;    /* 7.6:1 */
  --dark-line: #3A342C;
  --accent: #B4501A;        /* daybreak amber, 4.6:1 on bg - the only colour */
  --accent-on-dark: #EE9A5E;/* 8.3:1 on dark */
  --chat-bg: #EFE9E0;
  --bubble-out: #FBE9DA;

  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: 20px;
  --content: 1800px;
  --reading: 66ch;
  --section: var(--s8);
  --radius: 16px;
  --radius-lg: 28px;
  --pill: 999px;
  --lift: 0 10px 30px -12px rgba(23, 20, 15, .35);
  --frame: 0 1px 2px rgba(23, 20, 15, .06), 0 24px 60px -24px rgba(23, 20, 15, .28);

  /* type - G-102: big and short */
  --fs-display: 44px; --fs-h2: 34px; --fs-h3: 20px;
  --fs-lead: 18px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px;
}

@media (min-width: 640px) { :root { --gutter: 24px; --fs-display: 60px; --fs-h2: 44px; } }
@media (min-width: 1024px) {
  :root { --gutter: 32px; --section: var(--s10); --fs-display: 88px; --fs-h2: 60px; --fs-h3: 22px; --fs-lead: 20px; }
}
@media (min-width: 1280px) { :root { --gutter: clamp(40px, 4vw, 80px); --fs-display: 104px; --fs-h2: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s9); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(180, 80, 26, .15); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 var(--s4); overflow-wrap: break-word; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.035em; line-height: 1.02; font-weight: 700; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.25; font-weight: 600; }
.thin { font-weight: 300; }
.wrap { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s4); background: var(--surface); padding: var(--s3) var(--s4); z-index: 10; }
.muted { color: var(--muted); }

/* eyebrow: status dot + spaced lowercase (G-109) */
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-label); letter-spacing: .14em; color: var(--muted); margin: 0 0 var(--s5); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(180, 80, 26, .14); }

/* wordmark (G-107): heavy lowercase + a rising half-sun on the baseline */
.wordmark { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 22px; letter-spacing: -.05em; text-decoration: none; color: var(--ink); }
.wordmark .sun { display: inline-block; width: .42em; height: .21em; margin-left: .06em; border-radius: .21em .21em 0 0; background: var(--accent); }
.on-dark .wordmark { color: var(--dark-text); }
.on-dark .wordmark .sun { background: var(--accent-on-dark); }

/* buttons: pills with an arrow (G-109) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: var(--pill); font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; transition: transform .18s ease-out, background-color .18s ease-out; }
.btn .arrow { transition: transform .18s ease-out; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: var(--bg); box-shadow: var(--lift); }
.btn-primary:hover { background: #2B261F; }
.btn-ghost { color: var(--ink); border-color: var(--line); background: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-light { background: var(--dark-text); color: var(--dark); }
.btn-outline-light { color: var(--dark-text); border-color: var(--dark-line); }
.btn-outline-light:hover { border-color: var(--dark-muted); }
.btn-small { min-height: 44px; padding: 0 var(--s4); font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* header */
.site-header { position: sticky; top: 0; z-index: 5; background: rgba(22, 19, 15, .88); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); color: var(--dark-text); border-bottom: 1px solid rgba(255, 255, 255, .06); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--dark); } }
.site-header .wordmark { color: var(--dark-text); }
.site-header .wordmark .sun { background: var(--accent-on-dark); }
.site-header .btn-primary { background: var(--dark-text); color: var(--dark); box-shadow: none; }
.site-header .btn-primary:hover { background: #FFFFFF; }
.site-header :focus-visible { outline-color: var(--accent-on-dark); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 68px; }
.site-nav { display: none; gap: var(--s6); font-size: 14px; }
.site-nav a { text-decoration: none; color: var(--dark-muted); }
.site-nav a:hover { color: var(--dark-text); }
@media (min-width: 768px) { .site-nav { display: flex; } }

/* sections */
.section { padding: var(--section) 0; }
.section-head { text-align: center; max-width: 820px; margin: 0 auto var(--s8); }
.section-head p { color: var(--muted); font-size: var(--fs-lead); margin: var(--s5) auto 0; max-width: 46ch; }
.white { background: var(--surface); }

/* 1. hero - split text | phone (G-100, G-104) */
.hero { padding: var(--s7) 0 var(--section); }
.hero .wrap { display: grid; gap: var(--s8); align-items: center; }
.hero .lead { font-size: var(--fs-lead); color: var(--muted); max-width: 40ch; margin: var(--s5) 0 var(--s6); }
.hero .facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s6) 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.hero .facts li::before { content: "\2713"; color: var(--accent); margin-right: var(--s2); font-weight: 700; }
@media (min-width: 1024px) { .hero { padding-top: var(--s9); } .hero .wrap { grid-template-columns: 1.15fr .85fr; gap: var(--s9); } }

/* the phone - a real chat interface built in HTML (G-100) */
.phone-wrap { justify-self: center; width: 100%; max-width: 340px; }
.phone { background: var(--dark); border-radius: 44px; padding: 10px; box-shadow: var(--frame); }
.screen { background: var(--chat-bg); color: var(--ink); border-radius: 35px; overflow: hidden; }
.chat-top { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s4) var(--s3); background: var(--surface); border-bottom: 1px solid var(--line); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 13px; flex: none; }
.chat-top b { display: block; font-size: 14px; line-height: 1.2; }
.chat-top span { font-size: var(--fs-label); color: var(--muted); }
.chat { list-style: none; margin: 0; padding: var(--s4) var(--s3) var(--s5); display: grid; gap: var(--s2); font-size: 13.5px; line-height: 1.45; }
.msg { max-width: 84%; padding: var(--s2) var(--s3) 6px; border-radius: 14px; background: var(--surface); box-shadow: 0 1px 1px rgba(23, 20, 15, .06); }
.msg.out { justify-self: end; background: var(--bubble-out); border-bottom-right-radius: 4px; }
.msg.in { border-bottom-left-radius: 4px; }
.msg time { display: block; text-align: right; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.quick { justify-self: end; display: flex; gap: 6px; }
.quick span { font-size: 12px; padding: 5px 10px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); }
.system { justify-self: center; font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: rgba(255, 255, 255, .7); padding: 4px 10px; border-radius: var(--pill); margin-top: var(--s2); }

/* 2. what it does - numbered 4-column row with thin dividers (Azends "what we do") */
.row4 { display: grid; gap: 0; border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.row4 li { padding: var(--s5) 0 var(--s6); border-bottom: 1px solid var(--line); }
.row4 .num { font-family: var(--mono); font-size: var(--fs-label); color: var(--accent); display: block; margin-bottom: var(--s5); }
.row4 p { color: var(--muted); margin: var(--s3) 0 0; }
@media (min-width: 640px) { .row4 { grid-template-columns: 1fr 1fr; } .row4 li { padding-right: var(--s5); } }
@media (min-width: 1024px) {
  .row4 { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
  .row4 li { border-bottom: 0; padding: var(--s6) var(--s5) var(--s7); border-left: 1px solid var(--line); }
  .row4 li:first-child { border-left: 0; padding-left: 0; }
}

/* 3. the record - one framed proof object (G-108) */
.window { max-width: 1280px; margin: 0 auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--frame); border: 1px solid var(--line); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 6px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: #FBFAF7; }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.window-bar span { margin-left: var(--s3); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: var(--s6) var(--s5); display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); position: relative; padding-bottom: var(--s5); }
.timeline li:last-child { padding-bottom: 0; }
.timeline .t { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 2px; }
.timeline .e { border-left: 2px solid var(--line); padding: 0 0 0 var(--s5); position: relative; }
.timeline .e::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.timeline .hl .e::before { background: var(--accent); border-color: var(--accent); }
.timeline b { display: block; font-weight: 600; }
.timeline .e span { color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 768px) { .timeline { padding: var(--s7) var(--s8); } .timeline li { grid-template-columns: 110px 1fr; } }

/* 4. what it never does - split: big statement | list */
.split { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .split { grid-template-columns: .9fr 1.1fr; gap: var(--s9); align-items: start; } .split .stick { position: sticky; top: 120px; } }
.split .stick p { color: var(--muted); font-size: var(--fs-lead); margin-top: var(--s5); max-width: 34ch; }
.nevers { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.nevers li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); padding: var(--s5) 0; border-top: 1px solid var(--line); font-size: var(--fs-lead); line-height: 1.45; }
.nevers li:last-child { border-bottom: 1px solid var(--line); }
.nevers li::before { content: "\00D7"; font-size: 26px; line-height: 1; color: var(--accent); font-weight: 300; }
.nevers li span { display: block; color: var(--muted); font-size: var(--fs-body); margin-top: var(--s1); }

/* 5. questions - native details, no JS */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s5) 0; font-size: var(--fs-lead); font-weight: 500; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; font-size: 28px; line-height: 1; color: var(--muted); transition: transform .2s ease-out; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 var(--s5); margin: 0; max-width: 60ch; }

/* 6. dark closing band (G-109) */
.closing { background: var(--dark); color: var(--dark-text); padding: var(--section) 0 var(--s8); text-align: center; }
.closing h2 { font-size: var(--fs-display); }
.closing .lead { color: var(--dark-muted); font-size: var(--fs-lead); max-width: 40ch; margin: var(--s5) auto var(--s7); }
.closing .actions { justify-content: center; }
.closing .who { margin: var(--s6) 0 0; color: var(--dark-muted); font-size: var(--fs-small); }
.closing .who a { color: var(--dark-text); }
.site-footer { background: var(--dark); color: var(--dark-muted); font-size: 13px; }
.site-footer .wrap { border-top: 1px solid var(--dark-line); padding-top: var(--s6); padding-bottom: var(--s6); display: grid; gap: var(--s4); }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.site-footer a { color: var(--dark-text); }
.site-footer .tm { font-size: 12px; }
@media (min-width: 1024px) { .site-footer .wrap { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s6); } .site-footer .tm { grid-column: 1 / -1; } }

/* inner pages: legal, privacy, 404 - long-form reading column (G-104 exception) */
.page { padding-top: var(--s7); padding-bottom: var(--section); }
.crumbs ol { list-style: none; margin: 0 0 var(--s7); padding: 0; display: flex; gap: var(--s2); font-size: var(--fs-small); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); }
.prose { max-width: var(--reading); }
.prose h1 { font-size: var(--fs-h2); margin-bottom: var(--s4); }
.prose h2 { font-size: 24px; letter-spacing: -.02em; margin: var(--s7) 0 var(--s4); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.facts { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: var(--s2) var(--s5); margin: 0 0 var(--s4); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* wide screens: fill the width (G-104) */
@media (min-width: 1280px) {
  .phone-wrap { max-width: 380px; }
  .hero .wrap { grid-template-columns: 1.2fr .8fr; }
  .section-head { max-width: 1000px; }
}
@media (min-width: 1600px) {
  :root { --fs-display: 124px; --fs-h2: 76px; --fs-lead: 22px; }
  .phone-wrap { max-width: 430px; }
  .chat { font-size: 15px; }
  .hero .lead { max-width: 44ch; }
}

/* phones (< 640px): bigger headline, full-width buttons, tighter lists (G-102, G-31) */
@media (max-width: 639px) {
  :root { --fs-display: clamp(44px, 13.4vw, 56px); --fs-h2: clamp(34px, 10vw, 42px); }
  .hero .wrap { gap: var(--s7); }
  .hero .lead { margin: var(--s4) 0 var(--s5); }
  .actions .btn { flex: 1 1 100%; }
  .hero .facts { flex-direction: column; gap: var(--s2); }
  .phone-wrap { max-width: 320px; }
  .section-head { margin-bottom: var(--s7); }
  .section-head h2 .thin { display: block; }
  .row4 li { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--s2); padding: var(--s5) 0; }
  .row4 .num { grid-row: 1 / span 2; margin: 5px 0 0; }
  .row4 p { margin-top: var(--s2); }
  .timeline { padding: var(--s5) var(--s4); }
  .timeline li { grid-template-columns: 44px 1fr; gap: var(--s3); }
  .timeline .t { font-size: 12px; }
  .timeline .e { padding-left: var(--s4); }
  .nevers li { grid-template-columns: 32px 1fr; font-size: var(--fs-body); }
  .closing .actions { max-width: 420px; margin: 0 auto; }
}