/* Shared chrome for the secondary Dooralysis pages (about, contact).
   index.html keeps its own inline styles — it was working, and duplicating a
   little CSS is cheaper than destabilising the homepage. Anything here should
   read the variables from brand.css rather than hard-coding hex values. */

*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0}
a{text-decoration:none;color:inherit}

/* ---- header ---- */
header{padding:14px 24px;border-bottom:1px solid rgba(234,246,250,.14);background:var(--ink);color:var(--on-ink)}
header .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;height:30px}
.logo img{display:block;height:30px;width:auto}
.product-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.product-nav a,.product-nav span{font-size:13px;color:var(--ink-soft)}
.product-nav a:hover{color:var(--on-ink)}
.product-nav .active{color:var(--on-ink);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--green)}
.account-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-soft)}

/* Site links (About, Contact) sit with Sign in, separated from the product nav —
   they are about the company, not tools you use. */
.header-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.site-nav a,.site-nav span{font-size:13px;color:var(--ink-soft)}
.site-nav a:hover{color:var(--on-ink)}
.site-nav .active{color:var(--on-ink);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--green)}
.header-right .account-nav{padding-left:16px;border-left:1px solid rgba(234,246,250,.18)}
@media(max-width:640px){.header-right .account-nav{padding-left:0;border-left:0}}
.linkbtn{border:0;background:transparent;color:var(--green);font:inherit;font-weight:700;cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}

/* ---- page body ---- */
.page-hero{background:var(--ink);color:var(--on-ink);padding:64px 24px 58px}
.page-hero .in{max-width:1080px;margin:0 auto}
.page-hero h1{margin:0 0 14px;max-width:820px}
.page-hero p{font-size:18px;color:var(--ink-soft);margin:0;max-width:760px}

main{background:var(--bg);padding:46px 24px 64px}
main .in{max-width:760px;margin:0 auto}
main h2{color:var(--ink);margin:34px 0 12px}
main p{color:var(--body);font-size:16px;line-height:1.68;margin:0 0 18px}
main p strong{color:var(--ink)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}

/* ---- forms ---- */
.form-grid{display:grid;gap:14px;margin-top:20px}
.form-grid label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.form-grid input,.form-grid textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15px;background:var(--surface);color:var(--ink)}
.form-grid textarea{min-height:150px;resize:vertical;line-height:1.6}
.form-grid input:focus,.form-grid textarea:focus{outline:none;border-color:var(--green-deep);box-shadow:0 0 0 3px rgba(45,212,167,.22)}
.form-grid button{border:0;border-radius:9px;background:var(--green-deep);color:var(--surface);font:inherit;font-weight:700;font-size:15px;padding:12px 18px;cursor:pointer;justify-self:start}
.form-grid button:disabled{opacity:.6;cursor:default}
.form-msg{font-size:14px;font-weight:700;margin:14px 0 0}
.form-msg.ok{color:var(--green-deep)}
.form-msg.err{color:rgb(180,35,24)}
.form-small{font-size:13px;color:var(--body);margin:12px 0 0}

/* ---- subscribe strip (every page) ---- */
.subscribe{background:var(--ink);color:var(--on-ink);padding:34px 24px}
.subscribe .in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:18px 26px;align-items:center}
.sub-copy strong{display:block;font-size:16px;color:var(--on-ink);margin-bottom:4px}
.sub-copy span{font-size:13.5px;color:var(--ink-soft)}
.sub-form{display:flex;gap:10px;flex-wrap:wrap}
.sub-form input{border:1px solid rgba(234,246,250,.26);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;padding:11px 12px;min-width:250px}
.sub-form input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(45,212,167,.22)}
.sub-form button{border:0;border-radius:9px;background:var(--green);color:var(--ink);font:inherit;font-weight:700;padding:11px 18px;cursor:pointer;white-space:nowrap}
.sub-form button:disabled{opacity:.65;cursor:default}
.sub-msg{grid-column:1/-1;font-size:13.5px;font-weight:700;margin:0;color:var(--ink-soft)}
.sub-msg.ok{color:var(--green-tint)}
.sub-msg.err{color:var(--amber-tint)}

footer{border-top:1px solid var(--line);background:var(--surface);color:var(--body);font-size:13px;text-align:center;padding:22px}
footer a{color:var(--green-deep);font-weight:700}

@media(max-width:640px){
  header{padding:14px 18px}
  .product-nav{gap:12px}
  .page-hero{padding:48px 18px 44px}
  main{padding:34px 18px 52px}
  .subscribe{padding:28px 18px}
  .subscribe .in{grid-template-columns:1fr}
  .sub-form input{min-width:0;flex:1}
}