/* ==========================================================================
   NOTION — "Blocks"
   SOURCE: Notion itself, as she uses it every day. (The store's landing
   page, and the ground every other store page stands on.)
     paper    = Notion's warm page grey, the canvas behind every block
     sheet    = a page/block surface (pure white, the only white here)
     ink      = Notion's text colour family (warm, never neutral grey)
     tags     = the nine select-option colours she sets on every database
                (real Notion pairs: tinted ground + dark text, ≥ 7:1)
     halftone = the dotted shading of her Notion Academy badges
     selection blue = Notion's own block-selection rectangle (selection only)
   SIGNATURE: scattered blocks assemble into a working page as you scroll —
   chaos into a system, which is exactly what she is hired to do.
   ========================================================================== */
:root {
  --paper: #F7F6F3;
  --paper-2: #EFEDE7;            /* sunken: database header strip, wells */
  --sheet: #FFFFFF;              /* raised: blocks, pages, cards */
  --hover: rgba(55, 53, 47, .06);
  --ink: #191918;                /* headings, THE interactive colour (Notion's black CTA) */
  --ink-2: #4B4944;              /* body (Notion text #37352F, a touch darker for 7:1 on paper) */
  --ink-3: #6F6D68;              /* secondary, ≥ 4.5:1 */
  --ink-4: #868480;              /* muted — UI marks only */
  --line: rgba(55, 53, 47, .12);
  --line-2: rgba(55, 53, 47, .2);
  --select: rgba(35, 131, 226, .22);
  --select-edge: rgba(35, 131, 226, .65);
  --focus: #2383E2;

  --t-gray-bg: #E3E2E0;   --t-gray: #32302C;
  --t-brown-bg: #EEE0DA;  --t-brown: #442A1E;
  --t-orange-bg: #FADEC9; --t-orange: #49290E;
  --t-yellow-bg: #FDECC8; --t-yellow: #402C1B;
  --t-green-bg: #DBEDDB;  --t-green: #1C3829;
  --t-blue-bg: #D3E5EF;   --t-blue: #183347;
  --t-purple-bg: #E8DEEE; --t-purple: #412454;
  --t-pink-bg: #F5E0E9;   --t-pink: #4C2337;
  --t-red-bg: #FFE2DD;    --t-red: #5D1715;
  --mark: #FDECC8;        /* Notion's yellow text highlight */

  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --sh-block: 0 0 0 1px rgba(15, 15, 15, .05), 0 3px 6px rgba(15, 15, 15, .07), 0 9px 24px rgba(15, 15, 15, .1);
  --sh-lift: 0 0 0 1px rgba(15, 15, 15, .05), 0 8px 16px rgba(15, 15, 15, .08), 0 24px 48px rgba(15, 15, 15, .14);
  --r: 6px;
  --e-out: cubic-bezier(.22, .61, .36, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* surfaces that change with the theme */
  --on-ink: #fff;                /* text on ink (dark buttons) */
  --glass: rgba(255, 255, 255, .86);
  --glass-2: rgba(255, 255, 255, .6);
  --gloss: rgba(255, 255, 255, .55);
  --hover-solid: #F2F0EB;
  --dots: rgba(55, 53, 47, .2);

  /* shared chrome */
  --nav-fg: var(--ink-2); --nav-bg: rgba(255, 255, 255, .78); --nav-hover: var(--hover);
  --nav-on-bg: var(--ink); --nav-on-fg: #fff; --nav-mark: #FDECC8;
  --nav-border: 1px solid var(--line); --nav-radius: 10px; --nav-shadow: var(--sh-block);
  --nav-blur: blur(10px) saturate(1.4); --nav-font: var(--f-ui);
  --nx-bg: var(--paper);
}

body { background: var(--paper); color: var(--ink-2); font: 16px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; }
em { font-style: italic; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
@media (min-width: 760px) { .wrap { width: min(1180px, 100% - 64px); } }

/* --- halftone dot canvas (the reactive ground) ----------------------------- */
.dots { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, footer { position: relative; z-index: 1; }


/* --- buttons: each one acts out what it does ------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px 0 14px; border-radius: 8px;
  font: 600 15px/1 var(--f-ui); letter-spacing: -.005em; white-space: nowrap;
  transition: transform .3s var(--e-spring), box-shadow .3s var(--e-soft), background-color .2s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-ink { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px rgba(25,25,24,.18); }
.btn-ghost { background: var(--sheet); color: var(--ink); box-shadow: var(--sh-block); }
.btn svg { width: 22px; height: 22px; flex: none; overflow: visible; }

/* "Browse templates": three cards fan out like a hand being dealt */
.ic-deal rect { fill: var(--ink); transition: transform .45s var(--e-spring); transform-box: fill-box; transform-origin: 50% 100%; }
.btn-deal:hover .ic-deal .c1 { transform: translate(-5px, 1px) rotate(-18deg); }
.btn-deal:hover .ic-deal .c3 { transform: translate(5px, 1px) rotate(18deg); }
.btn-deal:hover .ic-deal .c2 { transform: translateY(-3px); }
/* button icons are drawn hollow: their insides take the button's own colour, in light and dark */
.btn-ink svg rect[fill], .btn-ink svg path[fill]:not([fill="none"]) { fill: var(--ink); }
.btn-ghost svg rect[fill="#fff"], .btn-ghost svg path[fill="#fff"], .btn-ghost svg rect[fill="#191918"] { fill: var(--sheet); }
.btn-ghost svg rect[fill="#E8DEEE"] { fill: var(--t-purple-bg); }
/* "Book a call": the top calendar leaf tears off and falls away */
.ic-cal .leaf { transform-box: fill-box; transform-origin: 0% 0%; transition: transform .5s var(--e-out), opacity .5s; }
.btn-cal:hover .ic-cal .leaf { transform: translate(3px, 10px) rotate(28deg); opacity: 0; }
.ic-cal .day { opacity: 0; transition: opacity .25s .2s; }
.btn-cal:hover .ic-cal .day { opacity: 1; }
.btn-cal:hover { box-shadow: var(--sh-lift); transform: translateY(-2px); }
/* "All about the services": the top block lifts, turns, and sets back down on the two below */
.ic-blocks rect { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s var(--e-spring); }
.btn-blocks:hover .ic-blocks .btop { animation: blk-set .8s var(--e-out); }
.btn-blocks:hover .ic-blocks .bl { transform: translateX(-1.5px); }
.btn-blocks:hover .ic-blocks .br { transform: translateX(1.5px); }
@keyframes blk-set { 0% { transform: none; } 40% { transform: translateY(-5px) rotate(-14deg); } 70% { transform: translateY(1px) rotate(3deg); } 100% { transform: none; } }
.btn-blocks:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
.btn-deal:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 26px rgba(25,25,24,.26); }

/* ==========================================================================
   HERO — the blocks
   ========================================================================== */
.hero { height: 250vh; position: relative; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 24px; padding: 76px max(16px, 4vw) 24px; }
.hero-copy { position: relative; z-index: 3; max-width: 560px; }
.todo { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink-2); margin-bottom: 22px; padding: 4px 10px 4px 6px; border-radius: 6px; background: var(--glass-2); }
.todo .box { width: 18px; height: 18px; border-radius: 4px; border: 1.6px solid var(--ink-2); display: grid; place-items: center; transition: background-color .25s, border-color .25s; }
.todo .box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .35s var(--e-out) .1s; }
.todo-t { position: relative; transition: color .4s; }
.todo-t::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--e-out) .3s; }
.todo.done .box { background: var(--focus); border-color: var(--focus); }
.todo.done .box svg { stroke-dashoffset: 0; }
.todo.done .todo-t { color: var(--ink-4); }
.todo.done .todo-t::after { transform: scaleX(1); }

