/* Sealix — "a letter by candlelight" */
/* Fonts: self-hosted (OFL, see fonts/OFL-*.txt). No requests to Google. */
@font-face{font-family:"Commissioner";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/commissioner-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/commissioner-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/commissioner-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/eb-garamond-italic-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/eb-garamond-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/eb-garamond-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/eb-garamond-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/eb-garamond-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/eb-garamond-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --night:#15100D;      /* the desk at night */
  --walnut:#22180F;     /* raised surfaces */
  --walnut-2:#2D2118;
  --candle:#F2C879;     /* warm light, focus, progress */
  --wax:#8E1C22;        /* sealing wax */
  --wax-hi:#C2443F;
  --wax-lo:#5A0F14;
  --parchment:#EADFC8;  /* primary text on night, letter paper */
  --parchment-2:#BFAF93;/* secondary text */
  --letter:#F4EAD5;
  --env:#D9C6A0; --env-2:#CDB78E; --env-3:#E0CEAA;
  --ink:#2A1E17;
  --line:rgba(234,223,200,.14);
  --serif:"EB Garamond",Georgia,serif;
  --sans:"Commissioner",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--parchment);font-family:var(--sans);font-size:18px;line-height:1.6;overflow-x:hidden}
svg{display:block}
a{color:var(--candle)}a:hover{color:#FFE1A6}
:focus-visible{outline:2px solid var(--candle);outline-offset:4px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0}

/* ambience: candle light + film grain */
.light{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(520px circle at var(--lx,70%) var(--ly,38%),rgba(242,200,121,.16),rgba(242,200,121,.05) 45%,transparent 70%);
  animation:flicker 5s infinite}
@keyframes flicker{0%,100%{opacity:1}12%{opacity:.86}15%{opacity:.97}48%{opacity:.9}52%{opacity:1}78%{opacity:.93}}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:1;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header,main,footer{position:relative;z-index:2}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 40px}
.brand{display:flex;align-items:center;gap:12px;color:var(--parchment);text-decoration:none;font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:.01em}
.brand svg{width:34px;height:34px}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid var(--line);border-radius:20px;padding:3px}
.lang button{border:0;background:transparent;color:var(--parchment-2);font:600 13px var(--sans);min-height:32px;padding:0 11px;border-radius:16px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--parchment);color:var(--night)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:28px;border:0;font:600 16px var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.btn:active{transform:scale(.98)}
.btn-wax{background:var(--wax);color:var(--letter)}.btn-wax:hover{background:#A3262C;color:var(--letter)}
.btn-line{background:transparent;color:var(--parchment);border:1px solid rgba(234,223,200,.35)}.btn-line:hover{background:rgba(234,223,200,.08);color:var(--parchment)}
.nav .btn{min-height:42px;font-size:15px;padding:0 18px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy demo" "form demo";column-gap:64px;align-items:center;padding-top:40px;padding-bottom:120px;min-height:calc(100svh - 92px)}
.hero-copy{grid-area:copy;align-self:end}
.hero-demo{grid-area:demo}
.hero-form{grid-area:form;align-self:start}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,6.2vw,92px);line-height:.98;letter-spacing:-.015em;margin:0 0 26px;text-wrap:balance;color:var(--letter)}
.lead{font-size:clamp(18px,1.5vw,20px);color:var(--parchment-2);margin:0 0 36px;max-width:34em}
.hero h1,.hero .lead,.hero-form{opacity:0;transform:translateY(18px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero .lead{animation-delay:.18s}.hero-form{animation-delay:.32s}
.hero-demo{opacity:0;animation:fadein 1.6s .5s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fadein{to{opacity:1}}

/* chips (time lock) + inline errors (try it) */
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.chip span{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:19px;border:1px solid rgba(234,223,200,.3);font-weight:600;font-size:14px;color:var(--parchment)}
.chip input:checked+span{background:var(--parchment);color:var(--night);border-color:var(--parchment)}
.chip input:focus-visible+span{outline:2px solid var(--candle);outline-offset:3px}
.error{color:#F09A8E;font-size:14px;font-weight:600;margin:0}
.error:empty{display:none}
.soon{margin:14px 0 0;font-size:15px;color:#9C8E77}

/* envelope */
.env-stage{position:relative;width:min(460px,100%);margin:0 auto;aspect-ratio:460/520}
.env{position:absolute;left:0;right:0;bottom:0;aspect-ratio:3/2;perspective:1400px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.env-back{position:absolute;inset:0;background:var(--env-2);border-radius:6px}
.env-paper{position:absolute;left:5%;right:5%;top:5%;height:92%;background:var(--letter);border-radius:3px;padding:26px 28px;color:var(--ink);transition:transform .7s cubic-bezier(.3,.7,.2,1);z-index:2;box-shadow:0 -6px 18px rgba(0,0,0,.18)}
.env-msg{margin:0;font:italic 400 clamp(18px,1.55vw,21px)/1.45 var(--serif);white-space:pre-line}
.env-sign{display:block;margin-top:10px;font:400 15px var(--sans);color:#7A6650}
.env-pocket{position:absolute;inset:0;z-index:3;background:var(--env-3);border-radius:6px;overflow:hidden}
.env-pocket::before,.env-pocket::after{content:"";position:absolute;inset:0}
.env-pocket::before{background:var(--env);clip-path:polygon(0 0,52% 56%,0 100%)}
.env-pocket::after{background:#D3BE96;clip-path:polygon(100% 0,48% 56%,100% 100%)}
.env-flap{position:absolute;left:0;right:0;top:0;height:60%;background:var(--env-2);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .65s cubic-bezier(.4,.1,.2,1),z-index 0s .32s;z-index:4;filter:brightness(.97)}
.seal-btn{position:absolute;left:50%;top:60%;width:118px;height:118px;margin:-59px 0 0 -59px;border:0;padding:0;background:transparent;border-radius:50%;cursor:pointer;z-index:6;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.seal-btn .half,.seal-btn .whole{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.seal-btn .whole{transition:transform .2s,opacity .15s}
.seal-btn .half{opacity:0}
.ring{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);transform:rotate(-90deg);pointer-events:none}
.ring-fill{transition:none}
.seal-btn.holding .whole{transform:scale(.95)}
.env.open .env-flap{transform:rotateX(180deg);z-index:1}
.env.open .env-paper{transform:translateY(calc(var(--rise,74%) * -1));transition-delay:.42s}
.env.open .whole{opacity:0;transition:none}
.env.open .half.l{animation:split-l .8s cubic-bezier(.2,.8,.2,1) forwards}
.env.open .half.r{animation:split-r .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes split-l{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-70px,40px) rotate(-30deg)}}
@keyframes split-r{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(70px,40px) rotate(26deg)}}
.env.open .seal-btn{pointer-events:none}
.ring{transition:opacity .3s}
.env.open .ring,.try-card.open .ring{opacity:0}
.env.resealing .env-flap{transition:transform .6s cubic-bezier(.4,.1,.2,1) .45s,z-index 0s .7s}
.env.resealing .env-paper{transition-delay:0s}
.seal-btn.thump .whole{animation:thump .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes thump{0%{transform:scale(1.35);opacity:0}100%{transform:scale(1);opacity:1}}
.shard{position:absolute;left:50%;top:50%;background:radial-gradient(circle at 35% 30%,var(--wax-hi),var(--wax) 60%,var(--wax-lo));pointer-events:none;z-index:7}
.demo-hint{margin:22px 0 0;text-align:center;font-size:15px;color:var(--parchment-2);min-height:26px}
.demo-hint b{color:var(--candle);font-weight:600}

/* sections */
section{position:relative}
.sec{padding:140px 0}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,64px);line-height:1.04;letter-spacing:-.01em;margin:0 0 24px;color:var(--letter);text-wrap:balance;max-width:16em}
.sec-lead{font-size:19px;color:var(--parchment-2);margin:0 0 56px;max-width:36em}

/* ritual (scroll-driven) */
.ritual{height:340vh}
.ritual-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.ritual-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;width:100%}
.steps{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:s}
.steps li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:16px 0;opacity:.38;transition:opacity .4s}
.steps li[aria-current="step"]{opacity:1}
.step-n{width:44px;height:44px;border-radius:50%;border:1px solid rgba(234,223,200,.4);display:flex;align-items:center;justify-content:center;font:500 20px var(--serif);grid-row:span 2}
.steps li[aria-current="step"] .step-n{background:var(--wax);border-color:var(--wax);color:var(--letter)}
.steps h3{margin:6px 0 4px;font:600 21px var(--sans);color:var(--letter)}
.steps p{margin:0;color:var(--parchment-2);font-size:16px;max-width:28em}
.scene{position:relative;height:min(560px,70vh);display:flex;align-items:center;justify-content:center}
.r-paper{position:absolute;width:min(380px,86%);min-height:240px;background:var(--letter);color:var(--ink);border-radius:4px;padding:30px 32px;box-shadow:0 30px 50px rgba(0,0,0,.5);transform-origin:center top;will-change:transform,opacity}
.r-paper p{margin:0;font:italic 400 22px/1.45 var(--serif);white-space:pre-line;min-height:4.4em}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--wax);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.r-env{position:absolute;width:min(330px,76%);aspect-ratio:3/2;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 26px 36px rgba(0,0,0,.55))}
.r-env .env-pocket{border-radius:5px}
.r-env .env-flap{transition:none}
.r-seal{position:absolute;left:50%;top:60%;width:92px;height:92px;margin:-46px 0 0 -46px;z-index:6;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.r-env.stamped .r-seal::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid var(--candle);animation:ping .9s ease-out forwards}
@keyframes ping{from{transform:scale(.7);opacity:.9}to{transform:scale(1.5);opacity:0}}

/* chat (ritual + try) */
.chat{width:min(360px,92%);border-radius:30px;background:var(--walnut);border:1px solid var(--line);padding:14px 14px 18px;box-shadow:0 40px 60px rgba(0,0,0,.45)}
.r-chat{position:absolute;opacity:0;will-change:transform,opacity}
.chat-head{display:flex;align-items:center;gap:12px;padding:6px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.avatar{width:38px;height:38px;border-radius:50%;background:#5B4636;color:var(--letter);display:flex;align-items:center;justify-content:center;font:500 18px var(--serif)}
.chat-head b{font-weight:600;font-size:16px;color:var(--letter)}
.chat-body{display:flex;flex-direction:column;gap:8px;min-height:250px;justify-content:flex-end}
.bub{max-width:80%;padding:10px 15px;border-radius:20px;font-size:15px;line-height:1.45}
.bub.in{align-self:flex-start;background:var(--walnut-2);border-bottom-left-radius:6px}
.bub.out{align-self:flex-end;background:#4A3826;color:var(--letter);border-bottom-right-radius:6px}
.r-chat .bub,.r-chat .sealcard{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.r-chat .on{opacity:1;transform:none}
.sealcard{align-self:flex-end;width:250px;border-radius:20px;border-bottom-right-radius:6px;overflow:hidden;background:#4A3826;color:var(--letter);text-align:left}
.sealcard-top{position:relative;height:124px;background:var(--env-3);display:flex;align-items:center;justify-content:center}
.sealcard-top::before{content:"";position:absolute;inset:0;background:var(--env-2);clip-path:polygon(0 0,100% 0,50% 62%)}
.sealcard-top svg{position:relative;width:70px;height:70px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.sealcard-txt{padding:10px 14px 12px;display:flex;flex-direction:column;gap:2px}
.sealcard-txt b{font-weight:600;font-size:15px}
.sealcard-txt span{font-size:13px;color:var(--parchment-2)}

/* try it */
.try-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.try-form{display:flex;flex-direction:column;gap:14px}
.try-form label{font-size:15px;color:var(--parchment-2)}
.textarea{width:100%;min-height:170px;resize:vertical;padding:22px 24px;border-radius:20px;border:1px solid rgba(234,223,200,.28);background:var(--letter);color:var(--ink);font:italic 400 22px/1.45 var(--serif)}
.textarea::placeholder{color:#9A8670}
.textarea:focus{outline:2px solid var(--candle);outline-offset:3px}
.try-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.try-chat{margin:0 auto}
.try-chat .chat-body{min-height:330px}
.try-empty{margin:auto;text-align:center;color:#9C8E77;font-size:15px;max-width:16em}
.try-card{position:relative;cursor:pointer;border:0;padding:0;font:inherit}
.try-card .seal-btn{position:relative;left:auto;top:auto;margin:0;width:76px;height:76px}
.try-card .ring{inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px)}
.try-msg{display:none;padding:14px 16px 6px;font:italic 400 19px/1.45 var(--serif);color:var(--letter);white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}
.try-card.open .sealcard-top{display:none}
.try-card.open .try-msg{display:block;animation:unblur .6s ease}
@keyframes unblur{from{filter:blur(8px);opacity:0}to{filter:none;opacity:1}}
.try-note{font-size:14px;color:#9C8E77;margin:0}

/* features: six live scenes */
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.tile{position:relative;grid-column:span 2;display:flex;flex-direction:column;padding:14px 14px 28px;border-radius:28px;background:var(--walnut);border:1px solid var(--line);overflow:hidden;isolation:isolate}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,30%),rgba(242,200,121,.12),transparent 65%)}
.tile:hover::before{opacity:1}
.t-notif,.t-e2e{grid-column:span 4}
.t-acc,.t-words{grid-column:span 3}
.tile > h3{margin:24px 14px 8px;font:500 27px/1.2 var(--serif);color:var(--letter)}
.tile > p{margin:0 14px;color:var(--parchment-2);font-size:16px;max-width:34em}
.stage{position:relative;height:230px;border-radius:20px;background:var(--night);border:1px solid rgba(234,223,200,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px}

/* 1. notifications */
.notifs{display:flex;flex-direction:column;gap:12px;width:min(100%,520px)}
.notif{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(234,223,200,.08);border:1px solid rgba(234,223,200,.1);opacity:0;transform:translateY(14px)}
.n-icon{width:38px;height:38px;border-radius:10px}
.n-icon-plain{display:block;background:#4C5866}
.n-body{display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:1.35}
.n-app{font-size:12px;color:#9C8E77}
.n-body b{color:var(--letter);font-weight:600}
.n-text{color:var(--parchment-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:12px;white-space:nowrap;opacity:0}
.n-tag.bad{color:#F3A79C;background:rgba(194,68,63,.18)}
.n-tag.good{color:var(--candle);background:rgba(242,200,121,.14)}
.notif.other .n-text{color:var(--letter)}
.live .notif{animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.live .notif.ours{animation-delay:.5s}
.live .n-tag{animation:fadein .5s forwards;animation-delay:1.3s}
.live .notif.ours .n-tag{animation-delay:1.7s}

/* 2. passcode is not enough */
.pass{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pass-label{font-size:13px;color:#9C8E77}
.dots{display:flex;gap:12px}
.dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--parchment-2);transition:background .15s,border-color .3s}
.dots i.on{background:var(--parchment)}
.dots.wrong{animation:shake .45s}
.dots.wrong i{border-color:#E0675E;background:#E0675E}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.pass-msg{display:grid;min-height:20px}
.pass-no,.pass-yes{grid-area:1/1;font-size:14px;font-weight:600;opacity:0;transition:opacity .3s}
.pass-no{color:#F3A79C}
.pass-yes{color:var(--candle)}
.pass.no .pass-no{opacity:1}
.pass.yes .pass-no{opacity:0}
.pass.yes .pass-yes{opacity:1}
.finger{color:rgba(234,223,200,.35);transition:color .4s,filter .4s}
.pass.yes .finger{color:var(--candle);filter:drop-shadow(0 0 14px rgba(242,200,121,.55))}

/* 3. shared code in the browser */
.code{width:min(100%,250px);border-radius:16px;background:var(--letter);color:var(--ink);padding:0 0 16px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.code-bar{align-self:stretch;display:flex;align-items:center;gap:5px;padding:8px 12px;background:#E3D6BD}
.code-bar span{width:8px;height:8px;border-radius:50%;background:#BFAF93}
.code-bar em{margin-left:8px;font-style:normal;font-size:11px;color:#7A6650}
.code-seal{width:56px;height:56px;transition:transform .5s,opacity .5s}
.code.open .code-seal{transform:scale(1.3) rotate(-12deg);opacity:0}
.boxes{display:flex;gap:7px}
.boxes b{width:34px;height:40px;border-radius:9px;border:1.5px solid #CDB78E;display:flex;align-items:center;justify-content:center;font:500 20px var(--sans);color:var(--ink);background:#FFFDF8}
.boxes b.on{border-color:var(--wax)}
.code-ok{font-size:13px;font-weight:600;color:var(--wax);opacity:0;transition:opacity .3s}
.code.open .code-ok{opacity:1}

/* 4. end-to-end */
.e2e{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;width:100%}
.e2e-pane{display:flex;flex-direction:column;gap:8px;min-width:0}
.e2e-label{font-size:13px;color:#9C8E77}
.e2e-plain{margin:0;font:italic 400 20px/1.4 var(--serif);color:var(--letter)}
.e2e-cipher{margin:0;font:500 15px/1.5 var(--sans);color:#8F826D;overflow-wrap:anywhere;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.e2e-lock{color:var(--candle)}

/* 5. no account */
.acc{display:flex;flex-direction:column;gap:9px;width:min(100%,320px)}
.acc-row{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 16px;border-radius:12px;border:1px solid rgba(234,223,200,.18);font-size:14px;color:var(--parchment-2)}
.acc-row i{position:absolute;left:12px;right:12px;top:50%;height:1.5px;background:#E0675E;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.6,.1,.3,1)}
.acc-row.x{transition:opacity .4s .3s}
.live .acc-row.x i{transform:scaleX(1)}
.live .acc-row.x{opacity:.45}
.live .acc-row.x:nth-child(2) i{transition-delay:.35s}.live .acc-row.x:nth-child(2){transition-delay:.65s}
.live .acc-row.x:nth-child(3) i{transition-delay:.7s}.live .acc-row.x:nth-child(3){transition-delay:1s}
.acc-row.keep{border-color:rgba(242,200,121,.55);color:var(--letter);transition:box-shadow .5s 1.3s}
.acc-row.keep b{font:500 17px var(--serif);color:var(--letter)}
.live .acc-row.keep{box-shadow:0 0 0 1px rgba(242,200,121,.55),0 0 24px rgba(242,200,121,.18)}

/* 6. only words */
.words{width:100%;height:100%;display:flex;flex-direction:column;gap:12px}
.words-text{flex:1;margin:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font:italic 400 18px/1.5 var(--serif);color:var(--letter);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)}
.words-text .caret{background:var(--candle)}
.words-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:#9C8E77}
.words-count b{font:500 20px var(--sans);color:var(--candle);font-variant-numeric:tabular-nums}
.words-no{display:flex;gap:10px;color:#E0675E}

/* time lock */
.lock-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.pro-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--candle);border:1px solid rgba(242,200,121,.4);border-radius:16px;padding:5px 12px;margin-bottom:22px}
.when{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:0;border:0}
.when .chip span{min-height:42px;padding:0 16px;font-size:15px}
.date-chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 6px 0 16px;border-radius:21px;border:1px solid rgba(234,223,200,.3);font-weight:600;font-size:15px}
.date-chip input{background:transparent;border:0;color:var(--parchment);font:500 15px var(--sans);color-scheme:dark;min-height:36px}
.pro-more{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px}
.pro-more b{display:block;color:var(--letter);font-weight:600;margin-bottom:2px}
.pro-more span{color:var(--parchment-2);font-size:15px}
.lock-card{position:relative;margin:0 auto;width:min(440px,100%)}
.lock-card .env{position:relative;inset:auto}
.lock-card .env-paper{display:none}
.lock-seal{position:absolute;left:50%;top:60%;width:104px;height:104px;margin:-52px 0 0 -52px;z-index:6;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.ribbon{position:absolute;left:50%;top:60%;transform:translate(-50%,62px);z-index:7;background:var(--night);border:1px solid rgba(242,200,121,.5);color:var(--candle);border-radius:14px;padding:6px 14px;font-size:14px;font-weight:600;white-space:nowrap}
.countdown{display:flex;justify-content:center;gap:10px;margin-top:34px}
.countdown div{min-width:74px;text-align:center;padding:12px 6px;border-radius:14px;background:var(--walnut);border:1px solid var(--line)}
.countdown b{display:block;font:500 34px/1 var(--serif);color:var(--letter);font-variant-numeric:tabular-nums}
.countdown span{font-size:13px;color:var(--parchment-2)}
.lock-note{text-align:center;color:var(--parchment-2);font-size:15px;margin:16px 0 0}

/* honest + faq */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.split p{margin:0 0 16px;font-size:19px;color:var(--parchment-2);max-width:34em}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;font:500 24px/1.25 var(--serif);color:var(--letter)}
summary::-webkit-details-marker{display:none}
summary svg{flex-shrink:0;transition:transform .25s;color:var(--candle)}
details[open] summary svg{transform:rotate(45deg)}
details p{margin:0 0 24px;color:var(--parchment-2);max-width:36em}

/* final */
.final{text-align:center;padding:160px 0 150px}
.final-seal{width:132px;height:132px;margin:0 auto 34px;opacity:0;transform:translateY(-140px) scale(1.6)}
.final.in .final-seal{animation:stamp 1s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes stamp{60%{opacity:1;transform:translateY(0) scale(.92)}100%{opacity:1;transform:none}}
.final h2{margin:0 auto 38px}

footer{border-top:1px solid var(--line);padding:36px 0 56px;font-size:14px;color:#9C8E77}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* privacy / legal page */
.legal{max-width:780px;margin:0 auto;padding:48px 40px 120px}
html[lang="el"] .legal article[lang="en"],html[lang="en"] .legal article[lang="el"]{display:none}
.legal h1{font:500 clamp(42px,6vw,64px)/1.05 var(--serif);color:var(--letter);margin:0 0 14px;letter-spacing:-.01em}
.legal-meta{font-size:15px;color:#9C8E77;margin:0 0 36px}
.legal h2{font:500 30px/1.2 var(--serif);color:var(--letter);margin:56px 0 14px}
.legal h3{font:600 18px var(--sans);color:var(--letter);margin:28px 0 8px}
.legal p,.legal li{font-size:17px;line-height:1.7;color:var(--parchment-2)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal strong{color:var(--letter);font-weight:600}
.facts{margin:18px 0 0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{color:#9C8E77;font-size:15px}
.facts dd{margin:0;color:var(--letter);font-size:16px}

/* responsive */
@media (max-width:960px){
  .wrap,.nav{padding-left:20px;padding-right:20px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "demo" "form";row-gap:20px;min-height:0;padding-top:16px;padding-bottom:96px}
  .env-stage{width:min(400px,100%)}
  .sec{padding:96px 0}
  .ritual-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .ritual-copy h2{font-size:34px;margin-bottom:8px}
  .steps{margin-top:8px;flex-direction:row;gap:8px}
  .steps li{grid-template-columns:1fr;padding:6px 0;flex:1}
  .steps li .step-n{width:36px;height:36px;font-size:17px;grid-row:auto}
  .steps h3{font-size:16px;margin:8px 0 0}
  .steps p{display:none}
  .scene{height:min(470px,60vh)}
  .try-grid,.lock-grid,.split{grid-template-columns:minmax(0,1fr);gap:48px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{grid-column:span 1}
  .t-notif,.t-e2e{grid-column:span 2}
  .t-acc,.t-words{grid-column:span 1}
  .pro-more{grid-template-columns:minmax(0,1fr)}
  .nav .btn{display:none}
}
@media (max-width:540px){
  .legal{padding:24px 20px 96px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .bento{grid-template-columns:minmax(0,1fr)}
  .tile,.t-notif,.t-e2e,.t-acc,.t-words{grid-column:auto}
  .stage{height:210px;padding:14px}
  .e2e{grid-template-columns:minmax(0,1fr);gap:10px}
  .e2e-lock{display:none}
  .t-e2e .stage{height:auto;min-height:210px}
  .e2e-plain{font-size:17px}
  .t-notif .stage{height:auto;min-height:210px}
  .notif{grid-template-columns:38px 1fr;row-gap:8px}
  .n-tag{grid-column:2;justify-self:start}
  .n-text{white-space:normal}
  .tile > h3{font-size:24px}
  body{font-size:17px}
  .countdown div{min-width:0;flex:1}
  .countdown b{font-size:28px}
  .env-paper{padding:16px 18px}
  .env-stage{aspect-ratio:1/1.1}
  .env-msg{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1,.hero .lead,.hero-form,.hero-demo,.final-seal{opacity:1;transform:none}
  .ritual{height:auto}
  .notif,.n-tag{opacity:1;transform:none}
  .ritual-stage{position:relative;height:auto;padding:120px 0}
}