/* SEEN Code — shared styles */
:root{
  --bg:#FCFCFA; --panel:#FFFFFF;
  --ink:#171715; --soft:#56564F; --faint:#9A9A8F;
  --line:#ECECE4; --line-2:#E2E2D8; --sage:#6F7A6A;
  --serif:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1080px; --max-read:680px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.wrap.read{max-width:var(--max-read);}
a{color:inherit;}
.eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); font-weight:500; margin:0;}

/* header */
header{position:sticky; top:0; z-index:20;
  background:rgba(252,252,250,.78); backdrop-filter:saturate(120%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s ease;}
header.scrolled{border-bottom:1px solid var(--line);}
.bar{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; letter-spacing:.04em;}
.logo{width:26px; height:26px; border:1.5px solid var(--ink); border-radius:7px;
  display:grid; place-items:center; font-family:var(--serif); font-size:15px; line-height:1; padding-bottom:1px; overflow:hidden;}
.logo img{width:100%; height:100%; object-fit:cover;}
.brand b{font-weight:600; font-size:16px; letter-spacing:.14em;}
nav{display:flex; gap:34px; align-items:center;}
nav a{text-decoration:none; color:var(--soft); font-size:14px; font-weight:500; letter-spacing:.02em; transition:color .2s ease;}
nav a:hover{color:var(--ink);}
@media(max-width:640px){ nav{gap:22px;} nav a.hide-sm{display:none;} }

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:15px; font-weight:500; letter-spacing:.01em; padding:13px 22px; border-radius:999px; transition:all .22s ease; cursor:pointer;}
.btn.solid{background:var(--ink); color:var(--bg);}
.btn.solid:hover{transform:translateY(-1px); background:#000;}
.btn.ghost{color:var(--ink); border:1px solid var(--line-2);}
.btn.ghost:hover{border-color:var(--ink);}
.btn .arr{transition:transform .22s ease;}
.btn:hover .arr{transform:translateX(3px);}

/* hero */
.hero{min-height:86vh; display:flex; flex-direction:column; justify-content:center; padding:96px 0 72px;}
.hero .eyebrow{margin-bottom:30px;}
h1{font-family:var(--serif); font-weight:300; font-size:clamp(44px,8.5vw,108px);
  line-height:1.02; letter-spacing:-.015em; margin:0 0 30px; max-width:14ch;}
h1 .it{font-style:italic; font-weight:400;}
.lede{font-size:clamp(18px,2.2vw,22px); color:var(--soft); max-width:46ch; line-height:1.6; margin:0 0 44px;}
.cta{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.scrollcue{margin-top:64px; color:var(--faint); font-size:12px; letter-spacing:.18em; text-transform:uppercase;}

/* section frame */
section{padding:104px 0; border-top:1px solid var(--line);}
.sec-head{margin-bottom:56px; max-width:60ch;}
.sec-head h2{font-family:var(--serif); font-weight:300; font-size:clamp(30px,4.6vw,48px); letter-spacing:-.01em; line-height:1.12; margin:16px 0 0;}

/* philosophy */
.creed{font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(26px,4.4vw,46px); line-height:1.32; letter-spacing:-.01em; max-width:20ch; margin:0;}
.creed .quiet{color:var(--faint); font-style:normal;}
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:84px;}
.principle .n{font-family:var(--serif); font-size:18px; color:var(--sage);}
.principle h3{font-size:16px; font-weight:600; letter-spacing:.01em; margin:14px 0 8px;}
.principle p{font-size:15px; color:var(--soft); line-height:1.65; margin:0;}
@media(max-width:760px){ .principles{grid-template-columns:1fr; gap:38px;} }

/* work / apps */
.apps{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:760px){ .apps{grid-template-columns:1fr;} }
.app{background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:38px 36px; display:flex; flex-direction:column; min-height:300px; text-decoration:none; color:inherit;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;}
.app:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:0 18px 50px -32px rgba(23,23,21,.28);}
.app-icon{width:56px; height:56px; border-radius:14px; margin-bottom:auto;
  box-shadow:0 6px 18px -8px rgba(23,23,21,.4); display:block;}
.app .glyph{width:52px; height:52px; border-radius:13px; background:#F4F4EF; border:1px solid var(--line);
  display:grid; place-items:center; font-family:var(--serif); font-size:24px; color:var(--ink); margin-bottom:auto;}