.hero h1 { font: 500 clamp(2.7rem, 6.4vw, 5.6rem)/.98 var(--f-display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.hero h1 em { font-weight: 400; position: relative; display: inline-block; }
.hero h1 em::after { /* hand-inked underline, drawn once */
  content: ""; position: absolute; left: -2%; right: -4%; bottom: .02em; height: .14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 7c18-4 40-6 60-4s28 3 38 0' fill='none' stroke='%23191918' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); animation: ink 1s var(--e-out) .9s forwards;
}
@keyframes ink { to { clip-path: inset(0 0 0 0); } }
.lede { margin-top: 20px; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-3); max-width: 38ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hint { margin-top: 26px; font: 12px/1.4 var(--f-mono); color: var(--ink-4); display: flex; align-items: center; gap: 8px; }
.hint kbd { font: inherit; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--ink-3); background: var(--sheet); }
html:not(.has-cursor) .hint { display: none; }

/* the board is a fixed 760×680 design canvas, scaled to fit by notion.js */
.board-fit { position: relative; height: 100%; min-height: 0; z-index: 2; }
.board { position: absolute; left: 50%; top: 50%; width: 760px; height: 680px; transform-origin: 50% 50%; }
.ws { position: absolute; left: 0; top: 36px; width: 470px; height: 608px; background: var(--sheet); border-radius: 10px; box-shadow: var(--sh-lift); opacity: 0; transform: scale(.94); }
.ws-cover { height: 64px; border-radius: 10px 10px 0 0; background:
  radial-gradient(circle at 20% 120%, var(--t-yellow-bg) 0 38%, transparent 39%),
  radial-gradient(circle at 78% -30%, var(--t-blue-bg) 0 44%, transparent 45%),
  var(--t-orange-bg); }
.ws-icon { position: absolute; left: 22px; top: 40px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--sheet); background: url("../assets/avatar-circle.webp") center/cover; }
.ws-title { position: absolute; left: 22px; top: 92px; font: 700 21px/1.1 var(--f-ui); color: var(--ink); letter-spacing: -.01em; }
.me { position: absolute; right: -40px; bottom: -40px; width: 600px; height: 600px; object-fit: contain; pointer-events: none; -webkit-mask-image: linear-gradient(#000 78%, transparent 97%); mask-image: linear-gradient(#000 78%, transparent 97%); filter: drop-shadow(0 30px 40px rgba(25,25,24,.12)); }

.blk {
  position: absolute; left: 0; top: 0; background: var(--sheet); border-radius: var(--r);
  box-shadow: var(--sh-block); padding: 10px 12px 10px 12px; font-size: 13.5px; color: var(--ink-2);
  will-change: transform; user-select: none; -webkit-user-select: none; touch-action: none;
  transition: box-shadow .25s;
}
.blk::before { /* Notion's six-dot handle, shown on hover */
  content: ""; position: absolute; left: -16px; top: 50%; width: 10px; height: 16px; margin-top: -8px;
  background: radial-gradient(circle, var(--ink-4) 1.3px, transparent 1.6px) 0 0/5px 5.4px;
  opacity: 0; transition: opacity .2s;
}
.blk:hover::before, .blk.drag::before { opacity: 1; }
.blk.drag { box-shadow: var(--sh-lift); z-index: 20; }
.blk.sel { box-shadow: 0 0 0 2px var(--select-edge), var(--sh-block); }
.blk.sel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--select); pointer-events: none; }
.blk .row { display: flex; align-items: center; gap: 8px; }
.blk svg { flex: none; }
.chk { width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid var(--ink-3); display: inline-grid; place-items: center; }
.chk.on { background: var(--focus); border-color: var(--focus); }
.chk.on::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.struck { text-decoration: line-through; color: var(--ink-4); }
.tag { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 4px; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.tg-gray { background: var(--t-gray-bg); color: var(--t-gray); }
.tg-orange { background: var(--t-orange-bg); color: var(--t-orange); }
.tg-yellow { background: var(--t-yellow-bg); color: var(--t-yellow); }
.tg-green { background: var(--t-green-bg); color: var(--t-green); }
.tg-blue { background: var(--t-blue-bg); color: var(--t-blue); }
.tg-purple { background: var(--t-purple-bg); color: var(--t-purple); }
.tg-pink { background: var(--t-pink-bg); color: var(--t-pink); }
.tg-red { background: var(--t-red-bg); color: var(--t-red); }
.tg-brown { background: var(--t-brown-bg); color: var(--t-brown); }

.b-head { font: 700 19px/1.2 var(--f-ui); color: var(--ink); background: transparent; box-shadow: none; padding-left: 4px; }
/* the heading spans two columns but only its words are grabbable, so its empty
   half never sits on top of a neighbouring block and steals the drag */
.b-head { pointer-events: none; }
.b-head .grab { pointer-events: auto; display: inline-block; padding: 6px 10px; margin: -6px -10px; }
.b-callout { background: var(--paper-2); display: flex; gap: 10px; align-items: flex-start; }
.b-callout b { color: var(--ink); font-weight: 600; display: block; }
.b-table { padding: 0; overflow: hidden; }
.b-table .tr { display: grid; grid-template-columns: 1fr 74px; align-items: center; height: 31px; padding: 0 12px; border-top: 1px solid var(--line); }
.b-table .tr:first-child { border-top: 0; height: 28px; background: var(--paper); color: var(--ink-3); font-size: 12px; }
.b-prog .bar { height: 6px; border-radius: 3px; background: var(--paper-2); margin-top: 8px; overflow: hidden; }
.b-prog .bar i { display: block; height: 100%; width: 72%; background: var(--t-green); border-radius: inherit; }
.b-cal .grid { display: grid; grid-template-columns: repeat(7, 16px); gap: 4px; margin-top: 8px; }
.b-cal .grid i { height: 16px; border-radius: 3px; background: var(--paper-2); }
.b-cal .grid i.a { background: var(--t-blue-bg); } .b-cal .grid i.b { background: var(--t-pink-bg); } .b-cal .grid i.c { background: var(--t-yellow-bg); }
.b-board .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.b-board .cols div { display: grid; gap: 4px; align-content: start; }
.b-board .cols i { height: 14px; border-radius: 3px; background: var(--paper-2); }
.b-board .cols i.x { background: var(--t-purple-bg); } .b-board .cols i.y { background: var(--t-green-bg); }
.b-toggle .tri { transition: transform .3s var(--e-soft); transform-origin: 40% 50%; }
.b-toggle:hover .tri { transform: rotate(90deg); }
.b-slash { font-family: var(--f-mono); font-size: 12.5px; }
.b-slash kbd { font: inherit; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: var(--ink); color: var(--on-ink); }

.sel-rect { position: absolute; z-index: 50; background: var(--select); border: 1px solid var(--select-edge); border-radius: 2px; pointer-events: none; display: none; }

@media (max-width: 900px) {
  .hero { height: 230vh; }
  .hero-pin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; padding-top: 72px; gap: 8px; }
  .hero h1 { font-size: clamp(2.3rem, 9.4vw, 3.4rem); }
  .lede { margin-top: 12px; font-size: 15px; }
  .ctas { margin-top: 16px; }
  .todo { margin-bottom: 12px; font-size: 14px; }
  .btn { height: 42px; font-size: 14px; }
}

/* ==========================================================================
   BADGES — stickers that land on the dotted page
   ========================================================================== */
