/* ==========================================================================
   ZICH — "The Sunroom" design system
   Warm light canvas · ink outlines · sticker color blocks · huge type
   (Replaces the previous dark system, 2026-07. Same class and variable
   names — the whole site restyles from this one file.)
   ========================================================================== */

:root{
  --ink:        #1A160E;   /* warm near-black — text + outlines */
  --ink-bg-soft:#2E2820;   /* softer near-black — nav bg, so ink borders/shadows show a faint edge */
  --ink-soft:   #6B6353;
  --ink-faint:  #98907E;

  --bg:         #F6EFE3;   /* cream canvas */
  --bg-elevated:#F1E7D6;
  --surface:    #FFFDF7;   /* card white */
  --surface-2:  #FBF5EA;

  --line:       rgba(26,22,14,.15);
  --line-strong:#1A160E;

  --blue:       #1D7FC4;
  --blue-deep:  #0B5C94;
  --blue-dim:   rgba(29,127,196,.14);
  --blue-pop:   #2F9FE8;

  --green:      #3E9A5C;
  --green-deep: #2C7243;
  --green-dim:  rgba(62,154,92,.14);
  --green-pop:  #5DC07A;

  --coral:      #E0523D;
  --coral-deep: #A93B2B;
  --coral-dim:  rgba(224,82,61,.13);
  --coral-pop:  #FF7B68;

  --orange:     #D97E2E;
  --orange-dim: rgba(217,126,46,.15);
  --orange-pop: #F0A360;

  --yellow:     #EDC95E;
  --yellow-dim: rgba(237,201,94,.28);

  --radius-sm:  10px;
  --radius-md:  18px;
  --radius-lg:  28px;

  --container:  1160px;

  --font-display: "Baloo 2", "Segoe UI", sans-serif;
  --font-body:    "Baloo 2", "Segoe UI", sans-serif;

  --shadow-pop:  4px 4px 0 var(--ink);
  --shadow-pop-lg: 7px 7px 0 var(--ink);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* overflow containment lives on sections, NOT html/body (keeps nav sticky) */
section, header, footer{ overflow-x:clip; }

/* paper grain */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:2147483647;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background:var(--yellow); color:var(--ink); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 .5em 0;
  letter-spacing:-.01em;
  line-height:1.08;
  font-weight:800;
}
p{ margin:0 0 1em 0; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }

.lede{ font-size:18px; color:var(--ink-soft); font-weight:500; }
.text-center{ text-align:center; }

:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:200;
  background:var(--ink-bg-soft);
  border-bottom:2.5px solid var(--ink);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:20px;
}
.nav-brand{ display:flex; align-items:center; flex:none; }
.nav-brand img{ height:40px; width:auto; }
.nav-logo-anim{ height:46px; width:auto; object-fit:contain; }

.nav-links{
  display:flex; align-items:center; gap:6px;
  position:relative;
  list-style:none; margin:0; padding:0;
}
.nav-indicator{
  position:absolute; top:6px; bottom:6px; left:0;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:999px;
  opacity:0;
  transition:transform .28s cubic-bezier(.6,1.6,.4,1), width .28s cubic-bezier(.6,1.6,.4,1), opacity .18s ease;
  z-index:0;
  pointer-events:none;
}
.nav-links.hovering .nav-indicator{ opacity:1; }
.nav-links li{ position:relative; z-index:1; }
.nav-links a{
  display:block;
  font-family:var(--font-display);
  font-weight:700; font-size:15.5px;
  padding:9px 16px;
  border-radius:999px;
  color:var(--bg);
}
.nav-links a.active, .nav-links a.is-hovered{ color:var(--ink); }
.nav-links a.active{
  background:var(--yellow);
  border:2px solid var(--ink);
  padding:7px 14px;
}
.nav-links a.active.is-hovered{ background:transparent; border-color:transparent; padding:9px 16px; }

.nav-cta{
  font-family:var(--font-display);
  font-weight:800; font-size:15px;
  background:var(--yellow);
  color:var(--ink);
  border:2.5px solid var(--ink);
  border-radius:999px;
  padding:10px 22px;
  box-shadow:var(--shadow-pop);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.nav-cta:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }

.nav-toggle{
  display:none;
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:12px;
  width:46px; height:44px;
  cursor:pointer;
  padding:10px 9px;
  box-shadow:var(--shadow-pop);
}
.nav-toggle span{
  display:block; height:3px; width:100%;
  background:var(--ink); border-radius:2px;
}
.nav-toggle span + span{ margin-top:5px; }

