/* Handoff: Marwood Kell Studio. A studio crit wall: a white wall, Klein blue for the field and the actions, a cork board
   running the full width, white prints pinned at slight angles, kraft tags for status, kraft envelopes for briefs, a
   punched time card for the Care plan, and the red dot sticker that lands on an approved round. Type: Instrument Serif
   (display) with Instrument Sans (UI). The kit (kit.css) keeps behaviour and layout; every look is set here.
   Colours: edit the tokens below. Text on paper always uses the .ho-paper tokens, so prints stay white after hours. */
:root {
  --ho-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ho-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ho-ink: #141414;
  --ho-muted: #4d4d4d;
  --ho-wall: #fafafa;
  --ho-klein: #1f3fd1;
  --ho-klein-deep: #1832ad;
  --ho-cork: #c79a6b;
  --ho-cork-text: #141414;
  --ho-kraft: #d8b98a;
  --ho-kraft-deep: #c6a271;
  --ho-red: #e23b2e;
  --ho-paper: #ffffff;
  --ho-paper-2: #f3f0ea;
  --ho-print-shadow: 0 1px 1px rgba(40, 25, 10, .16), 0 16px 22px -14px rgba(40, 25, 10, .6);
  --ho-on-klein: #ffffff;
  --ho-klein-soft: #e6eafb;
  --ho-faint: #5c5c5c;
  --ho-ok: #1d6b3f; --ho-ok-soft: #e3f1e7; --ho-warn: #74490f; --ho-warn-soft: #f3e6d0; --ho-danger: #b42318;
  --k-brand: var(--ho-klein);
  --k-brand-ink: #ffffff;
  --k-brand-soft: #e6eafb;
  --k-hero: var(--ho-klein);
  --k-hero-ink: #ffffff;
  --k-gold: var(--ho-kraft);
  --k-bg: var(--ho-wall);
  --k-surface: #ffffff;
  --k-surface-2: #f1efea;
  --k-line: rgba(20, 20, 20, .12);
  --k-line-strong: rgba(20, 20, 20, .3);
  --k-text: var(--ho-ink);
  --k-muted: #4d4d4d;
  --k-faint: #5c5c5c;
  --k-ok: #1d6b3f;
  --k-ok-soft: #e3f1e7;
  --k-warn: #74490f;
  --k-warn-soft: #f3e6d0;
  --k-info: var(--ho-klein);
  --k-info-soft: #e6eafb;
  --k-font: var(--ho-sans);
  --k-font-display: var(--ho-serif);
  --k-r-s: 2px; --k-r-m: 3px; --k-r-l: 4px; --k-r-xl: 6px;
  --k-shadow-1: none;
  --k-shadow-2: var(--ho-print-shadow);
  --k-max: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ho-wall: #0c0f1c;
    --ho-cork: #5c4430;
    --ho-cork-text: #f2e7d6;
    --ho-kraft: #b8956a;
    --ho-kraft-deep: #a5845b;
    --ho-paper: #f4f1ea;
    --ho-paper-2: #e8e3d9;
    --ho-print-shadow: 0 1px 1px rgba(0, 0, 0, .5), 0 18px 26px -14px rgba(0, 0, 0, .85);
    --ho-klein-deep: #16248a;
    --k-brand: #8c9dff;
    --k-brand-ink: #0c0f1c;
    --k-brand-soft: rgba(140, 157, 255, .16);
    --k-hero: #1a2fa8;
    --k-bg: var(--ho-wall);
    --k-surface: #161a2c;
    --k-surface-2: #1e2338;
    --k-line: rgba(236, 238, 245, .12);
    --k-line-strong: rgba(236, 238, 245, .28);
    --k-text: #eceef5;
    --k-muted: #a8aec4;
    --k-faint: #9399b0;
    --k-ok: #6fd39a; --k-ok-soft: rgba(111, 211, 154, .14);
    --k-warn: #e8b66a; --k-warn-soft: rgba(232, 182, 106, .14);
    --k-info: #8c9dff; --k-info-soft: rgba(140, 157, 255, .16);
  }
}
/* Paper: prints, cards and forms keep white paper and ink, in both schemes. */
.ho-paper, .ho-print, .ho-crit, .ho-brief, .k-app .k-account, .ho-out, .k-toast {
  --k-text: var(--ho-ink); --k-muted: var(--ho-muted); --k-faint: var(--ho-faint);
  --k-surface: var(--ho-paper); --k-surface-2: var(--ho-paper-2); --k-bg: var(--ho-paper);
  --k-line: rgba(20, 20, 20, .12); --k-line-strong: rgba(20, 20, 20, .3);
  --k-brand: var(--ho-klein); --k-brand-ink: var(--ho-on-klein); --k-brand-soft: var(--ho-klein-soft);
  --k-info: var(--ho-klein); --k-info-soft: var(--ho-klein-soft);
  --k-ok: var(--ho-ok); --k-ok-soft: var(--ho-ok-soft); --k-warn: var(--ho-warn); --k-warn-soft: var(--ho-warn-soft); --k-danger: var(--ho-danger);
  --ho-hole: var(--ho-paper);
  color: var(--k-text);
}

/* ---------- base ---------- */
body.k-app { font-family: var(--ho-sans); background: var(--ho-wall); }
.k-app :focus-visible { outline: 3px solid var(--ho-red); outline-offset: 2px; }
.k-app ::selection { background: var(--ho-klein); color: #fff; }
.k-app :is(h1, h2, h3) { font-family: var(--ho-serif); font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
.k-app input::placeholder, .k-app textarea::placeholder { color: var(--k-faint); opacity: 1; }
.k-app em { font-style: italic; }
.ho-link { display: none; }
.ho-eyebrow { font: 600 .75rem/1.3 var(--ho-sans); letter-spacing: .14em; text-transform: uppercase; }
.k-btn .k-i { width: 20px; height: 20px; }
.k-app .k-btn { border-radius: 3px; font: 600 1rem/1 var(--ho-sans); letter-spacing: .01em; min-height: 48px; }
.k-app .k-btn:where(:not(.k-btn-2, .k-btn-line, .k-btn-ghost)) { background: var(--ho-klein); color: var(--ho-on-klein); }
.k-app .k-btn-2 { background: transparent; color: var(--k-text); box-shadow: inset 0 0 0 1.5px var(--k-line-strong); }
.k-app .k-btn-2:hover { box-shadow: inset 0 0 0 1.5px var(--k-text); }
.k-app .k-btn-s { min-height: 44px; }
.k-app a { text-underline-offset: 3px; }

/* ---------- the crit wall pieces ---------- */
/* Cork: speckled board, full width. */
.ho-cork {
  background-color: var(--ho-cork); color: var(--ho-cork-text); --ho-hole: var(--ho-cork);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(70, 40, 15, .38) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255, 236, 205, .3) 0 1px, transparent 1.7px),
    radial-gradient(circle at 45% 80%, rgba(70, 40, 15, .26) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 85% 20%, rgba(255, 240, 215, .22) 0 1.3px, transparent 2px),
    radial-gradient(ellipse at 50% 50%, rgba(120, 75, 35, .18), transparent 70%);
  background-size: 7px 7px, 11px 11px, 13px 13px, 19px 19px, 140px 90px;
  box-shadow: inset 0 10px 14px -10px rgba(0, 0, 0, .35), inset 0 -10px 14px -10px rgba(0, 0, 0, .3);
}
/* A print: white paper, slight tilt, shadow lifting off the cork. */
.ho-print { position: relative; background: var(--ho-paper); box-shadow: var(--ho-print-shadow); transform: rotate(var(--ho-tilt, 0deg)); border-radius: 1px; }
/* Pushpin, drawn. */
.ho-pin::before { content: ""; position: absolute; z-index: 3; top: -8px; left: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #b9c8ff 0 1.5px, #4a68ea 3px, var(--ho-klein) 5.5px, var(--ho-klein-deep) 9px); box-shadow: 2px 4px 3px -1px rgba(0, 0, 0, .4); pointer-events: none; }
/* Washi tape for sketches. */
.ho-tape::before { content: ""; position: absolute; z-index: 3; top: -12px; left: calc(50% - 52px); width: 104px; height: 26px; transform: rotate(-3deg);
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .5) 0 5px, rgba(255, 255, 255, .25) 5px 10px), rgba(140, 160, 240, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); pointer-events: none; }
/* Kraft tag with a punched hole. */
.ho-tag, .k-app .k-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; max-width: 100%; padding: 4px 10px 4px 21px; border-radius: 0 3px 3px 0;
  background: radial-gradient(circle at 10px 50%, var(--ho-hole, var(--ho-paper)) 0 3px, rgba(0, 0, 0, .25) 3.3px, transparent 3.8px), var(--ho-kraft);
  color: var(--ho-ink); font: 600 .6875rem/1.15 var(--ho-sans); letter-spacing: .1em; text-transform: uppercase; white-space: normal;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