.app h3{font-family:var(--serif); font-weight:400; font-size:27px; letter-spacing:-.01em; margin:28px 0 8px;}
.app p{font-size:15.5px; color:var(--soft); margin:0 0 20px; line-height:1.6;}
.app .meta{display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-top:auto;}
.app .status{color:var(--faint); letter-spacing:.04em;}
.app .go{color:var(--ink); font-weight:500; display:inline-flex; gap:7px; align-items:center;}
.app .go .arr{transition:transform .22s ease;}
.app:hover .go .arr{transform:translateX(3px);}
.app.soon{background:transparent; border-style:dashed; align-items:flex-start; justify-content:center; text-align:left;}
.app.soon .label{font-family:var(--serif); font-style:italic; font-size:24px; color:var(--faint);}
.app.soon p{color:var(--faint); margin-top:10px;}

/* contact */
.contact{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.contact h2{font-family:var(--serif); font-weight:300; font-size:clamp(34px,6vw,68px); letter-spacing:-.015em; line-height:1.05; margin:0;}
.mail{font-size:clamp(18px,2.4vw,24px); text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--line-2); padding-bottom:3px; transition:border-color .2s ease;}
.mail:hover{border-color:var(--ink);}

/* footer */
footer{border-top:1px solid var(--line); padding:40px 0;}
.foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; color:var(--faint); font-size:13px; letter-spacing:.02em;}
.foot a{color:var(--faint); text-decoration:none; transition:color .2s ease;}
.foot a:hover{color:var(--ink);}
.foot .links{display:flex; gap:26px; flex-wrap:wrap;}

/* ---- product page ---- */
.product-hero{display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center; padding:84px 0 16px;}
.product-hero .big-icon{width:124px; height:124px; border-radius:28px; box-shadow:0 22px 60px -24px rgba(46,58,79,.6);}
.product-hero h1{font-size:clamp(40px,7vw,72px); margin:0 0 14px;}
.product-hero .tagline{font-size:clamp(17px,2.2vw,20px); color:var(--soft); max-width:40ch; margin:0;}
@media(max-width:640px){ .product-hero{grid-template-columns:1fr; gap:26px;} .product-hero .big-icon{width:96px;height:96px;border-radius:22px;} }
.badges{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
.badge{font-size:12.5px; letter-spacing:.04em; color:var(--soft); border:1px solid var(--line-2); border-radius:999px; padding:7px 14px;}
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:38px 48px;}
@media(max-width:700px){ .features{grid-template-columns:1fr;} }
.feature h3{font-size:16px; font-weight:600; margin:0 0 7px;}
.feature p{font-size:15px; color:var(--soft); line-height:1.62; margin:0;}
.feature .mk{font-family:var(--serif); color:var(--sage); font-size:16px;}
.plans{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px;}
@media(max-width:640px){ .plans{grid-template-columns:1fr;} }
.plan{border:1px solid var(--line); border-radius:18px; padding:30px 30px; background:var(--panel);}
.plan.pro{border-color:var(--ink);}
.plan h4{font-family:var(--serif); font-weight:400; font-size:22px; margin:0 0 4px;}
.plan .sub{color:var(--faint); font-size:13px; margin:0 0 18px;}
.plan ul{list-style:none; margin:0; padding:0;}
.plan li{font-size:14.5px; color:var(--soft); padding:7px 0 7px 22px; position:relative;}
.plan li::before{content:"—"; position:absolute; left:0; color:var(--sage);}

/* ---- legal page ---- */
.legal{padding:72px 0 40px;}
.legal .lede{color:var(--soft); margin:0 0 6px;}
.legal h1{font-family:var(--serif); font-weight:300; font-size:clamp(38px,6vw,60px); letter-spacing:-.01em; line-height:1.08; margin:14px 0 8px; max-width:none;}
.legal .date{color:var(--faint); font-size:14px; margin:0 0 8px;}
.legal h2{font-size:18px; font-weight:600; margin:38px 0 10px; letter-spacing:.01em;}
.legal p, .legal li{color:var(--soft);}
.legal p{margin:0 0 14px;}
.legal ul{margin:0 0 14px; padding-left:20px;}
.legal li{margin:6px 0;}
.legal strong{color:var(--ink); font-weight:600;}
.legal hr{border:0; border-top:1px solid var(--line); margin:40px 0;}
.legal a{color:var(--sage);}

/* reveal */
.rise{opacity:0; transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.rise.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ .rise{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }