/* Cafecito app pages (app/*, shhh/) on the Double Nines design system, taken
   from doublenines.co (Doublenines/doublenines-dotcom, css/99s-2023-v2):
   creme ground, near-black type, one hot-pink accent used sparingly,
   Helvetica Neue / Helvetica set bold and tight, square black buttons,
   outline pills, arrow-in-a-circle links, and lists ruled with hairlines.
   The site is creme only, so there is no dark theme here either. */

/* These copies report a short ascent (cap height runs above it), so text sat
   ~0.19em high in every box. The overrides centre the line box on the caps. */
@font-face{font-family:'Helvetica Neue'; src:url('fonts/helvetica-neue-400.woff') format('woff'); font-weight:400; font-display:swap; ascent-override:90%; descent-override:15%; line-gap-override:0%}
@font-face{font-family:'Helvetica Neue'; src:url('fonts/helvetica-neue-500.woff') format('woff'); font-weight:500; font-display:swap; ascent-override:90%; descent-override:15%; line-gap-override:0%}
@font-face{font-family:'Helvetica Neue'; src:url('fonts/helvetica-neue-700.woff') format('woff'); font-weight:700; font-display:swap; ascent-override:90%; descent-override:15%; line-gap-override:0%}
@font-face{font-family:'Helvetica'; src:url('fonts/helvetica-400.woff') format('woff'); font-weight:400; font-display:swap; ascent-override:90%; descent-override:15%; line-gap-override:0%}
@font-face{font-family:'Helvetica'; src:url('fonts/helvetica-700.woff') format('woff'); font-weight:700; font-display:swap; ascent-override:90%; descent-override:15%; line-gap-override:0%}

:root{
  /* doublenines.co tokens, by their names there */
  --creme:#fffdf9;            /* page */
  --black:#151515;            /* --black--darker-black: headings, buttons */
  --off-black:#383838;        /* --black--off-black: body copy, dark bands */
  --off-grey:#5d5d5d;         /* --black--off-grey */
  --grey:#949494;             /* --black-grey: muted text, meta */
  --light-grey:#dadada;       /* --black--light-grey: hairlines */
  --panel:#f1efeb;            /* the style guide's warm grey band */
  --primary:#f80094;          /* the pink */
  --primary-lighter:#ef74bd;
  --primary-off:#f800944d;

  /* names the shared footer and older pages read */
  --ink:var(--black); --paper:var(--creme); --off:var(--creme);
  --line:var(--light-grey); --line2:var(--off-black); --dim:var(--off-grey); --faint:var(--grey);
  --bad:#e40000;

  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --display:Helvetica,'Helvetica Neue',Arial,sans-serif;
  --maxw:80rem;
  --gutter:2.5rem;
}
@media (max-width:767px){ :root{ --gutter:1rem } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--creme); color:var(--black); font-family:var(--sans);
  font-size:1rem; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0; font-family:var(--display); font-weight:700; color:var(--black)}
h1{font-size:clamp(2.5rem,5vw,4rem); line-height:1.05; letter-spacing:-.045em}
h2{font-size:clamp(2rem,3.4vw,3rem); line-height:1.1; letter-spacing:-.04em}
h3{font-size:2rem; line-height:1.2; letter-spacing:-.03em}
h4{font-size:1.5rem; line-height:1.3; letter-spacing:-.02em}
h5{font-size:1.25rem; line-height:1.4; letter-spacing:-.01em}
.massive{font-family:var(--display); font-weight:700; font-size:clamp(3.5rem,8vw,7.5rem);
  line-height:.86; letter-spacing:-.055em; color:var(--black)}
.massive .muted, h1 .muted{color:var(--grey)}
.dim{color:var(--off-grey)}
.faint{color:var(--grey)}

/* the pink, sentence-case section label: "About us", "Selected work" */
.eyebrow{display:block; color:var(--primary); font-weight:700; font-size:1.125rem; letter-spacing:-.01em; margin-bottom:1rem}

.wrap{max-width:calc(var(--maxw) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter)}
.page{padding-top:3.5rem}