.mobile-menu{ display:none; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta.desktop-only{ display:none; }
  .mobile-menu.open{
    display:block;
    position:fixed;
    top:78px; left:0; right:0; bottom:0;
    background:var(--bg);
    z-index:190;
    padding:28px 24px;
    overflow-y:auto;
  }
  .mobile-menu ul{ display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0; }
  .mobile-menu a{
    display:block;
    font-family:var(--font-display);
    font-weight:800;
    font-size:32px;
    padding:14px 22px;
    background:var(--surface);
    border:2.5px solid var(--ink);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-pop);
    color:var(--ink);
  }
  .mobile-menu li:nth-child(odd) a{ transform:rotate(-.6deg); }
  .mobile-menu li:nth-child(even) a{ transform:rotate(.6deg); }
  .mobile-menu a:active{ transform:scale(.97); }
  .mobile-menu a.active{ background:var(--yellow); }
  .mobile-menu li:last-child a{ background:var(--yellow); }
}

/* ==========================================================================
   Buttons, badges, stickers, markers
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display);
  font-weight:800; font-size:16px;
  padding:14px 30px;
  border-radius:999px;
  border:2.5px solid var(--ink);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:var(--shadow-pop);
  color:var(--ink);
  background:var(--surface);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
.btn-primary, .btn-yellow{ background:var(--yellow); }
.btn-ghost{ background:var(--surface); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

.store-badge{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:12px 20px;
  box-shadow:var(--shadow-pop);
  font-size:13px;
  color:var(--ink-soft);
  transition:transform .15s ease, box-shadow .15s ease;
}
.store-badge b{ display:block; font-size:15px; font-family:var(--font-display); font-weight:800; color:var(--ink); }
.store-badge .glyph svg{ width:22px; height:22px; }
.store-badge:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }

.marker{
  padding:0 .14em;
  border-radius:8px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  background:linear-gradient(180deg, transparent 8%, var(--yellow) 8% 92%, transparent 92%);
}
.marker.coral{ background:linear-gradient(180deg, transparent 8%, var(--coral-pop) 8% 92%, transparent 92%); }
.marker.blue{ background:linear-gradient(180deg, transparent 8%, var(--blue-pop) 8% 92%, transparent 92%); }
.marker.green{ background:linear-gradient(180deg, transparent 8%, var(--green-pop) 8% 92%, transparent 92%); }
.marker.coral{ background:var(--coral-pop); }
.marker.blue{ background:var(--blue-pop); }
.marker.green{ background:var(--green-pop); }

.sticker{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800; font-size:15px;
  padding:8px 18px;
  border:2.5px solid var(--ink);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-pop);
  color:var(--ink);
}
.st-yellow{ background:var(--yellow); }
.st-blue{ background:var(--blue-pop); }
.st-coral{ background:var(--coral-pop); }
.st-green{ background:var(--green-pop); }
.st-orange{ background:var(--orange-pop); }
.rot-l{ transform:rotate(-2deg); }
.rot-r{ transform:rotate(1.6deg); }

/* ==========================================================================
   Hero (homepage)
   ========================================================================== */
.hero{ padding:80px 0 72px; position:relative; }
.hero-scene{ display:none; }
.hero .container{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:center;
}
.hero-text h1{
  font-size:clamp(44px,6vw,80px);
  margin:22px 0 24px;
  line-height:1.16;
}
.hero-text .lede{ max-width:52ch; font-size:19px; }
.hero-text .btn-row{ margin-top:34px; }
.hero-stickers{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:42px;
}

.polaroid{
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:14px;
  padding:14px 14px 12px;
  box-shadow:var(--shadow-pop-lg);
  transform:rotate(2deg);
}
.polaroid .img-placeholder{ min-height:340px; border-radius:8px; }
.polaroid-caption{
  font-family:var(--font-display);
  font-weight:700; font-size:14px;
  color:var(--ink-soft);
  text-align:center;
  padding-top:10px;
  margin:0;
}

@media (max-width:900px){
  .hero{ padding:46px 0; }
  .hero .container{ grid-template-columns:1fr; gap:40px; }
  .polaroid{ max-width:420px; margin:0 auto; transform:rotate(1.2deg); }
}

