/* ========================================
   Case studies, laid out like the Crayon reference.
   Loads after styles.css + case-study.css + crayon.css and maps the old
   editorial tokens onto the scrapbook.
   ======================================== */
html[data-theme] {
    --bg: #fdfdfb;
    --bg-2: #f7f1e3;
    --surface: #ffffff;
    --surface-hover: #ffffff;
    --fg: #191510;
    --fg-2: #4a443b;
    --fg-3: #6b6356;
    --border: rgba(25, 21, 16, .14);
    --border-strong: #191510;
    --border-hover: #191510;
    --accent: #2b57d6;
    --accent-soft: rgba(43, 87, 214, .1);
    --accent-line: rgba(43, 87, 214, .45);
    --pill-bg: #fff;
    --pill-border: #191510;
    --card-hover-border: #191510;
    --card-hover-shadow: none;
    --ff-display: 'Inter', system-ui, sans-serif;
    --fw-display: 600;
    --purple: #d5c8f5;
    --torn-a: polygon(2% 6%, 12% 0%, 25% 4%, 40% 1%, 55% 5%, 70% 0%, 85% 4%, 98% 1%, 96% 15%, 100% 30%, 97% 45%, 100% 60%, 96% 75%, 99% 90%, 97% 98%, 85% 96%, 70% 100%, 55% 96%, 40% 100%, 25% 95%, 12% 100%, 3% 97%, 1% 85%, 4% 70%, 0% 55%, 3% 40%, 0% 25%, 2% 12%);
    --torn-b: polygon(1% 8%, 10% 2%, 22% 6%, 35% 0%, 48% 5%, 62% 1%, 76% 6%, 90% 1%, 99% 6%, 97% 20%, 100% 35%, 98% 50%, 100% 66%, 97% 80%, 99% 94%, 88% 98%, 74% 94%, 60% 99%, 46% 95%, 32% 100%, 18% 96%, 6% 99%, 2% 88%, 5% 74%, 1% 60%, 4% 46%, 0% 32%, 3% 18%);
    --torn-c: polygon(3% 3%, 16% 1%, 28% 5%, 44% 0%, 58% 4%, 72% 1%, 84% 5%, 97% 2%, 100% 18%, 96% 32%, 100% 48%, 97% 64%, 100% 80%, 96% 94%, 98% 99%, 84% 95%, 68% 100%, 52% 96%, 38% 100%, 22% 95%, 8% 99%, 1% 92%, 4% 78%, 0% 62%, 3% 48%, 0% 34%, 4% 20%, 1% 8%);
}
html[data-theme] body { background-color: var(--paper); }

/* ---------- Hero ---------- */
.cs-top { padding: 48px 0 24px; }
.cs-crumb {
    display: inline-block; margin-bottom: 40px;
    font-family: var(--ff-mono); font-weight: 500; font-size: .8rem;
    letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink);
    border-bottom: 2px solid var(--ink); padding-bottom: 3px;
}
.cs-crumb:hover { background: var(--yellow); }
.cs-top-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.cs-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--ff-mono); font-weight: 500; font-size: .875rem;
    letter-spacing: .2em; text-transform: uppercase;
}
.cs-eyebrow .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.cs-big { margin-top: 16px; font-size: clamp(3.5rem, 9vw, 11rem); line-height: .92; text-transform: uppercase; }
.cs-lede { max-width: 32rem; margin-top: 24px; font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--ink-2); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cs-chips span {
    padding: 11px 20px 9px;
    font-family: var(--ff-mono); font-weight: 500; font-size: 1.05rem;
    letter-spacing: .04em; text-transform: uppercase;
    background: var(--chrome);
    clip-path: polygon(0 28%, 12% 0, 100% 0, 100% 100%, 0 100%);
}