.k-app .k-badge-state::before { display: none; }
.k-app .k-badge .k-i { width: 14px; height: 14px; stroke-width: 2.2; }
.k-app .ho-tag-klein, .k-app .k-badge-brand,.k-app [data-k-state="new"] .k-badge-state { background: radial-gradient(circle at 10px 50%, var(--ho-hole, var(--ho-paper)) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), var(--ho-klein); color: #fff; }
.k-app [data-k-state="active"] .k-badge-state, .k-app .ho-badge-warn { background: radial-gradient(circle at 10px 50%, var(--ho-hole, var(--ho-paper)) 0 3px, rgba(0, 0, 0, .25) 3.3px, transparent 3.8px), var(--ho-kraft); color: var(--ho-ink); }
.k-app [data-k-state="ok"] .k-badge-state, .k-app .k-badge-ok { background: radial-gradient(circle at 10px 50%, var(--ho-hole, var(--ho-paper)) 0 3px, rgba(0, 0, 0, .25) 3.3px, transparent 3.8px), #cfe3d3; color: #12452a; }
.k-app [data-k-state="done"] .k-badge-state { background: radial-gradient(circle at 10px 50%, var(--ho-hole, var(--ho-paper)) 0 3px, rgba(0, 0, 0, .2) 3.3px, transparent 3.8px), #e2ded5; color: #3d3d3d; }
/* The red dot sticker: a flat Pin Red disc with a white tick, over the card's top right corner (12px over the edge). */
.ho-dot { position: absolute; z-index: 4; width: 44px; height: 44px; border-radius: 50%; right: -12px; top: -12px;
  background: var(--ho-red); box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 4px 7px rgba(0, 0, 0, .18); }
.ho-dot::after { content: ""; position: absolute; left: 16px; top: 17px; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg); }
@keyframes ho-drop { 0% { opacity: 0; transform: translateY(-34px) scale(1.6); } 65% { opacity: 1; transform: translateY(3px) scale(.92); } 100% { opacity: 1; transform: none; } }
.ho-dot-drop { animation: ho-drop .44s cubic-bezier(.3, .7, .4, 1.2) both; }
.ho-date { font: 500 .8125rem/1.2 var(--ho-sans); color: var(--k-muted); font-variant-numeric: tabular-nums; }
.ho-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9375rem; }
.ho-ticks li { position: relative; padding-left: 24px; }
.ho-ticks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 11px; height: 6px; border: solid var(--k-brand); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.ho-label { display: inline-block; justify-self: start; background: var(--ho-paper); color: var(--ho-ink); padding: 8px 16px 6px; font: 400 1.5rem/1.1 var(--ho-serif); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transform: rotate(-1deg); position: relative; }
.ho-label a { font: 600 .8125rem/1 var(--ho-sans); color: var(--ho-klein); margin-left: 12px; }

/* ---------- public pages ---------- */
.ho-pub .k-main { max-width: none; padding: 0 0 var(--k-8); display: block; }
.ho-wrap { max-width: var(--k-max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 1024px) { .ho-wrap { padding: 0 40px; } }
.ho-pub .k-top { background: var(--ho-klein); color: #fff; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ho-pub .k-top .k-brand { color: #fff; font: 400 1.5rem/1 var(--ho-serif); letter-spacing: 0; }
.ho-pub .k-top-links a { color: rgba(255, 255, 255, .86); font-weight: 500; }
.ho-pub .k-top-links a:hover, .ho-pub .k-top-links a[aria-current="page"] { color: #fff; }
.ho-pub .k-top-links a:hover { background: var(--ho-klein-deep); }
.ho-pub-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 3px; background: #fff; color: var(--ho-klein); font: 600 .9375rem/1 var(--ho-sans); text-decoration: none; white-space: nowrap; }
.ho-menu { position: relative; }
.ho-menu summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 3px; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.ho-menu summary::-webkit-details-marker { display: none; }
.ho-menu nav { position: absolute; right: 0; top: 52px; z-index: 40; min-width: 230px; display: grid; padding: 8px; background: var(--ho-paper); box-shadow: var(--ho-print-shadow); }
.ho-menu nav a { padding: 12px 14px; color: var(--ho-ink); text-decoration: none; font-weight: 600; }
.ho-menu nav a:hover { background: var(--ho-paper-2); }
@media (min-width: 900px) { .ho-menu { display: none; } }
@media (max-width: 899px) { .ho-pub .k-top-links { display: none; } .ho-pub .k-top .k-brand { font-size: 1.25rem; } .ho-pub .k-top .k-brand span { white-space: normal; line-height: 1; overflow: visible; } }
.ho-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 3px; font: 600 1rem/1 var(--ho-sans); text-decoration: none; }
.ho-btn-paper { background: #fff; color: var(--ho-klein); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.ho-btn-line { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.ho-btn-line:hover { box-shadow: inset 0 0 0 1.5px #fff; }

/* Poster */
.ho-poster { background: var(--ho-klein); color: #fff; overflow-x: clip; padding-top: 28px; }
@media (prefers-color-scheme: dark) { .ho-poster, .ho-pub .k-top, .ho-signin { background: #1a2fa8; } }
.ho-poster .ho-eyebrow { color: rgba(255, 255, 255, .85); }
.ho-poster h1 { font: 400 clamp(3.25rem, 15vw, 10rem)/.9 var(--ho-serif); letter-spacing: -.025em; margin-top: 14px; max-width: 11ch; }
.ho-poster h1 em { color: #fff; }
.ho-poster-lead { font-size: 1.0625rem; line-height: 1.5; margin-top: 18px; max-width: 46ch; color: rgba(255, 255, 255, .92); }
.ho-poster-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (min-width: 1024px) {
  .ho-poster { padding-top: 56px; }
  .ho-poster-text { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 56px; align-items: end; }
  .ho-poster-text .ho-eyebrow, .ho-poster-text h1 { grid-column: 1; }
  .ho-poster h1 { max-width: none; font-size: clamp(6rem, 9vw, 10rem); } .ho-poster h1 em { display: block; }
  .ho-poster-lead { grid-column: 1; grid-row: 3; font-size: 1.1875rem; margin-top: 28px; }
  .ho-poster-btns { grid-column: 1; grid-row: 4; justify-content: flex-start; }
  .ho-hero-print { display: block; grid-column: 2; grid-row: 1 / span 4; align-self: start; margin: 40px 0 0; --ho-tilt: -3deg; padding: 10px 10px 12px; }
  .ho-hero-print img { display: block; width: 100%; height: auto; }
}
@media (max-width: 1023px) { .ho-hero-print { display: none; } }
/* The cork strip breaks out of the blue. */
.ho-strip { position: relative; margin: 36px 10px -96px; padding: 40px 16px 34px; transform: rotate(-1.2deg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; align-items: start; }
.ho-strip .ho-print { margin: 0; padding: 7px 7px 10px; }
.ho-strip .ho-print img { display: block; width: 100%; height: auto; }
.ho-strip figcaption { margin-top: 8px; }
.ho-strip-a { --ho-tilt: -1.5deg; grid-column: 1 / -1; }
.ho-strip-b { --ho-tilt: 1.4deg; grid-column: 1 / -1; }
.ho-strip-c { --ho-tilt: -1deg; }
.ho-strip-d { --ho-tilt: 1.5deg; margin-top: 10px !important; }
.ho-strip .ho-dot { width: 44px; height: 44px; right: -12px; top: -12px; animation: ho-drop .5s .6s cubic-bezier(.3, .7, .4, 1.2) both; }
@media (min-width: 700px) { .ho-strip { grid-template-columns: 1.5fr 1.2fr .8fr .75fr; gap: 24px; } .ho-strip-a, .ho-strip-b { grid-column: auto; } .ho-strip-b { margin-top: 26px !important; } }
@media (min-width: 1024px) { .ho-strip { margin: 40px max(24px, calc((100vw - 1400px) / 2)) -150px; padding: 52px 48px 48px; gap: 36px; grid-template-columns: 1.25fr .9fr .8fr; } .ho-strip .ho-print { padding: 10px 10px 12px; } .ho-strip-a { display: none; } }
.ho-poster + .ho-sec { padding-top: 140px; }
@media (min-width: 1024px) { .ho-poster + .ho-sec { padding-top: 210px; } }

/* Sections */
.ho-sec { padding: 64px 0 0; }
@media (min-width: 1024px) { .ho-sec { padding-top: 112px; } }
.ho-sec-head { max-width: 60ch; margin-bottom: 32px; }
.ho-sec-head .ho-eyebrow { color: var(--k-brand); }
.ho-sec-head h2 { font: 400 clamp(2.5rem, 7vw, 5rem)/.95 var(--ho-serif); letter-spacing: -.02em; margin-top: 10px; }
.ho-sec-head h2 em { color: var(--k-brand); }
.ho-sec-head p { color: var(--k-muted); margin-top: 14px; font-size: 1.0625rem; }

/* The app at real scale, on cork */
.ho-demo { position: relative; display: grid; gap: 36px 24px; padding: 40px 18px 32px; margin: 0 -16px; }
.ho-demo-side { display: grid; gap: 36px; align-content: start; }
.ho-demo-round { --ho-tilt: -1deg; }
.ho-demo-side .ho-project { --ho-tilt: 1.2deg; }
.ho-demo-env { --ho-tilt: -1.4deg; }
.ho-demo-cap { display: none; }
@media (min-width: 1024px) {
  .ho-demo { margin: 0; padding: 56px 48px 72px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .ho-demo-cap { display: block; position: absolute; font: italic 400 1.375rem/1.1 var(--ho-serif); color: var(--ho-cork-text); background: none; }
  .ho-demo-cap-a { left: 48px; bottom: 26px; }
  .ho-demo-cap-b { right: 48px; bottom: 26px; }
}

/* How it works: kraft tags on a string */
.ho-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; position: relative; }
.ho-line li { position: relative; padding-left: 0; }
.ho-line h3 { font-size: 2rem; line-height: 1; margin-top: 12px; }
.ho-line p { color: var(--k-muted); margin-top: 8px; font-size: .9375rem; max-width: 34ch; }
.ho-line .ho-tag { --ho-hole: var(--ho-wall); }
@media (min-width: 900px) {
  .ho-line { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-top: 22px; }
  .ho-line::before { content: ""; position: absolute; left: -20px; right: -20px; top: 0; height: 2px; background: var(--ho-kraft-deep); border-radius: 2px; transform: rotate(-.3deg); }
  .ho-line li::before { content: ""; position: absolute; left: 10px; top: -22px; width: 1.5px; height: 24px; background: var(--ho-kraft-deep); }
  .ho-line li:nth-child(odd) .ho-tag { transform: rotate(-3deg); }
  .ho-line li:nth-child(even) .ho-tag { transform: rotate(2.5deg); }
}

/* Prices */
.ho-services { display: grid; gap: 40px; }
@media (min-width: 900px) { .ho-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: stretch; } }
.ho-service { padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.ho-service:nth-child(1) { --ho-tilt: -1deg; } .ho-service:nth-child(2) { --ho-tilt: .8deg; } .ho-service:nth-child(3) { --ho-tilt: -.6deg; }
.ho-service h3 { font-size: 2.25rem; line-height: 1; }
.ho-from { color: var(--ho-muted); font-size: .9375rem; }
.ho-from b { font: 400 2.5rem/1 var(--ho-serif); color: var(--ho-ink); margin-right: 4px; }
.ho-service .k-btn { margin-top: auto; }
.ho-care-card { outline: 3px solid var(--ho-klein); outline-offset: -3px; }

/* Time card punches (Care) */
.ho-timecard { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ho-punch { aspect-ratio: 1; border: 1.5px solid rgba(31, 63, 209, .45); border-radius: 2px; position: relative; background: #fff; }
.ho-punch.is-on::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3f5be6, var(--ho-klein) 60%, #142a99); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.ho-timecard-s { max-width: 260px; }

/* Sign-in band */
.ho-signin { background: var(--ho-klein); color: #fff; margin-top: 96px; padding: 64px 0; }
.ho-signin h2 { font: 400 clamp(3rem, 9vw, 6.5rem)/.92 var(--ho-serif); letter-spacing: -.02em; margin-top: 10px; }
.ho-signin .ho-eyebrow { color: rgba(255, 255, 255, .85); }
.ho-signin-grid > div:first-child > p { margin-top: 16px; max-width: 42ch; color: rgba(255, 255, 255, .92); }
.ho-signin-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .ho-signin { padding: 96px 0; } .ho-signin-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 64px; } }
.ho-studio { padding: 28px 24px; --ho-tilt: 1.2deg; display: grid; gap: 14px; color: var(--ho-ink); }
.ho-studio h3 { font-size: 2rem; }
.ho-studio > p { color: var(--ho-muted); font-size: .9375rem; }
.ho-studio dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; font-size: .9375rem; }
.ho-studio dt { color: var(--ho-muted); }
.ho-studio dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 399px) { .ho-studio dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ho-studio dt { margin-top: 8px; } }
.ho-studio a { color: var(--ho-klein); }
.ho-pub .k-pubfoot { border-top: 0; }
.ho-pub .k-pubfoot a { color: var(--k-brand); }

/* ---------- member app shell ---------- */
/* Phones: a Klein strip with the studio's name and the Sign in link. Desktop uses the blue tab bar instead. */
.ho-app .k-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; background: var(--ho-klein); color: #fff; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ho-app .k-top .k-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font: 400 1.25rem/1.1 var(--ho-serif); color: #fff; letter-spacing: 0; }
.ho-app .k-top .k-brand img { border-radius: 4px; flex: none; }
.ho-app .k-top a.k-signin { background: #fff; color: var(--ho-klein); border-radius: 3px; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; font: 600 .9375rem/1 var(--ho-sans); text-decoration: none; }
.ho-app .k-top .k-avatar { background: #fff; color: var(--ho-klein); border-radius: 50%; font: 600 .875rem/1 var(--ho-sans); }
/* Phones: a white bar with a Klein active tab. The Account tab sits in the bar. */
.ho-app .k-tabs { background: var(--ho-paper); border-top: 1px solid var(--k-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ho-app .k-tabs a { color: var(--ho-muted); font: 600 .75rem/1.1 var(--ho-sans); position: relative; min-height: 52px; }
.ho-app .k-tabs a[aria-current="page"] { color: var(--ho-klein); background: none; }
@media (min-width: 1024px) {
  .ho-app .k-top { display: none; }
  /* The top bar is hidden here, so the grid drops its row: an empty first row would be filled by the next auto-placed
     item (the demo bar's spacer), leaving a blank band above the tabs. */
  body.k-app.ho-app[data-k-nav="top"] { grid-template-rows: auto 1fr; grid-template-areas: "nav" "main"; }
  .ho-app .k-top .k-brand { font-size: 1.75rem; }
  .ho-app .k-top .k-avatar { display: none; }
  .k-app.ho-app[data-k-nav="top"] .k-tabs { background: var(--ho-klein); border-bottom: 0; gap: 4px; padding-top: 8px; }
  .k-app.ho-app[data-k-nav="top"] .k-tabs .k-tabs-brand { display: flex; align-items: center; gap: 10px; margin: 0 20px 0 0; min-height: 0; padding: 0; color: #fff; font: 400 1.5rem/1 var(--ho-serif); }
  .k-app.ho-app[data-k-nav="top"] .k-tabs .k-tabs-brand img { width: 32px; height: 32px; border-radius: 4px; }
  .k-app.ho-app[data-k-nav="top"] .k-tabs a { color: rgba(255, 255, 255, .86); min-height: 50px; padding: 0 20px; font: 600 .9375rem/1 var(--ho-sans); border-radius: 0; }
  .k-app.ho-app[data-k-nav="top"] .k-tabs a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
  .k-app.ho-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { background: var(--ho-kraft); color: var(--ho-ink); box-shadow: none; clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
  .k-tabs .ho-tab-desk { display: flex; }
  .k-app.ho-app[data-k-nav="top"] .k-tabs .ho-tab-desk { margin-left: auto; }
}
@media (prefers-color-scheme: dark) and (min-width: 1024px) { .k-app.ho-app[data-k-nav="top"] .k-tabs { background: #1a2fa8; } }
.ho-app .k-main { padding-bottom: calc(var(--k-tabbar) + 48px); }
@media (min-width: 1024px) { .ho-app .k-main { padding-bottom: 64px; } }
/* Full-width cork inside the page. */
.ho-bleed { margin-inline: -16px; padding: 32px 16px 36px; }
@media (min-width: 1024px) { .ho-bleed { margin-inline: calc(50% - 50vw); padding: 48px calc(50vw - 50%) 56px; } .ho-app .k-main { overflow-x: clip; } }
/* Page heads: the situation, set large. */
.ho-app .k-pagehead { margin: 20px 0 22px; align-items: flex-end; }
.ho-app .k-pagehead .k-kicker, .ho-app .k-pagehead .ho-eyebrow { font: 600 .75rem/1.3 var(--ho-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--k-brand); margin: 0 0 6px; }
.ho-app .k-pagehead h1 { font: 400 clamp(2.75rem, 12vw, 3.5rem)/.95 var(--ho-serif); letter-spacing: -.02em; }
@media (min-width: 1024px) { .ho-app .k-pagehead { margin: 36px 0 32px; } .ho-app .k-pagehead h1 { font-size: clamp(3.5rem, 5.6vw, 5.5rem); } }
.ho-app .k-pagehead-actions .k-btn { min-height: 48px; }
@media (max-width: 1023px) { .ho-app .k-pagehead-actions { display: none; } }
.ho-app .k-section-head h2, .ho-app .k-panel-head h2 { font: 400 1.75rem/1.05 var(--ho-serif); }
.ho-app .k-section-head a { color: var(--k-brand); font-weight: 600; }
.ho-app .ho-cork .k-section-head > a { color: var(--ho-cork-text); text-decoration: underline; }
.ho-app .k-foot { border-top: 1px solid var(--k-line); color: var(--k-muted); }
.ho-app .k-foot a { color: var(--k-muted); }
.k-col { display: grid; gap: 28px; align-content: start; }
.k-col > * { margin: 0; }

/* Signed out: a welcome in the wall's own look. */
.ho-app .k-welcome { padding-top: 16px; }
.ho-app .k-welcome-art { border-radius: 0; box-shadow: none; background: none; aspect-ratio: auto; overflow: visible; padding: 34px 22px 26px; }
.ho-app .k-welcome-art::after { display: none; }
.ho-welcome-print { padding: 8px 8px 10px; --ho-tilt: -1.4deg; margin: 0; }
.ho-welcome-print img { display: block; width: 100%; height: auto; }
.ho-app .k-welcome-art figcaption { position: static; color: var(--ho-cork-text); margin-top: 18px; font: italic 400 1.25rem/1.2 var(--ho-serif); }
.ho-app .k-welcome-art .ho-dot { right: 30px; top: 46px; }
.ho-h1 { font: 400 clamp(3rem, 12vw, 5.75rem)/.92 var(--ho-serif); letter-spacing: -.025em; }
.ho-h1 em { color: var(--k-brand); }
.ho-app .k-welcome .k-kicker { font: 600 .75rem/1.3 var(--ho-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--k-brand); }
.ho-app .k-welcome > div { display: grid; gap: 18px; }
.ho-app .k-perks { display: grid; gap: 10px; }
.ho-app .k-perks .k-tile { background: var(--ho-kraft); color: var(--ho-ink); border-radius: 2px; }
.ho-app .k-help { color: var(--k-muted); }
/* Inner screens signed out: a pinned card on cork. */
.ho-out-wall { padding: 48px 16px; display: grid; justify-items: center; }
.ho-out { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 36px 28px 30px; max-width: 520px; --ho-tilt: -.8deg; }
.ho-out h2 { font-size: 2.25rem; line-height: 1; }
.ho-out p { max-width: 40ch; color: var(--ho-muted); }
.ho-out .k-help a { color: var(--ho-klein); }
.ho-out-list { text-align: left; }

/* ---------- Home ---------- */
.ho-home-grid { display: grid; gap: 40px; align-items: start; }
.ho-review-slot, .ho-side { display: grid; gap: 34px; align-content: start; min-width: 0; }
@media (min-width: 1024px) { .ho-home-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } .ho-review-slot { position: sticky; top: 24px; } }
.ho-todo { display: grid; gap: 34px; }
.ho-todo:empty { display: none; }
/* Action prints */
.ho-task { display: grid; gap: 12px; padding: 22px 20px 20px; --ho-tilt: -.8deg; background: var(--ho-paper); }
.ho-task-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ho-task h3 { font: italic 400 2rem/1 var(--ho-serif); }
.ho-task p { color: var(--ho-muted); font-size: .9375rem; line-height: 1.5; }
.ho-task .k-btn-row { gap: 10px; }
.ho-task .k-btn-row .k-btn { flex: 1 1 auto; }
.ho-round-art { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; background: var(--ho-paper-2); }
.ho-round-art img { display: block; width: 100%; height: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ho-round-art img:first-child { transform: rotate(-1deg); }
.ho-round-art img:last-child { transform: rotate(1deg); }
.ho-review-slot .ho-task:not(.ho-task-wait, .ho-task-quote), .ho-demo-round { padding: 26px 26px 24px; }
@media (min-width: 1024px) { .ho-review-slot .ho-task:not(.ho-task-wait, .ho-task-quote) h3, .ho-demo-round h3 { font-size: 3.25rem; } .ho-review-slot .ho-task:not(.ho-task-wait, .ho-task-quote) p { font-size: 1rem; } .ho-round-art { padding: 18px; gap: 16px; } }
@media (max-width: 599px) { .ho-round-art { padding: 8px; } }
.ho-task-wait, .ho-task-quote { --ho-tilt: 1.2deg; background: var(--ho-paper); }
.ho-task-wait h3, .ho-task-quote h3 { font-size: 1.625rem; }
.ho-todo > .ho-task-quote:not([data-k-state="active"]) { display: none; }
.ho-plainq { quotes: none; }
.ho-sent { --ho-tilt: 0deg; }
.ho-sent-note { font-weight: 600; color: var(--ho-muted) !important; display: flex; align-items: center; gap: 8px; }
.ho-env .ho-sent-note { color: var(--ho-ink) !important; }
.ho-sent-note::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #1d6b3f; flex: none; }
.ho-caught { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 16px 18px; background: var(--ho-paper); color: var(--ho-ink); box-shadow: var(--ho-print-shadow); font-weight: 600; transform: rotate(-.6deg); }
.ho-caught .k-i { color: #1d6b3f; }
.ho-caught a { color: var(--ho-klein); margin-left: auto; }
.ho-caught[hidden] { display: none; }
/* Project card: phase tags and the next call */
.ho-projects { display: grid; gap: 30px; }
.ho-project { padding: 24px 22px 22px; --ho-tilt: 1deg; }
.ho-projects > .ho-project + .ho-project { --ho-tilt: -1.2deg; }
.ho-project-kicker, .ho-project .k-hero-top { font: 600 .75rem/1.3 var(--ho-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ho-klein); }
.ho-project .k-hero-top { display: block; padding: 0; margin: 0; border: 0; opacity: 1; }
.ho-project-name { font: italic 400 2.125rem/1 var(--ho-serif); margin-top: 8px; color: var(--ho-ink); }
.ho-phase-tags, .ho-project .k-steps { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 18px; }
.ho-phase-tags li, .ho-project .k-steps li { padding: 4px 9px 4px 19px; min-height: 26px; display: inline-flex; align-items: center; font: 600 .6875rem/1.1 var(--ho-sans); letter-spacing: .08em; text-transform: uppercase; color: #3d3d3d;
  background: radial-gradient(circle at 9px 50%, var(--ho-paper) 0 3px, rgba(0, 0, 0, .2) 3.3px, transparent 3.8px), #ece6da; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); white-space: nowrap; animation: none; }
.ho-phase-tags li::before, .ho-project .k-steps li::before { display: none; }
.ho-phase-tags li.k-done, .ho-project .k-steps li.k-done { background: radial-gradient(circle at 9px 50%, var(--ho-paper) 0 3px, rgba(0, 0, 0, .25) 3.3px, transparent 3.8px), #d8b98a; color: var(--ho-ink); }
.ho-phase-tags li.k-done::after, .ho-project .k-steps li.k-done::after { content: ""; width: 8px; height: 4px; margin-left: 6px; border: solid var(--ho-ink); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translateY(-1px); }
.ho-phase-tags li.k-now, .ho-project .k-steps li.k-now { background: radial-gradient(circle at 9px 50%, var(--ho-paper) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), var(--ho-klein); color: #fff; }
.ho-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed rgba(20, 20, 20, .25); }
.ho-facts span { display: block; font: 600 .6875rem/1.2 var(--ho-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ho-muted); }
.ho-facts b { display: block; font: 400 2rem/1 var(--ho-serif); color: var(--ho-ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ho-facts small { display: block; font-size: .8125rem; color: var(--ho-muted); margin-top: 2px; }
.ho-facts small:empty { display: none; }
.ho-facts > div:has(b:empty) { display: none; }
.ho-project .k-note { margin-top: 16px; color: var(--ho-ink); font-size: .9375rem; line-height: 1.5; background: none; padding: 0; }
.ho-project .k-note:empty { display: none; }
.ho-lead { margin-top: 12px; font-size: .8125rem; color: var(--ho-muted); }
.ho-lead:has(b:empty) { display: none; }
.ho-projects > .ho-project + .ho-project .k-note, .ho-projects > .ho-project + .ho-project .ho-lead { display: none; }
.ho-projects > .ho-project + .ho-project .ho-project-name { font-size: 1.625rem; }
.ho-project-empty { padding: 24px 22px; display: grid; gap: 10px; }
.ho-project-empty .ho-project-name { margin: 0; }
.ho-project-empty p { color: var(--ho-muted); }
@media (min-width: 1024px) { .ho-project-name { font-size: 2.5rem; } .ho-facts b { font-size: 2.5rem; } }
/* Latest updates: a row of pinned prints */
.ho-row-head { display: flex; align-items: center; margin: 56px 0 30px; }
.ho-prints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
.ho-prints:empty { display: none; }
@media (min-width: 700px) { .ho-prints { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; } }
@media (min-width: 1200px) { .ho-prints { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ho-mini { min-width: 0; overflow-wrap: anywhere; } .ho-mini .k-badge { white-space: normal; } }
.ho-mini { display: grid; gap: 8px; align-content: start; padding: 20px 14px 16px; text-decoration: none; color: var(--ho-ink); }
.ho-mini:nth-child(3n+1) { --ho-tilt: -1.4deg; } .ho-mini:nth-child(3n+2) { --ho-tilt: 1.1deg; } .ho-mini:nth-child(3n) { --ho-tilt: -.5deg; }
.ho-mini:hover { --ho-tilt: 0deg; }
.ho-mini b { font: italic 400 1.375rem/1.05 var(--ho-serif); }
.ho-mini small { font-size: .75rem; color: var(--ho-muted); }
.ho-mini .k-badge { justify-self: start; }
.ho-prints .k-empty { grid-column: 1 / -1; }
/* Lower band: requests as envelopes, the Care stub */
.ho-envs { display: grid; gap: 12px; }
@media (min-width: 700px) { .ho-envs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } }
.ho-env-mini { position: relative; display: grid; gap: 6px; padding: 30px 16px 14px; text-decoration: none; color: var(--ho-ink); background: linear-gradient(162deg, var(--ho-kraft-deep) 0 22px, transparent 23px), linear-gradient(-162deg, var(--ho-kraft-deep) 0 22px, transparent 23px), var(--ho-kraft); --ho-hole: var(--ho-kraft); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); border-radius: 2px; }
.ho-env-mini .ho-env-title { font: italic 400 1.25rem/1.1 var(--ho-serif); background: var(--ho-paper); padding: 6px 10px; justify-self: start; max-width: 100%; }
.ho-env-mini small { font-size: .8125rem; color: #2b2b2b; }
.ho-env-mini .k-badge { justify-self: start; --ho-hole: var(--ho-kraft); background: radial-gradient(circle at 10px 50%, var(--ho-kraft) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), var(--ho-paper); }
.ho-env-mini[data-k-state="new"] .k-badge { background: radial-gradient(circle at 10px 50%, var(--ho-kraft) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), var(--ho-klein); color: #fff; }
.ho-envs .k-empty { grid-column: 1 / -1; }
.k-app .ho-env-mini .k-badge.k-badge-state, .k-app .ho-env .k-badge.k-badge-state { background: radial-gradient(circle at 10px 50%, var(--ho-kraft) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), var(--ho-paper); color: var(--ho-ink); }
.k-app .ho-env-mini[data-k-state="new"] .k-badge.k-badge-state, .k-app .ho-env[data-k-state="new"] .k-badge.k-badge-state { background: radial-gradient(circle at 10px 50%, var(--ho-kraft) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), var(--ho-klein); color: #fff; }
.k-app .ho-env-mini[data-k-state="ok"] .k-badge.k-badge-state, .k-app .ho-env[data-k-state="ok"] .k-badge.k-badge-state { background: radial-gradient(circle at 10px 50%, var(--ho-kraft) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), #cfe3d3; color: #12452a; }
.ho-care-mini { display: grid; gap: 14px; padding: 22px 20px; text-decoration: none; color: var(--ho-ink); --ho-tilt: .8deg; }
.ho-care-mini h3 { font: 400 1.75rem/1 var(--ho-serif); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ho-hours { color: var(--ho-muted); font-size: .9375rem; }
.ho-timecap { color: var(--ho-muted); font-size: .75rem; line-height: 1.3; margin-top: 10px; }
.ho-hours b { font: 400 2.25rem/1 var(--ho-serif); color: var(--ho-ink); }
.ho-req[hidden], .ho-req-row[hidden], .ho-file-row[hidden], [data-ho-layout-field][hidden], [data-ho-files-sent][hidden] { display: none !important; }

/* ---------- Updates: the wall of prints ---------- */
.ho-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ho-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ho-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ho-feed:empty { display: none; }
.ho-item { min-width: 0; }
.ho-item:nth-child(3n+1) { --ho-tilt: -1.3deg; } .ho-item:nth-child(3n+2) { --ho-tilt: 1deg; } .ho-item:nth-child(3n) { --ho-tilt: -.5deg; }
.ho-card { display: grid; gap: 10px; padding: 24px 20px 18px; height: 100%; }
.ho-item:nth-child(4n+2) .ho-card.ho-pin::before { top: -12px; left: calc(50% - 52px); width: 104px; height: 26px; border-radius: 0; transform: rotate(-3deg); background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .5) 0 5px, rgba(255, 255, 255, .25) 5px 10px), rgba(140, 160, 240, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.ho-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ho-proj-line { font-size: .8125rem; letter-spacing: 0; color: var(--ho-muted); font-weight: 600; }
.ho-card h3 { font: italic 400 1.875rem/1 var(--ho-serif); }
.ho-card p { color: var(--ho-muted); font-size: .9375rem; line-height: 1.5; }
.ho-card p:empty { display: none; }
.ho-item[data-k-state="new"] .ho-card { outline: 3px solid var(--ho-klein); outline-offset: -3px; }
.ho-item:not([data-k-state="done"]) .ho-card p[data-pl-field="memo"] { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
.ho-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: var(--ho-paper-2); }
.ho-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ho-card .ho-files { justify-self: start; box-shadow: none; padding: 0; min-height: 44px; color: var(--ho-klein); }
.ho-files[hidden] { display: none; }
.ho-card .k-btn-row { margin-top: auto; }
.ho-approved .ho-dot { display: block; }
.ho-card > .ho-dot { display: none; }
.ho-card.ho-approved > .ho-dot { display: block; }
.ho-aside { display: grid; gap: 28px; align-content: start; }
.ho-legend { padding: 22px 20px; display: grid; gap: 14px; --ho-tilt: .6deg; }
.ho-legend h2 { font-size: 1.75rem; }
.ho-legend dl { margin: 0; display: grid; gap: 12px; }
.ho-legend dt { margin: 0; }
.ho-legend dd { margin: 4px 0 0; color: var(--ho-muted); font-size: .875rem; }
.ho-team { display: grid; gap: 0; align-self: start; --ho-tilt: .6deg; transform: rotate(var(--ho-tilt)); }
.ho-team .k-row + .k-row::before { left: 70px; right: 16px; }
.ho-team .k-row-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.ho-team .k-avatar { width: 44px; height: 44px; font: 400 1.125rem/1 var(--ho-serif); background: var(--ho-klein); color: #fff; flex: none; }
.ho-app .k-list { background: var(--ho-paper); box-shadow: var(--ho-print-shadow); border-radius: 1px; }
.ho-app .k-list { --k-text: var(--ho-ink); --k-muted: var(--ho-muted); --k-line: rgba(20, 20, 20, .12); --k-surface-2: var(--ho-paper-2); --k-brand: var(--ho-klein); color: var(--ho-ink); }
.ho-app .k-list .k-row-sub { white-space: normal; }
.ho-app .k-list .k-tile { background: var(--ho-kraft); color: var(--ho-ink); border-radius: 2px; }
.ho-attach { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; color: var(--ho-klein); font-weight: 600; }
.ho-attach:empty { display: none; }
.ho-file-row .ho-attach { margin-left: auto; }
.ho-env .ho-attach { color: var(--ho-ink); text-decoration: underline; }
.ho-file-row .k-row-title { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
.ho-files-sent .k-section-head { margin-bottom: 12px; }
.ho-more { padding: 20px; display: grid; gap: 6px; text-decoration: none; color: var(--ho-ink); background: var(--ho-kraft); --ho-hole: var(--ho-kraft); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ho-more h3 { font: italic 400 1.5rem/1.1 var(--ho-serif); }
.ho-more p { font-size: .875rem; color: #2b2b2b; }
@media (min-width: 1024px) { .ho-aside > .ho-more { grid-column: 1 / -1; max-width: none; } }

/* ---------- Review: the round large, the crit card ---------- */
.ho-pick { display: grid; gap: 34px; }
.ho-pick:empty { display: none; }
.ho-pick .ho-round-art { grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px; }
.ho-pick .ho-round-art figure { margin: 0; padding: 8px 8px 10px; background: var(--ho-paper); box-shadow: var(--ho-print-shadow); }
.ho-pick .ho-round-art figure:first-child { transform: rotate(-1.2deg); } .ho-pick .ho-round-art figure:last-child { transform: rotate(1.2deg); }
.ho-pick .ho-round-art img { transform: none; box-shadow: none; }
.ho-round-art figcaption { padding-top: 8px; font: italic 400 1.25rem/1.1 var(--ho-serif); color: var(--ho-ink); }
@media (max-width: 599px) { .ho-pick .ho-round-art { grid-template-columns: minmax(0, 1fr); } }
.ho-pick .ho-task { --ho-tilt: -.6deg; padding: 26px; }
@media (min-width: 1024px) { .ho-pick .ho-task h3 { font-size: 3rem; } }
.ho-crit { position: relative; background: var(--ho-paper); box-shadow: var(--ho-print-shadow); padding: 30px 22px 24px; }
.ho-crit::after { content: ""; position: absolute; left: 22px; right: 22px; top: 76px; height: 1px; background: rgba(20, 20, 20, .14); }
.ho-crit h2 { font: 400 2.25rem/1 var(--ho-serif); padding-right: 64px; }
.ho-crit > p { color: var(--ho-muted); font-size: .9375rem; margin: 26px 0 18px; }
.ho-crit-dot { display: none; }
.ho-crit:has([data-k-pick^="Approve"][aria-pressed="true"]) .ho-crit-dot { display: block; animation: ho-drop .44s cubic-bezier(.3, .7, .4, 1.2) both; }
.ho-ab { display: grid; gap: 8px; margin-bottom: 18px; }
.ho-ab > p { font: 600 .875rem/1.3 var(--ho-sans); color: var(--ho-ink); }
.ho-ab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ho-ab-row > :last-child:nth-child(3) { grid-column: 1 / -1; }
.ho-ab-btn { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px; align-content: start; text-align: left; min-height: 60px; padding: 10px 12px; border: 0; border-radius: 2px; background: var(--ho-paper); color: var(--ho-ink); font: 600 1rem/1.2 var(--ho-sans); box-shadow: inset 0 0 0 1.5px rgba(20, 20, 20, .25); cursor: pointer; }
.ho-ab-btn[hidden] { display: none; }
.ho-ab-btn .ho-radio { grid-row: 1 / span 2; margin-top: 2px; }
.ho-ab-btn small { font-weight: 400; font-size: .8125rem; color: var(--ho-muted); }
.ho-ab-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ho-klein); background: #eef1fd; }
.ho-ab-btn[aria-pressed="true"] .ho-radio { box-shadow: inset 0 0 0 7px var(--ho-klein); }
.ho-seg { display: grid; gap: 8px; }
.ho-seg-btn { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 60px; padding: 12px 14px; border: 0; border-radius: 2px; background: var(--ho-paper); color: var(--ho-ink); font: 500 .9375rem/1.2 var(--ho-sans); box-shadow: inset 0 0 0 1.5px rgba(20, 20, 20, .25); cursor: pointer; }
.ho-seg-btn b { display: block; font-weight: 600; font-size: 1rem; }
.ho-seg-btn small { display: block; color: var(--ho-muted); font-size: .8125rem; margin-top: 2px; font-weight: 400; }
.ho-seg-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ho-klein); background: #eef1fd; }
.ho-seg-btn[hidden] { display: none; }
.ho-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(20, 20, 20, .35); }
.ho-seg-btn[aria-pressed="true"] .ho-radio { box-shadow: inset 0 0 0 7px var(--ho-klein); }
.ho-seg-btn[data-k-pick^="Approve"][aria-pressed="true"] .ho-radio { box-shadow: none; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .5) 0 1.5px, transparent 5px), var(--ho-red); }
.ho-sr-field > label, .ho-sr-field > select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ho-hide-field { display: none; }
.ho-deciding { font-size: .875rem; color: var(--ho-muted); padding: 12px 14px; background: var(--ho-paper-2); border-left: 3px solid var(--ho-klein); }
.ho-deciding b { display: block; color: var(--ho-ink); font: italic 400 1.5rem/1.1 var(--ho-serif); margin-top: 2px; }
.ho-sending-help { display: block; font-size: .8125rem; margin-top: 4px; }
.k-app .k-form label { font-weight: 600; font-size: .875rem; }
.k-app textarea { min-height: 120px; resize: vertical; }

.k-app :is(.ho-crit, .ho-brief) :is(input:not([type="file"]):not([type="hidden"]), select, textarea) { border-radius: 2px; background: #fff; color: var(--ho-ink); border: 1.5px solid rgba(20, 20, 20, .28); box-shadow: none; }
.k-app input[type="file"] { width: 100%; padding: 14px; border-radius: 2px; border: 1.5px dashed rgba(20, 20, 20, .35); background: var(--ho-paper-2); color: var(--ho-muted); font: inherit; font-size: .875rem; }
.k-app input[type="file"]::file-selector-button { margin-right: 12px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 2px; background: var(--ho-kraft); color: var(--ho-ink); font: 600 .875rem/1 var(--ho-sans); cursor: pointer; }
/* Decisions: pinned cards, the red dot on approved rounds. */
.ho-rows { display: grid; gap: 34px 22px; }
.ho-rows:empty { display: none; }
.ho-decisions { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ho-decisions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ho-decisions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ho-decisions .ho-req { position: relative; padding: 24px 20px 18px; display: grid; gap: 10px; align-content: start; }
.ho-decisions .ho-req:nth-child(odd) { --ho-tilt: -1.1deg; } .ho-decisions .ho-req:nth-child(even) { --ho-tilt: 1deg; }
.ho-decisions .ho-req > .ho-dot { display: none; }
.ho-decisions .ho-req.ho-approved > .ho-dot { display: block; }
.ho-req-top { display: grid; gap: 8px; }
.ho-req-top .k-badge { justify-self: start; }
.ho-req h3 { font: italic 400 1.625rem/1.05 var(--ho-serif); }
.ho-req .k-row-sub { color: var(--ho-muted); font-size: .8125rem; white-space: normal; }
.ho-env .k-row-sub { color: var(--k-muted); }
.ho-req .ho-body { font-size: .9375rem; line-height: 1.45; }
.ho-req .ho-body:empty { display: none; }
.ho-layout-line { font-size: .875rem; color: var(--ho-muted); }
.ho-layout-line:has(b:empty) { display: none; }
.ho-reply { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--ho-paper-2); font-size: .9375rem; line-height: 1.45; color: var(--ho-ink); border-left: 3px solid var(--ho-klein); }
.ho-reply:has(q:empty) { display: none; }
.ho-reply .ho-who { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ho-klein); color: #fff; font: 400 .9375rem/1 var(--ho-serif); }
.ho-reply q { quotes: none; }
.ho-who-name { display: block; font: 600 .6875rem/1.3 var(--ho-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ho-klein); margin-bottom: 2px; }
.ho-app [data-k-saved-toast], .k-toast { margin-bottom: 16px; border-radius: 2px; background: var(--ho-paper); color: var(--ho-ink); box-shadow: var(--ho-print-shadow); }

/* ---------- Requests: briefs as kraft envelopes, the brief sheet ---------- */
.ho-brief { position: relative; background: var(--ho-paper); box-shadow: var(--ho-print-shadow); padding: 34px 22px 24px; }
.ho-brief.ho-tape::before { top: -12px; }
.ho-brief h2 { font: italic 400 2.5rem/1 var(--ho-serif); }
.ho-brief > p { color: var(--ho-muted); font-size: .9375rem; margin: 10px 0 18px; }
.ho-brief .ho-brief-no { position: absolute; right: 20px; top: 20px; font: 600 .6875rem/1 var(--ho-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ho-klein); }
.ho-envelopes { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .ho-envelopes { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } }
.ho-env { position: relative; display: grid; gap: 12px; align-content: start; padding: 44px 18px 18px; color: var(--ho-ink); background: var(--ho-kraft); --ho-hole: var(--ho-kraft); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 18px -12px rgba(40, 25, 10, .5); border-radius: 2px;
  --k-text: #141414; --k-muted: #2b2b2b; --k-surface-2: rgba(255, 255, 255, .45); --k-brand: #1f3fd1; --k-brand-ink: var(--ho-on-klein); --k-line: rgba(20, 20, 20, .2); }
.ho-env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: var(--ho-kraft-deep); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ho-env:nth-child(odd) { transform: rotate(-.7deg); } .ho-env:nth-child(even) { transform: rotate(.8deg); }
.ho-env-top > div { background: var(--ho-paper); padding: 12px 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
.ho-env .k-badge { background: radial-gradient(circle at 10px 50%, var(--ho-kraft) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), var(--ho-paper); }
.ho-env[data-k-state="new"] .k-badge { background: radial-gradient(circle at 10px 50%, var(--ho-kraft) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), var(--ho-klein); color: #fff; }
.ho-env[data-k-state="ok"] .k-badge { background: radial-gradient(circle at 10px 50%, var(--ho-kraft) 0 3px, rgba(0, 0, 0, .3) 3.3px, transparent 3.8px), #cfe3d3; }
.ho-envelopes .k-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.ho-envelopes .k-steps li { padding: 5px 8px; font: 600 .6875rem/1 var(--ho-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ho-ink); border: 1.5px solid rgba(20, 20, 20, .25); border-radius: 2px; animation: none; }
.ho-envelopes .k-steps li::before { display: none; }
.ho-envelopes .k-steps li.k-done { color: var(--ho-ink); border-color: rgba(20, 20, 20, .55); }
.ho-envelopes .k-steps li.k-now { color: #fff; border-color: var(--ho-klein); background: var(--ho-klein); transform: rotate(-2deg); }
.ho-envelopes .k-steps li.k-done:last-child { color: #fff; border-color: var(--ho-klein); background: var(--ho-klein); }
.ho-envelopes .ho-req-top > .k-badge { display: none; }
.ho-envelopes .ho-reply { background: var(--ho-paper); }
.ho-accept { display: none; }
.ho-envelopes [data-k-state="active"] .ho-accept, [data-k-state="active"] .ho-accept { display: flex; }
.ho-accept.ho-done-accept { display: none !important; }
.ho-files-note { font-weight: 600; font-size: .875rem; }
.ho-meta-line .ho-m:empty { display: none; }
.ho-meta-line .ho-m + .ho-m::before { content: " · "; }
.ho-meta-line .ho-m:has(span:empty) { display: none; }

/* ---------- Care: the punched time card ---------- */
.ho-care-now { padding: 26px 22px 22px; display: grid; gap: 18px; --ho-tilt: -.5deg; background: var(--ho-paper); }
.ho-care-now > * + * { margin-top: 0; }
.ho-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ho-klein); }
.ho-card-head h2 { font: 400 2.25rem/1 var(--ho-serif); }
.ho-card-head p { font: 600 .6875rem/1.3 var(--ho-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ho-klein); }
.ho-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ho-big b { font: 400 5rem/.9 var(--ho-serif); color: var(--ho-ink); font-variant-numeric: tabular-nums; }
.ho-big small { color: var(--ho-muted); font-size: 1rem; font-weight: 600; }
.ho-timecard-l { gap: 8px; }
.ho-timecard-l .ho-punch { border-radius: 3px; }
.ho-timecard-axis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; text-align: center; font: 600 .6875rem/1 var(--ho-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ho-muted); }
.ho-care-now [data-ho-meter] { display: grid; gap: 12px; }
.ho-care-now .k-help { color: var(--ho-muted); font-size: .875rem; }
.ho-care-now .k-bar { display: none; }
.ho-log-h { font: 600 .6875rem/1.3 var(--ho-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ho-muted); }
.ho-app .ho-log { box-shadow: none; background: none; border-top: 1.5px solid rgba(20, 20, 20, .5); border-radius: 0; }
.ho-app .ho-log .k-row { padding-left: 0; padding-right: 0; background: none; border-bottom: 1px solid rgba(31, 63, 209, .25); }
.ho-app .ho-log .k-row + .k-row::before { display: none; }
.ho-app .ho-log .k-row-title { white-space: normal; display: block; }
.ho-app .ho-log .k-row-end b { font: 400 1.5rem/1 var(--ho-serif); }
.ho-app .ho-log .k-tile { display: none; }
.ho-app .ho-log .k-empty { padding: 14px 0; color: var(--ho-muted); }
.ho-plan { padding: 30px 24px 26px; display: grid; gap: 16px; background: var(--ho-paper); --ho-tilt: .8deg; }
.ho-plan .ho-plan-top { font: 600 .6875rem/1.3 var(--ho-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ho-klein); display: flex; justify-content: space-between; }
.ho-plan .k-price { font: 400 4.5rem/.9 var(--ho-serif); color: var(--ho-ink); }
.ho-plan .k-price small { font: 600 1rem/1 var(--ho-sans); color: var(--ho-muted); }
.ho-plan .k-btn, .ho-plan form, .ho-plan span[data-pl-payment="plans"] { width: 100%; }
.ho-plan form .k-btn { width: 100%; }
.ho-plan .k-note { color: var(--ho-muted); font-size: .875rem; margin-top: 10px; }
.ho-qa { display: grid; gap: 12px; }
.ho-qa details { background: var(--ho-paper); color: var(--ho-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); padding: 0 18px; border-radius: 1px; }
.ho-qa summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-weight: 600; }
.ho-qa details p { color: var(--ho-muted); font-size: .9375rem; padding-bottom: 16px; }

/* ---------- Account: the parts as pinned cards ---------- */
.ho-app .k-account.ho-part { background: var(--ho-paper); box-shadow: var(--ho-print-shadow); padding: 24px 20px 20px; position: relative; }
.ho-app .k-account.ho-part:empty { display: none; }
.ho-app .k-board > .ho-part:nth-of-type(odd) { transform: rotate(-.6deg); }
.ho-app .k-board > .ho-part:nth-of-type(even) { transform: rotate(.6deg); }
.ho-app .k-account ul, .ho-app .k-account > p:first-child, .ho-app .k-account form:has(input[type="text"], select, textarea), .ho-app .k-account form:last-of-type:has(input[type="checkbox"]) { box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .14); border-radius: 2px; }
.ho-app .k-account h3 { font: 400 1.625rem/1.1 var(--ho-serif); margin-left: 0; }
.ho-app .k-account button, .ho-app .k-account .k-btn { border-radius: 2px; }
.ho-app .k-account .k-btn { justify-content: center; }
.ho-ids { display: grid; gap: 26px 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ho-id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 22px 18px 18px; color: var(--ho-ink); }
.ho-id:nth-child(odd) { --ho-tilt: -1.2deg; } .ho-id:nth-child(even) { --ho-tilt: 1deg; }
.ho-id .ho-id-face { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ho-klein); color: #fff; font: 400 1.5rem/1 var(--ho-serif); }
.ho-id b { font: italic 400 1.5rem/1 var(--ho-serif); }
.ho-id small { color: var(--ho-muted); font-size: .8125rem; }
.ho-id-link { text-decoration: none; }
.ho-id-link small { color: var(--ho-klein); font-weight: 600; }
.ho-tel { white-space: nowrap; }

/* ---------- Sample shared folder ---------- */
.ho-sample-note { padding: 12px 16px; background: var(--ho-kraft); color: var(--ho-ink); font-weight: 600; font-size: .875rem; margin: 24px 0; }
.ho-sample-head h1 { font: 400 clamp(2.75rem, 9vw, 5.5rem)/.95 var(--ho-serif); letter-spacing: -.02em; margin-top: 10px; }
.ho-sample-head h1 em { color: var(--k-brand); }
.ho-sample-head .ho-eyebrow { color: var(--k-brand); }
.ho-sample-head p:last-child { color: var(--k-muted); margin-top: 12px; }
.ho-layouts { display: grid; gap: 40px; padding: 48px 20px 40px; margin: 28px -16px 24px; }
@media (min-width: 900px) { .ho-layouts { grid-template-columns: 1fr 1fr; padding: 56px 48px; margin-inline: 0; gap: 48px; } }
.ho-layouts figure { margin: 0; padding: 10px 10px 14px; }
.ho-layouts figure:first-child { --ho-tilt: -1.2deg; } .ho-layouts figure:last-child { --ho-tilt: 1.2deg; }
.ho-layouts img { display: block; width: 100%; height: auto; }
.ho-layouts figcaption { padding: 12px 4px 0; font-size: .9375rem; color: var(--ho-muted); }
.ho-layouts figcaption b { color: var(--ho-ink); font: italic 400 1.375rem/1 var(--ho-serif); margin-right: 6px; }
.ho-guide { padding: 30px 24px 24px; display: grid; gap: 16px; max-width: 640px; margin-top: 56px; --ho-tilt: -.6deg; }
.ho-guide h2 { font: 400 2.25rem/1 var(--ho-serif); }
.ho-guide .k-btn { justify-self: start; }
.ho-layouts-act { grid-column: 1; align-self: center; justify-self: start; display: flex; padding: 14px 16px; background: var(--ho-kraft); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 18px -12px rgba(40, 25, 10, .5); transform: rotate(-1deg); }
.ho-layouts .ho-guide { margin: 0; max-width: none; }
@media (min-width: 900px) { .ho-layouts .ho-guide { grid-column: 2; align-self: start; } }
.ho-sample .k-btn-row { margin-top: 8px; }

/* ---------- privacy notice ---------- */
.ho-pub.ho-priv .k-main { max-width: 760px; margin: 0 auto; padding: 40px 16px 80px; }
.ho-priv .k-prose h1 { font: 400 clamp(3rem, 10vw, 5rem)/.95 var(--ho-serif); letter-spacing: -.02em; }
.ho-priv .k-prose h2 { font: 400 2rem/1.05 var(--ho-serif); margin-top: 36px; }
.ho-priv .k-prose a { color: var(--k-brand); }
.blank { background: color-mix(in srgb, var(--ho-kraft) 55%, transparent); padding: 0 .25em; border-radius: 2px; }
.tip { background: var(--ho-paper); color: var(--ho-ink); border-left: 4px solid var(--ho-red); padding: 12px 16px; box-shadow: var(--ho-print-shadow); }


/* ---------- page grids ---------- */
/* The feed's cards and the tags legend share one grid, so the legend takes the next free slot after the last update. */
.ho-updates-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px 22px; align-items: start; }
@media (min-width: 700px) { .ho-updates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ho-updates-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ho-updates-grid > .ho-feed { display: contents; }
.ho-updates-grid > .ho-aside { grid-column: 1 / -1; order: 2; }
@media (min-width: 1024px) { .ho-updates-grid { gap: 40px 22px; } .ho-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ho-legend dl > div { display: grid; gap: 4px; justify-items: start; }
.ho-review-grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1024px) { .ho-review-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.ho-past { margin-top: 48px; }
.ho-past .k-section-head { margin-bottom: 28px; }
.ho-env-wall { padding: 28px 18px 32px; display: grid; gap: 28px; align-content: start; }
@media (min-width: 1024px) { .ho-env-wall { padding: 36px 32px 40px; } }
.ho-req-board { margin-top: 8px; }
.ho-jump { margin: 0 0 16px; }
.ho-jump a { color: var(--ho-klein); font-weight: 600; }
@media (min-width: 1024px) { .ho-jump { display: none; } }
@media (max-width: 1023px) { .ho-req-board > .ho-env-wall { order: -1; } }
.ho-care-board { align-items: start; }
.ho-acc-board { align-items: start; }
@media (min-width: 1024px) {
  .ho-acc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ho-acc-board > [data-pl-part="signin"] { grid-column: 1; grid-row: 1; }
  .ho-acc-board > [data-pl-part="billing"] { grid-column: 2; grid-row: 1; }
  .ho-acc-board > [data-pl-part="profile"] { grid-column: 2; grid-row: 2; }
  .ho-acc-board > [data-pl-part="leave"] { grid-column: 1 / -1; grid-row: 3; }
  .ho-acc-board > .ho-out-wall { grid-column: 1 / -1; }
}
.ho-team-wall { margin-top: 48px; }
.ho-team-wall .k-section-head { margin-bottom: 28px; }
.ho-acc-links { margin-top: 28px; color: var(--k-muted); font-size: .9375rem; }
.ho-acc-links a { color: var(--k-brand); font-weight: 600; }
.ho-no-round { padding: 24px 22px; display: grid; gap: 10px; --ho-tilt: -.8deg; }
.ho-no-round[hidden] { display: none; }
.ho-no-round p:last-child { color: var(--ho-muted); }
.ho-print.k-empty, .ho-print .k-empty { color: var(--ho-ink); }
.ho-print.k-empty { padding: 32px 22px; text-align: center; display: grid; justify-items: center; gap: 8px; }
.ho-print.k-empty h3 { font: italic 400 1.75rem/1.05 var(--ho-serif); }
.ho-print.k-empty p { color: var(--ho-muted); max-width: 36ch; }
.ho-app .k-empty-art { background: var(--ho-kraft); color: var(--ho-ink); border-radius: 2px; }
.ho-how .k-row-title { white-space: normal; }
.ho-aside .ho-label, .ho-care-board .ho-label { margin-bottom: 18px; }
.ho-app .ho-cork .k-section-head h2 { color: var(--ho-cork-text); }

.ho-notes { display: grid; gap: 34px; }
@media (min-width: 700px) { .ho-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; } .ho-notes .ho-todo { display: contents; } }
.ho-after { padding: 22px 20px; background: var(--ho-kraft); color: var(--ho-ink); --ho-hole: var(--ho-kraft); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 18px -12px rgba(40, 25, 10, .5); transform: rotate(.8deg); max-width: 520px; }
.ho-after h3 { font: italic 400 1.625rem/1.05 var(--ho-serif); }
.ho-after ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: .9375rem; }
.ho-review-wall { display: grid; gap: 40px; align-content: start; }

/* Long names, emails and replies wrap on a phone instead of overflowing. */
.ho-id, .ho-task, .ho-project, .ho-card, .ho-req, .ho-env-mini, .k-account { min-width: 0; overflow-wrap: anywhere; }
.ho-reply > span:last-child { min-width: 0; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition: none !important; }
}