@font-face { font-family: "Libre Baskerville"; src: url("/fonts/LibreBaskerville-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/LibreBaskerville-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #F6F6F4; --bg2: #EEEEEA; --card: #FFFFFF; --line: #E2E2DE; --line2: #C9C9C5;
  --ink: #17181A; --ink2: #43474B; --ink3: #62676C;
  --green: #1E6B44; --green-dark: #164F33; --green-soft: #DCE7DF; --on-green: #FFFFFF;
  --gold: #B8860B; --gold-soft: #F4EBD3;
  --foot-bg: #133D28; --foot-ink: #E4ECE6; --foot-ink2: #A9BEB0;
  --shadow: 0 1px 2px rgba(20, 30, 25, .06), 0 8px 28px rgba(20, 30, 25, .08);
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1080px;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111613; --bg2: #171E1A; --card: #1B231F; --line: #2A342E; --line2: #3A463F;
    --ink: #ECEFEC; --ink2: #C3CAC5; --ink3: #9AA49E;
    --green: #5FBF8A; --green-dark: #7FD1A3; --green-soft: #1F3328; --on-green: #0D1A12;
    --gold: #E5B84A; --gold-soft: #2E2817;
    --foot-bg: #0B100D; --foot-ink: #DCE5DF; --foot-ink2: #93A499;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-dark); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 6.5vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 4.4vw, 2rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }
.eyebrow { font: 700 .74rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin: 0 0 .9em; }
.muted { color: var(--ink3); }
.small { font-size: .88rem; }

/* header */
.top { border-bottom: 1px solid var(--line); background: var(--bg); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand:hover { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; font-size: .9rem; font-weight: 600; }
.nav a { color: var(--ink2); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--green); }
.nav .btn { padding: 8px 16px; font-size: .88rem; }
@media (max-width: 560px) {
  .nav .hide-s { display: none; }
  .top .wrap { flex-wrap: nowrap; padding-left: 16px; padding-right: 16px; }
  .brand { letter-spacing: .2em; font-size: .92rem; gap: 8px; }
  .nav { gap: 12px; flex-wrap: nowrap; }
  .nav .btn { padding: 8px 13px; white-space: nowrap; }
  .hero { padding-top: 32px; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 1.5px solid var(--green); transition: background .15s, color .15s; }
.btn.primary { background: var(--green); color: var(--on-green); }
.btn.primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--on-green); }
.btn.ghost { color: var(--green); background: transparent; }
.btn.ghost:hover { background: var(--green-soft); }
.btn.big { padding: 17px 32px; font-size: 1.06rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* hero */
.hero { padding: 48px 0 56px; overflow: hidden; }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
.hero .lede { font-size: 1.12rem; color: var(--ink2); max-width: 34em; }
.hero .note { margin-top: 14px; font-size: .86rem; color: var(--ink3); }
.phone { width: min(300px, 78vw); margin: 0 auto; padding: 10px; border-radius: 38px; background: #1B1D1F; box-shadow: var(--shadow); }
.phone img { border-radius: 29px; width: 100%; }

/* Four screens cross-fading, CSS only: the CSP allows no script. Each holds for a quarter of the cycle. */
.carousel { position: relative; }
.carousel .slide { display: block; }
.carousel .slide + .slide { position: absolute; inset: 10px; width: calc(100% - 20px); }
.carousel .slide, .captions li { animation: show 20s infinite; opacity: 0; }
.carousel .slide:nth-child(1), .captions li:nth-child(1) { animation-delay: 0s; }
.carousel .slide:nth-child(2), .captions li:nth-child(2) { animation-delay: 5s; }
.carousel .slide:nth-child(3), .captions li:nth-child(3) { animation-delay: 10s; }
.carousel .slide:nth-child(4), .captions li:nth-child(4) { animation-delay: 15s; }
@keyframes show { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
.captions { list-style: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.captions li { font-size: .82rem; font-weight: 600; color: var(--green); background: var(--bg2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; opacity: .35; animation-name: pill; }
@keyframes pill { 0% { opacity: .35; } 3% { opacity: 1; } 25% { opacity: 1; } 28% { opacity: .35; } 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .carousel .slide, .captions li { animation: none; }
  .carousel .slide:first-child, .captions li:first-child { opacity: 1; }
}
@media (min-width: 860px) {
  .hero { padding: 72px 0 80px; }
  .hero .wrap { grid-template-columns: 1.25fr 1fr; gap: 56px; }
}

/* sections */
.band { padding: 56px 0; border-top: 1px solid var(--line); }
.band.alt { background: var(--bg2); }
.band > .wrap > h2 { max-width: 22em; }
.intro { max-width: 40em; color: var(--ink2); font-size: 1.04rem; }
.grid { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 640px) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid.three { grid-template-columns: repeat(3, 1fr); } .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .grid.three { grid-template-columns: 1fr 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 8px; }
.card h3 { display: flex; gap: 10px; align-items: baseline; }
.card .n { font: 700 .8rem/1 var(--sans); color: var(--green); letter-spacing: .1em; }
.card p { color: var(--ink2); }

/* the reel: six screens, one phone
   Every step is a full screen that sticks to the top, so the one after it slides up and covers it. The phone
   sits in the same place in all six, which is what makes it read as one phone changing screen rather than six
   pictures going past. CSS only, because the site allows no script. */
.reel { padding-bottom: 0; }
.reel .intro { margin-bottom: 0; }
.scroller { list-style: none; margin: 0; padding: 0; }
.step {
  position: sticky; top: 0; min-height: 100svh;
  display: grid; align-content: center;
  background: var(--bg2); border-top: 1px solid var(--line);
  box-shadow: 0 -20px 34px -20px rgba(20, 30, 25, .22);
  padding: 32px 0;
}
@media (prefers-color-scheme: dark) { .step { box-shadow: 0 -20px 34px -16px rgba(0, 0, 0, .6); } }
.step .wrap { display: grid; justify-items: center; gap: 22px 48px; }
.step .phone { margin: 0; width: auto; padding: 8px; border-radius: 30px; }
.step .phone img { width: auto; height: min(46svh, 440px); border-radius: 22px; }
.step .say { max-width: 30em; }
.step h3 { font-size: clamp(1.2rem, 4.4vw, 1.7rem); display: flex; gap: 12px; align-items: baseline; margin-bottom: .35em; }
.step h3 .n { font: 700 .78rem/1 var(--sans); color: var(--green); letter-spacing: .12em; }
.step p { color: var(--ink2); margin: 0; font-size: .97rem; }
/* six ticks, the one for this step filled: the stack makes a still rail look like it is advancing */
.rail { display: flex; gap: 5px; margin: 0 0 16px; }
.rail i { width: 22px; height: 3px; border-radius: 2px; background: var(--line2); }
.p1 i:nth-child(1), .p2 i:nth-child(-n+2), .p3 i:nth-child(-n+3),
.p4 i:nth-child(-n+4), .p5 i:nth-child(-n+5), .p6 i { background: var(--green); }
@media (min-width: 860px) {
  .step .wrap { grid-template-columns: auto minmax(22em, 30em); justify-content: center; align-items: center; justify-items: start; }
  .step .phone img { height: min(74svh, 680px); }
  .step p { font-size: 1.04rem; }
}
/* A short screen cannot hold a phone and a paragraph, and someone who asked for less movement should not be
   handed a scroll effect at all: both get the six plainly, one after another. */
@media (prefers-reduced-motion: reduce), (max-height: 540px) {
  .step { position: static; min-height: 0; padding: 26px 0; box-shadow: none; }
  .step .phone img { height: min(70vh, 380px); }
}

figure { margin: 0; }
.shot { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; box-shadow: var(--shadow); }
.shot img { border-radius: 5px; }
figcaption { font-size: .86rem; color: var(--ink3); margin-top: 10px; padding: 0 2px; }
.collage { display: grid; gap: 20px; margin-top: 30px; align-items: start; }
.look { display: inline-block; font: 700 .64rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 4px 9px; margin: 0 8px 2px 0; }
@media (min-width: 900px) {
  .collage { grid-template-columns: repeat(12, 1fr); }
  .collage .narrow { grid-column: span 5; }
  .collage .broad { grid-column: span 7; }
  .collage .wide { grid-column: 1 / -1; }
}

/* pricing */
.tiers { gap: 14px; margin-top: 22px; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.tier.free { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.tier .tag { display: inline-block; font: 700 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green); margin-bottom: 12px; }
.tier.paid .tag { background: var(--gold-soft); color: var(--gold); }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 24px; margin: 0 0 .38em; color: var(--ink2); font-size: .94rem; line-height: 1.45; }
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .46em; width: 10px; height: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.paid .ticks li::before { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--gold); transform: none; left: 4px; top: .56em; }
.note { margin-top: 14px; }

/* install */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 1em; }
.steps li { counter-increment: s; position: relative; padding-left: 40px; margin-bottom: .8em; color: var(--ink2); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--green-soft); color: var(--green); font: 700 .82rem/27px var(--sans); text-align: center; }
.cta { text-align: center; padding: 64px 0; }
.cta p { color: var(--ink2); max-width: 32em; margin: 0 auto 24px; }
.cta .actions { justify-content: center; }

/* prose pages */
.doc { padding: 44px 0 64px; }
.doc .wrap { max-width: 760px; }
.doc h1 { margin-bottom: .3em; }
.doc .meta { color: var(--ink3); font-size: .9rem; margin-bottom: 2em; }
.doc h2 { font-size: 1.32rem; margin-top: 2.2em; padding-top: .2em; }
.doc h3 { margin-top: 1.6em; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1em; }
.doc li { margin-bottom: .45em; }
.doc li::marker { color: var(--green); }
.doc p, .doc li { color: var(--ink2); }
.doc strong { color: var(--ink); }
.summary { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r); padding: 18px 20px 4px; margin: 0 0 2em; }
.toc { background: var(--bg2); border-radius: var(--r); padding: 16px 20px; margin: 0 0 2em; font-size: .92rem; }
.toc ol { margin: .4em 0 0; columns: 2 220px; column-gap: 28px; }
.toc a { text-decoration: none; }
.table { width: 100%; overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th { font-weight: 700; color: var(--ink); background: var(--bg2); }
td { color: var(--ink2); }
tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .stack thead { display: none; }
  .stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .stack tr:last-child { border-bottom: 0; }
  .stack td { display: block; border: 0; padding: 3px 14px; }
  .stack td::before { content: attr(data-l) ": "; font-weight: 700; color: var(--ink); }
  .stack td:first-child::before { content: none; }
  .stack td:first-child { font-weight: 700; color: var(--ink); }
}
details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 0 18px; margin-bottom: 10px; }
summary { cursor: pointer; padding: 15px 0; font-weight: 600; color: var(--ink); list-style-position: outside; }
details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.contact { display: grid; gap: 14px; margin: 1.4em 0 2em; }
@media (min-width: 600px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact .card { padding-bottom: 14px; }
.contact a { font-weight: 600; word-break: break-word; }

/* 404 */
.lost { text-align: center; padding: 90px 0 110px; }
.lost .big { font: 700 clamp(4rem, 18vw, 7rem)/1 var(--serif); color: var(--green); margin-bottom: 10px; }
.lost .actions { justify-content: center; margin-top: 24px; }

/* footer */
.foot { background: var(--foot-bg); color: var(--foot-ink); padding: 44px 0 30px; font-size: .9rem; }
.foot a { color: var(--foot-ink); }
.foot a:hover { color: #FFFFFF; }
.foot .cols { display: grid; gap: 28px; }
@media (min-width: 720px) { .foot .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h2 { font: 700 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--foot-ink2); margin: 0 0 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 7px; }
.foot .brand { color: var(--foot-ink); margin-bottom: 12px; }
.foot p { color: var(--foot-ink2); }
.foot .legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 30px; padding-top: 18px; color: var(--foot-ink2); font-size: .82rem; }
.foot .legal p { margin: 0 0 .3em; }
.after { margin-top: 18px; }