/* Concept D: the guides, workflow, comparison, template, white-paper and privacy pages in the
   Daylight look. The build (tools/build.mjs, "Concept D: the other pages") takes each page's
   content as the main site renders it and wraps it in concept D's bar and footer, so the copy,
   tables and calculators stay exactly as published; only this sheet styles them.
   References (Mobbin, 11.2026): Harvest and Attio articles (narrow serif reading column, an
   "On this page" list beside it), Ease and Calendly resource indexes (label, serif title,
   quiet cards), Firecrawl and Notion comparison tables (hairline rows, the product column
   tinted). */

.dp{
  /* the main site's colour tokens, used in a few inline styles, mapped onto the paper palette */
  --white:var(--ink); --ink-100:var(--ink); --ink-200:var(--ink); --ink-300:var(--ink-2); --ink-400:var(--ink-3); --ink-500:var(--ink-3);
  --gold-300:#875F12; --teal:#0F6E64; --teal-300:#0F6E64; --navy-850:var(--navy); --font-mono:var(--mono); --glass-brd:var(--line);
  --gold-text:#875F12;
  display:block;padding-top:clamp(96px,11vw,128px);background:var(--paper);color:var(--ink)
}
.dp [style*="--gold)"]{color:var(--gold-text)!important}
.dp .container{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.dp .section{padding-block:clamp(40px,6vw,72px)}
.dp .section.tight{padding-block:clamp(28px,4vw,48px)}
.dp .section + .section{border-top:1px solid var(--line)}
.dp .hero-aurora,.dp .win-sheen{display:none}

/* type */
.dp h1{font:300 clamp(2.3rem,5.2vw,4rem)/1.05 var(--serif);letter-spacing:-.025em;margin:14px 0 0;max-width:22ch}
.dp h2{font:300 clamp(1.6rem,3vw,2.3rem)/1.12 var(--serif);letter-spacing:-.02em;margin:1.6em 0 .5em}
.dp h3{font:600 1.05rem/1.35 var(--sans);margin:1.4em 0 .4em}
.dp p,.dp li,.dp dd{font-size:1.02rem;line-height:1.7;color:var(--ink-2)}
.dp p + p{margin-top:.9em}
.dp a{text-decoration-color:var(--gold);text-underline-offset:3px}
.dp a:hover{color:var(--blue)}
.dp .lead{margin-top:18px;font-size:1.16rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.dp strong,.dp b{color:var(--ink);font-weight:600}
.dp ul,.dp ol{padding-left:1.25em;margin:.6em 0}
.dp ul{list-style:disc}
.dp li + li{margin-top:.35em}
.dp li::marker{color:var(--gold-deep)}
.dp code,.dp pre{font:400 .86rem/1.6 var(--mono)}
.dp img{height:auto}
.dp time{white-space:nowrap}

/* labels: the site's mono label with a gold square */
.dp .eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .7rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.dp .eyebrow .dot{width:7px;height:7px;background:var(--gold);border-radius:1px}
.dp .crumbs{font:500 .68rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.dp .crumbs a{text-decoration:none}
.dp .crumbs a:hover{color:var(--ink)}
.dp .updated{margin-top:14px;font-size:.88rem;color:var(--ink-3)}
.dp .note{margin-top:10px;font-size:.84rem;color:var(--ink-3)}

/* buttons: the main site's names on concept D's buttons */
.dp .btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.4em;border-radius:6px;font:500 .92rem var(--sans);text-decoration:none;border:1px solid transparent}
.dp .btn-primary{background:var(--navy);color:#fff}
.dp .btn-primary:hover{background:var(--blue);color:#fff}
.dp .btn-glass{background:transparent;color:var(--navy);border-color:var(--navy)}
.dp .btn-glass:hover{background:#fff;color:var(--navy)}
.dp .btn-lg{padding:1em 1.6em}
.dp .hero-actions,.dp .guide-cta-actions,.dp .paper-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.dp .arr{color:var(--gold-deep)}

/* cards: white on paper, a hairline, no glass */
.dp .glass{background:#fff;border:1px solid var(--line);border-radius:6px}
.dp .w{padding:24px}
.dp .w h3{margin-top:0}

/* ---- articles (guides, tools, privacy): one reading column, "On this page" beside it ---- */
.dp .guide > .container,.dp .prose-wrap{max-width:calc(760px + 2 * var(--gut));position:relative}
.dp .guide h2{scroll-margin-top:110px}
.dp .guide h1{font-size:clamp(2.1rem,4.2vw,3.2rem);max-width:24ch}
.dp .guide > .container > p,.dp .guide > .container > ul,.dp .guide > .container > ol{max-width:68ch}
.dp .toc{margin:28px 0 8px;border:1px solid var(--line);border-radius:6px;background:#fff}
.dp .toc summary{cursor:pointer;list-style:none;padding:12px 16px;font:500 .7rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.dp .toc summary::-webkit-details-marker{display:none}
.dp .toc summary::after{content:"+";float:right;color:var(--ink-3)}
.dp .toc[open] summary::after{content:"\2212"}
.dp .toc ol{list-style:none;margin:0;padding:0 16px 14px}
.dp .toc li{margin:0}
.dp .toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--line);font-size:.9rem;line-height:1.4;color:var(--ink-2);text-decoration:none}
.dp .toc a:hover,.dp .toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--gold)}
@media (min-width:1320px){
  .dp .toc{position:absolute;top:0;bottom:0;left:-250px;width:220px;margin:0;border:0;background:none}
  .dp .toc > div{position:sticky;top:110px}
  .dp .toc summary{pointer-events:none;padding:0 0 10px}
  .dp .toc summary::after,.dp .toc[open] summary::after{content:none}
  .dp .toc ol{padding:0}
}

/* tables: hairline rows, mono heads (Firecrawl, Notion) */
.dp .table-wrap{margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--ink)}
.dp table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.dp th{font:500 .68rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:12px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:bottom}
.dp td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.dp td:first-child,.dp tbody th{color:var(--ink)}
.dp tbody th{font:500 .92rem/1.5 var(--sans);letter-spacing:0;text-transform:none;vertical-align:top}
.dp caption,.dp .tcap{caption-side:bottom;text-align:left;font-size:.82rem;color:var(--ink-3);padding-top:10px}

/* comparison: the MitOS column tinted */
.dp .vs-wrap{margin-top:28px}
.dp .vs-mitos th:last-child,.dp .vs-mitos td:last-child{background:var(--cream)}
.dp .vs-mitos thead th:last-child{color:var(--ink)}
.dp .vs-table td,.dp .vs-table th{padding-left:12px}

/* questions */
.dp details:not(.toc):not(.langs):not(.menu){border-bottom:1px solid var(--line)}
.dp .faq > *,.dp .seo-faq > *{max-width:860px}
.dp .seo-faq h2,.dp .faq h2{margin-bottom:.6em}
.dp details:not(.toc):not(.langs):not(.menu) > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-size:1.02rem;color:var(--ink)}
.dp details:not(.toc):not(.langs):not(.menu) > summary::-webkit-details-marker{display:none}
.dp details:not(.toc):not(.langs):not(.menu) > summary::after{content:"+";color:var(--ink-3);font-size:1.2rem;line-height:1}
.dp details[open]:not(.toc):not(.langs):not(.menu) > summary::after{content:"\00D7";color:var(--gold-deep)}
.dp details:not(.toc):not(.langs):not(.menu) > :not(summary){padding-bottom:18px}

/* calculators: the walkthrough form's fields */
.dp .calc{padding:clamp(20px,3vw,32px);margin:28px 0;display:grid;gap:16px;background:#fff}
.dp .calc .field{display:grid;gap:6px}
.dp .calc .field.two{grid-template-columns:1fr 1fr;gap:16px}
.dp .calc label,.dp .calc legend{font:500 .68rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.dp .calc input:not([type=checkbox]),.dp .calc select{font:400 1rem var(--sans);padding:.75em .9em;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);width:100%}
.dp .calc fieldset{border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin:0;display:grid;gap:10px}
.dp .calc .check{display:flex;gap:10px;align-items:flex-start;font:400 .95rem/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.dp .calc .check input{margin-top:.25em;accent-color:var(--navy)}
.dp .calc-sum{font:300 1.6rem/1.2 var(--serif);color:var(--ink)}
@media (max-width:640px){.dp .calc .field.two{grid-template-columns:1fr}}

/* citation boxes and data downloads */
.dp .cite-box{padding:18px;margin:18px 0;background:var(--cream);border-color:transparent}
.dp .cite-box pre{white-space:pre-wrap;word-break:break-word;margin:0}
.dp .dataset-dl,.dp .sources{margin:20px 0}
.dp .sources li,.dp .dataset-dl li{font-size:.92rem}
.dp .signature{margin-top:28px;font-size:.9rem;color:var(--ink-3)}
.dp .pull{border-left:2px solid var(--gold);padding-left:18px;font:300 1.35rem/1.4 var(--serif);color:var(--ink)}

/* the way on from a guide, and its call to action */
.dp .guide-next{margin-top:40px;display:grid;gap:22px}
.dp .guide-next-wf{display:grid;gap:6px;padding:22px 24px;text-decoration:none}
.dp .guide-next-k{font:500 .68rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dp .guide-next-v{font:300 1.4rem/1.25 var(--serif);color:var(--ink)}
.dp .guide-next-rel h2{font-size:1.4rem;margin-top:0}
.dp .guide-cta{margin:40px 0 0;padding:clamp(24px,4vw,40px);background:var(--navy);border-color:var(--navy);color:#fff}
.dp .guide-cta h2,.dp .guide-cta h3{color:#fff;margin-top:0}
.dp .guide-cta p{color:rgba(255,255,255,.82)}
.dp .guide-cta .btn-primary{background:var(--gold);color:var(--navy)}
.dp .guide-cta .btn-glass{color:#fff;border-color:rgba(255,255,255,.6)}
.dp .guide-cta .btn-glass:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---- resource indexes and card rows (Ease, Calendly) ---- */
.dp .section-head{max-width:760px;margin-bottom:28px}
.dp .section-head h2{margin-top:12px}
.dp .guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:22px}
.dp .guide > .container:has(.guide-index-cards),.dp .guide > .container:has(.paper-cards),.dp .guide:has(+ .paper-links) > .container{max-width:var(--wrap)}
.dp .guide-card{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;text-decoration:none;transition:border-color .2s,transform .2s}
.dp .guide-card:hover{border-color:var(--gold);transform:translateY(-2px);color:inherit}
.dp .guide-card h2,.dp .guide-card h3{font:300 1.3rem/1.22 var(--serif);letter-spacing:-.015em;margin:0;color:var(--ink)}
.dp .guide-card p{font-size:.93rem;line-height:1.55}
.dp .guide-card-date{font:500 .66rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dp .guide-card-more{margin-top:auto;padding-top:8px;font-size:.88rem;font-weight:500;color:var(--ink)}
.dp .guides-all{display:inline-block;margin-top:22px;font-weight:500;color:var(--ink)}
.dp .guide-changes{margin-top:30px}
.dp .changes li{font-size:.92rem}

/* white papers */
.dp .paper-cards{display:grid;gap:18px;margin-top:22px}
.dp .paper-card{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:20px;align-items:start}
.dp .paper-cover{position:relative;display:block}
.dp .paper-cover img{width:100%;border-radius:3px;box-shadow:0 10px 24px -14px rgba(13,27,42,.5)}
.dp .paper-badge{position:absolute;top:8px;left:8px;padding:2px 6px;border-radius:3px;background:var(--navy);color:#fff;font:500 .62rem var(--mono);letter-spacing:.1em}
.dp .paper-meta{font:500 .66rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dp .paper-body h3{font:300 1.45rem/1.2 var(--serif);margin:.4em 0}
.dp .paper-body h3 a{text-decoration:none}
@media (max-width:640px){.dp .paper-card{grid-template-columns:96px 1fr;gap:16px}}

/* ---- workflow pages: hero, the three workflows, steps, cards ---- */
.dp .seo-hero{padding-top:clamp(20px,4vw,40px)}
.dp .seo-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
.dp .seo-heading{max-width:16ch}
.dp .seo-hero-media .vis{border-radius:6px;overflow:hidden;background:var(--cream);padding:clamp(10px,2vw,22px)}
.dp .wf-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:20px}
.dp .wf-nav-label{font:500 .68rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dp .wf-nav ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.dp .wf-nav li{margin:0}
.dp .wf-nav a,.dp .wf-current{display:inline-flex;align-items:center;gap:8px;padding:.45em .85em;border-radius:99px;border:1px solid var(--line);font-size:.86rem;text-decoration:none;color:var(--ink-2);background:#fff}
.dp .wf-current{background:var(--navy);border-color:var(--navy);color:#fff}
.dp .wf-nav .n{font:500 .7rem var(--mono);opacity:.7}
.dp .seo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dp .wf-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dp .wf-steps li{margin:0}
.dp .wf-step-n{display:block;font:300 2.2rem/1 var(--serif);color:var(--gold-deep);margin-bottom:14px}
.dp .mini{font-size:.9rem}
@media (max-width:1000px){.dp .seo-hero-grid{grid-template-columns:1fr}.dp .seo-cards,.dp .wf-steps{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.dp .seo-cards,.dp .wf-steps{grid-template-columns:1fr}}

/* product mock windows on a few pages: a plain framed picture */
.dp .tilt-wrap,.dp .tilt{transform:none!important}
.dp .window,.dp .livewin{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -30px rgba(13,27,42,.45)}
.dp .titlebar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font:500 .66rem var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.dp .mock-label{font:500 .66rem var(--mono);color:var(--ink-3)}

/* the last call on a workflow page */
.dp .cta .container{text-align:left}
.dp .cta{background:var(--cream)}

/* privacy and other plain pages keep their own column width */
.dp .section > .container[style*="max-width"]{padding-inline:var(--gut)}
.dp .reveal{opacity:1!important;transform:none!important}

/* accessibility fixes from the full pass (11.2026) */
.dp [style*="#F08A7E"]{color:#A8321F!important;border-color:rgba(168,50,31,.35)!important}
.dp .table-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.dp .calc input:focus-visible,.dp .calc select:focus-visible,.dp .calc input:focus,.dp .calc select:focus{outline:2px solid var(--gold);outline-offset:2px}
.dp .calc .check input{width:18px;height:18px;flex:none}