/* ============================================================================
   dayvu.us — inner pages (terms, privacy, contact, the three trade pages).
   The homepage keeps its CSS inline; this file carries the same tokens and the
   same furniture for every page that is not the front door, so one edit moves
   all of them. Tokens are copied verbatim from index.html: two greens, one hue
   family (170.8deg). Bright seafoam is valid ON THE DARK BAND ONLY.
   ============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#03080a; --cloud:#fcfcfe;
  --accent:#4FC4B2; --accent-deep:#46AD9D; --accent-ink:#2C6159;

  --dbg:hsl(224 7% 4%); --dcard:hsl(240 10% 5.5%);
  --dfg:hsl(206 6% 88%); --dmuted:rgba(252,252,254,.72); --dfaint:rgba(252,252,254,.60);
  --dborder:hsl(240 4.7% 24%);

  --lmuted:rgba(3,8,10,.68); --lfaint:rgba(3,8,10,.58); --lborder:rgba(3,8,10,.10);

  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:8px; --r-card:14px;
  --wmark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20869%20769%27%3E%3Cg%20transform%3D%27translate%28-33.0%20757.0%29%20scale%281%20-1%29%27%3E%3Cpath%20d%3D%27M312.0%20-12Q232.0%20-12%20169.0%2026.0Q106.0%2064%2069.5%20129.0Q33.0%20194%2033.0%20273Q33.0%20353%2070.0%20417.5Q107.0%20482%20170.0%20520.0Q233.0%20558%20311.0%20558Q371.0%20558%20417.5%20535.5Q464.0%20513%20491.0%20472L468.0%20442V757H618.0V0H478.0V100L492.0%2069Q464.0%2029%20416.0%208.5Q368.0%20-12%20312.0%20-12ZM330.0%20123Q371.0%20123%20402.0%20142.0Q433.0%20161%20450.5%20195.0Q468.0%20229%20468.0%20273Q468.0%20317%20450.5%20351.0Q433.0%20385%20402.0%20404.0Q371.0%20423%20330.0%20423Q289.0%20423%20256.5%20403.5Q224.0%20384%20206.0%20350.5Q188.0%20317%20188.0%20273Q188.0%20229%20206.0%20195.0Q224.0%20161%20256.5%20142.0Q289.0%20123%20330.0%20123Z%27%20fill%3D%27%234FC4B2%27%20fill-opacity%3D%27.06%27%2F%3E%3Cpath%20d%3D%27M752.0%200V150H902.0V0Z%27%20fill%3D%27%234FC4B2%27%20fill-opacity%3D%27.06%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:450;font-size:16px;line-height:1.55;background:var(--ink);color:var(--dfg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px}
.mono{font-family:var(--mono);font-weight:400}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r);
     font-family:var(--sans);font-weight:650;font-size:14.5px;letter-spacing:-.01em;line-height:1;
     padding:12px 20px;text-decoration:none;border:1px solid transparent;cursor:pointer;
     transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.btn:active{transform:translateY(1px)}
.btn-lg{font-size:15.5px;padding:15px 26px}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--accent-deep)}
.btn-ghost{background:transparent;border-color:var(--dborder);color:var(--dfg)}
.btn-ghost:hover{border-color:rgba(79,196,178,.55);color:var(--accent)}

/* ---------- shared section furniture ---------- */
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:20px}
h1{font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-.036em;font-weight:800;color:var(--cloud);max-width:20ch}
h2{font-size:clamp(26px,3.1vw,36px);line-height:1.12;letter-spacing:-.032em;font-weight:800}
h3{font-size:15.5px;font-weight:700;letter-spacing:-.014em;line-height:1.35}
.lede{margin-top:18px;font-size:17px;line-height:1.62;color:var(--dmuted);max-width:62ch}

