/* Studiotake Pro, the split stage. The brand's colours and type; composition from tasteskill v2. */
:root {
  --bg: #0e0d0c; --surface: #1b1916; --surface-2: #262219; --bone: #ece8e1;
  --fg: #f4f0e6; --soft: #c9c4b8; --ink: #14110c;
  --accent: #f0a12f; --accent-deep: #c97f14;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --m: clamp(20px, 3vw, 40px);
  --r: 4px;
  --s-display: clamp(64px, 9vw, 150px);
  --s-h2: clamp(34px, 4.4vw, 64px);
  --s-h3: 26px;
  --s-lead: 22px;
  --s-body: 19px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--fg); font: 400 var(--s-body)/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.03em; line-height: 1; text-wrap: balance; }
h2 { font-size: var(--s-h2); font-weight: 780; font-stretch: 108%; }
h3 { font-size: var(--s-h3); font-weight: 720; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--accent); color: var(--ink); padding: 8px 12px; z-index: 9; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- The split stage ---- */
.split { display: grid; grid-template-columns: 47fr 53fr; }
.stage { position: sticky; top: 0; height: 100svh; padding: 20px 0 20px 20px; }
.stage img { position: absolute; inset: 20px 0 20px 20px; width: calc(100% - 20px); height: calc(100% - 40px); object-fit: cover;
  border-radius: var(--r); opacity: 0; transition: opacity .7s var(--ease), transform 8s linear; transform: scale(1.04); }
