/* TeddyGreenFingers site - one stylesheet for the landing and legal pages.
   Fonts and palette mirror the app itself: Fraunces carries personality,
   DM Sans carries text, leaf green on warm sand, bark tones after dark. */

@font-face{
  font-family:'Fraunces'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/fonts/Fraunces-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'DM Sans'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/fonts/DMSans-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'DM Sans'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/fonts/DMSans-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'DM Sans'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/fonts/DMSans-Bold.woff2') format('woff2');
}

:root{
  --bg:#FAF9F7; --surface:#FFFFFF; --sunken:#F2F0EC;
  --ink:#1A1815; --ink2:#5C564E; --muted:#8A837A;
  --brand:#2E6446; --brand-strong:#244F38; --brand-ink:#12271C;
  --brand-soft:#DCEBE1; --brand-wash:#F0F7F2;
  --clay:#C0653C; --clay-soft:#F9E6DA;
  --line:#E6E3DD;
  --band:#1B3B2A; --band-ink:#EDF3EC; --band-ink2:#B9D7C4;
  --shadow:0 24px 60px -28px rgb(26 24 21 / .35);
  --radius:18px;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --text:'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --max:71rem; --prose:44rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101410; --surface:#171C17; --sunken:#1E241E;
    --ink:#EEF0E8; --ink2:#BEC5B7; --muted:#8E968A;
    --brand:#8DBC9F; --brand-strong:#B9D7C4; --brand-ink:#DCEBE1;
    --brand-soft:#1B2B20; --brand-wash:#151B15;
    --clay:#E3A582; --clay-soft:#3A2418;
    --line:#2A322A;
    --band:#0C1810; --band-ink:#EDF3EC; --band-ink2:#8DBC9F;
    --shadow:0 24px 60px -28px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"]{
  --bg:#101410; --surface:#171C17; --sunken:#1E241E;
  --ink:#EEF0E8; --ink2:#BEC5B7; --muted:#8E968A;
  --brand:#8DBC9F; --brand-strong:#B9D7C4; --brand-ink:#DCEBE1;
  --brand-soft:#1B2B20; --brand-wash:#151B15;
  --clay:#E3A582; --clay-soft:#3A2418;
  --line:#2A322A;
  --band:#0C1810; --band-ink:#EDF3EC; --band-ink2:#8DBC9F;
  --shadow:0 24px 60px -28px rgb(0 0 0 / .6);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 var(--text);
  font-feature-settings:'ss01';
}
img{max-width:100%; height:auto}
a{color:var(--brand)}
::selection{background:var(--brand-soft); color:var(--brand-ink)}

.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.prose-width{max-width:var(--prose)}

/* ---------------------------------------------------------------- header */
header.site{
  border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(1.2) blur(8px);
}
header.site .wrap{display:flex; align-items:center; gap:12px; padding-top:14px; padding-bottom:14px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:-.01em}
.logo .mark{width:34px;height:34px;border-radius:11px;background:var(--brand-soft);
  display:grid;place-items:center;font-size:19px;flex:none}
nav.site{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
nav.site a{color:var(--ink2); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:7px 11px; border-radius:9px}
nav.site a:hover{background:var(--sunken); color:var(--ink)}
nav.site a[aria-current="page"]{background:var(--brand-soft); color:var(--brand); font-weight:700}

/* ------------------------------------------------------------ type scale */
h1,h2.display{font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.12; margin:0 0 14px}
h1{font-size:clamp(2rem,5.4vw,3.3rem)}
h2.display{font-size:clamp(1.5rem,3.4vw,2.2rem)}
h2{font-size:1.14rem; letter-spacing:.01em; margin:38px 0 10px; color:var(--brand)}
h3{font-size:1.02rem; margin:26px 0 6px}
p,li{color:var(--ink2)}
p{margin:0 0 14px}
ul{padding-left:1.15rem; margin:0 0 14px}
li{margin:0 0 7px}
.lede{font-size:1.12rem; color:var(--ink); line-height:1.6}
.updated{font-size:13.5px; color:var(--muted); margin:0 0 26px}
.kicker{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--clay); margin:0 0 12px;
}

