/*
  Shared "equestrian field-journal" design system for HorseNormal marketing
  sub-pages (privacy / terms / delete-account / refunds).

  This is the same design language as index.html (parchment background,
  Fraunces + Hanken Grotesk, forest/chestnut/brass palette, sticky nav,
  footer). index.html keeps its own inline copy of these rules and is not
  touched — this file exists so the legal pages can share one source
  instead of re-pasting the whole block four times.
*/
:root{
  --paper:#f3ece0; --paper-2:#ece2d1; --card:#fbf7ee;
  --ink:#211f1a; --ink-soft:#5b554a; --ink-faint:#8c8472;
  --forest:#1e3b2f; --forest-deep:#15291f; --chestnut:#9a3b22; --chestnut-deep:#7a2c17;
  --brass:#b0873c; --brass-light:#caa45a;
  --rule:rgba(33,31,26,.13); --rule-strong:rgba(33,31,26,.22);
  --serif:"Fraunces",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"Spline Sans Mono",monospace;
  --shadow:0 1px 0 rgba(33,31,26,.04),0 18px 40px -24px rgba(21,41,31,.5);
  --maxw:1600px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(176,135,60,.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  background-attachment:fixed,scroll;
}
/* paper grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,4vw,72px); position:relative; z-index:2}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono); letter-spacing:.04em}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--chestnut); font-weight:500}
.serif{font-family:var(--serif)}

/* ---- horseshoe mark ---- */
.shoe{display:inline-block; vertical-align:-2px}
.shoe path{fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round}
.shoe circle{fill:currentColor}

/* ---- nav ---- */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(6px);
  background:linear-gradient(var(--paper),rgba(243,236,224,.82)); border-bottom:1px solid var(--rule)}
.nav-in{display:flex; align-items:center; gap:18px; height:70px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.28rem; letter-spacing:-.01em; color:var(--forest)}
.brand .shoe{color:var(--chestnut)}
.nav-links{display:flex; gap:30px; margin-left:auto; align-items:center}
.nav-links a.navlink{font-size:.92rem; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0}
.nav-links a.navlink::after{content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px; background:var(--brass); transition:width .28s ease}
.nav-links a.navlink:hover{color:var(--ink)} .nav-links a.navlink:hover::after{width:100%}
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.92rem; padding:11px 20px; border-radius:2px; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s}
.btn .ar{transition:transform .25s ease}
.btn:hover .ar{transform:translateX(4px)}
.btn-solid{background:var(--forest); color:#f4efe3; box-shadow:0 10px 20px -12px rgba(30,59,47,.9)}
.btn-solid:hover{background:var(--forest-deep); transform:translateY(-2px)}
.btn-ghost{border-color:var(--rule-strong); color:var(--ink)}
.btn-ghost:hover{border-color:var(--forest); color:var(--forest)}
.btn-brass{background:linear-gradient(180deg,var(--brass-light),var(--brass)); color:#2a1e08; box-shadow:0 10px 22px -12px rgba(176,135,60,.95)}
.btn-brass:hover{transform:translateY(-2px)}
.btn-white{background:#f4efe3; color:var(--forest)} .btn-white:hover{transform:translateY(-2px)}
.nav .btn{padding:9px 16px}
@media(max-width:860px){.nav-links a.navlink, .nav .btn-ghost{display:none}}

/* ---- section frame (shared heading style) ---- */
section{position:relative}
.sec-head{margin-bottom:54px; max-width:46rem}
.sec-num{font-family:var(--mono); font-size:.78rem; color:var(--brass); letter-spacing:.2em; display:inline-flex; gap:10px; align-items:center; margin-bottom:16px}
.sec-num::before{content:""; width:30px; height:1.5px; background:var(--brass)}
.sec-head h2{font-family:var(--serif); font-weight:460; font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.02; letter-spacing:-.015em; color:var(--ink)}
.sec-head h2 em{font-style:italic; color:var(--forest)}
.sec-head p{margin-top:16px; font-size:1.08rem; color:var(--ink-soft)}

/* ---- footer ---- */
footer{background:var(--paper); border-top:1px solid var(--rule); padding:60px 0 40px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px}
.foot-brand{font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--forest); display:flex; gap:10px; align-items:center}
.foot-brand .shoe{color:var(--chestnut)}
.foot-tag{color:var(--ink-soft); font-size:.92rem; margin-top:10px; max-width:24em}
.foot-col h5{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px}
.foot-col a{display:block; color:var(--ink-soft); font-size:.92rem; padding:5px 0; transition:color .2s}
.foot-col a:hover{color:var(--chestnut)}
.foot-rule{height:1px; background:var(--rule); margin:38px 0 22px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-faint)}
.disclaimer{font-size:.78rem; color:var(--ink-faint); max-width:62em; margin-top:14px; line-height:1.5}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---- reveal ---- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =========================================================
   Legal / prose pages (privacy, terms, delete-account, refunds)
   ========================================================= */
.legal-hero{padding:56px 0 40px}
.legal-hero .back-home{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); margin-bottom:22px}
.legal-hero .back-home:hover{color:var(--forest)}
.legal-hero .back-home svg{transition:transform .2s ease}
.legal-hero .back-home:hover svg{transform:translateX(-3px)}
.legal-hero h1{font-family:var(--serif); font-weight:480; font-size:clamp(2.2rem,4.8vw,3.4rem); line-height:1.04; letter-spacing:-.015em; color:var(--ink); margin:14px 0 12px}
.legal-hero p.lede{font-size:1.08rem; color:var(--ink-soft); max-width:38em}