/* ticker */
.ticker-wrap{
  background:var(--ink);
  overflow:hidden;
  padding:13px 0;
}
.ticker{
  display:flex; gap:34px; align-items:center;
  width:max-content;
  animation:ticker-scroll 28s linear infinite;
}
.ticker span{
  font-family:var(--font-display);
  font-weight:800; font-size:16px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bg);
  white-space:nowrap;
}
.ticker span.tick-dot{ color:var(--yellow); }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-wrap:hover .ticker{ animation-play-state:paused; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero{ padding:76px 0 54px; }
.page-hero h1{
  font-size:clamp(38px,5.2vw,66px);
  max-width:18ch;
  margin:22px 0 20px;
}
.page-hero .lede{ max-width:60ch; font-size:18px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:800; font-size:13.5px;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:7px 16px;
  box-shadow:3px 3px 0 var(--ink);
  color:var(--ink);
}
.eyebrow .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--coral-pop);
  border:1.5px solid var(--ink);
}
/* per-page eyebrow dot color, so each section of the site reads as its own brand color */
.pg-connect .eyebrow .dot{ background:var(--blue-pop); }
.pg-safety .eyebrow .dot{ background:var(--coral-pop); }
.pg-people .eyebrow .dot{ background:var(--green-pop); }
.pg-vision .eyebrow .dot{ background:var(--orange-pop); }
.pg-download .eyebrow .dot{ background:var(--yellow); }
.pg-legal .eyebrow .dot{ background:var(--ink-faint); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section{ padding:104px 0; }
.section-tight{ padding:80px 0; }

.on-surface{
  background:var(--bg-elevated);
  border-top:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink);
}
.on-ink{
  background:var(--ink);
  color:var(--bg);
}
.on-ink .lede{ color:rgba(246,239,227,.72); }