.stage img.on { opacity: 1; transform: scale(1); }
.stage img.ui { object-fit: contain; background: var(--surface); padding: 32px; }
.column { padding: 0 var(--m) 0 clamp(40px, 6vw, 96px); min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.mark svg { width: 34px; height: 34px; display: block; }
.top nav { display: flex; gap: 28px; align-items: center; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--soft); transition: color .2s; }
.top nav a:hover { color: var(--fg); }
.top nav a.act { color: var(--ink); background: var(--accent); padding: 10px 16px; border-radius: var(--r); font-weight: 600; }
.top nav a.act:hover { background: #ffb547; }

.hero { min-height: calc(100svh - 88px); display: grid; align-content: center; gap: 32px; padding-bottom: 40px; position: relative; }
.hero .lede { font-size: var(--s-lead); line-height: 1.35; max-width: 28ch; margin: 0; }
.wordmark { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: -.05em; line-height: .9; white-space: nowrap; }
.hero .wordmark { font-size: var(--s-display); margin: 8vh 0 0 calc(-1 * clamp(80px, 10vw, 180px)); color: var(--accent); position: relative; z-index: 2; }
.btn { justify-self: start; background: var(--accent); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px;
  padding: 16px 22px; border-radius: var(--r); transition: background .2s, transform .2s var(--ease); }
.btn:hover { background: #ffb547; } .btn:active { transform: translateY(1px); }

.week { padding: 160px 0 40px; max-width: 46ch; }
.week h2 { margin-bottom: 56px; }
.week > p { color: var(--fg); margin: 0 0 16vh; font-size: var(--s-lead); line-height: 1.45; }
.week > p > b { color: var(--accent); font-weight: 600; }
.inline { display: none; }
.archive { padding: 12vh 0 30vh; max-width: 46ch; }
.archive h2 { margin-bottom: 32px; }
.archive p { color: var(--fg); }

/* ---- The app's screens (data-ui: the product's own look) ---- */
.ui { background: #1d1d1d; color: #ededed; border-radius: 10px; padding: 22px; font: 400 16px/1.45 var(--body); text-align: left; }
.ui p { margin: 0; }
.ui-crumb { color: #9a9a9a; font-size: 14px; margin-bottom: 6px !important; }
.ui-meta { font: 600 18px/1.3 var(--body); margin-bottom: 16px !important; }
.ui-card { background: #262626; border: 1px solid #3a3a3a; border-radius: 8px; padding: 14px 16px; display: grid; gap: 8px; }
.ui-card + .ui-card { margin-top: 8px; }
.ui-card.cut { background: #2c2222; border-color: #6b3b3b; }
.ui-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ui-dim { color: #9a9a9a; } .ui .small { font-size: 14px; }
.ui-title { font-weight: 600; }
.tag { font-size: 14px; padding: 2px 10px; border-radius: 99px; background: #333; color: #cfcfcf; }
.tag.ok { background: #1f3a2a; color: #7ad39a; }
.struck { text-decoration: line-through; color: #c98f8f; }
.ui-acts { margin-top: 4px; }
.ui-btn { font-size: 14px; padding: 6px 14px; border-radius: 6px; background: #333; }
.ui-btn.on { background: #8b9cff; color: #111; font-weight: 600; }
.ui-label { font-weight: 600; font-size: 14px; margin: 14px 0 6px !important; }
.ui-field { background: #141414; border: 1px solid #333; border-radius: 6px; padding: 10px 12px; }
.ui-week { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ui-day { font-weight: 600; margin-bottom: 8px !important; }
.slot { border: 1px dashed #444; border-radius: 6px; padding: 8px 10px; font-size: 14px; line-height: 1.35; margin-bottom: 8px !important; }
.slot span { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; margin-bottom: 2px; }
.slot.yt span { color: #ff6b5e; } .slot.ig span { color: #d58cff; }
.stage .frame { position: absolute; inset: 20px 0 20px 20px; background: var(--surface); border-radius: var(--r); display: grid; place-items: center; padding: 40px;
  opacity: 0; transition: opacity .7s var(--ease); }
.stage .frame.on { opacity: 1; }
.stage .frame .ui { width: min(100%, 560px); font-size: 17px; }
.inline-ui { display: none; }

/* ---- Done every week: one amber field, the heading pinned ---- */
.done { background: var(--accent); color: var(--ink); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--m); padding: 160px var(--m) 200px; }
.done h2 { position: sticky; top: 40px; align-self: start; font-size: clamp(56px, 6.6vw, 104px); font-weight: 820; }
.rows { display: grid; gap: 88px; min-width: 0; }
.rows article { min-width: 0; }
.rows h3 { margin-bottom: 24px; }
.pair { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.pair.flip { grid-template-columns: 1fr 220px; }
.pair.flip img { order: 2; }
.pair img { width: 220px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.pair.wide { grid-template-columns: 1fr; gap: 20px; }
.pair img.ui { width: 100%; aspect-ratio: auto; object-fit: contain; background: var(--ink); padding: 10px; }
.pair ul { list-style: none; margin: 0; padding: 0; font-size: var(--s-body); font-weight: 500; display: grid; gap: 14px; }

/* ---- The covers carousel ---- */
.covers-block h3 { margin-bottom: 8px; }
.carousel { position: relative; }
.track { --w: clamp(200px, 19vw, 280px); list-style: none; margin: 0; padding: 24px calc(50% - var(--w) / 2);
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.track li { flex: 0 0 var(--w); scroll-snap-align: center; --k: 1; cursor: pointer;
  transform: scale(calc(1 - var(--k) * .3)); opacity: calc(1 - var(--k) * .45); transition: transform .12s linear, opacity .12s linear; }
.track li.mid { cursor: default; }
.track img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.carousel .nav { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 4px; }
.carousel .nav button { flex: none; margin: 0; transform: none; }
.carousel button { width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--ink); color: var(--accent); font-size: 20px; cursor: pointer; transition: background .2s; }
.carousel button:hover { background: #2a251d; }
.lines { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; font-weight: 500; }

/* ---- Where it posts ---- */
.platforms { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px 36px; font-weight: 600; font-size: 15px; }
.platforms li { display: grid; justify-items: start; gap: 10px; }
.platforms svg { width: 40px; height: 40px; fill: currentColor; }
.platforms li.live svg { fill: #ff0000; }
.platforms li.tt svg { fill: #00c4bd; }
.platforms li.ig svg { fill: #e1306c; }
.platforms li.fb svg { fill: #1877f2; }
.platforms li.beta, .platforms li.soon { color: rgba(20, 17, 12, .5); }
.platforms small { font-size: 14px; font-weight: 500; margin-top: -6px; }

/* ---- Proof: the client's covers on a board ---- */
.proof { padding: 200px var(--m); }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.board .lead { grid-column: span 2; background: var(--surface-2); padding: 40px; border-radius: var(--r); display: grid; align-content: space-between; gap: 32px; }

.board .lead p { margin: 0; max-width: 52ch; }
.board img { width: 100%; height: 100%; aspect-ratio: 3 / 2.4; object-fit: contain; background: var(--surface); padding: 20px; border-radius: var(--r); }

/* ---- Plans that step up ---- */
.plans { padding: 120px var(--m) 160px; background: var(--surface); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plans-head { grid-column: 1 / 3; grid-row: 1; align-self: start; display: grid; gap: 28px; }

.calc p { margin: 0 0 16px; color: var(--soft); max-width: 50ch; }
.calc-row { display: flex; gap: 16px; flex-wrap: wrap; }
.calc label { display: grid; gap: 6px; font-size: 15px; color: var(--soft); }
.calc select { font: 500 var(--s-body) var(--body); color: var(--fg); background: var(--bg); border: 0; border-radius: var(--r); padding: 12px 14px; min-width: 170px; }
.calc output { display: block; margin-top: 18px; font-size: var(--s-lead); }
.calc output b { color: var(--accent); }
.tiles { display: contents; }
.tile { grid-row: 2; align-self: end; border-radius: var(--r); padding: 28px 28px 92px; position: relative; transition: transform .3s var(--ease); }

.tile .price { font: 780 var(--s-h2)/1 var(--display); letter-spacing: -.03em; margin: 12px 0 20px; }
.tile .price small { font: 400 var(--s-body) var(--body); letter-spacing: 0; }
.tile p { margin: 0; }
.tile .strip { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; padding: 0 28px;
  text-decoration: none; font-weight: 600; border-radius: 0 0 var(--r) var(--r); transition: filter .2s; }
.tile .strip:hover { filter: brightness(1.12); }
.t1 { height: 360px; background: var(--surface-2); }
.t1 .strip { background: #33302a; }
.t2 { height: 480px; background: var(--bone); color: var(--ink); }
.t2 .strip { background: #d6d0c4; }
.t3 { height: 600px; background: var(--accent); color: var(--ink); }
.t3 .strip { background: var(--accent-deep); }
.tile.pick { transform: translateY(-12px); }
.plans .note { grid-column: 1 / -1; grid-row: 3; margin: 32px 0 0; color: var(--soft); max-width: 80ch; }

/* ---- Questions as reading text ---- */
.faq { padding: 200px var(--m); display: grid; grid-template-columns: 3fr 9fr; gap: var(--m); }

.notes { columns: 2; column-gap: 56px; }
.notes p { break-inside: avoid; margin: 0 0 20px; font-size: 17px; }
.notes b { font-weight: 600; }

/* ---- One field ---- */
.contact { padding: 160px var(--m) 160px; max-width: calc(600px + 2 * var(--m)); margin: 0 auto; }
.contact h2 { font-size: var(--s-h3); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.contact .ask { color: var(--soft); font: 600 var(--s-h3)/1.25 var(--display); letter-spacing: -.01em; margin: 0; }
.one { position: relative; margin-top: 28px; }
.one input { width: 100%; height: 64px; border: 0; border-radius: var(--r); background: var(--bone); color: var(--ink); font: var(--s-body) var(--body); padding: 0 72px 0 20px; }
.one input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } /* taste-skill-ignore: the focus ring, never at rest */
.one button { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--ink); font-size: 22px; cursor: pointer; }
.next { font-size: 15px; color: var(--soft); margin: 16px 0 0; }
.addr { margin: 72px 0 0; display: grid; gap: 10px; font-size: 15px; }
.addr div { display: flex; gap: 16px; } .addr dt { color: var(--soft); width: 90px; } .addr dd { margin: 0; }

/* ---- The footer: the name at full width ---- */
.foot { padding: 80px var(--m) 32px; background: var(--bg); }
.wordmark.big { font-size: 15.4vw; color: var(--accent); margin: 0 0 32px -0.06em; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.foot nav a { color: var(--soft); text-decoration: none; } .foot nav a:hover { color: var(--fg); }
.legal { color: var(--soft); font-size: 14px; margin: 16px 0 0; }

/* ---- Motion ---- */
.rise { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in { opacity: 1; transform: none; }
@supports (animation-timeline: scroll()) {
  .wordmark.big { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  @keyframes settle { from { scale: .94; } to { scale: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .stage img { transition: none; transform: none; }
  .wordmark.big { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- A phone is its own composition ---- */
@media (max-width: 860px) {
  .split { display: block; }
  .stage { position: relative; height: 58svh; padding: 12px; margin-top: 64px; }
  .stage img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
  .stage img:not([data-stage="hero"]) { display: none; }
  .column { padding: 0 20px; }
  .top { position: absolute; top: 0; left: 0; right: 0; height: 64px; padding: 0 20px; background: var(--bg); }
  .top nav a:not(.act):not(:first-child) { display: none; }
  .hero { min-height: auto; padding: 0 0 40px; gap: 24px; }
  .hero .wordmark { order: -1; font-size: 15vw; margin: -9vw 0 0; }
  .hero .lede { font-size: 19px; }
  .week { padding: 80px 0 0; }
  .week h2 { font-size: 34px; margin-bottom: 32px; }
  .week > p { margin-bottom: 56px; }
  .inline { display: block; margin-top: 16px; border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
  .inline-ui { display: block; margin-top: 16px; }
  .ui-week { grid-template-columns: 1fr; gap: 4px; } .ui-week > div:nth-child(3) { display: none; }
  .ui-week > div { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 8px; align-items: start; }
  .week > p { font-size: 20px; }
  .archive { padding: 40px 0 96px; }
  .done { display: block; padding: 96px 20px 120px; }
  .done h2 { font-size: 13vw; position: static; margin-bottom: 48px; }
  .rows { gap: 72px; }
  .pair, .pair.flip { grid-template-columns: 1fr; gap: 20px; }
  .pair.flip img { order: 0; }
  .pair img { width: 100%; aspect-ratio: 4 / 3; }
  .pair img.ui { aspect-ratio: auto; }
  .track { --w: 52vw; gap: 10px; }
  .track li { transform: scale(calc(1 - var(--k) * .12)); }
  .proof { padding: 120px 20px; }
  .board { grid-template-columns: 1fr 1fr; gap: 6px; }
  .board .lead { grid-column: 1 / -1; padding: 24px; }
  .board img:nth-of-type(n+5) { display: none; }
  .plans { display: block; padding: 96px 20px; }
  .plans-head h2 { font-size: 9vw; }
  .tiles { display: grid; gap: 8px; margin-top: 40px; }
  .tile, .t1, .t2, .t3 { height: auto; grid-row: auto; }
  .tile.pick { transform: none; outline: 3px solid var(--accent); outline-offset: 3px; }
  .tile .price { font-size: 44px; }
  .faq { display: block; padding: 120px 20px; }
  .faq h2 { margin-bottom: 24px; }
  .notes { columns: 1; }
  .notes p { margin-bottom: 18px; }
  .contact { padding: 120px 20px; }
  .one input { height: 60px; }
}

/* ---- The four-field form ---- */
.four { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.four label { display: grid; gap: 8px; font-size: 15px; font-weight: 600; color: var(--soft); }
.four .wide { grid-column: 1 / -1; }
.four em { font-style: normal; font-weight: 400; }
.four input, .four select, .four textarea { font: var(--s-body) var(--body); color: var(--ink); background: var(--bone); border: 0; border-radius: var(--r); padding: 14px 16px; }
.four input:focus, .four select:focus, .four textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.four .btn { justify-self: start; border: 0; cursor: pointer; }
@media (max-width: 860px) { .four { grid-template-columns: 1fr; } }

/* ---- Questions: the word, the list, one answer ---- */
.faq3 { padding: 200px var(--m); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--m); align-items: start; }
.faq3 h2 { font-size: var(--s-h2); }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.qlist button { background: none; border: 0; padding: 0 0 0 20px; position: relative; cursor: pointer; text-align: left; color: var(--soft); font: 500 var(--s-body)/1.35 var(--body); transition: color .2s; }
.qlist button::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--soft); transition: background .2s; }
.qlist button:hover, .qlist button[aria-pressed="true"] { color: var(--fg); }
.qlist button[aria-pressed="true"]::before { background: var(--accent); }
.qlist .inline-a { display: none; }
.faq3 .answer { position: sticky; top: 120px; }
.faq3 .answer p { margin: 0; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.35; max-width: 32ch; }
@media (max-width: 860px) {
  .faq3 { display: block; padding: 120px 20px; }
  .faq3 h2 { margin-bottom: 32px; }
  .faq3 .answer { display: none; }
  .qlist .inline-a:not([hidden]) { display: block; margin: 10px 0 6px 20px; font-size: 18px; color: var(--fg); }
}

/* ---- the live forms: their status line, the trap for robots, Pro's buy buttons ---- */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.send { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; grid-column: 1 / -1; }
#c-status, #buy-status { font-size: 15px; }
#c-status.ok, #buy-status.ok { font-weight: 600; }
#c-status.bad, #buy-status.bad { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
button.strip { border: 0; font: inherit; width: 100%; text-align: left; cursor: pointer; }
/* the contact form's confirmation, in the form's place */
#contact-form[hidden] { display: none !important; }
.sent { grid-column: 1 / -1; max-width: 40em; margin-top: 28px; padding: 28px 0 8px; border-top: 3px solid var(--accent); outline: none; }
.sent p { margin: 0 0 12px; font-size: 19px; line-height: 1.45; }
.sent .sent-h { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.1; margin-bottom: 16px; }
.sent-again { margin-top: 12px; background: none; border: 0; padding: 0; font: inherit; font-size: 16px; color: inherit;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* ---- the phone menu: what the bar hides on a phone, behind three lines ---- */
.top { justify-content: flex-start; } .top nav { margin-left: auto; }
.menu { display: none; }
@media (max-width: 860px) {
  .menu { display: block; position: relative; margin-left: 10px; }
  .menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: var(--r); color: var(--fg); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menu[open] summary { background: var(--surface); }
  .top > nav a:not(.act) { display: none; }                     /* the bar keeps its button; the rest is in the menu */
  .top .menu .menu-panel { position: absolute; right: 0; top: 52px; min-width: 220px; display: grid; gap: 0; padding: 8px; background: var(--surface); border-radius: var(--r); z-index: 6; }
  .top .menu .menu-panel a { display: block !important; padding: 14px 16px; font-size: 18px; color: var(--fg); text-decoration: none; border-radius: var(--r); }
  .menu-panel a:hover, .menu-panel a:focus-visible { background: var(--surface-2); }
}
.billing-switch { margin: 24px 0 0; font-size: 17px; }

/* The visitor's currency (currency.js): dollars carry no VAT line. */
html[data-cur="usd"] .vat-incl, html[data-cur="usd"] .eu-only { display: none !important; }
.cur-switch { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }