/* polka.llamaluke.com — Polka's own brand, from its kit:
   cream #FDFBF2, ink #2B2719, violet-deep #3D2B5C. Modak for the wordmark
   (never another face), Instrument Serif for display, Poppins for everything else. */
:root {
  --surface: #fdfbf2;
  --surface-warm: #f8f4e7;
  --surface-tan: #ebe6d5;
  --ink: #2b2719;
  --ink-soft: #5e5847;
  --ink-faint: #6b6454;
  --violet-deep: #3d2b5c;
  --violet: #8a6fe0;
  --violet-text: #6750a4;
  --violet-tint: #ede6f7;
  --violet-muted: #c7badb;
  --blue: #4a6e9e;
  --outline: #ede8d8;
  --outline-warm: #ede4ce;
  --outline-field: #dcd3bc;
  --amber-tint: #f5e4c8;
  --amber-text: #8a5d22;
  --green-tint: #d9e5d2;
  --green-text: #1f6e68;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Poppins", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--violet-text); text-underline-offset: 3px; }
a:hover { color: var(--violet-deep); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* wordmark: the O is two blurred pigments in a clipped circle */
.wordmark {
  font-family: "Modak", cursive;
  font-size: 52px;
  color: var(--violet-deep);
  letter-spacing: -1px;
  line-height: 1;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.wordmark .o, .signed .o {
  position: relative; width: 0.92em; height: 0.92em; border-radius: 50%;
  overflow: hidden; display: inline-block; flex-shrink: 0;
}
.wordmark .o span, .signed .o span {
  position: absolute; border-radius: 50%; filter: blur(0.12em);
  transform: translate(-50%, -50%);
  transition: background-color 900ms ease;
}
.wordmark .o .c1, .signed .o .c1 { left: 34%; top: 32%; width: 98%; height: 98%; background: #8a6fe0; }
.wordmark .o .c2, .signed .o .c2 { left: 66%; top: 68%; width: 82%; height: 82%; background: #4a6e9e; }
.wordmark.small { font-size: 26px; letter-spacing: -.5px; }

/* ---------- landing page ---------- */
.landing { line-height: 1.6; }
.inner { max-width: 1120px; margin: 0 auto; padding-inline: 56px; }
.band { padding-block: 80px; }

.top { border-bottom: 1px solid var(--outline); padding-block: 26px; }
.top .inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.top .wordmark { font-size: 58px; letter-spacing: -1.4px; }
.topnav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.topnav a { color: var(--ink-soft); text-decoration: none; }
.topnav a:hover { color: var(--violet-deep); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 14px; border: none;
  background: var(--violet-deep); color: var(--surface) !important;
  font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, .topnav a:focus-visible, .cell:focus-visible, input:focus-visible {
  outline: 3px solid var(--violet); outline-offset: 3px;
}
.btn-lg { min-height: 56px; padding: 0 28px; border-radius: 18px; font-size: 16px; box-shadow: 0 12px 28px rgba(61,43,92,.24); }

h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); text-wrap: pretty; }
.step p, .lede, .studio-lede, .signup-copy p { color: var(--ink-soft); text-wrap: pretty; }

/* hero */
.hero { padding-block: 76px 80px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--violet-tint);
  border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 600;
  color: var(--violet-deep); margin-bottom: 24px; white-space: nowrap;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
h1 { font-size: clamp(48px, 7vw, 76px); line-height: 1.02; letter-spacing: -1.8px; margin-bottom: 20px; max-width: 660px; }
.lede { font-size: 18px; margin-bottom: 32px; max-width: 500px; }
.hero-canvas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; width: 300px; justify-self: center; }

/* day circles: percent-positioned blurred pigments in a clipped circle */
.day { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #f2eedf; display: block; }
.day span { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }

/* steps */
.step-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.step-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.step-num {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--violet-tint); font-size: 13px; font-weight: 600; color: var(--violet-text);
}
.step-kicker { font-size: 12px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--violet-text); white-space: nowrap; }
.step-tag.amber .step-num { background: var(--amber-tint); color: var(--amber-text); }
.step-tag.amber .step-kicker { color: var(--amber-text); }
.step-tag.green .step-num { background: var(--green-tint); color: var(--green-text); }
.step-tag.green .step-kicker { color: var(--violet-muted); }
.step h2 { font-size: clamp(34px, 4vw, 42px); line-height: 1.1; letter-spacing: -.7px; margin-bottom: 18px; }
.step p { font-size: 16.5px; line-height: 1.72; max-width: 440px; }
.step p + p { margin-top: 16px; }
.step-copy.wide { max-width: 680px; margin-bottom: 48px; }
.step-copy.wide p { max-width: none; }

.step-1 { background: var(--surface-warm); border-top: 1px solid var(--outline-warm); }
.entry { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.wash { width: 240px; height: 240px; }
.entry-notes { width: 100%; max-width: 320px; }
.entry-label { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.picks { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.picks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.picks i { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; }

.step-2 { background: var(--surface-tan); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px; }
.week > div { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.cell { border: none; padding: 0; cursor: pointer; width: 100%; box-shadow: none; transition: box-shadow 200ms ease; }
.cell[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px var(--violet-deep); }
.week .initial { font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.week .initial.sel { color: var(--ink); font-weight: 600; }

.step-3 { background: var(--violet-deep); }
.step-3 h2 { color: var(--surface); }
.step-3 p { color: var(--violet-muted); }
.step-grid-3 { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; }
.demo { display: flex; flex-direction: column; align-items: center; gap: 14px; justify-self: center; width: 100%; }
.demo-fit { width: min(405px, 100%); }
.demo-label {
  display: inline-flex; align-items: center; white-space: nowrap; background: rgba(253,251,242,.14);
  border-radius: 999px; padding: 7px 15px; font-size: 13.5px; font-weight: 600; letter-spacing: .2px; color: var(--surface);
}

/* a fixed-size composition scaled to fit its box (JS sets --s and the box height) */
.fit { position: relative; overflow: visible; }
.fit-inner { position: absolute; left: 0; top: 0; transform-origin: top left; transform: scale(var(--s, 1)); }

/* editor canvas: the color field is the whole canvas, the photo sits on top */
.canvas { border-radius: 6px; overflow: hidden; isolation: isolate; background: #f2eedf; box-shadow: 0 12px 30px rgba(0,0,0,.3); transition: background-color 620ms ease; }
.demo-wash { position: absolute; inset: 0; transition: opacity 620ms ease; }
.demo-wash span { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.photo-clip { position: absolute; overflow: hidden; }
.photo-img { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; }
.canvas .photo-clip, .canvas .photo-img, .canvas .dot {
  transition: left 620ms cubic-bezier(.4,.05,.2,1), top 620ms cubic-bezier(.4,.05,.2,1),
              width 620ms cubic-bezier(.4,.05,.2,1), height 620ms cubic-bezier(.4,.05,.2,1),
              opacity 480ms ease, background-color 620ms ease, border-radius 620ms ease;
}
.dot {
  position: absolute; background-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.stamp {
  position: absolute; left: 10px; bottom: 10px; background: rgba(253,251,242,.93); border-radius: 999px;
  padding: 5px 10px; font-size: 9px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1.35; white-space: nowrap; transition: opacity 520ms ease;
}

/* studio */
.studio { background: var(--surface-tan); }
.studio-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 10px; flex-wrap: wrap; }
.studio h2 { font-size: clamp(34px, 4vw, 42px); line-height: 1.1; letter-spacing: -.7px; }
.studio-count { font-size: 13.5px; color: var(--ink-faint); white-space: nowrap; }
.studio-lede { font-size: 16.5px; line-height: 1.72; max-width: 520px; margin-bottom: 40px; }
.pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.piece-canvas { border-radius: 4px; overflow: hidden; isolation: isolate; box-shadow: 0 10px 26px rgba(43,39,25,.18); }
.piece-caption { padding-top: 12px; }
.piece-caption b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.piece-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-faint); }
.piece-meta i { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.piece-meta span { margin-left: 2px; }

/* signup */
.signup { background: var(--surface-warm); padding-block: 72px; }
.signup-grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.signup-copy { max-width: 440px; }
.signup h2 { font-size: 38px; line-height: 1.12; letter-spacing: -.6px; margin-bottom: 10px; }
.signup-copy p { font-size: 15.5px; }
.signup-form { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.signup-form input[type="email"] {
  min-width: 270px; flex: 1; min-height: 56px; padding: 0 20px; border-radius: 16px; border: 1px solid var(--outline-field);
  background: var(--surface); font-family: inherit; font-size: 16px; color: var(--ink);
}
.signup-form .btn { min-height: 56px; padding: 0 28px; border-radius: 16px; font-size: 16px; }
.signup-form .btn[disabled] { opacity: .7; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { width: 100%; font-size: 14px; color: var(--ink-faint); min-height: 1.4em; }
.form-msg.err { color: #a13a2c; }
.signed {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 16px; padding: 18px 22px;
  font-size: 16px; font-weight: 600; color: var(--violet-deep); white-space: nowrap;
}
.signed .o { width: 32px; height: 32px; }
.signed .o span { filter: blur(5px); }

/* footer */
.foot { border-top: 1px solid #e4dcc6; padding-block: 26px; }
.foot .inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-note { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-note nav { display: flex; gap: 14px; }
.foot-note a { font-size: 13px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .inner { padding-inline: 32px; }
  .step-grid, .step-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .step-grid-3 .demo { justify-self: start; align-items: flex-start; }
  .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 760px) {
  .inner { padding-inline: 20px; }
  .band, .hero { padding-block: 56px; }
  .top { padding-block: 18px; }
  .top .wordmark { font-size: 44px; }
  .topnav { gap: 18px; }
  .topnav a:not(.btn) { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-canvas { width: min(300px, 100%); justify-self: start; }
  h1 { letter-spacing: -1.2px; }
  .step h2 { letter-spacing: -.5px; }
  .step p { max-width: none; }
  .entry { align-items: flex-start; }
  .wash { width: 200px; height: 200px; }
  .week { gap: 10px; }
  .cell[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--violet-deep); }
  .demo-fit { width: min(300px, 100%); }
  .signup h2 { font-size: 32px; }
  .signup-form input[type="email"] { min-width: 0; width: 100%; }
  .signup-form .btn { width: 100%; }
}
@media (max-width: 420px) {
  .pieces { grid-template-columns: minmax(0, 1fr); }
  .piece { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .canvas, .canvas *, .wordmark .o span { transition: none !important; }
}

/* ---------- legal prose (privacy, terms) ---------- */
header:not(.top) { padding: 56px 0 8px; }
body:not(.landing) main { padding: 24px 0 64px; }
article h1 { font-family: var(--sans); font-size: 34px; font-weight: 600; letter-spacing: -0.5px; color: var(--violet-deep); margin-bottom: 4px; }
article .updated { color: var(--ink-faint); font-size: 14px; margin-bottom: 28px; }
article h2 { font-family: var(--sans); font-size: 21px; font-weight: 600; margin: 30px 0 8px; color: var(--ink); }
article p, article li { color: var(--ink-soft); margin-bottom: 12px; }
article ul { padding-left: 22px; margin-bottom: 12px; }
article .plain {
  background: var(--surface-warm); border: 1px solid var(--outline);
  border-radius: 14px; padding: 14px 18px; font-size: 15px; margin-bottom: 28px;
}
footer:not(.foot) { border-top: 1px solid var(--outline); padding: 28px 0 44px; }
footer:not(.foot) .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--ink-faint); }
footer:not(.foot) nav { display: flex; gap: 18px; }
footer:not(.foot) a { font-size: 14px; }

/* studio credit: the Llama Luke mark, in Polka's own ink */
.foot-brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.by-studio { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.by-studio:hover { color: var(--violet-deep); }
.by-studio .llama { width: 20px; height: 20px; color: #55694f; }
footer:not(.foot) .credit { display: flex; align-items: center; gap: 6px; }
footer:not(.foot) .by-studio { font-size: 14px; font-weight: 500; }