/* ouisi.co — the front door.
   Design language: shop.ouisi.co (Focal 13). Values read from the shop's live stylesheet
   (2026-10-20, -22, -26): the heading scale, the breakpoints (741 / 1000 / 1200), gutters, buttons
   and their hover, the header that sits transparent over the hero, the menu drawer.
   Base = phone. Where the brandbook and the shop disagree, the shop wins (D-025). */

@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/poppins-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/figtree-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/figtree-latin-700-normal.woff2") format("woff2")}

:root{
  --bg:#FAF9F6;          /* shop page background */
  --cream:#F8F5E4;       /* shop cream sections */
  --ink:#282828;         /* shop text */
  --ink-2:#5A5A56;       /* secondary text */
  --line:#DBDAD7;        /* shop border */
  --green:#5F814A;       /* shop primary button + announcement bar */
  --green-2:#87B46B;     /* shop header */
  --star:#F2C94C;
  --footer:#282828;
  --footer-line:#4A4A46;
  --footer-muted:#BDBDB7;
  --placeholder:#8A8A84;
  --sans:"Figtree","Helvetica Neue",Arial,sans-serif;
  --display:"Poppins",Arial,sans-serif;
  /* the shop's own variables: --heading-hN-font-size, --container-gutter, --button-height */
  --h1:40px; --h2:32px; --h3:28px; --h5:22px;
  --gutter:24px;
  --hdr-h:60px;
  --btn-h:48px; --btn-sm-h:40px;
}
@media (min-width:741px){:root{--h1:58px;--h2:44px;--h3:36px;--h5:22px;--gutter:40px;--hdr-h:68px;--btn-h:52px;--btn-sm-h:44px}}
@media (min-width:1200px){:root{--h1:62px;--h2:54px;--h3:40px;--h5:26px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;text-align:center;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.12;text-wrap:balance}
h1{font-size:var(--h1);letter-spacing:-.0225em}
h2{font-size:var(--h2);letter-spacing:-.02em}
h3{font-size:var(--h3);letter-spacing:-.016em}
/* product and app names, drawer links: the shop's h5 */
.h5{font-family:var(--display);font-weight:700;font-size:var(--h5);letter-spacing:-.3px;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
/* no orphans (Paul, 2026-10-26): the build joins each line's last two words; this evens the rag where supported */
p,li,figcaption{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
input,button{font-family:var(--sans);font-size:inherit}
input::placeholder{color:var(--placeholder)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* type roles */
.eb{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;line-height:1.5}
.lk{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lk:hover{text-decoration-thickness:2px}
.sub{color:var(--ink-2)}

/* buttons — the shop's primary, with its hover: a 7% shade that wipes down from the top */
.btn{--b:95,129,74;display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 30px;border:0;border-radius:8px;color:#fff;font-size:15px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;line-height:1;white-space:nowrap;cursor:pointer;
  background-color:rgb(var(--b));
  background-image:linear-gradient(178deg,rgb(var(--b)),rgb(var(--b)) 10%,rgba(0,0,0,.07) 10%,rgba(0,0,0,.07) 100%),linear-gradient(rgb(var(--b)),rgb(var(--b)));
  background-position:100% -100%,100% 100%;background-repeat:no-repeat;background-size:100% 200%,100% 100%;
  transition:background-position .3s cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}
.btn:hover{background-position:100% 25%,100% 100%}
.btn.sm{height:var(--btn-sm-h);padding:0 20px}

/* sections */
.sec{padding:48px var(--gutter);display:flex;flex-direction:column;align-items:center;gap:20px}
.cream{background:var(--cream)}
.narrow{max-width:900px}
.cols{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.col{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;width:100%;min-width:0}
.fig{width:320px;max-width:100%}
/* phones: text sits 36px from the edge — between ours (24) and the shop's (48): Paul, 11-02, "a bit tight" at 48;
   pictures, set tiles, screenshots, cards and buttons stay at 24px (Paul, 10-30: "Match the shop") */
@media (max-width:740px){
  .sec>p,.col>p{padding-left:12px;padding-right:12px;width:100%}
  /* headings: the same 12px from 344px up, less on the narrowest phones so a joined pair like "from anywhere." still fits */
  .sec>h1,.sec>h2,.sec>h3,.col>h1,.col>h2,.col>h3{padding-left:clamp(0px,calc((100vw - 320px) / 2),12px);padding-right:clamp(0px,calc((100vw - 320px) / 2),12px);width:100%}
}

/* the card, as drawn — measured from the print files 2026-10-22 (OUISI-KIT) */
.card{aspect-ratio:1/1;max-width:100%;background:#fff;border-radius:9%;padding:4.9%;box-shadow:0 1px 3px rgba(40,40,40,.10)}
.card img{width:100%;height:100%;object-fit:cover;border-radius:4.2%;display:block}

/* announcement bar + header: green, or transparent over the hero until the page moves (as the shop) */
.bar{background:var(--green);color:#fff;min-height:59px;display:flex;align-items:center;justify-content:center;padding:8px var(--gutter);font-size:17px;line-height:1.3}
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr-h);padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--green-2);color:#fff;transition:background .2s ease-in-out}
.js .hdr[data-transparent]:not(.is-solid){background:transparent}
.hdr .logo img{width:128px;height:24px;object-fit:contain}
.menu-btn{justify-self:start;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-13px;padding:0;background:none;border:0;color:#fff;cursor:pointer}

/* the menu: the shop's drawer — from the left, 89vw up to 400px, under a 30% veil */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden;transition:visibility .6s cubic-bezier(.75,0,.175,1)}
.drawer.open{visibility:visible}
.drawer-overlay{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:#000;opacity:0;cursor:pointer;transition:opacity .6s ease-in-out}
.drawer.open .drawer-overlay{opacity:.3}
.drawer-panel{position:absolute;top:0;bottom:0;left:0;width:89vw;max-width:400px;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;text-align:left;transform:translateX(-100%);transition:transform .6s cubic-bezier(.75,0,.175,1)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{position:relative;flex-shrink:0;display:flex;align-items:center;padding:20px var(--gutter) 6px}
.drawer-head::after{content:"";position:absolute;left:0;top:100%;width:100%;height:24px;background:linear-gradient(var(--bg),rgba(250,249,246,0));pointer-events:none;z-index:1}
.drawer-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-15px 0 -15px -15px;padding:0;background:none;border:0;color:var(--ink);cursor:pointer}
.drawer-list{list-style:none;margin:0;padding:0 var(--gutter) 24px;overflow:hidden auto;flex:1 1 auto}
.drawer-list li:not(:last-child){border-bottom:1px solid rgba(40,40,40,.15)}
.drawer-list a{display:flex;justify-content:space-between;align-items:center;width:100%;padding:21px 0}
body.menu-open{overflow:hidden}

/* hero: the boards' heights — 520px on the 390 phone board (133vw), 760px on the 1440 desktop board — under the solid header */
.hero{position:relative;display:grid;min-height:133vw;color:#fff}
/* shorter than the boards so the next section peeks above the fold (Paul, 10-30: "a sneak peek of what's going on below");
   content still sets the height when the screen is too short for it */
:root{--peek:180px}
body:has(.bar){--peek:240px}           /* the announcement bar (~60px) sits above the hero too */
.hero{min-height:min(133vw,calc(100vh - var(--hdr-h) - var(--peek)));min-height:min(133vw,calc(100svh - var(--hdr-h) - var(--peek)))}
.hdr[data-transparent] ~ main > .hero:first-child{margin-top:calc(-1 * var(--hdr-h))}
.hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ph2{display:none}
.hero .veil{position:absolute;inset:0;background:rgba(0,0,0,.38)}
.hero .in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px var(--gutter)}
.hdr[data-transparent] ~ main > .hero:first-child .in{padding-top:calc(var(--hdr-h) + 32px)}
.hero h1{color:#fff;max-width:900px;font-size:min(var(--h1),11vw)}   /* fits the narrowest phones (320px) without breaking a joined pair */
.hero.one h1{font-size:min(var(--h1),10vw)}   /* /apps: "from anywhere." is a longer joined pair */
/* stacked and larger, as on the shop's hero (Paul, 11-02): the shop sets 40 / 58 from 741 / 72 from 1200, line-height 1
   from 741, and a box narrow enough that the title takes two lines */
@media (min-width:741px){.hero h1{line-height:1;max-width:11em}}
@media (min-width:1200px){.hero h1,.hero.one h1{font-size:72px}}
.hero .cta{display:flex;flex-direction:column;gap:12px;align-items:center;padding-top:8px}

/* sets */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;padding-top:8px}
.tile{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#fff}
.tile .h5{padding-top:6px;font-size:min(var(--h5),5.9vw)}   /* one line in a two-up tile down to 320px phones */
.tile{container-type:inline-size}
/* two lines each, broken in the same place (Paul, 11-02: "balanced in terms of lines of text"); the size follows the
   tile's width so "patterns and colors." always fits on its line, at any screen or text size */
.tile .line{font-size:min(15px,10.5cqi);line-height:1.45;color:var(--ink-2);margin-top:-4px;white-space:nowrap}
.tile .btn{margin-top:auto;width:100%;max-width:240px}   /* full buttons, not small ones (Paul, 10-30: "too small and underwhelming") */

/* nature card lookup */
.cardback{width:220px;border-radius:9%;box-shadow:0 10px 28px rgba(40,40,40,.14)}
.lookup{display:flex;flex-direction:column;gap:12px;width:100%;align-items:center;padding-top:4px}
.lookup input{width:min(100%,200px);height:var(--btn-h);padding:0 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:17px;text-align:center}
.lookup .hint{font-size:14px;color:var(--ink-2);min-height:1.4em;line-height:1.4}

/* reviews */
.review{background:#fff;border-radius:12px;margin:0;padding:24px 22px;width:100%;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 10px rgba(40,40,40,.06);text-align:center}
.review .stars{color:var(--star);font-size:22px;letter-spacing:2px;line-height:1}
.review .q{line-height:1.55}
.review .who{font-size:15px;font-weight:600;line-height:1.4}
.review .who small{display:block;font-size:13px;font-weight:400;color:var(--ink-2)}
.review .tick{color:var(--green)}
.rooms{line-height:2.2}
.rooms .dot{display:none}
/* phones: one link per line with space between, so a link that wraps reads as one (Paul, 11-02) */
@media (max-width:740px){.rooms{display:flex;flex-direction:column;align-items:center;gap:14px;line-height:1.5}.rooms br{display:none}}
/* phones: both set names stacked the same way, whatever the text size (Paul, 11-02) */
@media (max-width:740px){.tile h3 .nm{display:block}}

/* close */
.close{padding-top:56px;padding-bottom:56px}
/* /apps close: a lifestyle photo and a product shot side by side (Paul, 11-02) */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,360px)}
.pair img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px;box-shadow:0 2px 10px rgba(40,40,40,.08)}
@media (min-width:1000px){.pair{width:100%;gap:20px}}
.close .cta,.col .cta{display:flex;flex-direction:column;gap:12px;align-items:center}   /* the front door's: the hero's two buttons again, at the end and under This looks like that (Paul, 10-30) */
@media (min-width:741px){.close .cta,.col .cta{flex-direction:row;gap:16px}}

/* footer */
.ftr{background:var(--footer);color:#fff;padding:48px var(--gutter) 40px;text-align:left;display:flex;flex-direction:column;gap:32px}
.ftr .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.ftr .colf{display:flex;flex-direction:column;gap:14px;min-width:0}
.ftr .colf.connect{grid-column:1 / -1}
.ftr .colf p{font-size:17px;line-height:1.7}
.ftr .colf p.eb{font-size:13px;line-height:1.5}   /* the boards: footer headings in eyebrow type */
.ftr .colf p.links{line-height:2.4}
.ftr .links a{display:block}
.ftr .links a:hover{text-decoration:underline;text-underline-offset:4px}
.social{display:grid;grid-template-columns:repeat(3,min(90px,calc((100vw - 2 * var(--gutter)) / 3)));border:1px solid var(--footer-line);width:max-content}   /* shrinks on the narrowest phones / bigger text instead of running off the edge */
.social a{height:90px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--footer-line);border-bottom:1px solid var(--footer-line)}
.social a:nth-child(3n){border-right:0}
.social a:nth-child(n+4){border-bottom:0}
.social a:hover{background:#333}
.social svg{width:18px;height:18px}
.ftr .fine{font-size:14px;line-height:1.6;color:var(--footer-muted)}

/* inner pages (apps, policies) */
.page-top{padding-top:56px}
.legal{max-width:680px;margin:0 auto;padding:48px var(--gutter) 72px;text-align:left}
.legal h1{font-size:var(--h2);letter-spacing:-.02em}
.legal .date{color:var(--ink-2);font-size:15px;margin:8px 0 28px}
.legal h2{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:0;margin:28px 0 8px;line-height:1.35}
.legal p,.legal li{margin-bottom:12px;line-height:1.65}
.legal ul{padding-left:22px;margin:0 0 12px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .other{margin-top:32px;font-size:14px;color:var(--ink-2)}
.app-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}

/* ---------- ≥741: the shop's tablet step — larger type, 40px gutter, buttons side by side ---------- */
@media (min-width:741px){
  body{font-size:18px;line-height:1.73}
  .btn{font-size:16px;letter-spacing:2px;padding:0 35px}
  .btn.sm{font-size:15px;padding:0 28px}
  .sec{padding:64px var(--gutter)}
  .sec>*,.cols,.col{max-width:640px}
  .hdr .logo img{width:140px;height:26px}
  .drawer-head{padding:24px var(--gutter)}
  .hero{min-height:min(90vw,calc(100svh - var(--hdr-h) - var(--peek)))}
  .hero .cta{flex-direction:row;gap:16px}
  .lookup{flex-direction:row;flex-wrap:wrap;max-width:480px}
  .lookup{justify-content:center}
  .lookup input{flex:0 0 212px;width:212px;font-size:18px}   /* sized for a number: the hint plus a little room (Paul, 10-30 and 11-02) */
  .lookup .btn{flex:0 0 auto}
  .lookup .hint{flex:0 0 100%}
  .ftr .grid{gap:40px}
  .social{grid-template-columns:repeat(5,56px);width:auto}
  .social a{height:56px;border-bottom:0}
  .social a:nth-child(3n){border-right:1px solid var(--footer-line)}
  .social a:last-child{border-right:0}
  .rooms .dot{display:inline}
  .rooms br{display:none}
}

/* ---------- ≥1000: the approved desktop layout — two columns, split hero ---------- */
@media (min-width:1000px){
  .sec{padding:88px var(--gutter);gap:24px}
  .sec>*,.cols,.col{max-width:none}
  .sec>.narrow{max-width:900px}
  .sec>.cols{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;width:1200px;max-width:100%}
  .cols.top{align-items:start;padding-top:16px}
  .col{gap:24px}
  .fig{width:100%}
  .cols .swap{order:-1}            /* text first where the desktop board has it on the left */
  .bar{min-height:61px;font-size:18px}
  .hero{min-height:min(52.8vw,760px,calc(100svh - var(--hdr-h) - var(--peek)))}
  .hero .ph{inset:0 50% 0 0;width:50%}
  .hero .ph2{display:block;inset:0 0 0 50%}
  .hero.one .ph{inset:0;width:100%}          /* /apps: one photo across the whole hero (Paul, 10-30) */
  .hero .in{gap:28px}
  .hero .cta{gap:24px}
  .tiles{gap:40px;width:1000px;max-width:100%;padding-top:16px}
  .tile{gap:14px}
  .tile .line{font-size:16px;line-height:1.5;margin-top:-6px}
  .cardback{width:380px;box-shadow:0 14px 40px rgba(40,40,40,.14);justify-self:center}
  .review{padding:28px 30px}
  .review .stars{font-size:24px}
  .review .who{font-size:16px}
  .review .who small{font-size:14px}
  .close{padding-top:100px;padding-bottom:100px}
  .ftr{padding:64px var(--gutter) 48px;gap:48px}
  .ftr .grid{grid-template-columns:repeat(3,minmax(0,325px));justify-content:space-between;width:1360px;max-width:100%;margin:0 auto}
  .ftr .colf.connect{grid-column:auto}
  .ftr .colf{gap:16px}
  .ftr .colf p:not(.eb){font-size:18px;line-height:1.73}
  .ftr .colf p.links{line-height:2.3}
  .ftr .fine{width:1360px;max-width:100%;margin:0 auto}
  .legal{padding:72px var(--gutter) 96px}
}

/* ---------- ≥1200: the shop's desktop type ---------- */
@media (min-width:1200px){
  h1,h2,h3{line-height:1.1}
  .h5{letter-spacing:-.4px;line-height:1.16667}
}

/* ---------- the app pages: iPhone screenshots (Paul, 2026-10-26) ----------
   A screenshot at the iPhone's own shape, corners matched to the screen's. Until Paul's screenshots
   arrive, a placeholder of the same shape stands in, labelled with the screen and the file it wants. */
/* each screenshot in an iPhone frame (Paul, 10-29), drawn in CSS: a 3.2% bezel around a 1179×2556 screen, and the
   Dynamic Island over the status bar. The outer ratio is the screen's plus the bezel: 1179 / 2468. */
.shot{position:relative;margin:0;width:100%;aspect-ratio:1179/2468;padding:3.2%;border-radius:16% / 7.6%;overflow:hidden;background:#1d1d1f;box-shadow:inset 0 0 0 1px #3a3a3c,0 2px 6px rgba(40,40,40,.08),0 18px 40px rgba(40,40,40,.14)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:13.5% / 6.2%}
.shot:not(.ph):not(.art)::after{content:"";position:absolute;top:2.6%;left:36.5%;width:27%;height:3.7%;border-radius:99px;background:#000}
.shot.art{aspect-ratio:auto;padding:0;background:#fff;border-radius:10px}
.shot.ph{padding:0 12%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 12%;background:#ECE8DC;border:1px solid var(--line);box-shadow:none;color:var(--ink-2);text-align:center}
.shot.ph .eb{font-size:11px;letter-spacing:1px}
.shot-name{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25;color:var(--ink)}
.shot-file{font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.lk.mail{text-transform:none;letter-spacing:0;font-size:inherit}

/* the front door's apps: two iPhone screenshots above each app, at every width (Paul: three 10-28/29, two 10-30). */
.app-pairs{padding-top:24px}
.app-pairs .h5+p{margin-top:-8px}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(100%,250px)}   /* smaller, with room round them (Paul, 10-30) */
/* phone spacing measured off the phone board: ~30px from the pictures to the app's name, ~52px from Learn more to the next app */
.cols.app-pairs{row-gap:48px}             /* row only: desktop keeps its 80px between the two apps */
.app-pairs .duo{margin-bottom:12px}
@media (min-width:1000px){
  .duo{gap:24px;width:min(100%,340px)}
  .app-pairs .duo{margin-bottom:8px}
}

/* /apps, phone first (Paul, 2026-10-27: "mobile forward … scroll on mobile, spread out on desktop").
   Each app shows the front door's two screenshots, the same size (Paul, 10-30; one rising screenshot until then). */
.qr{display:none}
@media (min-width:1000px){
  .cols .shot-col.left{order:-1}
  .qr{display:flex;align-items:center;gap:16px;text-align:left;margin-top:4px}
  .qr img{width:104px;height:104px;flex:none}
  .qr p{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:220px}
  .app-pick .duo{width:min(100%,480px)}     /* /apps desktop: bigger than the front door's (Paul, 10-30: "now look small") */
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.hdr,.drawer,.drawer-overlay,.drawer-panel{transition:none}}