.section-head{ max-width:680px; margin-bottom:56px; }
.section-head h2{
  font-size:clamp(30px,4.4vw,52px);
  margin:18px 0 16px;
}
.section-head h2::after{
  content:"";
  display:block;
  width:110px; height:14px;
  margin-top:26px;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14'%3E%3Cpath d='M2 9 C 12 3, 22 3, 32 9 S 52 15, 62 9 S 82 3, 92 9 S 104 13, 108 7' fill='none' stroke='%23E0523D' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center h2::after{ margin-left:auto; margin-right:auto; }
.section-head .lede{ font-size:17px; }
.on-ink .section-head h2::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 12'%3E%3Cpath d='M2 8 C 12 2, 22 2, 32 8 S 52 14, 62 8 S 82 2, 92 8 S 104 12, 108 6' fill='none' stroke='%23EDC95E' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.section-connector{ display:flex; justify-content:center; padding:26px 0; }
.sig-line, .sig-line-long{
  width:0; border-left:3px dashed var(--ink);
  height:64px; opacity:.5;
}
.sig-line-long{ height:110px; }
.travel-dot{ display:none; }

/* ==========================================================================
   Cards — features, pillars, audiences
   ========================================================================== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
@media (max-width:900px){ .feature-grid{ grid-template-columns:1fr !important; } }

.feature-card{
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:30px 26px;
  box-shadow:var(--shadow-pop);
  transition:transform .18s ease, box-shadow .18s ease;
}
.feature-card:nth-child(3n+1){ transform:rotate(-.7deg); }
.feature-card:nth-child(3n+2){ transform:rotate(.5deg); }
.feature-card:nth-child(3n){ transform:rotate(-.35deg); }
.feature-card:hover{ transform:rotate(0) translate(-2px,-2px); box-shadow:var(--shadow-pop-lg); }
.feature-card h3{ font-size:20px; margin-bottom:8px; }
.feature-card p{ color:var(--ink-soft); font-size:15px; }

.feature-icon{
  width:52px; height:52px;
  border-radius:14px;
  border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  box-shadow:3px 3px 0 var(--ink);
  background:var(--surface-2);
  color:var(--ink);
}
.feature-icon svg{ width:24px; height:24px; }

.tone-blue   .feature-icon{ background:var(--blue-pop); }
.tone-green  .feature-icon{ background:var(--green-pop); }
.tone-coral  .feature-icon{ background:var(--coral-pop); }
.tone-orange .feature-icon{ background:var(--orange-pop); }

.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media (max-width:900px){ .pillar-grid{ grid-template-columns:1fr; } }
.pillar-card{
  display:block;
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:38px 30px;
  color:var(--ink);
  box-shadow:var(--shadow-pop-lg);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pillar-grid .pillar-card:nth-child(1){ transform:rotate(-1deg); }
.pillar-grid .pillar-card:nth-child(2){ transform:rotate(.8deg); }
.pillar-grid .pillar-card:nth-child(3){ transform:rotate(-.6deg); }
.pillar-card:hover{ transform:rotate(0) translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink); }
.pillar-card .feature-icon{ margin-bottom:20px; }
.pillar-card h3{ font-size:26px; margin-bottom:10px; }
.pillar-card p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:20px; }
.pillar-link{
  font-family:var(--font-display);
  font-weight:800; font-size:15px;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:7px 16px;
  display:inline-block;
}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
@media (max-width:900px){ .audience-grid{ grid-template-columns:1fr; } }
.audience-card{
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:28px 24px;
  box-shadow:var(--shadow-pop);
  transition:transform .18s ease, box-shadow .18s ease;
}
.audience-card:nth-child(odd){ transform:rotate(-.5deg); }
.audience-card:nth-child(even){ transform:rotate(.5deg); }
.audience-card:hover{ transform:rotate(0) translate(-2px,-2px); box-shadow:var(--shadow-pop-lg); }
.audience-card .glyph{
  width:46px; height:46px;
  border-radius:12px;
  border:2px solid var(--ink);
  background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.audience-card .glyph svg{ width:20px; height:20px; }
.audience-card h3{ font-size:18px; margin-bottom:6px; }
.audience-card p{ font-size:14.5px; color:var(--ink-soft); }

/* ==========================================================================
   Truth marquee (safety page)
   ========================================================================== */
.truth-marquee-wrap{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  padding:22px 0;
}
.truth-marquee{
  display:flex; gap:22px;
  width:max-content;
  animation:marquee-scroll 46s linear infinite;
}
.truth-marquee-wrap:hover .truth-marquee{ animation-play-state:paused; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.truth-tile{
  flex:none;
  width:264px;
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:22px 20px;
  box-shadow:var(--shadow-pop);
}
.truth-tile:nth-child(odd){ transform:rotate(-.6deg); }
.truth-tile:nth-child(even){ transform:rotate(.5deg); }
.truth-tile h4{ font-size:17px; margin:12px 0 6px; }
.truth-tile p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0; }
.tile-icon{
  width:42px; height:42px;
  border-radius:12px;
  border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2);
  color:var(--ink);
}
.tile-icon svg{ width:20px; height:20px; }
.tone-blue   .tile-icon{ background:var(--blue-pop); }
.tone-green  .tile-icon{ background:var(--green-pop); }
.tone-coral  .tile-icon{ background:var(--coral-pop); }
.tone-orange .tile-icon{ background:var(--orange-pop); }

.truth-closer{
  display:flex; align-items:center; gap:16px;
  margin:44px auto 18px;
  max-width:520px;
}
.truth-closer-line{ flex:1; border-top:3px dashed var(--ink); opacity:.45; }
.truth-closer-icon{
  width:46px; height:46px;
  border-radius:50%;
  border:2.5px solid var(--ink);
  background:var(--yellow);
  display:flex; align-items:center; justify-content:center;
  box-shadow:3px 3px 0 var(--ink);
  flex:none;
}
.truth-closer-icon svg{ width:20px; height:20px; }
.truth-closer-text{
  text-align:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px,3vw,32px);
  line-height:1.3;
  max-width:26ch;
  margin:0 auto;
}
.truth-closer-text .accent{
  background:var(--coral-pop);
  padding:.02em .14em;
  border-radius:8px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ==========================================================================
   Timeline
   ========================================================================== */
.timeline{ display:flex; flex-direction:column; }
.timeline-step{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;
  padding:34px 0;
  border-top:2.5px solid var(--ink);
  align-items:start;
}
.timeline-step:last-child{ border-bottom:2.5px solid var(--ink); }
.timeline-num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:56px;
  line-height:1;
  color:var(--bg);
  -webkit-text-stroke:2.5px var(--ink);
}
.timeline-content h3{ font-size:22px; margin-bottom:8px; }
.timeline-content p{ color:var(--ink-soft); max-width:62ch; }
@media (max-width:700px){
  .timeline-step{ grid-template-columns:70px 1fr; gap:18px; }
  .timeline-num{ font-size:38px; }
}

