/* =============================================================================
   site.css - the Orelys COMPONENT stylesheet. Loaded on EVERY route by
   app/layout.tsx: after tailwind-utils.css and the layout's gap-fill <style>,
   before fonts.css.

   WHY IT EXISTS. The homepage's look did not come from its class names alone:
   the card ring (.bento-container:before), the illustration frames (.fl-*),
   and several of the colours the homepage paints with lived only in
   public/home/exact.css or in a <style> inside public/home/page-html.html -
   and both of those load on "/" only. An inner page that copied the homepage's
   markup therefore got flat, borderless, unstyled cards. Everything a shared
   component in components/site/ needs now lives here, once, for every route.

   THE ONE RULE: COMPONENT CLASSES ONLY. Nothing in this file may be a bare
   Tailwind utility (.flex, .px-4, .hidden, .text-white, .md\:grid-cols-2 ...).
   This sheet loads after tailwind-utils.css, so a re-declared utility here
   would shadow its own sm:/md:/lg: variants site-wide - exactly how exact.css
   once broke every responsive layout on the site. What is allowed:
     - fl-* classes (ours; nothing else in the project declares them),
     - the ::before rings of the homepage's own component classes
       (.bento-container, .integrations-container, .feature-container,
       .purchase-button) - pseudo-element rules, not utilities,
     - fl-* keyframes (never a bare name like fadeIn: tailwind-utils.css and
       exact.css each define their own fadeIn, and the last one loaded wins).
   If a utility the components need is missing from tailwind-utils.css, the
   fix is a scoped fl-* class here, never the utility itself.

   SINGLE SOURCE. Sections 1 and 4 were MOVED here, not copied: exact.css and
   page-html.html no longer carry them (each has a pointer comment where the
   rules used to be). The homepage was re-measured after the move - computed
   styles of every card, card ring, frame, eyebrow, row and badge identical at
   1440px and 390px.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. CARD RINGS. Moved verbatim from exact.css. Each draws a 1px gradient
   border by parking an absolutely positioned ::before 1px outside the card at
   z-index:-1, so the card's own background covers all of it but the edge.
   That only works while the ring's stacking context sits BELOW the card's
   background: the card must not be a stacking context itself (no z-index /
   opacity / transform on .bento-container) and nothing opaque may sit between
   it and the nearest stacking context. <Reveal>'s will-change wrapper (or the
   page shell's `isolate`) is that context.
   --------------------------------------------------------------------------- */
