/* ============================================================
   xyzios.com — restyled 7/25 to the Popflow estate's language:
   dark #0B0F18-family ground, bronze #CDB384, BOLD Inter display,
   pill CTAs — the same DNA as popflow.com and the product OS.
   IBM Plex Mono survives only as small data readouts.
   No framework. No build step. Every rule here is load-bearing.
   ============================================================ */

/* ---- tokens ---------------------------------------------------------- */
:root{
  /* Ink: layered rather than flat, so surfaces separate without borders */
  --ink:        #080A10;
  --ink-2:      #0B0E16;
  --surface:    #10141E;
  --raised:     #161B27;

  /* Brand metals — kept from the product, refined for print-like contrast */
  --bronze:     #CDB384;
  --bronze-lit: #E8D3A9;
  --bronze-dim: #A78F65;   /* #8A7550 measured 4.47:1 — just under AA */
  --rust:       #BF4E30;
  --steel:      #7487A3;
  --sage:       #6FA88A;

  /* Warm paper white — cold #FFF reads cheap on this ground */
  --paper:      #F3F0E9;
  --paper-2:    rgba(243,240,233,.66);
  /* .42 measured 3.69:1 on --ink — under AA for the 10–11px mono labels that
     use it. Raised until it measured over 4.5:1. */
  --paper-3:    rgba(243,240,233,.58);

  --hair:       rgba(205,179,132,.16);
  --hair-2:     rgba(243,240,233,.07);

  --measure:    68ch;
  --gutter:     clamp(20px, 5vw, 72px);
  --maxw:       1240px;

  /* One easing for the whole site — motion consistency beats variety */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:Inter,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Grain + a faint plotted grid. This is the "instrument paper" texture —
   fixed so it doesn't parallax, pointer-events:none so it never blocks. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(var(--hair-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair-2) 1px, transparent 1px);
  background-size:88px 88px;
  opacity:.55;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
}
body::after{
  content:"";position:fixed;inset:-200%;z-index:2;pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer,section{position:relative;z-index:3;}

/* ---- type ------------------------------------------------------------ */
.display,h1,h2,h3{
  font-family:Inter,ui-sans-serif,-apple-system,sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem, 7vw, 5.8rem);}
h2{font-size:clamp(1.9rem, 4vw, 3.2rem); line-height:1.08;}
h3{font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.24; letter-spacing:-.015em; font-weight:700;}

p{margin:0 0 1.15em; max-width:var(--measure);}

.lede{
  font-size:clamp(1.06rem, 1.5vw, 1.28rem);
  line-height:1.62;
  color:var(--paper-2);
  max-width:56ch;
}

/* The instrument readout: mono, spaced, small. Used for eyebrows, labels,
   figures — anywhere the site should feel like it's reporting, not selling. */
.tag{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--bronze);
}
.tag--dim{color:var(--paper-3);}

.num{
  font-family:Inter,sans-serif;
  font-weight:800;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.04em;
  line-height:.86;
  color:var(--bronze);
}

em.q{
  font-style:normal;
  color:var(--bronze-lit);
}

a{color:var(--bronze); text-decoration:none;}
a:hover{color:var(--bronze-lit);}

/* Accessibility priority 1 — never remove the ring, restyle it. */
:focus-visible{
  outline:2px solid var(--bronze-lit);
  outline-offset:3px;
  border-radius:2px;
}

/* Bronze selection — the details are the design */
::selection{background:var(--bronze); color:#0A0D14;}

/* Thin instrument scrollbar */
html{scrollbar-width:thin; scrollbar-color:var(--bronze-dim) var(--ink);}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--bronze-dim); border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--bronze);}

/* Cross-page crossfade where the browser supports it; no-op elsewhere */
@view-transition{navigation:auto;}

/* The plotted-progress hairline: a 2px bronze line that draws across the top
   of the viewport as you read. Pure CSS scroll-driven animation — browsers
   without support simply never see it (it stays at scaleX(0)). */
.plot{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:linear-gradient(90deg, var(--bronze-dim), var(--bronze-lit));
  transform-origin:left; transform:scaleX(0); pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .plot{animation:plotline linear both; animation-timeline:scroll(root);}
  @keyframes plotline{to{transform:scaleX(1);}}
}

/* Atmospheric bronze halo — sits above the grid texture, below content */
.halo{
  position:fixed; z-index:2; pointer-events:none;
  left:72%; top:24%; width:min(920px,120vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(205,179,132,.075) 0%, rgba(205,179,132,.028) 38%, transparent 66%);
}

/* ---- shell ----------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.narrow{max-width:820px;}

.site-head{
  position:sticky; top:0; z-index:40;
  padding:20px 0;
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(8,10,16,.92), rgba(8,10,16,.55) 70%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.site-head.stuck{border-bottom-color:var(--hair);}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.site-head img{height:46px; width:auto; display:block;}

.nav{display:flex; align-items:center; gap:30px;}
.nav a{
  font-size:14px; font-weight:500; color:var(--paper-2);
  position:relative; padding:4px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--bronze); transition:width .4s var(--ease-out);
}
.nav a:hover{color:var(--paper);}
.nav a:hover::after{width:100%;}
.nav a[aria-current="page"]{color:var(--paper);}
.nav a[aria-current="page"]::after{width:100%; background:var(--bronze-dim);}

/* ---- mobile menu ------------------------------------------------------ */
.menu-btn{display:none;}
.sheet{
  position:fixed; inset:0; z-index:80;
  background:rgba(8,10,16,.96);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  display:none; flex-direction:column;
  padding:calc(18px + env(safe-area-inset-top)) var(--gutter)
          calc(34px + env(safe-area-inset-bottom));
}
.sheet.open{display:flex;}
.sheet-top{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:min(9vh,72px);}
.sheet-top img{height:40px; width:auto; display:block;}
.sheet-close{
  background:none; border:1px solid var(--hair); border-radius:2px;
  color:var(--paper); min-height:44px; min-width:44px;
  display:grid; place-items:center; cursor:pointer;
}
.sheet-close svg{width:16px; height:16px;}
.sheet nav{display:flex; flex-direction:column;}
.sheet nav a{
  font-family:Inter,sans-serif; font-weight:800;
  font-size:clamp(1.9rem,8.6vw,2.8rem); letter-spacing:-.03em; line-height:1.1;
  color:var(--paper); display:flex; align-items:baseline; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--hair-2);
}
.sheet nav a .idx{
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; color:var(--bronze-dim);
}
.sheet.open nav a{opacity:0; transform:translateY(16px);
  animation:sheetin .6s var(--ease-out) forwards;}
.sheet.open nav a:nth-child(1){animation-delay:.05s}
.sheet.open nav a:nth-child(2){animation-delay:.11s}
.sheet.open nav a:nth-child(3){animation-delay:.17s}
.sheet.open nav a:nth-child(4){animation-delay:.23s}
.sheet.open nav a:nth-child(5){animation-delay:.29s}
@keyframes sheetin{to{opacity:1; transform:none;}}
.sheet-foot{
  margin-top:auto; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--paper-3);
}
.sheet-foot a{color:var(--paper-2);}
@media (prefers-reduced-motion:reduce){
  .sheet.open nav a{opacity:1; transform:none; animation:none;}
}

/* ---- buttons --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:Inter,sans-serif; font-size:14.5px; font-weight:600;
  letter-spacing:.005em;
  padding:14px 28px; border-radius:100px; border:1px solid var(--bronze);
  background:var(--bronze); color:#0A0D14;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease);
  min-height:44px;                       /* touch target floor */
}
.btn:hover{background:var(--bronze-lit); border-color:var(--bronze-lit); color:#0A0D14;}
.btn:active{transform:translateY(1px);}
.btn--ghost{background:transparent; color:var(--paper); border-color:var(--hair);}
.btn--ghost:hover{background:transparent; border-color:var(--bronze); color:var(--bronze-lit);}
.btn svg{width:15px; height:15px; transition:transform .35s var(--ease-out);}
.btn:hover svg{transform:translateX(4px);}

/* ---- rules & sections ------------------------------------------------ */
.rule{height:1px; background:var(--hair); border:0; margin:0;}

section{padding-block:clamp(80px, 11vw, 168px);}
.hero{padding-block:clamp(56px,9vw,116px) clamp(40px,6vw,72px);}
.hero h1{margin-bottom:26px;}
.hero .tag{display:block; margin-bottom:18px;}
.sec-head{margin-bottom:clamp(40px, 5vw, 76px);}
.sec-head .tag{display:block; margin-bottom:20px;}

/* ---- reveal-on-scroll ------------------------------------------------
   Gated behind .js, which an inline script in <head> adds. Without it the
   content is simply VISIBLE. This matters: if the observer never runs — JS
   error, unsupported browser, a script blocked by an extension — an
   ungated `opacity:0` renders the entire page blank. A marketing site that
   fails to invisible is worse than one with no animation at all. */
.js .rise{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js .rise.in{opacity:1; transform:none;}

/* Draw a hairline in, left to right — the "plotting" motif */
.js .draw{transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-out);}
.js .draw.in{transform:scaleX(1);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .rise{opacity:1; transform:none; transition:none;}
  .js .draw{transform:none; transition:none;}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---- footer -----------------------------------------------------------
   The editorial close: link columns, then the wordmark at full measure —
   the site signs its name — then a mono meta line. */
.site-foot{
  border-top:1px solid var(--hair);
  padding:0 0 30px; color:var(--paper-3); font-size:13.5px;
  overflow:hidden;
}
.site-foot a:hover{color:var(--bronze-lit);}
.foot-grid{
  display:grid; gap:44px 32px;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.55fr));
  padding-block:clamp(48px,7vw,88px) clamp(40px,5vw,68px);
}
.foot-brand .tag--dim{display:block; margin-bottom:16px;}
.foot-line{color:var(--paper-2); font-size:14.5px; line-height:1.6;
  max-width:34ch; margin:0 0 20px;}