/* ==========================================================================
   Flow (what happens next)
   ========================================================================== */
.flow2-wrap{ display:flex; flex-direction:column; align-items:stretch; max-width:760px; margin:0 auto; }
.flow2-stage{
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:26px 28px;
  box-shadow:var(--shadow-pop);
}
.flow2-stage:nth-child(4n+1){ transform:rotate(-.4deg); }
.flow2-stage:nth-child(4n+3){ transform:rotate(.4deg); }
.flow2-stage-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:8px;
}
.flow2-stage-head h3{ font-size:21px; margin:0; }
.flow2-stage > p{ color:var(--ink-soft); font-size:15px; }
.flow2-num{
  flex:none;
  width:42px; height:42px;
  border-radius:50%;
  border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:800; font-size:19px;
  color:var(--surface);
  box-shadow:3px 3px 0 var(--ink);
}
.flow2-chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.flow2-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-weight:700; font-size:13.5px;
  background:var(--surface-2);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:7px 14px;
}
.flow2-chip svg{ width:16px; height:16px; color:var(--chip-accent, var(--ink)); }
.flow2-connector{ display:flex; justify-content:center; padding:6px 0; }
.flow2-connector .sig-line{ height:38px; }

/* ==========================================================================
   Annotated app screenshot
   ========================================================================== */
.app-annotated{
  display:grid;
  grid-template-columns:1fr 300px 1fr;
  gap:34px;
  align-items:start;
  max-width:1040px;
  margin:0 auto;
}
.app-phone-col{ perspective:900px; }
.app-photo-frame{
  border:3px solid var(--ink);
  border-radius:34px;
  overflow:hidden;
  background:#0B0B0B;
  box-shadow:9px 9px 0 var(--ink);
  transition:transform .2s ease;
  transform-style:preserve-3d;
}
.app-photo-frame img{ width:100%; height:auto; display:block; }
.annotate-col{ position:relative; min-height:660px; }
.annotate-item{
  position:absolute; left:0; right:0;
  --accent:var(--blue-pop);
}
.annotate-col.left .annotate-item{ text-align:right; }
.annotate-col.right .annotate-item{ text-align:left; }
.annotate-line{ display:none; }
.annotate-copy h4{
  font-size:16.5px;
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:5px;
}
.annotate-col.left .annotate-copy h4::after,
.annotate-col.right .annotate-copy h4::before{
  content:"";
  width:12px; height:12px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--ink);
  flex:none;
}
.annotate-copy p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0; }
@media (max-width:980px){
  .app-annotated{ grid-template-columns:1fr; gap:28px; }
  .annotate-col{ min-height:0; display:flex; flex-direction:column; gap:20px; }
  .annotate-item{ position:static; }
  .annotate-col.left .annotate-item{ text-align:left; }
  .annotate-col.left .annotate-copy h4::after{ display:none; }
  .annotate-col.left .annotate-copy h4::before{
    content:"";
    width:12px; height:12px; border-radius:50%;
    background:var(--accent); border:2px solid var(--ink); flex:none;
  }
  .app-phone-col{ order:-1; max-width:300px; margin:0 auto; }
}

/* ==========================================================================
   Philosophy / giant line
   ========================================================================== */
.philosophy{
  text-align:center;
  max-width:820px;
}
.philosophy blockquote{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,3.6vw,40px);
  line-height:1.3;
  margin:0 0 18px;
}
.philosophy cite{ font-style:normal; color:var(--ink-faint); font-size:14px; }
.on-ink .philosophy blockquote{ color:var(--bg); }
.on-surface .philosophy blockquote{ color:var(--ink); }

.giant-line{
  padding:110px 0;
  background:var(--bg-elevated);
  border-top:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink);
}
.giant-line p{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(26px,4.2vw,50px);
  line-height:1.25;
  max-width:24ch;
  margin:0 auto;
  text-align:center;
}

/* ==========================================================================
   Pills, values, traits, reframe, roadmap
   ========================================================================== */
