/* flankedits.com, the homepage (1 Nov 2026, seventh draft). It has one job, booking a call (CLAUDE.md §1), so it says
   as little as it can, in bullet points, and every main button offers the free first video and jumps to his booking
   calendar, which sits on the page. The
   look carries one idea: the promise is time ("1 working day or less"), so the page is night-black with big type, and
   its one colour, orange, marks the numbers that matter, the buttons and the play button in the mark. Night was one of his
   two picks in the 20 Oct taste test; Bright, the other, is Flank Creative's yellow. No italics, gradients, glows,
   pills, tick lists, eyebrow labels or pastel cards (his list of AI-site tells). */

/* The font comes from this address, the files Google Fonts serves (Fontsource 5.3.0, SIL Open Font License:
   fonts/LICENSE-gabarito.txt), copied from flankcreative.com. */
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/fonts/gabarito-latin-wght-5.3.0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/fonts/gabarito-latin-ext-wght-5.3.0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --night: #0A0A0A;
  --raised: #141414;   /* the plan cards and the calendar */
  --line: #262626;
  --edge: #3A3A3A;     /* outlines: an answer not picked, a video waiting */
  --text: #F4F4F2;
  --dim: #A3A3A3;      /* 7.8:1 on the night */
  --faint: #5E5E5E;    /* placeholders only */
  --time: #FF5A1F;     /* 6.3:1 on the night, and the night on it */
  --time-hi: #FF7A45;
  /* The mark's play button (logo.svg), as a shape for the points and the videos in the drawings. */
  --play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 4.5 12.4 15'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E");
  --nav-h: 76px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec: clamp(80px, 10vw, 140px);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 500 18px/1.55 "Gabarito", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--time); outline-offset: 3px; }
::selection { background: var(--time); color: var(--night); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.nowrap { white-space: nowrap; }

/* ---------- buttons: square-cornered blocks, never pills ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 28px;
  border-radius: 8px;
  background: var(--time);
  color: var(--night);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color .15s ease, opacity .15s ease;
}
.btn:hover { background: var(--time-hi); }
.btn-lg { height: 64px; padding: 0 34px; font-size: 20px; }
.btn-sm { height: 44px; padding: 0 18px; font-size: 16px; }
.btn-light { background: var(--text); }
.btn-light:hover { background: var(--text); opacity: .88; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }
.cta-note { color: var(--dim); font-size: 16px; text-wrap: pretty; }

/* ---------- the menu: the mark alone on the left (his logo rule, 25 Oct: nothing beside it) ---------- */
.nav { position: sticky; top: 0; z-index: 10; background: var(--night); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.logo img { width: auto; height: 36px; }

/* ---------- points: a bold lead, then the plain rest, marked with the mark's play button, never a tick ---------- */
.points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.points li { position: relative; padding-left: 1.3em; color: var(--dim); line-height: 1.35; text-wrap: pretty; }
.points b { color: var(--text); font-weight: 700; }
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 0.52em;
  height: 0.63em;
  background: var(--time);
  -webkit-mask: var(--play) center / contain no-repeat;
  mask: var(--play) center / contain no-repeat;
}

/* ---------- the hero: the whole first screen under the menu, on a phone too (his note, 1 Nov), centred (his note, 1 Nov,
   late: "The hero section needs proper spacing, centralizing things and making sure that the emphasis on the right
   things exist (desktop, tab, mobile)"). The weight runs down the middle in order: the offer, what you get, then the
   one orange button with what happens next right under it. ---------- */
.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-h) - 1px);
  min-height: calc(100svh - var(--nav-h) - 1px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding: 48px 0 72px;   /* a little above the middle */
  text-align: center;
}
.h1 {
  font-size: clamp(50px, 8.6vw, 120px);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -0.045em;
}
.hero .h1 { max-width: 13.5em; margin-inline: auto; }
/* The points stay a list you read from the left, as one block in the middle. */
.hero .points { gap: 14px; width: fit-content; max-width: 100%; margin: clamp(32px, 3.6vw, 48px) auto 0; text-align: left; }
.hero .points li { font-size: clamp(19px, 1.7vw, 23px); }
.hero .cta { flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(36px, 4vw, 52px); }
.hero .cta-note { max-width: 30em; text-align: center; }
/* A tablet held upright: a screen as tall as this left the hero floating in empty space (a third of the screen above it
   and below it, 1 Nov). Here the headline grows and the hero keeps its own height, so the next section shows under it. */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .hero { min-height: 0; padding: clamp(88px, 11svh, 150px) 0; }
  .h1 { font-size: clamp(64px, 11vw, 120px); }
}

