/* ============================================================
   dōse.one — About / Contact / FAQ content pages.
   All rules scoped under .dpage so they never bleed into the
   theme header/footer or collide with site.css. Design vars +
   hex values are the source files' own, for an exact match.
   ============================================================ */
.dpage{
  --navy-deep:#0E1B3D; --navy:#1B2A5B; --blue:#2A50C8; --blue-soft:#3B63C4; --blue-pale:#8FB0F5;
  --ink:#233252; --body:#44536F; --muted:#5A6B8C; --faint:#7C8AAB; --ghost:#9AA6BF;
  --line:#E6EBF4; --line-soft:#F0F3F9; --line-input:#D9E1F0; --bg-soft:#F5F8FC; --gold:#B98A2F; --green:#1F7A3D;
  --serif:'Source Serif 4',Georgia,serif; --sans:'Public Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
  max-width:1440px;margin:0 auto;background:#fff;color:var(--ink);font-family:var(--sans)
}
.dpage *{box-sizing:border-box}
.dpage a{color:var(--blue);text-decoration:none}
.dpage a:hover{color:var(--navy)}
.dpage .kicker{font:600 11px var(--mono);letter-spacing:.16em;color:var(--blue);text-transform:uppercase}

/* ---------------- About ---------------- */
.dpage .about-hero{background:var(--navy-deep);padding:38px 24px 34px}
.dpage .about-hero .kicker{color:var(--blue-pale)}
.dpage .about-hero h1{margin:12px 0 14px;font:700 34px/1.15 var(--serif);color:#fff;letter-spacing:-.015em;text-wrap:pretty}
.dpage .about-hero p{margin:0;font:400 14px/1.65 var(--sans);color:#B7C4E2;max-width:520px}
.dpage .about-hero .hero-media{display:none}
.dpage .img-placeholder{background:var(--bg-soft);border:1px dashed var(--ghost);display:grid;place-items:center;font:600 10px var(--mono);letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.dpage .about-photo{width:100%;height:240px}
.dpage .story{padding:30px 24px 6px}
.dpage .story p{margin:0 0 16px;font:400 14.5px/1.7 var(--sans);color:var(--body)}
.dpage .principles{padding:16px 20px 30px}
.dpage .principle{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);background:transparent;color:inherit}
.dpage .principle:last-child{border-bottom:none}
.dpage .principle .num{font:600 11px var(--mono);color:var(--gold);flex:none;padding-top:2px}
.dpage .principle h3{margin:0;font:700 15px var(--sans);color:var(--navy)}
.dpage .principle p{margin:3px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.dpage .stats{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dpage .stat{display:block;padding:18px 8px;text-align:center;border-right:1px solid var(--line)}
.dpage .stat:last-child{border-right:none}
.dpage .stat + .stat{border-left:none;padding-left:8px}
.dpage .stat .val{font:700 20px var(--serif);color:var(--navy)}
.dpage .stat .lbl{font:500 8.5px var(--mono);letter-spacing:.08em;color:var(--faint);margin-top:3px;text-transform:uppercase}
.dpage .cta-row{padding:26px 24px 30px;border-top:1px solid var(--line);display:flex;justify-content:center}
.dpage .cta-row .btn-primary{display:block;width:100%;background:var(--navy);color:#fff;border:none;border-radius:99px;padding:16px 0;text-align:center;font:600 16px var(--sans);cursor:pointer}
.dpage .cta-row .btn-primary:hover{background:var(--navy-deep);color:#fff}

/* ---------------- Contact ---------------- */
.dpage .contact-wrap{padding:34px 20px 30px}
.dpage .contact-intro h1{margin:12px 0 10px;font:700 34px/1.15 var(--serif);color:var(--navy);letter-spacing:-.015em}
.dpage .contact-intro p{margin:0 0 20px;font:400 14px/1.6 var(--sans);color:var(--body)}
.dpage .info-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dpage .info-card{border:1px solid var(--line);border-radius:14px;padding:16px}
.dpage .info-card .lbl{font:600 9.5px var(--mono);letter-spacing:.12em;color:var(--faint);margin-bottom:6px;text-transform:uppercase}
.dpage .info-card .val{font:600 13.5px var(--sans);color:var(--navy)}
.dpage .track-card{margin-top:14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.dpage .track-card h3{margin:0;font:700 15px var(--serif);color:var(--navy)}
.dpage .track-card p{margin:2px 0 0;font:400 13px var(--sans);color:var(--muted)}
.dpage .btn-outline{flex:none;border:1.5px solid var(--navy);color:var(--navy);background:#fff;border-radius:99px;padding:10px 20px;font:600 13px var(--sans);cursor:pointer}
.dpage .btn-outline:hover{background:var(--navy);color:#fff}
.dpage .contact-form{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.dpage .field{display:block;gap:0}
.dpage .field label{display:block;font:600 12px var(--sans);color:var(--navy);margin-bottom:6px}
.dpage .field label .opt{font-weight:400;color:var(--ghost)}
.dpage .field input,.dpage .field textarea{width:100%;border:1px solid var(--line-input);border-radius:12px;padding:14px 16px;font:400 14px var(--sans);color:var(--ink);background:#fff;outline:none}
.dpage .field input:focus,.dpage .field textarea:focus{border-color:var(--blue)}
.dpage .field textarea{min-height:96px;resize:vertical}
.dpage .field ::placeholder{color:var(--ghost)}
.dpage .contact-form .btn-primary{background:var(--navy);color:#fff;border:none;border-radius:99px;padding:16px 0;text-align:center;font:600 16px var(--sans);cursor:pointer;margin-top:6px}
.dpage .contact-form .btn-primary:hover{background:var(--navy-deep)}
.dpage .contact-form .btn-primary:disabled{opacity:.6;cursor:default}
.dpage .form-note{text-align:center;font:400 12px var(--sans);color:var(--faint)}
.dpage .form-status{display:none;border-radius:12px;padding:13px 16px;font:500 13px/1.5 var(--sans);text-align:center}
.dpage .form-status.ok{display:block;background:rgba(31,122,61,.1);color:var(--green)}
.dpage .form-status.err{display:block;background:rgba(192,57,43,.1);color:#C0392B}
.dpage .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}

/* ---------------- Legal / policy pages ---------------- */
.dpage--legal{padding:36px 20px 52px}
.dpage--legal .legal-body{max-width:820px;margin:0 auto}
.dpage--legal h1{margin:0 0 6px;font:700 32px/1.15 var(--serif);color:var(--navy);letter-spacing:-.015em}
.dpage--legal .lu{margin:0 0 26px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.dpage--legal .intro{font:400 15px/1.7 var(--sans);color:var(--body);margin:0 0 6px}
.dpage--legal h2{margin:32px 0 12px;font:700 20px/1.3 var(--serif);color:var(--navy);letter-spacing:-.01em}
.dpage--legal p{font:400 14.5px/1.7 var(--sans);color:var(--body);margin:0 0 14px}
.dpage--legal ul{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.dpage--legal li{font:400 14.5px/1.6 var(--sans);color:var(--body);padding-left:4px}
.dpage--legal li::marker{color:var(--blue-pale)}
.dpage--legal strong{color:var(--navy);font-weight:600}
.dpage--legal .contact-block{font-weight:500;color:var(--navy)}
@media (min-width:960px){
  .dpage--legal{padding:60px 24px 72px}
  .dpage--legal h1{font-size:44px;margin-bottom:8px}
  .dpage--legal .lu{margin-bottom:32px}
  .dpage--legal .intro{font-size:16px}
  .dpage--legal h2{font-size:23px;margin-top:40px}
  .dpage--legal p,.dpage--legal li{font-size:15.5px;line-height:1.72}
}

/* ---------------- FAQ ---------------- */
.dpage .faq-wrap{padding:34px 20px 26px}
.dpage .faq-head h1{margin:12px 0 16px;font:700 34px/1.15 var(--serif);color:var(--navy);letter-spacing:-.015em}
/* mobile: chips scroll horizontally if they don't fit (no wrap) */
.dpage .chips{display:flex;gap:8px;margin-bottom:22px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dpage .chips::-webkit-scrollbar{display:none}
.dpage .chip{flex:0 0 auto;white-space:nowrap;border:1px solid var(--line-input);color:var(--muted);background:#fff;border-radius:99px;padding:7px 14px;font:600 11px var(--sans);cursor:pointer}
.dpage .chip:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.dpage .chip.active{background:#192953;border-color:#192953;color:#fff}
.dpage .faq-list{display:flex;flex-direction:column;gap:10px}
.dpage .faq-item{border:1px solid var(--line);border-radius:14px;background:#fff}
.dpage .faq-item[open]{border-color:var(--blue);background:var(--bg-soft)}
.dpage .faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;cursor:pointer;font:700 14.5px var(--sans);color:var(--navy)}
.dpage .faq-item summary::-webkit-details-marker{display:none}
.dpage .faq-item summary::after{content:"+";flex:none;font:600 16px var(--sans);color:var(--ghost)}
.dpage .faq-item[open] summary::after{content:"\2212";color:var(--blue)}
.dpage .faq-item .answer{padding:0 16px 16px;font:400 13px/1.6 var(--sans);color:var(--body)}
.dpage .still-stuck{margin:28px 0 0;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.dpage .still-stuck h3{margin:0;font:700 15px var(--serif);color:var(--navy)}
.dpage .still-stuck p{margin:2px 0 0;font:400 12px var(--sans);color:var(--muted)}
.dpage .still-stuck .btn-primary{flex:none;background:var(--navy);color:#fff;border:none;border-radius:99px;padding:11px 20px;font:600 13px var(--sans);cursor:pointer;text-decoration:none}
.dpage .still-stuck .btn-primary:hover{background:var(--navy-deep);color:#fff}

/* ---------------- desktop ≥960px ---------------- */
@media (min-width:960px){
  /* About (no hero image — text spans the band at a readable width) */
  .dpage .about-hero{padding:64px 56px}
  .dpage .about-hero > div{max-width:760px}
  .dpage .about-hero h1{font-size:52px;line-height:1.1;margin:14px 0 18px}
  .dpage .about-hero p{font-size:16px;line-height:1.7}
  .dpage .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding:64px 56px;align-items:start}
  .dpage .story{padding:0}
  .dpage .story p{font-size:16.5px;line-height:1.75;margin-bottom:18px}
  .dpage .principles{padding:0}
  .dpage .principle{gap:18px;padding:18px 0}
  .dpage .principle .num{font-size:13px;padding-top:3px}
  .dpage .principle h3{font-size:17px}
  .dpage .principle p{font-size:14px;line-height:1.55;margin-top:4px}
  .dpage .stat{padding:26px 8px}
  .dpage .stat .val{font-size:30px}
  .dpage .stat .lbl{font-size:11px;letter-spacing:.1em;margin-top:5px}
  .dpage .cta-row{padding:44px 56px}
  .dpage .cta-row .btn-primary{width:auto;padding:18px 56px;font-size:17px}
  /* Contact */
  .dpage .contact-wrap{display:grid;grid-template-columns:1fr 640px;gap:88px;padding:64px 56px;align-items:start}
  .dpage .contact-intro h1{font-size:52px;line-height:1.1;margin:14px 0}
  .dpage .contact-intro p{font-size:16px;line-height:1.65;margin-bottom:32px}
  .dpage .info-cards{gap:14px;max-width:480px}
  .dpage .info-card{border-radius:16px;padding:20px}
  .dpage .info-card .lbl{font-size:10.5px;margin-bottom:8px}
  .dpage .info-card .val{font-size:15px}
  .dpage .track-card{max-width:480px}
  .dpage .contact-form{margin-top:0;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 12px 32px rgba(20,40,90,.06);gap:16px}
  .dpage .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .dpage .field input,.dpage .field textarea{padding:15px 16px;font-size:14.5px}
  .dpage .field label{font-size:13px;margin-bottom:7px}
  .dpage .field textarea{min-height:130px}
  .dpage .contact-form .btn-primary{padding:17px 0}
  /* FAQ */
  .dpage .faq-wrap{max-width:840px;margin:0 auto;padding:64px 0 44px}
  .dpage .faq-head{text-align:center}
  .dpage .faq-head h1{font-size:52px;line-height:1.1;margin:14px 0 22px}
  .dpage .chips{justify-content:center;gap:10px;margin-bottom:36px;flex-wrap:wrap;overflow-x:visible}
  .dpage .chip{padding:9px 18px;font-size:13px}
  .dpage .faq-list{gap:12px}
  .dpage .faq-item{border-radius:16px}
  .dpage .faq-item summary{padding:22px 24px;font-size:17px}
  .dpage .faq-item summary::after{font-size:18px}
  .dpage .faq-item .answer{padding:0 24px 22px;font-size:15px;line-height:1.65;max-width:700px}
  .dpage .still-stuck{border-radius:18px;padding:26px 30px}
  .dpage .still-stuck h3{font-size:19px}
  .dpage .still-stuck p{font-size:14px;margin-top:3px}
  .dpage .still-stuck .btn-primary{padding:14px 30px;font-size:15px}
}