.pill-list{ display:flex; flex-wrap:wrap; gap:12px; }
.pill{
  font-family:var(--font-display);
  font-weight:700; font-size:14.5px;
  padding:9px 20px;
  border-radius:999px;
  border:2px solid var(--ink);
  background:var(--surface);
  box-shadow:3px 3px 0 var(--ink);
  color:var(--ink);
}
.pill:nth-child(odd){ transform:rotate(-1deg); }
.pill:nth-child(even){ transform:rotate(1deg); }
.on-ink .pill{
  background:var(--bg);
  color:var(--ink);
  border-color:var(--bg);
  box-shadow:3px 3px 0 rgba(246,239,227,.35);
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:900px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
.value-cell{
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:var(--radius-sm);
  padding:18px 16px;
  box-shadow:3px 3px 0 var(--ink);
}
.value-cell h4{ font-size:15px; margin-bottom:5px; }
.value-cell p{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0; }

.trait-row{ display:flex; flex-wrap:wrap; gap:10px; }
.trait-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-weight:700; font-size:14px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--surface);
  padding:7px 16px;
}
.trait-chip .sw{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--ink); }

.reframe{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:22px;
  align-items:center;
  max-width:880px;
  margin:0 auto;
}
@media (max-width:800px){ .reframe{ grid-template-columns:1fr; } .reframe-arrow{ transform:rotate(90deg); justify-self:center; } }
.reframe-card{
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:26px;
  background:var(--surface);
  box-shadow:var(--shadow-pop);
}
.reframe-card.old{ transform:rotate(-1deg); opacity:.85; }
.reframe-card.new{ transform:rotate(1deg); background:var(--yellow); }
.reframe-card .tag{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  border:2px solid var(--ink);
  border-radius:999px;
  padding:4px 12px;
  margin-bottom:12px;
  background:var(--surface);
}
.reframe-card p{
  font-family:var(--font-display);
  font-weight:700; font-size:19px;
  line-height:1.35;
  margin:0;
}
.reframe-arrow{
  font-size:34px;
  font-family:var(--font-display);
  font-weight:800;
}

.roadmap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
@media (max-width:900px){ .roadmap{ grid-template-columns:1fr; } }
.roadmap-card{
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:28px 26px;
  box-shadow:var(--shadow-pop);
}
.roadmap-card:nth-child(2){ transform:rotate(.6deg); }
.roadmap-card:nth-child(3){ transform:rotate(-.5deg); }
.roadmap-card.now{ background:var(--yellow); transform:rotate(-.8deg); }
.roadmap-phase{
  font-family:var(--font-display);
  font-weight:800; font-size:12.5px;
  letter-spacing:.09em; text-transform:uppercase;
  display:inline-block;
  border:2px solid var(--ink);
  border-radius:999px;
  padding:5px 14px;
  margin-bottom:16px;
  background:var(--surface);
}
.roadmap-card h3{ font-size:21px; margin-bottom:8px; }
.roadmap-card p{ font-size:14.5px; color:var(--ink-soft); margin:0; }
.roadmap-card.now p{ color:rgba(26,22,14,.75); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:var(--yellow);
  border:3px solid var(--ink);
  border-radius:var(--radius-lg);
  padding:52px 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  box-shadow:10px 10px 0 var(--ink);
  transform:rotate(-.4deg);
}
.cta-band h2{ font-size:clamp(28px,3.6vw,44px); max-width:18ch; margin-bottom:8px; }
.cta-band p{ color:rgba(26,22,14,.75); font-weight:600; max-width:44ch; margin:0; }
.cta-band .btn{ background:var(--surface); color:var(--ink); border-color:var(--ink); box-shadow:4px 4px 0 rgba(26,22,14,.35); }
.cta-band .btn:hover{ box-shadow:6px 6px 0 rgba(26,22,14,.35); }
@media (max-width:700px){ .cta-band{ padding:36px 28px; } }

/* ==========================================================================
   Image placeholders
   ========================================================================== */
.img-placeholder{
  position:relative;
  border:2.5px dashed var(--ink);
  border-radius:var(--radius-md);
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--ink-faint);
  min-height:240px;
}
.img-placeholder svg{ width:36px; height:36px; opacity:.6; }
.img-placeholder span{
  font-family:var(--font-display);
  font-size:12.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
}
.img-placeholder.tall{ min-height:380px; }
.scene-note{ display:none; }

/* ==========================================================================
   People page illustration
   ========================================================================== */
.people-figures-wrap{ max-width:900px; }
.people-illustration{ width:100%; height:auto; }
.figure-head, .figure-body{
  fill:var(--surface);
  stroke:var(--ink);
  stroke-width:2.5;
}
.figure-accessory{ stroke:var(--ink); stroke-width:2.5; fill:none; }
.figure-halo{ opacity:.5; }
.connect-line{
  fill:none;
  stroke-width:2.5;
  stroke-dasharray:7 7;
  opacity:.8;
}
.emblem-glow{ opacity:.25; stroke-width:2; fill:none; }

/* ==========================================================================
   Download page bits
   ========================================================================== */
.hero-visual{ position:relative; width:200px; margin:0 auto; }
.hero-visual .ring, .hero-visual .pulse{ display:none; }
.hero-visual .mark-wrap{
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:50%;
  padding:38px;
  box-shadow:var(--shadow-pop-lg);
}
.hero-visual .mark-wrap img{ width:100%; }

.platform-grid .platform-card{
  border:2.5px solid var(--ink) !important;
  border-radius:var(--radius-md) !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow-pop);
}
.platform-grid .platform-card:first-child{ transform:rotate(-.6deg); }
.platform-grid .platform-card:last-child{ transform:rotate(.6deg); }
.soon-tag{
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  border:2px solid var(--ink);
}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal-doc{
  max-width:760px;
  font-size:15.5px;
}
.legal-doc p{ margin-bottom:18px; }
.legal-doc .updated{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:6px 16px;
  margin-bottom:28px;
}
.legal-doc h2{ font-size:24px; margin:44px 0 14px; }
.legal-doc h3{ font-size:18px; margin:26px 0 10px; }
.legal-doc ul{ margin:0 0 18px; }
.legal-doc li{
  position:relative;
  padding-left:26px;
  margin-bottom:10px;
}
.legal-doc li::before{
  content:"";
  position:absolute;
  left:2px; top:9px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--yellow);
  border:2px solid var(--ink);
}
.legal-doc a{ color:var(--blue); font-weight:700; text-decoration:underline; }
.legal-doc .callout{
  background:var(--yellow-dim);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:24px 26px;
  margin:28px 0;
  box-shadow:var(--shadow-pop);
}
.legal-doc .callout h3{ margin-top:0; }
.legal-table-wrap{ overflow-x:auto; margin:20px 0 28px; }
.legal-table{
  border-collapse:collapse;
  width:100%;
  min-width:560px;
  font-size:14px;
  background:var(--surface);
  border:2.5px solid var(--ink);
}
.legal-table th{
  font-family:var(--font-display);
  font-weight:800;
  text-align:left;
  background:var(--yellow);
  border:2px solid var(--ink);
  padding:10px 14px;
}
.legal-table td{
  border:2px solid var(--ink);
  padding:10px 14px;
  vertical-align:top;
}
.contact-box{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800; font-size:17px;
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-sm);
  padding:14px 26px;
  box-shadow:var(--shadow-pop);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--ink);
  color:var(--bg);
  padding:72px 0 36px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:44px;
}
@media (max-width:800px){ .footer-top{ grid-template-columns:1fr 1fr; } }
.footer-brand img{ height:34px; width:auto; margin-bottom:14px; filter:brightness(0) invert(1) sepia(.1); }
.footer-brand p{ color:rgba(246,239,227,.65); font-size:14.5px; max-width:26ch; }
.footer-col h4{
  font-family:var(--font-display);
  font-size:13.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{
  color:rgba(246,239,227,.85);
  font-size:15px;
  font-weight:600;
}
.footer-col a:hover{ color:var(--yellow); }
.footer-bottom{
  border-top:2px dashed rgba(246,239,227,.3);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-size:13.5px;
  color:rgba(246,239,227,.6);
}
.footer-bottom a{ color:rgba(246,239,227,.85); text-decoration:underline; }
.footer-bottom a:hover{ color:var(--yellow); }

/* ==========================================================================
   Motion prefs
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .ticker{ animation:none; flex-wrap:wrap; width:auto; }
  .truth-marquee{ animation:none; flex-wrap:wrap; width:auto; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Brand wordmark — animated "zich", Baloo 2, blue
   ========================================================================== */
.brand-logo{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--font-display);
  font-weight:800;
  color:var(--blue-pop);
  letter-spacing:.01em;
  line-height:1;
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
  text-shadow:
    1px 1px 0 var(--ink), 2px 1px 0 var(--ink), 3px 1px 0 var(--ink),
    1px 2px 0 var(--ink), 2px 2px 0 var(--ink), 3px 2px 0 var(--ink),
    1px 3px 0 var(--ink), 2px 3px 0 var(--ink), 3px 3px 0 var(--ink);
}
.brand-logo span{
  display:inline-block;
  animation:logo-bob 2.6s ease-in-out infinite;
  transform-origin:bottom center;
}
.brand-logo span:nth-child(1){ animation-delay:0s; }
.brand-logo span:nth-child(2){ animation-delay:.09s; }
.brand-logo span:nth-child(3){ animation-delay:.18s; }
.brand-logo span:nth-child(4){ animation-delay:.27s; }
@keyframes logo-bob{
  0%, 55%, 100%{ transform:translateY(0) rotate(0deg); }
  28%{ transform:translateY(-4px) rotate(-4deg); }
}
.brand-mark{
  display:inline-block; vertical-align:middle; flex:none;
  background-image:url("../assets/logo-mark-sticker.png");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

.nav-brand{ display:flex; align-items:center; flex:none; gap:12px; text-decoration:none; }
.nav-brand .brand-mark{ width:62px; height:62px; }
.nav-brand .brand-logo{ font-size:50px; }
.nav-brand:hover .brand-logo span{ animation-duration:1s; }
.nav-brand:hover .brand-mark{ transform:rotate(-6deg) scale(1.05); }
.brand-mark{ transition:transform .2s cubic-bezier(.6,1.6,.4,1); }

.footer-brand .brand-mark{ width:52px; height:52px; margin-right:10px; }
.footer-brand .brand-logo{ font-size:40px; margin-bottom:14px; }

/* per-page brand color — mark + wordmark match each page's identity color */
.pg-safety .brand-mark{ background-image:url("../assets/logo-mark-sticker-coral.png"); }
.pg-safety .brand-logo{ color:var(--coral-pop); }
.pg-people .brand-mark{ background-image:url("../assets/logo-mark-sticker-green.png"); }
.pg-people .brand-logo{ color:var(--green-pop); }
.pg-vision .brand-mark{ background-image:url("../assets/logo-mark-sticker-orange.png"); }
.pg-vision .brand-logo{ color:var(--orange-pop); }
.pg-download .brand-mark{ background-image:url("../assets/logo-mark-sticker-yellow.png"); }
.pg-download .brand-logo{ color:var(--yellow); }
.pg-home .brand-mark{ background-image:url("../assets/logo-mark-sticker-yellow.png"); }
.pg-home .brand-logo{ color:var(--yellow); }

@media (prefers-reduced-motion: reduce){
  .brand-logo span{ animation:none; }
}

/* ============================================================
   COMING SOON
   ============================================================
   Zich is live in both stores, so anything on this site now reads as a
   promise about a shipped product. A few things here are designed and
   intended but not built yet — chiefly AI Sensing and Voice Command, plus
   per-person alert escalation and locked folders. Rather than delete them
   (they're real roadmap, and the vision matters) each is labelled.

   Deliberately a sticker, not a warning: ink outline, hard offset shadow,
   same language as the rest of the Sunroom system, so it reads as "on the
   way" rather than "broken". Small, uppercase, and never louder than the
   feature name it sits beside. */
.soon{
  display:inline-flex;
  align-items:center;
  gap:5px;
  vertical-align:middle;
  margin-left:8px;
  padding:2px 9px 3px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--surface);
  box-shadow:2px 2px 0 var(--ink);
  color:var(--ink);
  font-family:var(--font-display, inherit);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1.4;
  transform:rotate(-1.5deg);
}
.soon::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--yellow);
  border:1.5px solid var(--ink);
  flex:none;
}
/* On the dark chips in the alert-flow rows, the cream sticker would blow out
   next to a small label — invert it so it stays quieter than the chip. */
.flow2-chip .soon{
  margin-left:6px;
  background:transparent;
  border-color:currentColor;
  box-shadow:none;
  color:inherit;
  opacity:.85;
  transform:none;
}
.flow2-chip .soon::before{ background:currentColor; border-color:currentColor; }

/* A whole card that describes something unbuilt gets a dashed edge as well as
   the badge — at a glance the outline reads before any label does. */
.card-soon{
  border-style:dashed !important;
}

/* One line under a group of cards, for when several are unbuilt and repeating
   the badge would shout. */
.soon-note{
  margin-top:14px;
  color:var(--ink-faint);
  font-size:14px;
  line-height:1.6;
}
.soon-note b{ color:var(--ink-soft); font-weight:700; }