/* vibrez.com — shared brand kit. Every page links this file, the homepage included.
   AUTHORITY: VBZ-BRD-DSN-001 v2.1 (DRAFT). Reference implementation: vibrezhq.com
   (Vibrezhq/app/globals.css) — token NAMES match it so the three sites read as one.
   vibrez.com is member-facing, so it is DARK: the DSN stage scope is the page scope.
   Rules: orange #FFA500 is the ONLY action colour (with #0A0A0A text on it).
   Controls 4px radius, never pill (pills only for tags/chips/badges). Cards 10px,
   fill + 1px hairline, no shadow at rest, -2px lift on hover for links.
   The only gradient is the radial orange bloom from a hero's top-right
   (scrims over photographs are not decoration and are allowed). */

/* ---------- fonts: self-hosted, OFL (see assets/fonts/OFL-*.txt) ---------- */
@font-face{font-family:'Barlow Semi Condensed';src:url('/assets/fonts/BarlowSemiCondensed-BlackItalic.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap;}
@font-face{font-family:'Lato';src:url('/assets/fonts/Lato-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Lato';src:url('/assets/fonts/Lato-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Lato';src:url('/assets/fonts/Lato-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}

:root{
  color-scheme:dark;

  /* brand core */
  --vbz-orange:#FFA500;
  --vbz-black:#0A0A0A;
  --orange-300:#FFC24D;
  --orange-500:#E89400;

  /* semantic — DSN stage (dark) scope */
  --bg-app:#111318;
  --bg-sunken:#0C0E13;
  --surface-card:#171A24;
  --surface-2:#222735;
  --surface-3:#2B3141;
  --text-primary:#F8FAFC;
  --text-secondary:#A7AFBF;
  --text-tertiary:#838C9F;
  --text-on-accent:#0A0A0A;
  --border-subtle:rgba(248,250,252,.08);
  --border-default:#343B4B;
  --border-strong:#454D60;
  --accent:#FFA500;
  --accent-hover:var(--orange-300);
  --accent-press:var(--orange-500);
  --focus-ring:#FFA500;
  --live:#35D0BA;               /* status only, never an action */
  --chrome-bg:rgba(17,19,24,.9);
  --chrome-blur:14px;
  --scrim:rgba(17,19,24,.72);
  --bloom:rgba(255,165,0,.18);  /* the one allowed gradient: hero top-right */

  /* type */
  --font-display:'Barlow Semi Condensed','Arial Narrow',Impact,sans-serif;
  --font-text:'Lato','Helvetica Neue',Arial,sans-serif;
  --t-d1:clamp(52px,2rem + 6vw,96px);
  --t-d2:clamp(40px,2rem + 4vw,72px);
  --t-d3:clamp(34px,1.6rem + 2.6vw,56px);
  --t-d4:clamp(30px,1.4rem + 1.4vw,40px);
  --t-d5:30px;
  --t-d6:22px;
  --t-lg:19px;--t-md:16px;--t-sm:14px;--t-xs:12px;--t-2xs:11px;
  --lh-display:.92;--lh-text:1.55;
  --track-display:-.01em;--track-label:.14em;--track-eyebrow:.22em;

  /* spacing */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;--s32:128px;
  --section-y:var(--s12);
  --stack-gap:var(--s6);
  --box-gap:var(--s4);
  --tile-pad:var(--s5);
  --row:160px;

  /* radii */
  --r-2:4px;--r-4:10px;--r-chip:999px;
  --r-control:var(--r-2);
  --r-card:var(--r-4);

  /* motion: snaps, never bounces */
  --dur-1:90ms;--dur-2:150ms;--dur-3:220ms;--dur-4:320ms;
  --ease:cubic-bezier(.2,.8,.3,1);

  /* layout */
  --max-content:1200px;
  --max-read:64ch;
  --measure:760px;
  --gutter:16px;
  --chrome-h:64px;
  --tap:44px;
}
@media (min-width:768px){ :root{ --section-y:var(--s16); --tile-pad:var(--s6); --gutter:32px; --chrome-h:72px; } }
@media (min-width:1024px){ :root{ --row:200px; } }
@media (prefers-reduced-motion:reduce){ :root{ --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; --dur-4:0ms; } }

*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg-app);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  background:var(--bg-app);color:var(--text-primary);
  font:400 var(--t-md)/var(--lh-text) var(--font-text);-webkit-font-smoothing:antialiased;
}
a{color:var(--text-primary);text-decoration-line:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-thickness var(--dur-1) var(--ease);}
a:hover{text-decoration-thickness:3px;}
:focus-visible{outline:4px solid var(--focus-ring);outline-offset:2px;}
::selection{background:var(--accent);color:var(--text-on-accent);}
img{max-width:100%;}

.skip-link{position:fixed;z-index:200;top:12px;left:12px;padding:var(--s3) var(--s4);border-radius:var(--r-control);
  background:var(--accent);color:var(--text-on-accent);font-weight:900;text-decoration:none;transform:translateY(-200%);
  transition:transform var(--dur-2) var(--ease);}
.skip-link:focus{transform:none;}

/* display face: Barlow Semi Condensed Black Italic, uppercase, never under 22px */
.vbz-display{font-family:var(--font-display);font-style:italic;font-weight:900;text-transform:uppercase;
  line-height:var(--lh-display);letter-spacing:var(--track-display);text-wrap:balance;}
.vbz-label{font:900 var(--t-xs)/1.4 var(--font-text);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary);}

/* ---------- buttons: 4px, never pill, orange is the one action fill ---------- */
.vz-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s5);border:1.5px solid transparent;border-radius:var(--r-control);
  font:900 var(--t-sm)/1.2 var(--font-text);letter-spacing:.04em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
}
.vz-btn:active{transform:translateY(1px);}
.vz-btn svg{width:18px;height:18px;flex:none;}
.vz-btn--lg{min-height:52px;padding:0 var(--s6);font-size:var(--t-md);}
.vz-btn--solid{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);}
.vz-btn--solid:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-accent);}
.vz-btn--solid:active{background:var(--accent-press);border-color:var(--accent-press);}
.vz-btn--ghost{background:transparent;border-color:var(--text-primary);color:var(--text-primary);}
.vz-btn--ghost:hover{background:var(--text-primary);color:var(--bg-app);}

