/* Generated by tools/sync_theme.py from mockup/home.css. Do not edit by hand. */
/* Fastermaker home, "split stage" direction in the pitch-deck brand.
   Brand kept: Helvetica Neue, ink, indigo accent, lavender/blush wash and the deck's soft-shape backgrounds,
   porcelain-white vase renders. Five type steps: 14 / 17 / 24 / 40 / display. */
:root {
  --ink: #0f0e1a;
  --muted: #67637f;
  --accent: #3b3fb8;
  --ground: #f4f2fb;      /* page */
  --tone: #e7e1f5;        /* one step darker: plates, slip ground */
  --paper: #fcfbff;       /* slip and menu sheet */
  --lilac: #d6ccf0;       /* monthly plan field */
  --t1: 14px; --t2: 17px; --t3: 24px; --t4: 40px; --t5: clamp(64px, 9vw, 160px);
  --m: 32px;              /* outer margin */
  --gap: 120px;           /* between sections */
  --ease: cubic-bezier(.2, .7, .2, 1);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (max-width: 760px) { :root { --t4: 30px; --m: 16px; --gap: 56px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-size: var(--t2); line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.025em; line-height: 1.05; }
h2 { font-size: var(--t4); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--lilac); }

/* ---------- buttons: square, flat, one shape everywhere */
.btn { display: inline-block; padding: 14px 24px; background: var(--accent); color: #fff; text-decoration: none; font-size: var(--t2); line-height: 1.2; transition: transform .2s var(--ease), background-color .2s; }
.btn:hover { background: var(--ink); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-ink { background: var(--ink); }
.btn-ink:hover { background: var(--accent); }
.btn-paper { background: var(--paper); color: var(--accent); }
.btn-paper:hover { background: var(--ink); color: #fff; }
.btn-tone { background: var(--tone); color: var(--ink); }
.btn-tone:hover { background: var(--lilac); }

/* ---------- top links (no logo bar: the wordmark is the title) */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: flex-end; align-items: center; padding: 24px var(--m); }
.nav-mark { display: none; }
.nav nav { display: flex; gap: 28px; align-items: center; font-size: var(--t1); }
.nav a { text-decoration: none; }
.nav nav a:not(.nav-action):hover { color: var(--accent); }
.nav-action { padding: 10px 18px; background: var(--ink); color: #fff; transition: background-color .2s; }
.nav-action:hover { background: var(--accent); }
.page-product .nav { justify-content: space-between; }
.page-product .nav-mark { display: block; font-size: var(--t3); letter-spacing: -0.03em; }
.page-product .stage-cap { top: auto; bottom: 24px; }

/* ---------- products menu */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "+"; margin-left: 6px; color: var(--accent); }
.menu[open] summary::after { content: "–"; }
.menu-list { position: absolute; top: calc(100% + 14px); left: -20px; width: 260px; background: var(--paper); padding: 16px 20px; display: grid; gap: 12px; z-index: 20; }
.menu-list a { display: grid; font-size: var(--t2); }
.menu-list a span { font-size: var(--t1); color: var(--muted); }
.menu-list a:hover { color: var(--accent); }
.menu-list p { font-size: var(--t1); color: var(--muted); padding-top: 12px; border-top: 1px solid var(--tone); }

/* ---------- Fastermaker home: the name over a shelf of vases */
.hub-hero { position: relative; height: 100svh; min-height: 640px; padding: 96px var(--m) 16px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--tone) url("../img/bg_cover.jpg") 60% 70% / cover no-repeat; overflow: hidden; }
.hub-mark { grid-column: 1 / -1; font-size: clamp(72px, 13.5vw, 240px); letter-spacing: -0.05em; line-height: .85; margin-left: -0.04em; }
.hub-intro { grid-column: 8 / 13; margin-top: 28px; position: relative; z-index: 2; }
.shelf { grid-column: 1 / -1; min-height: 0; height: 100%; display: flex; justify-content: center; align-items: flex-end; margin-top: -40px; pointer-events: none; }
.shelf img { height: 80%; width: auto; margin: 0 -2.5%; }
.shelf .shelf-lead { height: 100%; position: relative; z-index: 1; }

/* ---------- products */
.tools { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: var(--gap) var(--m) 96px; }
.tools-h { grid-column: 1 / -1; margin-bottom: 40px; }
.tool { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.tool-pic { grid-column: 1 / 7; display: flex; justify-content: center; align-items: flex-end; height: min(66svh, 640px); padding-top: 32px; background: var(--tone) url("../img/bg_wave.jpg") center / cover no-repeat; overflow: hidden; }
.tool-pic img { height: 92%; width: auto; transition: transform .6s var(--ease); }
.tool-pic:hover img { transform: translateY(-12px); }
.tool-text { grid-column: 8 / 13; }
.tool-text h3 { font-size: var(--t4); margin-bottom: 20px; }
.tool-lead { font-size: var(--t3); line-height: 1.35; margin-bottom: 32px; }
.tool-text .row { margin: 10px 0; }
.tool-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.tool-next { grid-column: 1 / -1; margin-top: 24px; padding: 40px var(--m); background: var(--lilac); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: baseline; }
.tool-next h3 { grid-column: 1 / 7; font-size: var(--t3); }
.tool-next p { grid-column: 8 / 13; }

/* ---------- the split stage */
.split { position: relative; display: grid; grid-template-columns: 47% 53%; }
.stage { position: sticky; top: 0; height: 100svh; }
.plate { position: relative; height: 100%; overflow: hidden; background: var(--tone) url("../img/bg_cover.jpg") 72% 60% / cover no-repeat; }
.stage-img { position: absolute; left: 50%; bottom: 9%; height: 74%; width: auto; max-width: none; transform: translateX(-50%); opacity: 0; transition: opacity .5s var(--ease); }
.stage-img.is-on { opacity: 1; animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.035); } }
.stage-cap { position: absolute; left: 24px; top: 24px; font-size: var(--t1); color: var(--ink); background: rgba(252, 251, 255, .78); padding: 4px 10px; }

.column { padding: 0 var(--m) 0 clamp(40px, 5vw, 72px); }
.column > section { max-width: 46ch; }
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 calc(var(--t5) + 80px); }
.hero-lead { font-size: var(--t3); line-height: 1.35; max-width: 26ch; }
.hero-act { margin-top: 36px; }

