/* ============================================
   Far Works — Apps Sub-brand Theme
   (Decisions / Panic Meter / Apiary)
   Values pulled from the live Decisions page's
   Elementor kit + page-level overrides.
   ============================================ */

:root{
  --bg: #f5f3ee;           /* page-level override on the live Decisions page */
  --card: #ffffff;
  --ink: #444444;          /* live page body/heading color */
  --ink-soft: #5c5c5c;
  --sage: #89a185;         /* kit --e-global-color-primary */
  --sage-deep: #5f7a5c;
  --rust: #9c5e30;         /* live page button border/accent color */
  --rust-soft: #d9c3ab;
  --coral: #d95f58;        /* kit --e-global-color-accent (shared with main site) */

  --font-display: "Goudy Bookletter 1911", Georgia, serif;
  --font-feature: "Fanwood Text", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-mono: "League Mono", "IBM Plex Mono", monospace;
  --max: 1120px;
}

*{box-sizing:border-box;}
body.apps-theme{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
img{max-width:100%; display:block;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--rust); outline-offset:2px;}

/* Header */
.apps-header{padding:24px 0; border-bottom:1px solid #e2ddd2;}
.apps-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.apps-header .back-link{
  font-family:var(--font-mono);
  font-size:.82rem;
  text-decoration:none;
  color:var(--ink-soft);
  letter-spacing:.03em;
}
.apps-header .back-link:hover{color:var(--rust);}
.apps-nav ul{
  display:flex; gap:24px; list-style:none; margin:0; padding:0;
  font-family:var(--font-mono);
  font-size:.86rem;
}
.apps-nav a{text-decoration:none; color:var(--ink-soft);}
.apps-nav a:hover, .apps-nav a[aria-current="page"]{color:var(--sage-deep);}

/* Generic sections */
.app-hero{padding:64px 0 40px;}
.app-hero .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.app-hero h1{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-1px;
  font-size:clamp(2.1rem, 3.6vw, 3rem);
  line-height:1.15;
  margin:0 0 18px;
}
.app-hero p{font-family:var(--font-mono); color:var(--ink-soft); max-width:44ch; margin:0 0 26px; font-size:.98rem; line-height:1.55;}
.app-hero .meta{
  font-family:var(--font-mono);
  font-size:.85rem; letter-spacing:.02em; color:var(--ink-soft);
}
.app-art{display:flex; justify-content:center;}
.app-art img{border-radius:16px;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:2px solid var(--rust);
  color:var(--rust);
  padding:11px 22px;
  border-radius:100px;
  text-decoration:none;
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:600;
  background:transparent;
}
.btn svg{width:15px; height:15px; fill:var(--rust);}
.btn:hover{background:var(--rust); color:#fff;}
.btn:hover svg{fill:#fff;}
.btn.solid{background:var(--sage-deep); border-color:var(--sage-deep); color:#fff;}
.btn.solid svg{fill:#fff;}
.btn.solid:hover{background:#4c6549;}

.tagline-row{
  padding:8px 0 40px;
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--ink-soft);
  letter-spacing:.03em;
}

/* Content sections */
.app-section{padding:48px 0;}
.app-section h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.9rem;
  text-align:center;
  margin:0 0 40px;
}
.feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}
.feature-grid--3col{
  grid-template-columns:1fr 240px 1fr;
  align-items:center;
}
.feature-col{display:flex; flex-direction:column; gap:32px;}
.feature{max-width:38ch;}
.feature h3{
  font-family:var(--font-feature);
  font-weight:400;
  font-size:1.15rem;
  margin:0 0 6px;
}
.feature p{margin:0; color:var(--ink-soft); font-size:.94rem; font-family:var(--font-body);}
.feature-center{display:flex; justify-content:center;}
.feature-center img{border-radius:14px; max-height:560px;}

/* Steps ("How It Works") */
.steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.step{display:flex; align-items:center; gap:14px;}
.step .num{
  flex:none;
  width:52px; height:52px;
  border:2px solid var(--rust);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-feature);
  font-size:1.1rem;
  color:var(--ink);
}
.step h3{
  font-family:var(--font-feature);
  font-weight:400;
  font-size:1rem;
  margin:0;
  line-height:1.25;
}

/* Closing CTA */
.app-cta{padding:32px 0 80px;}
.app-cta .grid{
  display:grid;
  grid-template-columns:1fr repeat(3, 1fr);
  gap:20px;
  align-items:start;
}
.app-cta h2{
  font-family:var(--font-display);
  font-size:1.9rem;
  margin:0 0 14px;
  font-weight:700;
  letter-spacing:-.5px;
}
.app-cta p{font-family:var(--font-body); color:var(--ink-soft); font-size:.94rem; max-width:32ch; margin:0 0 22px;}
.pill-card{
  border:2px solid var(--rust);
  border-radius:70px;
  padding:28px 22px;
  font-family:var(--font-mono);
  font-size:.86rem;
  color:var(--ink-soft);
  text-align:center;
}
.pill-card strong{
  display:block; color:var(--ink); font-family:var(--font-feature);
  font-size:1rem; margin-top:12px; font-weight:400; font-style:italic;
}

/* Placeholder ("coming soon") pages */
.coming-soon{
  padding:90px 0 110px;
  text-align:center;
}
.coming-soon .eyebrow{
  font-family:var(--font-mono);
  font-size:.85rem; letter-spacing:.05em; color:var(--sage-deep); text-transform:lowercase;
}
.coming-soon h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  margin:14px 0 18px;
}
.coming-soon p{
  color:var(--ink-soft); max-width:48ch; margin:0 auto 30px; font-size:1.02rem;
}
.dot-rule{
  width:100%;
  height:1px;
  background-image:radial-gradient(circle, #cfc8b8 1px, transparent 1px);
  background-size:8px 1px;
  margin:0 0 40px;
}

/* Hub page (apps/index) */
.hub-intro{padding:64px 0 36px; text-align:center;}
.hub-intro h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.1rem, 3.6vw, 2.9rem);
  margin:0 0 16px;
}
.hub-intro p{font-family:var(--font-mono); color:var(--ink-soft); max-width:56ch; margin:0 auto; font-size:.95rem;}
.app-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  padding:8px 0 90px;
}
.app-card{
  background:var(--card);
  border-radius:18px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  text-decoration:none;
  color:var(--ink);
  border:1px solid #e6e0d3;
  transition:transform .15s ease, box-shadow .15s ease;
}
.app-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(60,50,30,.25);}
.app-card .thumb{
  border-radius:10px;
  height:150px;
  overflow:hidden;
  background:#e4ded0;
}
.app-card .thumb img{width:100%; height:100%; object-fit:cover;}
.app-card h3{font-family:var(--font-feature); font-size:1.3rem; margin:0; font-weight:400;}
.app-card .status{font-family:var(--font-mono); font-size:.78rem; color:var(--sage-deep); letter-spacing:.03em;}
.app-card p{font-size:.88rem; color:var(--ink-soft); margin:0;}

/* Footer */
.apps-footer{border-top:1px solid #e2ddd2; padding:28px 0; margin-top:20px;}
.apps-footer .wrap{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono);
  font-size:.8rem; color:var(--ink-soft); flex-wrap:wrap; gap:10px;
}
.apps-footer a{text-decoration:none; color:var(--ink-soft);}
.apps-footer a:hover{color:var(--rust);}

@media (max-width: 860px){
  .app-hero .wrap{grid-template-columns:1fr;}
  .app-art{order:-1;}
  .feature-grid{grid-template-columns:1fr;}
  .feature-grid--3col{grid-template-columns:1fr;}
  .feature-center{order:-1;}
  .app-cta .grid{grid-template-columns:1fr;}
  .app-cards{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .apps-header .wrap{flex-direction:column; gap:12px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}