/* cupanstudio.com — the studio's own look. Brand tokens from business/brand; the layout language
   is deliberately not the client skeleton's: green header bar, photo hero, pill buttons,
   alternating green/cream bands, big numbers, one warm accent. */

/* Type scale: quiet Jost display, larger */
h1 { font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1.02; letter-spacing: -0.005em; }
h2 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; }
body { border-top: 4px solid var(--color-accent); }

/* Header: deep green bar */
.site-header { background: var(--color-primary); border-bottom: 0; backdrop-filter: none; }
.site-header .brand, .site-header .brand-name, .site-header .mark { color: var(--color-on-primary); }
.site-header .nav-toggle { background: transparent; border-color: rgba(251,246,232,0.35); color: var(--color-on-primary); }
.site-header .nav { background: var(--color-primary); border-color: rgba(251,246,232,0.15); }
.site-header .nav-list a { color: var(--color-on-primary); }
.site-header .nav-list a:hover, .site-header .nav-list a[aria-current="page"] { background: rgba(251,246,232,0.12); color: var(--color-on-primary); }
.site-header .nav-list a.nav-cta { background: var(--color-accent); color: var(--color-on-accent); border-radius: 999px; }
.brand-lockup { gap: 0.7rem; }
.brand-lockup .mark { width: 4.2rem; height: auto; } /* ≥64px wide: the brand's minimum for the mark */
.brand-lockup img { height: 3.6rem; width: auto; display: block; } /* the real logo, horizontal: cup ≥ 57px tall, wordmark readable */
.brand-footer img { height: auto; width: 11rem; }
.eyebrow { color: var(--color-muted); } /* terracotta is for buttons and links only */
.brand-lockup .brand-name { font-weight: 400; letter-spacing: 0.08em; font-size: 1.3rem; }
.brand-footer, .brand-footer .mark, .brand-footer .brand-name { color: var(--color-on-primary); }
.brand-footer { margin-bottom: 0.75rem; }

/* Buttons: pills with a pressed edge */
.btn { border-radius: 999px; padding: 0.95rem 1.7rem; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 3px 0 rgba(0,0,0,0.18); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0,0,0,0.18); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.18); }
.btn-ghost { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 3px 0 rgba(20,69,47,0.25); }
.btn-big { padding: 1.15rem 2.1rem; font-size: 1.1rem; }
.hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); box-shadow: none; }

/* Photo hero. The text sits on a dark green scrim that is heaviest where the words are
   (left) and lets the photo through on the right, and the headline is set at 500, not 300:
   a thin white line over a busy photo is the one thing nobody can read. */
.hero { min-height: min(86vh, 52rem); }
.hero::after { background: linear-gradient(90deg, rgba(8,28,20,0.9) 0%, rgba(8,28,20,0.78) 38%, rgba(8,28,20,0.35) 68%, rgba(8,28,20,0.2) 100%), linear-gradient(180deg, rgba(8,28,20,0.1), rgba(8,28,20,0.45)); }
.hero-media img { filter: saturate(0.85); }
.hero h1 { color: #fff; max-width: 14ch; font-weight: 500; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.hero .sub { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 4.2vw, 2.1rem); line-height: 1.2; color: #fff; max-width: 24ch; margin: 0 0 1.25rem; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.hero .lead { color: rgba(255,255,255,0.95); max-width: 50ch; text-shadow: 0 1px 10px rgba(0,0,0,0.35); }
.hero-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.05rem; color: rgba(255,255,255,0.9); letter-spacing: 0.03em; }
.hero-strip span::before { content: "•"; color: var(--color-accent); margin-right: 0.5rem; }
.hero-strip span:first-child::before { content: none; }

/* Bands */
.band-green { background: var(--color-primary); color: var(--color-on-primary); }
.band-green h2, .band-green h3, .band-green .eyebrow { color: inherit; }
.band-green .eyebrow { color: rgba(251,246,232,0.7); }
.band-green a:not(.btn) { color: #f3c9ad; }
.band-green .prose-wide p, .band-green .lead { color: rgba(251,246,232,0.9); }
.band-accent { background: var(--color-accent); color: #fff; }
.band-accent h2, .band-accent p { color: inherit; }
.band-accent .btn-primary { background: #fff; color: var(--color-accent); }
.section + .section { border-top: 0; }
.section h2 { max-width: 24ch; }
.prose-wide { max-width: 62ch; }
.prose-wide p { font-size: 1.1rem; }
.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; } .split.flip > :first-child { order: 2; } }
.split img { border-radius: 22px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: 0 20px 50px rgba(12,32,24,0.25); }
.tilt { transform: rotate(-1.5deg); }

/* Page list */
.page-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 700px) { .page-list { grid-template-columns: 1fr 1fr; } }
.page-list li { padding: 1rem 1.2rem; background: var(--color-surface); border-left: 5px solid var(--color-primary); border-radius: 0 14px 14px 0; box-shadow: var(--shadow); }
.page-list strong { color: var(--color-primary); font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }

