* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', Arial, sans-serif;
    color: var(--color-primary, #1a1a1a);
    /* Matches the home page's --dusk cream background (defined further down
       in this file, under the home-page redesign section) so inner pages
       (about/contact/privacy/etc.) don't jump to a stark white page after
       the branded home page. */
    background: var(--dusk, #ffffff);
}

.content-wrapper {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header - plain/light version, used on every page except the home hero
   (header_inner.html reuses these same classes without .header-home, so it
   stays a normal white bar rather than the overlaid dark one below). */
.header {
    border-bottom: 1px solid #eee;
}

.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary, #1a1a1a);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.header-logo-mark {
    max-width: 28px;
    max-height: 28px;
    width: auto;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.header-links {
    display: flex;
    list-style: none;
    gap: 28px;
}

.header-links a {
    color: var(--color-secondary, #555);
    text-decoration: none;
    font-size: 0.95rem;
}

.header-links a:hover {
    color: var(--color-primary, #1a1a1a);
    text-decoration: underline;
}

/* Header-home - overlaid on top of the hero image itself (position:absolute
   takes it out of flow, so .hero-section below starts at y=0 behind it),
   with a dark tint so light text/logo stay readable over any wallpaper. */
.header-home {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    border-bottom: none;
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
}

.header-home .header-logo,
.header-home .header-links a {
    color: #fff;
}

.header-home .header-links a {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 600;
}

.header-home .header-links a:hover {
    color: #fff;
    opacity: 0.8;
    text-decoration: none;
}

/* Hero - full-bleed "wallpaper" background (a placeholder gradient, not a
   real photo - this is a generic theme, not tied to one specific image) with
   the header bar overlaid on top and copy centered over a dark scrim so it
   stays legible regardless of what background image a site configures. */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 80px;
    background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
    background-size: cover;
    background-position: center;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.hero-tagline {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    margin-bottom: 36px;
}

.download-button {
    display: inline-block;
    background: var(--color-button-bg, #1a1a1a);
    color: var(--color-button-text, #fff);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 16px 40px;
    border-radius: 999px;
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.download-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.hero-disclaimer {
    margin-top: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Legal / info pages */
.privacy .info {
    max-width: 720px;
    padding: 60px 24px;
}

.privacy h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--color-primary, #1a1a1a);
}

.privacy h2 {
    font-size: 1.3rem;
    margin: 24px 0 8px;
}

.privacy p {
    color: #444;
    line-height: 1.7;
    margin-bottom: 6px;
}

.privacy a {
    color: var(--color-primary, #1a1a1a);
}

/* cookies.html's browser-removal steps (Chrome/Firefox/Edge/Safari, each a
   <li> with a nested <ol>) - the global * { margin:0; padding:0 } reset
   strips list indentation/spacing entirely without this, so "Google
   Chrome:" ran straight into "Open Chrome." with no visual separation. */
.privacy ul, .privacy ol {
    padding-left: 20px;
    margin: 8px 0 16px;
}

.privacy li {
    margin-bottom: 6px;
    color: #444;
    line-height: 1.6;
}

.privacy li > ol {
    margin-top: 8px;
    margin-bottom: 0;
}

/* Uninstall guide - per-browser step lists */
.uninstall-intro {
    color: #666;
    margin-bottom: 32px !important;
}

.uninstall-browsers {
    display: grid;
    gap: 28px;
}

.uninstall-browser {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px 24px;
}

.uninstall-browser h2 {
    margin: 0 0 12px !important;
    font-size: 1.1rem;
}

.uninstall-browser ol {
    margin: 0;
    padding-left: 20px;
    color: #444;
    line-height: 1.8;
}

.uninstall-browser li {
    margin-bottom: 4px;
}

.uninstall-note {
    margin-top: 32px !important;
    padding: 16px 20px;
    background: #f7f7f8;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #555 !important;
}

/* Footer */
.footer-section {
    border-top: 1px solid #eee;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    list-style: none;
    padding: 24px 0;
}

.footer-links a {
    color: #777;
    text-decoration: none;
    font-size: 0.85rem;
}

.footer-links a:hover {
    color: var(--color-primary, #1a1a1a);
}

/* Mobile menu (hidden by default - hamburger not wired up yet, no header trigger) */
.mobile-menu {
    display: none;
}

@media screen and (max-width: 600px) {
    .header-links {
        gap: 16px;
    }

    .hero-title {
        font-size: 2.2rem;
    }
}


/* ---------------------------------------------------------------
   Home page redesign (postcard/travel/passport-giveaway concept).
   Everything below is scoped under .yhome (the wrapper div around
   home.html's nav/content/footer overrides) so it never touches
   the shared header_inner/footer used by every other page in this
   theme - only home.html actually renders a .yhome element.
   --------------------------------------------------------------- */
  :root{
    --dusk:#FAF7EF;
    --dusk-deep:#182A1D;
    --gold:#C9922E;
    --coral:#B4522E;
    --cream:#20301F;
    --teal:#3F6B52;
    --paper:#FFFFFF;
    --line: rgba(32,48,31,0.16);
  }

  .yhome{
    background:var(--dusk);
    color:var(--cream);
    font-family:'IBM Plex Mono', monospace;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    .yhome *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  .yhome .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  .yhome a{color:inherit;text-decoration:none;}

  /* ---------- NAV ---------- */
  .yhome nav{
    position:sticky; top:0; z-index:50;
    background:rgba(250,247,239,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .yhome nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .yhome .brand{
    font-family:'IBM Plex Mono', monospace;
    font-weight:600;
    font-size:22px;
    letter-spacing:0.01em;
    display:flex; align-items:center; gap:10px;
  }
  .yhome .brand .logo-mark{
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .yhome .brand .logo-mark svg{ width:100%; height:100%; }
  .yhome .nav-links{display:flex; gap:34px; font-size:14px; font-weight:500; color:rgba(32,48,31,0.7);}
  .yhome .nav-links a:hover{color:var(--gold);}
  .yhome .nav-cta{
    background:#E5342E; color:#FFFFFF; font-weight:800;
    padding:10px 20px; border-radius:100px; font-size:14px;
    transition:transform .2s ease;
  }
  .yhome .nav-cta:hover{transform:translateY(-1px);}
  @media (max-width:780px){ .yhome .nav-links{display:none;} }

  /* ---------- HERO ---------- */
  .yhome header.hero{
    position:relative;
    padding:96px 0 60px;
    overflow:hidden;
    background:var(--dusk);
  }
  .yhome .hero-grid{
    position:relative; z-index:2;
    display:grid; grid-template-columns: 1.05fr 0.95fr; gap:60px; align-items:center;
  }
  .yhome .eyebrow{
    font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:10px;
    margin-bottom:22px;
  }
  .yhome .eyebrow::before{content:"";width:24px;height:1px;background:var(--gold);}

  .yhome h1{
    font-family:'IBM Plex Mono', monospace;
    font-weight:700;
    font-size:clamp(38px, 4.6vw, 58px);
    line-height:1.06;
    letter-spacing:-0.01em;
  }
  .yhome h1 em{font-style:italic; font-weight:400; color:var(--coral);}

  .yhome .hero-sub{
    margin-top:22px; font-size:17px; line-height:1.6; color:rgba(32,48,31,0.78);
    max-width:460px;
  }

  .yhome .hero-ctas{display:flex; align-items:center; gap:18px; margin-top:34px; flex-wrap:wrap;}
  .yhome .btn-primary{
    background:#E5342E; color:#FFFFFF; font-weight:800; font-size:15px;
    padding:16px 34px; display:inline-flex; align-items:center; gap:10px;
    box-shadow:0 10px 30px -8px rgba(229,52,46,0.55);
    transition:transform .2s ease, box-shadow .2s ease;
    position:relative;
    border-radius:8px;
    clip-path: polygon(0 0, calc(100% - 22px) 0, calc(100% - 22px) 38%, 100% 50%, calc(100% - 22px) 62%, calc(100% - 22px) 100%, 0 100%);
  }
  .yhome .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -6px rgba(229,52,46,0.65);}
  .yhome .btn-ghost{
    font-size:14px; font-weight:600; color:var(--cream); display:flex; align-items:center; gap:8px;
    border-bottom:1px solid var(--line); padding-bottom:2px;
  }
  .yhome .fine{
    margin-top:16px; font-size:12px; color:rgba(32,48,31,0.45);
  }

  /* postcard stack */
  .yhome .stack-stage{
    position:relative; height:440px; display:flex; align-items:center; justify-content:center;
    border-radius:20px; overflow:hidden;
    box-shadow:0 30px 70px -30px rgba(24,42,29,0.25);
  }
  .yhome .postcard{
    position:absolute; width:300px; height:380px; border-radius:14px;
    background:var(--paper); color:var(--dusk-deep);
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
    padding:14px; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s ease;
  }
  .yhome .postcard .art{
    width:100%; height:74%; border-radius:8px; position:relative; overflow:hidden;
    /* Falls back to this gradient if the hotlinked Wikimedia photo is slow
       or unavailable (rate-limited, offline, ad blocker) - never shows a
       broken-image glyph over the postcard caption. */
    background:linear-gradient(160deg, var(--teal), var(--dusk-deep));
  }
  .yhome .postcard .art img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .yhome .postcard .art .grad{position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,42,29,0) 55%, rgba(24,42,29,0.45) 100%);}
  .yhome .postcard .cap{
    display:flex; justify-content:space-between; align-items:flex-end; padding-top:12px;
  }
  .yhome .postcard .cap .place{font-family:'IBM Plex Mono', monospace; font-size:19px;}
  .yhome .postcard .cap .code{font-family:'Space Mono', monospace; font-size:11px; color:var(--teal); font-weight:700;}
  .yhome .postcard .perf{position:absolute; inset:6px; border:1.5px dashed rgba(24,42,29,0.25); border-radius:6px; pointer-events:none;}
  .yhome .postcard .stampbox{
    position:absolute; top:16px; right:16px; width:44px; height:44px; border:1.5px solid rgba(24,42,29,0.35);
    border-radius:4px; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace;
    font-size:9px; text-align:center; color:rgba(24,42,29,0.55); transform:rotate(6deg); background:rgba(32,48,31,0.85);
  }

  .yhome .pc-1{z-index:5; transform:translate(-30px,0) rotate(-6deg);}
  .yhome .pc-2{z-index:4; transform:translate(60px,26px) rotate(8deg); opacity:0.9;}
  .yhome .pc-3{z-index:3; transform:translate(-70px,50px) rotate(-13deg); opacity:0.55;}

  /* ---------- MARQUEE / BOARD ---------- */
  .yhome .board{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--dusk-deep);
    padding:18px 0;
    overflow:hidden;
    white-space:nowrap;
  }
  .yhome .board-track{
    display:inline-flex; gap:48px; font-family:'Space Mono', monospace; font-size:13px;
    letter-spacing:0.03em; color:rgba(250,247,239,0.7);
    animation:yhome-scrollboard 26s linear infinite;
  }
  .yhome .board-track span b{color:var(--gold); font-weight:700;}
  @keyframes yhome-scrollboard{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- SECTION SHARED ---------- */
  .yhome section{padding:110px 0;}
  .yhome .section-head{max-width:600px; margin-bottom:64px;}
  .yhome .section-head .eyebrow{margin-bottom:18px;}
  .yhome h2{
    font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:clamp(28px,3.2vw,40px);
    line-height:1.15;
  }
  .yhome .section-head p{margin-top:18px; color:rgba(32,48,31,0.72); font-size:16px; line-height:1.65;}

  /* ---------- FEATURES ---------- */
  .yhome .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .yhome .feat{
    background:var(--paper); color:var(--dusk-deep); border-radius:14px; padding:0;
    position:relative; overflow:hidden;
    box-shadow:0 24px 50px -24px rgba(0,0,0,0.5);
  }
  .yhome .feat .bp-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 22px; background:var(--dusk-deep); color:var(--paper);
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.05em;
  }
  .yhome .feat .bp-head .num{color:var(--gold); font-size:11px;}
  .yhome .feat .bp-body{padding:26px 24px 30px;}
  .yhome .feat .stub-edge{
    position:relative; height:0;
  }
  .yhome .feat .stub-edge::before, .yhome .feat .stub-edge::after{
    content:""; position:absolute; top:-8px; width:16px; height:16px; border-radius:50%;
    background:var(--dusk);
  }
  .yhome .feat .stub-edge::before{left:-8px;}
  .yhome .feat .stub-edge::after{right:-8px;}
  .yhome .feat .perf-line{
    border-top:1.5px dashed rgba(24,42,29,0.25); margin:0 22px;
  }
  .yhome .feat h3{font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:21px; margin-top:0;}
  .yhome .feat p{margin-top:12px; font-size:14.5px; line-height:1.6; color:rgba(24,42,29,0.65);}
  @media (max-width:860px){ .yhome .feat-grid{grid-template-columns:1fr;} }

  /* ---------- GIVEAWAY (signature section) ---------- */
  .yhome .giveaway{
    position:relative;
    background:
      radial-gradient(ellipse 700px 380px at 85% 0%, rgba(255,183,74,0.14), transparent 60%),
      var(--dusk-deep);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .yhome .gw-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
  .yhome .gw-copy .eyebrow{color:var(--coral);}
  .yhome .gw-copy .eyebrow::before{background:var(--coral);}
  /* .giveaway has a dark background but h2 defaults to the dark --cream
     color (meant for light sections) - without this it's nearly invisible
     against .dusk-deep. */
  .yhome .giveaway h2{color:var(--dusk);}

  .yhome .passport{
    background:var(--paper); color:var(--dusk-deep); border-radius:18px; padding:36px;
    box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);
    position:relative;
    border:1.5px dashed rgba(24,42,29,0.18);
  }
  .yhome .passport::before{
    content:"✈"; position:absolute; top:-16px; right:28px; width:32px; height:32px;
    background:var(--gold); color:var(--dusk-deep); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:14px;
    box-shadow:0 6px 14px -4px rgba(0,0,0,0.4);
  }
  .yhome .passport-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px dashed rgba(24,42,29,0.25); padding-bottom:18px;}
  .yhome .passport-head .title{font-family:'IBM Plex Mono', monospace; font-size:20px;}
  .yhome .passport-head .sub{font-family:'Space Mono',monospace; font-size:11px; color:var(--teal); margin-top:4px;}
  .yhome .stamps-row{display:flex; gap:14px; margin-top:24px; flex-wrap:wrap;}
  .yhome .stamp{
    width:64px; height:64px; border-radius:50%; border:1.6px dashed rgba(24,42,29,0.35);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:'Space Mono',monospace; font-size:9px; text-align:center; gap:2px;
    transform:rotate(var(--r,0deg));
  }
  .yhome .stamp.filled{background:var(--gold); border-style:solid; border-color:transparent; color:var(--dusk-deep); font-weight:700;}
  .yhome .stamp.locked{color:rgba(24,42,29,0.35);}
  .yhome .passport-foot{margin-top:26px; display:flex; align-items:center; justify-content:space-between;}
  .yhome .prize-tag{font-family:'Space Mono',monospace; font-size:11px; color:rgba(24,42,29,0.55);}
  .yhome .prize-tag b{color:var(--coral);}
  .yhome .progress-track{height:6px; background:rgba(24,42,29,0.12); border-radius:6px; margin-top:20px; overflow:hidden;}
  .yhome .progress-fill{height:100%; width:58%; background:linear-gradient(90deg,var(--gold),var(--coral)); border-radius:6px;}

  .yhome .gw-steps{margin-top:38px; display:flex; flex-direction:column; gap:18px;}
  .yhome .gw-step{display:flex; gap:16px; align-items:flex-start;}
  .yhome .gw-step .dot{width:8px;height:8px;border-radius:50%; background:var(--gold); margin-top:8px; flex-shrink:0;}
  .yhome .gw-step div p{font-size:14.5px; color:rgba(250,247,239,0.75); line-height:1.55;}
  .yhome .gw-step div strong{color:var(--gold); font-weight:700;}

  /* ---------- FINAL CTA ---------- */
  .yhome .final{
    text-align:center; padding:130px 0 150px;
    background:
      radial-gradient(ellipse 900px 400px at 50% 100%, rgba(255,183,74,0.12), transparent 65%),
      var(--dusk);
  }
  .yhome .final h2{max-width:640px; margin:0 auto;}
  .yhome .final .btn-primary{margin-top:36px;}
  .yhome .trust-row{margin-top:26px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; font-size:12.5px; color:rgba(32,48,31,0.5); font-family:'Space Mono',monospace;}

  .yhome footer.yfooter{border-top:1px solid var(--line); padding:44px 0; background:var(--dusk-deep);}
  .yhome footer.yfooter .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .yhome footer.yfooter .brand{color:var(--paper);}
  .yhome footer.yfooter .flinks{display:flex; flex-wrap:wrap; gap:12px 26px; font-size:13px; color:rgba(250,247,239,0.6);}
  .yhome footer.yfooter .flinks a:hover{color:var(--gold);}
  .yhome footer.yfooter .copy{font-size:12px; color:rgba(250,247,239,0.35);}

  @media (max-width:900px){
    .yhome .hero-grid{grid-template-columns:1fr;}
    .yhome .stack-stage{height:340px; margin-top:20px;}
    .yhome .postcard{width:220px; height:280px;}
    .yhome .gw-grid{grid-template-columns:1fr;}
  }

  @media (max-width:560px){
    .yhome footer.yfooter .wrap{flex-direction:column; align-items:flex-start;}
    .yhome footer.yfooter .flinks{gap:10px 18px;}
  }