/* ============================================================================ AICO — shared styles for sub-pages (founder guides + downloadable templates). Mirrors the design language of the homepage (index.html) so guide and template pages feel like part of the same site without re-declaring the homepage's full inline stylesheet. Fonts are loaded per-page in the . ============================================================================ */ :root{ --navy:#0d1f33; --navy-2:#13283f; --navy-3:#1b3a59; --gold:#c9a24b; --gold-soft:#e3c785; --cream:#f7f4ee; --paper:#fbfaf7; --ink:#11202f; --muted:#5d6f7d; --line:rgba(201,162,75,.28); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.display{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.15;} a{color:inherit;text-decoration:none;} .wrap{max-width:1140px;margin:0 auto;padding:0 28px;} .narrow{max-width:760px;} .eyebrow{ font-size:12px;letter-spacing:.28em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:18px; } /* NAV (matches homepage) */ header.nav{ position:sticky;top:0;z-index:50; background:rgba(13,31,51,.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.07); } .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;} .logo{display:flex;align-items:center;gap:12px;color:#fff;} .logo .mark{font-family:'Fraunces',serif;font-weight:600;font-size:22px;letter-spacing:.04em;color:var(--gold-soft);} .logo .full{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);} nav.links{display:flex;gap:34px;align-items:center;} nav.links a{color:rgba(255,255,255,.78);font-size:14px;font-weight:400;transition:color .2s;} nav.links a:hover{color:var(--gold-soft);} .btn{ display:inline-block;font-weight:500;font-size:14px;letter-spacing:.02em; padding:12px 26px;border-radius:2px;transition:all .22s ease;cursor:pointer;border:none; } .btn-gold{background:var(--gold);color:var(--navy);} .btn-gold:hover{background:var(--gold-soft);transform:translateY(-1px);} .btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent;} .btn-ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft);} .btn-navy{background:var(--navy);color:#fff;} .btn-navy:hover{background:var(--gold);color:var(--navy);} @media(max-width:820px){nav.links{display:none;}} /* PAGE HERO */ .page-hero{ background: radial-gradient(ellipse at 78% 0%, rgba(201,162,75,.15), transparent 55%), linear-gradient(165deg,var(--navy) 0%, var(--navy-2) 70%, #0a1826 100%); color:#fff; } .page-hero .wrap{padding-top:74px;padding-bottom:64px;} .page-hero .crumbs{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:22px;letter-spacing:.02em;} .page-hero .crumbs a{color:rgba(255,255,255,.78);} .page-hero .crumbs a:hover{color:var(--gold-soft);} .page-hero h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.01em;margin-bottom:16px;max-width:780px;} .page-hero p.lead{font-size:18px;color:rgba(255,255,255,.82);max-width:640px;font-weight:300;} .page-hero .meta-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 18px; font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.6);} .page-hero .meta-row .pill{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 14px;} /* ARTICLE BODY */ .article{padding:64px 0 40px;} .article .wrap{max-width:760px;} .article h2{font-size:clamp(24px,3.4vw,32px);margin:46px 0 14px;color:var(--ink);} .article h3{font-size:21px;margin:30px 0 10px;color:var(--navy-2);} .article p{font-size:17px;color:#2c3a47;margin-bottom:18px;} .article ul,.article ol{margin:0 0 20px;padding-left:24px;} .article li{font-size:17px;color:#2c3a47;margin:8px 0;} .article li::marker{color:var(--gold);} .article strong{color:var(--navy-2);font-weight:600;} .article a.inline{color:var(--navy-3);font-weight:600;border-bottom:1px solid var(--line);} .article a.inline:hover{color:var(--gold);} .article .lede{font-size:19px;color:var(--muted);font-style:italic;font-family:'Fraunces',serif; border-left:2px solid var(--gold);padding-left:20px;margin:0 0 36px;} /* CALLOUT / KEY TAKEAWAYS */ .callout{ background:var(--cream);border:1px solid var(--line);border-radius:10px; padding:26px 30px;margin:34px 0; } .callout h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;} .callout ul{margin:0;padding-left:20px;} .callout li{font-size:15.5px;margin:7px 0;color:var(--navy-2);} /* NEXT-STEP / CTA STRIP inside article */ .next-step{ margin:48px 0 8px;background:linear-gradient(135deg,var(--navy) 0%, var(--navy-3) 100%); color:#fff;border-radius:12px;padding:34px 36px; } .next-step h3{font-size:23px;color:#fff;margin-bottom:10px;} .next-step p{color:rgba(255,255,255,.82);font-size:15.5px;margin-bottom:20px;} .next-step .row{display:flex;gap:14px;flex-wrap:wrap;} /* GUIDE HUB GRID */ .hub{padding:60px 0 30px;} .hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} @media(max-width:760px){.hub-grid{grid-template-columns:1fr;}} .guide-card{ background:#fff;border:1px solid #ece6da;border-radius:8px;padding:32px 30px; display:flex;flex-direction:column;gap:12px;transition:transform .25s ease,box-shadow .25s ease; } .guide-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(13,31,51,.4);} .guide-card .kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;} .guide-card h3{font-size:22px;} .guide-card p{color:var(--muted);font-size:15px;flex:1;} .guide-card .read{font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--navy-3);} .guide-card:hover .read{color:var(--gold);} /* FOOTER (matches homepage) */ footer{background:var(--navy);color:#fff;padding:60px 0 34px;margin-top:40px;} .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1);} .foot-brand .mark{font-family:'Fraunces',serif;font-size:26px;color:var(--gold-soft);letter-spacing:.04em;} .foot-brand p{color:rgba(255,255,255,.6);font-size:14px;max-width:330px;margin-top:12px;font-weight:300;} .foot-col h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;} .foot-col a,.foot-col span{display:block;color:rgba(255,255,255,.72);font-size:14px;margin-bottom:10px;} .foot-col a:hover{color:var(--gold-soft);} .foot-bottom{padding-top:26px;font-size:13px;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}