/* Bonus stack */
.stack { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 800px) { .stack { grid-template-columns: 1fr 1fr; } }
.stack li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: start; padding: 1.25rem 1.4rem; background: var(--color-surface); border-radius: 20px; box-shadow: var(--shadow); }
.stack strong { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--color-primary); }
.stack .value { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--color-accent); white-space: nowrap; }
.stack p { grid-column: 1 / -1; margin: 0; }
.stack-total { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 300; color: var(--color-primary); margin-top: 1.5rem; }
.stack-total strong { font-weight: 500; color: var(--color-accent); }

/* Price */
.price-panel { background: var(--color-surface); border: 3px solid var(--color-primary); border-radius: 28px; padding: clamp(1.5rem, 5vw, 3rem); box-shadow: 12px 12px 0 var(--color-primary); max-width: 46rem; }
.price-big { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.4rem, 14vw, 6.5rem); line-height: 1; color: var(--color-accent); margin: 0 0 1rem; letter-spacing: -0.01em; }
.price-big small { font-size: 0.35em; color: var(--color-muted); letter-spacing: 0.02em; }
.price-cards { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
@media (min-width: 800px) { .price-cards { grid-template-columns: 1fr 1fr; } }
.price-card { background: var(--color-surface); border-radius: 24px; padding: 1.75rem; box-shadow: var(--shadow); border-top: 8px solid var(--color-primary); }
.price-card.is-care { border-top-color: var(--color-accent); }
.price-card h3 { font-size: 1.6rem; font-weight: 400; }
.price-card .amount { font-family: var(--font-display); font-weight: 300; font-size: 2.6rem; color: var(--color-accent); line-height: 1.1; margin: 0.25rem 0 0.75rem; }
.price-card .amount small { font-size: 0.45em; color: var(--color-muted); }
.price-card ul { padding-left: 1.2rem; margin: 0.75rem 0; }
.price-card li { margin-bottom: 0.4rem; }
.price-card .tag { display: inline-block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; }

/* Guarantee */
.guarantee { border-radius: 28px; padding: clamp(1.5rem, 5vw, 3rem); background: var(--color-accent); color: #fff; }
.guarantee h2, .guarantee h3 { color: inherit; }
.guarantee p { max-width: 58ch; font-size: 1.1rem; }
.guarantee p:last-child { margin: 0; }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: var(--color-surface); border-radius: 22px; padding: 1.5rem; box-shadow: var(--shadow); }
.steps li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--color-accent); color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin-bottom: 0.75rem; }
.steps h3 { font-weight: 400; margin-bottom: 0.4rem; }
.steps p { margin: 0; }

/* Q&A */
.qa { max-width: 62ch; }
.qa dt { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--color-accent); margin-top: 1.75rem; }
.qa dd { margin: 0.4rem 0 0; }

