/* ResizeIG shared stylesheet — Studio Paper design system (matches index.html) */
:root{
  --paper:#F5F3ED; --surface:#FFFFFF; --ink:#1F1D18; --muted:#6E695F;
  --line:#E4E0D6; --accent:#1F7A57; --accent-strong:#155B40; --accent-soft:#E3F0E9;
  --danger:#B23B2E;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(31,29,24,.05); --sh-md:0 6px 24px rgba(31,29,24,.07); --sh-lg:0 12px 40px rgba(31,29,24,.10);
  --t-display:clamp(2.4rem,5vw,3.25rem); --t-h2:1.75rem; --t-h3:1.25rem;
  --t-body:1rem; --t-small:.875rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body); font-size:var(--t-body); line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased}
img,svg,canvas{display:block; max-width:100%}
a{color:var(--accent-strong); text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm)}
.wrap{max-width:1180px; margin:0 auto; padding:0 var(--s5)}

/* Header + nav */
.site-header{border-bottom:1px solid var(--line); background:rgba(245,243,237,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:var(--s3); font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; color:var(--ink)}
.brand .mark{width:30px; height:30px; border-radius:9px; background:var(--accent); display:grid; place-items:center}
.brand .mark svg{width:18px; height:18px}
.site-nav{display:flex; align-items:center; gap:var(--s5)}
.site-nav a{font-size:var(--t-small); font-weight:600; color:var(--muted)}
.site-nav a:hover{color:var(--accent-strong); text-decoration:none}

/* Buttons */
.btn-primary{display:inline-flex; align-items:center; gap:var(--s3); background:var(--accent); color:#fff; font-weight:600; font-size:1rem; border:none; border-radius:var(--r-sm); padding:15px 26px; box-shadow:var(--sh-sm); transition:background .2s ease, transform .2s ease}
.btn-primary:hover{background:var(--accent-strong)}
.btn-primary:active{transform:translateY(1px)}
.btn-block{width:100%; justify-content:center; margin-top:var(--s2)}

/* Page layout */
.page{padding:var(--s9) 0 var(--s8)}
.page h1{font-family:var(--font-display); font-size:var(--t-display); line-height:1.05; font-weight:700; letter-spacing:-.02em; margin-bottom:var(--s4)}
.lede{font-size:1.15rem; color:var(--muted); max-width:54ch; margin-bottom:var(--s7)}
.section-title{font-family:var(--font-display); font-size:var(--t-h2); font-weight:600; margin:var(--s7) 0 var(--s5)}

/* Prose (about / privacy / contact / terms) */
.prose{max-width:760px}
.prose h2{font-family:var(--font-display); font-size:var(--t-h3); font-weight:600; margin:var(--s6) 0 var(--s2)}
.prose p{color:var(--muted); margin-bottom:var(--s4)}
.prose ul{color:var(--muted); margin:0 0 var(--s4) var(--s5)}
.prose li{margin:var(--s2) 0}
.note{margin-top:var(--s7); font-size:var(--t-small); color:var(--muted); border-top:1px solid var(--line); padding-top:var(--s4)}

/* Pricing plans */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); max-width:780px}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--sh-sm)}
.plan.pro{border-color:var(--accent); box-shadow:0 8px 30px rgba(31,122,87,.12)}
.plan h2{font-family:var(--font-display); font-size:var(--t-h3); font-weight:600; margin-bottom:var(--s2)}
.price{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--ink); margin:var(--s2) 0 var(--s4)}
.price span{font-size:var(--t-small); font-weight:500; color:var(--muted)}
.plan ul{list-style:none; margin:0 0 var(--s5); padding:0}
.plan li{color:var(--ink); font-size:var(--t-small); margin:var(--s3) 0; padding-left:var(--s5); position:relative}
.plan li::before{content:"\2713"; position:absolute; left:0; color:var(--accent); font-weight:700}
.plan-note{margin-top:var(--s3); font-size:var(--t-small); color:var(--muted); text-align:center}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:var(--s7) 0; background:var(--surface)}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:center; color:var(--muted); font-size:var(--t-small)}
.site-footer a{color:var(--muted)}
.foot-nav{display:flex; gap:var(--s5); flex-wrap:wrap}
.foot-nav a:hover{color:var(--accent-strong); text-decoration:none}

/* Responsive */
@media (max-width:760px){ .plans{grid-template-columns:1fr} .site-nav{gap:var(--s4)} }
@media (max-width:520px){ .wrap{padding:0 var(--s4)} .page{padding:var(--s7) 0 var(--s6)} .site-nav{gap:var(--s3)} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }