/* The What We Do round of 2 Nov 2026 (Troy, on his phone: the words "so boring", From $899 to "stand out a bit more",
   the pain points of custom software, "a little gold card" for the $199 Gold plan, the care plans advertised, questions
   that don't look boring, buttons that move). Pieces arrive once they're on screen (reveal.js); Motion: Off keeps
   everything still and in place. */

/* Buttons that answer the pointer, as on Work. */
#main .btn { position:relative; overflow:hidden; isolation:isolate; transition:transform .25s var(--settle), box-shadow .25s var(--settle), background .25s, color .25s, border-color .25s; }
#main .btn::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, #ffffff73 50%, transparent 70%); transform:translateX(-120%); transition:transform .7s var(--settle); pointer-events:none; }
#main .btn span[aria-hidden] { display:inline-block; transition:transform .25s var(--settle); }
@media (hover:hover) {
  #main .btn:hover { transform:translateY(-3px); box-shadow:0 14px 26px -12px #10122566; }
  #main .btn:hover::after { transform:translateX(120%); }
  #main .btn:hover span[aria-hidden] { transform:translateX(4px); }
}
#main .btn:active { transform:scale(.97); }

/* Shared: a bold title, one short line, and two columns from 900px. */
.wwd-h2 { margin:18px 0 0; font:800 clamp(36px,5.2vw,68px)/1 var(--font-display); letter-spacing:-.045em; text-wrap:balance; }
.wwd-h2 em { color:#6b32c2; }
.wwd-lede { margin:16px 0 0; max-width:34ch; font:500 clamp(18px,1.6vw,21px)/1.4 var(--font-body); color:var(--fg-2, var(--muted)); }
.wwd-split { display:grid; grid-template-columns:minmax(0,1fr); gap:28px clamp(32px,6vw,88px); }
.wwd-deal { display:grid; gap:18px; align-content:start; }
#business-systems, #marketing, #care { padding-block:clamp(64px,4.5vw,72px); }

/* Bespoke websites: three real sites in a fan, four promises, the price as a stamp. */
.wwd-site { padding-top:clamp(40px,3vw,48px); }
.wwd-fan { position:relative; display:block; aspect-ratio:16/11; color:var(--ink); text-decoration:none; }
.wwd-fan figure { position:absolute; left:16%; top:12%; width:68%; margin:0; padding-top:20px; border-radius:14px; overflow:hidden; background:#fffdf9; box-shadow:0 26px 50px -26px #0d102499, 0 0 0 1px #0d102414; transition:transform .8s var(--settle); }
.wwd-fan figure::before { content:""; position:absolute; top:7px; left:10px; width:30px; height:6px; background:radial-gradient(circle, #d7cfe5 2.6px, transparent 3px) 0 0/10px 6px repeat-x; }
.wwd-fan img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.wwd-fan figcaption { position:absolute; top:4px; left:46px; right:10px; height:12px; padding:0 8px; border-radius:999px; overflow:hidden; background:#f1ece4; color:#6b6577; font:500 8px/12px var(--font-mono); white-space:nowrap; text-overflow:ellipsis; }
.wwd-fan figure:nth-child(1) { transform:translate(-24%,-10%) rotate(-7deg); }
.wwd-fan figure:nth-child(2) { transform:rotate(1deg); }
.wwd-fan figure:nth-child(3) { transform:translate(24%,14%) rotate(7deg); }
/* They arrive as one stack and fan out; a pointer spreads them further. */
.motion-on .wwd-fan:not(.is-in) figure { transform:none; }
@media (hover:hover) {
  .wwd-fan:hover figure:nth-child(1) { transform:translate(-30%,-13%) rotate(-10deg); }
  .wwd-fan:hover figure:nth-child(2) { transform:translateY(-5%); }
  .wwd-fan:hover figure:nth-child(3) { transform:translate(30%,17%) rotate(10deg); }
}
.wwd-promises { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.wwd-promises li { display:grid; align-content:start; gap:4px; padding:14px 14px 16px; border-radius:18px; font-size:14px; line-height:1.35; color:#3d3f52; transition:transform .3s var(--settle); }
.wwd-promises li:nth-child(1) { background:#e9ddff; } .wwd-promises li:nth-child(2) { background:#d9ff8a; } .wwd-promises li:nth-child(3) { background:#d4ecff; } .wwd-promises li:nth-child(4) { background:#ffd9c9; }
.wwd-promises svg { width:26px; height:26px; margin-bottom:6px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wwd-promises b { font:800 17px/1.15 var(--font-display); letter-spacing:-.02em; color:var(--ink); }
@media (hover:hover) { .wwd-promises li:hover { transform:translateY(-4px) rotate(-1deg); } }
.wwd-deal__price { display:flex; align-items:center; gap:18px; }
.wwd-stamp { flex:none; display:grid; place-items:center; align-content:center; width:132px; height:132px; margin:0; border-radius:50%; background:var(--coral); color:var(--ink); transform:rotate(-8deg); outline:2px dashed #0d102466; outline-offset:-9px; box-shadow:0 18px 30px -16px #ff6a3dcc; }
.wwd-stamp small { font:700 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.wwd-stamp b { font:800 44px/1 var(--font-display); letter-spacing:-.045em; }
.wwd-deal__free { margin:0; max-width:21ch; font:500 18px/1.4 var(--font-body); }
.wwd-deal__free b { display:inline-block; padding:2px 10px; border-radius:999px; background:var(--lime); font-weight:800; }
.motion-on .wwd-deal__price:not(.is-in) .wwd-stamp { opacity:0; }
.motion-on .wwd-deal__price.is-in .wwd-stamp { animation:wwd-stamp .7s var(--settle) both; }
@keyframes wwd-stamp { 0% { opacity:0; transform:scale(2.2) rotate(-22deg); } 60% { opacity:1; transform:scale(.92) rotate(-5deg); } 100% { opacity:1; transform:scale(1) rotate(-8deg); } }

/* Custom software: the everyday jobs, crossed out one by one as the fix arrives. */
.wwd-pains { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.wwd-pains li { --d:0s; position:relative; display:block; padding:16px 18px 16px 60px; border-radius:18px; background:#fffdf9; border:1px solid #0d102412; box-shadow:0 14px 30px -24px #0d102480; }
.wwd-pains li:nth-child(2) { --d:.55s; } .wwd-pains li:nth-child(3) { --d:1.1s; } .wwd-pains li:nth-child(4) { --d:1.65s; } .wwd-pains li:nth-child(5) { --d:2.2s; }
.wwd-pains li::before, .wwd-pains li::after { content:""; position:absolute; left:16px; top:15px; width:30px; height:30px; border-radius:50%; }
.wwd-pains li::before { background:#ffd9c9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/14px no-repeat; }
.wwd-pains li::after { background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1024' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat; }
.wwd-pains s { text-decoration:none; -webkit-box-decoration-break:clone; box-decoration-break:clone; font:700 17px/1.35 var(--font-display); letter-spacing:-.01em; color:#6b6577; background:linear-gradient(#ff6a3d,#ff6a3d) no-repeat 0 58%/100% 2.5px; }
.wwd-pains span { display:block; margin-top:5px; font:800 19px/1.25 var(--font-display); letter-spacing:-.02em; color:var(--ink); }
.motion-on .wwd-pains s { transition:background-size .5s var(--settle) var(--d), color .5s var(--d); }
.motion-on .wwd-pains span { transition:opacity .45s var(--settle) calc(var(--d) + .3s), transform .45s var(--settle) calc(var(--d) + .3s); }
.motion-on .wwd-pains li::after { transition:transform .45s var(--settle) calc(var(--d) + .3s); }
.motion-on .wwd-pains:not(.is-in) s { background-size:0% 2.5px; color:var(--ink); }
.motion-on .wwd-pains:not(.is-in) span { opacity:0; transform:translateY(8px); }
.motion-on .wwd-pains:not(.is-in) li::after { transform:scale(0); }
.wwd-proof { display:grid; grid-template-columns:128px minmax(0,1fr); gap:14px; align-items:center; padding:10px 16px 10px 10px; border-radius:20px; background:#27154c; color:#fffdf9; text-decoration:none; box-shadow:0 20px 40px -26px #27154c; transition:transform .3s var(--settle), box-shadow .3s var(--settle); }
.wwd-proof img { display:block; width:100%; height:auto; aspect-ratio:16/11; object-fit:cover; object-position:top; border-radius:12px; }
.wwd-proof > span { display:grid; gap:5px; }
.wwd-proof small { font:600 11px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--lime); }
.wwd-proof b { font:800 17px/1.2 var(--font-display); letter-spacing:-.02em; }
.wwd-proof em { font:600 14px/1.2 var(--font-body); font-style:normal; color:#dfd4ec; }
.wwd-proof em span { display:inline-block; transition:transform .25s var(--settle); }
@media (hover:hover) { .wwd-proof:hover { transform:translateY(-4px); box-shadow:0 28px 50px -28px #27154c; } .wwd-proof:hover em span { transform:translateX(4px); } }
.wwd-chip { justify-self:start; margin:0; padding:11px 16px; border-radius:999px; background:var(--ink); color:var(--lime); font:700 14px/1 var(--font-mono); letter-spacing:.02em; }

/* Marketing & SEO: the Gold plan as a gold card on a dark stage, then the industries with their real sites. */
.wwd-goldzone { --fg:#fffdf9; --fg-2:#dfd4ec; position:relative; overflow:hidden; background:radial-gradient(60% 70% at 92% 8%, #7a3bff59, transparent 60%), radial-gradient(50% 60% at 0% 100%, #ffb8002e, transparent 60%), #160d33; color:#fffdf9; }
.wwd-goldzone .wwd-h2 em { color:#ffd76a; }
.gold-card { position:relative; display:grid; gap:12px; padding:clamp(22px,3vw,32px); border-radius:28px; overflow:hidden; isolation:isolate; color:var(--ink); background:linear-gradient(135deg, #fff3c4 0%, #ffd76a 38%, #f5b82e 62%, #ffe9a3 100%); box-shadow:0 40px 80px -40px #000, inset 0 1px 0 #ffffff88; transition:transform .4s var(--settle); }
.gold-card::before { content:""; position:absolute; inset:-40%; z-index:-1; background:linear-gradient(115deg, transparent 42%, #ffffffa6 50%, transparent 58%); transform:translateX(-70%); pointer-events:none; }
.motion-on .gold-card.is-in::before { animation:gold-shine 1.8s .3s var(--settle) both; }
@media (hover:hover) { .gold-card:hover { transform:perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-4px); } .motion-on .gold-card:hover::before { animation:gold-shine 1.2s var(--settle) both; } }
@keyframes gold-shine { from { transform:translateX(-70%); } to { transform:translateX(70%); } }
.gold-card__metal { display:flex; align-items:center; gap:10px; margin:0; font:700 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.gold-card__medal { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--ink); }
.gold-card__medal svg { width:22px; height:22px; fill:#ffd76a; }
.gold-card h3 { margin:4px 0 0; font:800 clamp(28px,3.2vw,40px)/1.02 var(--font-display); letter-spacing:-.04em; }
.gold-card__price { display:flex; align-items:baseline; gap:8px; margin:0; }
.gold-card__price b { font:800 clamp(64px,7vw,88px)/.9 var(--font-display); letter-spacing:-.05em; }
.gold-card__price small { font:600 16px/1 var(--font-body); }
.gold-card ul { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; }
.gold-card li { display:flex; gap:10px; font:600 16px/1.35 var(--font-body); }
.gold-card li::before { content:""; flex:none; width:22px; height:22px; border-radius:50%; background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6ff3d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; }
.gold-card__bonus { margin:4px 0 0; padding:12px 14px; border-radius:14px; background:var(--ink); color:#fffdf9; font:500 15px/1.35 var(--font-body); }
.gold-card__bonus b { color:var(--lime); }
.gold-card .btn-row { margin-top:4px; }
.gold-card__go { background:var(--ink); color:#ffd76a; }
.gold-card .btn--ghost { color:var(--ink); }
.wwd-industries h3 { margin:0 0 16px; font:700 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:#dfd4ec; }
.wwd-industries ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.wwd-industries a { display:grid; height:100%; overflow:hidden; border-radius:22px; background:#ffffff0f; border:1px solid #ffffff1f; color:#fffdf9; text-decoration:none; transition:transform .3s var(--settle), border-color .3s; }
.wwd-industries img { display:block; width:100%; height:auto; aspect-ratio:10/7; object-fit:cover; transition:transform .5s var(--settle); }
.wwd-industries a > span { position:relative; display:grid; gap:4px; padding:14px 60px 16px 16px; }
.wwd-industries b { font:800 18px/1.15 var(--font-display); letter-spacing:-.02em; }
.wwd-industries small { font-size:13px; color:#dfd4ec; }
.wwd-industries a > span::after { content:"→"; position:absolute; right:14px; top:50%; translate:0 -50%; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--lime); color:var(--ink); font:700 16px/1 var(--font-body); transition:transform .25s var(--settle); }
@media (hover:hover) { .wwd-industries a:hover { transform:translateY(-5px); border-color:var(--lime); } .wwd-industries a:hover img { transform:scale(1.04); } .wwd-industries a:hover > span::after { transform:translateX(4px); } }

/* Monthly care: the three plans, from the same list as /pricing. */
.wwd-head--center { display:grid; justify-items:center; text-align:center; }
.wwd-head--center .wwd-lede { margin-inline:auto; }
.wwd-care-go { justify-content:center; margin-top:22px; }

/* Questions as a chat with Troy (the bubbles are site/assets/css/faq-chat.css?v=7f0b21e9); his line above them. */
.wwd-chat__troy { display:flex; align-items:center; gap:12px; margin:18px 0 0; font:600 16px/1.3 var(--font-body); }
.wwd-chat__troy img { width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fffdf9; }

/* How it works on a phone: the pinned picture's backdrop runs edge to edge, so the step dots slide under it instead of
   peeking out at its left edge (Troy, 2 Nov 2026). */
@media (max-width:640px) { .is-ready .project-exhibit { background:#12172d; box-shadow:0 0 0 100vmax #12172d; clip-path:inset(0 -100vmax); } }

/* Layout: one column on phones (title, picture, details); from 900px the title spans the top and the picture sits beside
   the details. */
@media (min-width:900px) {
  .wwd-site { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"head head" "fan promises" "fan deal"; align-items:start; }
  .wwd-site .wwd-head { grid-area:head; } .wwd-fan { grid-area:fan; align-self:center; } .wwd-promises { grid-area:promises; } .wwd-site .wwd-deal { grid-area:deal; }
  .wwd-soft { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"head head" "pains proof" "pains deal"; align-items:start; }
  .wwd-soft .wwd-head { grid-area:head; } .wwd-pains { grid-area:pains; } .wwd-proof { grid-area:proof; } .wwd-soft .wwd-deal { grid-area:deal; }
  .wwd-mkt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"head gold" "ind ind"; align-items:center; }
  .wwd-mkt .wwd-head { grid-area:head; } .gold-card { grid-area:gold; } .wwd-industries { grid-area:ind; margin-top:clamp(20px,3vw,40px); }
}
@media (max-width:899px) {
  /* The industries scroll sideways on a phone, edge to edge. */
  .wwd-industries ul { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(78%,320px); overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--margin)); padding:0 var(--margin) 6px; scroll-padding-inline:var(--margin); scrollbar-width:none; }
  .wwd-industries ul::-webkit-scrollbar { display:none; }
  .wwd-industries li { scroll-snap-align:start; }
  /* A bigger fan on a phone, kept inside the page's edges. */
  .wwd-fan { aspect-ratio:16/12; }
  .wwd-fan figure { left:13%; width:74%; }
  .wwd-fan figure:nth-child(1) { transform:translate(-17%,-10%) rotate(-6deg); }
  .wwd-fan figure:nth-child(3) { transform:translate(17%,16%) rotate(6deg); }
}
@media (max-width:420px) {
  .wwd-stamp { width:116px; height:116px; } .wwd-stamp b { font-size:38px; }
  .wwd-deal__free { font-size:16px; }
  .wwd-proof { grid-template-columns:96px minmax(0,1fr); }
  .wwd-pains li { padding-left:56px; } .wwd-pains s { font-size:16px; } .wwd-pains span { font-size:18px; }
}

/* Motion: Off and reduced motion: everything in place, nothing moving. */
html.reduce-motion #main .btn, html.reduce-motion #main .btn::after, html.reduce-motion .wwd-site *, html.reduce-motion .wwd-soft *, html.reduce-motion .wwd-goldzone *, html.reduce-motion .care-tier, html.reduce-motion .wwd-chat * { animation:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce) { #main .btn, #main .btn::after, .wwd-site *, .wwd-soft *, .wwd-goldzone *, .care-tier, .wwd-chat * { animation:none !important; transition:none !important; } }

/* How it works with the real screens (Troy, 2 Nov 2026): each picture sits on a cream card inside the frame, below the
   eyebrow, and each step's line reads as the step, not a footnote. */
#project-journey .project-exhibit__scenes { padding-top: 52px; }
#project-journey .project-scene img { width: calc(100% - 32px); margin: 0 16px 22px; border-radius: 14px; background: #efebe4; }
#project-journey .project-step small { font-size: 16px; line-height: 1.5; color: #cfcede; margin-top: 4px; }
@media (max-width:640px) {
  #project-journey .project-exhibit__scenes { padding-top: 34px; }
  #project-journey .project-scene img { width: calc(100% - 20px); margin: 0 10px 14px; }
  #project-journey .project-step small { font-size: 14px; }
}