/* Carreh — feature landing pages (Atlas, Logg, Save from Social, Trip Planner)
   Shared premium styling. Brand: Fraunces + DM Sans, deep green #0E4A28,
   accent #2A8550, cream #fbf9f5. Loaded by /atlas /logg /save-from-social
   /trip-planner. Self-contained — pages add only tiny page-specific tweaks. */

:root{
  --ink:#16201a; --green:#0E4A28; --acc:#2A8550; --mut:#5d655f;
  --cream:#fbf9f5; --line:rgba(20,32,26,.08); --dark:#0c241a;
}
*{box-sizing:border-box}
.ft-spacer{height:64px}
.ft-wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ── Hero (split: copy + device) ───────────────────────────────────── */
.ft-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:46px 0 18px}
.ft-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans';font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.ft-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.ft-h1{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(2.2rem,5.2vw,3.4rem);line-height:1.06;color:var(--ink);margin:0 0 18px}
.ft-h1 em{font-style:italic;color:var(--green)}
.ft-lede{font-family:'DM Sans';font-size:1.05rem;line-height:1.72;color:var(--mut);max-width:520px;margin:0 0 24px}
.ft-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ft-cta{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans';font-weight:600;font-size:.95rem;text-decoration:none;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;background:var(--green);color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s}
.ft-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(14,74,40,.22)}
.ft-cta.ghost{background:transparent;color:var(--green);border-color:rgba(14,74,40,.25)}
.ft-cta.ghost:hover{border-color:var(--green);box-shadow:none}
.ft-trust{margin-top:16px;font-family:'DM Sans';font-size:.8rem;color:#7a807b}
.ft-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ft-badges img{height:46px;width:auto;display:block}

/* ── Device frame for screenshots ──────────────────────────────────── */
.ft-device{justify-self:center;position:relative;width:min(290px,82vw)}
.ft-device .frame{position:relative;border-radius:38px;background:#0c1410;padding:11px;box-shadow:0 30px 70px rgba(20,32,26,.28),0 6px 18px rgba(20,32,26,.14)}
.ft-device .frame img{width:100%;display:block;border-radius:28px}
.ft-device .glow{position:absolute;inset:-12% -16% auto -16%;height:60%;background:radial-gradient(60% 60% at 50% 0,rgba(42,133,80,.22),transparent 70%);filter:blur(8px);z-index:-1}
.ft-device.tilt .frame{transform:rotate(-3deg)}

/* ── Sections ──────────────────────────────────────────────────────── */
.ft-sec{padding:42px 0;border-top:1px solid var(--line)}
.ft-sec h2{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(1.6rem,3.6vw,2.2rem);color:var(--ink);text-align:center;margin:0 0 10px}
.ft-sec h2 em{font-style:italic;color:var(--green)}
.ft-lead{text-align:center;font-family:'DM Sans';color:var(--mut);max-width:600px;margin:0 auto 28px;line-height:1.7}
.ft-sec.dark{background:var(--dark);border-top:0;color:#eef3ef;margin-top:8px}
.ft-sec.dark h2{color:#fff}
.ft-sec.dark .ft-lead{color:rgba(238,243,239,.66)}

/* ── Benefit cards ─────────────────────────────────────────────────── */
.ft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:15px;max-width:920px;margin:0 auto}
.ft-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;transition:transform .15s,box-shadow .15s}
.ft-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,32,26,.08)}
.ft-card .i{font-size:24px;line-height:1}
.ft-card h3{font-family:'DM Sans';font-weight:700;font-size:1rem;color:var(--ink);margin:10px 0 5px}
.ft-card p{font-family:'DM Sans';font-size:.88rem;line-height:1.58;color:var(--mut);margin:0}
.ft-sec.dark .ft-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.ft-sec.dark .ft-card h3{color:#fff}.ft-sec.dark .ft-card p{color:rgba(238,243,239,.66)}

/* ── Numbered steps ────────────────────────────────────────────────── */
.ft-steps{max-width:760px;margin:0 auto;display:grid;gap:16px}
.ft-step{display:flex;gap:16px;align-items:flex-start}
.ft-step .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-family:'Fraunces',serif;display:grid;place-items:center;font-size:.95rem}
.ft-step h4{font-family:'DM Sans';font-weight:700;font-size:1rem;color:var(--ink);margin:3px 0 4px}
.ft-step p{font-family:'DM Sans';font-size:.9rem;line-height:1.6;color:var(--mut);margin:0}
.ft-sec.dark .ft-step h4{color:#fff}.ft-sec.dark .ft-step p{color:rgba(238,243,239,.66)}

/* ── Stat / rank ladder ────────────────────────────────────────────── */
.ft-stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:840px;margin:0 auto}
.ft-stat{flex:1 1 150px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 14px}
.ft-stat .num{font-family:'Fraunces',serif;font-size:1.9rem;color:var(--green);line-height:1}
.ft-stat .lab{font-family:'DM Sans';font-size:.82rem;color:var(--mut);margin-top:6px}
.ft-ranks{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px auto 0;max-width:620px}
.ft-rank{font-family:'DM Sans';font-weight:600;font-size:.8rem;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:#fff}
.ft-rank.on{background:var(--green);color:#fff;border-color:var(--green)}

/* ── The "loop" diagram (cross-feature story) ──────────────────────── */
.ft-loop{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:stretch;max-width:920px;margin:0 auto}
.ft-loop .node{flex:1 1 160px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center}
.ft-loop .node .i{font-size:24px}
.ft-loop .node h4{font-family:'DM Sans';font-weight:700;font-size:.95rem;color:var(--ink);margin:8px 0 4px}
.ft-loop .node p{font-family:'DM Sans';font-size:.82rem;color:var(--mut);line-height:1.5;margin:0}
.ft-loop .arr{display:grid;place-items:center;font-size:1.3rem;color:var(--acc);flex:0 0 auto}
@media(max-width:720px){.ft-loop .arr{transform:rotate(90deg)}}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.ft-faq{max-width:700px;margin:0 auto}
.ft-faq details{border-bottom:1px solid rgba(20,32,26,.1);padding:16px 0}
.ft-faq summary{font-family:'DM Sans';font-weight:600;font-size:1rem;color:var(--ink);cursor:pointer;list-style:none}
.ft-faq summary::-webkit-details-marker{display:none}
.ft-faq summary::before{content:'+';color:var(--acc);font-weight:700;margin-right:10px}
.ft-faq details[open] summary::before{content:'–'}
.ft-faq p{font-family:'DM Sans';font-size:.92rem;line-height:1.7;color:var(--mut);margin:10px 0 0 22px}

/* ── Final CTA band ────────────────────────────────────────────────── */
.ft-band{background:linear-gradient(135deg,#0E4A28,#0a3a1f);border-radius:24px;padding:40px 28px;text-align:center;margin:42px auto;max-width:920px}
.ft-band h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.6rem,3.4vw,2.2rem);color:#fff;margin:0 0 12px}
.ft-band p{font-family:'DM Sans';color:rgba(255,255,255,.72);max-width:480px;margin:0 auto 20px;line-height:1.6}
.ft-band .ft-badges{justify-content:center}

/* ── Save-from-Social mini demo (CSS-animated) ─────────────────────── */
.ss-demo{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 20px 46px rgba(20,32,26,.1)}
.ss-bar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-family:'DM Sans';font-size:.86rem;color:var(--mut)}
.ss-bar .lk{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#3a423c}
.ss-bar .pin{font-size:16px}
.ss-out{margin-top:14px;display:flex;gap:12px;align-items:center;opacity:0;transform:translateY(8px);animation:ssReveal 1s ease forwards;animation-delay:1.1s}
.ss-thumb{width:64px;height:64px;border-radius:12px;flex:0 0 auto;background:linear-gradient(135deg,#2A8550,#0E4A28);display:grid;place-items:center;font-size:26px}
.ss-meta h4{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink);margin:0 0 2px}
.ss-meta p{font-family:'DM Sans';font-size:.82rem;color:var(--mut);margin:0}
.ss-tag{display:inline-block;margin-top:7px;font-family:'DM Sans';font-weight:600;font-size:.72rem;color:var(--green);background:rgba(42,133,80,.1);padding:4px 10px;border-radius:999px}
@keyframes ssReveal{to{opacity:1;transform:translateY(0)}}
.ss-typed{animation:ssType 1s steps(28) forwards;width:0;display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
@keyframes ssType{to{width:100%}}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:760px){
  .ft-hero{grid-template-columns:1fr;gap:26px;text-align:center;padding-top:30px}
  .ft-eyebrow,.ft-cta-row,.ft-badges{justify-content:center}
  .ft-lede{margin-left:auto;margin-right:auto}
  .ft-device.tilt .frame{transform:none}
}