/* App Indulge — shared site styles (linked by index.php and the other rebuilt pages) */

:root {
  --ink:#1c1c1e; --muted:#6b6b70; --accent:#d98324;
  --bar:#141414; --bar-text:#e9e9ec; --bar-dim:#9a9aa0;
  --about-bg:#ececec; --rule:#9a9a9a;
  --mono:'Share Tech Mono', ui-monospace, "Courier New", monospace;
}
* { box-sizing: border-box; }
/* Root is bar-black so anything below the footer (and overscroll) is black, not gray. */
html { -webkit-text-size-adjust: 100%; background: var(--bar); }
body {
  margin: 0; color: var(--ink); background: var(--bar);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; display: block; }

/* Centered content column; the black root shows as left/right gutters on wide screens. */
.page { max-width: 1100px; margin: 0 auto; }

/* ---- Header / footer bars ---- */
.bar {
  background: var(--bar); color: var(--bar-text);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding: 12px 24px;
}
.bar__logo img { height: 48px; width: auto; }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-left: auto; }
.bar nav a {
  color: var(--bar-dim); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.bar nav a:hover { color: #fff; }

.bar--footer { justify-content: center; gap: 10px 28px; }
.bar--footer a { color: var(--bar-dim); text-decoration: none; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.bar--footer a:hover { color: #fff; }
.bar--footer .copyright { width: 100%; text-align: center; color: var(--bar-dim); font-size: 13px; margin-top: 6px; }

/* ---- Hero ---- */
.hero img { width: 100%; height: auto; }

/* ---- About ---- */
.about {
  background: var(--about-bg); text-align: center; padding: 48px 24px 64px;
  font-family: var(--mono); text-transform: uppercase;
}
.about h1 { font-weight: 400; font-size: clamp(30px, 7vw, 50px); letter-spacing: .12em; margin: 0; }
.about .rule { width: 88px; height: 1px; background: var(--rule); border: 0; margin: 18px auto 26px; }
.about .lead {
  max-width: 680px; margin: 0 auto; letter-spacing: .05em; line-height: 1.85;
  font-size: clamp(13px, 3.2vw, 17px);
}

/* ---- Stat badges: half-smile SVG + text overlaid in the upper bell ---- */
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 48px; margin-top: 52px; }
.stat { position: relative; width: 360px; max-width: 84vw; }
.stat__shape { display: block; width: 100%; height: auto; opacity: .5; }   /* the img sizes the box; lightened */
.stat__text {
  position: absolute; left: 0; right: 0;
  top: 42%; transform: translateY(-50%);   /* center the text ~42% down = upper bell */
  display: flex; flex-direction: column; align-items: center;
}
.stat__num { font-size: clamp(41px, 10vw, 62px); letter-spacing: .04em; line-height: 1; }
.stat__label { font-size: clamp(13px, 3.2vw, 17px); letter-spacing: .12em; margin-top: 8px; }

/* ---- Content sections (Our Story / Apps / Careers / Contact) ---- */
.section { background: #fff; text-align: center; padding: 56px 24px;
  font-family: var(--mono); text-transform: uppercase; }
.section--gray { background: var(--about-bg); }
.section--dark { background: var(--bar); color: var(--bar-text); }
.section--dark .rule { background: rgba(255,255,255,.35); }
.section h2 { font-weight: 400; font-size: clamp(26px, 6vw, 44px); letter-spacing: .1em; margin: 0; }
.section .rule { width: 88px; height: 1px; background: var(--rule); border: 0; margin: 16px auto 22px; }
.section p { max-width: 660px; margin: 0 auto 14px; letter-spacing: .04em; line-height: 1.85;
  font-size: clamp(13px, 3.2vw, 16px); }
.section .btn-img { display: inline-block; margin-top: 26px; }
.section .btn-img img { height: 54px; width: auto; margin: 0 auto; }

/* Feature list (Top 10 / 5 categories / …) */
.features { max-width: 620px; margin: 30px auto 0; }
.feature { margin: 0 auto 32px; }
.feature h3 { font-weight: 400; font-size: clamp(24px, 5.5vw, 38px); letter-spacing: .05em; margin: 0 0 6px; }
.feature h3 small { font-size: .5em; letter-spacing: .12em; }

/* Our Story: phone illustration beside the feature list (left-aligned, fully visible) */
.os-features { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 28px 44px; max-width: 1000px; margin: 0; text-align: left; }
.os-features__photo { flex: 0 0 auto; width: clamp(150px, 20vw, 210px); margin-left: -24px; }
.os-features__photo img { width: 100%; height: auto; display: block; }
.os-features__list { flex: 1 1 300px; }
.os-features__list .feature { margin: 0 0 26px; }
.os-features__list .feature:last-child { margin-bottom: 0; }
.os-features__list .feature p { max-width: none; margin: 0; }
/* Narrow screens: float the phone left so the text starts at the top and wraps
   beside/under it — no tall blank block above the copy. */
@media (max-width: 560px) {
  .os-features { display: block; overflow: hidden; }   /* contain the float; text still wraps around it */
  .os-features__photo { float: left; width: clamp(120px, 40vw, 175px);
    margin: 4px 22px 8px -24px; }
}

/* Card grid (Apps / Careers) — readable, normal-case text cards */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 860px; margin: 30px auto 0; }
.card { flex: 1 1 300px; max-width: 380px; background: #fff; border: 1px solid var(--rule);
  border-radius: 14px; padding: 22px 24px; text-align: left;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; text-transform: none; }
.card h3 { font-weight: 700; font-size: 20px; letter-spacing: 0; margin: 0 0 4px; color: var(--ink); }
.card__tag { color: var(--accent); font-weight: 600; font-size: 13px; margin: 0 0 10px; }
.card p { letter-spacing: 0; line-height: 1.6; font-size: 14.5px; margin: 0; color: var(--ink); }
.card__icon { width: 72px; height: 72px; border-radius: 16px; display: block; margin: 0 0 12px; }

/* Whole-card link: the entire card is the hitbox, not just the text */
.card--link { display: block; color: inherit; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card--link:hover { transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.card--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card .card__cta { margin: 12px 0 0; color: #a5651a; font-weight: 600; }
.card--link:hover .card__cta { text-decoration: underline; }

/* App icon (rounded, iOS-style) for app pages */
.app-icon { width: 120px; height: 120px; border-radius: 26px; display: block; margin: 0 auto 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.14); }

/* Contact — big phone standing on the bottom edge, text beside it (stacks on mobile) */
.section--flush { padding-bottom: 0; }
.contact { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 20px 48px; max-width: 860px; margin: 0 auto; }
.contact__phone { width: 340px; max-width: 52vw; height: auto; align-self: flex-end; }
.contact__text { flex: 1 1 280px; max-width: 420px; padding-top: 20px; padding-bottom: 40px; }

/* Readable (normal-case) overrides for links inside otherwise-mono sections */
.section .note { font-family: 'Open Sans', -apple-system, sans-serif; text-transform: none; letter-spacing: 0; font-size: 15px; }
.section a.email { display: inline-block; margin-top: 6px; text-transform: none; letter-spacing: 0;
  font-family: 'Open Sans', -apple-system, sans-serif; font-size: clamp(18px, 4vw, 26px);
  color: var(--accent); text-decoration: none; }
.section a.email:hover { text-decoration: underline; }
.section a { color: #a5651a; }
.card a { color: #a5651a; font-weight: 600; text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* ---- Careers job banners: square photo + colored text panel ---- */
.job { display: flex; flex-wrap: wrap; }
.job__photo { flex: 1 1 50%; min-width: 240px; aspect-ratio: 1 / 1; }
.job__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job__panel { flex: 1 1 50%; min-width: 240px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  font-family: var(--mono); text-transform: uppercase; }
.job__panel h3 { font-weight: 400; font-size: clamp(20px, 3.4vw, 30px); letter-spacing: .06em; margin: 0 0 6px; }
.job__panel p { letter-spacing: .1em; font-size: clamp(12px, 2.4vw, 15px); margin: 0; }
.job--flip { flex-direction: row-reverse; }
.job--cream .job__panel { background: #f4efc9; color: #2b2b2b; }
.job--gray  .job__panel { background: var(--about-bg); color: #2b2b2b; }
.job--dark  .job__panel { background: #111; color: #e9e9ec; }
@media (max-width: 40em) { .job, .job--flip { flex-direction: column; } }

/* ---- Document / legal pages (privacy, terms, etc.) ---- */
.doc { background: #fff; }
.doc__body { max-width: 720px; margin: 0 auto; padding: 44px 24px 56px; }
.doc__body h1 { font-size: clamp(28px, 6vw, 36px); line-height: 1.15; margin: 0 0 6px; }
.doc__body h1 .accent { color: var(--accent); }
.doc__body .updated { color: var(--muted); font-size: 15px; margin: 0 0 28px; }
.doc__body h2 { font-size: 20px; margin: 36px 0 8px; }
.doc__body p { margin: 0 0 16px; }
.doc__body a { color: #a5651a; }
.doc__body hr { border: 0; border-top: 1px solid var(--rule); margin: 28px 0; }

@media (max-width: 34em) {
  .bar { justify-content: center; }
  .bar nav { margin-left: 0; justify-content: center; }
  .bar nav a { font-size: 12px; letter-spacing: .06em; }

  /* Smaller smile badges on phones (~half width), number scaled to fit. */
  .stat { max-width: 54vw; }
  .stat__num { font-size: 8.5vw; }
  .stat__label { font-size: 3vw; }
}

/* ================= Gild app page ================= */
/* Hero: text column + iPhone mockup showing the app's signature score ring */
.gild-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 40px 60px; max-width: 940px; margin: 0 auto; text-align: left; }
.gild-hero__text { flex: 1 1 320px; max-width: 460px; }
.gild-hero__icon { margin: 0 0 22px; }
.gild-hero__text h2 { text-align: left; }
.gild-hero__text .rule { margin: 16px 0 22px; }
.gild-hero__text p { margin: 0; max-width: none; }
.gild-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px;
  color: #6b4e12; background: #f3e4bf; border: 1px solid #e3c98a; padding: 9px 16px; border-radius: 999px; }
.gild-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg,#734d21,#e6b542); }

/* Phone render */
.gild-hero__device { flex: 0 0 auto; }
.gild-hero__img { width: 270px; max-width: 74vw; height: auto; display: block;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.28)); }

/* Feature cards */
.gild-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
  max-width: 940px; margin: 0 auto; }
.gild-feature { flex: 1 1 250px; max-width: 300px; background: #fff; border: 1px solid #e8e8e8;
  border-radius: 18px; padding: 32px 26px; text-align: center; box-shadow: 0 3px 14px rgba(0,0,0,.05); }
.gild-feature__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: linear-gradient(150deg,#f7ead0,#eed9a6); display: flex; align-items: center; justify-content: center; }
.gild-feature__icon svg { width: 30px; height: 30px; color: #8a5e15; }
.gild-feature h3 { text-align: center; font-weight: 400; font-size: 25px; letter-spacing: .05em; margin: 0; }
.gild-feature h3 small { display: block; font-size: .48em; letter-spacing: .14em; margin-top: 5px; color: #6b6b70; }
.gild-feature p { text-align: center; margin: 12px 0 0; max-width: none; letter-spacing: .03em;
  font-size: 14px; line-height: 1.72; }

/* Coming-soon ramp */
.gild-ramp { width: 230px; max-width: 70%; height: 9px; border-radius: 999px; margin: 26px auto 12px;
  background: linear-gradient(90deg,#734d21,#a9772a,#e6b542); }
.gild-ramp-caption { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: 11.5px; color: #8a8a8f; margin: 0; }

@media (max-width: 620px) {
  .gild-hero { text-align: center; }
  .gild-hero__icon { margin-left: auto; margin-right: auto; }
  .gild-hero__text h2 { text-align: center; }
  .gild-hero__text .rule { margin-left: auto; margin-right: auto; }
}