/* top bar: wordmark left like "Double Nines", 99s mark at the right edge */
.bar{background:var(--creme)}
.bar-in{display:flex; align-items:center; gap:1.25rem; min-height:6rem}
.brand{display:flex; align-items:center; gap:.6rem; margin-right:auto; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:1.6rem; letter-spacing:-.04em; line-height:1}
.brand img{display:block; width:1.85rem; height:auto; margin-top:-.15rem}
.who{font-size:.95rem; color:var(--off-grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:16rem}
.mark{width:3.6rem; height:auto; display:block}
@media (max-width:620px){ .who{display:none} .mark{width:2.8rem} }

/* buttons: the site's square black .button, its outline pill, and the circled arrow */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; cursor:pointer;
  font:inherit; font-weight:600; font-size:1rem; line-height:1.2; text-decoration:none; white-space:nowrap;
  padding:.75rem 1.5rem; border:1px solid transparent; border-radius:0; background:none; color:var(--black)}
.btn-p{background:var(--black); color:#fff}
.btn-p:hover{background:var(--primary)}
.btn-s{border-color:var(--black); border-radius:100px; padding:.45rem 1.1rem; font-size:.95rem}
.btn-s:hover{background:var(--black); color:#fff}
.btn-t{padding:.45rem 0; color:var(--off-grey); font-weight:500}
.btn-t:hover{color:var(--black)}
.btn-sm{font-size:.9rem; padding:.5rem 1rem}
.btn-s.btn-sm{padding:.35rem .9rem}
.btn-lg{font-size:1.1rem; padding:1rem 2rem}
.btn[disabled]{opacity:.3; cursor:not-allowed; pointer-events:none}
.btn-p[disabled]{background:var(--black)}
.btn-s[disabled]{background:none; color:var(--black)}

.arrow{display:inline-flex; align-items:center; gap:.6rem; font-weight:700; text-decoration:none;
  color:var(--black); background:none; border:0; font:inherit; font-weight:700; cursor:pointer; padding:0}
.arrow::after{content:''; flex:none; width:2.5rem; height:2.5rem; border:1px solid var(--black); border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23151515' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .15s}
.arrow:hover::after{transform:translateX(3px); border-color:var(--primary)}
.arrow.back::after{display:none}
.arrow.back::before{content:''; flex:none; width:2.5rem; height:2.5rem; border:1px solid var(--black); border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23151515' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3M7 4L3 8l4 4'/%3E%3C/svg%3E") center/16px no-repeat}
.btn:focus-visible,.arrow:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary); outline-offset:3px}

/* page head */
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem}
.head p{margin-top:.75rem}

/* panels and hairline lists */
.panel{background:transparent; border-top:1px solid var(--black)}
.rule{border:0; border-top:1px solid var(--black); margin:0}
.meta{color:var(--primary); font-weight:700}

/* definition rows: label left, value right, hairline under — the "Ryder · 2018-Present" list */
.facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:0 2rem}
.facts.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:620px){ .facts.cols3{grid-template-columns:1fr 1fr} }
.facts div{padding:.9rem 0; border-bottom:1px solid var(--light-grey)}
.facts dt{font-size:.85rem; color:var(--grey); margin-bottom:.15rem}
.facts dd{margin:0; font-weight:700; letter-spacing:-.01em}

/* tags: relationship of a unit to the campaign */
.tag{display:inline-block; font-size:.78rem; font-weight:700; padding:.15rem .55rem; border:1px solid var(--black); border-radius:100px; white-space:nowrap}
.tag.master{background:var(--black); color:#fff}

/* status: words, not candy. Pink only when the customer has to act. */
.status{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.95rem; white-space:nowrap}
.status::before{content:''; width:.55rem; height:.55rem; border-radius:50%; background:currentColor}
.status.draft,.status.incomplete{color:var(--grey)}
.status.submitted,.status.production{color:var(--off-black)}
.status.review,.status.changes{color:var(--primary)}
.status.changes::before{background:transparent; box-shadow:inset 0 0 0 2px currentColor}
.status.approved,.status.delivered{color:var(--black)}
.status.approved::before,.status.delivered::before{width:.9rem; height:.9rem; border-radius:0; background:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23151515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.5l3 3L12 4'/%3E%3C/svg%3E") center/contain no-repeat}
/* the older pill markup still used by intake */
.pill{display:inline-block; font-size:.8rem; font-weight:700}

/* tabs: plain words with a pink underline on the current one */
.tabs{display:flex; gap:2rem; border-bottom:1px solid var(--light-grey); margin-bottom:.5rem; overflow-x:auto}
.tabs button{font:inherit; font-weight:700; font-size:1.05rem; background:none; border:0; padding:.75rem 0; cursor:pointer;
  color:var(--grey); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--black); border-bottom-color:var(--primary)}
.tabs .n{font-weight:500; margin-left:.3rem}

/* a creative shown on the style guide's warm-grey stage */
.stage{background:var(--panel); display:grid; place-items:center; padding:2.5rem; position:relative; overflow:hidden}
.unit-frame{display:block; border:0; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.placeholder{display:grid; place-items:center; text-align:center; color:var(--grey); font-size:.85rem;
  background:repeating-linear-gradient(135deg, transparent 0 9px, rgba(21,21,21,.05) 9px 10px), var(--panel);
  border:1px dashed #c5c5c5}

/* flash after an action */
.flash{display:none; margin-bottom:2rem; padding:1rem 1.25rem; border-left:3px solid var(--primary); background:var(--panel); font-size:1rem}
.flash.on{display:block}

/* forms */
.field{display:block; margin-bottom:1.75rem}
.label{display:block; font-weight:700; margin-bottom:.4rem}
.hint{display:block; font-size:.92rem; color:var(--off-grey); margin:-.1rem 0 .6rem}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],textarea,select{
  width:100%; font:inherit; font-size:1rem; color:var(--black); background:#fff;
  border:1px solid var(--off-black); border-radius:0; padding:.8rem .9rem}
textarea{min-height:9rem; resize:vertical; line-height:1.5}
input.bad,textarea.bad{border-color:var(--bad)}
.err{display:none; color:var(--bad); font-size:.9rem; margin-top:.4rem}
.err.on{display:block}

/* modal-ish confirm, inline */
.confirm{border:1px solid var(--black); padding:1.5rem; background:#fff}
.confirm h5{margin-bottom:.4rem}

.toast{position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,1rem); opacity:0;
  background:var(--black); color:#fff; padding:.8rem 1.2rem; font-size:.95rem; transition:opacity .18s, transform .18s;
  pointer-events:none; max-width:calc(100% - 2rem); z-index:50}
.toast.on{opacity:1; transform:translate(-50%,0)}

.demo-tools{margin-top:1.5rem; font-size:.85rem; color:var(--grey)}
.demo-tools button{font:inherit; color:var(--off-grey); background:none; border:0; cursor:pointer; text-decoration:underline; padding:0}

/* footer on app pages: the site's off-black band */
.site-footer{background:var(--off-black) !important; border-top:0 !important; color:#fff}
.site-footer a{color:#cfcfcf !important}
.site-footer a:hover{color:#fff !important}
.site-footer p{color:var(--grey) !important}
.site-footer .h{filter:invert(1)}
.site-footer{font-family:var(--sans) !important}
.site-footer .sf-sep{background:#5d5d5d !important}

/* ---- components from the app designs (dashboard, intake, campaign) ----
   Same tokens; adds the white card, coloured status pills, the avatar menu,
   the 99s blue-to-pink wash, the stepper and the data table. */
:root{
  --card:#ffffff; --card-line:#e7e3dc; --radius:10px;
  --blue:#0aa0e8;            /* the blue half of the 99s mark */
  --wash:linear-gradient(100deg, rgba(10,160,232,.10) 0%, rgba(255,255,255,0) 45%, rgba(248,0,148,.12) 100%);
  --wash-line:linear-gradient(90deg, #0aa0e8, #f80094);
  --ok:#1a9a52; --info:#0a7fd0; --warn:#c2410c; --violet:#7b3fe4;
}
.card{background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius)}
.card-pad{padding:1.5rem 1.75rem}
.card h3{font-size:1.5rem; letter-spacing:-.025em}

/* app nav: logo, section links with the pink underline, avatar menu */
.appbar{background:var(--card); border-bottom:1px solid var(--card-line)}
.appbar .wrap{display:flex; align-items:center; gap:2.5rem; min-height:4.75rem}
.appbar .brand{margin-right:0; font-size:1.45rem}
.appbar nav{display:flex; gap:2rem; margin-right:auto; align-self:stretch}
.appbar nav a{display:flex; align-items:center; text-decoration:none; font-weight:500; color:var(--off-grey); border-bottom:2px solid transparent; margin-bottom:-1px}
.appbar nav a[aria-current]{color:var(--black); font-weight:700; border-bottom-color:var(--primary)}
.appbar nav a:hover{color:var(--black)}
.appbar .back{display:inline-flex; gap:.5rem; align-items:center; text-decoration:none; font-weight:500; color:var(--off-black); margin-right:auto}
.who-menu{position:relative}
.who-btn{display:flex; align-items:center; gap:.6rem; font:inherit; font-weight:500; background:none; border:0; cursor:pointer; color:var(--black); padding:.25rem}
.avatar{width:2.25rem; height:2.25rem; border-radius:50%; background:var(--panel); display:grid; place-items:center; font-weight:700; font-size:.95rem}
.who-btn::after{content:''; width:.45rem; height:.45rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); margin-left:.15rem}
.who-pop{position:absolute; right:0; top:calc(100% + .5rem); min-width:14rem; background:#fff; border:1px solid var(--card-line); border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,.08); padding:.5rem; display:none; z-index:30}
.who-menu.open .who-pop{display:block}
.who-pop .em{display:block; padding:.6rem .75rem; font-size:.85rem; color:var(--grey); border-bottom:1px solid var(--card-line); margin-bottom:.35rem}
.who-pop a,.who-pop button{display:block; width:100%; text-align:left; padding:.6rem .75rem; font:inherit; background:none; border:0; border-radius:6px; cursor:pointer; text-decoration:none; color:var(--black)}
.who-pop a:hover,.who-pop button:hover{background:var(--panel)}
@media (max-width:620px){ .appbar .wrap{gap:1rem} .appbar nav{gap:1.25rem} .who-btn .nm{display:none} }

/* the headline with the pink full stop, as in "Your campaigns." */
.title{font-family:var(--display); font-weight:700; font-size:clamp(2.75rem,6vw,5rem); letter-spacing:-.055em; line-height:1}
.title .dot{color:var(--primary)}
.subtitle{margin-top:.9rem; font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--off-grey)}
.kicker{display:block; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--off-black); margin-bottom:.6rem}

/* rounded buttons for the app; .btn stays square for the marketing site */
.app .btn{border-radius:8px}
.app .btn-s{border-radius:8px; padding:.7rem 1.25rem; font-size:1rem; background:#fff}
.app .btn-s:hover{background:var(--panel); color:var(--black)}
.app .btn-sm{padding:.5rem .9rem; font-size:.92rem}
.go::after{content:''; width:.45rem; height:.45rem; border-right:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg); margin-left:.15rem}

/* coloured status pills: dot + label on a tint */
.pill{display:inline-flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:600; padding:.3rem .8rem; border-radius:999px; white-space:nowrap}
.pill::before{content:''; width:.5rem; height:.5rem; border-radius:50%; background:currentColor}
.pill.draft{color:#6b6b6b; background:#efede9}
.pill.incomplete{color:#c4006f; background:#fde6f2}
.pill.submitted{color:#4b5563; background:#eceff3}
.pill.production{color:var(--info); background:#e3f1fb}
.pill.review{color:var(--violet); background:#efe7fd}
.pill.changes{color:var(--warn); background:#fdece4}
.pill.approved{color:var(--ok); background:#e2f5ea}
.pill.delivered{color:var(--ok); background:#e2f5ea}
.dot-status{display:inline-flex; align-items:center; gap:.45rem; font-size:.92rem; color:var(--off-black)}
.dot-status::before{content:''; width:.55rem; height:.55rem; border-radius:50%; background:currentColor; color:inherit}
.dot-status.review::before{background:var(--violet)} .dot-status.production::before{background:var(--info)}
.dot-status.changes::before{background:var(--warn)} .dot-status.approved::before,.dot-status.delivered::before{background:var(--ok)}
.dot-status.incomplete::before{background:var(--primary)} .dot-status.draft::before,.dot-status.submitted::before{background:var(--grey)}

/* the gradient "start a campaign" panel */
.wash{position:relative; background:#fff; border-radius:var(--radius); overflow:hidden}
.wash::before{content:''; position:absolute; inset:0; background:var(--wash); pointer-events:none}
.wash::after{content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1px; background:var(--wash-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.45; pointer-events:none}
.wash > *{position:relative}

/* horizontal mini stepper (dashboard) */
.mini-steps{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.mini-steps .s{display:flex; align-items:center; gap:.75rem; font-weight:700}
.mini-steps .s i{font-style:normal; width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.95rem}
.mini-steps .s:nth-child(1) i{background:#e2f4fd; color:#0b78ad}
.mini-steps .s:nth-child(3) i{background:#e7eefc; color:#3b5bd6}
.mini-steps .s:nth-child(5) i{background:#f1e8fd; color:#7b3fe4}
.mini-steps .s:nth-child(7) i{background:#fde6f2; color:#c4006f}
.mini-steps .ln{flex:1; min-width:2rem; height:1px; background:var(--card-line)}

/* data table */
.dtable{width:100%; border-collapse:collapse}
.dtable th{text-align:left; font-size:.88rem; font-weight:500; color:var(--off-grey); padding:0 1rem .9rem 0; border-bottom:1px solid var(--card-line); white-space:nowrap}
.dtable td{padding:1.1rem 1rem 1.1rem 0; border-bottom:1px solid var(--card-line); vertical-align:middle; font-size:.95rem}
.dtable td small{display:block; color:var(--grey); font-size:.82rem; margin-top:.15rem}
.dtable td:last-child,.dtable th:last-child{padding-right:0}

.progress{height:.5rem; border-radius:999px; background:#ecebe8; overflow:hidden; min-width:8rem}
.progress i{display:block; height:100%; background:var(--wash-line); border-radius:999px}

.back-link{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--off-grey); font-size:.92rem}
.crumbs{font-size:.92rem; color:var(--grey)} .crumbs a{color:var(--grey); text-decoration:none} .crumbs a:hover{color:var(--black)}
.chip{display:inline-block; font-size:.8rem; font-weight:600; padding:.22rem .55rem; border-radius:6px; background:var(--panel); white-space:nowrap}
.chip.master{background:#e2f4fd; color:#0b78ad}

/* No orphans. Headings balance their lines; body copy avoids a lone last
   word. lib/site/typeset.js does the same for browsers without these. */
h1,h2,h3,h4,h5,h6,.massive,.title{text-wrap:balance}
p,li,dd,td,figcaption{text-wrap:pretty}

/* smallest phones: the app bar keeps the logo, the current section and the avatar */
@media (max-width:420px){
  .appbar .wrap{gap:.9rem}
  .appbar .brand{font-size:1.2rem}
  .appbar .brand img{width:1.55rem}
  .appbar nav{gap:1rem}
  .appbar nav a:not([aria-current]){display:none}
  .appbar .back + .back{display:none}
}
@media (max-width:380px){
  .bar-in .brand{font-size:1.15rem; gap:.4rem}
  .bar-in .brand img{width:1.45rem}
  .bar-in .nav-links{gap:.6rem}
  .bar-in .nav-links .btn-p{padding:.5rem .6rem; font-size:.8rem}
}