/* =========================================
   Budviews – Triangle + Cards + Full-cover modals
   ========================================= */

/* Root variables */
:root{
  --size: 96px;                     /* tile size */
  --gap: 115px;                     /* horizontal gap within a row */
  --step: calc(var(--size) + var(--gap));
  --overlap: 140px;                 /* how much lower rows rise into gaps (tweak) */
  --radius: 18px;                   /* corner rounding */

  /* Logo controls */
  --logo-size: 146px;               /* requested 146 x 146 */
  --logo-pullup: -25px;             /* how far to pull the logo upward to sit "in front" */

  --section-side-gap: 8px;          /* white margin on each side */
  --section-top-radius: 48px;       /* how curvy the top should be */

  --below-header-gap: 12px;
  --hero-gap: 34px;                 /* space between video and next section */
  --hero-top-gap: 38px;             /* space from header to video/text */
}

/* page centering */
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:start center;
  background:#fff;
  padding-top:0px; /* unified (replaces earlier 40px) */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* layout wrapper so we can stack the logo over/after the triangle */
.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  margin-top: var(--hero-top-gap);
  /* Push the curved section down while keeping video + text together */
  margin-bottom: var(--hero-gap);
}

/* Video hero (replaces triangle + logo text) */
.video-hero{
  position: relative;
  width: min(1100px, 96vw);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
.video-hero video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}
.play-overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
  transition: opacity 180ms ease;
}
.play-overlay svg{
  width: 88px;
  height: 88px;
}
.play-overlay:focus-visible{
  outline: 3px solid rgba(33,81,197,0.8);
  outline-offset: 4px;
  border-radius: 999px;
}
@media (max-width: 600px){
  .play-overlay, .play-overlay svg{ width: 64px; height: 64px; }
}

/* vertical stack of rows */
.triangle{
  display:flex;
  flex-direction:column;
  align-items:center;               /* centre each row -> symmetric triangle */
  row-gap: var(--gap);
}

/* each row */
.row{
  display:flex;
  justify-content:center;
  column-gap: var(--gap);           /* visible gaps inside the row */
}

/* raise every row (except the first) so icons sit in the gaps above */
.row + .row{
  margin-top: calc(-1 * var(--overlap));
}

/* shift every even row by half a step -> true stagger/brick look */
.row:nth-child(even){
  padding-left: calc(var(--step) / 2);
  padding-right: calc(var(--step) / 2); /* keeps overall centring */
}

/* tiles — scoped ONLY to the top triangle */
.triangle .row img{
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius);
  display:block;
  object-fit: contain;              /* keep full icon, no crop */
  background: transparent;          /* keep edges transparent */

  /* enter animation (works with your existing JS delays) */
  opacity:0;
  animation: popIn 420ms ease-out both;
  animation-delay: calc(var(--row, 0) * 220ms + var(--d, 0) * 90ms);
}

@keyframes popIn{
  from{ opacity:0; transform: translateY(-8px) scale(.96); filter: blur(2px); }
  to  { opacity:1; transform: translateY(0)    scale(1);    filter: blur(0); }
}

/* === Logo + Titles =================================================== */
.logo{
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: var(--radius);
  object-fit: contain;              /* keep your curved edges transparent */
  margin-top: calc(-1 * var(--logo-pullup));  /* overlaps the triangle */
  z-index: 5;                       /* stay in front */
  pointer-events: none;             /* clicks pass through, if needed */

  /* appears after the triangle finishes */
  opacity: 0;
  animation: popIn 520ms ease-out both;
  animation-delay: var(--logo-delay, 0ms); /* set from JS */
}

/* Title under the logo */
.logo-title{
  margin: 10px 0 0px 0;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;     /* bold */
  font-size: 28px;
  line-height: 1.15;
  color: rgb(33, 81, 197);
  text-align: center;

  opacity: 0;
  animation: popIn 520ms ease-out both;
  animation-delay: var(--logo-delay, 0ms); 
}