.sec { padding: clamp(80px, 12vw, 160px) 0; }
.label { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.h2 { font: 500 clamp(2.1rem, 4.6vw, 3.9rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); margin-top: 14px; text-wrap: balance; }
.h2 em { font-weight: 400; }

/* the badges' printed shadows reach a little past them: clipped at the page's sides only (tosses still fly up) */
.stickers { overflow-x: clip; overflow-y: visible; position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 44px); margin-top: 56px; perspective: 900px; }
.stk { position: relative; width: clamp(96px, 13vw, 150px); aspect-ratio: 156 / 300; transform-style: preserve-3d; opacity: 0; }
.stk.wide { width: clamp(240px, 34vw, 380px); aspect-ratio: 560 / 126; max-width: 380px; }
.stk.lead { aspect-ratio: 860 / 240; width: clamp(230px, 30vw, 330px); }
/* "Latest": a Notion red tag pinned to the newest badge; it stays put while the badge is tossed */
.stk-new { position: absolute; z-index: 3; left: -10px; top: -14px; padding: 4px 8px; border-radius: 5px; font: 600 11.5px/1 var(--f-ui); letter-spacing: .02em; color: #fff; background: #E03E3E; box-shadow: 0 4px 10px -3px rgba(224,62,62,.6); transform: rotate(-6deg); pointer-events: none; animation: stk-new 2.4s ease-in-out infinite; }
@keyframes stk-new { 50% { transform: rotate(-6deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .stk-new { animation: none; } }
.stk .face, .stk .back, .stk .edge { position: absolute; inset: 0; }
.stk .face, .stk .back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* a badge has some thickness: the faces sit 2px either side of four slices of its outline */
.stk .face { transform: translateZ(2px); }
.stk .face img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 10px 14px rgba(25,25,24,.16)); }
.stk .edge { pointer-events: none; }
.stk .edge canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* once notion.js has printed the outline and shadow onto a canvas, the filtered img steps aside */
.stk .tilt canvas.print { position: absolute; inset: -32px; width: calc(100% + 64px); height: calc(100% + 64px); max-width: none; }
.stk:not(.baked) .print, .stk.baked .face img { visibility: hidden; }
.stk.baked .face img { filter: none; }
:root[data-theme="dark"] .stk.lead:not(.baked) .face img { filter: drop-shadow(0 10px 14px rgba(25,25,24,.16)); } /* its own dark print: no white border */
.stk:not(.baked) .edge { display: none; }
/* its back is the badge seen from behind, in holographic foil: notion.js paints
   it (the print pressed through, a rainbow and a glint that follow the light) */
.stk .back { transform: rotateY(180deg) translateZ(2px); }
.stk .back canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stk:not(.baked) .back canvas { filter: drop-shadow(0 10px 14px rgba(25,25,24,.16)); }
/* the glint that crosses the front while it moves */
.stk .gloss { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } /* white: the same as screen, without the blending cost */
.stk .toss { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.stk .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--e-spring); }
/* its shadow on the page, which shrinks while it is in the air */
.stk .shade { position: absolute; left: 50%; bottom: -8px; width: 72%; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(25,25,24,.3), transparent); transform: translateX(-50%); opacity: .55; pointer-events: none; }
/* the juggling count */
.stk-pop { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; padding: 5px 8px; border-radius: 6px; font: 600 12px/1 var(--f-mono); color: var(--ink); background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 6px 16px -8px rgba(25,25,24,.35); }
.stk.landed { opacity: 1; animation: slap .56s var(--e-out) both; animation-delay: var(--d); }
@keyframes slap {
  0% { opacity: 0; transform: translateY(-60px) scale(1.7) rotate(var(--r0)); }
  62% { opacity: 1; transform: translateY(0) scale(.94) rotate(var(--r)); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r)); }
}
.stk-hint { text-align: center; margin-top: 22px; font: 12px/1 var(--f-mono); color: var(--ink-4); }

/* ==========================================================================
   TEMPLATES — one database, three views (the same cards morph between them)
   ========================================================================== */
.db-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 24px; }
.db-title { display: flex; align-items: baseline; gap: 14px; }
.db-count { font: 500 13px/1 var(--f-mono); color: var(--ink-3); background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.views { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.view { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; font-size: 14px; color: var(--ink-3); border-radius: 6px 6px 0 0; transition: color .2s, background-color .2s; }
.view:hover { background: var(--hover); color: var(--ink); }
.view[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.view[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.view svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; overflow: visible; }
.view svg * { transition: transform .4s var(--e-spring); transform-box: fill-box; transform-origin: center; }
.view-gal:hover .q1 { transform: translate(-1px, -1px) rotate(-8deg); } .view-gal:hover .q4 { transform: translate(1px, 1px) rotate(8deg); }
.view-brd:hover .k1 { transform: translateY(2px); } .view-brd:hover .k2 { transform: translateY(-2px); } .view-brd:hover .k3 { transform: translateY(3px); }
.view-tbl:hover .r1 { transform: translateX(2px); } .view-tbl:hover .r2 { transform: translateX(-2px); } .view-tbl:hover .r3 { transform: translateX(3px); }

.db { margin-top: 28px; display: grid; gap: 18px; }
.db .colh, .db .tblh { display: none; }
.tpl { position: relative; display: block; background: var(--sheet); border-radius: 8px; box-shadow: var(--sh-block); overflow: hidden; color: var(--ink); transition: box-shadow .3s var(--e-soft), transform .4s var(--e-spring); }
.tpl:hover { box-shadow: var(--sh-lift); }
.tpl-cover { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.tpl-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e-out); }
.tpl:hover .tpl-cover img { transform: scale(1.06); }
.tpl-body { display: block; padding: 12px 14px 14px; }
.tpl-name { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.tpl-props { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.tpl-go { display: none; }
/* Duplicate: a ghost copy slides out from behind the card */
.dup { position: absolute; right: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,.94); box-shadow: var(--sh-block); font: 600 12.5px/1 var(--f-ui); color: var(--ink); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .3s var(--e-spring); }
.dup::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.7); box-shadow: var(--sh-block); z-index: -1; transition: transform .35s var(--e-spring); }
.tpl:hover .dup, .tpl:focus-visible .dup { opacity: 1; transform: none; }
.tpl:hover .dup::before { transform: translate(5px, 5px); }
.dup svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* gallery */
.db[data-view="gallery"] { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* board: one column per category; dense flow stacks each card under its header */
.db[data-view="board"] { grid-template-columns: repeat(4, minmax(170px, 1fr)); grid-auto-flow: row dense; gap: 10px 14px; overflow-x: auto; padding-bottom: 6px; }
.db[data-view="board"] .colh { display: flex; align-items: center; gap: 8px; grid-row: 1; font-size: 13px; color: var(--ink-3); padding: 4px 2px 6px; }
.db[data-view="board"] .colh .n { color: var(--ink-4); }
.db[data-view="board"] .tpl { grid-column: var(--col); }
.db[data-view="board"] .tpl-cover { aspect-ratio: 16 / 7; }
.db[data-view="board"] .tpl-cover img { object-position: 50% 18%; }
.db[data-view="board"] .tpl-body { padding: 9px 11px 11px; }
.db[data-view="board"] .tpl-name { font-size: 13.5px; }
.db[data-view="board"] .tpl-cat { display: none; }
.db[data-view="board"] .dup { display: none; }
/* table */
.db[data-view="table"] { grid-template-columns: 1fr; gap: 0; background: var(--sheet); border-radius: 8px; box-shadow: var(--sh-block); overflow: hidden; }
.db[data-view="table"] .tblh { display: grid; grid-template-columns: 76px minmax(0, 1fr) 130px 84px 40px; align-items: center; gap: 14px; height: 36px; padding: 0 14px; background: var(--paper); font-size: 12.5px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.db[data-view="table"] .tpl { display: grid; grid-template-columns: 76px minmax(0, 1fr) 130px 84px 40px; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); overflow: visible; }
.db[data-view="table"] .tpl:hover { background: var(--hover); box-shadow: none; }
.db[data-view="table"] .tpl-cover { aspect-ratio: 4 / 3; border-radius: 4px; }
.db[data-view="table"] .tpl-body { display: contents; }
.db[data-view="table"] .tpl-props { display: contents; }
.db[data-view="table"] .tpl-props .tag { justify-self: start; margin: 0; }
.db[data-view="table"] .tpl-go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--ink-3); transition: transform .3s var(--e-spring), background-color .2s; }
.db[data-view="table"] .tpl:hover .tpl-go { background: var(--ink); color: var(--on-ink); transform: translateX(3px); }
.db[data-view="table"] .dup { display: none; }
@media (max-width: 700px) {
  .db[data-view="table"] .tblh { display: none; }
  .db[data-view="table"] .tpl { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .db[data-view="table"] .tpl-cat, .db[data-view="table"] .tpl-go { display: none; }
}
/* the deal-in on first view */
.db.dealing .tpl { transition: transform .9s var(--e-spring), opacity .5s; transition-delay: var(--d); }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(cursor) { animation: none; }
::view-transition-old(cursor) { display: none; }
.cursor-layer { view-transition-name: cursor; }

/* ==========================================================================
   SERVICES — toggles
   ========================================================================== */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 48px; }
