/* webaz.ca home page. Brand colours from docs/brand/BRAND-GUIDE.md. No JavaScript anywhere:
   every effect is CSS, and moving things stop for people who ask their device for less motion. */
:root {
  --field: #3F7D2C; --paddy: #2E5B22; --shoot: #6BAF45; --sprout: #DDEFC9;
  --grain: #FAF8EF; --harvest: #E3B23C; --ink: #1F2A1B; --muted: #4E5A48; --line: #E4E6DA;
  --rose: #B4506A; --navy: #26405F; --sky: #E7F0FA; --blush: #FBEDEF;
  --radius: 22px;
  --wide: 1440px;
  --pad: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--grain); color: var(--ink); font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: clamp(17px, 1.05vw + 12px, 19px); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: var(--field); }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--harvest); outline-offset: 3px; border-radius: 6px; }

/* ---- Type ---- */
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.05; }
h1 { font-size: clamp(42px, 5.2vw, 96px); font-weight: 700; color: var(--paddy); letter-spacing: -.035em; }
h2 { font-size: clamp(34px, 4.2vw, 64px); font-weight: 700; color: var(--paddy); letter-spacing: -.03em; }
h3 { font-size: clamp(20px, 1.5vw, 24px); color: var(--paddy); line-height: 1.2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--field); }
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--harvest); }
.lead { font-size: clamp(19px, 1.35vw, 24px); color: var(--muted); max-width: 40ch; }
.sub { font-size: clamp(18px, 1.2vw, 21px); color: var(--muted); max-width: 60ch; margin: 18px 0 0; }
.hl { position: relative; white-space: nowrap; color: var(--field); }
.hl::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .28em; z-index: -1; background: var(--harvest); opacity: .55; border-radius: 8px; transform-origin: left; animation: swipe 1s .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes swipe { from { transform: scaleX(0); } }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 16px; font-size: 18px; font-weight: 700; text-decoration: none; background: var(--field); color: #fff; border: 2px solid var(--field); transition: transform .15s, background .15s, box-shadow .15s; box-shadow: 0 10px 24px -12px rgba(63, 125, 44, .8); }
.btn:hover { background: var(--paddy); border-color: var(--paddy); transform: translateY(-2px); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-line { background: #fff; color: var(--paddy); border-color: var(--line); box-shadow: none; }
.btn-line:hover { background: var(--sprout); border-color: var(--field); }
.btn-light { background: #fff; color: var(--paddy); border-color: #fff; }
.btn-light:hover { background: var(--sprout); border-color: var(--sprout); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Sections ---- */
.section { padding: clamp(72px, 9vw, 140px) 0; }
.head { display: grid; gap: 8px; margin-bottom: clamp(36px, 4vw, 64px); }
.head.center { text-align: center; justify-items: center; }
.head.center .sub { margin-inline: auto; }

/* ---- Hero ---- */
.hero { position: relative; padding: clamp(48px, 7vw, 110px) 0 clamp(64px, 8vw, 120px); overflow: clip; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(46, 91, 34, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 91, 34, .06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%); }
.orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .7; animation: drift 18s ease-in-out infinite alternate; }
.orb-1 { width: 46vw; height: 46vw; right: -10vw; top: -16vw; background: #D6EDC0; }
.orb-2 { width: 30vw; height: 30vw; left: -12vw; bottom: -10vw; background: #F6E6B8; animation-duration: 22s; }
.orb-3 { width: 22vw; height: 22vw; right: 30vw; bottom: -8vw; background: #F4D9DF; opacity: .55; animation-duration: 26s; }
@keyframes drift { to { transform: translate(-4vw, 3vw) scale(1.08); } }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--paddy); box-shadow: 0 6px 20px -14px rgba(31, 42, 27, .5); }
.badge b { background: var(--field); color: #fff; font-size: 12px; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; }
.hero h1 { margin-bottom: 26px; }
.hero .lead { margin: 0 0 34px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--muted); }
.chips li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--sprout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%232E5B22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Builder illustration: a website building itself, then switching style. 12-second loop. */
.stage { position: relative; }
.win { position: relative; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 50px 100px -40px rgba(31, 42, 27, .45), 0 18px 40px -24px rgba(31, 42, 27, .3); overflow: hidden; transform: perspective(1600px) rotateY(-6deg) rotateX(3deg); transition: transform .5s; }
.stage:hover .win { transform: none; }
.win-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; background: #F3F4EC; border-bottom: 1px solid var(--line); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #E0A39A; }
.win-bar i:nth-child(2) { background: #E8CB7C; }
.win-bar i:nth-child(3) { background: #9CC98A; }
.win-url { margin-left: 14px; flex: 1; max-width: 300px; height: 24px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 12px; line-height: 22px; padding: 0 10px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.win-url::before { content: "🔒 "; filter: grayscale(1); font-size: 10px; }
.win-body { display: grid; grid-template-columns: 1fr 26%; min-height: clamp(300px, 30vw, 460px); }
.site { --s-bg: var(--blush); --s-ink: var(--rose); --s-btn: var(--rose); position: relative; padding: 16px; display: grid; gap: 12px; align-content: start; background: #fff; animation: palette 12s infinite; }
@keyframes palette {
  0%, 30% { --s-bg: #FBEDEF; --s-ink: #B4506A; --s-btn: #B4506A; }
  36%, 63% { --s-bg: #E9F4DF; --s-ink: #2E5B22; --s-btn: #3F7D2C; }
  69%, 96% { --s-bg: #E7F0FA; --s-ink: #26405F; --s-btn: #26405F; }
  100% { --s-bg: #FBEDEF; --s-ink: #B4506A; --s-btn: #B4506A; }
}
@property --s-bg { syntax: "<color>"; inherits: true; initial-value: #FBEDEF; }
@property --s-ink { syntax: "<color>"; inherits: true; initial-value: #B4506A; }
@property --s-btn { syntax: "<color>"; inherits: true; initial-value: #B4506A; }
.s-nav { display: flex; align-items: center; gap: 8px; }
.s-logo { width: 70px; height: 12px; border-radius: 6px; background: var(--s-ink); }
.s-nav span { width: 30px; height: 7px; border-radius: 4px; background: #E3E5DC; }
.s-nav span:first-of-type { margin-left: auto; }
.s-nav b { width: 54px; height: 20px; border-radius: 8px; background: var(--s-btn); }
.s-hero { border-radius: 14px; background: var(--s-bg); padding: clamp(16px, 2vw, 28px); display: grid; gap: 10px; animation: rise 12s infinite; }
.s-line { height: clamp(10px, 1.1vw, 16px); border-radius: 8px; background: var(--s-ink); transform-origin: left; animation: grow 12s infinite; }
.s-line.l2 { width: 55%; opacity: .5; animation-delay: .15s; }
.s-line.l1 { width: 80%; }
.s-btn { width: 96px; height: 28px; border-radius: 10px; background: var(--s-btn); margin-top: 6px; animation: pop 12s infinite; }
.s-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.s-cards div { height: clamp(58px, 6vw, 96px); border-radius: 12px; background: #F4F5EF; border: 1px solid #ECEEE4; position: relative; overflow: hidden; animation: pop 12s infinite; }
.s-cards div::after { content: ""; position: absolute; left: 10px; right: 30%; bottom: 10px; height: 7px; border-radius: 4px; background: var(--s-ink); opacity: .45; }
.s-cards div:nth-child(2) { animation-delay: .2s; }
.s-cards div:nth-child(3) { animation-delay: .4s; }
.s-foot { height: 36px; border-radius: 10px; background: var(--s-ink); opacity: .9; animation: pop 12s .6s infinite; }
@keyframes rise { 0% { opacity: 0; transform: translateY(14px); } 6%, 100% { opacity: 1; transform: none; } }
@keyframes grow { 0%, 3% { transform: scaleX(0); } 12%, 100% { transform: scaleX(1); } }
@keyframes pop { 0%, 10% { opacity: 0; transform: scale(.9); } 16%, 100% { opacity: 1; transform: none; } }
.tools { background: #F7F8F1; border-left: 1px solid var(--line); padding: 12px 10px; display: grid; gap: 8px; align-content: start; }
.tools p { margin: 0 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tool { height: clamp(30px, 3vw, 44px); border-radius: 10px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.tool::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--sprout); flex: none; }
.tool::after { content: ""; height: 6px; flex: 1; border-radius: 3px; background: #E3E5DC; }
.tool.on { border-color: var(--shoot); box-shadow: 0 0 0 3px rgba(107, 175, 69, .2); animation: blink 12s infinite; }
@keyframes blink { 0%, 30%, 64%, 100% { box-shadow: 0 0 0 3px rgba(107, 175, 69, .2); } 33%, 67% { box-shadow: 0 0 0 6px rgba(107, 175, 69, .45); } }
.swatches { display: flex; gap: 6px; margin-top: 4px; }
.swatches i { width: 20px; height: 20px; border-radius: 50%; background: #B4506A; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.swatches i:nth-child(2) { background: #3F7D2C; }
.swatches i:nth-child(3) { background: #26405F; }
.cursor { position: absolute; z-index: 3; width: 26px; height: 26px; left: 0; top: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l16 7-7 2.5L10.5 20z' fill='%231F2A1B' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); animation: cursor 12s infinite; }
@keyframes cursor {
  0% { transform: translate(40%, 70%); }
  14% { transform: translate(28%, 40%); }
  26%, 32% { transform: translate(88%, 62%); }
  46% { transform: translate(40%, 30%); }
  58%, 66% { transform: translate(92%, 62%); }
  82% { transform: translate(20%, 80%); }
  100% { transform: translate(40%, 70%); }
}
.cursor-lane { position: absolute; inset: 42px 0 0 0; pointer-events: none; }
.cursor-lane .cursor { left: 0; top: 0; }
.toast { position: absolute; z-index: 4; right: 6%; bottom: -18px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; background: var(--paddy); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 20px 40px -18px rgba(31, 42, 27, .7); animation: toast 12s infinite; }
.toast i { width: 22px; height: 22px; border-radius: 50%; background: var(--shoot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@keyframes toast { 0%, 84% { opacity: 0; transform: translateY(16px) scale(.96); } 88%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.phone { position: absolute; z-index: 3; left: -6%; bottom: -8%; width: 24%; min-width: 110px; aspect-ratio: 9 / 18; border-radius: 26px; background: #1F2A1B; padding: 7px; box-shadow: 0 30px 60px -24px rgba(31, 42, 27, .6); animation: float 6s ease-in-out infinite; }
.phone .site { height: 100%; border-radius: 20px; padding: 10px 8px; gap: 8px; overflow: hidden; }
.phone .s-cards { grid-template-columns: 1fr; }
.phone .s-cards div { height: 30px; }
.phone .s-nav span { display: none; }
.phone .s-logo { width: 40px; height: 8px; }
.phone .s-nav b { width: 28px; height: 14px; margin-left: auto; }
.phone .s-btn { width: 60px; height: 18px; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-1deg); } }

/* ---- Ribbon of business types ---- */
.ribbon { padding: 26px 0; border-block: 1px solid var(--line); background: #fff; overflow: hidden; display: grid; gap: 14px; }
.ribbon-row { display: flex; width: max-content; gap: 14px; animation: slide 50s linear infinite; }
.ribbon-row.rev { animation-direction: reverse; animation-duration: 60s; }
.ribbon:hover .ribbon-row { animation-play-state: paused; }
.ribbon-row span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: var(--grain); border: 1px solid var(--line); font-weight: 600; font-size: 17px; color: var(--paddy); white-space: nowrap; }
.ribbon-row span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--shoot); }
.ribbon-row.rev span::before { background: var(--harvest); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- For everyone ---- */
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.person { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; overflow: hidden; }
.person:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 60px -34px rgba(31, 42, 27, .45); }
.person::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: var(--tint, var(--sprout)); opacity: .7; transition: transform .4s; }
.person:hover::after { transform: scale(1.3); }
.person .ico { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--tint, var(--sprout)); color: var(--paddy); }
.person .ico svg { width: 30px; height: 30px; }
.person p { margin: 0; color: var(--muted); font-size: 17px; }
.person ul { margin: auto 0 0; padding: 14px 0 0; list-style: none; border-top: 1px dashed var(--line); display: grid; gap: 6px; font-size: 16px; font-weight: 600; color: var(--paddy); }
.person li::before { content: "→ "; color: var(--shoot); }
.p-owner { --tint: #DDEFC9; }
.p-senior { --tint: #F6E6B8; }
.p-free { --tint: #DCE8F6; }
.p-young { --tint: #F7DCE2; }

/* ---- Three steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: step; position: relative; }
.step { position: relative; padding: clamp(26px, 2.6vw, 40px); border-radius: var(--radius); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 20px; background: var(--field); color: #fff; font-size: 30px; font-weight: 700; box-shadow: 0 14px 30px -14px rgba(63, 125, 44, .9); }
.step p { margin: 10px 0 0; color: var(--muted); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 58px; right: calc(-1 * clamp(16px, 2vw, 28px)); width: clamp(16px, 2vw, 28px); height: 3px; background: repeating-linear-gradient(90deg, var(--shoot) 0 6px, transparent 6px 12px); }

/* ---- Features (bento) ---- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.2vw, 34px); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); overflow: hidden; min-height: 240px; }
.tile p { margin: 0; color: var(--muted); font-size: 17px; }
.tile.c2 { grid-column: span 2; }
.tile.c3 { grid-column: span 3; }
.tile.c4 { grid-column: span 4; }
.tile.green { background: var(--field); border-color: var(--field); }
.tile.green h3, .tile.green p { color: #fff; }
.tile.soft { background: var(--sprout); border-color: #CFE5B8; }
.pill { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--harvest); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pill.pro { background: var(--paddy); color: #fff; }
.viz { margin-top: auto; padding-top: 16px; }
/* style swatches cycling */
.viz-style { display: flex; gap: 10px; }
.viz-style span { flex: 1; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); transition: transform .3s; }
.tile:hover .viz-style span:nth-child(odd) { transform: translateY(-6px); }
.viz-style span:nth-child(1) { --a: #B4506A; --b: #FBEDEF; }
.viz-style span:nth-child(2) { --a: #3F7D2C; --b: #E9F4DF; }
.viz-style span:nth-child(3) { --a: #26405F; --b: #E7F0FA; }
.viz-style span:nth-child(4) { --a: #1F2A1B; --b: #E3B23C; }
.viz-style span:nth-child(5) { --a: #7A4E9C; --b: #F1E8F7; }
/* progress bar */
.viz-ready { display: grid; gap: 8px; font-weight: 700; color: var(--paddy); font-size: 15px; }
.bar { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.bar i { display: block; height: 100%; width: 88%; border-radius: inherit; background: var(--field); transform-origin: left; animation: fill 2.4s cubic-bezier(.2, .8, .2, 1) both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
@keyframes fill { from { transform: scaleX(.1); } }
/* gallery */
.viz-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.viz-gal i { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(160deg, #F7DCE2, #E9B7C3); transition: transform .3s; }
.viz-gal i:nth-child(2) { background: linear-gradient(160deg, #DDEFC9, #A7D48B); }
.viz-gal i:nth-child(3) { background: linear-gradient(160deg, #F6E6B8, #E3B23C); }
.viz-gal i:nth-child(4) { background: linear-gradient(160deg, #DCE8F6, #9DB9DB); }
.tile:hover .viz-gal i { transform: rotate(-4deg) scale(1.04); }
.tile:hover .viz-gal i:nth-child(even) { transform: rotate(4deg) scale(1.04); }
/* levels */
.viz-levels { display: flex; gap: 8px; flex-wrap: wrap; }
.viz-levels span { padding: 10px 16px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; font-weight: 700; font-size: 16px; }
.viz-levels span:first-child { background: #fff; color: var(--paddy); border-color: #fff; }
/* AI */
.viz-ai { display: grid; gap: 8px; }
.viz-ai div { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--grain); border: 1px solid var(--line); font-size: 15px; color: var(--ink); max-width: 90%; }
.viz-ai div:last-child { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--sprout); border-color: #CFE5B8; }
/* undo */
.viz-undo { display: flex; gap: 10px; }
.viz-undo span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--grain); border: 1px solid var(--line); color: var(--paddy); }
.viz-undo span svg { width: 26px; height: 26px; }

/* ---- Facts band ---- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--radius); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.fact { background: #fff; padding: clamp(22px, 2.4vw, 36px); }
.fact b { display: block; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; letter-spacing: -.03em; color: var(--field); }
.fact span { display: block; margin-top: 10px; color: var(--muted); font-size: 16px; }

/* ---- Safety (dark band) ---- */
.dark { background: var(--paddy); color: rgba(255, 255, 255, .86); position: relative; overflow: hidden; isolation: isolate; }
.dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 400px at 90% 10%, rgba(107, 175, 69, .35), transparent 70%), radial-gradient(500px 300px at 0% 100%, rgba(227, 178, 60, .18), transparent 70%); }
.dark h2 { color: #fff; }
.dark .eyebrow { color: #CFE5B8; }
.dark .sub { color: rgba(255, 255, 255, .8); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s, transform .2s; }
.checks li:hover { background: rgba(255, 255, 255, .12); transform: translateX(6px); }
.checks li::before { content: ""; width: 44px; height: 44px; border-radius: 14px; background: var(--shoot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.checks strong { color: #fff; display: block; }

/* ---- Pricing (monthly / yearly switch without script) ---- */
.pricing { background: #fff; }
.switch { display: flex; width: fit-content; padding: 6px; border-radius: 999px; background: var(--grain); border: 1px solid var(--line); margin: 0 auto; }
input[name="pay"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.switch label { cursor: pointer; padding: 10px 22px; border-radius: 999px; font-weight: 700; color: var(--muted); font-size: 16px; }
.switch label small { color: var(--field); font-weight: 700; }
#pay-month:checked ~ .switch label[for="pay-month"], #pay-year:checked ~ .switch label[for="pay-year"] { background: var(--field); color: #fff; }
#pay-year:checked ~ .switch label[for="pay-year"] small { color: #fff; }
#pay-month:focus-visible ~ .switch label[for="pay-month"], #pay-year:focus-visible ~ .switch label[for="pay-year"] { outline: 3px solid var(--harvest); outline-offset: 2px; }
.year { display: none; }
#pay-year:checked ~ .plans .year { display: inline; }
#pay-year:checked ~ .plans .month { display: none; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: 40px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 34px); border-radius: var(--radius); background: var(--grain); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -36px rgba(31, 42, 27, .5); }
.plan.hot { background: var(--paddy); border-color: var(--paddy); color: rgba(255, 255, 255, .85); }
.plan.hot h3, .plan.hot .price { color: #fff; }
.plan.hot li::before { background-color: var(--shoot); }
.ribbon-tag { position: absolute; top: -13px; left: 24px; padding: 5px 12px; border-radius: 999px; background: var(--harvest); color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.price { margin: 0; color: var(--paddy); font-size: 17px; }
.price b { font-size: clamp(40px, 3.6vw, 56px); letter-spacing: -.03em; line-height: 1; }
.billed { margin: -6px 0 0; font-size: 15px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.plan li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px; background: var(--sprout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%232E5B22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.plan.hot li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan .btn { margin-top: auto; width: 100%; }
.plan.hot .btn { background: #fff; color: var(--paddy); border-color: #fff; }
.plan.hot .btn:hover { background: var(--sprout); }
.note { margin: 24px 0 0; color: var(--muted); font-size: 16px; }
.freelance { margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(26px, 3vw, 48px); border-radius: calc(var(--radius) + 6px); background: linear-gradient(120deg, #DCE8F6, #E9F4DF); border: 1px solid #D5E2EC; }
.freelance h3 { font-size: clamp(26px, 2.4vw, 36px); }
.freelance p { margin: 12px 0 0; color: var(--muted); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tiers div { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-align: center; }
.tiers b { display: block; font-size: clamp(34px, 3vw, 46px); line-height: 1; color: var(--navy); letter-spacing: -.03em; }
.tiers span { display: block; margin-top: 6px; font-weight: 700; color: var(--ink); }
.tiers small { color: var(--muted); font-size: 14px; }

/* ---- AZ family ---- */
.family { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.fam { padding: clamp(24px, 2.4vw, 36px); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.fam.me { background: var(--sprout); border-color: #CFE5B8; }
.fam p { margin: 8px 0 0; color: var(--muted); }

/* ---- FAQ ---- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--shoot); box-shadow: 0 16px 40px -30px rgba(31, 42, 27, .5); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 24px; font-weight: 700; font-size: clamp(17px, 1.2vw, 20px); color: var(--paddy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sprout); color: var(--paddy); font-size: 22px; font-weight: 500; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--muted); }

/* ---- Final call ---- */
.final { padding: clamp(40px, 5vw, 80px) 0 clamp(72px, 9vw, 140px); }
.final-in { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; padding: clamp(44px, 6vw, 110px) clamp(24px, 5vw, 96px); background: var(--field); color: #fff; text-align: center; display: grid; justify-items: center; gap: 18px; }
.final-in::before, .final-in::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .1); animation: drift 14s ease-in-out infinite alternate; }
.final-in::before { width: 420px; height: 420px; left: -120px; top: -160px; }
.final-in::after { width: 320px; height: 320px; right: -80px; bottom: -140px; background: rgba(227, 178, 60, .25); animation-duration: 18s; }
.final h2 { color: #fff; max-width: 18ch; }
.final p { margin: 0; font-size: clamp(18px, 1.3vw, 22px); color: rgba(255, 255, 255, .88); max-width: 50ch; }
.final .actions { justify-content: center; margin-top: 10px; }
.final .btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.final .btn-line:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ---- Appear on scroll (CSS only, where supported) ---- */
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes reveal { from { opacity: 0; transform: translateY(40px) scale(.98); } }
}

/* ---- Wide screens: use the space ---- */
@media (min-width: 1800px) {
  :root { --wide: 1640px; }
}

/* ---- Tablets ---- */
@media (max-width: 1100px) {
  .hero-in, .split, .faq-grid, .freelance { grid-template-columns: 1fr; }
  .stage { max-width: 760px; margin: 12px auto 0; width: 100%; }
  .people, .plans, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile.c2 { grid-column: span 2; }
  .tile.c3, .tile.c4 { grid-column: span 4; }
  .phone { left: -2%; }
}

/* ---- Phones ---- */
@media (max-width: 680px) {
  .people, .plans, .steps, .family, .bento { grid-template-columns: 1fr; }
  .tiers { gap: 8px; }
  .tiers div { padding: 14px 6px; }
  .tiers span { font-size: 14px; line-height: 1.2; }
  .facts { grid-template-columns: 1fr 1fr; }
  .tile.c2, .tile.c3, .tile.c4 { grid-column: auto; }
  .tile { min-height: 0; }
  .step:not(:last-child)::after { display: none; }
  .win { transform: none; }
  .win-body { grid-template-columns: 1fr; }
  .tools { display: none; }
  .phone { width: 30%; left: auto; right: -4%; bottom: -12%; }
  .toast { right: auto; left: 4%; }
  .btn { width: 100%; }
  .hero .actions .btn { width: 100%; }
  .switch { display: flex; width: 100%; }
  .switch label { flex: 1; text-align: center; padding: 10px 8px; }
}

/* ---- Less motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .toast { opacity: 1; }
}

/* ===== Round 2 ===== */
/* Headings whose lines never wrap: each line is sized to fit its space (--ch = longest line, in letters). */
.head, .freelance > div:first-child, .final-wrap, .levels-head { container-type: inline-size; }
.fit { font-size: clamp(26px, calc(100cqi / (var(--ch, 24) * .54)), var(--fit-max, 64px)); }
.fit span { display: block; white-space: nowrap; }
.fit-sm { --fit-max: 36px; }
@media (max-width: 700px) { .fit span { white-space: normal; } .fit { font-size: clamp(26px, 8vw, 40px); } .fit-sm { font-size: 24px; } }

/* Three levels: real screenshots */
.tile.c6 { grid-column: 1 / -1; }
.levels { background: linear-gradient(135deg, #F4F9EE, #fff 60%); }
.levels-head { display: grid; gap: 8px; }
.levels-head h3 { --fit-max: 40px; }
.levels-head p { margin: 0; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: 18px; }
.shots figure { margin: 0; display: grid; gap: 12px; }
.shots img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(31, 42, 27, .45); transition: transform .3s; background: #fff; }
.shots figure:hover img { transform: translateY(-6px) scale(1.02); }
.shots figcaption { font-size: 16px; color: var(--muted); }
.shots figcaption b { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--field); color: #fff; font-size: 14px; }
.tile p a { color: var(--field); font-weight: 600; }

/* Advanced tools, included */
.tools-in { margin-top: clamp(56px, 7vw, 110px); }
.toolchips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.toolchips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 16px; color: var(--paddy); transition: transform .2s, border-color .2s, background .2s; }
.toolchips li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--sprout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%232E5B22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.toolchips li:hover { transform: translateY(-3px); border-color: var(--shoot); background: #F7FBF2; }

/* Templates */
.soft-band { background: linear-gradient(180deg, #EEF6E4, var(--grain)); }
.tpls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.tpl { margin: 0; display: grid; gap: 12px; text-align: center; font-weight: 700; color: var(--paddy); }
.tpl-win { --a: #B4506A; --b: #FBEDEF; --c: #fff; position: relative; aspect-ratio: 4 / 3.2; border-radius: 18px; background: var(--c); border: 1px solid var(--line); overflow: hidden; padding: 12% 7% 7%; display: grid; grid-template-rows: auto 1fr auto auto; gap: 7%; box-shadow: 0 30px 60px -36px rgba(31, 42, 27, .5); transition: transform .35s; }
.tpl:hover .tpl-win { transform: translateY(-8px) rotate(-1deg); }
.tpl-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7%; background: #F1F2EA; border-bottom: 1px solid var(--line); }
.tpl-win i { height: 7px; width: 34%; border-radius: 4px; background: var(--a); }
.tpl-win b { border-radius: 12px; background: var(--b); position: relative; }
.tpl-win b::after { content: ""; position: absolute; left: 10%; top: 28%; width: 55%; height: 12%; border-radius: 6px; background: var(--a); box-shadow: 0 16px 0 -2px color-mix(in srgb, var(--a) 45%, transparent), 0 38px 0 2px var(--a); }
.tpl-win span { height: 8px; width: 60%; border-radius: 4px; background: color-mix(in srgb, var(--a) 60%, transparent); }
.tpl-win em { display: block; height: 22%; min-height: 22px; border-radius: 10px; background: linear-gradient(90deg, #F2F3EC 0 31%, transparent 31% 34.5%, #F2F3EC 34.5% 65.5%, transparent 65.5% 69%, #F2F3EC 69%); }
.tpl-win u { display: none; }
.t-warm .tpl-win { --a: #9A4A1F; --b: #FBEBD9; }
.t-navy .tpl-win { --a: #26405F; --b: #E7F0FA; }
.t-green .tpl-win { --a: #3F7D2C; --b: #E9F4DF; }
.t-rose .tpl-win b { background: linear-gradient(120deg, #FBEDEF, #F4D0D8); }
.t-warm .tpl-win b { background: linear-gradient(120deg, #FBEBD9, #F2CFA8); }
.t-navy .tpl-win b { background: linear-gradient(120deg, #E7F0FA, #BFD3EA); }
.t-green .tpl-win b { background: linear-gradient(120deg, #E9F4DF, #C7E3AE); }

/* FAQ side illustration: a friendly chat */
.faq-art { margin: 28px 0 0; padding: 26px; border-radius: 24px; background: linear-gradient(160deg, var(--sprout), #F4F9EE); display: grid; gap: 10px; position: relative; overflow: hidden; }
.faq-art::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(227, 178, 60, .25); }
.bubble { position: relative; z-index: 1; max-width: 82%; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: #fff; font-size: 16px; font-weight: 600; color: var(--ink); box-shadow: 0 10px 24px -18px rgba(31, 42, 27, .6); animation: pop-in .5s both; }
.bubble.b2 { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--field); color: #fff; }
.bubble:nth-child(2) { animation-delay: .6s; } .bubble:nth-child(3) { animation-delay: 1.2s; } .bubble:nth-child(4) { animation-delay: 1.8s; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* Final call: full width band */
.final { padding: 0; }
.final-in { border-radius: 0; padding: clamp(64px, 8vw, 140px) 0; display: block; text-align: center; }
.final-wrap { display: grid; justify-items: center; gap: 18px; width: 100%; }
.final h2 { max-width: none; --fit-max: 72px; }
.final .one-line { max-width: none; white-space: nowrap; font-size: clamp(16px, calc(100cqi / 60), 22px); }
@media (max-width: 900px) { .final .one-line { white-space: normal; font-size: 18px; max-width: 46ch; } }

@media (max-width: 1100px) {
  .levels-head { grid-template-columns: 1fr; }
  .tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .shots { grid-template-columns: 1fr; }
  .tile.c6 { grid-column: auto; }
}

/* ===== Phones: calmer, tidier ===== */
@media (max-width: 700px) {
  .fit-keep span { white-space: nowrap; }
  .fit-keep { font-size: clamp(20px, calc(100cqi / (var(--ch, 24) * .56)), 40px); }
}
@media (max-width: 680px) {
  .section { padding: 56px 0; }
  .head { margin-bottom: 26px; }
  .hero { padding: 32px 0 56px; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
  .chips li { font-size: 14px; padding: 7px 10px; }
  .chips li::before { width: 16px; height: 16px; background-size: 10px; flex: none; }
  .toolchips { gap: 8px; }
  .toolchips li { font-size: 14px; padding: 7px 12px 7px 9px; }
  .toolchips li::before { width: 16px; height: 16px; background-size: 10px; flex: none; }
  .person, .tile, .step, .plan, .fam { padding: 20px; }
  .person p, .tile p { font-size: 16px; }
  .step::before { width: 48px; height: 48px; font-size: 22px; margin-bottom: 14px; border-radius: 14px; }
  .people, .steps, .bento, .plans, .family { gap: 12px; }
  .ribbon { padding: 16px 0; gap: 10px; }
  .ribbon-row span { font-size: 15px; padding: 7px 14px; }
  .facts b { font-size: 38px; }
  .tpl figcaption { font-size: 15px; }
  .faq summary { padding: 16px 18px; }
  .faq details p { padding: 0 18px 18px; }
  .checks li { padding: 14px 16px; grid-template-columns: 36px 1fr; gap: 12px; }
  .checks li::before { width: 36px; height: 36px; background-size: 18px; border-radius: 12px; }
}

/* FAQ: both columns end at the same height (the chat picture fills the rest) */
.faq-grid { align-items: stretch; }
.faq-grid > .head { display: flex; flex-direction: column; margin-bottom: 0; }
.faq-grid .faq-art { flex: 1; align-content: center; }
@media (max-width: 1100px) { .faq-grid .faq-art { flex: none; } }

/* ===== Illustrations ===== */
/* People cards: photo on top, icon badge overlapping */
.person { padding-top: 0; }
.person-photo { display: block; width: calc(100% + 2 * clamp(24px, 2.4vw, 36px)); max-width: none; margin: 0 calc(-1 * clamp(24px, 2.4vw, 36px)) -34px; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.person:hover .person-photo { transform: scale(1.05); }
.person .ico { position: relative; z-index: 2; margin-top: 0; border: 4px solid #fff; box-shadow: 0 8px 20px -10px rgba(31, 42, 27, .5); }
.person::after { display: none; }

/* Templates showcase */
.showcase { margin: 0; display: grid; gap: 18px; justify-items: center; }
.showcase img { width: 100%; height: auto; border-radius: 28px; box-shadow: 0 50px 90px -50px rgba(31, 42, 27, .55); transition: transform .6s; }
.showcase:hover img { transform: translateY(-6px); }
.tpl-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tpl-tags span { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--paddy); font-size: 16px; }

/* FAQ helper */
.faq-art { padding: 0; background: #E9F3DC; display: block; position: relative; min-height: 360px; }
.faq-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.faq-art::after { display: none; }
.faq-art .bubble { position: absolute; max-width: 72%; font-size: 15px; }
.faq-art .b1 { left: 16px; top: 16px; }
.faq-art .b2 { right: 16px; bottom: 16px; }
@media (max-width: 1100px) { .faq-art { aspect-ratio: 4 / 3; min-height: 0; } }

/* Safety shield */
.shield { display: block; width: clamp(200px, 22vw, 320px); height: auto; margin: 18px 0 0 -20px; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); animation: float 7s ease-in-out infinite; }
@media (max-width: 1100px) { .shield { margin: 12px auto 0; } }

/* Closing band: storefronts behind a green wash */
.final-in { position: relative; overflow: hidden; isolation: isolate; }
.final-bg { position: absolute; inset: 0; z-index: -2; background: url("/img/final-storefronts.webp") center 60% / cover no-repeat; animation: slowzoom 30s ease-in-out infinite alternate; }
.final-in::before { z-index: -1; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; background: linear-gradient(180deg, rgba(46, 91, 34, .84), rgba(63, 125, 44, .68) 55%, rgba(46, 91, 34, .9)); animation: none; }
.final-in::after { z-index: -1; }
@keyframes slowzoom { from { transform: scale(1); } to { transform: scale(1.08); } }

@media (max-width: 680px) {
  .person { padding-top: 0; }
  .person-photo { width: calc(100% + 40px); margin: 0 -20px -30px; }
}
.person-photo { height: auto; }
@media (max-width: 680px) {
  .tpl-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .tpl-tags span { text-align: center; font-size: 14px; padding: 8px 10px; }
}