/* Work cards */
.work-grid { display: grid; gap: 1.5rem; margin: 1.5rem 0; }
@media (min-width: 700px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card { display: block; background: var(--color-surface); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.work-card .phone { background: var(--color-primary); padding: 1.25rem 1.25rem 0; display: grid; place-items: end center; }
.work-card .phone img { width: min(100%, 15rem); border-radius: 18px 18px 0 0; border: 6px solid #0c2018; border-bottom: 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.25); }
.work-card .body { padding: 1.1rem 1.25rem 1.25rem; }
.work-card h3 { font-weight: 400; margin-bottom: 0.15rem; }
.work-card .where { color: var(--color-muted); margin: 0 0 0.6rem; }
.work-card .demo-label { display: inline-block; background: var(--color-accent); color: #fff; border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; }
.work-card .open { color: var(--color-accent); font-weight: 600; }

/* Admin recording */
.recording { background: var(--color-surface); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); max-width: 56rem; }
.recording video, .recording img { display: block; width: 100%; height: auto; }
.recording figcaption { padding: 0.9rem 1.25rem; color: var(--color-muted); font-size: 0.95rem; }

/* Contact form */
.form { max-width: 34rem; display: grid; gap: 1rem; background: var(--color-surface); padding: clamp(1.25rem, 4vw, 2rem); border-radius: 24px; box-shadow: var(--shadow); }
.form label { display: block; font-weight: 600; color: var(--color-primary); }
.form input, .form textarea { display: block; width: 100%; margin-top: 0.35rem; font: inherit; padding: 0.85rem 1rem; border: 2px solid var(--color-border); border-radius: 14px; background: var(--color-bg); color: var(--color-ink); }
.form input:focus, .form textarea:focus { outline: 3px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 2px; border-color: var(--color-accent); background: #fff; }
.form .hint { color: var(--color-muted); font-weight: 400; font-size: 0.92rem; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; font-weight: 600; }
.form-status.ok { color: var(--color-primary); }
.form-status.err { color: #9b3b2a; }
.contact-aside { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--color-border); max-width: 52ch; }
.contact-aside p { margin-bottom: 1rem; }

/* Page hero for inner pages: photo-free, big, with a terracotta underline */
.page-hero h1::after { content: ""; display: block; width: 4rem; height: 5px; background: var(--color-accent); border-radius: 999px; margin-top: 0.6rem; }

/* Footer extras */
.footer-cta { text-align: center; padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer-cta h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.footer-cta p { opacity: 0.85; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.35rem; }
.muted-on-dark { opacity: 0.75; font-size: 0.95rem; }
.legal-page .prose { max-width: 70ch; }

/* ---------------------------------------------------------------------------
   Reveal pages (/for/<slug>). One shop, one page, sent to them cold. The reader
   is on a phone, behind a counter, and half expecting a scam, so: their own site
   in a phone frame above the fold, the facts we published laid out to be checked,
   and the way out as plain as the price. Tighter vertical rhythm than the rest of
   the site, because this page is long by nature and every extra section is one
   more reason to stop reading. See business/reveal-page.md.
   --------------------------------------------------------------------------- */
.reveal-hero { background: var(--color-primary); color: var(--color-on-primary); padding-block: clamp(1.75rem, 5vw, 3rem); }
.reveal-hero h1 { color: inherit; max-width: 13ch; }
.reveal-hero .eyebrow { color: rgba(254,250,241,0.75); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.reveal-hero .lead { color: rgba(254,250,241,0.92); max-width: 46ch; }
.reveal-hero .muted { color: rgba(254,250,241,0.7); margin-bottom: 0; }
.reveal-hero .btn-primary { background: var(--color-accent); color: #fff; }
.reveal-grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) { .reveal-grid { grid-template-columns: 1.2fr 0.8fr; gap: 3rem; } }

/* Their own home page, in a phone. */
.phone-frame { justify-self: center; width: min(100%, 15rem); border: 9px solid #0b1d15; border-radius: 2.2rem; background: #0b1d15; box-shadow: 0 20px 50px rgba(0,0,0,0.35); overflow: hidden; display: block; }
.phone-frame img { display: block; width: 100%; height: auto; }
.phone-frame:hover { transform: translateY(-3px); }

/* This page runs long, so its sections sit closer together than the main site's. */
.reveal-hero ~ .section { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.band-cream { background: var(--color-surface); }

/* What we published, laid out so they can check it. */
.facts { background: var(--color-surface); border-radius: 20px; box-shadow: var(--shadow); padding: clamp(1.1rem, 3vw, 1.6rem); max-width: 38rem; }
.band-cream .facts { background: var(--color-bg); }
.facts table { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: left; padding: 0.45rem 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts th { font-weight: 500; color: var(--color-muted); font-size: 0.95rem; width: 8.5rem; }
.facts td { font-variant-numeric: tabular-nums; }
.facts .closed { color: var(--color-accent); }
.straight-talk { max-width: 52rem; margin-top: 1.25rem; padding-left: 1.1rem; border-left: 4px solid var(--color-accent); }

/* The six pages, as phone thumbnails. Two up on a phone, four across on a desktop,
   never a sideways scroller: a row that runs off the edge reads as broken. */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 28%; border-radius: 12px; border: 1px solid var(--color-border); box-shadow: var(--shadow); background: #fff; }
.gallery figcaption { margin-top: 0.45rem; color: var(--color-muted); font-size: 0.9rem; }

/* Two supporting points beside the pages, not a feature wall. */
.feats { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .feats { grid-template-columns: 1fr 1fr; } }
.feats li { background: var(--color-bg); border-radius: 16px; padding: 1.1rem 1.25rem; }
.band-cream .feats li { background: var(--color-bg); }
.feats svg { width: 1.25rem; height: 1.25rem; color: var(--color-accent); display: block; margin-bottom: 0.5rem; }
.feats strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--color-primary); margin-bottom: 0.2rem; }
.feats p { margin: 0; }

/* The guarantee, already on a green band, so no second box around it. */
.guarantee-plain { max-width: 56ch; }
.guarantee-plain h2 { color: inherit; }

/* The last ask. */
.cta-strip { text-align: center; }
.cta-strip h2 { margin-bottom: 0.4rem; }
.cta-strip > p { color: var(--color-muted); max-width: 46ch; margin-inline: auto; }
.reveal-foot { font-size: 0.95rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); color: var(--color-muted); }
/* No site nav on a reveal page, so the header is a logo on a green bar and the
   footer is one line: the page's own closing section is the ask. */
.reveal-hero { border-top: 1px solid rgba(254,250,241,0.12); }
.site-footer-slim { padding-block: 1.5rem 1.4rem; }
.site-footer-slim .footer-bottom { border-top: 0; margin-top: 0; padding-top: 0; }