/* ---------- header: dark chrome, logo left, nav, orange download action ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--chrome-bg);-webkit-backdrop-filter:blur(var(--chrome-blur));backdrop-filter:blur(var(--chrome-blur));
  border-bottom:1px solid var(--border-subtle);padding-top:env(safe-area-inset-top,0px);
}
.site-head__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  height:var(--chrome-h);width:100%;max-width:calc(var(--max-content) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter);
}
.site-head__logo{display:inline-flex;align-items:center;flex:none;min-height:var(--tap);padding-block:6px;text-decoration:none;}
.site-head__logo svg{display:block;height:28px;width:auto;}
.site-head__nav{display:flex;align-items:center;gap:var(--s8);}
.site-head__links{list-style:none;margin:0;padding:0;display:none;align-items:center;gap:var(--s1);}
.site-head__links a{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);padding-inline:var(--s3);
  font:700 var(--t-sm)/1 var(--font-text);color:var(--text-primary);text-decoration:none;}
.site-head__links a::after{content:'';position:absolute;left:var(--s3);right:var(--s3);bottom:8px;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease);}
.site-head__links a:hover::after,.site-head__links a[aria-current="page"]::after{transform:scaleX(1);}
@media (min-width:768px){ .site-head__links{display:flex;} }
.store-badge{display:inline-flex;border-radius:8px;text-decoration:none;}
.store-badge img{display:block;height:40px;width:auto;}

/* ---------- page shell ---------- */
.page{flex:1;width:100%;max-width:calc(var(--measure) + 2*var(--gutter));margin:0 auto;padding:var(--section-y) var(--gutter) 0;}
.page--wide{max-width:calc(var(--max-content) + 2*var(--gutter));}
.eyebrow{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4);
  font:900 var(--t-xs)/1.4 var(--font-text);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-secondary);}
.eyebrow::before{content:'';flex:none;width:24px;height:3px;background:var(--accent);}
.page h1,.page-title{font-family:var(--font-display);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:var(--t-d2);line-height:var(--lh-display);letter-spacing:var(--track-display);margin:0;text-wrap:balance;}
.lede,.standfirst{font-size:var(--t-lg);line-height:var(--lh-text);color:var(--text-secondary);margin:var(--s5) 0 0;max-width:46ch;}
.updated{font:900 var(--t-2xs)/1.4 var(--font-text);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary);margin:var(--s4) 0 0;}

/* ---------- footer: bento tiles (brand + four columns), legal bar ---------- */
.site-foot{margin-top:var(--s20);border-top:3px solid var(--accent);background:var(--bg-sunken);
  padding:var(--section-y) 0 calc(var(--s8) + env(safe-area-inset-bottom,0px));font-size:var(--t-sm);color:var(--text-secondary);}
