:root{
  --teal:#123D46;
  --teal-2:#1E5660;
  --cream:#F5EFE3;
  --paper:#FFFDF8;
  --gold:#C99A3B;
  --text:#173A42;
  --muted:#64777C;
  --line:rgba(18,61,70,.10);
  --shadow:0 14px 36px rgba(18,61,70,.12);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:17px;
}

*{box-sizing:border-box}
html{background:var(--teal)}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh;
}
button,a{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}

.app-shell{
  width:min(100%,540px);
  margin:0 auto;
  min-height:100vh;
  background:var(--cream);
  box-shadow:0 0 48px rgba(0,0,0,.14);
  position:relative;
  overflow-x:hidden;
  padding-bottom:92px;
}

.hero{
  color:white;
  padding:calc(24px + env(safe-area-inset-top)) 20px 26px;
  background:
    radial-gradient(circle at 92% 4%, rgba(201,154,59,.33), transparent 28%),
    linear-gradient(155deg,var(--teal) 0%,var(--teal-2) 100%);
  border-bottom-left-radius:32px;
  border-bottom-right-radius:32px;
}

.brand-row{
  display:flex;
  align-items:center;
  gap:13px;
}
.app-logo{
  width:64px;
  height:64px;
  border-radius:18px;
  box-shadow:0 9px 24px rgba(0,0,0,.20);
}
.brand-kicker{
  margin:0 0 3px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.14em;
  font-size:.72rem;
  opacity:.74;
}
.brand-title{
  margin:0;
  font-size:1.55rem;
  line-height:1.04;
  letter-spacing:-.02em;
}
.hero-copy{
  margin:23px 0 17px;
  max-width:32rem;
  line-height:1.5;
  font-size:1.02rem;
  color:rgba(255,255,255,.91);
}
.install-button{
  width:100%;
  min-height:60px;
  border:0;
  border-radius:18px;
  background:var(--gold);
  color:#19343A;
  font-weight:900;
  font-size:1.05rem;
  box-shadow:0 10px 24px rgba(0,0,0,.19);
}
.install-button[hidden]{display:none}
.ios-help{
  display:none;
  margin-top:12px;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.08);
  padding:13px 14px;
  border-radius:15px;
  line-height:1.4;
  font-size:.91rem;
}

main{padding:22px 17px 32px}
.section-title{
  margin:0 0 13px;
  font-size:1.28rem;
  letter-spacing:-.02em;
}

.quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.quick-card{
  min-height:168px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;
  background:var(--paper);
  box-shadow:var(--shadow);
  color:var(--text);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .16s ease, box-shadow .16s ease;
}
.quick-card:active{transform:scale(.985)}
.icon-box{
  width:54px;
  height:54px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#E4ECEA;
}
.icon-box svg{
  width:28px;
  height:28px;
  stroke:var(--teal);
}
.quick-card h3{
  margin:0 0 5px;
  font-size:1.12rem;
}
.quick-card p{
  margin:0;
  color:var(--muted);
  line-height:1.32;
  font-size:.88rem;
}

.feature-card{
  margin-top:19px;
  padding:22px;
  border-radius:var(--radius-xl);
  background:
    radial-gradient(circle at 90% 20%, rgba(201,154,59,.28), transparent 28%),
    var(--teal);
  color:white;
  box-shadow:var(--shadow);
}
.feature-eyebrow{
  margin:0 0 8px;
  color:#E9C77F;
  font-size:.75rem;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.15em;
}
.feature-card h2{
  margin:0 0 8px;
  font-size:1.5rem;
  line-height:1.08;
}
.feature-card p{
  margin:0 0 17px;
  color:rgba(255,255,255,.84);
  line-height:1.5;
}
.feature-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 17px;
  background:var(--paper);
  color:var(--teal);
  border-radius:14px;
  text-decoration:none;
  font-weight:850;
}

.more-section{margin-top:24px}
.more-list{
  display:grid;
  gap:11px;
}
.more-item{
  min-height:82px;
  padding:13px 14px;
  border-radius:18px;
  background:var(--paper);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--text);
  text-decoration:none;
  box-shadow:0 8px 22px rgba(18,61,70,.08);
}
.more-item .icon-box{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:14px;
}
.more-item .icon-box svg{width:24px;height:24px}
.more-copy{min-width:0;flex:1}
.more-copy strong{display:block;font-size:1rem;margin-bottom:3px}
.more-copy span{display:block;color:var(--muted);font-size:.85rem}
.chevron{
  font-size:1.5rem;
  color:#8B999D;
}

.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100%,540px);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,253,248,.96);
  border-top:1px solid var(--line);
  backdrop-filter:blur(16px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  z-index:20;
}
.nav-btn{
  border:0;
  background:transparent;
  color:#78898D;
  min-height:58px;
  border-radius:15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-weight:750;
  font-size:.73rem;
}
.nav-btn svg{width:23px;height:23px;stroke:currentColor}
.nav-btn.active{
  color:var(--teal);
  background:#E7EEEC;
}

.toast{
  position:fixed;
  left:50%;
  bottom:94px;
  transform:translateX(-50%);
  width:min(calc(100% - 32px),500px);
  background:#102F36;
  color:white;
  border-radius:15px;
  padding:14px 16px;
  box-shadow:0 16px 38px rgba(0,0,0,.25);
  display:none;
  z-index:30;
}

.page-panel{display:none}
.page-panel.active{display:block}

.simple-page{
  padding:24px 17px 34px;
}
.simple-page h2{margin:0 0 8px;font-size:1.55rem}
.simple-page > p{margin:0 0 18px;color:var(--muted);line-height:1.5}
.simple-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.simple-card + .simple-card{margin-top:13px}
.simple-card h3{margin:0 0 7px}
.simple-card p{margin:0;color:var(--muted);line-height:1.48}

@media (max-width:370px){
  .quick-grid{grid-template-columns:1fr}
  .quick-card{min-height:145px}
}

@media (min-width:700px){
  body{padding:24px 0}
  .app-shell{min-height:calc(100vh - 48px);border-radius:28px}
  .bottom-nav{bottom:24px;border-radius:0 0 28px 28px}
}