/* --------------------------------------------------------------- pieces */
.card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 22px 8px; margin:0 0 20px}
.card h2:first-child,.card h3:first-child{margin-top:0}
.callout{background:var(--brand-wash); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px 8px; margin:0 0 22px}
.callout p{color:var(--ink)}
.muted{color:var(--muted); font-size:13.5px}
.blank{color:var(--muted); font-style:italic}
ul.index{columns:2; gap:28px; list-style:none; padding:0; margin:0 0 18px}
ul.index li{break-inside:avoid; margin:0 0 6px}
@media (max-width:640px){ul.index{columns:1}}
main > .wrap.prose-width{padding-top:clamp(1.8rem,4vw,3rem); padding-bottom:clamp(2.4rem,5vw,4rem)}
header.site nav a[aria-current="page"]{color:var(--ink); font-weight:700}
.steps{counter-reset:s; list-style:none; padding:0; margin:0 0 8px}
.steps li{counter-increment:s; position:relative; padding-left:42px; margin:0 0 16px; color:var(--ink2)}
.steps li::before{content:counter(s); position:absolute; left:0; top:-1px;
  width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--bg);
  display:grid;place-items:center;font-size:14px;font-weight:700}
.mail{display:inline-block; font-weight:600; word-break:break-all}
table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink);font-weight:700}
td{color:var(--ink2)}
.scroll{overflow-x:auto}

.btn{display:inline-block; text-decoration:none; font-weight:700; font-size:15.5px;
  padding:13px 22px; border-radius:14px; border:1.5px solid transparent}
.btn.primary{background:var(--brand); color:#FAF9F7}
.btn.primary:hover{background:var(--brand-strong)}
:root[data-theme="dark"] .btn.primary{color:#101410}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.primary{color:#101410}}
.btn.ghost{border-color:var(--line); color:var(--ink)}
.btn.ghost:hover{background:var(--sunken)}

/* the phone frame every screenshot sits in */
.phone{border-radius:44px; padding:11px;
  background:linear-gradient(180deg,#39443A,#141A14);
  box-shadow:var(--shadow), inset 0 1px 0 rgb(255 255 255 / .09);
}
.phone img{display:block; width:100%; border-radius:34px; background:#101410}

/* ---------------------------------------------------------- landing only */
.hero{overflow:hidden; border-bottom:1px solid var(--line); background:var(--brand-wash)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(250px,330px);
  gap:clamp(2rem,6vw,5rem); align-items:center; padding-top:clamp(2.6rem,6vw,5rem); padding-bottom:clamp(2.6rem,6vw,4.5rem)}
.hero .copy p.lede{max-width:34rem}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin:24px 0 18px}
.hero .trust{font-size:14px; color:var(--muted); margin:0}
.hero .phone-well{position:relative}
.hero .phone-well::before{content:''; position:absolute; inset:-14% -22%;
  background:radial-gradient(closest-side, var(--brand-soft), transparent 72%);
  z-index:0}
.hero .phone{position:relative; z-index:1; transform:rotate(1.6deg)}

.stats{border-bottom:1px solid var(--line)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding-top:26px; padding-bottom:26px; text-align:left}
.stats b{display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3vw,2rem); color:var(--brand); line-height:1.1}
.stats span{font-size:13.5px; color:var(--ink2)}
.stats .note{grid-column:1 / -1; font-size:13.5px; color:var(--muted); margin:4px 0 0}

.band{background:var(--band); color:var(--band-ink)}
.band .wrap{padding-top:clamp(2.6rem,6vw,4.5rem); padding-bottom:clamp(2.2rem,5vw,4rem)}
.band h2.display{color:var(--band-ink)}
.band .kicker{color:#E3A582}
.band p{color:var(--band-ink2); max-width:46rem}
.band p strong{color:var(--band-ink)}
/* Cards sitting on the band are light surfaces again - without this they
   inherit the band's pale ink and turn into white-on-white. */
.band .card{border-color:transparent}
.band .card h3{color:var(--ink)}
.band .card p{color:var(--ink2)}
.band .card em{color:var(--clay); font-style:italic}

.tour{padding-top:clamp(2.2rem,5vw,4rem)}
.feature{display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,300px);
  gap:clamp(2rem,6vw,5.5rem); align-items:center;
  padding:clamp(2rem,4.5vw,3.6rem) 0; border-bottom:1px solid var(--line)}
.feature:last-of-type{border-bottom:none}
.feature.no-rule{border-bottom:none}
.feature.flip{grid-template-columns:minmax(230px,300px) minmax(0,1fr)}
.feature.flip .phone-well{order:-1}
/* rows that carry two phones side by side get a wider media column */
.feature.wide-media{grid-template-columns:minmax(0,1fr) minmax(300px,430px)}
.feature.flip.wide-media{grid-template-columns:minmax(300px,430px) minmax(0,1fr)}
.feature h3{font-family:var(--display); font-weight:600; font-size:clamp(1.35rem,2.6vw,1.8rem); letter-spacing:-.015em; margin:0 0 12px}
.feature p{max-width:32rem}
.feature .fine{font-size:14px; color:var(--muted)}
.feature .pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.feature .pair .phone{border-radius:34px; padding:8px}
.feature .pair .phone img{border-radius:26px}
.feature .pair .phone:last-child{transform:translateY(26px)}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0 8px}
.grid3 .card{margin:0; padding-bottom:16px}
.grid3 .card h3{margin-top:0; font-size:1.02rem}
.quote{font-family:var(--display); font-weight:600; font-size:1.06rem; line-height:1.5;
  color:var(--ink); border-left:3px solid var(--clay); padding-left:14px; margin:10px 0 14px}

.closing{background:var(--brand-wash); border-top:1px solid var(--line)}
.closing .wrap{padding-top:clamp(2.4rem,5vw,4rem); padding-bottom:clamp(2.4rem,5vw,4rem); text-align:center}
.closing h2.display{margin-bottom:10px}
.closing p{max-width:36rem; margin-left:auto; margin-right:auto}
.closing .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px}