.site-foot__inner{width:100%;max-width:calc(var(--max-content) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter);}
.site-foot__grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--box-gap);grid-template-columns:repeat(2,minmax(0,1fr));}
.site-foot__brand,.site-foot__col{border:1px solid var(--border-default);border-radius:var(--r-card);background:var(--surface-card);padding:var(--tile-pad);min-width:0;}
.site-foot__brand{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);}
.site-foot__logo{display:inline-flex;text-decoration:none;}
.site-foot__logo svg{display:block;height:28px;width:auto;}
.site-foot__sig{font:900 var(--t-lg)/1.3 var(--font-text);color:var(--accent);margin:0;}
.site-foot__sig b{font-weight:900;}
.site-foot__stores{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);}
.site-foot__social{display:flex;gap:var(--s2);}
.site-foot__social a{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-control);
  border:1px solid var(--border-default);color:var(--text-primary);transition:border-color var(--dur-2) var(--ease);}
.site-foot__social a:hover{border-color:var(--text-primary);}
.site-foot__social svg{width:18px;height:18px;fill:currentColor;}
.site-foot__col{display:flex;flex-direction:column;align-items:flex-start;}
.site-foot__col h2{font:900 var(--t-xs)/1.4 var(--font-text);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary);margin:0 0 var(--s2);}
.site-foot__col a{display:inline-flex;align-items:center;min-height:36px;font:700 var(--t-sm)/1.3 var(--font-text);color:var(--text-primary);text-decoration:none;}
.site-foot__col a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;}
.site-foot__col a[aria-current="page"],.site-foot__legal a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;}
.site-foot__bar{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--border-subtle);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s3) var(--s6);font-size:13px;line-height:1.5;color:var(--text-tertiary);}
.site-foot__bar p{margin:0;}
.site-foot__legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s5);}
.site-foot__legal a{color:var(--text-secondary);font-weight:700;text-decoration:none;}
.site-foot__legal a:hover{color:var(--text-primary);}
.site-foot__legal span{font:900 var(--t-2xs)/1 var(--font-text);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-primary);}
@media (min-width:1024px){
  .site-foot__grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .site-foot__brand{grid-column:span 2;}
  .site-foot__col{grid-column:span 1;}
}

/* ---------- components (FAQ, Download, Moments) ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.block{margin:var(--s12) 0 0;}
.block-title{display:flex;align-items:center;gap:var(--s4);margin:0 0 var(--stack-gap);
  font-family:var(--font-display);font-style:italic;font-weight:900;font-size:var(--t-d5);line-height:var(--lh-display);
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--text-primary);}
.block-title::after{content:'';flex:1;height:1px;background:var(--border-default);}
.stack{display:flex;flex-direction:column;gap:var(--s3);}
html[data-platform="ios"] .stack > [data-for="ios"],
html[data-platform="android"] .stack > [data-for="android"]{order:-1;}

/* store choices: a tile each; the visitor's own store is the orange action */
.pill,.row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:64px;padding:var(--s3) var(--tile-pad);border-radius:var(--r-card);text-decoration:none;color:var(--text-primary);
  background:var(--surface-card);border:1px solid var(--border-default);
  transition:transform var(--dur-3) var(--ease),border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}
.row{min-height:58px;}
.pill-text,.row-text{display:flex;flex-direction:column;gap:6px;min-width:0;}
.pill-caption,.row-caption{font:900 var(--t-2xs)/1.3 var(--font-text);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary);}
.pill-label{font-family:var(--font-display);font-style:italic;font-weight:900;font-size:var(--t-d6);line-height:1;text-transform:uppercase;letter-spacing:var(--track-display);}
.pill-arrow,.row-arrow{font:900 var(--t-md)/1 var(--font-text);flex:none;transition:transform var(--dur-2) var(--ease);}
a.pill:hover,a.row:hover{transform:translateY(-2px);border-color:var(--border-strong);color:var(--text-primary);}
a.pill:hover .pill-arrow,a.row:hover .row-arrow{transform:translateX(3px);}
html[data-platform="ios"] .pill.lead-ios,
html[data-platform="android"] .pill.lead-android,
html:not([data-platform="ios"]):not([data-platform="android"]) .pill.lead-other{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent);}
html[data-platform="ios"] .pill.lead-ios .pill-caption,
html[data-platform="android"] .pill.lead-android .pill-caption,
html:not([data-platform="ios"]):not([data-platform="android"]) .pill.lead-other .pill-caption{color:rgba(10,10,10,.72);}
html[data-platform="ios"] a.pill.lead-ios:hover,
html[data-platform="android"] a.pill.lead-android:hover,
html:not([data-platform="ios"]):not([data-platform="android"]) a.pill.lead-other:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-accent);}
.pill.is-soon{border-style:dashed;color:var(--text-tertiary);background:transparent;cursor:default;}
.note{margin:-2px 4px 4px;font-size:13px;line-height:1.5;color:var(--text-tertiary);}
.row-name{font:900 var(--t-md)/1.25 var(--font-text);}

