/* the real Crimson italic (the page used a slanted roman), and size-matched fallbacks so a failed web
   font keeps the same line breaks (measured: Crimson is 0.889 of Georgia's width, italic 0.803) */
@font-face{font-family:Crimson;src:url('/assets/fonts/crimson-pro-latin-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Crimson Fallback";src:local("Georgia");size-adjust:88.9%}
@font-face{font-family:"Crimson Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:80.3%}
/* Flora — product page. Personality: a small bright creature in a dark room; warm, alive, cheeky.
   One idea: her face. Warm near-black ground, Flora's own cyan as the brand (committed to one full
   surface: privacy), amber as the single accent, one radius band, one glow and no box shadows,
   no cards — sections separate by space and a hairline. */
.page-flora{
  --serif:Crimson,"Crimson Fallback",Georgia,serif;
  --ink:#14110e; --panel:#1c1814; --line:rgba(236,224,208,.14);
  --text:#f1ebe3; --muted:#bdb2a4; --accent:#34e0e8; --gold:#ffc46b;
  --flora-cyan:#34e0e8; --flora-cyan-deep:#0f5d61; --flora-on-cyan:#062022;
  --radius:22px; --section:clamp(46px,4.4vw,62px);
  background:var(--ink)
}
.page-flora .btn-primary{background:var(--flora-cyan);border-color:var(--flora-cyan);color:var(--flora-on-cyan)}
.page-flora .btn-primary:hover{background:#6ff0f5;border-color:#6ff0f5}
.page-flora a:focus-visible,.page-flora .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* on the one cyan surface a gold ring disappears: dark ring there */
.page-flora .flora-privacy a:focus-visible{outline-color:var(--flora-on-cyan)}
/* the site header and footer sit on Flora's warm ground, not the studio's blue-black */
.page-flora .site-nav{background:var(--ink)}
.page-flora .studio-footer{background:#0f0d0a}
.page-flora .nav-links a{color:#cbbfb1}
.page-flora .nav-links a:hover,.page-flora .nav-links a[aria-current]{color:var(--text)}
@media (max-width:900px){.page-flora .nav-links{background:var(--ink)}}
.page-flora .footer-top p{color:#b3a595}
.page-flora .footer-links{color:#cbbfb1}
.page-flora .footer-bottom{color:#a39485}

/* ---- hero: the face ---- */
.flora-hero{padding:clamp(40px,6vw,88px) 0 var(--section);border-bottom:1px solid var(--line)}
.flora-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.flora-hero h1{margin:22px 0 28px;font-size:clamp(3.4rem,5.6vw,5.4rem);line-height:1;letter-spacing:-.045em}
.flora-hero h1 em{color:var(--flora-cyan);font-style:italic}
.flora-lede{max-width:34rem;margin:0;color:var(--muted);font-size:1.125rem;line-height:1.75}
.flora-actions{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;margin-top:40px}
.flora-download{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;width:auto;margin:0;min-height:64px;padding:12px 28px;border-radius:var(--radius);font-weight:700;font-size:1.05rem}
.flora-download small{font-weight:500;font-size:.8rem;opacity:.85}
.flora-qr{display:flex;align-items:center;gap:18px;margin-top:36px;max-width:26rem}
.flora-qr img{flex:none;width:104px;height:104px;border-radius:var(--radius)}
.flora-qr p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
/* the QR is for people on a computer: hidden on touch screens and narrow windows */
@media (hover:none),(max-width:820px){.flora-qr{display:none}}
.flora-phones{justify-self:center;margin:0;width:min(100%,340px);display:grid;justify-items:center;gap:14px;
  background:radial-gradient(closest-side at 50% 42%,rgba(52,224,232,.16),transparent)}
.flora-phone{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid rgba(236,224,208,.22);background:#060707}
.flora-phones figcaption{color:var(--muted);font-size:.85rem;line-height:1.4;text-align:center}

/* ---- bands: one idea each, narrow measure, lots of air ---- */
.flora-band{padding:var(--section) 0;border-bottom:1px solid var(--line)}
/* the owner's rule: as little scrolling as possible (≤ 4.4 screens on desktop) — wide sections use columns */
.flora-wide{max-width:none}
.flora-band h2,.flora-privacy h2{margin:0 0 36px;font-size:clamp(2.2rem,3.6vw,3.25rem)}
.flora-body{max-width:38rem;margin:0 0 32px;color:var(--muted);font-size:1.0625rem;line-height:1.8}
.flora-list{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px}
.flora-list div{padding-top:24px;border-top:1px solid var(--line)}
.flora-list dt,.flora-steps h3,.flora-privacy h3,.flora-log-title{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.2;letter-spacing:-.02em}
.flora-list dt,.flora-steps h3,.flora-log-title{color:var(--text)}
.flora-list dt{margin-bottom:10px}
.flora-says dt{color:var(--flora-cyan)}
.flora-list dd{margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.75}

.flora-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px}
.flora-steps li{counter-increment:step;display:grid;grid-template-columns:4.5rem minmax(0,1fr);column-gap:24px;align-content:start}
.flora-steps li::before{content:counter(step);grid-row:span 3;font-family:var(--serif);font-size:4rem;line-height:.9;color:var(--gold);letter-spacing:-.04em}
.flora-steps h3{margin:4px 0 10px}
.page-flora main a.flora-step-download{grid-column:2;justify-self:start;margin-top:18px}
.flora-steps p{margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.75}
.page-flora main a:not(.btn):not(.text-link){color:var(--flora-cyan);text-underline-offset:3px}

/* ---- privacy: the one full cyan surface ---- */
.flora-privacy{padding:var(--section) 0;background:var(--flora-cyan);color:var(--flora-on-cyan)}
.flora-privacy h2{color:var(--flora-on-cyan)}
.flora-privacy-cols{display:grid;gap:48px}
.flora-privacy h3{margin:0 0 16px}
.flora-privacy ul{margin:0;padding-left:1.1em;display:grid;gap:14px;font-size:1.0625rem;line-height:1.7}
.flora-privacy-note{margin:32px 0 0;padding-top:24px;border-top:1px solid rgba(6,32,34,.35);font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.3;letter-spacing:-.02em}
/* must out-rank the main-link rule above, or the link turns cyan on cyan */
.page-flora main .flora-privacy a:not(.btn):not(.text-link){color:var(--flora-on-cyan);font-weight:700;text-decoration:underline}

/* ---- updates ---- */
.flora-updates-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px 72px;align-items:start}
.flora-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
.flora-facts div{padding-top:16px;border-top:1px solid var(--line)}
.flora-facts .flora-hash{grid-column:1/-1}
.flora-facts dt{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.flora-facts dd{margin:6px 0 0;font-size:1.125rem;color:var(--text)}
.flora-facts code{display:block;font-size:.9rem;line-height:1.6;overflow-wrap:normal;word-break:normal;color:var(--gold)}
.flora-log-title{margin:0 0 20px}
.flora-verify{margin:18px 0 0;color:var(--muted);font-size:.9rem;line-height:1.6}
.flora-verify code{color:var(--text);font-size:.85rem}
.flora-log{margin:0;padding-left:1.1em;display:grid;gap:10px;color:var(--muted);font-size:1.0625rem;line-height:1.7}

@media (max-width:1020px){
  .flora-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flora-updates-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .flora-hero-grid{grid-template-columns:minmax(0,1fr)}
  .flora-phones{width:min(100%,380px);justify-self:center}
  .flora-hero h1{font-size:clamp(2.5rem,10.5vw,3.4rem);margin:16px 0 20px}
  .flora-actions{margin-top:28px}
  .flora-list{grid-template-columns:1fr;gap:28px}
  .flora-steps{grid-template-columns:1fr;gap:36px}
  .flora-privacy-cols{grid-template-columns:1fr;gap:32px}
  .flora-updates-grid{gap:40px}
}
@media (max-width:480px){
  .flora-phones{width:100%}
  .flora-phones figcaption{margin-top:8px;font-size:.8125rem}
  .flora-band h2,.flora-privacy h2{margin-bottom:28px;font-size:1.9rem}
  .flora-list{gap:20px}
  .flora-list div{padding-top:18px}
  .flora-list dt,.flora-steps h3,.flora-privacy h3,.flora-log-title{font-size:1.35rem}
  .flora-list dt{margin-bottom:6px}
  .flora-steps{gap:28px}
  .flora-privacy ul,.flora-log{gap:8px}
  .flora-privacy ul,.flora-list dd,.flora-steps p,.flora-body,.flora-log{font-size:1rem;line-height:1.6}
  .flora-facts{gap:14px 20px}
  .flora-facts code{font-size:.8125rem;line-height:1.55}
  .flora-steps li{grid-template-columns:3rem minmax(0,1fr);column-gap:14px}
  .flora-steps li::before{font-size:2.8rem}
  .flora-download{width:100%}
}

/* her eyes, small, beside "Say it": the same blink as the app */
.flora-says-title{display:flex;align-items:center;gap:.35em}
.flora-mini{flex:none;width:1.15em;height:auto}
.flora-mini-eyes rect{fill:var(--flora-cyan)}
.flora-mini-eyes{transform-origin:60px 34px;animation:flora-blink 2.2s 1s 2}
.flora-mini-mouth{fill:var(--gold)}
@keyframes flora-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@media (prefers-reduced-motion:reduce){.flora-mini-eyes{animation:none}}

/* code in a real monospace, and a command never breaks in the middle */
.page-flora code{font-family:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"Roboto Mono",monospace}
.flora-verify code{white-space:nowrap}

/* the two privacy lists hold very different amounts of text */
@media (min-width:821px){.flora-privacy-cols{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}

/* the open phone menu dims the page under it, so its edge never cuts through a line */
@media (max-width:900px){.page-flora .nav-links.open::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(20,17,14,.78)}}

/* measure: no line past ~70 characters */
.flora-privacy ul{max-width:35rem}
.flora-list dd{max-width:34rem}
.flora-privacy-note{max-width:26rem}

/* the app's own icon beside its name */
.flora-eyebrow{display:inline-flex;align-items:center;gap:10px}
.flora-icon{width:28px;height:28px}   /* the SVG carries its own rounded square */

/* a second way to download, after the facts */
.page-flora main a.flora-end-download{margin-top:28px}

/* her face bigger on a computer; the picture element is only a wrapper */
@media (min-width:821px){.flora-phones{width:min(100%,360px)}}
/* one real chat: her face and the exchange on wider screens, the exchange alone on phones (each
   picture carries its own alt text; display:none also drops the other from the accessibility tree) */
.flora-shot-phone,.flora-eyes-phone{display:none}
.flora-phones picture{display:contents}
.flora-phones source{display:none}   /* else each <source> is an empty grid item and adds a gap */
@media (max-width:480px){.flora-shot-wide{display:none}.flora-shot-phone{display:block}
  .flora-phones{gap:0}
  .flora-eyes-phone{display:block;width:96px;height:auto;margin:0 auto -18px;position:relative;z-index:1;border-radius:var(--radius);border:1px solid rgba(236,224,208,.22);background:#060808}}

/* the icon leads the eyebrow, so no dash (it also kept the line from fitting at 360) */
.page-flora .flora-eyebrow::before{display:none}

/* her moods, drawn like the app, sitting on each phrase's rule */
.flora-says div{position:relative}
.flora-mood{position:absolute;top:-15px;right:0;width:46px;height:30px;padding-left:10px;background:var(--ink)}
.flora-mood rect{fill:var(--c)}
.flora-mood .m{opacity:.85}
.flora-mood .p{fill:#04080c}

/* what Android asks for sits under the changelog */
.flora-asks{margin-top:28px;grid-template-columns:minmax(0,1fr)}
@media (max-width:480px){.flora-asks{margin-top:18px}.flora-list{gap:16px}.flora-list div{padding-top:16px}.flora-asks dd{font-size:1rem;line-height:1.6}.flora-asks-list{gap:4px}}

/* the smallest phones: "She remembers you." stays on one line (no lone "you.") */
@media (max-width:340px){.flora-hero h1{font-size:2.25rem}}

/* phones: the lede one step smaller, so her eyes are in the first view at 375 */
@media (max-width:480px){.flora-lede{font-size:1.0625rem;line-height:1.6}}
@media (max-width:480px){.page-flora{--section:30px}}

/* links in running text are underlined, not only coloured (WCAG 1.4.1) */
.page-flora main .flora-steps p a{text-decoration:underline;text-decoration-thickness:1px}

/* what Android asks for: set like the changelog beside it, one line per ask */
.flora-asks dd{font-size:1.0625rem;line-height:1.75;color:var(--muted)}
.flora-asks-list{margin:0;padding-left:1.1em;display:grid;gap:6px}

/* no lone last word under her picture */
.flora-phones figcaption{text-wrap:balance}
.flora-asks-list b{font-weight:600}
.flora-download span,.flora-download small{line-height:1.35}

/* the fingerprints are there for whoever checks; folded, they no longer outshout size and version */
.flora-check{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.flora-check summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;color:var(--text);font-size:.95rem;list-style:none}
.flora-check summary::-webkit-details-marker{display:none}
.flora-check summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--flora-cyan);border-bottom:2px solid var(--flora-cyan);transform:rotate(-45deg);transition:transform .2s}
.flora-check[open] summary::before{transform:rotate(45deg)}
.flora-check .flora-facts{margin-top:10px}
@media (prefers-reduced-motion:reduce){.flora-check summary::before{transition:none}}

/* the privacy columns reach the same right edge as every other section */
@media (min-width:821px){.flora-privacy-cols{grid-template-columns:minmax(0,1fr) minmax(0,36rem);justify-content:space-between;column-gap:96px}.flora-privacy ul{max-width:none}}

/* the text link answers the pointer */
.page-flora .flora-actions .text-link:hover{border-bottom-color:var(--flora-cyan)}

/* a phone menu button a thumb finds; shown only when the site script is there to run it */
.page-flora .menu-toggle{min-height:44px;padding:0 4px}
html:not(.flora-menu-ready) .page-flora .menu-toggle{display:none}
.flora-menu-link{display:none}
@media (max-width:900px){html:not(.flora-menu-ready) .page-flora .flora-menu-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font-size:14px}}
/* the page under an open menu does not scroll */
html.flora-menu-open,html.flora-menu-open body{overflow:hidden}

/* phones: the page ends with a Download too, full width like the one in step 1 */
@media (max-width:480px){.page-flora main a.flora-end-download{display:flex;width:100%;margin-top:18px}}

/* the phone menu: each link a thumb-sized row (a touch in a gap still goes to the nearest link;
   that is the browser's own touch adjustment) */
@media (max-width:900px){.page-flora .nav-links a{display:block;padding:8px 0}.page-flora .nav-links.open{row-gap:4px}}

/* the text link's rule is warm and sits close to its words */
.page-flora .flora-actions .text-link{padding:6px 0 3px;border-bottom-color:rgba(236,224,208,.4)}
/* what to do if the install is refused, under the four steps */
.flora-steps-note{margin:22px 0 0;max-width:none;color:var(--muted);font-size:.95rem;line-height:1.6}
@media (max-width:480px){.flora-steps-note{margin-top:20px;font-size:.9375rem}}

/* F4: the step-1 Download spans the step, so its label stays on one line at 320 */
@media (max-width:480px){.page-flora main a.flora-step-download{grid-column:1/-1;width:100%}}

/* F5: tablets fit two "Say it" phrases side by side */
@media (min-width:600px) and (max-width:820px){.flora-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 36px}}

/* what is sent: each line leads with when and where to, so it scans on the cyan band */
.flora-privacy li strong{font-weight:700}

/* the italic line breathes between its words */
.flora-hero h1 em{word-spacing:.08em}

/* phones: the numeral sits beside its heading and the words below use the full width
   (in its own column the text wrapped into extra lines and pushed the page past 7 screens) */
@media (max-width:480px){
  .flora-steps li{grid-template-columns:2.4rem minmax(0,1fr);column-gap:12px}
  .flora-steps li::before{grid-row:auto;align-self:baseline;font-size:2.6rem}
  .flora-steps h3{margin:0;align-self:baseline}
  .flora-steps li>p{grid-column:1/-1;margin-top:8px}
}

/* no lone last word in the pull-quote */
.flora-privacy-note{text-wrap:balance}

/* computers: her picture ends on the same right edge as every section below it */
@media (min-width:821px){.flora-phones{justify-self:end}}

/* computers: the lede and the QR note reach toward her picture (the band between them was 346 px) */
@media (min-width:821px){.flora-lede{max-width:40rem}.flora-qr{max-width:34rem}}

/* the four facts in one row wherever they fit */
@media (min-width:481px){.flora-facts:not(.flora-asks){grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:0 36px}}

/* phones: the facts as one wrapped line of label and value; the "Say it" rhythm a step tighter */
@media (max-width:480px){
  .flora-facts:not(.flora-asks){display:flex;flex-wrap:wrap;gap:10px 22px;border-top:1px solid var(--line);padding-top:14px}
  .flora-facts:not(.flora-asks) div{border:0;padding:0}
  .flora-facts:not(.flora-asks) dt{font-size:.72rem}
  .flora-facts:not(.flora-asks) dd{margin-top:2px;font-size:1rem}
  .flora-list{gap:12px}.flora-list div{padding-top:12px}
}

/* the cyan band: the pull-quote holds the bottom of the left column, level with the end of the list */

/* section headings: tight tracking, but the words stay apart */
.flora-band h2,.flora-privacy h2{word-spacing:.06em}

/* the smallest phones: the verify command may wrap rather than spill (WCAG 1.4.12) */
@media (max-width:340px){.flora-verify code{white-space:normal;overflow-wrap:anywhere}}

/* the pull-quote leads the left column, so the two columns end together */
.flora-privacy-note{margin:0 0 36px;padding:0 0 24px;border-top:0;border-bottom:1px solid rgba(6,32,34,.35)}

/* F6: a link in running text is underlined, not only coloured (WCAG 1.4.1) */
.page-flora main .flora-steps-note a{text-decoration:underline;text-decoration-thickness:1px}

/* F10: one rule across the whole facts row; phones get a clean 2 x 2 */
@media (min-width:481px){.flora-facts:not(.flora-asks){border-top:1px solid var(--line);padding-top:16px}.flora-facts:not(.flora-asks) div{border-top:0;padding-top:0}}
@media (max-width:480px){.flora-facts:not(.flora-asks){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}}

/* F12: no lone last words; a Setup path never splits across lines */
.page-flora h2,.page-flora h3{text-wrap:balance}
.page-flora main p,.page-flora main li,.page-flora main dd{text-wrap:pretty}
/* (a Setup path keeps "Setup > first word" together with non-breaking spaces in the markup) */

/* F8: phones already have a Download at the top and at the end; step 1 says where to tap */
@media (max-width:480px){.page-flora .flora-log-title,.page-flora .flora-log{display:none}}

/* F19: phones on their side: the Download stays in the first view */
@media (orientation:landscape) and (max-height:500px){
  .page-flora .flora-hero{padding-top:18px}
  .page-flora .flora-hero-grid{grid-template-columns:minmax(0,1fr)}
  .page-flora .flora-phones{justify-self:center}
  .page-flora .flora-hero h1{font-size:2.4rem;margin-bottom:12px}
  .page-flora .flora-lede{font-size:1rem;line-height:1.5;margin-bottom:0;max-width:none}
  .page-flora .flora-hero h1{margin-top:8px}
  .page-flora .flora-actions{margin-top:14px}
  .page-flora .flora-eyebrow{display:none}   /* the headline and the Download already say it */
}

/* the fuller privacy list, within the owner's height limits */
.flora-privacy ul{gap:10px}
@media (min-width:821px){.flora-privacy-note{font-size:1.75rem}}
@media (max-width:480px){.flora-privacy-note{font-size:1.2rem;margin-bottom:22px;padding-bottom:16px}}

/* the data band: deep teal with light text, so the Download stays the brightest thing on the page
   (website critique round 11: the band used the button's own cyan and outweighed it) */
.flora-privacy{background:#0c3a3e;color:#dcefef}
.flora-privacy h2,.flora-privacy h3,.flora-privacy-note,.flora-privacy strong{color:#f3fbfb}
.flora-privacy-note{border-bottom-color:rgba(243,251,251,.28)}
.page-flora main .flora-privacy a:not(.btn):not(.text-link){color:var(--flora-cyan)}
.page-flora .flora-privacy a:focus-visible{outline-color:var(--gold)}
.flora-privacy ul li::marker{color:var(--flora-cyan)}

/* F2: tablets and phones on their side keep two readable columns in the data band */
@media (min-width:821px) and (max-width:1199px){.flora-privacy-cols{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:48px}}

/* F12: the facts sit 2 x 2 where four in a row would wrap */
@media (min-width:821px) and (max-width:1199px){.page-flora .flora-facts:not(.flora-asks){grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 36px}}

/* F9: a little less air above the hero on wide screens */
@media (min-width:1200px){.page-flora .flora-hero{padding-top:56px}}

/* F5: a real Setup screen beside the four steps, wide screens only */
.flora-setup-shot{display:none}
@media (min-width:1200px){
  .flora-steps-wrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px;align-items:start}
  .flora-setup-shot{display:block}
  .flora-setup-shot img{width:240px;height:auto;border-radius:var(--radius);border:1px solid rgba(236,224,208,.22)}
}

/* F6: phones on their side from 840 px: her face beside the copy */
@media (orientation:landscape) and (max-height:500px) and (min-width:840px){
  .page-flora .flora-hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start}
  .page-flora .flora-phones{width:auto;justify-self:end}
  .page-flora .flora-phone.flora-shot-wide{width:auto;max-height:calc(100vh - 40px)}
}

/* F11: the "Set her up" jump lands on the heading (this page's header does not stick) */
html:has(.page-flora){scroll-padding-top:16px}

/* the Setup screen beside the steps costs no height: the step numerals and gutter give up the room */
@media (min-width:1200px){.flora-steps{column-gap:40px}.flora-steps li{grid-template-columns:3rem minmax(0,1fr);column-gap:14px}.flora-steps li::before{font-size:3.2rem}}

/* round 14: the footer's left edge lines up with the content (it sat 4 px in on phones, 10 px on tablets) */
@media (max-width:1150px){.page-flora .studio-footer{padding-left:32px;padding-right:32px}}
@media (max-width:600px){.page-flora .studio-footer{padding-left:20px;padding-right:20px}}

/* round 14: the second heading in the left column gets the same air as a section start */
.page-flora .flora-privacy-cols ul + h3{margin-top:20px}

/* round 15: phones on their side: the face card never taller than the screen; a smaller headline at 320 high */
@media (orientation:landscape) and (max-height:500px){
  .page-flora .flora-phone.flora-shot-wide{max-height:calc(100vh - 32px);width:auto}
}
@media (orientation:landscape) and (max-height:340px){
  .page-flora .flora-hero{padding-top:10px}
  .page-flora .flora-hero h1{font-size:1.9rem;margin-bottom:8px}
  .page-flora .flora-lede{font-size:.95rem;line-height:1.45}
  .page-flora .flora-actions{margin-top:10px}
}

/* round 16 */
.page-flora .nw{white-space:nowrap}
.page-flora main li.flora-wrap{text-wrap:wrap}
/* F2: "8+" no longer drops to its own line in the Download buttons at 320 */
@media (max-width:340px){.page-flora .flora-download small{font-size:.74rem}}
/* F4: the four facts sit 2 x 2 where four in a row wrap */
@media (min-width:481px) and (max-width:680px){.page-flora .flora-facts:not(.flora-asks){grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}}
/* F5: "Check the file" now follows the last Download */
.page-flora .flora-log + .flora-check,.page-flora .flora-end-download + .flora-check{margin-top:28px}
/* F7: tablets in landscape (1000 px and up) show the Setup screen beside the steps too; narrower, the steps need the room */
@media (min-width:1000px) and (max-width:1199px){
  .flora-steps-wrap{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:32px;align-items:start}
  .flora-setup-shot{display:block}
  .flora-setup-shot img{width:200px;height:auto;border-radius:var(--radius);border:1px solid rgba(236,224,208,.22)}
}
/* F8: the "Set her up" link reads as a link */
.page-flora .flora-actions .text-link{font-size:.95rem;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;border-bottom:0;min-height:48px;display:inline-flex;align-items:center}

/* round 17 */
/* F1: every step Download is the one-line-meta button on tablets and small laptops */
@media (min-width:768px) and (max-width:1199px){
  .page-flora .flora-steps li{grid-template-columns:2.8rem minmax(0,1fr);column-gap:12px}
  .page-flora .flora-steps li::before{grid-row:auto;align-self:baseline;font-size:3rem}
  .page-flora .flora-steps h3{margin:0;align-self:baseline}
  .page-flora .flora-steps li>p{grid-column:1/-1;margin-top:8px}
  .page-flora main a.flora-step-download{grid-column:1/-1}
}
/* F7: the Setup screen shows beside the steps from 768 (steps in one column below 1000) */
@media (min-width:768px) and (max-width:999px){
  .flora-steps-wrap{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:32px;align-items:start}
  .page-flora .flora-steps{grid-template-columns:1fr;gap:36px}
  .flora-setup-shot{display:block}
  .flora-setup-shot img{width:200px;height:auto;border-radius:var(--radius);border:1px solid rgba(236,224,208,.22)}
}
/* F2: the fingerprint no longer touches the next label */
.page-flora .flora-check .flora-facts{row-gap:14px}
/* F4: a Setup path in the data band reads like the others */
.flora-privacy li b{font-weight:700;color:#f3fbfb}
/* F5: phones see Setup's Brain row in step 3; the coffee card makes room */
.flora-brain-shot{display:none}
@media (max-width:767px){
  .flora-brain-shot{display:block;grid-column:2;margin-top:14px}
  .flora-brain-shot img{display:block;width:100%;max-width:420px;height:auto;border-radius:12px;border:1px solid rgba(236,224,208,.22)}
}
@media (max-width:480px){.flora-brain-shot{grid-column:1/-1}.flora-ask-memory{display:none}}
/* step 4: the face comes back, after the words */
.flora-hello{display:flex;align-items:center;gap:.4em}
.flora-hello .flora-mini{width:1.1em}
/* the data band as a label: each list led by a face in its own colour (wide screens; plain bullets on phones) */
@media (min-width:821px){
  .flora-privacy ul.flora-kept,.flora-privacy ul.flora-sent,.flora-privacy ul.flora-google{list-style:none;padding-left:0}
  .flora-privacy ul.flora-kept li,.flora-privacy ul.flora-sent li,.flora-privacy ul.flora-google li{position:relative;padding-left:40px}
  .flora-privacy ul.flora-kept li::before,.flora-privacy ul.flora-sent li::before,.flora-privacy ul.flora-google li::before{content:"";position:absolute;left:0;top:.36em;width:28px;height:19px;background:no-repeat center/contain}
  .flora-privacy ul.flora-kept li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cg fill='%23ffd56b'%3E%3Crect x='14' y='6' width='12' height='22' rx='5'/%3E%3Crect x='34' y='6' width='12' height='22' rx='5'/%3E%3Crect x='20' y='32.5' width='20' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E")}
  .flora-privacy ul.flora-sent li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cg fill='%235ff0f7'%3E%3Crect x='14' y='6' width='12' height='22' rx='5'/%3E%3Crect x='34' y='6' width='12' height='22' rx='5'/%3E%3Crect x='20' y='32.5' width='20' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E")}
  .flora-privacy ul.flora-google li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cg fill='%237aa8ff'%3E%3Crect x='14' y='6' width='12' height='22' rx='5'/%3E%3Crect x='34' y='6' width='12' height='22' rx='5'/%3E%3Crect x='20' y='32.5' width='20' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E")}
}

/* round 18 */
/* the hero face blinks, as she does in the app (lids in her halo colour; invisible at rest) */
.flora-live{position:relative;display:block;line-height:0}
.flora-live-wide{width:fit-content;max-width:100%}
.flora-live .flora-lids{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);pointer-events:none;overflow:hidden;z-index:2}
.flora-lids .blink{opacity:0;animation:flora-blink-on 10.4s -2.76s infinite}
.flora-lids .cover{fill:#0f353a}
.flora-lids .eye{fill:#2bb7be;transform-box:fill-box;transform-origin:50% 50%;animation:flora-blink-eye 10.4s -2.76s infinite}
.flora-lids .pupil{fill:#04080c;animation:flora-blink-pupil 10.4s -2.76s infinite}
@keyframes flora-blink-on{0%,39.95%{opacity:0}40%,42.5%{opacity:1}42.55%,94.95%{opacity:0}95%,97.5%{opacity:1}97.55%,100%{opacity:0}}
@keyframes flora-blink-eye{0%,40%{transform:scaleY(1)}40.58%,41.15%{transform:scaleY(.07)}42.48%,95%{transform:scaleY(1)}95.58%,96.15%{transform:scaleY(.07)}97.48%,100%{transform:scaleY(1)}}
/* the pupil shows while the eye is more than 40% open (FloraFace.kt:318), timed to the eased squash */
@keyframes flora-blink-pupil{0%,40.22%{opacity:1}40.27%,41.4%{opacity:0}41.45%,95.22%{opacity:1}95.27%,96.4%{opacity:0}96.45%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.flora-lids .blink,.flora-lids .eye,.flora-lids .pupil{animation:none}}
.flora-live-phone{display:none}
@media (max-width:480px){
  .flora-live-wide{display:none}
  .flora-live-phone{display:block;width:136px;margin:0 auto -18px;z-index:1}
  .flora-live-phone .flora-eyes-phone{width:100%;margin:0}
}
/* F3: tablets use the full width for the data lists */
@media (min-width:481px) and (max-width:820px){.flora-privacy ul{max-width:none}}
/* F5: the promise is made by her, in gold */
@media (min-width:821px){
  .flora-privacy-note{position:relative;padding-left:124px;min-height:0}
  .flora-privacy-note::before{content:"";position:absolute;left:0;top:.1em;width:104px;height:70px;background:no-repeat left top/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cg fill='%23ffd56b'%3E%3Crect x='14' y='8' width='12' height='18' rx='5'/%3E%3Crect x='34' y='8' width='12' height='18' rx='5'/%3E%3Crect x='22' y='32.5' width='16' height='2' rx='1'/%3E%3C/g%3E%3Ccircle cx='18' cy='21' r='2.4' fill='%230c3a3e'/%3E%3Ccircle cx='38' cy='21' r='2.4' fill='%230c3a3e'/%3E%3C/svg%3E")}
}
/* F6: fact labels readable on phones */
@media (max-width:480px){.flora-facts dt,.flora-facts:not(.flora-asks) dt{font-size:.8rem}}
/* the "Say it" faces read at a glance on wide screens */
@media (min-width:821px){.flora-mood{width:66px;height:43px;top:-22px;padding-left:12px}}

/* round 19 */
/* 4: her closing line above the last Download (481 px and up; phones keep the page length) */
.flora-end-line{display:none}
@media (min-width:481px){
  .flora-end-line{display:flex;align-items:center;gap:.45em;margin:28px 0 0;font-family:var(--serif);font-size:1.6rem;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
  .flora-end-line .flora-mini{width:1.35em}
  .page-flora main .flora-end-line + a.flora-end-download{margin-top:16px}
}
/* 5: the landscape-phone intro keeps a readable line */
@media (orientation:landscape) and (max-height:500px) and (min-width:481px){.page-flora .flora-hero .flora-lede{max-width:34rem}}
/* 6: command headings wrap evenly */
.page-flora .flora-list dt{text-wrap:balance}
/* 8 */
.page-flora .flora-asks-list li{text-wrap:pretty}
/* the promise is made by her on every screen: wide screens keep the big face, phones get a small one inline */
.flora-promise-face{display:none}
@media (max-width:820px){
  .flora-promise-face{display:inline-block;width:1.9em;height:1.25em;margin-right:.35em;vertical-align:-.2em;background:no-repeat left center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cg fill='%23ffd56b'%3E%3Crect x='14' y='8' width='12' height='18' rx='5'/%3E%3Crect x='34' y='8' width='12' height='18' rx='5'/%3E%3Crect x='22' y='32.5' width='16' height='2' rx='1'/%3E%3C/g%3E%3Ccircle cx='18' cy='21' r='2.4' fill='%230c3a3e'/%3E%3Ccircle cx='38' cy='21' r='2.4' fill='%230c3a3e'/%3E%3C/svg%3E")}
}
/* the hero phone sits nearer the words on wide screens (was a ~240 px gap) */
@media (min-width:1200px){.page-flora .flora-phones{justify-self:center}}

/* round 20 */
/* 5: Manrope and Crimson are variable fonts (wght 200-800 and 200-900, default 200 and 400); without a
   range the site's @font-face lets WebKit draw every weight at the default. Declared for this page. */
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Crimson;src:url('/assets/fonts/crimson-pro-latin.woff2') format('woff2');font-weight:200 900;font-display:swap}
/* 4: "--print-certs" stays two hyphens */
.page-flora code{font-variant-ligatures:none}
/* 7: the file check sits above her closing line, which shows on phones too */
.page-flora .flora-check + .flora-end-line{margin-top:24px}
@media (max-width:480px){
  .flora-end-line{display:flex;align-items:center;gap:.45em;margin:20px 0 0;font-family:var(--serif);font-size:1.35rem;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
  .flora-end-line .flora-mini{width:1.35em}
  .page-flora main .flora-end-line + a.flora-end-download{margin-top:12px}
}
@media (max-width:480px){.page-flora .flora-log + .flora-check{margin-top:0}}

/* round 21 */
/* 5: the lead-ins lead; the menu paths recede */
.flora-privacy li b{font-weight:600;color:inherit}
/* 6: phones keep the memory command ("She remembers you") and drop Open WhatsApp instead */
@media (max-width:480px){.page-flora .flora-ask-memory{display:block}.page-flora .flora-ask-apps{display:none}}
/* 8: on phones her face tile and the chat card read as one object */
@media (max-width:480px){.flora-live-phone .flora-eyes-phone{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}}
/* 9: her closing face smiles */
.flora-mini-smile{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round}
/* 10: if an image cannot load, its description stays readable */
.flora-phones img,.flora-qr img,.flora-setup-shot img,.flora-brain-shot img{font:13px/1.4 var(--sans);color:var(--muted)}