.legal-body{padding:8px 0 100px}
.legal-card{background:var(--card); border:1px solid var(--rule-strong); border-radius:3px; box-shadow:var(--shadow); padding:clamp(28px,4vw,56px) clamp(24px,5vw,68px) clamp(40px,5vw,64px); max-width:52rem; margin:0 auto; position:relative}
.legal-card::after{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:repeating-linear-gradient(180deg,var(--chestnut),var(--chestnut) 14px,var(--chestnut-deep) 14px,var(--chestnut-deep) 28px); border-radius:3px 0 0 3px}
.legal-meta{font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); margin-bottom:26px; padding-bottom:20px; border-bottom:1.5px solid var(--rule-strong)}
.legal-card h2{font-family:var(--serif); font-weight:600; font-size:1.44rem; color:var(--forest); margin:34px 0 12px; letter-spacing:-.01em}
.legal-card h2:first-of-type{margin-top:0}
.legal-card p{color:var(--ink-soft); font-size:1rem; margin-bottom:14px}
.legal-card ul,.legal-card ol{color:var(--ink-soft); font-size:1rem; margin:0 0 16px 1.35em}
.legal-card li{margin-bottom:9px}
.legal-card strong{color:var(--ink); font-weight:600}
.legal-card em{color:var(--forest); font-style:italic}
.legal-card a{color:var(--chestnut); text-decoration:underline; text-decoration-color:rgba(154,59,34,.35); text-underline-offset:2px}
.legal-card a:hover{text-decoration-color:var(--chestnut)}
.legal-callout{background:rgba(176,135,60,.12); border:1px solid rgba(176,135,60,.4); border-radius:3px; padding:24px clamp(18px,3vw,30px); margin:30px 0}
.legal-callout h2{margin-top:0}
.legal-callout p:last-child{margin-bottom:0}
.legal-steps{list-style:none; margin:0 0 16px; counter-reset:step}
.legal-steps li{position:relative; padding-left:2.1em; counter-increment:step}
.legal-steps li::before{content:counter(step); position:absolute; left:0; top:.05em; font-family:var(--mono); font-size:.76rem; font-weight:600; color:var(--brass); border:1.5px solid var(--brass); border-radius:50%; width:1.5em; height:1.5em; display:flex; align-items:center; justify-content:center}