/* AiONe website (aione.net.au), 2 Nov 2026. One night-sky world: a full-bleed hero where the iO is assembled from
   a stream of 1s and 0s, a live heartbeat strip, four quiet benefit rows, the enquiry conversation, legal footer.
   Everything is served by the site itself: no font, script or image comes from anywhere else. */
@font-face { font-family: "Space Grotesk"; src: url("/space-grotesk.woff2") format("woff2"); font-weight: 500 700; font-display: swap }
:root {
  --night: #13202E;        /* brand navy, the page ground */
  --deep: #0C1520;         /* deeper band for contrast sections */
  --mint: #5FD3B0;         /* signature accent: the O, the pulse */
  --paper: #F6F5F1;        /* the i, headlines */
  --haze: #C9D4DE;         /* body text on night */
  --dim: #8FA3B5;          /* captions, the digit stream */
  --line: #24364A;         /* hairlines */
  --font-display: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0 }
body { background: var(--night); color: var(--haze); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased }
a { color: var(--mint) }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }

/* header */
.top { position: relative; z-index: 2 }
.top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px }
.word { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--paper); letter-spacing: -0.3px; text-decoration: none }
.word span { color: var(--mint) }
.top nav { display: flex; gap: 20px; align-items: center; font-size: 15px }
.top nav a { color: var(--haze); text-decoration: none; white-space: nowrap }
.top nav a:hover, .top nav a:focus-visible { color: var(--paper) }
.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 8px; background: var(--mint); color: var(--night) !important; font-weight: 600; text-decoration: none; border: 0; font: inherit; font-weight: 600; cursor: pointer }
.btn:focus-visible, .ghost:focus-visible, .top nav a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px }
.ghost { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 8px; border: 1px solid var(--line); color: var(--paper); text-decoration: none; background: transparent; font: inherit; cursor: pointer }

/* hero */
.hero { position: relative; overflow: hidden }
#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 620px; padding-block: 40px 72px; pointer-events: none }
.hero .copy { pointer-events: auto; display: flex; flex-direction: column; gap: 18px; max-width: 520px }
.kicker { font-family: var(--font-mono); font-size: 13px; color: var(--dim); letter-spacing: 0.4px }
h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 6.4vw, 80px); line-height: 1.0; letter-spacing: -1px; color: var(--paper); text-wrap: balance }
.sub { margin: 0; font-size: clamp(19px, 2.2vw, 23px); color: var(--paper) }
.lead { margin: 0; font-size: 17px; max-width: 34em }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }
.hint { font-family: var(--font-mono); font-size: 12px; color: var(--dim) }

/* heartbeat */
.pulse { border-block: 1px solid var(--line); background: var(--deep) }
.pulse .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; padding-block: 16px; font-family: var(--font-mono); font-size: 14px; color: var(--haze); font-variant-numeric: tabular-nums }
.beat { display: inline-flex; align-items: center; gap: 10px; color: var(--paper) }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(95, 211, 176, .55); animation: beat 2.4s infinite }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 176, .55) } 70% { box-shadow: 0 0 0 12px rgba(95, 211, 176, 0) } 100% { box-shadow: 0 0 0 0 rgba(95, 211, 176, 0) } }
.pulse .note { margin-left: auto; color: var(--dim); font-size: 12px }

/* benefits */
.benefits { padding-block: 88px 40px }
.benefits h2, .found h2 { margin: 0 0 40px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; color: var(--paper); text-wrap: balance; max-width: 760px }
.rows { display: flex; flex-direction: column }
.row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; padding-block: 28px; border-top: 1px solid var(--line) }
.row:last-child { border-bottom: 1px solid var(--line) }
.bin { font-family: var(--font-mono); font-size: 13px; color: var(--mint); letter-spacing: 1px; padding-top: 6px }
.row h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--paper) }
.row p { margin: 0; max-width: 60ch }
.more { margin-top: 28px; color: var(--dim); font-size: 15px }

/* founding */
.found { background: var(--deep); border-top: 1px solid var(--line) }
.found .wrap { padding-block: 80px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start }
.found p { margin: 0 0 14px; max-width: 46ch }
.found ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px }
.contact { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 12px }
.contact .label { font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: 1px; text-transform: uppercase }
/* enquiry conversation */
.talk { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--night); min-width: 0 }
.talk-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--paper); font-weight: 600 }
.talk-head small { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; color: var(--dim) }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; animation: lubdub 1.6s infinite }
@keyframes lubdub { 0% { transform: scale(1) } 10% { transform: scale(1.18) } 20% { transform: scale(1) } 30% { transform: scale(1.1) } 45%, 100% { transform: scale(1) } }
@keyframes listen { 0% { box-shadow: 0 0 0 0 rgba(95,211,176,0) } 10% { box-shadow: 0 0 0 3px rgba(95,211,176,.45) } 20% { box-shadow: 0 0 0 1px rgba(95,211,176,.15) } 30% { box-shadow: 0 0 0 3px rgba(95,211,176,.3) } 50%, 100% { box-shadow: 0 0 0 0 rgba(95,211,176,0) } }
.say.waiting input:not(:focus) { animation: listen 1.6s infinite }
.say input { caret-color: var(--mint) }
.msg.her.writing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--mint); animation: lubdub 1.6s infinite }
.face { width: 36px; height: 36px; border-radius: 9px; background: var(--deep); display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-family: var(--font-display); font-weight: 700; font-size: 17px; flex: none; animation: lubdub 1.6s infinite }
@media (prefers-reduced-motion: reduce) { .face, .live, .msg.her.writing::after, .say.waiting input:not(:focus) { animation: none } }
.face b { color: var(--paper) } .face i { color: var(--mint); font-style: normal }
.log { display: flex; flex-direction: column; gap: 10px; padding: 16px; height: 340px; overflow-y: auto }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere }
.msg.her { align-self: flex-start; background: var(--deep); color: var(--paper); border-bottom-left-radius: 4px }
.msg.you { align-self: flex-end; background: var(--mint); color: var(--night); border-bottom-right-radius: 4px }
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); animation: blink 1s infinite }
.typing span:nth-child(2) { animation-delay: .15s } .typing span:nth-child(3) { animation-delay: .3s }
@keyframes blink { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
.noticed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 2px; font-family: var(--font-mono); font-size: 12px }
.noticed dt { color: var(--dim) } .noticed dd { margin: 0; color: var(--mint); overflow-wrap: anywhere }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px }
.chip { border: 1px solid var(--line); background: transparent; color: var(--paper); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; cursor: pointer; min-height: 40px }
.chip:hover, .chip:focus-visible { border-color: var(--mint); outline: none }
.final { display: flex; flex-wrap: wrap; gap: 10px }
.say { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line) }
.say input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--deep); color: var(--paper); font: inherit; font-size: 16px }
.say input:focus { outline: 2px solid var(--mint); outline-offset: 1px; border-color: transparent }
.send { width: 46px; min-height: 46px; border-radius: 10px; border: 0; background: var(--mint); color: var(--night); font-size: 20px; font-weight: 700; cursor: pointer }
.send:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.talk-foot { padding: 0 16px 12px; font-size: 12px; color: var(--dim) }
.talk-foot a { color: var(--haze) }
.log { cursor: default }
.msg.her.writing { cursor: pointer }
@media (prefers-reduced-motion: reduce) { .typing span { animation: none } }

/* footer: who we are, legally */
footer { border-top: 1px solid var(--line) }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; padding-block: 28px 40px; font-size: 13px; color: var(--dim); line-height: 1.55 }
footer p { margin: 0; max-width: 70ch }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-content: start }
footer a { color: var(--haze); text-decoration: none }
footer a:hover, footer a:focus-visible { color: var(--paper); text-decoration: underline }

/* inner pages: privacy and terms, sign in */
.page { padding-block: 32px 72px }
.page .wrap { max-width: 760px }
.page h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 10px }
.page .meta { font-family: var(--font-mono); font-size: 12px; color: var(--dim); margin: 0 0 32px }
.page h2 { margin: 40px 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--paper) }
.page h3 { margin: 22px 0 6px; font-size: 16px; color: var(--paper) }
.page p, .page li { max-width: 68ch }
.page ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px }
.page .toc { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px }
.page .toc a { color: var(--haze) }
.addr { font-family: var(--font-mono); color: var(--paper) }

.signin { min-height: calc(100vh - 220px); display: grid; place-items: center; padding-block: 32px 64px }
.signin .card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; padding: 32px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--deep) }
.signin h1 { font-size: clamp(30px, 6vw, 40px) }
.signin p { margin: 0 }
.signin label { font-size: 14px; color: var(--paper); font-weight: 600 }
.signin input[type=email] { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--night); color: var(--paper); font: inherit; font-size: 17px; caret-color: var(--mint) }
.signin input[type=email]:focus { outline: 2px solid var(--mint); outline-offset: 1px; border-color: transparent }
.signin form { display: flex; flex-direction: column; gap: 10px }
.signin .btn { justify-content: center; min-height: 50px }
.safe { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim) }
.safe b { color: var(--haze); font-weight: 600 }
.lock { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--mint) }
.err { color: #FFB4A8; font-size: 14px; min-height: 20px; margin: 0 }

@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 300px 56px }
  .row { grid-template-columns: minmax(0, 1fr); gap: 6px }
  .found .wrap { grid-template-columns: minmax(0, 1fr) }
  .top nav .navlink { display: none }
  .top nav { gap: 10px }
  .pulse .note { margin-left: 0 }
  footer .wrap { grid-template-columns: minmax(0, 1fr) }
}
.top nav .ghost, .top nav .btn { min-height: 40px; padding: 0 14px }
@media (prefers-reduced-motion: reduce) { .dot { animation: none } }
.signin .wrap { width: 100%; display: grid; place-items: center }
.spaces { display: flex; flex-direction: column; gap: 10px }
.spaces .btn { justify-content: center; min-height: 50px; text-align: center }
.hint2 { font-size: 14px; color: var(--dim); margin: 0 }
.hint2 a { color: var(--haze) }