/* meetlupe.com: a hand-painted house-number tile. Cobalto on crema, cempasúchil flowers.
   Fraunces (soft) for headlines, Bricolage Grotesque for everything else. */
@font-face{font-family:"Bricolage";src:url("/fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces.woff2") format("woff2");font-weight:600 900;font-display:swap}

:root{
  /* Brand: Cobalto #2f5d8c, Crema #fff7e7, Cempasúchil #f28c28, Miel #f2a93b, Tinta #1b2a3d */
  --paper:#ffffff; --panel:#fff7e7; --line:#eadcc2;
  --ink:#1b2a3d; --mute:#5c6573;
  --bug:#2f5d8c; --bug-ink:#fff7e7; --bug-deep:#244a71;
  --leaf:#f28c28; --sun:#f2a93b;
  --bubble-you:#2f5d8c; --bubble-you-ink:#fff7e7;
  --bubble-her:#ffffff;
  --head:"Fraunces",Georgia,"Times New Roman",serif;
  --shadow:0 18px 50px -24px rgba(27,42,61,.35);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101a28; --panel:#18263a; --line:#2a3a52;
    --ink:#fff3de; --mute:#b3bccb;
    --bug:#8fb6e0; --bug-ink:#101a28; --bug-deep:#b3cdea;
    --leaf:#f5a35a; --sun:#f2b65a;
    --bubble-you:#8fb6e0; --bubble-you-ink:#101a28; --bubble-her:#22344d;
    --shadow:0 18px 50px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 "Bricolage",system-ui,-apple-system,"Segoe UI",sans-serif;font-variation-settings:"opsz" 14}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:3px solid var(--bug);outline-offset:3px;border-radius:4px}

/* Bilingual: every text exists in both languages; the page shows one. */
html[data-lang="en"] [lang="es"]:not(html),html[data-lang="es"] [lang="en"]:not(html){display:none!important}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media (min-width:720px){.wrap{padding:0 32px}}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px 4px}
@media (min-width:900px){.top{padding-block:28px 0}}
.mark{display:flex;align-items:center;text-decoration:none;border-radius:8px}
.mark picture,.fleft picture{display:block}
.mark img,.mark .lupe-logo{display:block;width:174px;height:auto;overflow:visible}
@media (min-width:720px){.mark img,.mark .lupe-logo{width:232px}}

/* The logo arrives like a message: the bubble pops up from its tail, the word and flower follow, the shine is drawn,
   then the flower sways gently from side to side. Nothing moves for people who turn motion off. */
