/* ============================================================================
   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)}

/* ---------- team roster cards ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 36px;margin-top:44px}
.team-card{position:relative;min-width:0;border:1px solid var(--lborder);border-radius:var(--r-card);background:#fff;padding:20px;color:var(--ink);transition:border-color .16s ease,transform .16s ease}
.team-card:hover{border-color:rgba(79,196,178,.55);transform:translateY(-2px)}
.team-card h3{margin-top:1px;margin-bottom:5px;color:var(--ink)}
.team-card p{font-size:14px;line-height:1.6;color:var(--lmuted)}
.team-rule{border-top:1px solid var(--lborder);margin:18px 0 15px}
.team-title{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);line-height:1.5}
.team-title b{display:inline-block;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;border:1px solid var(--lborder);padding:1px 6px;border-radius:999px;color:var(--accent-ink);font-weight:400;vertical-align:2px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.team-grid{grid-template-columns:1fr;gap:24px}}

/* ---------- 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}
  /* A touch target is not a phone-only concern: a 768px tablet is still a thumb. */
  .btn{min-height:46px}
  .strip a,.foot-links a,.foot-lanes a{padding:7px 0}
}
/* Phone: the same rules the front door's media block carries, so a visitor who lands
   on a lane page gets the same bar, the same tap sizes and the same leaded fine print.
   The drawer hangs off the bar's own height (`top:100%`) instead of the hard-coded 66px
   that had to be re-typed whenever the bar changed, and the MENU button is a 44px target. */
@media(max-width:760px){
  .wrap{padding:0 20px}
  .navtoggle{display:flex;align-items:center;padding:0 14px;min-height:44px}
  .navlinks{position:absolute;top:100%;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:14px 22px;font-size:15px}
  .nav .btn-accent{display:none}
  .nav .btn-portal{display:none}
  .navlinks a.portal-link{display:block}
  h1{max-width:none;line-height:1.08}
  .pagehead{padding:52px 0 44px}
  .lede{font-size:16.5px}
  .fine{font-size:11.5px;line-height:1.9;letter-spacing:.03em}
  .ctas{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px}
  .ctas .btn{width:100%}
  .btn{min-height:46px}
  .btn-lg{padding:16px 22px}
  .panel{margin-top:32px}
  .panel-top{padding:11px 16px;flex-wrap:wrap;row-gap:5px}
  .msg{font-size:14px}
  .sect{padding:52px 0}
  .steps,.cards{margin-top:30px}
  .firstjob,.scope{margin-top:24px;padding-left:16px}
  .cta-inner{padding:52px 0}
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-links{margin-left:0;justify-content:flex-start;gap:6px 18px}
  .foot-links a{padding:8px 0}
  .foot-lanes{gap:8px 14px}
  .foot-lanes a{padding:6px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}