/* ============================ DARK BAND ============================ */
.dark{background:var(--dbg);color:var(--dfg)}
header{position:sticky;top:0;z-index:50;background:rgba(3,8,10,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--dborder)}
.nav{display:flex;align-items:center;gap:32px;height:66px}
.brand{display:inline-flex;align-items:baseline;gap:9px;font-weight:800;font-size:19.5px;letter-spacing:-.035em;color:var(--cloud);text-decoration:none}
.brand em{font-style:normal;color:var(--accent)}
.brand .mark{display:inline-flex;align-items:baseline;font-size:23px;line-height:1;letter-spacing:-.05em;text-shadow:0 0 14px rgba(79,196,178,.55)}
.brand .mark i{font-style:normal;color:var(--accent)}
.navlinks{display:flex;gap:28px;margin-left:auto}
.navlinks a{color:var(--dmuted);text-decoration:none;font-size:14.5px;transition:color .16s}
.navlinks a:hover{color:var(--dfg)}
.nav .btn-portal{padding:8px 15px;font-size:13.5px}
.navlinks a.portal-link{display:none}
.navtoggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--dborder);border-radius:var(--r);
           color:var(--dfg);padding:8px 11px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;cursor:pointer}

/* the page head: every inner page opens the same way, so a visitor who lands
   deep always knows what page they are on and how to get back to the office. */
.pagehead{padding:72px 0 64px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
         letter-spacing:.14em;text-transform:uppercase;color:var(--dfaint);margin-bottom:26px}
.dot{width:6px;height:6px;border-radius:99px;background:var(--accent);box-shadow:0 0 0 3px rgba(79,196,178,.16);flex:0 0 6px}
.ctas{display:flex;align-items:center;gap:12px;margin-top:34px;flex-wrap:wrap}
.fine{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--dfaint);letter-spacing:.02em;max-width:78ch;line-height:1.7}
.fine a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* the running-menu panel: the trade pages show a day the way the hero panel does,
   so the visitor sees the same object on every page */
.panel{margin-top:56px;border:1px solid var(--dborder);border-radius:var(--r-card);background:var(--dcard);overflow:hidden}
.panel-top{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--dborder)}
.panel-top .mono{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dfaint)}
.live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
      letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.panel-body{padding:22px 20px}
.msg{display:flex;gap:11px;margin-bottom:14px;font-size:14.5px;line-height:1.5}
.msg:last-child{margin-bottom:0}
.who{font-family:var(--mono);font-size:11px;color:var(--dfaint);padding-top:3px;min-width:36px;letter-spacing:.06em}
.msg p{color:var(--dfg)}

/* ============================ LIGHT BAND ============================ */
.light{background:var(--cloud);color:var(--ink)}
.sect{padding:72px 0}
.sect + .sect{border-top:1px solid var(--lborder)}
.sect .lede{color:var(--lmuted)}
.prose{margin-top:24px;max-width:74ch}
.prose p{font-size:15px;line-height:1.72;color:var(--lmuted);margin-top:16px}
.prose p:first-child{margin-top:0}
.prose ol,.prose ul{margin-top:16px;padding-left:20px}
.prose li{font-size:15px;line-height:1.7;color:var(--lmuted);margin-top:9px}
.prose b,.prose strong{color:var(--ink);font-weight:650}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}
.prose h3{margin-top:30px;color:var(--ink)}
.prose code{font-family:var(--mono);font-size:13px;color:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px}
.steps.two{grid-template-columns:repeat(2,1fr)}
.step h3 .n{font-family:var(--mono);font-size:11.5px;color:var(--accent-ink);margin-right:9px;font-weight:400}
.step p{margin-top:9px;font-size:14.5px;line-height:1.65;color:var(--lmuted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 36px;margin-top:44px}
.card{border-top:2px solid var(--accent-ink);padding-top:16px}
.card .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:9px}
.card h3{margin-bottom:8px}
.card p{font-size:14px;line-height:1.6;color:var(--lmuted)}
.anchor{margin-top:26px;font-size:15px;line-height:1.65;color:var(--lmuted);max-width:76ch}
.anchor b{color:var(--ink);font-weight:650}
.anchor a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.anchor a:hover{color:var(--ink)}

