/* Homepage only. Slate and orange theme, Barlow type. */
:root{--g:#17191C;--s1:#212429;--s2:#2B2F35;--s3:#363B42;--ink:#F5F7FA;--soft:#BCC4CF;--lime:#FF4832;--on-lime:#14181D;--light:#929DA7;--dark-ink:#14181D;--dark-soft:#4A5361;--m:clamp(16px,3vw,40px);--r:8px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body.home{background:var(--g);color:var(--ink);font-family:'Barlow',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
:where(.home) a{color:inherit;text-decoration:none}
.home img{display:block;max-width:100%;height:auto}
.home h1,.home h2,.home .wm{font-family:'Barlow Condensed','Barlow',sans-serif;text-transform:uppercase;font-weight:800;letter-spacing:-.01em;line-height:.95}
.home h2{font-size:clamp(32px,3.4vw,52px)}
.home h3{font-size:20px;font-weight:700;line-height:1.25}
.frame{padding-inline:var(--m)}
.btn-l{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:var(--r);background:var(--lime);color:#fff;font-weight:700;font-size:19px;transition:transform .15s,background-color .15s}
.btn-l:hover{background:#FF6A57}.btn-l:active{transform:scale(.97)}
.btn-d{background:var(--g);color:var(--ink)}.btn-d:hover{background:#23262c}
.home :focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* nav */
.hnav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.hnav .wm{display:flex;align-items:center;gap:12px;font-size:26px}
.hnav .wm img{width:58px;height:41px;object-fit:contain}
.hnav ul{display:flex;align-items:center;gap:28px;list-style:none;padding:0;font-size:16px;font-weight:600;color:var(--soft)}
.hnav ul a:hover{color:var(--ink)}
.hnav .btn-l{height:44px;padding:0 18px;font-size:19px}
@media (max-width:820px){.hnav ul li:not(:last-child){display:none}}

/* hero */
.hero2{position:relative;isolation:isolate;min-height:min(760px,calc(100svh - 84px));display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:56px}
.hero2 .copy{grid-column:1/7;grid-row:1;position:relative;z-index:2;align-self:center;padding-bottom:64px}
.hero2 h1{font-size:clamp(52px,6.2vw,104px)}
.hero2 .lead{font-size:20px;max-width:40ch;margin:28px 0 32px;color:var(--ink)}
.hero2 .note{margin-top:16px;font-size:15px;color:var(--soft)}
.stage{grid-column:7/13;grid-row:1;margin-right:calc(var(--m) * -1);margin-top:0;background:var(--lime);clip-path:polygon(120px 0,100% 0,100% 100%,0 100%,0 120px);padding:56px calc(var(--m) + 24px) 56px 56px;overflow:hidden;align-self:stretch;min-height:0}
@media (max-width:980px){
  .hero2{display:block;padding-top:24px}
  .hero2 h1{font-size:clamp(46px,11vw,80px)}
  .stage{margin:40px calc(var(--m) * -1) 0;padding:40px 0 0 16px;clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 72px);min-height:0}
}

/* app fragments (their own UI conventions) */
[data-ui]{font-family:'Barlow',system-ui,sans-serif;color:#14161a;background:#fff;border-radius:12px;font-size:14px;line-height:1.4;text-transform:none;letter-spacing:0}
.dplan{width:100%;max-width:620px;border-radius:12px;padding:20px 22px 28px}
.dplan .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dplan .who{font-size:16px;font-weight:700}
.dplan .meta{color:#5b6270;font-size:13px}
.dplan .pdf{border:1px solid #d7dbe2;border-radius:6px;padding:6px 10px;font-size:13px;font-weight:600;background:#fff;color:#14161a;cursor:pointer}
.dplan .pdf:hover{background:#f2f4f7}
.seg{display:inline-flex;background:#eef0f3;border-radius:8px;padding:3px;margin:16px 0 12px;gap:2px}
.seg button{border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:#3d4350;padding:8px 14px;border-radius:6px;cursor:pointer;min-height:36px}
.seg button[aria-pressed="true"]{background:#0A0B0D;color:#fff}
.seg button:hover{color:#0A0B0D}
.day{font-size:13px;color:#5b6270;margin-bottom:6px}
.meals{list-style:none;padding:0}
.meals li{display:grid;grid-template-columns:96px 1fr 64px 52px;gap:10px;align-items:baseline;padding:10px 8px;border-top:1px solid #eceef2;border-radius:4px}
.meals li:hover{background:#f6f8fb}
.meals .t{color:#5b6270;font-size:13px}
.meals .n{font-weight:500}
.meals .k,.meals .p{text-align:right;font-variant-numeric:tabular-nums;color:#3d4350}
.tot{display:grid;grid-template-columns:96px 1fr 64px 52px;gap:10px;padding:12px 8px 0;border-top:2px solid #14161a;font-weight:700}
.tot span:nth-child(3),.tot span:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}


/* sections */
.sec{padding-block:clamp(48px,5vw,80px)}
.sec-head{margin-bottom:56px;max-width:20ch}

/* showcase: one check-in, three states */
.states{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px}
.states h2{grid-column:4/13;margin-bottom:8px}
.st-word{grid-column:1/4;text-align:right;align-self:center;font-size:22px;color:var(--soft)}
.crop{grid-column:4/10}
.row{width:100%;max-width:640px;padding:16px 18px;display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;transition:background-color .2s}
.row .av{width:44px;height:44px;border-radius:50%;background:#e7ecf7;color:#1f3d8a;display:grid;place-items:center;font-weight:700}
.row .nm{font-weight:700;font-size:15px}
.row .ln{color:#5b6270;font-size:13px}
.row .acts{display:flex;gap:8px}
.row .acts button,.row .acts a{border:1px solid #d7dbe2;background:#fff;border-radius:6px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#14161a}
.row .acts .pri{background:#0A0B0D;color:#fff;border-color:#0A0B0D}
.row .acts .pri:hover{background:#2a2e36}
.row.hover{background:#f6f8fb}
.row .done{display:inline-flex;align-items:center;gap:6px;color:#1a7f37;font-weight:600;font-size:13px}
.row.is-done{background:#f1f8f2}
.states .sample{grid-column:4/13;font-size:15px;color:var(--soft)}
@media (max-width:980px){
  .states{display:block}
  .states h2{margin-bottom:40px}
  .st-word{text-align:left;font-size:17px;margin:10px 0 48px}
  .row{max-width:none;width:640px}
  .crop{overflow:hidden;margin-right:calc(var(--m) * -1)}
}

/* how it works: four fields */
.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.field{min-height:min(440px,56svh);padding:32px 24px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.field:nth-child(1){background:var(--s1)}.field:nth-child(2){background:var(--s3)}.field:nth-child(3){background:var(--light);color:var(--dark-ink)}.field:nth-child(4){background:var(--lime);color:var(--on-lime)}
.field h2{font-size:clamp(28px,2.4vw,40px);min-height:2em}
.field h2.ghost{visibility:hidden}
.card{width:260px;max-width:100%;padding:16px;align-self:center;transition:transform .15s}
.field:hover .card{transform:translateY(-6px)}
.card .nm{font-weight:700;font-size:15px}
.card .ln{color:#5b6270;font-size:13px;margin-top:2px}
.card .tag{display:inline-block;margin-top:10px;background:#eef0f3;border-radius:4px;padding:3px 8px;font-size:13px;font-weight:600}
.card .tag.ok{background:#e3f4e6;color:#13652b}
.card .bar{height:6px;border-radius:3px;background:#eef0f3;margin-top:10px;overflow:hidden}
.card .bar i{display:block;height:100%;width:92%;background:#1558C9}
.field p{font-size:clamp(22px,2vw,30px);line-height:1.15;font-weight:600}
@media (max-width:980px){
  .fields{grid-template-columns:1fr}
  .field{min-height:0;padding:48px 20px;justify-content:flex-start;gap:24px}
  .field h2.ghost{display:none}
  .field p{font-size:24px}
  .card{align-self:flex-start}
}

/* features: pick one, see its screen */
.light{background:var(--light);color:var(--dark-ink)}
.tour{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.tour-l{grid-column:1/6}
.tour-l h2{margin-bottom:32px}
.fts{list-style:none;padding:0;display:grid;gap:6px}
.ft{width:100%;text-align:left;border:0;background:transparent;color:var(--dark-ink);font:inherit;padding:16px 20px;border-radius:var(--r);cursor:pointer;display:grid;gap:2px;transition:background-color .15s}
.ft b{font-size:20px}
.ft span{font-size:16px;color:#2B3038;display:none}
.ft:hover{background:rgba(255,255,255,.45)}
.ft[aria-pressed="true"]{background:#fff}
.ft[aria-pressed="true"] span{display:block}
.ft[aria-pressed="true"] b{color:#D42E1A}
.phone{grid-column:6/13;justify-self:center;background:var(--g);border-radius:40px;padding:12px;line-height:0}
.phone img{height:min(860px,86vh);width:auto;max-width:100%;border-radius:30px;object-fit:contain;animation:fadein .35s ease}
.phone img[hidden]{display:none}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:980px){.tour{display:block}.phone{margin-top:32px}.phone img{height:min(520px,64vh)}}

/* pricing: three plans, Pro highlighted */
.plans-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 48px;margin-bottom:40px}
.plans-head p{max-width:46ch;font-size:17px;color:var(--soft)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.pl{background:var(--s1);border-radius:12px;padding:32px 28px;transition:transform .2s}
.pl:hover{transform:translateY(-4px)}
.pl h3{font-family:'Barlow Condensed','Barlow',sans-serif;text-transform:uppercase;font-size:30px;font-weight:800}
.pl .for{color:var(--soft);font-size:16px}
.pl .amt{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:800;font-size:64px;line-height:1;margin:20px 0 20px}
.pl .amt span{font-size:32px;vertical-align:top;margin-right:2px}
.pl .amt small{font-family:'Barlow',sans-serif;font-size:16px;font-weight:600;color:var(--soft);margin-left:6px}
.pl ul{list-style:none;padding:0;display:grid;gap:10px;font-size:17px}
.pl li{display:flex;gap:10px}
.pl li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--lime)}
.pl.pop{background:var(--lime);color:var(--on-lime);transform:scale(1.03)}
.pl.pop:hover{transform:scale(1.03) translateY(-4px)}
.pl.pop .for,.pl.pop .amt small{color:var(--on-lime)}
.pl.pop li::before{background:var(--on-lime)}
.badge{display:inline-block;background:#17191C;color:#fff;font-size:14px;font-weight:700;border-radius:99px;padding:4px 12px;margin-bottom:12px}
.plans-go{margin-top:32px}
@media (max-width:900px){.plans{grid-template-columns:1fr}.pl.pop{transform:none}.pl.pop:hover{transform:translateY(-4px)}}

/* faq */
.faq2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.faq2 h2{grid-column:1/5;position:sticky;top:96px;align-self:start;font-size:clamp(40px,4vw,64px)}
.faq2 .list{grid-column:5/13;display:grid;gap:8px}
.faq2 details{background:#fff;border-radius:var(--r);transition:background-color .2s}
.faq2 summary{list-style:none;cursor:pointer;min-height:72px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:20px;font-weight:600}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary:hover{background:#F6F8FB;border-radius:var(--r)}
.pm{position:relative;width:16px;height:16px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;background:currentColor;border-radius:2px;transition:transform .2s}
.pm::after{transform:rotate(90deg)}
.faq2 details[open]{background:var(--lime);color:var(--on-lime)}
.faq2 details[open] summary:hover{background:transparent}
.faq2 details[open] .pm::after{transform:rotate(0)}
.faq2 details p{padding:0 24px 24px;font-size:17px;max-width:52ch}
@media (max-width:980px){.faq2{display:block}.faq2 h2{position:static;font-size:9vw;margin-bottom:32px}.faq2 summary{font-size:18px;min-height:64px}.faq2 details p{font-size:16px;padding:0 20px 20px}}

/* cta: first step already open */
.cta2{background:var(--lime);color:var(--on-lime);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding-block:56px}
.cta2 .l{grid-column:1/6;align-self:end}
.cta2 h2{font-size:clamp(56px,7vw,112px);line-height:.92}
.cta2 .l p{margin-top:20px;font-size:17px;max-width:36ch}
.dlg{grid-column:7/12;width:440px;max-width:100%;padding:24px;box-shadow:0 24px 60px rgba(10,11,13,.28);justify-self:start}
.dlg h3{font-size:18px}
.dlg label,.dlg .lbl{display:block;font-size:13px;font-weight:600;color:#3d4350;margin:18px 0 6px}
.dlg input{width:100%;height:44px;border:1px solid #c9ced8;border-radius:6px;padding:0 12px;font:inherit;font-size:15px}
.dlg input:focus{outline:2px solid #1558C9;outline-offset:1px;border-color:#1558C9}
.dlg .seg{margin:0}
.dlg .go{margin-top:22px;width:100%;height:48px;display:flex;align-items:center;justify-content:center;background:#0A0B0D;color:#fff;border-radius:6px;font-weight:700;font-size:16px}
.dlg .go:hover{background:#2a2e36}
@media (max-width:980px){.cta2{display:block;padding-top:64px}.cta2 h2{font-size:13vw}.dlg{width:100%;margin-top:48px}.dlg .go{height:52px}}

/* footer tiles */
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:8px}
.tile{background:var(--s1);border-radius:var(--r);padding:20px 24px;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.t-say{grid-column:1/5}.t-say p:first-child{font-size:20px;line-height:1.25}
.t-say small,.t-cred{font-size:13px;color:var(--soft)}
.t-nav{grid-column:5/8}.t-nav ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:16px}.t-nav a:hover{color:var(--lime)}
.t-help{grid-column:8/10;font-size:16px}
.t-mail{grid-column:10/13}.t-mail a{font-size:20px;font-weight:600;word-break:break-all}.t-mail a:hover{color:var(--lime)}
.t-wm{grid-column:1/9;min-height:0;padding-block:28px;background:var(--ink);color:var(--g);align-items:center;justify-content:center}
.t-wm .wm{font-size:6vw;line-height:.85;white-space:nowrap}
.t-go{grid-column:9/13;min-height:0;background:var(--lime);color:var(--on-lime);transition:background-color .15s}
.t-go:hover{background:#FF6A57}
.t-go b{font-family:'Barlow Condensed','Barlow',sans-serif;text-transform:uppercase;font-size:32px;line-height:.95}
.t-go svg{align-self:flex-end}
@media (max-width:820px){
  .tiles{grid-template-columns:1fr 1fr;gap:6px;padding:6px}
  .tile{padding:20px;min-height:160px}
  .t-wm{grid-column:1/3;order:-2;min-height:160px}.t-wm .wm{font-size:14vw}
  .t-go{grid-column:1/3;order:-1;min-height:180px}
  .t-nav{grid-column:1/2}.t-mail{grid-column:2/3}.t-help{grid-column:1/2}.t-say{grid-column:2/3}
  .t-say p:first-child{font-size:18px}
}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .rise.in{opacity:1;transform:none}
  .js .stage{clip-path:polygon(120px 0,100% 0,100% 100%,0 100%,0 120px) ;animation:shutter 1.1s cubic-bezier(.7,0,.2,1) both .15s}
  .js .stage .dplan{animation:settle 1.1s cubic-bezier(.2,.7,.2,1) both .15s}
  @keyframes shutter{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 120px)}to{clip-path:polygon(120px 0,100% 0,100% 100%,0 100%,0 120px)}}
  @keyframes settle{from{transform:scale(1.12) translateX(40px)}to{transform:none}}
  .price2 .peek{animation:drift 9s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translateY(0) }to{transform:translateY(-14px)}}
}
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  @keyframes shutter{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 72px)}to{clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 72px)}}
}

/* hero photo, darkened so the type reads */
.home .hero-bg{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:left center;z-index:-1;filter:brightness(.38) saturate(.85)}
/* footer: full logo lockup */
.t-wm .lockup{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.t-wm .lockup img{width:clamp(80px,9vw,150px);height:auto}
.lk-sep{width:3px;align-self:stretch;background:#17191C;opacity:.3}
.lk-name{font:italic 800 clamp(34px,4.4vw,76px)/.95 'Barlow',sans-serif;letter-spacing:-.02em;color:#17191C;text-transform:none}
.lk-name span{color:#FF4832}
.lk-tag{font:600 clamp(11px,1vw,17px) 'Barlow',sans-serif;letter-spacing:.3em;color:#4A5361;margin-top:10px}
@media (max-width:820px){.t-wm{padding:24px 16px}.lk-tag{letter-spacing:.18em}}
/* compact close: CTA + footer fit one screen */
.cta2{padding-block:26px}
.cta2 h2{font-size:clamp(44px,5vw,80px)}
.cta2 .l p{margin-top:14px}
.dlg{padding:20px}.dlg label,.dlg .lbl{margin:12px 0 6px}.dlg .go{margin-top:16px}
.tiles .tile{padding:16px 20px;gap:10px}
.t-say p:first-child{font-size:17px}
.t-say small{font-size:13px}
.t-nav ul{gap:4px 16px;font-size:15px}
.t-help,.t-mail p{font-size:15px}.t-mail a{font-size:17px}
.t-wm{padding-block:14px}
.t-wm .lockup img{width:clamp(60px,6vw,104px)}
.lk-name{font-size:clamp(28px,3.4vw,58px)}
.lk-tag{margin-top:6px}
.t-go b{font-size:26px}