.socials{display:flex;flex-wrap:wrap;gap:var(--s2);}
.social{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-control);color:var(--text-primary);
  border:1px solid var(--border-default);background:var(--surface-card);transition:border-color var(--dur-2) var(--ease);}
.social svg{width:20px;height:20px;fill:currentColor;}
.social:hover{border-color:var(--text-primary);color:var(--text-primary);}

/* FAQ: one <details class="qa"> per question, each a tile */
.qa{border:1px solid var(--border-default);border-radius:var(--r-card);background:var(--surface-card);}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:58px;padding:var(--s4) var(--tile-pad);cursor:pointer;list-style:none;font:900 var(--t-md)/1.35 var(--font-text);
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:'+';flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-control);
  border:1px solid var(--border-default);font:900 16px/1 var(--font-text);color:var(--text-secondary);
  transition:border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);}
.qa[open] summary::after{content:'\2212';}
.qa summary:hover::after{border-color:var(--accent);color:var(--text-primary);}
.qa summary:focus-visible{outline-offset:-4px;border-radius:var(--r-card);}
.answer{padding:0 var(--tile-pad) var(--tile-pad);font-size:15px;line-height:1.65;color:var(--text-secondary);}
.answer p{margin:0 0 14px;max-width:62ch;}
.answer > :last-child{margin-bottom:0;}
.answer strong{color:var(--text-primary);font-weight:900;}
.steps{list-style:none;counter-reset:step;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:var(--s3);}
.steps li{counter-increment:step;display:flex;gap:14px;align-items:flex-start;}
.steps li::before{content:counter(step);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-control);
  font:900 12px/1 var(--font-text);color:var(--bg-app);background:var(--text-primary);font-variant-numeric:tabular-nums;}

@media (max-width:420px){
  .site-head__inner{gap:var(--s3);}
  .site-head__logo svg{height:24px;}
  .site-head .vz-btn{padding:0 var(--s4);}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
@media print{
  .site-head,.site-foot,.skip-link{display:none;}
  body{background:#fff;color:#000;}
}

/* phone menu (SB, 14 Oct 2026): a native disclosure, no JS, phones only */
.site-head__menu{position:static;}
.site-head__menu summary{list-style:none;display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);min-width:var(--tap);
  padding:0 var(--s3);border:1px solid var(--border-default);border-radius:var(--r-control);color:var(--text-primary);
  font:900 var(--t-xs)/1 var(--font-text);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;}
.site-head__menu summary::-webkit-details-marker{display:none;}
.site-head__menu summary:focus-visible{outline:4px solid var(--accent);outline-offset:2px;}
.site-head__burger{position:relative;width:16px;height:2px;background:currentColor;}
.site-head__burger::before,.site-head__burger::after{content:'';position:absolute;left:0;width:16px;height:2px;background:currentColor;}
.site-head__burger::before{top:-5px;} .site-head__burger::after{top:5px;}
.site-head__menu[open] .site-head__burger{background:transparent;}
.site-head__menu[open] .site-head__burger::before{top:0;transform:rotate(45deg);}
.site-head__menu[open] .site-head__burger::after{top:0;transform:rotate(-45deg);}
.site-head__panel{list-style:none;margin:0;padding:var(--s2) var(--gutter,16px) var(--s4);position:absolute;left:0;right:0;top:100%;
  background:var(--bg-app);border-bottom:1px solid var(--border-default);display:grid;gap:var(--s1);}
.site-head__panel a{display:flex;align-items:center;min-height:var(--tap);color:var(--text-primary);text-decoration:none;
  font:700 var(--t-md)/1.2 var(--font-text);border-bottom:1px solid var(--border-subtle,rgba(248,250,252,.08));}
.site-head__panel a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;}
@media (min-width:768px){ .site-head__menu{display:none;} }
@media (max-width:380px){ .site-head__menu-label{display:none;} }
@media (max-width:400px){
  .site-head__nav{gap:var(--s2);}
  .site-head .vz-btn{padding:0 var(--s3);font-size:12px;letter-spacing:0;}
  .site-head__logo svg{height:20px;}
  .site-head__menu summary{padding:0;justify-content:center;}
}
.site-head__menu:not([open]) .site-head__panel{display:none;}