/* Seed Saint home page: hero, services, support, process, values, pricing, FAQ, contact, icon tiles. */
/* hero (photo context: text stays light in both themes) */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;color:#eef4fa;overflow:hidden;background:#001423}
.hero picture,.hero img.hero-img{position:absolute;inset:0;width:100%;height:100%}
.hero img.hero-img{object-fit:cover;object-position:68% 50%;animation:settle 1.8s var(--ease) both}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#001423 8%,rgba(0,20,35,.86) 38%,rgba(0,20,35,.25) 78%),linear-gradient(0deg,#001423 0%,transparent 28%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:64px}
.hero-copy{max-width:640px}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#c3d3e2;max-width:30em;margin:26px 0 34px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero .rise{animation:rise .9s var(--ease) both}
.hero .rise:nth-child(2){animation-delay:.12s}
.hero .rise:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes settle{from{opacity:0;transform:scale(1.06)}}
@supports (animation-timeline:scroll()){
  .hero img.hero-img{animation:settle 1.8s var(--ease) both, drift linear both;animation-timeline:auto, scroll(root);animation-range:normal, 0 100vh}
  @keyframes drift{to{transform:translateY(8%) scale(1.04)}}
}
.statement h2{max-width:16em}
.audiences{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:48px 0 0;padding:0;list-style:none;max-width:760px}
.audiences li{font:600 clamp(1.1rem,2vw,1.5rem) var(--display);padding:14px 0;border-top:1px solid var(--line);color:var(--muted);transition:color .25s,transform .35s var(--ease)}
.audiences li:hover{color:var(--ink);transform:translateX(10px)}
/* bento: services */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:48px}
.cell{position:relative;border-radius:var(--r-card);padding:clamp(26px,3.2vw,44px);overflow:hidden;border:1px solid var(--line);background:var(--surface);isolation:isolate}
.cell h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;line-height:1.1}
.cell p{margin:14px 0 0;color:var(--muted);max-width:30em}
.svc-a{grid-column:span 7;min-height:380px;background:linear-gradient(145deg,#002b49 0%,#00537f 55%,#00a3e0 130%);color:#eef4fa;border-color:transparent}
.svc-a p{color:#cfe0ee}
.svc-b{grid-column:span 5;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end}
.cell .wm{position:absolute;z-index:-1;right:-6%;top:-10%;width:62%;aspect-ratio:1;background:#fff;opacity:.13;-webkit-mask:url(mark-alpha.png) center/contain no-repeat;mask:url(mark-alpha.png) center/contain no-repeat;pointer-events:none}
.svc-b .wm{background:var(--ink);opacity:.07;right:-10%;top:-14%;width:80%}
.cell.spot::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(0,163,224,.22),transparent 60%);opacity:0;transition:opacity .3s}
.cell.spot:hover::after{opacity:1}
.svc-a .svc-no,.svc-b .svc-no{font:600 .85rem var(--body);color:var(--accent-text);margin-bottom:auto;padding-bottom:40px;display:block}
.svc-a{display:flex;flex-direction:column;justify-content:flex-end}
.svc-a .svc-no{color:#7fd4f5}
/* support: sticky heading, ruled rows */
.support-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.sticky{position:sticky;top:110px}
.rows{display:grid}
.row{padding:34px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700}
.row p{margin:10px 0 0;color:var(--muted);max-width:32em}
/* process: sticky stack, CSS only */
.process{background:var(--surface);border-block:1px solid var(--line)}
.stack{margin-top:48px;position:relative}
.step{position:sticky;top:calc(96px + var(--i)*18px);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(26px,3.4vw,46px);margin-bottom:22px;display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:end;min-height:230px;box-shadow:var(--shadow)}
.step h3{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:700}
.step p{margin:0;color:var(--muted);max-width:30em}
.step .out{display:block;margin-top:12px;color:var(--accent-text);font-weight:600;font-size:.95rem}
/* values: bento with rhythm */
.values-sec{position:relative;overflow:hidden}
.vgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.v{border-radius:var(--r-card);padding:clamp(24px,2.6vw,36px);border:1px solid var(--line);background:var(--surface);min-height:230px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;isolation:isolate}
.v i{font:600 .95rem var(--display);font-style:normal;color:var(--accent-text)}
.v h3{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:700;margin:26px 0 8px;line-height:1.1}
.v p{margin:0;color:var(--muted);font-size:.98rem;max-width:30em}
.v1{grid-column:span 4;background:linear-gradient(120deg,#002b49,#00537f);color:#eef4fa;border-color:transparent}
.v1 p{color:#cfe0ee}
.v1 i{color:#7fd4f5}
.v2{grid-column:span 2}
.v3{grid-column:span 2;background:var(--surface-2)}
.v4{grid-column:span 4}
.v5{grid-column:span 3;background:var(--surface-2)}
.v6{grid-column:span 3;background:linear-gradient(160deg,#001423,#00304f);color:#eef4fa;border-color:transparent}
.v6 p{color:#b6cadb}
.v6 i{color:#7fd4f5}
/* pricing: asymmetric */
.pricing-grid{display:grid;grid-template-columns:7fr 5fr;gap:16px;margin-top:48px}
.stackcol{display:grid;gap:16px}
.pcard{border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);padding:clamp(26px,3vw,42px)}
.pcard.big{background:linear-gradient(150deg,#002b49 0%,#00406a 70%);color:#eef4fa;border-color:rgba(0,163,224,.5);display:flex;flex-direction:column}
.pcard .lbl{font-weight:600;font-size:.9rem;color:var(--accent-text)}
.pcard.big .lbl{color:#7fd4f5}
.pcard h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;margin:8px 0 6px}
.amt{font:800 clamp(2.4rem,4.6vw,3.8rem)/1 var(--display);letter-spacing:-.04em;margin:14px 0 6px}
.amt small{font:500 .95rem var(--body);letter-spacing:0;color:var(--muted);margin-left:6px}
.pcard.big .amt small,.pcard.big p{color:#cfe0ee}
.pcard p{margin:6px 0 0;color:var(--muted)}
.pcard ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted);font-size:.97rem}
.pcard ul li{padding-left:22px;position:relative}
.pcard ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--accent)}
.pcard.big ul{color:#dbe8f3}
.fine{margin:22px 0 0;color:var(--muted);font-size:.92rem}
/* contact */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.direct a{color:var(--accent-text);font-weight:600}
form.lead{display:grid;gap:18px;padding:clamp(24px,3vw,38px);border-radius:var(--r-card);background:var(--bg);border:1px solid var(--line)}
label{font-size:.9rem;font-weight:600;display:grid;gap:8px;color:var(--ink)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-field);padding:14px 16px;width:100%;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,163,224,.28)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.status{font-size:.95rem;margin:0;min-height:1.5em}
.status.ok{color:var(--accent-text);font-weight:600}
.status.err{color:#ff8d8d}
.hp{position:absolute;left:-9999px}
form.lead .btn{justify-self:start}
footer{padding:56px 0 44px;border-top:1px solid var(--line);color:var(--muted);font-size:.93rem}
.foot{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.foot .brand b{color:var(--ink)}
.tagline{font:600 clamp(1.05rem,1.8vw,1.3rem) var(--display);color:var(--ink);margin:18px 0 0;max-width:20em;line-height:1.3}
.row h3{display:flex;align-items:center;gap:14px}
.step-head{display:grid;gap:6px;align-content:end}
.stage{font:600 .9rem var(--body);color:var(--accent-text)}
.pcard .lbl{display:flex;align-items:center;gap:10px}
.grow-trio{display:flex;flex-wrap:wrap;gap:12px 40px;list-style:none;margin:48px 0 0;padding:0}
.grow-trio li{display:flex;align-items:center;gap:12px;font:600 1.05rem var(--display);color:var(--muted)}
.consent{margin:0;font-size:.88rem;color:var(--muted)}
.consent a{color:var(--accent-text)}
.foot-links{display:flex;gap:20px;margin-top:6px}
.cell,.v,.pcard,.step,form.lead{box-shadow:var(--sh-1);transition:transform .6s var(--ease-out-expo),box-shadow .6s var(--ease-out-expo)}
.cell:hover,.v:hover,.pcard:hover,form.lead:focus-within{transform:translateY(-4px);box-shadow:var(--sh-2)}
.step:hover{box-shadow:var(--sh-2)}
.faq-list details{box-shadow:var(--sh-1);transition:box-shadow .5s var(--ease-out-expo)}
.faq-list details[open],.faq-list details:hover{box-shadow:var(--sh-2)}
/* icon tiles: squircle, soft inner highlight, layered shadow */
.tile{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;color:var(--accent-text);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),var(--surface-2);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(var(--shc),.3),0 10px 18px -10px rgba(var(--shc),.55);
  transition:transform .55s var(--ease-out-expo),box-shadow .55s var(--ease-out-expo)}
.tile .ico{width:60%;height:60%;fill:currentColor;transform-origin:50% 50%}
.tile-lg{width:64px;height:64px;border-radius:18px;margin-bottom:auto}
.svc-a .tile{color:#bfeaff;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border-color:rgba(255,255,255,.2)}
.lbl .tile{width:36px;height:36px;border-radius:11px}
.pcard.big .tile{color:#bfeaff;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border-color:rgba(255,255,255,.18)}
.row h3 .tile{width:44px;height:44px;border-radius:13px}
.grow-trio .tile{width:48px;height:48px}
.step-head .tile{margin-bottom:8px;width:52px;height:52px}
@media (prefers-reduced-motion:no-preference){
  .tile:hover{transform:translateY(-3px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(var(--shc),.3),0 16px 26px -10px rgba(var(--shc),.6)}
  .tile:hover .ico{animation:var(--a) .95s var(--ease-out-expo) both}
  .tile[data-i="acorn"]{--a:a-acorn}
  .tile[data-i="shovel"]{--a:a-shovel}
  .tile[data-i="plant"]{--a:a-plant}
  .tile[data-i="drop"]{--a:a-drop}
  .tile[data-i="basket"]{--a:a-basket}
  .tile[data-i="sun"]{--a:a-sun}
  .tile[data-i="tree"],.tile[data-i="tree-evergreen"]{--a:a-tree}
  .tile[data-i="chats"]{--a:a-chats}
  .tile[data-i="wrench"]{--a:a-wrench}
  .tile[data-i="shield-check"]{--a:a-shield}
  .tile[data-i="plant"] .ico,.tile[data-i="tree"] .ico,.tile[data-i="tree-evergreen"] .ico{transform-origin:50% 100%}
  .tile[data-i="shovel"] .ico{transform-origin:50% 80%}
  @keyframes a-acorn{0%{transform:none}30%{transform:translateY(-8px) rotate(-12deg)}62%{transform:translateY(1px) rotate(6deg)}100%{transform:none}}
  @keyframes a-shovel{0%{transform:none}28%{transform:translate(-2px,-3px) rotate(-26deg)}58%{transform:translate(1px,3px) rotate(14deg)}100%{transform:none}}
  @keyframes a-plant{0%{transform:scale(1)}35%{transform:scale(.72)}72%{transform:scale(1.18) rotate(-4deg)}100%{transform:scale(1)}}
  @keyframes a-drop{0%{transform:none}30%{transform:translateY(-9px) scaleY(1.14)}62%{transform:translateY(2px) scaleY(.86)}100%{transform:none}}
  @keyframes a-basket{0%{transform:none}30%{transform:translateY(-7px) rotate(-9deg)}62%{transform:translateY(-2px) rotate(7deg)}100%{transform:none}}
  @keyframes a-sun{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
  @keyframes a-tree{0%{transform:none}30%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}100%{transform:none}}
  @keyframes a-chats{0%{transform:none}30%{transform:scale(1.2) rotate(-7deg)}62%{transform:scale(.95) rotate(3deg)}100%{transform:none}}
  @keyframes a-wrench{0%{transform:none}30%{transform:rotate(-32deg)}62%{transform:rotate(16deg)}100%{transform:none}}
  @keyframes a-shield{0%{transform:none}35%{transform:scale(1.22)}66%{transform:scale(.96)}100%{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .cell:hover,.v:hover,.pcard:hover,form.lead:focus-within{transform:none}
}
/* tagline reveal: words brighten one at a time as they cross the trigger line */
.tagline-sec{padding:clamp(96px,14vw,200px) 0}
.tag-big{font:700 clamp(1.9rem,4.4vw,3.25rem)/1.12 var(--display);letter-spacing:-.025em;max-width:24em;margin:0;text-wrap:balance}
.tag-big .w{opacity:.3;transition:opacity .8s cubic-bezier(.32,.72,0,1)}
.tag-big .w.on{opacity:1}
/* faq */
.faq-list{margin-top:40px;max-width:820px;display:grid;gap:12px}
.faq-list details{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:0 clamp(20px,2.4vw,28px)}
.faq-list summary{cursor:pointer;list-style:none;padding:20px 0;font:600 1.1rem/1.4 var(--display);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--accent-text);transition:transform .35s cubic-bezier(.32,.72,0,1)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin:0 0 22px;color:var(--muted);max-width:40em}
@media (prefers-reduced-motion:reduce){
  .tag-big .w{opacity:1;transition:none}
  .hero img.hero-img,.hero .rise{animation:none}
  .step{position:relative;top:0}
}
@media (max-width:900px){
  .bento,.vgrid,.pricing-grid,.support-grid,.contact-grid{grid-template-columns:1fr}
  .svc-a,.svc-b,.v1,.v2,.v3,.v4,.v5,.v6{grid-column:auto}
  .svc-a,.svc-b{min-height:300px}
  .sticky{position:static}
  .step{grid-template-columns:1fr;min-height:0;top:calc(84px + var(--i)*12px)}
  .hero img.hero-img{object-position:72% 50%}
  .hero::before{background:linear-gradient(0deg,#001423 12%,rgba(0,20,35,.82) 55%,rgba(0,20,35,.5) 100%)}
  .hero{align-items:flex-end}
  .audiences,.two,.foot{grid-template-columns:1fr}
}
/* process steps: icon beside the stage and title, not stacked above */
.step-head{grid-template-columns:auto 1fr;grid-template-areas:"tile stage" "tile title";column-gap:18px;row-gap:2px;align-content:end;align-items:center}
.step-head .tile{grid-area:tile;margin:0}
.step-head .stage{grid-area:stage;align-self:end}
.step-head h3{grid-area:title;align-self:start}

/* FAQ primary dropdown: one prominent box that holds all the questions */
.faq-primary{margin-top:0;max-width:820px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-1);transition:box-shadow .6s var(--ease-out-expo)}
.faq-primary[open]{box-shadow:var(--sh-2)}
.faq-primary>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(22px,3vw,34px) clamp(22px,3vw,34px)}
.faq-primary>summary::-webkit-details-marker{display:none}
.faq-primary>summary h2{font-size:clamp(1.6rem,3.4vw,2.6rem);margin:0}
.faq-primary>summary::after{content:"";flex:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat;transition:transform .45s var(--ease-out-expo)}
.faq-primary[open]>summary::after{transform:rotate(180deg)}
.faq-count{margin-left:auto;color:var(--muted);font-size:.95rem}
.faq-primary .faq-list{margin:0;max-width:none;padding:0 clamp(16px,2.4vw,28px) clamp(18px,2.4vw,28px)}
.faq-primary .faq-list details{background:var(--bg)}
@media (max-width:520px){.faq-count{display:none}}

/* flatten: questions inside the primary box are divider rows, not nested cards */
.faq-primary .faq-list{gap:0;padding:0 clamp(22px,3vw,34px) clamp(8px,1.4vw,14px)}
.faq-primary .faq-list details{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:0}
.faq-primary .faq-list details:hover,.faq-primary .faq-list details[open]{box-shadow:none}
.faq-primary .faq-list summary{padding:18px 0}
.faq-primary .faq-list details p{margin:0 0 20px}

/* audience boxes: one per customer type, each linking to a matching example site */
.aud-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.aud{grid-column:span 2;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1);transition:transform .6s var(--ease-out-expo),box-shadow .6s var(--ease-out-expo)}
.aud:nth-child(n+4){grid-column:span 3}
.aud:hover,.aud:focus-within{transform:translateY(-4px);box-shadow:var(--sh-2)}
.aud .tile{margin-bottom:6px}
.aud h3{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:700}
.aud p{margin:0;color:var(--muted);font-size:.98rem}
.aud .fit{margin-top:auto;padding-top:10px;color:var(--ink);font-size:.92rem}
.aud .fit b{color:var(--accent-text);margin-right:6px}
.aud-link{margin-top:6px;color:var(--accent-text);font-weight:600;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.aud-link .arrow{text-decoration:none}
.aud:hover .aud-link .arrow{transform:translateX(5px)}
.aud-link:hover,.aud-link:focus-visible{text-decoration:none}
@media (max-width:900px){.aud-grid{grid-template-columns:1fr 1fr}.aud,.aud:nth-child(n+4){grid-column:span 1}.aud:last-child{grid-column:1/-1}}
@media (max-width:600px){.aud-grid{grid-template-columns:1fr}.aud:last-child{grid-column:auto}}
@media (prefers-reduced-motion:no-preference){
  .tile[data-i="house-line"]{--a:a-tree}.tile[data-i="hammer"]{--a:a-wrench}.tile[data-i="storefront"]{--a:a-chats}.tile[data-i="user-circle"]{--a:a-shield}.tile[data-i="handshake"]{--a:a-acorn}
  .tile:hover{transform:translateY(-3px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(var(--shc),.3),0 16px 26px -10px rgba(var(--shc),.6)}
  .tile:hover .ico{animation:var(--a) .95s var(--ease-out-expo) both}
}
@media (prefers-reduced-motion:reduce){.aud:hover,.aud:focus-within{transform:none}.aud:hover .aud-link .arrow{transform:none}}

/* service cards: icon sits beside the heading, not stacked above it */
.cell-head{display:flex;align-items:center;gap:16px}
.cell-head .tile-lg{width:52px;height:52px;border-radius:15px;margin-bottom:0}
.cell-head h3{margin:0}
.svc-a,.svc-b{justify-content:flex-end}
.aud-link{min-height:44px}

/* solid fallback under the gradient cards, so the card's real base color is declared (text contrast is measured against it) */
.svc-a,.v1,.pcard.big{background-color:#002b49}
.v6{background-color:#001423}

/* light theme: form fields get a clearly visible border */
input,select,textarea{border-color:rgba(0,43,73,.32)}

/* pricing: three builds plus the Care Plan row */
.pricing-grid.tiers{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.pricing-grid.tiers .pcard{display:flex;flex-direction:column}
.pricing-grid.tiers .amt{font-size:clamp(2rem,3.4vw,2.8rem)}
.pricing-grid.tiers .amt small{display:block;margin:8px 0 0;line-height:1.35}
.pcard .cta{margin-top:auto;padding-top:28px}
.pcard.care{margin-top:16px;display:grid;grid-template-columns:5fr 7fr;gap:20px 40px;align-items:center}
.pcard.care .amt{font-size:clamp(2rem,3.4vw,2.8rem)}
.pcard.care ul{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.pricing-grid.tiers{grid-template-columns:1fr}.pcard.care{grid-template-columns:1fr}}
@media (max-width:520px){.pcard.care ul{grid-template-columns:1fr}}