/* Taped, torn fact notes, as in the reference hero */
.torn { clip-path: var(--torn-a); background: var(--cyan); }
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 32rem; padding-top: 32px; filter: drop-shadow(2px 4px 5px rgba(17, 18, 18, .16)); }
/* Facts sit under the Project Overview paragraph, in the text column */
.cs-facts.in-overview { width: auto; max-width: 48rem; margin: 8px 0 0; padding-top: 0; gap: 26px 28px; }
.cs-fact { position: relative; }
.cs-fact .torn { padding: 20px 24px; height: 100%; }
.cs-fact:nth-child(1) { rotate: -2deg; }
.cs-fact:nth-child(2) { rotate: 2deg; }
.cs-fact:nth-child(2) .torn { clip-path: var(--torn-b); background: var(--yellow-soft); }
.cs-fact:nth-child(3) { rotate: 1deg; }
.cs-fact:nth-child(3) .torn { clip-path: var(--torn-c); background: var(--purple); }
.cs-fact:nth-child(4) { rotate: -1deg; }
.cs-fact:nth-child(4) .torn { background: var(--pink-soft); }
.cs-fact .tape {
    position: absolute; top: -8px; left: -12px; z-index: 1;
    width: 56px; height: 20px; rotate: -36deg;
    background: rgba(255, 255, 255, .6); box-shadow: 0 1px 3px rgba(17, 18, 18, .15);
}
.cs-fact:nth-child(even) .tape { left: auto; right: -12px; rotate: 36deg; }
.cs-fact-k { font-family: var(--ff-mono); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.cs-fact-v { margin-top: 4px; color: var(--ink-2); }

/* Headline numbers: torn result notes */
.cs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; filter: drop-shadow(2px 4px 5px rgba(17, 18, 18, .14)); }
.cs-stat { padding: 20px; }
.cs-stat:nth-child(1) { rotate: -2deg; }
.cs-stat:nth-child(2) { rotate: 2deg; clip-path: var(--torn-b); background: var(--yellow-soft); }
.cs-stat:nth-child(3) { rotate: 1deg; clip-path: var(--torn-c); background: var(--purple); }
.cs-stat:nth-child(4) { rotate: -1deg; background: var(--mint); }
.cs-stat-num { font-size: clamp(2.4rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.cs-stat-label { margin-top: 6px; font-family: var(--ff-mono); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* Big taped shot */
.taped { position: relative; }
.taped::before, .taped::after {
    content: ""; position: absolute; top: -12px; z-index: 2;
    width: 96px; height: 24px;
    background: rgba(255, 255, 255, .55); box-shadow: 0 1px 3px rgba(17, 18, 18, .15);
}
.taped::before { left: -20px; rotate: -9deg; }
.taped::after { right: -20px; rotate: 9deg; }
.cs-shot { margin-top: 64px; }
.cs-shot-in {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
    height: min(85vh, 860px);
    background: var(--ink); border: 4px solid var(--ink); overflow: hidden;
}
.cs-shot-in img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 28px; background: var(--chrome); }
/* Landscape screenshots keep their own height */
.cs-shot-in.wide { height: auto; }
.cs-shot-in.wide img { height: auto; padding: 0; }

/* ---------- Sections ---------- */
.cs-section, .cs-section-alt { padding: 72px 0; background: transparent; border: 0 !important; }
.cs-section-alt .wrap { position: relative; }
.cs-section-head {
    display: flex; align-items: baseline; gap: 14px;
    max-width: 48rem; margin: 0 0 24px; padding: 0; border: 0;
}
.cs-num { font-family: var(--ff-mono); font-weight: 500; font-size: .85rem; letter-spacing: .1em; color: var(--ink-3); }
.cs-label { font-family: var(--ff-hand); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.6rem); line-height: 1.1; letter-spacing: 0; text-transform: lowercase; color: var(--ink); }
.cs-subhead { max-width: 48rem; margin: 56px 0 22px; }
.cs-sub-k {
    display: inline-block; padding: 3px 10px;
    font-family: var(--ff-mono); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    background: var(--yellow);
}
.cs-sub-t { margin-top: 10px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.cs-body { max-width: 48rem; margin: 0 0 40px; font-size: 1.125rem; line-height: 1.75; color: var(--ink-2); }
.serif-em { font-family: var(--ff-hand); font-style: normal; font-weight: 400; color: var(--blue); }

/* Cards read as plain text on the ruled paper: bold heading, soft paragraph, no box */
.cs-problems, .cs-idea-grid, .cs-decisions, .cs-learnings, .cs-future-grid, .cs-features,
.cs-process-grid, .cs-persona-grid, .cs-meta-grid, .dv-landing-grid, .cs-quotes {
    gap: 40px 48px !important; border: 0 !important;
    background: transparent !important;
}
.cs-meta-card, .cs-problem-card, .cs-feature, .cs-process-card, .cs-idea-card,
.cs-persona-card, .cs-future-card, .cs-learning, .cs-decision, .dv-flow-card, .dv-landing-card,
.cs-section-alt .cs-problem-card, .cs-section-alt .cs-idea-card, .cs-section-alt .cs-future-card,
.cs-meta-card:not(:first-child), .cs-process-card:not(:first-child),
.cs-persona-dark, [data-theme="light"] .cs-persona-dark {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important; border-radius: 0;
    box-shadow: none !important;
    color: var(--ink);
}
:is(.cs-meta-card, .cs-problem-card, .cs-feature, .cs-process-card, .cs-idea-card, .cs-persona-card, .cs-future-card, .cs-learning, .cs-decision, .dv-flow-card, .dv-landing-card):hover { transform: none; box-shadow: none; background: transparent; }
:is(.cs-problem-card, .cs-idea-card, .cs-feature, .cs-process-card, .cs-future-card, .cs-learning, .cs-decision, .cs-persona-card, .dv-flow-card, .dv-landing-card) h3 { color: var(--ink) !important; font-weight: 600; }
:is(.cs-problem-card, .cs-idea-card, .cs-feature, .cs-process-card, .cs-future-card, .cs-learning, .cs-decision, .cs-persona-card, .dv-flow-card, .dv-landing-card) :is(p, li, span:not([class*="title"])) { color: var(--ink-2) !important; line-height: 1.7; }
.cs-problem-icon, .cs-learning-icon, .future-card-icon {
    background: transparent !important; color: var(--ink) !important;
    border: 0 !important; padding: 0 !important; width: auto !important; height: auto !important;
}
.cs-persona-avatar { background: var(--ink) !important; color: var(--paper) !important; }
/* case-study.css paints the dark persona's text light with long !important selectors */
html[data-theme] .cs-persona-card.cs-persona-dark :is(.cs-persona-header span, .cs-persona-detail p, .persona-goal p, .persona-pain p, .persona-goal-title, .persona-pain-title) { color: var(--ink) !important; }
html[data-theme] .cs-persona-card.cs-persona-dark .cs-persona-header h3 { color: var(--ink) !important; }
.cs-persona-dark :is(.cs-persona-detail, .persona-goal, .persona-pain) { background: transparent !important; border-color: rgba(25, 21, 16, .15) !important; }
.cs-meta-label { font-family: var(--ff-mono); font-weight: 500; letter-spacing: .12em; color: var(--ink-3); }
.cs-meta-value { color: var(--ink); }
.cs-feature { grid-template-columns: 96px 1fr; }
.cs-feature-num, .cs-process-num { font-family: var(--ff-mono); font-weight: 500; letter-spacing: 0; color: var(--ink) !important; }
.cs-feature-bar { background: rgba(25, 21, 16, .1); }
.cs-feature-bar-fill { background: var(--ink); }
.dv-flow-card { padding-bottom: 8px !important; }

/* Paper notes only where they carry a number, a person or a quote */
.cs-meta-grid, .cs-persona-grid { gap: 22px 26px !important; filter: drop-shadow(2px 4px 5px rgba(17, 18, 18, .16)); }
html[data-theme] .cs-meta-card, html[data-theme] .cs-meta-card:not(:first-child) {
    padding: 20px 22px !important; background: var(--cyan) !important; clip-path: var(--torn-a); rotate: -1.5deg;
}
html[data-theme] .cs-meta-card:nth-child(4n+2) { background: var(--yellow-soft) !important; clip-path: var(--torn-b); rotate: 1.5deg; }
html[data-theme] .cs-meta-card:nth-child(4n+3) { background: var(--purple) !important; clip-path: var(--torn-c); rotate: .8deg; }
html[data-theme] .cs-meta-card:nth-child(4n+4) { background: var(--pink-soft) !important; rotate: -.8deg; }
html[data-theme] .cs-persona-card, html[data-theme] .cs-persona-card.cs-persona-dark {
    padding: 30px 28px !important; background: var(--cyan) !important; clip-path: var(--torn-a); rotate: -.8deg;
}
html[data-theme] .cs-persona-card:nth-child(even) { background: var(--yellow-soft) !important; clip-path: var(--torn-b); rotate: .8deg; }

/* Problem cards: torn notes in rotating colours, icon in a white dot */
.cs-problems { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 60rem; margin-inline: 0; gap: 30px 34px !important; filter: drop-shadow(2px 4px 5px rgba(17, 18, 18, .16)); }
@media (max-width: 640px) { .cs-problems { grid-template-columns: 1fr !important; } }
html[data-theme] .cs-problem-card, html[data-theme] .cs-section-alt .cs-problem-card {
    padding: 28px 26px !important; background: var(--cyan) !important; clip-path: var(--torn-a); rotate: -1.2deg;
    transition: rotate .3s var(--ease), translate .3s var(--ease);
}
html[data-theme] .cs-problem-card:nth-child(4n+2) { background: var(--yellow-soft) !important; clip-path: var(--torn-b); rotate: 1.2deg; }
html[data-theme] .cs-problem-card:nth-child(4n+3) { background: var(--purple) !important; clip-path: var(--torn-c); rotate: .7deg; }
html[data-theme] .cs-problem-card:nth-child(4n+4) { background: var(--pink-soft) !important; rotate: -.7deg; }
html[data-theme] .cs-problem-card:hover { rotate: 0deg; translate: 0 -4px; }
html[data-theme] .cs-problem-card .cs-problem-icon {
    display: grid; place-items: center; place-content: center !important; width: 40px !important; height: 40px !important;
    background: rgba(255, 255, 255, .75) !important; border-radius: 50% !important;
}

.cs-quote {
    max-width: 48rem; margin-inline: 0;
    padding: 28px 32px; border: 0 !important; border-radius: 0;
    background: var(--yellow-soft); clip-path: var(--torn-b);
}
.cs-quote p { font-size: 1.2rem; line-height: 1.6; color: var(--ink); font-style: normal; }
.cs-quote cite { font-family: var(--ff-hand); font-size: 1.4rem; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.cs-quotes .cs-quote:nth-child(even) { background: var(--cyan); clip-path: var(--torn-a); }
/* Several quotes stand side by side as tall notes instead of a long stack */
.cs-quotes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 28px !important; filter: drop-shadow(2px 4px 5px rgba(17, 18, 18, .16)); }
.cs-quotes .cs-quote { max-width: none; margin: 0; padding: 30px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; rotate: -1deg; }
.cs-quotes .cs-quote:nth-child(2) { rotate: 1.2deg; }
.cs-quotes .cs-quote:nth-child(3n) { background: var(--purple); clip-path: var(--torn-c); rotate: -.6deg; }
.cs-quotes .cs-quote p { font-size: 1.08rem; }
@media (max-width: 860px) { .cs-quotes { grid-template-columns: 1fr; } }

/* Pictures get a thick ink frame and two strips of tape */
.screen-item { position: relative; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.screen-item::before, .screen-item::after {
    content: ""; position: absolute; top: -12px; z-index: 3;
    width: 84px; height: 22px;
    background: rgba(255, 255, 255, .6); box-shadow: 0 1px 3px rgba(17, 18, 18, .15);
}
.screen-item::before { left: -14px; rotate: -9deg; }
.screen-item::after { right: -14px; rotate: 9deg; }
.screen-placeholder-card { border: 4px solid var(--ink) !important; border-radius: 0 !important; background: var(--chrome) !important; }
.screen-meta { padding: 14px 2px 0; }
.screen-title { font-family: var(--ff-mono); font-weight: 500; font-size: .8rem; letter-spacing: .14em; }
.card-hover-overlay { background: rgba(25, 21, 16, .7) !important; }
.card-hover-overlay span { font-family: var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.cs-testing-photos { gap: 16px; }
.cs-testing-photos img { border: 4px solid var(--ink); border-radius: 0; filter: none; }

/* Tables: ink box, chrome header */
.cs-table-wrap { border: 3px solid var(--ink) !important; border-radius: 0 !important; background: #fff; box-shadow: none; }
.cs-table th { font-family: var(--ff-mono); font-weight: 500; letter-spacing: .12em; color: var(--ink); background: var(--chrome); }
.cs-table td:first-child { color: var(--ink); }
table { border-collapse: separate; border-spacing: 0; }

/* ---------- More projects ---------- */
.cs-more { padding: 96px 0 24px; border-top: 2px dashed rgba(25, 21, 16, .18); }
.cs-more-label { font-size: clamp(2rem, 3.6vw, 2.6rem); }
.cs-more .cs-grid { margin-top: 40px; }

/* Contact block reuses the homepage's big card */
.contact::before { display: none; }
.contact.sec { padding: 112px 0 72px; overflow-x: clip; overflow-y: visible; }

/* Footer link row (div, not nav: styles.css fixes every <nav>) */
.footer-links .footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links .footer-nav a { text-decoration: none; }
.footer-links .footer-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
footer.footer { border-top: 0; }

/* Undo styles.css burger + full-screen mobile menu */
.burger { height: auto; position: static; }
.burger span { position: static; left: auto; width: 22px; height: 2px; }
.mob-menu { inset: auto; top: var(--nav-h); left: 0; right: 0; padding: 0; opacity: 1; pointer-events: auto; transition: none; }
.mob-menu a { border-bottom: 0; }
.mob-menu a:hover { color: var(--ink); padding-left: var(--pad); background: var(--yellow-soft); }

@media (max-width: 1100px) {
    .cs-top-grid { grid-template-columns: 1fr; }
    .cs-facts { width: auto; max-width: 32rem; padding-top: 0; }
}
@media (max-width: 860px) {
    .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-section, .cs-section-alt { padding: 56px 0; }
}
@media (max-width: 560px) {
    .cs-facts { grid-template-columns: 1fr; }
    .cs-shot-in { grid-template-columns: 1fr; height: auto; }
    .cs-shot-in img { height: auto; padding: 16px; }
    .cs-feature { grid-template-columns: 1fr; }
    .cs-chips span { font-size: .85rem; }
}

/* One left edge for everything: drop the old 116px number-column indent */
html[data-theme] :is(.cs-body, .cs-meta-grid, .cs-problems, .cs-idea-grid, .cs-process-grid, .cs-future-grid,
.cs-persona-grid, .cs-features, .cs-decisions, .cs-learnings, .cs-quotes, .cs-table-wrap, .cs-testing-photos,
.nd-donut-wrap, .nd-timeline, .dv-flow-card, .dv-landing-grid, .dv-table-wrap, .screens-grid) { margin-left: 0 !important; }
html[data-theme] .cs-table :is(th, td):first-child { padding-left: 20px; }
html[data-theme] .cs-table th { background: var(--chrome) !important; }

/* Number notes: dark ink on the pastel paper (beats the inline green in the page) */
html[data-theme] .cs-meta-card .cs-meta-label { color: var(--ink) !important; opacity: 1; }
html[data-theme] .cs-meta-card .cs-meta-value { color: var(--ink) !important; font-weight: 700; letter-spacing: -.02em; }

/* Feature preference bars read as meters: thick track, ink outline, coloured fill */
html[data-theme] .cs-feature-bar {
    height: 18px; margin: 12px 0 14px;
    background: var(--chrome) !important;
    border: 2px solid var(--ink); border-radius: 0; overflow: hidden;
}
html[data-theme] .cs-feature-bar-fill { height: 100%; background: var(--yellow) !important; border-right: 2px solid var(--ink); border-radius: 0; }
html[data-theme] .cs-feature:nth-child(4n+2) .cs-feature-bar-fill { background: var(--cyan) !important; }
html[data-theme] .cs-feature:nth-child(4n+3) .cs-feature-bar-fill { background: var(--purple) !important; }
html[data-theme] .cs-feature:nth-child(4n+4) .cs-feature-bar-fill { background: var(--pink-soft) !important; }
html[data-theme] .cs-feature-num { font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 500; }

/* Persona notes: all text in ink so it reads on blue and yellow paper */
html[data-theme] .cs-persona-card :is(.persona-goal-title, .persona-pain-title) { color: var(--ink) !important; }
html[data-theme] .cs-persona-card :is(.persona-goal-title, .persona-pain-title) svg { stroke: var(--ink); }
html[data-theme] .cs-persona-card :is(.cs-persona-detail p, .persona-goal p, .persona-pain p, .cs-persona-header span) { color: var(--ink) !important; opacity: 1; }
html[data-theme] .cs-persona-card .cs-persona-detail { border-color: rgba(25, 21, 16, .35) !important; }
html[data-theme] .cs-persona-card .cs-persona-header { border-color: rgba(25, 21, 16, .2) !important; }

/* ---------- Sprint timeline: pastel stops on a dashed ink line ---------- */
html[data-theme] .nd-timeline { margin: 48px 0 40px !important; padding: 10px 0 6px; }
html[data-theme] .nd-timeline-node:not(:last-child)::after { top: 22px; left: calc(50% + 26px); width: calc(100% - 52px); border-top: 2px dashed var(--ink); }
html[data-theme] .nd-timeline-circle {
    width: 44px; height: 44px;
    font-family: var(--ff-mono); font-size: 1rem; font-weight: 500; color: var(--ink);
    background: var(--yellow) !important; border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}
html[data-theme] .nd-timeline-node:nth-child(2) .nd-timeline-circle { background: var(--pink-soft) !important; }
html[data-theme] .nd-timeline-node:nth-child(3) .nd-timeline-circle { background: var(--cyan) !important; }
html[data-theme] .nd-timeline-node:nth-child(4) .nd-timeline-circle { background: var(--mint) !important; }
html[data-theme] .nd-timeline-node:nth-child(5) .nd-timeline-circle { background: var(--purple) !important; }
html[data-theme] .nd-timeline-node:nth-child(6) .nd-timeline-circle { background: var(--yellow-soft) !important; }
html[data-theme] .nd-timeline-label { font-family: var(--ff-mono); font-weight: 500; font-size: .72rem; color: var(--ink); }

/* ---------- Day / process steps: lined index cards, like the homepage Writing cards ---------- */
html[data-theme] .cs-process-grid { gap: 30px 28px !important; }
html[data-theme] .cs-process-card, html[data-theme] .cs-process-card:not(:first-child) {
    padding: 22px 24px 26px !important;
    background-color: #fff !important;
    background-image: linear-gradient(to bottom, transparent 50px, rgba(255, 77, 141, .45) 50px 52px, transparent 52px),
        repeating-linear-gradient(to bottom, transparent 0 27px, rgba(43, 87, 214, .14) 27px 28px) !important;
    background-position: 0 0, 0 52px !important;
    box-shadow: 0 14px 24px -16px rgba(25, 21, 16, .5) !important;
    rotate: -1deg;
    transition: rotate .3s var(--ease), translate .3s var(--ease);
}
html[data-theme] .cs-process-card:nth-child(even) { rotate: 1deg; }
html[data-theme] .cs-process-card:nth-child(3n) { rotate: -.4deg; }
html[data-theme] .cs-process-card:hover { rotate: 0deg; translate: 0 -6px; }
html[data-theme] .cs-process-card .cs-process-num { display: block; font-size: .78rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3) !important; }
html[data-theme] .cs-process-card h3 { margin: 26px 0 8px; font-size: 1.3rem; }
html[data-theme] .cs-process-card p { font-size: .95rem; line-height: 1.75; }

/* ---------- Ideation: taped sticky notes, like the homepage "Four moves" ---------- */
html[data-theme] .cs-idea-grid { gap: 34px 28px !important; padding-top: 14px; }
html[data-theme] .cs-idea-card, html[data-theme] .cs-section-alt .cs-idea-card {
    position: relative;
    padding: 30px 24px 26px !important;
    background: var(--yellow) !important;
    box-shadow: 0 14px 22px -14px rgba(25, 21, 16, .45) !important;
    rotate: -2deg;
    transition: rotate .3s var(--ease), translate .3s var(--ease);
}
html[data-theme] .cs-idea-card::before {
    content: ""; position: absolute; top: -13px; left: 50%; translate: -50% 0; rotate: -3deg;
    width: 86px; height: 24px;
    background: rgba(255, 255, 255, .6); box-shadow: 0 1px 2px rgba(25, 21, 16, .12);
}
html[data-theme] .cs-idea-card:nth-child(4n+2) { background: var(--pink-soft) !important; rotate: 1.6deg; }
html[data-theme] .cs-idea-card:nth-child(4n+3) { background: var(--mint) !important; rotate: -1deg; }
html[data-theme] .cs-idea-card:nth-child(4n+4) { background: var(--cyan) !important; rotate: 2deg; }
html[data-theme] .cs-idea-card:hover { rotate: 0deg; translate: 0 -6px; }
html[data-theme] .cs-idea-card h3 { font-family: var(--ff-hand); font-weight: 400 !important; font-size: 1.9rem; line-height: 1.05; letter-spacing: 0; color: var(--ink) !important; margin-bottom: 14px; }
html[data-theme] .cs-idea-card li { color: var(--ink) !important; font-size: .95rem; line-height: 1.5; }
html[data-theme] .cs-idea-card li::before { background: var(--ink) !important; color: var(--ink) !important; }
/* Four steps sit in one row instead of three plus an orphan */
html[data-theme] .cs-process-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 860px) { html[data-theme] .cs-process-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { html[data-theme] .cs-process-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr !important; } }

/* ---------- DocVault: six pillars as labelled boxes in one system ---------- */
html[data-theme] .cs-features.dv-pillars { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px !important; }
html[data-theme] .dv-pillars .cs-feature, html[data-theme] .dv-pillars .cs-feature:nth-child(n) {
    display: flex !important; flex-direction: column; padding: 0 !important; rotate: 0deg;
    background: #fff !important; border: 2px solid var(--ink) !important;
    box-shadow: 5px 5px 0 var(--ink) !important;
    transition: translate .2s var(--ease), box-shadow .2s var(--ease);
}
html[data-theme] .dv-pillars .cs-feature:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--ink) !important; }
html[data-theme] .dv-pillars .cs-feature-num {
    display: block; padding: 12px 20px 8px;
    font-family: var(--ff-pixel) !important; font-weight: 700; font-size: 2.6rem !important; line-height: 1;
    background: var(--yellow); border-bottom: 2px solid var(--ink);
}
html[data-theme] .dv-pillars .cs-feature:nth-child(2) .cs-feature-num { background: var(--cyan); }
html[data-theme] .dv-pillars .cs-feature:nth-child(3) .cs-feature-num { background: var(--pink-soft); }
html[data-theme] .dv-pillars .cs-feature:nth-child(4) .cs-feature-num { background: var(--mint); }
html[data-theme] .dv-pillars .cs-feature:nth-child(5) .cs-feature-num { background: var(--purple); }
html[data-theme] .dv-pillars .cs-feature:nth-child(6) .cs-feature-num { background: var(--yellow-soft); }
html[data-theme] .dv-pillars .cs-feature > div { padding: 18px 20px 22px; }
html[data-theme] .dv-pillars .cs-feature h3 { font-size: 1.15rem; margin-bottom: 8px; }
html[data-theme] .dv-pillars .cs-feature p { font-size: .95rem; color: var(--ink-2) !important; }

/* ---------- DocVault: user flows as numbered tickets on a card ---------- */
html[data-theme] .dv-flow-card, html[data-theme] .dv-flow-card:nth-child(n) {
    counter-reset: step;
    margin: 0 0 30px !important; padding: 26px 28px 28px !important; rotate: 0deg;
    background: #fff !important; border: 2px solid var(--ink) !important;
    box-shadow: 5px 5px 0 var(--ink) !important; clip-path: none;
}
html[data-theme] .dv-flow-card:hover { translate: none; }
html[data-theme] .dv-flow-card h3 { display: inline; margin-right: 12px; font-size: 1.3rem; }
html[data-theme] .dv-flow-type {
    display: inline-block; vertical-align: 3px; padding: 3px 10px;
    font-family: var(--ff-mono); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink) !important; background: var(--yellow);
}
html[data-theme] .dv-flow-card:nth-child(2) .dv-flow-type { background: var(--cyan); }
html[data-theme] .dv-flow-card:nth-child(3) .dv-flow-type { background: var(--pink-soft); }
html[data-theme] .dv-flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 20px; }
html[data-theme] .dv-flow-step {
    counter-increment: step;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 0 !important;
    font-size: .88rem; color: var(--ink) !important;
    background: var(--chrome) !important; border: 1.5px solid var(--ink) !important;
}
html[data-theme] .dv-flow-step::before { content: counter(step, decimal-leading-zero); font-family: var(--ff-mono); font-weight: 500; font-size: .72rem; color: var(--ink-3); }
/* The last step is the outcome the flow exists for */
html[data-theme] .dv-flow-step:last-child { background: var(--mint) !important; font-weight: 600; box-shadow: 2px 2px 0 var(--ink); }
html[data-theme] .dv-flow-arrow { color: var(--ink) !important; font-size: 1rem; font-weight: 700; }