@media (prefers-reduced-motion:no-preference){
  .lupe-logo{transform-origin:var(--tipx) var(--tipy);animation:lb-pop .62s cubic-bezier(.2,.9,.25,1.25) both}
  .lupe-logo .lb-word{opacity:0;animation:lb-fade .34s .28s ease-out forwards}
  .lupe-logo .lb-flower-in{transform-box:fill-box;transform-origin:50% 60%;transform:scale(0) rotate(-40deg);animation:lb-flower .5s .5s cubic-bezier(.2,.9,.3,1.3) forwards,lb-sway 3.6s 1.05s linear infinite}
  .lupe-logo .lb-shine{stroke-dasharray:1;stroke-dashoffset:1;animation:lb-draw .4s .78s ease-out forwards}
}
@keyframes lb-pop{0%{transform:scale(0) rotate(-6deg);opacity:0}55%{transform:scale(1.07) rotate(1deg);opacity:1}78%{transform:scale(.97)}100%{transform:none;opacity:1}}
@keyframes lb-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes lb-flower{to{transform:scale(1) rotate(0)}}
@keyframes lb-sway{0.0%{transform:translateX(0.00px) rotate(0.00deg)}6.25%{transform:translateX(0.77px) rotate(3.44deg)}12.5%{transform:translateX(1.41px) rotate(6.36deg)}18.75%{transform:translateX(1.85px) rotate(8.31deg)}25.0%{transform:translateX(2.00px) rotate(9.00deg)}31.25%{transform:translateX(1.85px) rotate(8.31deg)}37.5%{transform:translateX(1.41px) rotate(6.36deg)}43.75%{transform:translateX(0.77px) rotate(3.44deg)}50.0%{transform:translateX(0.00px) rotate(0.00deg)}56.25%{transform:translateX(-0.77px) rotate(-3.44deg)}62.5%{transform:translateX(-1.41px) rotate(-6.36deg)}68.75%{transform:translateX(-1.85px) rotate(-8.31deg)}75.0%{transform:translateX(-2.00px) rotate(-9.00deg)}81.25%{transform:translateX(-1.85px) rotate(-8.31deg)}87.5%{transform:translateX(-1.41px) rotate(-6.36deg)}93.75%{transform:translateX(-0.77px) rotate(-3.44deg)}100.0%{transform:translateX(-0.00px) rotate(-0.00deg)}}
@keyframes lb-draw{to{stroke-dashoffset:0}}
.top nav{display:flex;align-items:center;gap:6px}
/* EN/ES: one switch with a knob that slides to the chosen side. Both labels keep a fixed size, so nothing else moves. */
.langs{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;width:92px;height:36px;border:1.5px solid var(--line);border-radius:999px;padding:3px;background:var(--panel)}
.langs::before{content:"";position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:999px;background:var(--bug);box-shadow:0 1px 3px rgba(27,42,61,.25);transition:transform .22s cubic-bezier(.3,.7,.2,1)}
html[data-lang="es"] .langs::before{transform:translateX(100%)}
.langs button{position:relative;z-index:1;font:inherit;font-size:14px;font-weight:700;letter-spacing:.02em;border:0;background:transparent;color:var(--mute);padding:0;border-radius:999px;cursor:pointer;transition:color .22s}
.langs button[aria-pressed="true"]{color:var(--bug-ink)}
@media (prefers-reduced-motion:reduce){.langs::before,.langs button{transition:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:650;font-size:17px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.primary{background:var(--bug);color:var(--bug-ink)}
.btn.primary:hover{background:var(--bug-deep)}
.btn.quiet{border-color:var(--ink)}
.btn.small{min-height:40px;padding:0 16px;font-size:15px}
.top .btn.small{min-width:132px}
@media (max-width:520px){.top .btn.small{display:none}}

/* Hero */
.hero{display:grid;gap:40px;padding-block:28px 72px;align-items:center}
@media (min-width:900px){.hero{grid-template-columns:1.05fr .95fr;gap:56px;padding-block:40px 96px}}
.hero h1{margin:0;font-family:var(--head);font-weight:900;font-variation-settings:"opsz" 144;font-size:clamp(42px,7.6vw,84px);line-height:1;letter-spacing:-.015em;color:var(--bug)}
.hero h1 .soft{display:block;font-family:"Bricolage",system-ui,sans-serif;font-weight:350;font-stretch:100%;font-variation-settings:"opsz" 14;color:var(--mute);font-size:.5em;line-height:1.15;letter-spacing:-.005em;margin-top:.5em;max-width:22ch}
.hero p.lede{font-size:clamp(18px,2.1vw,21px);max-width:38ch;margin:24px 0 28px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* The conversation */
.phone{background:var(--panel);border-radius:28px;padding:18px;box-shadow:var(--shadow);max-width:440px;width:100%;justify-self:center}
@media (min-width:900px){.phone{justify-self:end}}
.phone .who{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.phone .who b{font-size:16px}
.phone .who small{display:block;color:var(--mute);font-size:13px;line-height:1.2}
.avatar{width:36px;height:36px;border-radius:9px;flex:none}
.chat{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.chat li{max-width:86%;padding:10px 14px;border-radius:18px;font-size:15.5px;line-height:1.45}
.chat .you{align-self:flex-end;background:var(--bubble-you);color:var(--bubble-you-ink);border-bottom-right-radius:6px}
.chat .her{align-self:flex-start;background:var(--bubble-her);border-bottom-left-radius:6px}
.chat .voice{display:flex;align-items:center;gap:8px}
.chat .voice svg{width:15px;height:15px;flex:none;opacity:.8}
.chat ol{margin:6px 0 0;padding-left:20px}
.chat .card{align-self:flex-start;background:var(--bubble-her);border:2px solid var(--leaf);border-radius:16px;padding:12px 14px;max-width:92%}
.card .row{display:flex;justify-content:space-between;gap:16px;font-size:14.5px}
.card .row+.row{margin-top:2px}
.card .row span{color:var(--mute)}
.card .confirm{margin-top:10px;display:flex;gap:8px}
.card .confirm span{flex:1;text-align:center;border-radius:999px;padding:7px 0;font-weight:650;font-size:14px}
.card .confirm .yes{background:var(--bug);color:var(--bug-ink)}
.card .confirm .no{border:1.5px solid var(--line);color:var(--mute)}
.phone figcaption{color:var(--mute);font-size:13.5px;margin:14px 6px 2px}

@media (prefers-reduced-motion:no-preference){
  .js .chat>li{opacity:0;transform:translateY(8px)}
  .js .chat>li.on{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
}

/* Sections */
section{padding:72px 0;border-top:1px solid var(--line)}
section h2{margin:0 0 14px;font-family:var(--head);font-weight:800;font-variation-settings:"opsz" 96;font-size:clamp(32px,4.6vw,52px);line-height:1.05;letter-spacing:-.01em;max-width:20ch;color:var(--bug)}
section .intro{color:var(--mute);font-size:19px;max-width:52ch;margin:0 0 40px}

/* A day with Lupe: a real timeline */
.day{list-style:none;margin:0;padding:0;display:grid;gap:0}
.day li{display:grid;grid-template-columns:78px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:720px){.day li{grid-template-columns:120px 1fr 1fr;gap:28px;align-items:baseline}}
.day time{font-family:var(--head);font-weight:800;font-size:24px;color:var(--bug);font-variant-numeric:tabular-nums}
.day .said{font-weight:650;font-size:19px}
.day .did{color:var(--mute);grid-column:2}
@media (min-width:720px){.day .did{grid-column:auto}}

/* Two-column feature text */
.split{display:grid;gap:40px}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}}
.points{list-style:none;margin:0;padding:0}
.points li{padding:16px 0;border-top:1.5px solid var(--ink)}
.points li:last-child{border-bottom:1.5px solid var(--ink)}
.points b{display:block;font-size:19px;font-weight:700;margin-bottom:2px}
.points span{color:var(--mute)}

/* Founding businesses */
.founding{position:relative;overflow:hidden;background:#2f5d8c;color:#fff7e7;border-radius:28px;padding:40px 24px;border:0;margin:24px 0 72px}
.founding h2{color:inherit}
@media (min-width:720px){.founding{padding:56px}}
.founding h2{max-width:18ch}
.founding p{font-size:19px;max-width:46ch;margin:0 0 28px}
.founding .btn{background:#fff7e7;color:#2f5d8c}
.founding .btn:hover{opacity:.92}
.founding :focus-visible{outline-color:#fff7e7}

/* FAQ */
.faq>*{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-weight:680;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--bug);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:var(--mute);max-width:62ch}

footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--mute);font-size:15px}
footer .fmark{width:84px;height:auto}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
footer .fleft{display:flex;align-items:center;gap:14px}
footer nav{display:flex;gap:20px;flex-wrap:wrap}

/* Text pages (privacy, support) */
.doc{padding-block:24px 72px}
.doc>*{max-width:720px}
.doc h1{font-family:var(--head);font-weight:900;font-variation-settings:"opsz" 144;font-size:clamp(36px,6vw,56px);line-height:1.05;margin:16px 0 8px;letter-spacing:-.01em;color:var(--bug)}
.doc .updated{color:var(--mute);margin:0 0 32px}
.doc h2{font-family:var(--head);font-size:24px;font-weight:800;margin:36px 0 8px}
.doc p,.doc li{max-width:66ch}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}

/* Intake form (/start) */
.intake{padding-block:16px 72px}
.intake>*{max-width:760px}
.intake h1{font-family:var(--head);font-weight:900;font-variation-settings:"opsz" 144;font-size:clamp(36px,6vw,56px);line-height:1.05;letter-spacing:-.01em;margin:16px 0 12px;color:var(--bug)}
.intake-head p{color:var(--mute);font-size:18px;margin:0 0 32px}
.intake fieldset{border:0;border-top:1.5px solid var(--ink);margin:0;padding:24px 0 32px}
.intake legend{font-family:var(--head);font-weight:800;font-size:26px;padding:0;margin-bottom:16px;float:left;width:100%}
.intake legend+*{clear:both}
.fgrid{display:grid;gap:16px 20px}
@media (min-width:720px){.fgrid{grid-template-columns:1fr 1fr}}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.f.wide{margin-top:20px}
.f>span{font-weight:650}
.f small,.note{color:var(--mute);font-size:14.5px}
.intake input:not([type=radio]):not([type=checkbox]),.intake textarea{font:inherit;font-size:17px;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.intake textarea{resize:vertical;min-height:96px}
.intake input:focus,.intake textarea:focus{outline:none;border-color:var(--bug);box-shadow:0 0 0 3px color-mix(in srgb,var(--bug) 22%,transparent)}
.intake [aria-invalid="true"]{border-color:var(--bug)!important}
.choices{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.choices .q{width:100%;margin:0 0 4px;font-weight:650}
.choices label{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;font-size:16px;min-height:44px}
.choices label:has(input:checked){border-color:var(--bug);background:color-mix(in srgb,var(--bug) 9%,transparent)}
.choices input{accent-color:var(--bug);width:18px;height:18px;margin:0}
.choices .note{width:100%;margin-top:4px}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:24px;font-size:16px}
.consent input{accent-color:var(--bug);width:20px;height:20px;margin-top:3px;flex:none}
.intake .err{color:var(--bug);font-weight:600;min-height:1.6em;margin:8px 0}
.intake .btn.primary{min-width:240px}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.thanks{padding:32px 0}
.thanks p{font-size:19px;max-width:52ch}
.founding .alt{margin:18px 0 0;font-size:16px}
.founding .alt a{color:inherit}