.foot-mail{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  letter-spacing:.08em; color:var(--bronze);
  border-bottom:1px solid var(--hair); padding-bottom:3px;
}
.foot-col{display:flex; flex-direction:column; align-items:flex-start;}
.foot-col .tag--dim{margin-bottom:14px;}
.foot-col a{color:var(--paper-2); font-size:14.5px; padding:5px 0;}
.foot-markwrap{padding-block:8px clamp(24px,4vw,40px);}
.foot-mark{display:block; width:min(100%,560px); height:auto; opacity:.92;
  transition:opacity .5s var(--ease);}
.foot-markwrap:hover .foot-mark{opacity:1;}
.foot-meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3);
  border-top:1px solid var(--hair-2); padding-top:22px;
}
.foot-meta .push{flex:1 1 auto;}
.foot-grid--doc{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);}
/* minimal one-line footer — legal pages + anywhere the wordmark would shout */
.foot-min{
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center;
  padding-block:32px 4px;
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3);
}
.foot-min a{color:var(--paper-2); font-size:11px;}
.foot-min .push{flex:1 1 auto;}
@media (max-width:860px){
  .foot-grid,.foot-grid--doc{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px;}
}

/* ---- draft banner ---------------------------------------------------- */
.draftbar{
  position:relative; z-index:50;
  background:rgba(191,78,48,.13);
  border-bottom:1px solid rgba(191,78,48,.34);
  color:#EBA88F;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:9px 0; text-align:center;
}

/* ---- panels & column grids ------------------------------------------- */
.panel{
  background:linear-gradient(168deg,var(--raised),var(--surface));
  border:1px solid var(--hair); border-radius:4px;
  padding:26px 28px;
}
.panel h3{margin-top:0;}
.panel > p:last-child{margin-bottom:0;}
.cols{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  margin:30px 0;
}
.cols .panel{margin:0;}

/* Forms — used by the demo request draft */
form.demo{max-width:560px;}
form.demo label{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bronze);
  margin:22px 0 8px;
}
form.demo input,form.demo select,form.demo textarea{
  width:100%; background:rgba(8,10,16,.6); border:1px solid var(--hair);
  border-radius:3px; color:var(--paper); padding:13px 15px;
  font-size:16px;                     /* 16px avoids iOS zoom-on-focus */
  font-family:inherit; min-height:48px;
}
form.demo textarea{min-height:104px; resize:vertical;}
form.demo input:focus,form.demo select:focus,form.demo textarea:focus{
  outline:none; border-color:var(--bronze);
}

/* ---- legal / long-form ----------------------------------------------- */
.legal{max-width:74ch;}
.legal h2{font-size:clamp(1.35rem,2.1vw,1.72rem); margin:56px 0 14px;}
.legal h3{font-size:1.08rem; margin:32px 0 8px; color:var(--bronze-lit);}
.legal p,.legal li{font-size:16px; color:var(--paper-2); max-width:74ch;}
.legal ul{padding-left:20px;} .legal li{margin:8px 0;}
.legal .note{
  display:block; color:var(--paper-3); font-size:13.5px; line-height:1.6;
  border-left:1px solid var(--hair); padding-left:14px; margin-top:38px;
}
.legal .updated{
  font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.1em; color:var(--paper-3); margin-bottom:44px;
}
table.doc{width:100%; border-collapse:collapse; margin:22px 0; font-size:15px;}
table.doc th,table.doc td{
  text-align:left; padding:12px 14px;
  border-bottom:1px solid var(--hair-2); vertical-align:top; color:var(--paper-2);
}
table.doc th{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bronze); font-weight:500; white-space:nowrap;
}
.tablewrap{overflow-x:auto;}   /* wide tables scroll, body never does */

@media (max-width:760px){
  .site-head img{height:38px;}
  .site-head .nav{display:none;}       /* the sheet menu takes over */
  .menu-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:none; border:1px solid var(--hair); border-radius:2px;
    color:var(--paper); font-family:"IBM Plex Mono",monospace;
    font-size:11px; font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; padding:0 16px; min-height:44px; cursor:pointer;
  }
  .menu-btn:hover{border-color:var(--bronze); color:var(--bronze-lit);}
  .nav--doc{display:none;}             /* legal pages: footer carries these */
}