/* oliplanner.com. Colour, type and radii come from /assets/tokens.css.
   Bodoni Moda and Figtree are self-hosted from /assets/fonts.css. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.08;margin:0}
em,.it{font-style:italic;color:var(--accent)}
.eyebrow{font:var(--label-weight) var(--label-size)/1 var(--body);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.mark{font:500 1rem/1 var(--display);letter-spacing:.42em;text-decoration:none;text-transform:uppercase;padding-left:.42em;margin-left:-.42em}
.top nav{display:flex;gap:26px;margin-left:auto;font-size:.9375rem}
.top nav a{text-decoration:none;color:var(--muted)}.top nav a:hover{color:var(--ink)}
.top .badge{margin-left:8px;transform:scale(.86);transform-origin:right center}
@media (max-width:820px){.top nav{display:none}.top .badge{margin-left:auto}}

/* App Store badge */
.badge{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 20px 8px 16px;border-radius:14px;background:#000;color:#fff;text-decoration:none;border:1px solid #3A3A3A;transition:transform .2s ease,opacity .2s ease}
.badge svg{flex:none}
.badge span{display:grid;line-height:1.05;text-align:left}
.badge small{font-size:.6875rem;letter-spacing:.02em;opacity:.9}
.badge b{font:600 1.25rem/1.1 var(--sans);letter-spacing:-.01em}
.badge:hover{transform:translateY(-1px)}
.badge.soon{cursor:default}.badge.soon:hover{transform:none}
@media (prefers-color-scheme:dark){.badge{border-color:#5A5A5A}}

/* hero */
.hero{padding:72px 0 40px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.75rem,6.4vw,5.2rem);margin:18px 0 22px}
.hero .lede{font-size:1.1875rem;color:var(--muted);max-width:30em;margin:0 0 30px}
.hero .note{font-size:.875rem;color:var(--muted);margin-top:14px}
.phones{position:relative;height:740px}
.phones img{position:absolute;width:290px;-webkit-mask-image:linear-gradient(#000 97%,transparent);mask-image:linear-gradient(#000 97%,transparent)}
.phones .p1{right:150px;top:0;z-index:2}
.phones .p2{right:-10px;top:70px;transform:rotate(4deg);opacity:.96}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:44px}.phones{height:660px;max-width:440px;margin:0 auto;width:100%}.phones img{width:250px}.phones .p1{left:0;right:auto}.phones .p2{right:0}}
@media (max-width:480px){.phones{height:560px}.phones img{width:210px}}

/* ribbon of what it covers */
.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:24px 0 0}
.ribbon .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;font:600 .75rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* sections */
section.block{padding:96px 0}
.head{max-width:40em;margin:0 0 48px}
.head h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:14px 0 14px}
.head p{color:var(--muted);font-size:1.0625rem;margin:0}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px 32px}
.step .n{font:400 2.4rem/1 var(--display);color:var(--accent)}
.step h3{font-size:1.5rem;margin:18px 0 10px}
.step p{margin:0;color:var(--muted)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0}
.feature.flip .shot{order:2}
.feature .shot img{width:min(310px,100%);margin:0 auto;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.feature h3{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:14px 0 16px}
.feature p{color:var(--muted);font-size:1.0625rem;margin:0 0 14px;max-width:30em}
.feature ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.feature li{display:flex;gap:12px;align-items:baseline}
.feature li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-3px)}
@media (max-width:820px){.feature{grid-template-columns:1fr;gap:28px}.feature.flip .shot{order:0}}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.price{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column}
.price.star{background:var(--onyx);color:var(--on-onyx);border-color:transparent;position:relative}
.price.star .muted{color:color-mix(in srgb,var(--on-onyx) 70%,transparent)}
.price .tag{align-self:flex-start;margin:-4px 0 14px;font:600 .6875rem/1 var(--sans);letter-spacing:var(--label-tracking-tag);text-transform:uppercase;color:var(--accent-on-onyx);border:1px solid var(--accent-soft);border-radius:var(--r-pill);padding:6px 10px}
.price h3{font-size:1.45rem;margin:0 0 6px}
.price .amt{font:400 2.4rem/1 var(--display);margin:18px 0 4px}
.price .amt small{font:400 .9375rem var(--sans);color:inherit;opacity:.7}
.price p{margin:12px 0 0;font-size:.9375rem}
@media (max-width:980px){.prices{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.prices{grid-template-columns:1fr}}
.fine{margin-top:20px;font-size:.8125rem;color:var(--muted)}

/* closing band */
.band{background:var(--onyx);color:var(--on-onyx);border-radius:var(--r-xl);padding:72px 40px;text-align:center;margin:0 auto 96px;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(205,176,123,.25);pointer-events:none}
.band h2{font-size:clamp(2.2rem,5vw,3.8rem);color:var(--on-onyx);margin:16px 0 14px}
.band p{color:rgba(242,237,229,.72);margin:0 auto 30px;max-width:32em}
.band .eyebrow{color:var(--accent-on-onyx)}

/* footer */
footer{border-top:1px solid var(--line);padding:36px 0 48px;font-size:.875rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:12px 22px}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}
footer .mark{color:var(--ink);margin-right:auto}

/* reading pages: privacy, terms, support, delete account */
.doc{max-width:760px;margin:0 auto;padding:56px max(20px,env(safe-area-inset-left,0px)) 80px}
.doc h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:12px 0 18px}
.doc h2{font-size:1.6rem;margin:2em 0 .5em}
.doc h3{font-size:1.25rem;margin:1.6em 0 .4em}
.doc p,.doc li{color:color-mix(in srgb,var(--ink) 86%,var(--muted))}
.doc a{color:var(--accent)}
.doc form{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;margin:22px 0}
.doc label{font-weight:600;font-size:.9375rem}
.doc input{font:inherit;padding:13px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.doc button{font:inherit;font-weight:600;padding:13px 20px;border-radius:var(--r-pill);border:0;background:var(--error);color:var(--on-error);cursor:pointer;min-height:48px}
.ok{color:var(--success);font-weight:600}.err{color:var(--error);font-weight:600}

/* gentle reveal as you scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.badge{transition:none}}
@media (max-width:600px){.phones{height:auto;display:flex;justify-content:center}.phones .p1{position:relative;left:auto;right:auto;top:auto;width:min(270px,78vw)}.phones .p2{display:none}}
@media (prefers-color-scheme:dark){.phones img,.feature .shot img{filter:none}}