footer.site{border-top:1px solid var(--line); background:var(--surface); padding:26px 0}
footer.site .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
footer.site p{margin:0;font-size:14px;color:var(--muted)}
footer.site nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
footer.site nav a{font-size:14px}

@media (max-width: 760px){
  .hero .wrap{grid-template-columns:1fr; gap:2.4rem}
  .hero .phone-well{max-width:290px; margin:0 auto}
  .stats .wrap{grid-template-columns:repeat(2,1fr); gap:18px 10px}
  .feature, .feature.flip, .feature.wide-media, .feature.flip.wide-media{grid-template-columns:1fr; gap:1.8rem}
  .feature .phone-well{max-width:270px; margin:0 auto}
  .feature.flip .phone-well{order:0}
  .feature .pair{max-width:400px}
  .grid3{grid-template-columns:1fr}
}

/* ------------------------------------------------ brand mark in the header */
.logo img.mark{width:34px; height:34px; border-radius:11px; background:var(--brand-soft);
  object-fit:cover; flex:none; display:block}

/* ---------------------------------------------------- illustrated showcase */
.showcase{padding:10px 0 2px}
.showcase img{display:block; width:100%; height:auto; border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--shadow)}
.showcase .caption{margin:16px auto 0; max-width:54ch; text-align:center;
  color:var(--ink2); font-size:15px}

/* ---------------------------------------------------------- spot row (3-up) */
.spots{padding:46px 0 6px}
.spots .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.spot{text-align:center}
.spot img{width:100%; max-width:168px; height:auto; aspect-ratio:1; display:block;
  margin:0 auto 12px; border-radius:var(--radius); background:#FAF9F7;
  border:1px solid var(--line)}
.spot h3{font-family:var(--display); font-weight:600; font-size:1.16rem;
  color:var(--brand-strong); letter-spacing:-.01em; margin:0 0 7px}
.spot p{margin:0; color:var(--ink2); font-size:15px}
@media (max-width:760px){
  .spots{padding:34px 0 2px}
  .spots .wrap{grid-template-columns:1fr; gap:32px}
  .spot img{max-width:150px}
}

.trust a{color:inherit}

/* footer privacy statement */
footer.site .privacy-line{flex-basis:100%;font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 4px;max-width:760px}
footer.site .privacy-line a{color:inherit;text-decoration:underline}