.wordmark { position: absolute; top: calc(100svh - 40px); left: calc(47% - 10vw); right: var(--m); transform: translateY(-100%); z-index: 3;
  font-size: var(--t5); letter-spacing: -0.045em; line-height: .9; font-weight: 400; color: var(--ink); text-align: right; white-space: nowrap; pointer-events: none; transform-origin: right bottom; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .wordmark { animation: shrink linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    @keyframes shrink { from { scale: 1; } to { scale: .93; } }
  }
}

/* ---------- try it (the live thing) */
.try { display: flex; flex-direction: column; gap: 40px; padding: 64px 0 0; }
.tabs { display: flex; gap: 28px; }
.tabs button { font: inherit; font-size: var(--t2); background: none; border: 0; padding: 6px 0; color: var(--muted); cursor: pointer; transition: color .2s; }
.tabs button[aria-selected="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.tabs button:hover { color: var(--ink); }
.try-body h2 { margin-bottom: 20px; }
.try-body > p { margin-bottom: 28px; }
.mini { display: none; }
.picks[hidden] { display: none; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks button { font: inherit; font-size: var(--t1); padding: 9px 14px; background: var(--tone); color: var(--ink); border: 0; cursor: pointer; transition: background-color .15s, color .15s, transform .15s var(--ease); }
.picks button:hover { background: var(--lilac); }
.picks button:active { transform: scale(.96); }
.picks button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cells { display: grid; grid-template-columns: 1fr 1fr; }
.cell { display: flex; align-items: center; padding: 0 20px; height: 72px; text-decoration: none; font-size: var(--t2); transition: background-color .2s, color .2s; }
.cell-ink { background: var(--accent); color: #fff; }
.cell-ink:hover { background: var(--ink); }
.cell-tone { background: var(--tone); }
.cell-tone:hover { background: var(--lilac); }

/* ---------- how it works: an itinerary slip */
.how { padding: var(--gap) 0 0; margin-bottom: 96px; }
.column > .how { max-width: none; }
.how h2 { margin-bottom: 16px; }
.how-lead { max-width: 30ch; margin-bottom: 40px; }
.slip { width: min(100%, 470px); background: var(--paper); padding: 32px 32px 56px; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 95% 100%, 90% calc(100% - 12px), 85% 100%, 80% calc(100% - 12px), 75% 100%, 70% calc(100% - 12px), 65% 100%, 60% calc(100% - 12px), 55% 100%, 50% calc(100% - 12px), 45% 100%, 40% calc(100% - 12px), 35% 100%, 30% calc(100% - 12px), 25% 100%, 20% calc(100% - 12px), 15% 100%, 10% calc(100% - 12px), 5% 100%, 0 calc(100% - 12px)); }
.slip h3 { font-size: var(--t2); font-weight: 700; letter-spacing: 0; margin: 28px 0 8px; }
.slip h3:first-child { margin-top: 0; }
.row { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; }
.row i { flex: 1; border-bottom: 4px dotted var(--lilac); transform: translateY(-4px); min-width: 16px; }
.row b { font-weight: 400; white-space: nowrap; }
.row-end { margin: 28px -32px 0; padding: 14px 32px; align-items: center; justify-content: space-between; background: var(--ink); color: var(--paper); }

/* ---------- proof: the names in columns */
.proof { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: var(--gap) var(--m) 96px; }
.proof-head { grid-column: 1 / 5; }
.proof-head h2 { margin-bottom: 20px; }
.names { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; font-size: var(--t3); line-height: 1.5; }
.names ul { list-style: none; margin: 0; padding: 0; }
.kind { color: var(--muted); }

/* ---------- what you get: a printed menu on the brand ground */
.next { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; padding: 96px var(--m); background: var(--tone) url("../img/bg_wave.jpg") center / cover no-repeat; }
.sheet { grid-column: 2 / 7; background: var(--paper); padding: 56px 48px;
  clip-path: polygon(0 10px, 4% 0, 8% 10px, 12% 0, 16% 10px, 20% 0, 24% 10px, 28% 0, 32% 10px, 36% 0, 40% 10px, 44% 0, 48% 10px, 52% 0, 56% 10px, 60% 0, 64% 10px, 68% 0, 72% 10px, 76% 0, 80% 10px, 84% 0, 88% 10px, 92% 0, 96% 10px, 100% 0, 100% calc(100% - 10px), 96% 100%, 92% calc(100% - 10px), 88% 100%, 84% calc(100% - 10px), 80% 100%, 76% calc(100% - 10px), 72% 100%, 68% calc(100% - 10px), 64% 100%, 60% calc(100% - 10px), 56% 100%, 52% calc(100% - 10px), 48% 100%, 44% calc(100% - 10px), 40% 100%, 36% calc(100% - 10px), 32% 100%, 28% calc(100% - 10px), 24% 100%, 20% calc(100% - 10px), 16% 100%, 12% calc(100% - 10px), 8% 100%, 4% calc(100% - 10px), 0 100%); }
.sheet h2 { text-align: center; margin-bottom: 40px; }
.sheet h3 { font-size: var(--t2); font-weight: 700; letter-spacing: 0; margin: 44px 0 6px; }
.sheet h2 + h3 { margin-top: 0; }
.item { margin-bottom: 18px; }
.item .row { margin: 0; }
.desc { font-size: var(--t1); color: var(--muted); max-width: 34ch; }
.next-pics { grid-column: 8 / 13; display: grid; gap: 48px; }
.next-pics figure { margin: 0; }
.next-pics figcaption { font-size: var(--t1); margin-top: 8px; }

/* ---------- pricing: three fields, personal plans then the seller plan on ink */
.pricing { display: grid; grid-template-columns: 1fr 1fr 1.2fr; }
.plan { min-height: min(60svh, 520px); padding: 48px var(--m) 40px 40px; display: flex; flex-direction: column; gap: 20px; }
.plan h2 { font-size: var(--t4); }
.plan-month { background: var(--lilac); color: var(--ink); padding-left: var(--m); }
.plan-year { background: var(--accent); color: #fff; }
.plan-sell { background: var(--ink); color: #fff; }
.plan-sell .plan-inc a { color: #fff; }
.plan-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.plan-who { font-size: var(--t3); line-height: 1.3; max-width: 22ch; }
.plan-inc { max-width: 36ch; }
.plan-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.price { font-size: var(--t5); letter-spacing: -0.045em; line-height: .85; font-weight: 300; }
.price span { font-size: var(--t2); letter-spacing: 0; font-weight: 400; margin-left: 10px; }

/* ---------- backer note */
.backer { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 72px var(--m); align-items: center; background: var(--tone); }
.backer h2 { grid-column: 1 / 6; }
.backer div { grid-column: 7 / 13; }
.backer div { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.backer p { font-size: var(--t2); line-height: 1.5; max-width: 44ch; }
.backer .btn { flex: none; }

/* ---------- letter */
.letter { padding: var(--gap) var(--m); }
.letter-col { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.letter-col > * { grid-column: 6 / 12; }
.letter-col > h2 { grid-column: 1 / 6; grid-row: 1 / span 8; align-self: start; }
.letter p { margin-bottom: 1.1em; }
.letter mark { background: var(--lilac); color: var(--ink); padding: 0 3px; }
.sign { font-size: var(--t3); font-style: italic; margin: 40px 0 0 !important; }
.role { font-size: var(--t1); color: var(--muted); }

/* ---------- footer: picture at left, link columns at right */
.foot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); background: var(--tone); }
.foot-pic { position: relative; min-height: 360px; overflow: hidden; }
.foot-pic video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.foot-menu { padding: 48px var(--m) 28px 56px; display: flex; flex-direction: column; }
.foot-mark { font-size: var(--t3); letter-spacing: -0.03em; margin-bottom: 40px; }
.foot-mark a { text-decoration: none; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; font-size: var(--t2); }
.foot-cols h2 { font-size: var(--t1); font-weight: 700; letter-spacing: 0; line-height: 1.4; margin-bottom: 14px; }
.foot-cols nav, .foot-cols div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-cols a { text-decoration: none; line-height: 1.35; transition: color .2s; }
.foot-cols a:hover, .foot-cols a:focus-visible { color: var(--accent); }
.foot-cols p { font-size: var(--t1); color: var(--muted); line-height: 1.4; }
.legal { margin-top: auto; padding-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--t1); color: var(--muted); }
.legal p { display: flex; gap: 24px; }
.legal a { text-decoration: none; }
.legal a:hover { color: var(--ink); }

/* ---------- entrances (content stays visible without script) */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { opacity: 1; transform: none; transition: none; }
  .stage-img.is-on { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- tablet */
@media (max-width: 1100px) {
  .names { columns: 3; }
  .sheet { grid-column: 1 / 8; }
  .next-pics { grid-column: 8 / 13; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr 1fr; }
  .plan-sell { grid-column: 1 / -1; }
  .backer div { display: block; }
  .backer p { margin-bottom: 20px; }
}

/* ---------- phone: its own composition */
@media (max-width: 760px) {
  .nav { position: absolute; padding: 14px var(--m); justify-content: space-between; }
  .nav-mark { display: block; font-size: var(--t2); letter-spacing: -0.03em; }
  .page-home .nav-mark { visibility: hidden; }
  .nav nav a:not(.nav-action) { display: none; }
  .nav nav { gap: 18px; }
  .menu-list { left: auto; right: -80px; }
  .page-product .nav-mark { font-size: var(--t2); }
  .page-product .stage-cap { top: 68px; bottom: auto; left: var(--m); }
  .hub-hero { height: auto; min-height: 100svh; padding: 72px var(--m) 12px; display: flex; flex-direction: column; }
  .hub-mark { font-size: 19vw; }
  .hub-intro { margin-top: 20px; }
  .shelf { margin-top: auto; height: auto; padding-top: 24px; }
  .shelf img { height: 30svh; margin: 0 -6%; }
  .shelf img:first-child, .shelf img:last-child { display: none; }
  .shelf .shelf-lead { height: 38svh; }
  .tools { display: block; padding-bottom: var(--gap); }
  .proof { padding-bottom: var(--gap); }
  .tool { display: block; }
  .tool-pic { height: 60svh; }
  .tool-text { margin-top: 32px; }
  .tool-act .btn { flex: 1 1 100%; text-align: center; }
  .tool-next { display: block; padding: 32px 20px; margin-top: 48px; }
  .tool-next h3 { margin-bottom: 12px; }
  .split { display: flex; flex-direction: column; }
  .stage { order: 1; } .wordmark { order: 2; } .column { order: 3; }
  .stage { position: relative; height: 62svh; padding: 0; }
  .wordmark { position: relative; top: auto; left: auto; right: auto; transform: none; margin: -3vw var(--m) 0; font-size: 19vw; text-align: left; }
  .column { padding: 0 var(--m); }
  .hero { min-height: 0; padding: 24px 0 40px; }
  .hero-lead { font-size: var(--t3); }
  .try { min-height: 0; padding-top: 48px; }
  .mini { display: block; width: 46%; margin: 0 auto 20px; }
  .cells { grid-template-columns: 1fr; }
  .cell { height: 60px; }
  .how { padding-top: var(--gap); margin-bottom: 0; }
  .slip { padding: 24px 20px 48px; }
  .row-end { margin: 24px -20px 0; padding: 12px 20px; }
  .proof, .next, .backer { display: block; }
  .proof-head { margin-bottom: 32px; }
  .names { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 24px; font-size: var(--t2); }
  .names ul:first-child { grid-column: 1 / -1; columns: 2; column-gap: 20px; }
  .names ul:first-child .kind { column-span: all; }
  .next { padding: 72px 12px; }
  .sheet { padding: 40px 20px; }
  .item .row { font-size: var(--t2); }
  .next-pics { margin-top: 48px; padding: 0 8px; gap: 32px; }
  .pricing { display: flex; flex-direction: column; }
  .plan-year { order: -1; }
  .plan { min-height: 0; padding: 32px 20px; }
  .plan-foot { flex-direction: column; align-items: stretch; }
  .plan-foot .btn { text-align: center; }
  .plan-btns { flex-direction: column; }
  .price { font-size: 22vw; }
  .backer { padding: 56px var(--m); }
  .backer div { display: block; }
  .backer p { margin-bottom: 24px; }
  .letter-col { display: block; }
  .letter h2 { margin-bottom: 24px; }
  .backer h2 { margin-bottom: 20px; }
  .backer p { font-size: var(--t2); }
  .foot { display: block; }
  .foot-pic { display: none; }
  .foot-menu { padding: 40px var(--m) 24px; }
  .foot-mark { margin-bottom: 28px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-cols > :last-child { grid-column: 1 / -1; }
  .legal { padding-top: 36px; flex-direction: column; }
}

/* Home hero: the shelf of five stills becomes one vase turning through 24 combinations,
   a new shape and texture every second. The video carries its own transparency (see the turntable in home.js), so the vase is solid over
   the colour wash and only its soft shadow lets the background through; the edges fade so the shadow has no border. */
.hub-mark { position: relative; z-index: 2; }
.turn { position: absolute; left: 4%; bottom: 0; height: 82%; aspect-ratio: 880 / 1100; pointer-events: none; }
.turn-still, .turn-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(to top, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(to top, transparent 0, #000 16%);
  mask-composite: intersect; }
.turn-canvas { opacity: 0; }
.turn.is-live .turn-canvas { opacity: 1; }
.turn.is-live .turn-still { visibility: hidden; }
.turn-src { position: absolute; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 760px) {
  .turn { position: relative; left: auto; bottom: auto; height: 54svh; margin: auto auto -12px; }
}