.stage { position: relative; aspect-ratio: 1; max-width: 480px; width: 100%; justify-self: center; }
.stage::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, var(--ink) 1.1px, transparent 1.5px) 0 0/9px 9px; opacity: .18; -webkit-mask: radial-gradient(closest-side, #000 50%, transparent); mask: radial-gradient(closest-side, #000 50%, transparent); }
.stage img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--e-out); }
.stage img.on { clip-path: inset(0 0 0 0); }
.stage img.off { clip-path: inset(0 0 0 100%); transition-duration: .5s; }
/* all four are drawn alike (black ink on white, with a thin white edge), so they read the same in light and dark */
.toggles { display: grid; gap: 4px; }
.tg { border-radius: 8px; transition: background-color .25s; }
.tg.open { background: var(--sheet); box-shadow: var(--sh-block); }
.tg-h { width: 100%; display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 16px; text-align: left; border-radius: 8px; }
.tg:not(.open) .tg-h:hover { background: var(--hover); }
.tg-h .tri { width: 12px; height: 12px; justify-self: center; transition: transform .35s var(--e-spring); fill: var(--ink); }
.tg.open .tg-h .tri { transform: rotate(90deg); }
.tg-h .num { font: 500 13px/1 var(--f-mono); color: var(--ink-4); }
.tg-h .t { font: 500 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--f-display); color: var(--ink); letter-spacing: -.02em; }
.tg-h .price { font-size: 12.5px; }
.tg-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--e-out); }
.tg.open .tg-b { grid-template-rows: 1fr; }
.tg-b > div { overflow: hidden; }
.tg-b p { padding: 0 16px 0 50px; color: var(--ink-3); }
.tg-b ul { padding: 12px 16px 20px 50px; display: grid; gap: 8px; }
.tg-b li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; }
.tg-b li .chk { transition: background-color .2s, border-color .2s; }
.tg-b li span { transition: color .3s; }
.tg.open li .chk { animation: tick .01s forwards; animation-delay: calc(.45s + var(--i) * .28s); }
@keyframes tick { to { background: var(--focus); border-color: var(--focus); } }
.tg.open li .chk::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) scale(0); animation: tickm .3s var(--e-spring) forwards; animation-delay: calc(.45s + var(--i) * .28s); }
@keyframes tickm { to { transform: translateY(-1px) rotate(-45deg) scale(1); } }
.svc-lede { max-width: 52ch; margin-top: 16px; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-3); }
/* each service ends on its own way in: a call about exactly that */
.svc-book { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 20px 50px; padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 14.5px; color: var(--ink); background: var(--t-yellow-bg); transition: transform .35s var(--e-spring), background-color .2s; }
.svc-book svg { transition: transform .35s var(--e-spring); }
.svc-book:hover { transform: translateY(-1px); background: #FBE1A8; }
.svc-book:hover svg { transform: translateX(3px); }
/* how it goes: four to-dos, ticked one after another when they are reached */
.steps { counter-reset: st; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 7vw, 84px); }
.steps li { position: relative; display: grid; gap: 6px; padding: 18px 16px 18px; border-radius: 10px; background: var(--sheet); box-shadow: var(--sh-block); opacity: 0; transform: translateY(16px); transition: opacity .6s var(--e-out), transform .7s var(--e-spring); transition-delay: calc(var(--i) * 140ms); }
.steps.in li { opacity: 1; transform: none; }
.steps li::before { counter-increment: st; content: "0" counter(st); position: absolute; right: 14px; top: 16px; font: 500 12px/1 var(--f-mono); color: var(--ink-4); }
.steps li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 30px; width: 12px; height: 1.5px; background: var(--line-2); }
.steps b { font: 500 1.35rem/1.1 var(--f-display); color: var(--ink); letter-spacing: -.015em; margin-top: 4px; }
.steps span:last-child { font-size: 14.5px; color: var(--ink-3); }
.steps .chk { margin-bottom: 6px; }
/* once in, a soft light walks along the four, one after another, and the line between them carries it on;
   pointing at one lifts it a little, without moving its words */
.steps li { background-image: linear-gradient(90deg, transparent, var(--focus) 30%, var(--focus) 70%, transparent); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 0; }
.steps.live li { transition: transform .35s var(--e-spring), box-shadow .3s var(--e-soft); transition-delay: 0s; animation: st-walk 8s var(--e-soft) infinite; animation-delay: calc(var(--i) * 2s); }
.steps.live li:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.steps.live li:hover::before { color: var(--ink); }
.steps li::before { transition: color .2s; }
.steps.live li:not(:last-child)::after { background: linear-gradient(90deg, var(--line-2) 0 40%, var(--focus) 50%, var(--line-2) 60% 100%) 100% 0 / 300% 100%; animation: st-pass 8s linear infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes st-walk { 0% { background-size: 0% 2px; background-position: 0 0; } 14% { background-size: 100% 2px; background-position: 0 0; } 22%, 100% { background-size: 0% 2px; background-position: 100% 0; } }
@keyframes st-pass { 0%, 16% { background-position: 100% 0; } 26%, 100% { background-position: 0 0; } }
@media (max-width: 900px) { .steps.live li::after { animation: none; } }
.steps.in .chk { animation: tick .01s forwards; animation-delay: calc(.5s + var(--i) * .32s); }
.steps.in .chk::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) scale(0); animation: tickm .3s var(--e-spring) forwards; animation-delay: calc(.5s + var(--i) * .32s); }
.svc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tg-b .res { margin-top: 12px; font-weight: 600; color: var(--ink); }
.tg-b .res + ul { padding-top: 8px; }
.svc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 16px 20px 50px; }
.svc-go .svc-book { margin: 0; }
.svc-more { font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color .2s; }
.svc-more:hover { color: var(--ink); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } .steps li:nth-child(2)::after { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .steps li::after { display: none; } }
/* the last word: a callout block that books */
.close-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: clamp(24px, 4vw, 40px); border-radius: 14px; background: var(--t-yellow-bg); box-shadow: var(--sh-block); }
.close-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--glass-2); }
.close-ic svg { width: 28px; height: 28px; }
.close-card h2 { font: 500 clamp(1.8rem, 3.6vw, 2.8rem)/1.02 var(--f-display); letter-spacing: -.025em; color: var(--ink); }
.close-card p { margin-top: 8px; color: var(--t-yellow); }
@media (max-width: 760px) { .close-card { grid-template-columns: 1fr; } }
/* a page's properties (Book a call, Contact): Notion's own rows of label and value */
.props { display: grid; gap: 2px; margin: 26px 0 8px; }
.props > div { display: grid; grid-template-columns: 110px 1fr; align-items: center; min-height: 34px; padding: 0 6px; border-radius: 6px; font-size: 14.5px; }
.props > div:hover { background: var(--hover); }
.props dt { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.props dt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.props dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--ink); animation: prop-in .4s var(--e-out); }
.props dd img { width: 20px; height: 20px; border-radius: 50%; }
.props .ph { color: var(--ink-4); }
@keyframes prop-in { from { opacity: .3; transform: translateX(-4px); } }
.foot a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.foot a:hover { color: var(--ink); }
@media (max-width: 860px) { .svc { grid-template-columns: minmax(0, 1fr); } .stage { max-width: 300px; } }
/* on a phone a long tag (Best For Growing Workflows) drops under its title instead of widening the row */
@media (max-width: 560px) { .tg-h .price { grid-column: 3; grid-row: 2; justify-self: start; white-space: normal; } }

/* ==========================================================================
   VOICES — comments with the key phrase highlighted as you arrive
   ========================================================================== */