.bento-container:before{background-image:linear-gradient(180deg,#333434,#1f2020 15%)}
.bento-container:before,.integrations-container:before{border-radius:2.5rem;bottom:-1px;content:"";left:-1px;position:absolute;right:-1px;top:-1px;z-index:-1}
.integrations-container:before{background-image:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.05) 15%)}
.feature-container:before{background-image:linear-gradient(180deg,#333434,#1f2020 10%);border-radius:40px}
.feature-container:before{bottom:-1px;content:"";left:-1px;position:absolute;right:-1px;top:-1px;z-index:-1}
.purchase-button:before{border-radius:999999px;bottom:-1.5px;content:"";left:-1.5px;position:absolute;right:-1.5px;top:-1.5px;z-index:-1}
.purchase-button:before{background-image:linear-gradient(180deg,#42575c,rgba(75,103,108,.25) 75%)}

/* ---------------------------------------------------------------------------
   2. HOMEPAGE PAINT THAT ONLY EXISTS IN exact.css. The homepage paints these
   through utilities that exact.css defines (or re-points) and
   tailwind-utils.css does not - so off the homepage the utility is either a
   no-op or a different colour. Written as component classes, never as the
   utilities themselves (see THE ONE RULE).
     .fl-bento  = bg-cayo-background-950 (#0f1214) - the card surface
     .fl-title  = text-cayo-blue-4 (#e0e0e2)       - the card title
     .fl-hl     = text-[#f4f4f5] AS THE HOMEPAGE RENDERS IT: exact.css
                  re-points that class to #b2ccd5, so every highlighted word
                  in a homepage h2 ("Six search modes, one archive") is that
                  cool grey-teal. Off "/" the same class is plain #f4f4f5.
     .fl-accent = text-[#8d9097] as the homepage renders it (#6b8f9b; 5.4:1 on
                  #0f1214) - the icon + bold word of a section link
     .fl-mono   = font-geistMono (exact.css only). NOTE: `font-geistMono`
                  itself does nothing off the homepage - use fl-mono.
     .fl-pill   = the "Get started" pill surface: bg-cayo-background-1000 +
                  bg-gradient-to-b from-cayo-blue-4/25 to-cayo-blue-5/25
     .fl-spark-ring / .fl-spark-fill = the section link's 2px inset ring and
                  fill (shadow-[0_0_0_2px_#202C2F_inset] / bg-[#0b0e10], both
                  re-pointed by exact.css to #1d2226 / #0f1214 on "/")
     .fl-grad   = the hero's gradient word ("Orelys", "six ways"). Its markup
                  carries a grey from-[#e0e0e2] via-white gradient; a rule scoped
                  to #cayo-exact-home in tailwind-utils.css repaints it teal on
                  "/" only, so <Grad> needs this to match off the homepage.
   --------------------------------------------------------------------------- */
.fl-bento{background-color:#0f1214}
/* <BentoCard wide>: the homepage pins that card at md:h-[450px]; a minimum
   instead, so longer copy grows the card rather than spilling out of it. */
@media (min-width:768px){.fl-bento-wide{min-height:450px}}
.fl-title{color:#e0e0e2}
.fl-hl{color:#b2ccd5}
.fl-accent{color:#6b8f9b}
.fl-mono{font-family:"Geist Mono",monospace}
.fl-pill{background-color:#050708;background-image:linear-gradient(to bottom,rgba(146,200,210,.25) 0%,rgba(75,103,108,.25) 100%)}
/* Pill variants (components/site/PillLink.tsx): sm = 42px, block = full width,
   and the same pill as a <button> (PillButton), dimmed when disabled. The
   ring (.purchase-button:before) is z-index:-1: inside a card, wrap the pill
   in an isolate box so the card's own background cannot cover it. */
a.fl-pill-sm,button.fl-pill-sm{height:42px;padding-left:16px;padding-right:18px;font-size:14px;white-space:nowrap}
a.fl-pill-sm.fl-pill-chev,button.fl-pill-sm.fl-pill-chev{padding-right:12px}
.fl-pill-sm svg{width:17px;height:17px}
a.fl-pill-block,button.fl-pill-block{display:flex;width:100%;justify-content:center}
button.fl-pill{border:0;font-family:inherit;cursor:pointer}
button.fl-pill:disabled{cursor:not-allowed;opacity:.5}
.fl-spark-ring{box-shadow:inset 0 0 0 2px #1d2226}
.fl-spark-fill{background-color:#0f1214}
.fl-grad{background-image:linear-gradient(105deg,#a9c9c7,#dce8e7 52%,#ffffff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* background-clip:text paints only inside the box: on a tight line-height
   (the 1.04 titles) the descenders of g, y, p fell outside it and were cut.
   The box grows under the baseline and gives the room back, so nothing
   around it moves. */
.fl-grad{padding-bottom:.14em;margin-bottom:-.14em}
/* The spark itself: exact.css's animate-flip + before:animate-rotate, renamed
   so they cannot collide with its `flip` / `rotate` keyframes. */
.fl-spark-flip{animation:fl-flip 4s steps(2) infinite}
.fl-spark-rot:before{animation:fl-rotate 2s linear infinite both}
@keyframes fl-flip{to{transform:rotate(1turn)}}
@keyframes fl-rotate{to{transform:rotate(90deg)}}

/* ---------------------------------------------------------------------------
   3. ATMOSPHERE (components/site/PageShell.tsx, Section.tsx).
   .fl-appear / .fl-appear-slow = the homepage's animate-fadeIn (.5s, as exact.css
   times it) and animate-fadeInSlower (1s, exact.css only), on an opacity-only
   keyframe of our own. tailwind-utils.css's fadeIn also slides 4px, and which
   fadeIn wins depends on which sheets a route loads - hence fl-fade-in.
   .fl-first-screen = the page backdrop: background.webp + the stars canvas.
   It used to be the first 100vh of the page only, so the top of every page
   was lit and starry and everything under it a flat dark void - a visible
   change of background however softly its edge was faded. It is now pinned
   to the viewport (position:fixed, -z-10 inside the shell's isolate): the
   same backdrop at every scroll position, on every page, with no edge left
   to hide - which is also why the old blur bar that straddled that edge
   (bg-cayo-background-1000 h-[250px] blur-[30px]) is gone from both the
   homepage HTML and PageShell. div.* beats exact.css's .absolute on "/".
   --------------------------------------------------------------------------- */
@keyframes fl-fade-in{0%{opacity:0}to{opacity:1}}
.fl-appear{animation:fl-fade-in .5s ease-in-out}
.fl-appear-slow{animation:fl-fade-in 1s ease-in-out}
div.fl-first-screen{position:fixed;inset:0;height:100vh;height:100lvh}
/* tailwind-utils.css sets body,html{overflow-x:hidden}. On <body> that makes
   it a scroll container that never scrolls (the document does), so every
   position:sticky inside it - the legal pages' contents list, the checkout's
   left column - stuck to the body and never moved. clip cuts the sideways
   overflow the same way without making a scroll container; hidden stays as
   the fallback for browsers without clip. */
body{overflow-x:hidden;overflow-x:clip}
/* The dotted waves between sections (Section.tsx <Divider>) are drawn
   1508-1512px wide and sit at left:0 from xl up; on a wider screen they
   stopped short of the right edge. They now stretch to the full width
   (height follows the viewBox, so the curve keeps its shape). */
@media (min-width:1280px){svg.fl-wave{min-width:100%;height:auto}}
.fl-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fl-appear,.fl-appear-slow,.fl-spark-flip,.fl-spark-rot:before{animation:none}}

/* ---------------------------------------------------------------------------
   4. CARD ILLUSTRATIONS + MOBILE READING ORDER. Moved from the <style> block
   in public/home/page-html.html, unchanged except for ONE addition: .fl-tag
   and .fl-chip now carry the Geist Mono family themselves. On the homepage
   every .fl-tag and .fl-chip is also .font-geistMono (18/18 and 5/5, counted),
   so nothing there changes; off the homepage font-geistMono does not exist, so
   without this every eyebrow would have fallen back to Satoshi.

   Scoped by the .fl- prefix. Every colour is lifted from the homepage palette
   (cayo-background-950 #0f1214, -1000 #050708, cayo-blue-6 #1d2226, the
   #202C2F ring and the #4B676C / #658A95 accents), so nothing here introduces
   a new hue.
   --------------------------------------------------------------------------- */
.fl-ill{position:relative;overflow:hidden;border:1px solid #202c2f;border-radius:22px;background:linear-gradient(180deg,#0d1114 0%,#090c0e 100%);padding:18px}
.fl-ill-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.fl-tag{font-size:10px;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#8d9097;white-space:nowrap}
.fl-tag-b{display:inline-flex;align-items:center;gap:6px;border:1px solid #202c2f;border-radius:999px;padding:5px 9px;background:#0b0e10}
.fl-row{display:flex;align-items:center;gap:10px;border:1px solid #1d2226;border-radius:13px;background:#0b0e10;padding:10px 12px}
.fl-row+.fl-row{margin-top:8px}
.fl-grow{min-width:0;flex:1 1 auto}
.fl-k{font-size:11.5px;line-height:1.4;color:#8d9097;white-space:nowrap}
.fl-v{font-size:12.5px;line-height:1.4;color:#d2d2d6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-vd{font-size:11px;line-height:1.5;color:#8d9097;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-dot{width:6px;height:6px;border-radius:999px;flex:none;background:#4b676c}
.fl-dot-warn{background:#8d9097}
.fl-dot-ok{background:#658a95}
.fl-ico{flex:none;color:#64686e}
.fl-bar{height:6px;border-radius:999px;background:#1d2226;overflow:hidden}
.fl-bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4b676c,#658a95)}
.fl-list{display:flex;flex-direction:column;gap:8px}
.fl-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #202c2f;border-radius:999px;background:#0b0e10;padding:7px 13px;font-size:12.5px;line-height:1;color:#b4b5ba;white-space:nowrap}
.fl-chip b{color:#e0e0e2;font-weight:600}
.fl-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.fl-note{font-size:11px;line-height:1.6;color:#8d9097;margin-top:12px}
.fl-fade{position:absolute;inset:auto 0 0 0;height:42px;background:linear-gradient(180deg,rgba(9,12,14,0) 0%,#090c0e 90%);pointer-events:none}
.fl-pad-lg{padding:0 40px 40px}
@media (min-width:768px){.fl-ill{padding:20px}.fl-pad-lg{padding:0 60px 60px}}
.fl-tag,.fl-chip{font-family:"Geist Mono",monospace}
/* CONTRAST. The 10px eyebrows (.fl-tag), the 11px secondary lines (.fl-vd) and the footnote (.fl-note) used #64686e / #75797f, which measured 3.35:1 / 4.42:1 on the card (#0f1214) and row (#0b0e10) backgrounds - under WCAG AA for text this small. All three now use #8d9097, the colour .fl-k already uses, measured 5.88:1 against the flat card colour (5.93-6.14:1 across the panel gradient itself) and 6.06:1 on the rows. Written as a literal, not the text-[#8d9097] utility: exact.css deliberately re-points that class to #6b8f9b on the homepage. .fl-ico stays #64686e - it is a glyph beside a label, not text. */
/* MOBILE READING ORDER. A card whose visual should sit ABOVE its text on desktop (the checkerboard) is written in reading order - text first - and flipped only at 768px, the breakpoint where the grid goes md:grid-cols-2. On a one-column phone the heading therefore always comes before the diagram it describes. .md:flex-col-reverse does not exist in either utility sheet, hence the scoped rule. The paddings reproduce the reversed geometry exactly (visual 35px from the top edge, 70px visual-to-title, 35px title-to-bottom). Two-class selectors, so they beat the single-class utilities on specificity, whatever the sheet order. <BentoCard reverse> emits these hooks. The pad is bottom-aligned (justify-content:flex-end) because a reversed card beside a TALLER neighbour stretches its visual block: top-aligned, the frame stayed at the top and left an empty band between the frame and its own title (the /contact "Email" card). Bottom-aligned, the frame sits against its title and the slack goes to the card's top edge - the mirror of a normal card, whose slack goes to its bottom. */
@media (min-width:768px){.bento-container.fl-rev{flex-direction:column-reverse}.fl-rev>.fl-rev-text{padding-top:0;padding-bottom:35px}.fl-rev>.fl-rev-vis{padding-bottom:35px}.fl-rev>.fl-rev-vis>.fl-rev-pad{padding-top:35px;padding-bottom:0;display:flex;flex-direction:column;justify-content:flex-end}}
/* OSINT platform cards. Each card's brand glow is a later sibling of the text, absolutely positioned with z-index:auto (its -z-1 class exists in neither sheet), so it painted OVER the copy: on TikTok the glow reached 62% opacity across "Reported as found, not verified", measured 1.75:1 to 3.08:1 there. The -z-1 says the glow was meant to sit behind; lifting the two in-flow children one layer puts it there without touching the card, its ::before ring (z-index:-1, which needs the card NOT to be a stacking context) or the glow itself. */
.integrations-container>:not(.absolute){position:relative;z-index:1}
/* Some cards sit in a text-center column, and the frames were inheriting text-align:center - rendering as centred lists instead of the product screenshots they stand in for. Pin them left; .fl-chips centres itself with flexbox and is unaffected. */
.fl-ill{text-align:left}
/* .fl-ill-head is space-between with two nowrap tags inside an overflow:hidden box, so on any card narrower than its two labels the right-hand badge was being cut off rather than ellipsed. Let the row wrap and keep the badge on the right of its own line. */
.fl-ill-head{flex-wrap:wrap;row-gap:8px}
.fl-ill-head>.fl-tag-b{margin-left:auto}
/* .fl-v/.fl-vd are nowrap+ellipsis, which turned real sentences into "Failed, or rejected for finding not..." on tablet and phone. Above 1024px the single-line treatment is the right one and stays. */
@media (max-width:1023px){.fl-v,.fl-vd{white-space:normal;overflow:visible;text-overflow:clip}
/* Wrapping the row is not enough for the longest labels ("Example · plan layout" wants 289px in a 234px card on a phone), so below the desktop grid let the label itself run to two lines. The badge beside it stays nowrap - every badge is short and reads wrong broken across lines. */
.fl-ill-head>.fl-tag:not(.fl-tag-b){white-space:normal}}

/* ---------------------------------------------------------------------------
   5. SCROLL REVEAL (components/site/Reveal.tsx) - the homepage's own motion:
   opacity 0 + translateY(75px) -> none over .8s cubic-bezier(.75,.01,.45,1),
   siblings staggered 120ms (app/CayoRuntime.tsx, initReveal).

   NEVER-BLANK GUARANTEES, in order:
     - The hidden state exists only under (scripting:enabled) AND
       (prefers-reduced-motion:no-preference). No JS, or reduced motion: the
       content is simply there. Browsers that do not know `scripting` drop
       the whole block - also simply there.
     - FAILSAFE: if <Reveal> has not taken control (.fl-armed) within 3s -
       a JS chunk failed, hydration crashed - a CSS animation brings the
       content in on its own.
     - <Reveal> reveals immediately anything already on screen at mount, and
       uses threshold 0 (not the homepage's 0.12), so an element taller than
       the viewport cannot sit forever below its trigger ratio.
   The transform lives on the wrapper <Reveal> renders, which carries
   will-change-transform like the homepage's (and NOT transform-gpu, whose
   own transform would fight this one on equal specificity).
   --------------------------------------------------------------------------- */
@keyframes fl-reveal-failsafe{to{opacity:1;transform:none}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
.fl-reveal{opacity:0;transform:translateY(var(--fl-reveal-y,75px));animation:fl-reveal-failsafe .8s cubic-bezier(.75,.01,.45,1) 3s forwards}
.fl-reveal.fl-armed{animation:none}
.fl-reveal.fl-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.75,.01,.45,1),transform .8s cubic-bezier(.75,.01,.45,1),filter .8s cubic-bezier(.75,.01,.45,1);transition-delay:var(--fl-reveal-delay,0ms)}
.fl-reveal.fl-in.fl-now{transition:none}
}

/* ---------------------------------------------------------------------------
   6. SITE HEADER (components/site/SiteHeader.tsx) - the homepage header on
   every inner page. The row itself uses the homepage's own utility classes;
   these are only the parts "/" gets from places inner pages do not load:
     .fl-nav        the bar. 640px+: the homepage's `relative px-10 top-[30px]
                    z-[100]` (not sticky), plus a 20px bottom margin so the bar
                    still takes the 76px of flow the old inner header took and
                    nothing under it moves. Below 640px: the sticky 76px plate
                    app/CayoRuntime.tsx gives "/" (SUPPLEMENTAL_CSS), verbatim.
                    Written here rather than as utilities because the phone
                    rule has to override position/top/padding.
     .fl-nav-brand  below 640px the brand column centres the wordmark as a
                    flex item (CayoRuntime's first-child rule), 26.75px top.
     .fl-nav-pill   the link pill's inline style on "/" (radial gradient,
                    1.25rem radius, blur 7.5px).
     .fl-nav-current the current page (aria-current="page"): the #b2ccd5
                    accent plus a 4px dot 4px under the word, inside the pill's
                    16px bottom padding - a shape cue, not only a colour one.
     .fl-nav-panel  the phone panel's shadow (no such utility) and its
                    background pinned as a literal, as "/" does inline.
   --------------------------------------------------------------------------- */
.fl-nav{position:relative;top:30px;z-index:100;padding:0 2.5rem;margin-bottom:20px}
.fl-nav-pill{border-radius:1.25rem;background:radial-gradient(1161.83% 494.55% at 50% 49.09%,#0b0e10 5.32%,#161b1f 30.31%);-webkit-backdrop-filter:blur(7.5px);backdrop-filter:blur(7.5px)}
.fl-nav-current{position:relative;color:#b2ccd5}
.fl-nav-current:after{content:"";position:absolute;left:50%;bottom:-8px;width:4px;height:4px;margin-left:-2px;border-radius:999px;background:#b2ccd5}
.fl-nav-panel{background-color:#0b0e10;box-shadow:0 24px 60px rgba(0,0,0,.55)}
/* The account buttons, right of the link pill (SiteHeader + the homepage's
   scraped nav, same markup): "Log in" is a quiet link like the pill's own,
   "Sign up" is the site's pill (fl-pill-sm, the hero's "Get started" look).
   Below 640px both live in the burger panel; 640-1023px only "Log in" fits
   beside the centred pill; from 1024px both. */
.fl-auth{display:none;align-items:center;gap:6px}
@media (min-width:640px){.fl-auth{display:flex}}
.fl-auth-login{display:inline-flex;align-items:center;height:42px;padding:1px 15px 0;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#e4e4e7;white-space:nowrap;transition:color .2s linear,background-color .2s linear}
.fl-auth-login:hover{color:#fff;background:rgba(255,255,255,.05)}
.fl-auth-login[aria-current="page"]{color:#b2ccd5}
.fl-auth-login:focus-visible,.fl-auth-signup:focus-visible{outline:2px solid #658a95;outline-offset:2px}
.fl-auth-cta{display:none;position:relative;isolation:isolate}
@media (min-width:1024px){.fl-auth-cta{display:inline-flex}}
/* Signed in (SiteHeader's `user`, the homepage's data-orelys-user): the
   account instead of the two buttons - avatar (the username's first letter)
   + username, linking to the dashboard, then a sign-out icon. 640-1023px:
   the avatar alone beside the centred pill; from 1024px the name too. */
.fl-auth-in{gap:6px}
/* A frosted pill, like the nav's link pill: the avatar sits 5px (+1px edge) from the
   top, the bottom and the left - dead centre - and the name is centred on
   the same line (its own line box, no optical nudge). */
.fl-user{display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;height:42px;min-width:0;padding:5px;border-radius:999px;border:1px solid rgba(255,255,255,.06);background:radial-gradient(1161.83% 494.55% at 50% 49.09%,rgba(11,14,16,.72) 5.32%,rgba(22,27,31,.72) 30.31%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e4e4e7;white-space:nowrap;transition:color .2s linear,border-color .2s linear,background-color .2s linear}
@media (min-width:1024px){.fl-user{padding:5px 16px 5px 5px}}
.fl-user:hover{color:#fff;border-color:rgba(255,255,255,.1)}
.fl-user-av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#222a2e;font-family:var(--font-sans),system-ui,sans-serif;font-size:13px;font-weight:600;line-height:1;letter-spacing:0;color:#fff;user-select:none;transition:background-color .2s linear}
.fl-user:hover .fl-user-av{background:#2a3338}
.fl-user-name{display:none;max-width:10rem;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:600;line-height:30px;letter-spacing:-.01em}
@media (min-width:1024px){.fl-user-name{display:block}}
/* The username is blurred until the pointer is on the pill (or it has
   keyboard focus): a screen shared or glanced at does not show it. Screen
   readers still read it. */
.fl-user-name{filter:blur(5px);transition:filter .25s ease}
.fl-user:hover .fl-user-name,.fl-user:focus-visible .fl-user-name{filter:none}
@media (prefers-reduced-motion:reduce){.fl-user-name{transition:none}}
.fl-signout{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:transparent;color:#8d9097;cursor:pointer;transition:color .2s linear,background-color .2s linear}
.fl-signout:hover{color:#fff;background:rgba(255,255,255,.05)}
.fl-signout svg{width:18px;height:18px}
.fl-user:focus-visible,.fl-signout:focus-visible,.fl-panel-signout:focus-visible{outline:2px solid #658a95;outline-offset:2px}
.fl-signout[aria-busy="true"],.fl-panel-signout[aria-busy="true"]{opacity:.55;pointer-events:none}
/* In the phone panel: a hairline, then the two account rows. */
.fl-panel-sep{height:1px;margin:6px 8px;background:rgba(255,255,255,.06)}
.fl-panel-user{gap:10px}
.fl-panel-user .fl-user-av{width:26px;height:26px;font-size:12px}
.fl-panel-user-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f4f4f5}
.fl-panel-user-go{flex:none;font-size:12px;color:#6f767c}
.fl-panel-signout{width:100%;gap:10px;border:0;background:transparent;font-family:inherit;text-align:left;cursor:pointer}
.fl-panel-signout svg{flex:none;width:16px;height:16px;margin:0 5px}
@media (max-width:639.98px){
.fl-nav{position:sticky;top:0;margin-bottom:0;padding:18px 1.5rem;background:linear-gradient(180deg,rgba(7,9,11,.94) 0%,rgba(7,9,11,.88) 55%,rgba(7,9,11,0) 100%);-webkit-backdrop-filter:blur(7.5px);backdrop-filter:blur(7.5px)}
.fl-nav-brand{display:flex;align-items:center}
}
/* The Orelys logotype - header of every page (SiteHeader + the homepage's
   scraped header), the footer, the splash and the homepage's nav overlay.
   The round mark (public/orelys/orelys-mark-*.png, a full-bleed disc) IS the
   capital O of "Orelys": [mark]relys. Proportions taken from the brand's own
   wordmark (public/orelys/orelys-wordmark-dark.png): the disc is 1.6x the
   x-height, a hair taller than Satoshi's ascenders (l 0.74em, the text O
   0.76em) because its dark rim reads darker than a solid letter - 0.8em
   square. Its bottom sits on the text baseline (inline-flex baseline
   alignment puts an image's bottom edge there), and "relys" follows after a
   hair of space: 0.04em + the r's own side bearing, ~0.1em of ink gap, as in
   the wordmark. Checked at 16px, the 20/22px header and the 240px footer. */
.fl-logo{display:inline-flex;align-items:baseline;white-space:nowrap;font-size:20px;line-height:1;font-weight:700;letter-spacing:-.015em;color:#f4f4f5}
@media (min-width:768px){.fl-logo{font-size:22px}}
.fl-logo-mark{flex:none;display:block;width:.9em;height:.9em;margin-right:.14em;transform:translateY(.0126em)}

/* ---------------------------------------------------------------------------
   7. SITE FOOTER (components/SiteFooter.tsx). Transparent, so the page and the
   glow of the last section run into it: a teal hairline, the brand block and
   the four columns, the legal line centred, then the logotype huge and faint. Four link columns in one row from 640px,
   the brand block beside them from 1024px. Component classes only - on "/"
   the homepage-only exact.css re-declares responsive grid utilities, which is
   what pushed the old footer's lg:grid-cols-4 back to 2x2.
   Contrast: #8d9097 on the #07090b page is 6.2:1.
   --------------------------------------------------------------------------- */
.ft{position:relative;color:#a1a1aa;overflow:hidden}
.ft-rule{height:1px;background:linear-gradient(90deg,rgba(143,195,204,0),rgba(143,195,204,.35) 50%,rgba(143,195,204,0))}
.ft-body{padding:56px 0 0}
@media (min-width:768px){.ft-body{padding-top:68px}}
.ft-top{display:grid;gap:40px;padding-bottom:44px}
@media (min-width:1024px){.ft-top{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;padding-bottom:44px}}
.ft-word{align-self:flex-start}
.ft-tag{margin-top:16px;max-width:21rem;font-size:14px;line-height:1.7;color:#8d9097}
.ft-social{margin-top:20px;margin-left:-7px;display:flex;gap:6px}
.ft-icon{display:grid;place-items:center;width:34px;height:34px;color:#8d9097;transition:color .2s linear,transform .2s ease}
.ft-icon svg{width:19px;height:19px}
.ft-icon:hover{color:#fff;transform:translateY(-2px)}
.ft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
@media (min-width:640px){.ft-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ft-h{font-family:"Geist Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#b2ccd5}
.ft-links{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.ft-links a{font-size:14px;color:#a1a1aa;transition:color .2s linear;overflow-wrap:anywhere}
.ft-links a:hover{color:#fff}
.ft-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.06);text-align:center}
.ft-legal{margin:0 auto;max-width:46rem;font-size:12px;line-height:1.7;color:#6f777c;text-wrap:balance}
.ft-legal b{font-weight:600;color:#a1a1aa}
.ft-icon:focus-visible,.ft-links a:focus-visible,.ft-word:focus-visible{outline:2px solid #658a95;outline-offset:3px;border-radius:8px}
/* The giant logotype under the card: faint, cut by a fade so it melts into
   the page. It sits in the footer's own padding, so nothing overlaps it. */
.ft-mark{display:flex;justify-content:center;margin-top:18px;height:clamp(64px,15vw,190px);overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 92%)}
.ft-mark .fl-logo{font-size:clamp(84px,19vw,240px);letter-spacing:-.045em;color:rgba(178,204,213,.12);opacity:1}
.ft-mark .fl-logo-mark{opacity:.14}
@media (prefers-reduced-motion:reduce){.ft-icon,.ft-links a{transition:none}}

/* ---------------------------------------------------------------------------
   8. FORMS - the form controls /contact and /data-removal share: labels
   (.ct-label), inputs and textareas (.ct-input / .ct-textarea, .ct-field for
   one with an icon inside), the "not connected" notice (.ct-notice), the
   submit wrapper (.ct-submit, isolates the pill's ring) and the custom
   picker (.ts-*, app/contact/TopicSelect.tsx).
   --------------------------------------------------------------------------- */
.ts{position:relative}
.ts-btn{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 14px 0 10px;border:1px solid #202c2f;border-radius:14px;background:#0b0e10;color:#e0e0e2;font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
.ts-btn:hover{border-color:#2c393c}
.ts-btn:focus-visible,.ts-btn.is-open{outline:none;border-color:#4b676c;box-shadow:0 0 0 3px rgba(75,103,108,.25)}
.ts-ph{flex:1;padding-left:4px;color:#8d9097}
.ts-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;border:1px solid #242c30;background:#141a1d;color:#8fc3cc}
.ts-ico svg{width:15px;height:15px}
.ts-chev{flex:none;width:16px;height:16px;color:#8d9097;transition:transform .2s ease}
.ts-btn.is-open .ts-chev{transform:rotate(180deg)}
.ts-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;max-height:380px;overflow-y:auto;padding:6px;border-radius:16px;border:1px solid #242c30;background:#0d1113;box-shadow:0 24px 60px -12px rgba(0,0,0,.85)}
.ts-list[hidden]{display:none}
.ts-list.is-open{animation:ts-in .16s ease-out}
@keyframes ts-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ts-opt{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:11px;cursor:pointer}
.ts-opt.is-active{background:rgba(143,195,204,.08)}
.ts-opt[aria-selected="true"] .ts-ico{border-color:rgba(143,195,204,.45);background:rgba(143,195,204,.12)}
.ts-text{flex:1;min-width:0;display:flex;flex-direction:column}
.ts-name{font-size:14px;font-weight:500;color:#e0e0e2}
.ts-hint{margin-top:1px;font-size:12px;color:#6a7078}
.ts-check{flex:none;width:16px;height:16px;color:#8fc3cc}
@media (prefers-reduced-motion:reduce){.ts-list.is-open{animation:none}.ts-chev{transition:none}}
.ct-field{position:relative}
.ct-field>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#8d9097;pointer-events:none}
.ct-field>.ct-input{height:48px;padding-left:40px}
.ct-label{display:block;font-family:"Geist Mono",monospace;font-size:10px;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#8d9097;margin-bottom:10px}
.ct-input,.ct-select,.ct-textarea{display:block;width:100%;border:1px solid #202c2f;border-radius:14px;background:#0b0e10;color:#e0e0e2;font:inherit;font-size:14px;line-height:1.55;padding:12px 14px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.ct-textarea{min-height:170px;resize:vertical}
.ct-select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9097' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:15px}
.ct-select option{background:#0b0e10;color:#e0e0e2}
.ct-input:focus,.ct-select:focus,.ct-textarea:focus{border-color:#4b676c;box-shadow:0 0 0 3px rgba(75,103,108,.25)}
.ct-input::placeholder,.ct-textarea::placeholder{color:#8d9097}
.ct-submit{flex:none;position:relative;isolation:isolate;display:inline-flex}
.ct-notice{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.6;color:#d4d4d8}
.ct-notice b{font-weight:600;color:#e6c684}
.ct-notice svg{flex:none;width:18px;height:18px;margin-top:1px;color:#e0b25a}