/* The one job to start with: the wedge from the plan - one named chore with a day
   attached, never the catalogue. Same block as the front page's #tools. */
.firstjob{margin-top:34px;border-left:2px solid var(--accent-ink);padding:2px 0 2px 20px;max-width:74ch}
.firstjob .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
             color:var(--accent-ink);margin-bottom:9px}
.firstjob p{font-size:15.5px;line-height:1.66;color:var(--lmuted)}
.firstjob b{color:var(--ink);font-weight:650}

/* the honesty block: what this service does not do, said on the page rather
   than left for the first call. One card, dark rule, no apology. */
.scope{margin-top:32px;border-left:2px solid var(--accent-ink);padding:4px 0 4px 20px;max-width:74ch}
.scope p{font-size:15px;line-height:1.72;color:var(--lmuted);margin-top:12px}
.scope p:first-child{margin-top:0}
.scope b{color:var(--ink);font-weight:650}

/* definition-list rows: used on the legal pages for dates, fees, contacts */
.rows{margin-top:34px;border-top:1px solid var(--lborder);max-width:74ch}
.row{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--lborder);font-size:15px}
.row dt{color:var(--lfaint);flex:0 0 auto}
.row dd{color:var(--ink);text-align:right;font-weight:450}
.row dd a{color:var(--accent-ink)}

/* ---------- closing band ---------- */
.cta-band{background-color:var(--dbg);border-top:1px solid var(--dborder);
          background-image:var(--wmark);background-repeat:no-repeat;
          background-position:left -4vw bottom 2vh;background-size:min(27vw,320px) auto}
.cta-inner{padding:76px 0;max-width:74ch}
.cta-band h2{color:var(--cloud)}
.cta-band .lede{color:var(--dmuted)}
.cta-band .kicker{color:var(--accent)}
.cta-band .fine a{color:var(--accent)}
.bookline{margin-top:30px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dfaint)}

/* ---------- footer ---------- */
footer{background:var(--dbg);border-top:1px solid var(--dborder);padding:36px 0 44px}
.foot{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot .brand{font-size:17px}
.foot .brand .mark{font-size:24px}
.foot-links{display:flex;gap:12px 22px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.foot-links a{color:var(--dfaint);text-decoration:none;font-size:13.5px}
.foot-links a:hover{color:var(--dfg)}
.foot-lanes{display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;margin-top:22px;
            font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dfaint)}
.foot-lanes .lbl{color:var(--dfg);font-family:var(--sans);font-weight:650;font-size:13px;letter-spacing:-.01em}
.foot-lanes a{color:var(--dfaint);text-decoration:none}
.foot-lanes a:hover{color:var(--accent)}
.foot .legal{width:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:rgba(252,252,254,.50);margin-top:14px;line-height:1.8}
.foot .legal a{color:rgba(252,252,254,.72)}

@media(max-width:960px){
  .steps,.cards,.steps.two{grid-template-columns:1fr;gap:30px}
  .cta-band{background-image:none}
  .row{flex-direction:column;gap:4px}
  .row dd{text-align:left}
}
@media(max-width:760px){
  .wrap{padding:0 20px}
  .navtoggle{display:block}
  .navlinks{position:absolute;top:66px;left:0;right:0;background:var(--dbg);border-bottom:1px solid var(--dborder);
            flex-direction:column;gap:0;padding:8px 0;display:none}
  .navlinks[data-open="true"]{display:flex}
  .navlinks a{padding:13px 22px;font-size:15px}
  .nav .btn-accent{display:none}
  .nav .btn-portal{display:none}
  .navlinks a.portal-link{display:block}
  .pagehead{padding:52px 0 48px}
  .sect{padding:56px 0}
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-links{margin-left:0;justify-content:flex-start;gap:10px 18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}