.voices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 6px; gap: 0 18px; margin-top: 44px; align-items: start; }
.cmt { background: var(--sheet); border-radius: 10px; box-shadow: var(--sh-block); padding: 18px 18px 20px; transform: rotate(var(--rot, 0deg)); transition: transform .5s var(--e-spring), box-shadow .3s; }
.cmt:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--sh-lift); }
.cmt.lift { margin-top: 36px; }
.cmt[hidden] { display: none; }
.voices-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.voices-sub { margin-top: 12px; max-width: 52ch; font-size: 15px; color: var(--ink-3); }
.voices-all { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--ink); transition: background-color .2s; }
.voices-all:hover { background: var(--hover); }
.voices-all svg { transition: transform .35s var(--e-spring); }
.voices-all:hover svg { transform: translateX(3px); }
.cmt footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.cmt .stars { font-size: 14px; letter-spacing: 1px; color: #CB912F; }
.cmt header { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.cmt header img, .cmt .ini { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.cmt .ini { display: grid; place-items: center; font: 600 13px/1 var(--f-ui); }
.cmt .who { min-width: 0; line-height: 1.25; }
.cmt header b { color: var(--ink); font-weight: 600; }
.cmt .who small { display: block; font-size: 12px; color: var(--ink-4); }
.cmt header .tag { margin-left: auto; }
/* the last card: these are only the highlights */
.cmt-more { display: grid; align-content: start; gap: 10px; background: transparent; box-shadow: none; border: 1.5px dashed var(--line-2); color: var(--ink-3); }
.cmt-more:hover { background: var(--sheet); border-style: solid; }
.cmt-more .more-n { font: 500 clamp(1.4rem, 2.2vw, 1.8rem)/1 var(--f-display); color: var(--ink); letter-spacing: -.02em; }
.cmt-more .more-t { font-size: 14px; line-height: 1.5; }
.cmt-more .more-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ink); }
.cmt blockquote { margin-top: 12px; font: 400 clamp(1.05rem, 1.5vw, 1.2rem)/1.45 var(--f-display); color: var(--ink); }
.cmt mark { color: inherit; background: linear-gradient(var(--mark), var(--mark)) 0 88%/0% 70% no-repeat; padding: 0 1px; transition: background-size 1.1s var(--e-out) .35s; }
.cmt.in mark { background-size: 100% 70%; }
@media (max-width: 860px) { .voices-grid { grid-template-columns: 1fr; } .cmt.lift { margin-top: 0; } }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 40px 0 48px; font: 12px/1.4 var(--f-mono); color: var(--ink-4); }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } .door { min-height: 150px; } }

/* ==========================================================================
   COMMENTS PAGE (comments.html): a Notion page of every comment, and the box
   to leave one
   ========================================================================== */
.cpage { position: relative; z-index: 1; padding: clamp(110px, 14vw, 150px) 0 24px; }
.cp-head { max-width: 760px; }
.cp-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 20px; border-radius: 18px; background: var(--sheet); box-shadow: var(--sh-block); }
.cp-icon svg { width: 46px; height: 46px; }
.cp-title { font: 500 clamp(3rem, 7.5vw, 5.6rem)/.98 var(--f-display); letter-spacing: -.035em; color: var(--ink); }
.cp-head .lede { max-width: 50ch; }
/* page properties, as Notion lists them under a title */
.cp-props { display: grid; gap: 2px; margin: 26px 0 0; font-size: 14px; }
.cp-props div { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; min-height: 34px; padding: 0 6px; border-radius: 6px; }
.cp-props div:hover { background: var(--hover); }
.cp-props dt { color: var(--ink-3); }
.cp-props dd { margin: 0; color: var(--ink); font-weight: 600; }
.cp-props .stars { color: #CB912F; letter-spacing: 1px; }
.cp-props small { font-weight: 400; color: var(--ink-3); }
.cp-group { margin-top: clamp(56px, 8vw, 96px); }
.cp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 500 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.cp-h .tag { font: 500 13px/1 var(--f-ui); letter-spacing: 0; }
.cp-group .voices-grid { margin-top: 28px; }
.cp-leave { margin-top: clamp(80px, 10vw, 140px); scroll-margin-top: 96px; }
.cp-leave .lede { max-width: 46ch; }
.cp-box { margin-top: 28px; max-width: 760px; }
.cp-box { max-width: none; }
/* our own comment box (js/comment-box.js): Notion properties, a comment that grows, and its card, live */
.cb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.cb-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: clamp(16px, 2.4vw, 26px); border-radius: 18px; background: var(--sheet); box-shadow: var(--sh-lift); }
.cb-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 36px; padding: 0 6px; border-radius: 8px; }
.cb-row:hover { background: var(--hover); }
.cb-l { font-size: 14px; color: var(--ink-3); }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-chips button { height: 28px; padding: 0 10px; cursor: pointer; opacity: .55; transition: opacity .2s, transform .3s var(--e-spring), box-shadow .2s; }
.cb-chips button[aria-checked="true"] { opacity: 1; box-shadow: 0 0 0 2px currentColor; transform: translateY(-1px); }
.cb-tpl select { justify-self: start; max-width: 100%; height: 32px; padding: 0 30px 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 14px; }
.cb-tpl .mn { justify-self: start; }
.cb-tpl[hidden] { display: none; }
.cb-stars { display: flex; align-items: center; gap: 2px; }
.cb-stars button { font-size: 24px; line-height: 1; padding: 0 2px; color: var(--line-2); cursor: pointer; transition: color .15s, transform .3s var(--e-spring); }
.cb-stars button.on { color: #E2A93B; }
.cb-stars button:hover { transform: scale(1.25) rotate(-8deg); }
.cb-say { margin-left: 10px; font-size: 13px; font-style: normal; font-weight: 600; color: var(--ink-3); }
.cb-write { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 6px; padding: 14px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.cb-write:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.cb-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; color: var(--t-purple); background: var(--t-purple-bg); transition: transform .4s var(--e-spring); }
.cb-write textarea { min-height: 96px; border: 0; background: none; resize: none; font: 400 17px/1.5 var(--f-display); color: var(--ink); }
.cb-write textarea:focus, .cb-idea textarea:focus { outline: none; }
.cb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-two input { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 15px; }
.cb-two input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.cb-more { border-radius: 10px; }
.cb-more summary { display: flex; align-items: center; gap: 8px; padding: 8px 6px; font-size: 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; list-style: none; }
.cb-more summary::-webkit-details-marker { display: none; }
.cb-more summary::before { content: "▸"; font-size: 11px; transition: transform .25s; }
.cb-more[open] summary::before { transform: rotate(90deg); }
.cb-idea { align-items: start; } .cb-idea textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); resize: vertical; font-size: 14.5px; }
.cb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.cb-note { font-size: 13px; color: var(--ink-4); }
.cb-send[disabled] { opacity: .45; cursor: not-allowed; }
.cb-done { padding: 12px 14px; border-radius: 10px; font-size: 14.5px; background: var(--t-yellow-bg); color: var(--t-yellow); }
.cb-done.ok { background: var(--t-green-bg); color: var(--t-green); }
.cb-done a { text-decoration: underline; }
.cb.sent .cb-send { display: none; }
.cb-prev { position: sticky; top: 96px; display: grid; gap: 10px; }
.cb-pl { font: 500 12px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.cb-card .cmt { margin: 0; opacity: 1; transform: rotate(var(--rot)); }
.cb-ph { color: var(--ink-4); font-style: italic; }
@media (max-width: 860px) { .cb { grid-template-columns: minmax(0, 1fr); } .cb-prev { position: static; } }
@media (max-width: 560px) { .cb-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px; } .cb-two { grid-template-columns: minmax(0, 1fr); } .cb-stars { flex-wrap: wrap; } }
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); }
.callout b { color: var(--ink); }
@media (max-width: 700px) {
  .cp-props div { grid-template-columns: 130px minmax(0, 1fr); }
  .callout { grid-template-columns: auto minmax(0, 1fr); }
  .callout .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ==========================================================================
   CURSOR — six dots that rearrange into what you can do
   ========================================================================== */
.cd { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); will-change: transform; transition: width .2s, height .2s, margin .2s, background-color .2s, border-radius .2s; }
.cursor-layer.k-text .cd { width: 3px; height: 5px; margin: -2.5px 0 0 -1.5px; border-radius: 1px; }
.cursor-layer.k-text { animation: caret 1.05s steps(1) infinite .5s; }
@keyframes caret { 50% { opacity: .15; } }
.cursor-layer .cd.hot { background: var(--focus); }
.cursor-tip { position: absolute; left: 0; top: 0; font: 600 11px/1 var(--f-ui); color: var(--ink); background: var(--sheet); box-shadow: var(--sh-block); border-radius: 5px; padding: 5px 7px; white-space: nowrap; opacity: 0; transform: translate(22px, 18px) scale(.8); transform-origin: 0 0; transition: opacity .18s, transform .25s var(--e-spring); }
.cursor-tip.on { opacity: 1; transform: translate(22px, 18px) scale(1); }
/* a label an element names itself (data-tip): larger, dark, unmistakable */
.cursor-tip.big { padding: 9px 13px; border-radius: 999px; font-size: 13.5px; color: var(--on-ink); background: var(--ink); box-shadow: 0 10px 24px -8px rgba(25, 25, 24, .5); }
.cursor-tip.big::after { content: " →"; }

/* on a phone the nav is a dock at the bottom: the top is free, the bottom is not */
@media (max-width: 760px) { .hero-pin { padding-top: 28px; padding-bottom: 80px; } .cpage { padding-top: 48px; } }

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-pin { position: relative; min-height: 100vh; }
  .stk { opacity: 1; }
}

/* ==========================================================================
   FOOTER (js/foot.js) — a mind map: her workspace is the root, five titled
   branches hang from it (toggles), each page on its branch's trunk, rows with
   a hover and no edge, the page you are on marked, and her name beneath,
   inked in under the pointer.
   ========================================================================== */
.ft { position: relative; z-index: 1; padding: clamp(40px, 6vw, 72px) 0 28px; }
.ft-sheet { padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--sheet); box-shadow: var(--sh-lift); }
.ft-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ft-ws { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; transition: background-color .2s; }
.ft-ws:hover { background: var(--hover); }
.ft-ws img { width: 30px; height: 30px; border-radius: 8px; }
.ft-ws span { display: grid; gap: 2px; }
.ft-ws b { font-size: 15px; color: var(--ink); }
.ft-ws small { font-size: 12.5px; color: var(--ink-4); }
.ft-cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px clamp(12px, 2vw, 26px); padding-top: 30px; }
/* the root's branches (js/foot.js draws them, on a wide screen) */
.ft-roots { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ft-roots path { fill: none; stroke: color-mix(in srgb, var(--ink-4) 55%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.ft-roots circle { fill: var(--ink-4); }
.ft-sec[hidden] { display: none; }
.ft-h { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 100%; padding: 7px 10px 7px 8px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 600 12.5px/1 var(--f-ui); letter-spacing: .02em; color: var(--ink-2); text-align: left; transition: background-color .2s, color .2s; }
.ft-h:hover { background: var(--hover); color: var(--ink); }
.ft-h .tri { width: 9px; height: 9px; fill: currentColor; transition: transform .3s var(--e-spring); }
.ft-sec.open .ft-h .tri { transform: rotate(90deg); }
.ft-n { margin-left: 4px; font: 500 11px/1 var(--f-mono); color: var(--ink-4); }
/* a branch's pages hang from a trunk that runs down from its title, a twig to each (the last one curls in) */
.ft-tree { position: relative; margin: 2px 0 0 14px; padding-left: 0; }
.ft-tree > li { position: relative; padding-left: 16px; }
.ft-tree > li::before { content: ""; position: absolute; left: 0; top: -2px; bottom: 0; border-left: 1.4px solid color-mix(in srgb, var(--ink-4) 55%, transparent); }
.ft-tree > li::after { content: ""; position: absolute; left: 0; top: -2px; width: 12px; height: 22px; border-left: 1.4px solid color-mix(in srgb, var(--ink-4) 55%, transparent); border-bottom: 1.4px solid color-mix(in srgb, var(--ink-4) 55%, transparent); border-bottom-left-radius: 8px; }
.ft-tree > li:last-of-type::before { display: none; } /* the light layer comes after the last branch */
/* the branch light (js/foot.js): a thin line drawn on the tree's own path, quiet and without glow.
   White for pages (on the light theme a faint ink edge lets white read on the white sheet); a soft shade of the logo's
   colour for social pages. Each has its own shade for light and dark. */
:root { --fl-core: rgba(25,25,24,.5);
  --fl-linkedin: rgba(10,102,194,.55); --fl-youtube: rgba(242,0,45,.5); --fl-gumroad: rgba(214,77,173,.55); --fl-x: rgba(25,25,24,.55); }
:root[data-theme="dark"] { --fl-core: rgba(255,255,255,.62);
  --fl-linkedin: rgba(96,165,236,.6); --fl-youtube: rgba(255,92,108,.55); --fl-gumroad: rgba(255,144,232,.55); --fl-x: rgba(255,255,255,.55); }
.ft-light { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); overflow: visible; pointer-events: none; z-index: 1; visibility: hidden; }
.ft-light path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 9999; }
.ft-lc { stroke-width: 1.6; }
.ft-light.plain .ft-lc { stroke: var(--fl-core); }
.ft-list { display: grid; gap: 2px; }
.ft-sec:not(.open) .ft-list { display: none; }
.ft-list li[hidden] { display: none; }
/* rows sit straight on the sheet, as in Notion's sidebar: no edge round them, only the hover */
.ft-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border-radius: 10px; transition: background-color .2s; }
.ft-row:hover { background: var(--hover); }
.ft-row.on { background: var(--paper); }
.ft-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--ink-3); background: var(--paper); transition: transform .45s var(--e-spring), background-color .2s, color .2s; }
.ft-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ft-ic.brand { background: none; }
.ft-ic.brand svg, .ft-ic.brand img { width: 22px; height: 22px; stroke: none; }
.ft-row:hover .ft-ic:not(.brand) { transform: rotate(-8deg) scale(1.08); }
.ft-ic.brand { background: none; }
.ft-ic.brand svg, .ft-ic.brand img { width: 22px; height: 22px; stroke: none; }
.ft-row:hover .ft-ic:not(.brand) { color: var(--ink); background: var(--paper-2); }
.ft-row.hot .ft-ic { color: var(--on-ink); background: var(--ink); }
.ft-t { display: grid; min-width: 0; }
.ft-t b { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ft-go { color: var(--ink-4); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--e-spring); }
.ft-row:hover .ft-go { opacity: 1; transform: none; color: var(--ink); }
.ft-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-4); }
.ft-ed { display: inline-flex; align-items: center; gap: 6px; }
.ft-ed img { width: 16px; height: 16px; border-radius: 50%; }
/* Subscribe, at the bottom: an email box (sending it opens the Subscribe dialog with the email filled in) */
.ft-sub { --si-a: #2383E2; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 300px) auto; align-items: center; gap: 12px 14px; margin-top: 26px; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s; }
:root[data-theme="dark"] .ft-sub { --si-a: #529CCA; }
.ft-sub:hover, .ft-sub:focus-within { box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-block); }
.ft-sub-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.ft-sub-ic .si { width: 24px; height: 24px; }
.ft-sub-t { display: grid; gap: 3px; }
.ft-sub-t b { font-size: 14.5px; color: var(--ink); }
.ft-sub-t small { font-size: 12.5px; color: var(--ink-3); }
.ft-sub-f input { width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 14px; color: var(--ink); transition: box-shadow .2s; }
.ft-sub-f input::placeholder { color: var(--ink-4); }
.ft-sub-f input:focus { outline: 0; box-shadow: 0 0 0 2px var(--focus); }
.ft-sub-go { height: 42px; padding: 0 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: transform .35s var(--e-spring); }
.ft-sub-go span { display: inline-block; transition: transform .35s var(--e-spring); }
.ft-sub-go:hover { transform: translateY(-1px); } .ft-sub-go:hover span { transform: translateX(3px); }
@media (max-width: 900px) { .ft-sub { grid-template-columns: auto minmax(0, 1fr); } .ft-sub-f { grid-column: 1 / -1; } .ft-sub-go { grid-column: 1 / -1; } }
.ft-up { margin-left: auto; white-space: nowrap; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: background-color .2s, color .2s; }
.ft-up:hover { background: var(--hover); color: var(--ink); }
.ft-up span { display: inline-block; transition: transform .35s var(--e-spring); }
.ft-up:hover span { transform: translateY(-3px); }
/* her name, large, in the page's own grey; the pointer inks it in */
/* sized by foot.js to fill the width; the line is tall enough for every capital and descender */
.ft-word { position: relative; margin-top: clamp(18px, 3vw, 30px); padding: .08em 0 .04em; font: 500 clamp(3rem, 11vw, 10rem)/1.12 var(--f-display); letter-spacing: -.035em; white-space: nowrap; text-align: center; user-select: none; }
.ft-word span { display: inline-block; color: var(--paper-2); -webkit-text-stroke: 1px rgba(55, 53, 47, .08); }
.ft-word .ink { position: absolute; left: 50%; top: .08em; transform: translateX(-50%); color: var(--ink); -webkit-text-stroke: 0; opacity: 0; transition: opacity .3s;
  -webkit-mask: radial-gradient(circle 120px at var(--mx, 50%) var(--my, 50%), #000 30%, transparent 75%); mask: radial-gradient(circle 120px at var(--mx, 50%) var(--my, 50%), #000 30%, transparent 75%); }
.ft-word.lit .ink { opacity: 1; }
/* narrower: the branches wrap, two to a row, each keeping its own tree */
@media (max-width: 900px) { .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 10px; } }
@media (max-width: 560px) {
  .ft-up { margin-left: 0; }
  .ft-row { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 6px 6px; }
  .ft-row .ft-go { display: none; }
  .ft-row:not(.hot) .ft-t small { display: none; }
  .ft-t b { font-size: 13.5px; line-height: 1.25; }
  .ft-ic { width: 22px; height: 22px; }
  .ft-tree { margin-left: 10px; }
  .ft-tree > li { padding-left: 12px; }
  .ft-tree > li::after { width: 9px; height: 20px; }
}

/* ==========================================================================
   BOOKING TOAST (js/toast.js) — the Strategy Call, one click away, on the
   Services page and in the home page's Services section
   ========================================================================== */
.bt { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; width: min(330px, calc(100% - 20px)); padding: 9px 8px 9px 10px; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-lift); transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .5s var(--e-spring), opacity .3s; }
.bt.show { transform: none; opacity: 1; pointer-events: auto; }
.bt-me { width: 36px; height: 36px; border-radius: 50%; }
.bt-t { display: grid; gap: 4px; min-width: 0; }
.bt-t b { font-size: 14px; line-height: 1.1; color: var(--ink); }
.bt-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bt-facts .tag { padding: 1px 6px; font-size: 12px; font-weight: 650; }
.bt-where { font-size: 11.5px; color: var(--ink-4); }
.bt-t small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-t small i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #34C759; }
.bt-next { font-weight: 600; color: var(--ink-2); }
.bt-go { padding: 9px 14px; border-radius: 9px; font-size: 14px; font-weight: 650; color: var(--on-ink); background: var(--ink); transition: transform .35s var(--e-spring); }
.bt-go:hover { transform: translateY(-1px); }
.bt-x { width: 24px; height: 24px; border-radius: 6px; font-size: 17px; line-height: 1; color: var(--ink-4); }
.bt-x:hover { background: var(--hover); color: var(--ink); }
@media (max-width: 760px) { .bt { right: 10px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .bt-me { display: none; } .bt { grid-template-columns: 1fr auto auto; } }

/* ==========================================================================
   TEMPLATES TEASER (home) — "Duplicate": a Notion window shows her templates
   one at a time; a pointer presses Duplicate, the copy lifts off and lands in
   the workspace's sidebar, and the next one opens. One link to the Templates
   page (the cursor says "Go to Templates Page"); pointing at it pauses it.
   ========================================================================== */
.shelf-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.shelf-lede { margin-top: 16px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-3); }
.shelf-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.shelf-facts .tag { font-size: 13px; }
.shelf-go { margin-top: 26px; }
.shelf-play { position: relative; display: block; border-radius: 20px; }
.shelf-play:focus-visible { outline-offset: 8px; }
.dpl { position: relative; display: block; padding: 14px 0 34px; }
/* two pages waiting behind, so it reads as a stack of templates, not one */
.dpl-back, .dpl-back::before { position: absolute; left: 6%; right: 6%; top: 2px; bottom: 40px; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-block); opacity: .55; transform: translateY(-10px) scale(.96); }
.dpl-back::before { content: ""; left: 4%; right: 4%; top: 0; bottom: 0; opacity: .7; transform: translateY(-10px) scale(.96); }
.dpl-win { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-lift); transition: transform .5s var(--e-out), box-shadow .3s; transform-origin: 50% 60%; will-change: transform; }
.dpl.held .dpl-win { box-shadow: 0 0 0 1px rgba(15, 15, 15, .05), 0 14px 26px rgba(15, 15, 15, .1), 0 34px 70px rgba(15, 15, 15, .18); }
.dpl-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.dpl-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.dpl-bar > i:nth-child(2) { background: #FEBC2E; }
.dpl-bar > i:nth-child(3) { background: #28C840; margin-right: 8px; }
.dpl-crumb { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--ink-3); }
.dpl-crumb b { font-weight: 400; color: var(--ink-4); margin: 0 3px; }
.dpl-crumb-t { color: var(--ink); font-weight: 550; }
.dpl-body { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); }
/* the sidebar: where duplicated templates land */
.dpl-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: var(--paper); border-right: 1px solid var(--line); min-width: 0; }
.dpl-ws { display: flex; align-items: center; gap: 7px; padding: 4px 6px 10px; font-size: 12.5px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpl-ws img { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.dpl-row { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.dpl-row span { overflow: hidden; text-overflow: ellipsis; }
.dpl-row svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linejoin: round; }
.dpl-row img { width: 22px; height: 17px; flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.dpl-list { display: flex; flex-direction: column; gap: 2px; min-height: 124px; }
.dpl-list .dpl-row { transition: background-color .6s, opacity .35s, transform .35s var(--e-out); }
.dpl-new { background: var(--select); animation: dpl-row .55s var(--e-spring); }
.dpl-out { opacity: 0; transform: translateX(-10px); }
@keyframes dpl-row { from { opacity: 0; transform: translateY(-8px) scale(.96); max-height: 0; } to { max-height: 40px; } }
.dpl-count { margin-top: auto; padding: 10px 6px 2px; font-size: 11.5px; color: var(--ink-4); }
.dpl-count b { color: var(--ink); font-weight: 650; }
/* the page: its cover, its name, its properties */
.dpl-main { position: relative; display: block; padding: 14px 14px 64px; min-height: 100%; }
.dpl-pg { display: none; }
.dpl-pg.on { display: block; animation: dpl-pg .7s var(--e-out); }
@keyframes dpl-pg { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } }
.dpl-cover { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--line); }
.dpl-cover img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 30%; }
.dpl-pg.on .dpl-cover img { animation: dpl-zoom 4.3s linear both; }
@keyframes dpl-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.dpl-pt { display: grid; gap: 8px; padding: 12px 2px 0; }
.dpl-pt b { font: 500 clamp(1.25rem, 2vw, 1.6rem)/1.1 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.dpl-props { display: flex; flex-wrap: wrap; gap: 6px; }
.dpl-props .tag { font-size: 12.5px; font-weight: 600; }
.dpl-props s { opacity: .6; font-weight: 500; }
.dpl-btn { position: absolute; right: 14px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border-radius: 8px; font-size: 13.5px; font-weight: 650; color: var(--on-ink); background: var(--ink); box-shadow: 0 6px 16px rgba(25, 25, 24, .2); transition: transform .25s var(--e-spring), background-color .2s; }
.dpl-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dpl-btn.press { transform: scale(.94); }
.dpl-btn.busy { background: var(--focus); color: #fff; }
.dpl-btn.busy span { font-size: 0; }
.dpl-btn.busy span::before { content: "Duplicating…"; font-size: 13.5px; }
/* the copy in flight, and the pointer that pressed */
.dpl-fly { position: absolute; left: 0; top: 0; z-index: 4; overflow: hidden; border-radius: 10px; opacity: 0; pointer-events: none; box-shadow: 0 0 0 2px var(--select-edge), var(--sh-lift); }
.dpl-fly img { width: 100%; height: 100%; object-fit: cover; }
.dpl-fly.go { transition: transform .75s cubic-bezier(.55, 0, .25, 1), width .75s cubic-bezier(.55, 0, .25, 1), height .75s cubic-bezier(.55, 0, .25, 1), border-radius .75s, opacity .2s .6s; border-radius: 3px; }
.dpl-ptr { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; opacity: 0; pointer-events: none; transform: translate(60%, 80%); transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .3s; }
.dpl-ptr svg { width: 100%; height: 100%; fill: var(--ink); stroke: var(--sheet); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); transition: transform .15s; }
.dpl-ptr.on { opacity: 1; }
.dpl-ptr.click svg { transform: scale(.82); }
.dpl-ptr.click::after { content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--focus); animation: dpl-ring .5s var(--e-out) forwards; }
@keyframes dpl-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
/* which of the five is open */
.dpl-pips { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 6px; }
.dpl-pips i { position: relative; width: 22px; height: 4px; border-radius: 4px; overflow: hidden; background: var(--line-2); }
.dpl-pips u { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: var(--ink); }
.dpl-pips .done u { transform: none; }
.dpl-pips .on u { animation: dpl-pip 4.3s linear forwards; }
@keyframes dpl-pip { to { transform: none; } }
@media (max-width: 960px) { .shelf-grid { grid-template-columns: 1fr; } .shelf-play { max-width: 640px; width: 100%; justify-self: center; } }
@media (max-width: 520px) {
  .dpl-body { grid-template-columns: 64px minmax(0, 1fr); }
  .dpl-side { padding: 10px 6px; }
  .dpl-ws { padding: 2px 2px 8px; font-size: 0; justify-content: center; }
  .dpl-row { justify-content: center; padding: 3px 2px; font-size: 0; gap: 0; }
  .dpl-row span { display: none; }
  .dpl-count { text-align: center; padding: 8px 0 0; font-size: 0; }
  .dpl-count b { font-size: 12px; }
  .dpl-main { padding: 10px 10px 58px; }
  .dpl-btn { right: 10px; bottom: 12px; }
  .dpl-crumb { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .dpl-pg.on, .dpl-pg.on .dpl-cover img, .dpl-new { animation: none; } .dpl-pips .on u { animation: none; transform: none; } }


/* ==========================================================================
   DARK MODE — Notion's own dark: warm greys, soft text, darker tags.
   Set by js/theme.js (html[data-theme="dark"]); every colour above is a token.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191919; --paper-2: #222221; --sheet: #252524;
  --hover: rgba(255, 255, 255, .055);
  --ink: #EDEBE7; --ink-2: #D2CFCA; --ink-3: #A9A6A0; --ink-4: #85827D;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17);
  --select: rgba(76, 157, 235, .3); --select-edge: rgba(76, 157, 235, .7); --focus: #4C9DEB;
  --t-gray-bg: #393937;   --t-gray: #DEDCD7;
  --t-brown-bg: #4A3328;  --t-brown: #EBCDBD;
  --t-orange-bg: #5B3B1F; --t-orange: #F5CDA6;
  --t-yellow-bg: #574A23; --t-yellow: #F3E2A6;
  --t-green-bg: #23402F;  --t-green: #BDE3C6;
  --t-blue-bg: #1D3A50;   --t-blue: #B2D7F0;
  --t-purple-bg: #3E2E4E; --t-purple: #DCC7EF;
  --t-pink-bg: #4E2C3B;   --t-pink: #F2C5D9;
  --t-red-bg: #56302C;    --t-red: #F6BEB6;
  --mark: #5E4E1F;
  --sh-block: 0 0 0 1px rgba(255, 255, 255, .06), 0 3px 8px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .35);
  --sh-lift: 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 18px rgba(0, 0, 0, .45), 0 26px 52px rgba(0, 0, 0, .5);
  --on-ink: #191919;
  --glass: rgba(37, 37, 36, .86); --glass-2: rgba(255, 255, 255, .05); --gloss: rgba(255, 255, 255, .06);
  --hover-solid: #2C2C2B; --dots: rgba(255, 255, 255, .13);
  --nav-bg: rgba(37, 37, 36, .78);
}
:root[data-theme="dark"] img:not(.nb-keep) { filter: brightness(.92); }
/* the hero's to-do sits straight on the page, as Notion's own to-dos do in dark */
:root[data-theme="dark"] .todo { background: none; padding-left: 0; color: var(--ink); }
:root[data-theme="dark"] .todo .box { border-color: var(--ink-3); }


/* ==========================================================================
   FAQ (home): her four questions as Notion toggles on one page. One answer is
   open at a time and writes itself out as it opens, so the card keeps its size.
   ========================================================================== */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-lede { margin-top: 18px; max-width: 44ch; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; color: var(--ink-3); }
.faq-more { margin-top: 18px; font-weight: 600; color: var(--ink-2); }
.faq-more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.faq-more a:hover { text-decoration-color: var(--ink); }
.faq-page { display: grid; gap: 4px; padding: clamp(12px, 2vw, 20px); border-radius: 18px; background: var(--sheet); box-shadow: var(--sh-lift); }
.fq { border-radius: 10px; transition: background-color .25s; }
.fq:has(.fq-q[aria-expanded="true"]) { background: var(--paper); }
.fq-q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px; border-radius: 10px; text-align: left; font: 500 clamp(1.1rem, 1.6vw, 1.3rem)/1.3 var(--f-display); color: var(--ink); cursor: pointer; transition: background-color .2s; }
.fq-q:hover { background: var(--hover); }
.fq-q:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fq-tri { flex: none; width: 0; height: 0; border-left: 7px solid var(--ink-3); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .3s var(--e-spring); }
.fq-q[aria-expanded="true"] .fq-tri { transform: rotate(90deg); border-left-color: var(--ink); }
.fq-a { padding: 0 16px 16px 37px; }
.fq-a p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.fq-a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* the words arrive one after another, like a page being written */
.fq-a .w { opacity: 0; filter: blur(3px); animation: fq-w .45s var(--e-out) forwards; animation-delay: calc(var(--n) * 14ms); }
@keyframes fq-w { to { opacity: 1; filter: none; } }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fq-a .w { animation: none; opacity: 1; filter: none; } }

/* --- 404.html: an address that isn't a page ---------------------------------------------------------- */
.lost { position: relative; z-index: 1; min-height: 70vh; display: grid; align-items: center; padding: clamp(110px, 12vw, 150px) 0 40px; }
.lost-in { max-width: 680px; }
.lost-code { font: 500 clamp(4rem, 12vw, 7.5rem)/1 var(--f-display); letter-spacing: -.04em; color: var(--paper-2); -webkit-text-stroke: 1px var(--line-2); }
.lost h1 { margin-top: 10px; font: 500 clamp(1.8rem, 3.4vw, 2.6rem)/1.1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.lost-lede { margin-top: 12px; color: var(--ink-3); }
.lost-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lost-go a { display: inline-flex; gap: 8px; padding: 9px 14px; border-radius: 10px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; color: var(--ink); transition: background-color .2s; }
.lost-go a:hover { background: var(--hover); }
.lost-go a span { transition: transform .3s var(--e-spring); } .lost-go a:hover span { transform: translateX(3px); }