/* ---------- sections ---------- */
.sec { padding: var(--sec) 0; border-top: 1px solid var(--line); }
.h2 { font-size: clamp(42px, 6.4vw, 84px); font-weight: 800; line-height: .96; letter-spacing: -0.04em; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split > * { min-width: 0; }

/* ---------- the plans: two cards, the same shape, so the difference reads at a glance ---------- */
.plans { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: clamp(36px, 5vw, 64px); }
.plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3.2vw, 44px);
  border-radius: 14px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
}
.plan-team { box-shadow: inset 0 0 0 2px var(--time); }
.plan-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.plan-name { font-size: clamp(30px, 2.8vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.plan-tag { color: var(--time); font-size: 15px; font-weight: 700; }
.plan-line { margin-top: 10px; color: var(--dim); font-size: 18px; line-height: 1.4; text-wrap: pretty; }
.plan .price, .plan .swap { margin-top: 24px; }
.plan .points { gap: 10px; margin-top: 26px; }
.plan .points li { font-size: 17px; }
/* In a card the note sits under the button, and side by side each note keeps room for two lines, so both cards'
   buttons line up when one note wraps. A card with no note (In-House) keeps the same room empty, for the same reason. */
.plan .cta { flex-direction: column; align-items: flex-start; margin-top: auto; padding-top: 32px; }
.plan .cta-note { min-height: 2lh; }
.plan .cta:not(:has(.cta-note))::after { content: ""; font-size: 16px; height: 2lh; }
.price { font-size: clamp(46px, 4.4vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.price small { margin-left: 8px; color: var(--dim); font-size: 18px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.price small.pre { margin: 0 10px 0 0; }

/* The picker: how many requests at a time, 1 to 4. */
.pick-label { margin-top: 28px; font-size: 16px; font-weight: 700; }
.seg { position: relative; display: flex; gap: 8px; margin-top: 10px; }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg label {
  flex: 1;
  display: grid;
  place-items: center;
  height: 52px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.seg label:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.seg input:checked + label { background: var(--text); color: var(--night); box-shadow: none; }
.seg input:focus-visible + label { outline: 3px solid var(--time); outline-offset: 3px; }

/* What changes with the pick: the price shares one spot, as tall as the tallest, so nothing moves; the count in the
   points swaps in place. A browser without :has() shows the answer for 1. */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; visibility: hidden; }
.swap > [data-n="1"] { visibility: visible; }
#pricing:has(.seg input:checked:not(#pick-1)) .swap > [data-n="1"] { visibility: hidden; }
#pricing:has(#pick-2:checked) .swap > [data-n="2"],
#pricing:has(#pick-3:checked) .swap > [data-n="3"],
#pricing:has(#pick-4:checked) .swap > [data-n="4"] { visibility: visible; }
.num > span { display: none; }
.num > [data-n="1"] { display: inline; }
#pricing:has(.seg input:checked:not(#pick-1)) .num > [data-n="1"] { display: none; }
#pricing:has(#pick-2:checked) .num > [data-n="2"],
#pricing:has(#pick-3:checked) .num > [data-n="3"],
#pricing:has(#pick-4:checked) .num > [data-n="4"] { display: inline; }

/* Under the picker, what a request is, in one line (his note, 1 Nov: "something under it that says what a request is
   breifly and simply"). */
.pick-note { margin-top: 12px; color: var(--dim); font-size: 15px; line-height: 1.45; text-wrap: pretty; }

/* How fast each kind comes back, two rows in a box like In-House's number (his rule, 1 Nov 2026: social clips in 1
   working day, long form videos in 2, "in a nice and lean way that's not too noisy"). */
.speed { margin: 12px 0 0; padding: 2px 18px; border-radius: 12px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.speed div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 12px 0; }
.speed div + div { border-top: 1px solid var(--line); }
.speed dt { color: var(--dim); font-size: 16px; line-height: 1.35; }
.speed dd { margin: 0; color: var(--text); font-size: 17px; font-weight: 700; white-space: nowrap; }

/* In-House leads with its volume, one big number. */
.stat {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--night);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stat b { color: var(--time); font-size: clamp(54px, 5vw, 72px); font-weight: 800; line-height: .9; letter-spacing: -0.05em; }
.stat span { max-width: 15em; font-size: 19px; font-weight: 700; line-height: 1.3; text-wrap: balance; }

/* ---------- questions ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 700;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--dim); font-weight: 500; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 58ch; padding: 0 0 28px; color: var(--dim); font-size: 19px; }

/* ---------- how it works: three steps (Designjoy's Subscribe, Request, Receive) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: clamp(36px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 19px;
  line-height: 1.4;
  text-wrap: pretty;
}
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 16px;
  color: var(--time);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.steps b { display: block; margin-bottom: 4px; color: var(--text); font-size: clamp(22px, 2.1vw, 26px); font-weight: 700; letter-spacing: -0.015em; }
/* ---------- the booking calendar: the CRM's own embed, on the page (his note, 1 Nov) ---------- */
.book-line { max-width: 36em; margin-top: 20px; color: var(--dim); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; text-wrap: pretty; }
.booking { margin-top: clamp(32px, 3.6vw, 48px); }
/* The calendar's own corners are square when embedded; rounded here like the plan cards. */
.booking iframe { border-radius: 14px; }

.foot { padding: 36px 0 48px; border-top: 1px solid var(--line); }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--dim); font-size: 15px; }
.foot img { width: auto; height: 28px; }
.foot-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 22px; }
.foot-r a:hover { color: var(--text); }

/* ---------- the terms and the privacy policy: one readable column, plain bullets ---------- */
.doc { padding: clamp(48px, 7vw, 96px) 0 var(--sec); }
.doc .wrap { max-width: 760px; }
.doc .h2 { font-size: clamp(40px, 5.4vw, 64px); }
.doc-date { margin-top: 14px; color: var(--dim); font-size: 16px; }
.doc h2 { margin-top: 48px; font-size: clamp(23px, 2.2vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.doc p { margin-top: 14px; color: var(--dim); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.doc .doc-date + p { margin-top: 28px; }
.doc ul { margin: 14px 0 0; padding-left: 1.15em; }
.doc li { margin-top: 10px; color: var(--dim); font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.doc li::marker { color: var(--time); }
.doc a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .split, .plans { grid-template-columns: 1fr; }
  .plan .cta-note { min-height: 0; }
  .plan .cta:not(:has(.cta-note))::after { content: none; }
}
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .logo img { height: 32px; }
  .btn { height: 56px; font-size: 18px; }
  .btn-sm { height: 42px; font-size: 16px; }
  .cta .btn { width: 100%; }
  .seg label { height: 50px; font-size: 19px; }
  .stat { gap: 14px; padding: 18px; }
  .stat span { font-size: 17px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { display: grid; grid-template-columns: 34px 1fr; padding: 20px 0; }
  .steps li::before { grid-row: span 2; margin: 2px 0 0; font-size: 26px; }
  /* Each speed on its own two lines, so the two rows read the same when the first one can't fit on one. */
  .speed div { display: block; }
  .speed dd { margin-top: 2px; }
  /* "From" on its own line, so "$4,999 a month" fits on one. */
  .price small.pre { display: block; margin: 0 0 8px; }
}