:root{
--ffamily: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
height:100%;
}

*, :after, :before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: rgb(var(--grey));
}

html{ scroll-behavior: smooth; }

body{
margin:0;
font-family: var(--ffamily);
color: var(--ink);
line-height: 1.5;
}

img{ max-width:100%; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3,h4,.btn{ font-family: "Familjen Grotesk", Figtree, sans-serif; }
h1,h2{ font-weight:700; }
h2{ font-size: clamp(28px, 4vw, 44px); line-height:1.1; letter-spacing:-0.02em; }
h3{ font-size: 18px; }
p{ color: var(--muted); }
:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; }

/* ---------- Header ---------- */
header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 0 30px;
height:90px;
border-bottom:1px solid var(--darkgrey);
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}

.logo{
display: flex;
align-items: center;
justify-content: center;
}

.logo img{
height: 28px;
}

.active{
color: var(--brand);
}

nav{ display:flex; gap: 28px; font-size: 15px; }
/*nav a:hover{ color: var(--brand); }*/

/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
height: 48px;
padding: 0 26px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
background: var(--brand);
color:#fff;
cursor:pointer;
}
.btn.sm{ height:40px; padding:0 20px; }
.btn.light{ background: var(--surface); color: var(--ink); }
.btn.light:hover{ background:#e8e8ec; }
.btn.white{ background:#fff; color: var(--brand); }
.btn:hover{ background: var(--brand-deep); }
.btn.sun{ background: var(--lime); color: var(--brand-deep); }
.btn.sun:hover{ background:#bcec96; }
.btn.white:hover{ background: var(--brand-soft); }
.btn.outline-white{ background: transparent; color:#fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Hero ---------- */
.main{
padding: 30px 30px;
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
gap: 40px;
}

.main h1{
font-size: clamp(44px, 7vw, 70px);
line-height: 1.05;
letter-spacing: -0.04em;
margin-bottom: 20px;
max-width: 11ch;
}

.main .hero-text{
width:50%;
}

.hero-text p{ max-width: 460px; font-size: 18px; margin-bottom: 14px; }
.hero-text .btn-row{ margin: 24px 0 28px; }
.tagline{ font-size: 15px; font-weight: 600; color: var(--brand); }

.main .hero-image{
width:50%;
}

.art{ display:block; width:100%; height:auto; }
.hero-image .badges.center{ margin-top: 38px; }

/* ---------- Sections ---------- */
section{ padding: 90px 30px; }
.head{ max-width: 600px; margin-bottom: 40px; }
.head p{ margin-top: 12px; font-size: 17px; }


.i{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* Badges */
.badges{ display:flex; flex-wrap:wrap; gap:12px; }
.badges img{ display:block; height:40px; width:auto; border-radius:5px }
.badges.center{ justify-content:center; margin-top:28px; }
.badges.stack{ margin-top:20px; flex-direction:column; align-items:flex-start; gap:10px; }

/* Category cards */
.ccards{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.ccard{ display:flex; flex-direction:column; border:1px solid var(--darkgrey); border-radius: var(--radius); padding:14px 14px 22px; background:#fff; transition: box-shadow .2s, transform .2s; }
.ccard:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(5,64,38,.1); }
.cart{ background: var(--lime-tint); border-radius: 16px; margin-bottom:18px; padding: 8px 0; }
.cart svg{ display:block; width:100%; height:auto; }
.ccard h3, .ccard p, .ccard .more{ padding: 0 8px; }
.ccard h3{ font-size:20px; margin-bottom:6px; }
.ccard p{ font-size:14px; margin-bottom:16px; }
.more{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color: var(--brand); }
.more .i{ width:16px; height:16px; stroke-width:2.2; }

/* Feature items */
.feats{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin: 28px 0 8px; }
.feats.four{ grid-template-columns: repeat(4, 1fr); margin-top:0; }
.feat-icon{ width:52px; height:52px; border-radius:14px; background: var(--lime-tint); color: var(--brand); display:grid; place-items:center; margin-bottom:14px; }
.feat h3{ font-size:17px; margin-bottom:6px; }
.feat p{ font-size:14px; }

/* Campus + Vendor split blocks */
.split{
display:flex;
align-items:center;
gap: 60px;
}
.split > *{ flex:1; }
.split h2{ margin-bottom: 16px; }
.split p{ font-size:17px; margin-bottom: 14px; max-width: 520px; }
.split .btn{ margin-top: 14px; }
.panel{
border-radius: 28px;
background: var(--brand);
display:grid;
place-items:center;
padding: 24px;
}
.panel svg{ width:100%; height:auto; max-width: 440px; }
.panel.phone{ position:relative; background: var(--brand); padding: 40px 24px 0; align-self:stretch; overflow:hidden; }
.panel.phone svg{ max-width: 210px; margin-top:20px; position:relative; z-index:1; }
.panel.alt{ background: var(--brand-deep); }

.checks{ list-style:none; padding:0; margin: 18px 0 8px; display:grid; gap:10px; }
.checks li{ display:flex; gap:12px; align-items:center; font-weight:600; }
.tick{
width:24px; height:24px; flex:none;
display:grid; place-items:center;
border-radius:50%;
background: var(--brand-soft);
color: var(--brand);
}
.tick .i{ width:14px; height:14px; stroke-width:2.5; }

/* FAQ */
.faq{ max-width: 820px; margin: 0 auto; }
.faq .head{ margin-left:auto; margin-right:auto; text-align:center; }
details{ border-bottom: 1px solid var(--darkgrey); padding: 22px 0; }
summary{
font-size: 18px;
font-weight: 600;
cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
gap: 20px;
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-size:24px; line-height:1; color: var(--brand); }
details[open] summary::after{ content:"–"; }
details p{ margin-top: 12px; font-size: 16px; }

/* Final CTA */
.cta{
margin: 0 30px 90px;
padding: 56px 56px 0;
border-radius: 28px;
background: var(--brand);
color:#fff;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap: 30px;
overflow:hidden;
}
.cta-text{ padding-bottom: 56px; max-width: 520px; }
.cta h2{ margin-bottom: 14px; }
.cta p{ color: rgba(255,255,255,.85); font-size:18px; margin: 0 0 26px; }
.cta .badges{ margin-top: 22px; }
.phones{ width: 330px; height:auto; flex:none; display:block; }

/* Footer */
footer{
padding: 60px 30px 40px;
border-top: 1px solid var(--darkgrey);
}
.foot-grid{
display:grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
}
.foot-grid h4{ margin: 0 0 14px; font-size:15px; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14px; }
.foot-grid ul a{ color: var(--brand); }
.foot-grid ul a:hover{ text-decoration: underline; }
.foot-brand p{ margin-top: 12px; font-size:14px; max-width: 260px; }
.copy{ margin-top: 50px; text-align:center; font-size:13px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
.ccards{ grid-template-columns: repeat(3, 1fr); }
.feats.four{ grid-template-columns: 1fr 1fr; }
.cta{ flex-direction:column; align-items:flex-start; padding-bottom:0; }
.phones{ align-self:center; }
.foot-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
.ccards, .feats, .feats.four{ grid-template-columns: 1fr; }
.panel.phone{ min-height:380px; }
.cta{ padding: 40px 24px 0; }
.cta-text{ padding-bottom:28px; }
.phones{ width:260px; }
nav{ display:none; }
header, .main, section, footer{ padding-left: 20px; padding-right: 20px; }
.main{ flex-direction: column; height:auto; padding-top: 40px; padding-bottom: 40px; }
.main .hero-text, .main .hero-image{ width:100%; }
.split, .split.reverse{ flex-direction: column; gap: 30px; }
.split.reverse{ flex-direction: column-reverse; }
.badges img{ height:44px; }
.cta{ margin: 0 20px 60px; }
section{ padding-top: 60px; padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
}

.hide{
display: none;
}
/* How it works: connected steps + phone panel */
.panel.phone::before,.panel.phone::after{ content:""; position:absolute; left:50%; top:46%; border-radius:50%; transform:translate(-50%,-50%); border:1.5px solid rgba(168,226,122,.35); }
.panel.phone::before{ width:300px; height:300px; background:rgba(168,226,122,.12); }
.panel.phone::after{ width:440px; height:440px; border-color:rgba(168,226,122,.18); }
.chip{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 10px; border-radius:999px; background:#fff; color:var(--brand); font-size:14px; font-weight:600; box-shadow:0 10px 24px rgba(3,32,19,.28); }
.chip .i{ width:22px; height:22px; padding:4px; border-radius:50%; background:var(--lime); color:var(--brand-deep); stroke-width:2.4; }
.chip.c1{ top:22%; left:6%; }
.chip.c2{ bottom:20%; right:6%; }

.steps{ list-style:none; margin:32px 0 14px; padding:0; counter-reset:step; }
.step{ position:relative; display:flex; gap:18px; padding-bottom:28px; counter-increment:step; }
.step:last-child{ padding-bottom:0; }
.step:not(:last-child)::before{ content:""; position:absolute; left:25px; top:52px; bottom:2px; border-left:2px dashed #cde6b3; }
.step-icon{ position:relative; width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--lime-tint); color:var(--brand); box-shadow:0 0 0 6px #fff; }
.step-icon::after{ content:counter(step); position:absolute; top:-4px; right:-6px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:var(--brand-deep); font-size:12px; font-weight:700; box-shadow:0 0 0 2px #fff; }
.step:last-child .step-icon{ background:var(--brand); color:var(--lime); }
.step h3{ margin:2px 0 4px; }
.step p{ font-size:15px; margin:0; max-width:420px; }
@media (max-width:760px){ .chip.c1{ left:4%; } .chip.c2{ right:4%; } .panel.phone::after{ display:none; } }

/* Step colours: pastel tile, bright icon */
.step:nth-child(1){ --bg:#edf7e4; --fg:#3dbb14; }
.step:nth-child(2){ --bg:#ffe5d3; --fg:#f0651f; }
.step:nth-child(3){ --bg:#fff0bd; --fg:#e8a400; }
.step:nth-child(4){ --bg:var(--brand); --fg:var(--lime); }
.step-icon{ background:var(--bg); color:var(--fg); }
.step-icon::after{ background:var(--fg); color:var(--brand-deep); }
.step:last-child .step-icon{ background:var(--bg); color:var(--fg); }
.step .i{ stroke-width:2.1; }

/* Calmer step colours: soft tiles, muted icons, quiet badges */
.step:nth-child(1){ --bg:#eaf5e1; --fg:#5aa13a; --fg-d:#2f6a18; }
.step:nth-child(2){ --bg:#fbebe0; --fg:#d98558; --fg-d:#9a4a22; }
.step:nth-child(3){ --bg:#faf2d9; --fg:#c9a23d; --fg-d:#7d5f12; }
.step:nth-child(4){ --bg:var(--brand); --fg:#b9e79a; --fg-d:var(--brand); }
.step-icon::after{ background:#fff; color:var(--fg-d); box-shadow: inset 0 0 0 1.5px var(--fg), 0 0 0 2px #fff; }

/* Vendor panel matches the steps panel */
.panel.alt{ background: var(--brand); }

/* Soft pastel sequence: blue, sage, peach, butter */
.step:nth-child(1){ --bg:#e4eefb; --fg:#6b9bd6; --fg-d:#2c5a94; }
.step:nth-child(2){ --bg:#eaf5e1; --fg:#5aa13a; --fg-d:#2f6a18; }
.step:nth-child(3){ --bg:#fbebe0; --fg:#d98558; --fg-d:#9a4a22; }
.step:nth-child(4){ --bg:#faf2d9; --fg:#c9a23d; --fg-d:#7d5f12; }

/* Both panels: same deep green, same size */
.panel.phone, .panel.alt{ background: var(--brand); align-self:stretch; min-height:460px; }
@media (max-width:760px){ .panel.phone, .panel.alt{ min-height:380px; } }

/* Footer store badges on one line */
.badges.stack{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }

/* Chip icons: undo the phone-panel svg rules that pushed them down */
.panel.phone .chip .i{ width:22px; height:22px; max-width:none; margin:0; position:static; z-index:auto; flex:none; }

/* Inner pages */
.page{ max-width:820px; margin:0 auto; padding:70px 30px 90px; }
.page.wide{ max-width:1100px; }
.page h1{ font-size:clamp(36px,6vw,56px); line-height:1.05; letter-spacing:-.04em; margin-bottom:14px; }
.lede{ font-size:18px; max-width:560px; }
.prose h2{ font-size:22px; margin:34px 0 10px; letter-spacing:-.01em; }
.prose p,.prose li{ font-size:16px; margin-bottom:10px; }
.prose ul{ padding-left:20px; color:var(--muted); }
.page a:not(.btn):not(.ccard):not(.help-grid a){ text-decoration:underline; text-underline-offset:3px; }
.note{ margin:24px 0 0; padding:14px 18px; border-radius:14px; background:#faf2d9; color:#7d5f12; font-size:14px; }
.small{ margin-top:22px; font-size:14px; }
.form{ display:grid; gap:16px; margin-top:32px; max-width:560px; }
.form label{ display:grid; gap:6px; font-weight:600; font-size:14px; }
.form input,.form select,.form textarea{ font:inherit; font-weight:400; padding:14px 16px; border:1px solid var(--darkgrey); border-radius:14px; background:#fff; color:var(--ink); }
.form textarea{ min-height:140px; resize:vertical; }
.form .btn{ justify-self:start; border:0; }
.page .checks{ margin-top:26px; }
.help-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; }
.help-grid a{ display:block; padding:24px; border:1px solid var(--darkgrey); border-radius:var(--radius); transition:border-color .2s; }
.help-grid a:hover{ border-color:var(--brand); }
.help-grid h3{ margin-bottom:6px; } .help-grid p{ font-size:15px; }
.faq-list{ margin-top:30px; }
.ccards.four{ grid-template-columns:repeat(4,1fr); margin-top:36px; }
.cart.icon{ display:grid; place-items:center; height:130px; color:var(--brand); }
.cart.icon svg{ width:54px; height:54px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cart.c1{ background:#e4eefb; } .cart.c2{ background:#eaf5e1; } .cart.c3{ background:#fbebe0; } .cart.c4{ background:#faf2d9; }
@media (max-width:1000px){ .ccards.four{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .ccards.four,.help-grid{ grid-template-columns:1fr; } .page{ padding:44px 20px 60px; } }
.prose h3{ font-size:17px; margin:24px 0 8px; }
.prose li strong{ color:var(--ink); }