/* ---------- DocVault: landing page sections stacked in a browser frame, in page order ---------- */
html[data-theme] .dv-landing-grid {
    counter-reset: sec;
    display: block !important; position: relative;
    padding: 46px 0 0 !important;
    background: #fff !important; border: 3px solid var(--ink) !important;
    box-shadow: 8px 8px 0 var(--ink); filter: none;
}
html[data-theme] .dv-landing-grid::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 44px;
    background: radial-gradient(circle, var(--pink) 0 6px, transparent 7px) 22px 50% / 14px 14px no-repeat,
        radial-gradient(circle, var(--yellow) 0 6px, transparent 7px) 42px 50% / 14px 14px no-repeat,
        radial-gradient(circle, var(--green) 0 6px, transparent 7px) 62px 50% / 14px 14px no-repeat,
        var(--chrome);
    border-bottom: 3px solid var(--ink);
}
html[data-theme] .dv-landing-card, html[data-theme] .dv-landing-card:nth-child(n) {
    counter-increment: sec;
    display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 15rem); gap: 6px 28px; align-items: start;
    padding: 24px 28px !important; rotate: 0deg; clip-path: none;
    border-bottom: 2px dashed rgba(25, 21, 16, .2) !important; background: transparent !important;
}
html[data-theme] .dv-landing-card:nth-child(even) { background: rgba(236, 227, 209, .35) !important; }
html[data-theme] .dv-landing-card:last-child { border-bottom: 0 !important; }
html[data-theme] .dv-landing-card::before {
    content: counter(sec, decimal-leading-zero); grid-row: 1 / span 2;
    font-family: var(--ff-pixel); font-weight: 700; font-size: 2.6rem; line-height: .9; color: var(--ink);
}
html[data-theme] .dv-landing-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.2rem; }
html[data-theme] .dv-landing-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: .95rem; }
html[data-theme] .dv-landing-eyebrow {
    grid-column: 3; grid-row: 1 / span 2; align-self: center;
    font-family: var(--ff-hand) !important; font-weight: 400 !important; font-size: 1.45rem !important;
    line-height: 1.15; letter-spacing: 0 !important; text-transform: none !important; color: var(--blue) !important;
}
@media (max-width: 860px) {
    html[data-theme] .cs-features.dv-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-theme] .dv-landing-card, html[data-theme] .dv-landing-card:nth-child(n) { grid-template-columns: 56px minmax(0, 1fr); }
    html[data-theme] .dv-landing-eyebrow { grid-column: 2; grid-row: auto; }
}
@media (max-width: 560px) {
    html[data-theme] .cs-features.dv-pillars { grid-template-columns: 1fr; }
}