/* Subtitle styled like Apple's headline */
.logo-subtitle{
  margin: 20px 0 30px 0; /* increased bottom margin pushes page down */
  font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 80px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: rgb(33, 81, 197);
  text-align: center;

  /* show immediately (no fade gate) */
  opacity: 1;
  animation: none;
}

.logo-subtitle .lighter {
  font-weight: 400; /* lighter than the surrounding 600 */
  font-style: italic; /* optional, if you also want italics */
}


/* Smaller headline for mobile */
@media (max-width: 600px){
  .logo-subtitle{
    font-size: 42px;
    margin: 20px 0 20px 0; /* smaller bottom gap on small screens */
  }
  .logo-title{ font-size: 22px; }
}

/* Pause animations until JS says "ready" */
.logo, .logo-title, .logo-subtitle{ animation-play-state: paused; }
.stage.ready .logo,
.stage.ready .logo-title,
.stage.ready .logo-subtitle{ animation-play-state: running; }



/* === Cards Grid (below the triangle) ================================ */
.section.section-tiles-grid{
  width: min(1200px, 100%);
  padding: 64px 16px 24px;
  box-sizing: border-box;
}
/* Scope smoothing to the cards section (doesn’t affect the rest of the page) */
.section-tiles-grid{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* headline above the grid */
.section-tiles-grid .section-headline.typography-tiles-headline{
  margin: 0 0 28px;
  font-family: "Outfit", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgb(33, 81, 197);
  text-align: center;
}

/* 12-col grid with 24px gaps (collapses on mobile) */
.section-tiles-grid .grid-container{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  /* Center grid tracks on Safari/iOS when rounding leaves extra space */
  justify-content: center;
}

/* base card */
.section-tiles-grid .grid-item{
  position: relative;
  grid-column: span 12;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  min-height: 280px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* --- Taller heights for the two half cards --- */
.section-tiles-grid .grid-item.grid-item-story-number,
.section-tiles-grid .grid-item.grid-item-handpicked{
  min-height: 480px;  /* desktop/tablet */
}

/* Mobile: give all cards comfy padding and let content drive the height */
@media (max-width: 734px){
  .section-tiles-grid .grid-item{
    padding: 24px 16px;   /* more comfortable on phones */
    min-height: 0;        /* override base 280px so content controls height */
  }
}


/* Keep reasonable size on small screens */
@media (max-width: 734px){
  .section-tiles-grid .grid-item.grid-item-story-number,
  .section-tiles-grid .grid-item.grid-item-handpicked{
    min-height: 420px;
  }
}

/* width helpers */
.section-tiles-grid .grid-item.half{ grid-column: span 6; }
.section-tiles-grid .grid-item.full{ grid-column: span 12; }

/* themes */
.section-tiles-grid .grid-item.theme-blue{ background:#e9f0ff; color:#0f3ea6; }
.section-tiles-grid .grid-item.theme-inverted{ background:#111; color:#fff; }
.section-tiles-grid .grid-item.fact{
  display:flex; align-items:center; justify-content:center; text-align:center;
}

/* === Card headlines: match Apple App Store === */
.section-tiles-grid .typography-headline{
  /* Desktop */
  font-size: 48px;
  line-height: 1.08349;            /* Apple */
  font-weight: 600;
  letter-spacing: -.003em;
  word-break: break-word;
  margin: 0;
  color: #1d1d1f;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

@media (max-width: 1068px){
  .section-tiles-grid .typography-headline{
    font-size: 40px;               /* Apple */
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0;
  }
}

/* Elevated headline style used on small fact tiles */
.section-tiles-grid .typography-headline-elevated{
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
  color: #1d1d1f;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/* Match Apple’s constrained width on the hero h3 */
.section-tiles-grid .grid-item-stories h3{ max-width: 600px; }
@media (max-width: 1068px){
  .section-tiles-grid .grid-item-stories h3{ max-width: 280px; }
}

/* content layout helpers (scoped so they won't affect your triangle) */
.section-tiles-grid .flex-content{ display:flex; align-items:center; gap:18px; height:100%; }
.section-tiles-grid .row{ display:flex; gap:18px; }                     /* scoped reset */
.section-tiles-grid .row-reverse{ flex-direction: row-reverse; }

/* Utilities used by markup inside cards (rows that need centering / no-wrap) */
.section-tiles-grid .align-items-center { align-items: center; }
.section-tiles-grid .flex-nowrap       { flex-wrap: nowrap; }


/* Headline content: common left-aligned, vertically centered column */
.section-tiles-grid .headline-content{
  flex:1 1 50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}

/* Pictures: shared layout + sizing */
.section-tiles-grid .picture-container{
  flex:1 1 50%;
  min-height: 220px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.section-tiles-grid .picture-container img{
  width: 300px;
  height: auto;
  max-height: 800px;
  object-fit: contain;
  display: block;
  margin-right: 20px;
}

/* Guardrail: images inside cards must never overflow their column */
.section-tiles-grid .picture-container img,
.section-tiles-grid .icon img{
  max-width: 100%;
  height: auto;
}


/* Specific balance for the Stories card */
.section-tiles-grid .grid-item.full.grid-item-stories h3.typography-headline{ max-width: 900px; }
.section-tiles-grid .grid-item-stories .headline-content{ flex: 0 1 62%; }
.section-tiles-grid .grid-item-stories .picture-container{ flex: 0 1 38%; }

@media (max-width: 1068px){
  .section-tiles-grid .grid-item.full.grid-item-stories h3.typography-headline{ max-width: 560px; }
}

/* protect against your top-level .row rules (overlap/padding) */
.section-tiles-grid .row + .row{ margin-top:0 !important; }
.section-tiles-grid .row:nth-child(even){ padding-left:0 !important; padding-right:0 !important; }

/* details card images (inherits from shared .picture-container img) */
.section-tiles-grid .grid-item-details .picture-container img{}

/* in-app section layout overrides */
.section-tiles-grid .grid-item-in-app .headline-content{
  flex: 1 1 35%;
  align-items: center;
  max-width: 900px;
  width: 100%;
}
.section-tiles-grid .grid-item-in-app .flex-content{ flex: 1 1 65%; }

/* === Headline icons ================================================== */
.grid-item-story-number {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid-item-story-number .headline-icons {
  margin-top: 12px;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.grid-item-story-number .headline-icons .ui-icon {
  width: 60px;
  height: 60px;
  display: inline-block;
}

.headline-icons {
  margin-top: 12px;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.headline-icons .ui-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
}

/* Optional: if your headline is white on blue but icons look faint, bump contrast */
.theme-blue .headline-icons .ui-icon path { stroke-width: 1.75; }

.ui-icon {
  width: 60px;
  height: 60px;
  display: inline-block;
  color: inherit; /* Use current text color */
  stroke: currentColor;
  vertical-align: middle;
}

/* Force 60x60 for headline-icons in grid-item-in-app */
.grid-item-in-app .headline-icons .ui-icon {
  width: 100px !important;
  height: 100px !important;
}
.grid-item-in-app .headline-icons { color: #0f3ea6; }

/* Explore categories */
.grid-item-explorecatext {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid-item-explorecatext .headline-icons {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.grid-item-explorecatext .headline-icons .ui-icon {
  width: 100px !important;
  height: 100px !important;
}

/* Match privacy/details icon to explorecatext search icon */
.grid-item-details .headline-icons { color: #0f3ea6; }
.grid-item-details .headline-icons .ui-icon {
  width: 100px !important;
  height: 100px !important;
}

/* visually hidden (for a11y text in buttons) */
.section-tiles-grid .visuallyhidden{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  padding:0 !important; border:0 !important; height:1px !important; width:1px !important;
  overflow:hidden;
}

/* ===== Modal toggle (checkbox-driven) ===== */
.section-tiles-grid .modal-toggle{
  position:absolute; opacity:0; pointer-events:none;
}

/* floating circular plus button, bottom-right of the card */
.section-tiles-grid .grid-modal .modal-cta{
  position:absolute; right:16px; bottom:16px; z-index:3; /* above overlay */
  width:40px; height:40px; border-radius:50%;
  background:#fff; color:#111; display:grid; place-items:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  cursor:pointer; user-select:none;
  transition: transform .18s ease;
}
.section-tiles-grid .grid-item.theme-inverted .grid-modal .modal-cta{ background:#222; color:#fff; }
.section-tiles-grid .grid-modal .modal-cta:active{ transform: scale(.96); }
.section-tiles-grid .grid-modal .plus-icon{ width:35px; height:35px; transition: transform .25s ease; }
.section-tiles-grid .grid-modal .plus-icon path#reset-solid{ opacity:.22; }

/* make full button area tappable */
.section-tiles-grid .grid-modal .modal-cta-text {
  display: block;
  position: absolute;
  inset: 0;
}

/* === FULL-COVER MODAL SHEET FOR ALL CARDS =========================== */
.section-tiles-grid .grid-modal .modal-content{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:18px;
  background:#1d1d1f;        /* dark sheet for ALL modals */
  color:#fff;                 /* white text */
  padding:32px;
  box-sizing:border-box;

  display:flex;               /* center copy block */
  justify-content:center;
  align-items:center;
  text-align:left;

  opacity:0;
  transform: translateY(10px) scale(.98);
  pointer-events:none;
  transition: opacity .28s ease, transform .28s ease;
  overflow:auto;
  z-index:1;                  /* below the + button */
}

/* open state */
.section-tiles-grid .modal-toggle:checked + .grid-modal .modal-content{
  opacity:1; transform: none; pointer-events:auto;
}
.section-tiles-grid .modal-toggle:checked + .grid-modal .modal-cta .plus-icon{
  transform: rotate(45deg);
}

/* Modal copy – readable width & force white inside */
.section-tiles-grid .grid-modal .modal-content .grid-item-copy{
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
#content-toggle-stories .grid-item-copy{ width: min(523px, 100%); margin: 0 auto; }

.section-tiles-grid .grid-modal .modal-content .grid-item-copy p{
  font-size: 17px;
  line-height: 1.47059;            /* Apple */
  letter-spacing: -.022em;
  color: #fff;                     /* force white text inside modal */
  margin: 0 0 .8em 0;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* gradients placeholders (optional) */
.section-tiles-grid .top-gradient, .section-tiles-grid .bottom-gradient{ display:none; }

/* responsive tweaks */
@media (max-width: 1068px){
  .section-tiles-grid .grid-item.half{ grid-column: span 12; }
  .section-tiles-grid .flex-content{ flex-direction: column; }
  .section-tiles-grid .picture-container{ min-height: 200px; }
}
@media (max-width: 734px){
  .section-tiles-grid{ padding: 44px 12px 12px; }
  .section-tiles-grid .typography-tiles-headline{ font-size: 30px; }
  .section-tiles-grid .typography-headline,
  .section-tiles-grid .typography-headline-elevated{ font-size: 24px; }
}

/* Full-bleed background for the first cards section (below the tagline) */
.section-tiles-grid-first{
  position: relative;
  isolation: isolate;           /* keeps the pseudo-element behind content */
}
.section-tiles-grid-first::before{
  content: "";
  position: absolute;
  top: 0; 
  bottom: 0;                    /* cover full section height */
  z-index: -1;
  left: 50%;
  width: calc(100vw - (var(--section-side-gap) * 2));
  transform: translateX(-50%);
  background: #A1C1FA;

  /* Curved ONLY at the top; flat at the bottom */
  border-radius: var(--section-top-radius) var(--section-top-radius) 0 0;
  /* optional: soft shadow */
  /* box-shadow: 0 10px 30px rgba(0,0,0,.08); */
}

/* Small-screen variable tweaks */
@media (max-width: 600px){
  :root{
    --size: 78px;
    --gap: 18px;
    --radius: 16px;
    --overlap: 36px;
    --logo-pullup: 58px;         /* slightly reduce overlap on small screens */
    --hero-gap: 40px;            /* tighter spacing on small screens */
    --hero-top-gap: 32px;        /* tighter top spacing on small screens */
  }
}

/* ===== CTA (Get started) + Footer ===================================== */

/* CTA container */
.section-cta{
  width: min(1100px, 100%);
  padding: 72px 16px 8px;
  box-sizing: border-box;
  text-align: center;
}

/* CTA heading */
.section-cta h2{
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #1f2937; /* zinc-800-ish */
}
@media (max-width:1068px){ .section-cta h2{ font-size:48px; } }
@media (max-width:734px){  .section-cta h2{ font-size:36px; } }

/* CTA subtext */
.section-cta p{
  margin: 18px auto 32px;
  max-width: 700px;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: #6b7280; /* zinc-500-ish */
}
@media (max-width:734px){ .section-cta p{ font-size:18px; } }

/* App Store button */
.btn-appstore{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration:none;
  font-size: 20px;
  line-height: 1;
  color:#fff;
  background: linear-gradient(180deg, #3f3f46 0%, #18181b 100%); /* zinc-700 -> zinc-900 */
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .08s ease, opacity .12s ease;
}
.btn-appstore:hover{ opacity:.92; }
.btn-appstore:active{ transform: translateY(1px); }
.btn-appstore svg{ width:36px; height:auto; display:block; color:#fff; } /* single source of truth */

/* Two-line App Store label */
.btn-appstore .btn-label{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.btn-appstore .btn-eyebrow{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .95;
  margin-bottom: 2px;
}
.btn-appstore .btn-title{
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* Global badge rules (used everywhere) */
.appstore-badge{
  display:inline-block;
  line-height:0;
  height: var(--badge-h, 40px);   /* default; overridden per section */
}
.appstore-badge svg,
.appstore-badge img{
  height:100%;
  width:auto;
  display:block;
}
.appstore-badge:hover{ filter: brightness(0.97); }

/* CTA / Footer: larger badge */
.section-cta{ --badge-h: 60px; }
.site-footer{ --badge-h: 60px; }

/* Footer */
.site-footer{
  width: 100%;
  padding: 40px 16px 64px;
  color:#6b7280;                 /* zinc-500-ish */
  font-size: 16px;
  border-top: none;
  box-sizing: border-box;
}
.site-footer .footer-inner{
  width: min(1100px, 100%);
  margin: 0 auto;
}
.site-footer .footer-grid{
  display:grid;
  /* Keep two columns at all sizes, centered under the badge */
  grid-template-columns: max-content max-content;
  gap: 16px; /* slightly tighter on very small screens */
  justify-content: center;
}
@media (min-width:640px){
  .site-footer .footer-grid{
    /* widen spacing a bit on larger viewports */
    gap: 200px;
  }
}
.site-footer ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.site-footer a{
  color:inherit;
  text-decoration:none;
}
.site-footer a:hover{ text-decoration:underline; }

/* ===== Header (replacement) ===== */

/* Header container: same width as main page, centered */
.site-header{
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 18px 16px;
  box-sizing: border-box; /* include padding in width to avoid overflow */
  display: flex;
  align-items: center;
  gap: 12px;

  /* text defaults */
  color: #000;

  /* sticky + full-bleed bg via ::before */
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;       /* keep ::before behind content */
  background: transparent;  /* let ::before show the blue strip */

  /* underline: default = light */
  border-bottom: 1px solid #ffffff;
  transition: border-color .2s ease;
  margin-bottom: var(--below-header-gap);

  /* header badge size */
  --badge-h: 32px;
}
@media (min-width:1068px){
  .site-header{ --badge-h: 40px; }   /* header-only bump */
}

/* when JS toggles this, swap to darker blue */
.site-header.is-stuck{ border-bottom-color: #0a51de; }

/* full-bleed blue bar (mobile-safe; no conflicting inset/left) */
.site-header::before{
  content: "";
  position: absolute;
  /* use explicit edges to avoid inset/left conflicts on mobile */
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  /* slightly translucent blue so content scrolls through */
  background: rgba(161, 193, 250, 0.85);
  /* soft glass effect on supported browsers */
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  z-index: -1;               /* stay behind header content */
}

/* when stuck, make it a touch more opaque for contrast */
.site-header.is-stuck::before{
  background: rgba(161, 193, 250, 0.9);
}


/* Links */
.site-header a{
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease;
}
.site-header a:hover{ opacity: .7; }

/* Brand (logo + wordmark) */
.brand { display: inline-flex; align-items: center; gap: 22px; }

/* Keep the header height stable; scale the SVG visually */
.brand-icon {
  width: 22px;        /* reserved space */
  height: 23px;
  display: grid;
  place-items: center;
  line-height: 0;
  color: #2151C5;
  overflow: visible;  /* allow the SVG to spill outside */
}
.brand-icon svg{
  width: 34px;
  height: auto;
  transform: scale(1.6); /* adjust as needed */
  transform-origin: center;
  display: block;
}

/* Wordmark text */
.brand-name{
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #2151C5;    /* “Budviews” text in blue */
}

/* Right-side nav */
.spacer{ flex: 1; }
.nav{ display:flex; align-items:center; gap:28px; font-size:16px; }
.hide-sm{ display: none; }
@media (min-width: 640px){ .hide-sm{ display: inline; } }

/* ===== Download Overlay (full-screen) ===== */
body.no-scroll { overflow: hidden; }

.download-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(17,24,39,0.9);          /* zinc-900/90-ish */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.download-overlay.open{
  opacity: 1;
  pointer-events: auto;
}

/* Close button */
.download-close{
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .1s ease, opacity .1s ease;
}
.download-close:active{ transform: scale(.96); }

/* Card */
.download-card{
  width: min(900px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #0f172a;                  /* slate-900-ish */
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,.35);
}
.download-col{
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.download-col-qr{ border-right: 1px solid rgba(255,255,255,.10); }

.download-title{
  margin: 0;
  font-family: "SF Pro Display","Helvetica Neue",Arial,sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .005em;
}
.qr-img{
  width: 250px;
  max-width: 80%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Button matches your CTA style */
.download-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 18px;
  text-decoration: none;
  color: #111827;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .08s ease, opacity .12s ease;
}
.download-btn:hover{ opacity: .92; }
.download-btn:active{ transform: translateY(1px); }

.download-sub{
  margin: 4px 0 0;
  font-size: 14px;
  color: #cbd5e1; /* slate-300-ish */
  text-align: center;
}

/* Responsive: stack on small screens */
@media (max-width: 640px){
  .download-card{ grid-template-columns: 1fr; }
  .download-col-qr{
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
}

/* ================================
   IN-APP SECTION — restore size & spacing
   ================================ */

/* Restore the original column split */
.section-tiles-grid .grid-item-in-app .headline-content{ flex: 1 1 35%; }
.section-tiles-grid .grid-item-in-app .flex-content{    flex: 1 1 65%; }

/* Increase the gap between columns (image ↔ text) */
.section-tiles-grid .grid-item-in-app .row{ gap: 28px; }
@media (min-width:1068px){
  .section-tiles-grid .grid-item-in-app .row{ gap: 36px; }
}

/* Keep the headline column left-aligned and vertically comfy */
.section-tiles-grid .grid-item-in-app .headline-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;   /* left edge alignment */
  text-align: left;
  max-width: 900px;
  width: 100%;
}

/* Only inside this card, make the phone image smaller like the original */
.section-tiles-grid .grid-item-in-app .icon{
  display: flex;
  justify-content: center;
  align-items: center;
  /* container width/height already controlled by your inline style */
}
.section-tiles-grid .grid-item-in-app .icon img{
  /* size relative to its container with a sensible cap */
  width: 50%;
  height: auto;
  max-width: 420px;          /* hard cap for big screens */
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

/* Mobile tweaks: keep image visible but not tiny; reduce column gap */
@media (max-width: 734px){
  /* Stack text and image so the headline has full width */
  .section-tiles-grid .grid-item-in-app .row{
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  /* Let both columns expand naturally on phones */
  .section-tiles-grid .grid-item-in-app .headline-content,
  .section-tiles-grid .grid-item-in-app .flex-content{
    flex: 0 1 auto;
    width: 100%;
  }
  /* Center the headline for better legibility on narrow screens */
  .section-tiles-grid .grid-item-in-app .headline-content{
    align-items: center;
    text-align: center;
  }
  .section-tiles-grid .grid-item-in-app .icon img{
    width: 70%;
    max-width: 320px;
  }
  /* Size down the decorative icon so it doesn’t crowd the text */
  .grid-item-in-app .headline-icons .ui-icon{
    width: 68px !important;
    height: 68px !important;
  }
}


/* ================================
   FIX 2 — Restore modal typography
   (applies to ALL card modals)
   ================================ */

.section-tiles-grid .grid-modal .modal-content{
  color: #fff;
  text-align: left;           /* ensure left-justified content */
}

.section-tiles-grid .grid-modal .modal-content .grid-item-copy{
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

/* Optional narrower columns for specific modals (match your originals) */
#content-toggle-stories .grid-item-copy,
#content-toggle-in-app .grid-item-copy{
  width: min(523px, 100%);
  margin: 0 auto;
}

/* Modal “eyebrow” heading + body copy */
.section-tiles-grid .grid-modal .modal-content .typography-eyebrow-reduced{
  display: inline-block;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: .6em;
}
.section-tiles-grid .grid-modal .modal-content .grid-item-copy p{
  font-size: 17px;
  line-height: 1.47059;       /* Apple */
  letter-spacing: -.022em;
  color: #fff;
  margin: 0 0 .8em 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === iPhone SE / very small phones (≤390px wide) ===================== */
/* Fixes:
   1) Header blue strip not full-bleed
   2) "Contact Us" hidden by .hide-sm
   3) Triangle icons overlap
   4) Curved blue section not fully wrapping cards
*/
@media (max-width: 390px){

  /* 1) Make the header strip truly full-bleed using small-viewport units */
  .site-header::before{
    width: 100svw;                 /* iOS 16+ logical viewport width (handles safe areas) */
  }

  /* 2) Show "Contact Us" on tiny screens (override .hide-sm) */
  .site-header .hide-sm{
    display: inline;               /* becomes visible at ≤390px */
  }

  /* 3) Tighten the triangle so icons don’t collide on 375px */
  :root{
    --size: 64px;                  /* tile size down from 78 */
    --gap: 14px;                   /* smaller spacing between tiles */
    --overlap: 26px;               /* raise rows less so they don’t overlap */
    --logo-pullup: 40px;           /* reduce how far the logo overlaps the triangle */
  }

  /* 4) Let the curved blue background go truly edge-to-edge on tiny screens */
  :root{
    --section-side-gap: 0px;       /* remove the 8px side gap on very small phones */
  }
}

/* === Small phones up to 480px wide (iPhone SE, 12/13/14/15 mini/Plus portrait) ===
   Fixes the same 4 items you flagged:
   1) Header blue strip must be truly full-bleed
   2) "Contact Us" should be visible
   3) Triangle icons must not overlap
   4) Curved blue section must wrap the cards edge-to-edge
*/
@media (max-width: 480px){

  /* 1) Header full-bleed: use small viewport units and remove transform jitter */
  .site-header::before{
    left: 50%;
    width: 100svw;               /* iOS-friendly full visible width */
    transform: translateX(-50%); /* keep centered */
  }

  /* 2) Show the "Contact Us" link on small phones (override .hide-sm) */
  .site-header .hide-sm{
    display: inline;
  }

  /* 3) Triangle spacing so icons never collide at 375–428px widths */
  :root{
    --size: 62px;                /* smaller tiles than desktop but larger than the 390px patch */
    --gap: 16px;                 /* a touch more air between tiles */
    --overlap: 28px;             /* raise rows a bit less to avoid touching */
    --logo-pullup: -8px;         /* slightly less overlap of the logo over the triangle */
  }

  /* 4) Curved blue background: make it span the full visible width */
  :root{
    --section-side-gap: 0px;     /* remove the 8px side gap on small phones */
  }
  .section-tiles-grid-first::before{
    width: 100svw;               /* ensure full bleed even with safe areas */
    left: 50%;
    transform: translateX(-50%);
  }
}

/* === Full-bleed fix for header strip + curved cards background =========
   Uses negative margins so the pseudo-elements expand equally on both sides.
   Works across iOS devices (SE → Plus/Pro Max) and desktop.
*/

/* 1) HEADER: make the blue bar truly full-bleed and centered */
.site-header::before{
  /* keep absolute positioning inside header */
  left: 0;
  right: 0;
  width: auto;               /* let L/R edges drive the width */
  transform: none;           /* no centering transform needed */
  /* expand beyond the header's content width to fill the viewport */
  margin-left:  calc((100svw - 100%) / -2);
  margin-right: calc((100svw - 100%) / -2);
}

/* 2) CURVED BLUE SECTION: match the header behavior */
.section-tiles-grid-first::before{
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  margin-left:  calc((100svw - 100%) / -2);
  margin-right: calc((100svw - 100%) / -2);
}

/* Optional: on very small phones ensure the section content itself
   is perfectly centered within the blue area (harmless on larger screens) */
@media (max-width: 480px){
  .section-tiles-grid .section-content{
    width: min(1200px, 100%);
    margin: 0 auto;          /* center the inner content block */
    /* keep your existing section padding; we’re not touching it */
  }
}

/* === Full-bleed, robust across iOS/desktop ========================== */
/* Prefer dynamic viewport on Safari/iOS 16+; fall back elsewhere. */
@supports (width: 1dvw) {
  .site-header::before{
    top: 0; bottom: 0;
    left: 50%;
    width: 100dvw;                 /* full visible viewport width */
    transform: translateX(-50%);   /* keep centered regardless of container */
    margin: 0;                     /* override any earlier negative margins */
  }

  .section-tiles-grid-first::before{
    top: 0; bottom: 0;
    left: 50%;
    width: 100dvw;
    transform: translateX(-50%);
    margin: 0;
  }
}

/* Fallback for browsers without d/v/svw.
   Limit to wider screens so mobile Safari quirks don't reappear. */
@media (min-width: 769px) {
  .site-header::before{
    top: 0; bottom: 0;
    left: 50%;
    width: 100vw;                  /* desktop/tablet: full viewport width */
    transform: translateX(-50%);
    margin: 0;
  }
  .section-tiles-grid-first::before{
    top: 0; bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    margin: 0;
  }
}

/* === Center the cards inside the curved blue section ================= */
.section-tiles-grid-first .section-content{
  width: min(1200px, 100%);   /* matches your section width rules */
  margin-left: auto;          /* horizontally center the inner wrapper */
  margin-right: auto;
}

/* === Center the inner content & grid within the curved blue section === */
/* Ensures the white card column is perfectly centered on all phones */
.section-tiles-grid-first > .section-content{
  max-width: 1200px;      /* matches your section cap */
  width: 100%;
  margin-left: auto;      /* center the inner wrapper */
  margin-right: auto;
}

/* Also center the grid itself in case any external padding affects the wrapper */
.section-tiles-grid-first .grid-container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}