/*
 LifeTree Creations · static one-page site
 Bulma provides its optional layout primitives; all branded components
 and responsive fallbacks live here so the site also works without a CDN.
 Colours and type scale are centralised below for simple maintenance.
*/
:root {
  --forest: #07372b;
  --deep: #052c23;
  --forest-2: #0b4937;
  --ink: #0b2923;
  --body: #48554f;
  --muted: #6a756e;
  --ivory: #faf9f5;
  --paper: #f5f5f0;
  --line: #e9e9e2;
  --leaf: #9baa79;
  --olive: #798f5f;
  --sand: #b99269;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin:0; background:var(--ivory); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
a:hover { color:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid #c5d79b; outline-offset:4px; }
button { font:inherit; cursor:pointer; }
img { max-width:100%; height:auto; }
svg { display:block; }
.container { width:min(100% - 48px, 1216px); margin-inline:auto; }
.section { padding:0; }
.skip-link { position:fixed; z-index:999; top:-65px; left:16px; padding:11px 18px; background:#fff; color:var(--ink); border-radius:4px; }
.skip-link:focus { top:14px; }

/* Brand & navigation */
.site-header { position:relative; z-index:20; background:var(--forest); }
.site-nav { display:flex; align-items:center; justify-content:space-between; min-height:115px; gap:24px; }
.site-logo { display:block; width:263px; flex-shrink:0; }
.site-logo img { display:block; width:100%; height:auto; }
.navigation { display:flex; gap:38px; align-items:center; font-size:14px; font-weight:600; color:#e7eee7; }
.navigation > a:not(.nav-contact) { position:relative; padding:12px 0; transition:color .2s; }
.navigation > a:not(.nav-contact):hover { color:#b9cda4; }
.navigation > a:not(.nav-contact)::after { content:''; height:1px; background:currentColor; position:absolute; bottom:7px; left:0; width:0; transition:width .2s; }
.navigation > a:not(.nav-contact):hover::after { width:100%; }
.nav-contact { display:flex; align-items:center; gap:16px; border:1px solid rgba(255,255,255,.6); border-radius:999px; padding:10px 17px 10px 22px; transition:background .2s,color .2s; }
.nav-contact:hover { background:#fff; color:var(--forest); }
.nav-contact svg, .button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.menu-toggle { display:none; }

/* Hero */
.hero { background:var(--forest); color:#fff; position:relative; overflow:hidden; min-height:540px; }
.hero-image { position:absolute; inset:0 0 0 37%; background-image:linear-gradient(90deg,var(--forest) 0%,rgba(7,55,43,.83) 10%,rgba(7,55,43,.32) 51%,rgba(7,55,43,.03) 100%),url('../assets/hero-leaves.webp'); background-size:cover; background-position:center 46%; opacity:.94; }
.hero::before { content:''; pointer-events:none; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,55,43,.22) 0%,transparent 66%),linear-gradient(0deg,rgba(4,43,33,.24),transparent 38%); z-index:1; }
.hero-layout { display:flex; align-items:center; min-height:540px; padding-block:48px 96px; position:relative; z-index:2; }
.hero-copy { max-width:775px; padding-bottom:4px; }
.eyebrow { display:flex; align-items:center; gap:11px; margin:0 0 23px; font-size:11px; font-weight:700; letter-spacing:.24em; color:#617a5d; line-height:1.2; }
.eyebrow-line { width:26px; height:1px; background:currentColor; display:inline-block; }
.eyebrow-light { color:#b9c9a0; }
h1,h2,h3,p { overflow-wrap:break-word; }
h1,h2,h3 { letter-spacing:-.04em; }
h1,h2 { font-family:var(--display); font-weight:500; }
.hero h1 { font-size:clamp(3.1rem,5.2vw,5.4rem); line-height:1.10; color:#fff; margin:0; letter-spacing:-.053em; max-width:830px; }
h1 em,h2 em { font-style:normal; color:#bdcb9d; }
.hero-description { margin:30px 0 31px; max-width:540px; font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.75; color:#e3eae5; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:30px; }
.button { text-decoration:none; box-shadow:none; min-height:0; font-family:var(--sans); white-space:nowrap; }
.button-brand { display:inline-flex; align-items:center; gap:23px; background:linear-gradient(135deg,#aebf86,#859962); color:#132e24; border:none; border-radius:999px; padding:15px 23px 15px 28px; min-height:53px; font-weight:700; font-size:14px; transition:transform .2s var(--ease),filter .2s; }
.button-brand:hover { color:#132e24; filter:brightness(1.08); transform:translateY(-2px); }
.hero-text-link { color:#eef2eb; font-size:14px; font-weight:600; display:flex; gap:10px; align-items:center; }
.hero-text-link:hover { color:#c5d5af; }
.hero-bottom { position:absolute; bottom:-1px; height:43px; left:0; right:0; z-index:3; background:var(--ivory); clip-path:polygon(0 50%,16% 84%,33% 97%,52% 99%,72% 89%,100% 48%,100% 100%,0 100%); }

/* App gallery */
.apps-section { background:var(--ivory); padding:95px 0 96px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; padding-bottom:43px; }
.section-heading .eyebrow { margin-bottom:17px; }
.section-heading h2,.about-content h2 { font-size:clamp(2.7rem,4.05vw,4.35rem); line-height:1.16; letter-spacing:-.046em; margin:0; color:var(--ink); }
.section-heading h2 em,.about-content h2 em { color:#73885c; }
.section-intro { max-width:275px; margin:0 0 4px; line-height:1.65; color:#59665e; font-size:14px; }
.apps-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.app-card { min-width:0; height:387px; position:relative; display:flex; overflow:hidden; background:#fff; border:1px solid #efefeb; border-radius:20px; box-shadow:0 12px 34px rgba(10,42,31,.035); isolation:isolate; transition:transform .28s var(--ease),box-shadow .28s; }
.app-card:hover { transform:translateY(-4px); box-shadow:0 19px 45px rgba(10,42,31,.075); }
.app-card::after { content:''; position:absolute; right:-18%; bottom:-57%; width:89%; height:92%; border-radius:50%; background:#f0f3ec; z-index:-1; }
.app-maintenance::after { background:#f6f1ea; }.app-counselling::after { background:#eef1ed; }.app-commands::after { background:#f1f3f0; }
.app-info { padding:30px 10px 28px 30px; width:52%; position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; }
.app-icon { width:55px; height:55px; border-radius:14px; display:grid; place-items:center; background:#e5ebde; color:#335b40; margin-bottom:18px; }
.app-icon svg { width:32px; height:32px; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.icon-maintenance { background:#efe4d6; color:#9e7045; }
.icon-counselling { background:#e4ebe8; color:#396353; }
.icon-commands { background:#e4e9e2; color:#254c3c; }
.app-type { font-size:9px; font-weight:700; letter-spacing:.17em; line-height:1.4; color:#758274; margin-bottom:9px; }
.app-card h3 { font-family:var(--display); font-weight:500; font-size:clamp(1.39rem,2.03vw,1.77rem); line-height:1.17; letter-spacing:-.035em; margin:0 0 12px; color:var(--ink); }
.app-card .app-info > p { color:#58625c; margin:0 0 14px; font-size:13px; line-height:1.63; max-width:200px; }
.app-meta { margin-top:auto; padding-bottom:13px; }
.status { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; font-size:10px; font-weight:600; line-height:1.2; white-space:nowrap; }
.status-live { background:#e6eedb; color:#466238; }.status-progress { background:#f1e8da; color:#855e35; }.status-neutral { background:#eaece8; color:#596a5d; }
.status-dot { width:6px; height:6px; background:#719348; border-radius:50%; }
.app-action { display:inline-flex; align-items:center; gap:11px; color:#153b2d; font-size:12px; font-weight:700; margin-top:0; }
.app-action:hover { color:#728b5f; }
.app-action svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.app-action-muted { color:#738079; font-weight:500; cursor:default; }
.app-art { position:absolute; right:0; top:0; bottom:0; width:50%; display:flex; justify-content:center; align-items:flex-start; padding-top:68px; pointer-events:none; }
.phone { position:relative; flex:none; width:199px; height:414px; background:#101b1c; padding:8px; border:3px solid #4d5550; border-radius:37px; box-shadow:0 28px 45px rgba(2,21,17,.24),-5px 0 10px rgba(255,255,255,.38) inset; transform:rotate(8deg); transform-origin:50% 60%; }
.phone::after { content:''; position:absolute; width:4px; height:49px; background:#67706a; top:111px; right:-6px; border-radius:2px; }
.phone-screen { position:relative; background:#f8f8f6; width:100%; height:100%; border-radius:27px; overflow:hidden; }
.phone-screen::after { content:''; position:absolute; left:calc(50% - 34px); top:4px; width:68px; height:16px; border-radius:11px; background:#081c19; z-index:5; }
.phone-top { display:flex; align-items:center; justify-content:space-between; padding:17px 15px 5px; font-size:8px; color:white; font-weight:700; background:#0b4434; height:37px; }
.phone-signal { font-size:6px; letter-spacing:0; }
.phone-prayer .phone-screen { background:#ecf0e6; }
.qp-top { display:flex; gap:5px; align-items:center; font-size:10px; padding:20px 16px 6px; background:#0b4434; color:#fff; }
.qp-icon { font-size:14px; color:#bbca9f; }
.qp-title { font-family:var(--display); font-size:25px; color:#fff; background:#0b4434; line-height:1.16; padding:4px 16px 22px; }
.qp-progress { display:flex; gap:4px; background:#0b4434; padding:0 16px 17px; }
.qp-progress span { height:3px; background:#5c8270; border-radius:4px; flex:1; }.qp-progress span:first-child { background:#d6dbb5; }
.qp-panel { margin:12px 12px; border-radius:15px; padding:15px 12px; background:#fff; box-shadow:0 3px 16px rgba(0,0,0,.05); }
.qp-mini { font-size:8px; letter-spacing:.14em; color:#718777; font-weight:700; margin-bottom:12px; }
.qp-panel strong { color:#224b3e; font-family:var(--display); font-size:23px; font-weight:500; }.qp-panel p { margin:7px 0 24px; font-size:10px; line-height:1.55; color:#718076; }.qp-cta { display:flex; justify-content:space-between; border-radius:22px; background:#0f4a38; padding:9px 11px; color:white; font-size:10px; }
.phone-maintenance { transform:rotate(7deg) translateY(5px); }
.phone-light { color:#283a31; background:white; }
.maint-nav { display:flex; justify-content:space-between; align-items:center; padding:8px 15px; font-size:11px; font-weight:700; background:white; color:#19382e; }.maint-nav span { font-size:18px; color:#789084; }
.maint-body { padding:13px 13px 20px; }.maint-label { font-size:8px; font-weight:700; letter-spacing:.08em; color:#6e8275; margin:12px 0 6px; }
.maint-photo { background:#f0f1ed; border:1px dashed #bec8bc; border-radius:8px; height:87px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:9px; color:#7c9182; }.maint-photo svg { width:50px; height:34px; stroke:#8fa296; stroke-width:1.5; }
.maint-input { border:1px solid #e1e5df; padding:8px 9px; border-radius:7px; background:white; font-size:9px; color:#9aa49b; display:flex; justify-content:space-between; }.maint-area { height:55px; }
.maint-submit { background:#0a4d39; border-radius:7px; color:white; margin-top:16px; padding:11px; display:flex; justify-content:space-between; font-size:9px; font-weight:700; }
.phone-counselling { transform:rotate(7deg) translateY(1px); }.phone-counselling .phone-screen { background:#f7f8f7; }
.couns-top { background:#104636; padding:13px 14px 21px; display:flex; flex-direction:column; color:#fff; }.couns-top small,.cmd-top small { font-size:7px; letter-spacing:.17em; opacity:.66; }.couns-top strong,.cmd-top strong { margin-top:6px; font-family:var(--display); font-size:25px; font-weight:500; line-height:1.06; }.couns-top p { margin:9px 0 0; font-size:9px; color:#d2e2d4; }
.couns-list { padding:14px 10px; display:grid; gap:7px; }.couns-row { display:flex; align-items:center; border-radius:8px; padding:7px; gap:9px; background:#fff; box-shadow:0 1px 4px #00000008; font-size:8px; color:#314438; font-weight:600; white-space:nowrap; }.couns-row b { margin-left:auto; color:#82948a; font-size:16px; font-weight:400; }.couns-color { height:23px; width:23px; flex-shrink:0; display:grid; place-items:center; border-radius:6px; color:#fff; font-size:12px; }.cc-1 { background:#658c68; }.cc-2 { background:#bb8365; }.cc-3 { background:#486c91; }.cc-4 { background:#7764a6; }
.phone-commands { transform:rotate(8deg) translateY(6px); }.phone-commands .phone-screen { background:#f7f9f7; }.cmd-top { background:#0c4133; color:white; padding:18px 14px 17px; }.cmd-top strong { display:block; }.cmd-search { background:white; color:#a4ada8; margin-top:14px; border-radius:7px; padding:9px; font-size:9px; display:flex; align-items:center; gap:7px; }.cmd-search span { font-size:18px; line-height:8px; }
.cmd-list { display:grid; gap:6px; padding:12px 9px; }.cmd-list > div { display:grid; grid-template-columns:24px 1fr; grid-template-rows:auto auto; column-gap:9px; background:white; border-radius:9px; padding:8px; align-items:center; }.cmd-dot { grid-row:1/3; width:23px; height:23px; display:grid; place-items:center; border-radius:6px; color:white; font-size:12px; }.d1 { background:#008b96; }.d2 { background:#497bab; }.d3 { background:#a36eaf; }.d4 { background:#c28a53; }.cmd-list strong { font-size:9px; color:#173e32; }.cmd-list small { font-size:7px; color:#8b9991; }
.apps-after { display:flex; justify-content:space-between; gap:25px; align-items:center; margin-top:31px; font-size:12px; color:#69786d; }.apps-after p { margin:0; }.apps-after .preview-disclaimer { max-width:380px; text-align:right; font-size:11px; color:#849188; }

/* About */
.about-section { display:grid; grid-template-columns:1fr 1fr; min-height:450px; background:#f3f4ef; }
.about-visual { min-height:450px; background-image:url('../assets/about-leaves.webp'); background-size:cover; background-position:center; }
.about-content { display:flex; align-items:center; background:#f7f8f3; padding:72px clamp(34px,7vw,122px); }
.about-content-inner { max-width:510px; }.about-content .eyebrow { margin-bottom:21px; }
.about-content h2 { font-size:clamp(2.6rem,4.0vw,4.1rem); margin-bottom:24px; }
.about-content p:not(.eyebrow) { color:#59675d; font-size:15px; line-height:1.75; margin:0 0 12px; }
.underlined-link { display:inline-flex; gap:18px; font-size:13px; font-weight:700; align-items:center; border-bottom:1px solid #9caf9f; margin-top:17px; padding-bottom:6px; color:#164331; }.underlined-link:hover { color:#6b815a; }
/* Contact */
.contact-section { padding:70px 0; background:var(--forest); color:white; }
.contact-layout { display:flex; gap:30px; align-items:center; justify-content:space-between; }
.contact-layout .eyebrow { margin-bottom:14px; }.contact-layout h2 { color:white; font-size:clamp(2rem,3.2vw,3.4rem); margin:0 0 7px; line-height:1.2; }.contact-layout p:not(.eyebrow) { margin:0; color:#d0ddd2; font-size:14px; }
.button-contact { display:inline-flex; align-items:center; gap:25px; border-radius:999px; padding:15px 23px; min-height:53px; background:#f2f4eb; color:#123b2d; font-weight:700; font-size:14px; transition:transform .2s,background .2s; }.button-contact:hover { color:#123b2d; background:#e6ebd6; transform:translateY(-2px); }
/* Footer */
.footer-site { background:var(--ivory); border-top:1px solid var(--line); }.footer-layout { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:155px; }.footer-logo { width:215px; flex:none; }.footer-logo img { display:block; width:100%; height:auto; }
.footer-info { display:flex; gap:26px; align-items:center; justify-content:flex-end; flex-wrap:wrap; font-size:11px; color:#64736a; }.footer-info a { color:#254b3a; }.footer-info a:hover { text-decoration:underline; }.back-to-top { border:1px solid #b3bdb5; border-radius:100%; height:35px; width:35px; display:grid; place-items:center; font-size:20px; color:#124231; flex:none; }

@media (min-width:1440px) { .container { width:min(100% - 100px, 1260px); } .app-card { height:415px; }.app-info { padding:34px 12px 30px 35px; }.app-art { padding-top:63px; }.phone { width:213px; height:446px; } }
@media (max-width:1090px) { .hero h1 { font-size:clamp(3.0rem,5vw,4.6rem); }.app-info { width:55%; padding-left:22px; }.app-art { right:-14px; width:48%; }.phone { transform:rotate(8deg) scale(.94); transform-origin:top center; }.app-card h3 { font-size:1.45rem; }.app-card .app-info>p { font-size:12px; }.about-content { padding:55px 48px; } }
@media (max-width:800px) {
  .container { width:min(100% - 38px, 680px); }
  .site-nav { min-height:87px; }.site-logo { width:206px; }
  .menu-toggle { display:flex; border:1px solid rgba(255,255,255,.35); background:transparent; border-radius:10px; width:44px; height:41px; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0; }
  .menu-toggle span { display:block; height:1.5px; width:19px; background:#fff; border-radius:3px; transition:transform .2s,opacity .2s; }.menu-toggle.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2) { opacity:0; }.menu-toggle.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
  .navigation { display:none; position:absolute; top:calc(100% - 1px); left:0; right:0; background:#07372b; border-top:1px solid #315d4f; padding:18px max(19px,calc((100vw - 680px)/2)); flex-direction:column; align-items:stretch; gap:0; box-shadow:0 24px 35px rgba(0,0,0,.2); }.navigation.is-open { display:flex; }.navigation a { padding:16px 9px !important; }.navigation .nav-contact { margin:13px 0 6px; justify-content:center; padding:13px 22px !important; }
  .hero,.hero-layout { min-height:555px; }.hero-layout { padding-block:58px 93px; }.hero-image { inset:0 0 0 14%; background-position:59% center; opacity:.56; background-image:linear-gradient(90deg,#07372b,rgba(7,55,43,.82) 30%,rgba(7,55,43,.20) 100%),url('../assets/hero-leaves.webp'); }
  .hero h1 { font-size:clamp(2.85rem,7.3vw,4.3rem); }.hero-copy { max-width:690px; }.hero-description { max-width:470px; }
  .apps-section { padding:74px 0 73px; }.section-heading { align-items:start; gap:22px; }.section-heading h2 { font-size:clamp(2.5rem,5vw,3.45rem); }.section-intro { display:none; }
  .apps-grid { grid-template-columns:1fr; gap:18px; }.app-card { height:350px; }.app-info { padding:27px 22px 25px 31px; width:55%; }.app-art { padding-top:38px; right:9px; width:44%; }.phone { transform:rotate(8deg) scale(.97); }.app-card h3 { font-size:1.75rem; }.app-card .app-info>p { font-size:13px; max-width:245px; }.apps-after { flex-direction:column; gap:5px; align-items:flex-start; }.apps-after .preview-disclaimer { text-align:left; }
  .about-section { grid-template-columns:1fr; }.about-visual { min-height:260px; }.about-content { padding:54px max(26px,calc((100vw - 680px)/2)); }.about-content-inner { max-width:550px; }
  .footer-layout { min-height:150px; }.footer-info { gap:10px 20px; }
}
@media (max-width:520px) {
  .container { width:calc(100% - 36px); }
  .site-logo { width:185px; }.site-nav { min-height:80px; }
  .hero,.hero-layout { min-height:535px; }.hero-layout { align-items:center; padding:47px 0 83px; }.hero-image { inset:0; background-position:57% center; opacity:.42; }.hero h1 { font-size:clamp(2.65rem,11vw,3.55rem); line-height:1.12; }.hero-description { margin-top:24px; max-width:340px; font-size:14.5px; }.hero-actions { gap:20px; }.button-brand { font-size:13px; min-height:49px; padding:12px 20px 12px 23px; }.hero-text-link { font-size:13px; }.eyebrow { font-size:10px; letter-spacing:.21em; }
  .apps-section { padding:68px 0 66px; }.section-heading { padding-bottom:30px; }.section-heading h2 { font-size:clamp(2.6rem,10vw,3.2rem); }
  .apps-grid { gap:15px; }.app-card { height:356px; border-radius:17px; }.app-info { padding:24px 0 24px 20px; width:58%; }.app-art { right:-37px; width:55%; padding-top:80px; }.phone { transform:rotate(9deg) scale(.78); transform-origin:top center; }
  .app-icon { width:47px; height:47px; margin-bottom:13px; border-radius:11px; }.app-icon svg { width:29px; height:29px; }.app-type { font-size:8px; margin-bottom:8px; }.app-card h3 { font-size:clamp(1.43rem,6vw,1.7rem); margin-bottom:9px; }.app-card .app-info>p { font-size:11.5px; line-height:1.55; max-width:185px; }.status { font-size:9px; padding:5px 8px; }.app-action { font-size:11px; }.app-meta { padding-bottom:12px; }
  .about-visual { min-height:220px; }.about-content { padding:49px 26px 54px; }.about-content h2 { font-size:2.9rem; }.about-content p:not(.eyebrow) { font-size:14px; }
  .contact-section { padding:55px 0; }.contact-layout { flex-direction:column; align-items:flex-start; gap:24px; }.contact-layout h2 { font-size:2.5rem; }.button-contact { min-height:48px; font-size:13px; }
  .footer-layout { padding:36px 0; flex-wrap:wrap; gap:22px; align-items:center; }.footer-logo { width:205px; }.footer-info { order:3; flex:1 0 100%; justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:5px; font-size:11px; }.back-to-top { margin-left:auto; }
}
@media (max-width:350px) { .hero h1 { font-size:2.45rem; }.hero-actions { gap:13px; }.hero-text-link { font-size:12px; }.app-art { right:-52px; }.app-info { padding-left:17px; }.app-card h3 { font-size:1.36rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }


/* App visuals update: real screenshots and original owner-supplied app icons.
   The existing site layouts, colour palette, typography and card copy are unchanged. */
.app-icon-image { display:block; padding:0; border-radius:14px; object-fit:contain; background:transparent; }
.app-screen-shot { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; }
.phone-real .phone-screen::after { display:none; }
.phone-real .phone-screen { background:#f7f7f1; }
/* Fifth card spans the grid for a full four-step prototype showcase. */
.app-card-feature { grid-column:1 / -1; height:430px; }
.app-weed::after { background:#edf4ed; right:-2%; bottom:-95%; width:75%; height:170%; }
.app-card-feature .app-info { width:37%; padding:40px 12px 38px 42px; }
.app-card-feature .app-info > p { max-width:285px; font-size:14px; }
.app-card-feature .app-art { width:63%; padding-top:36px; right:0; justify-content:flex-start; }
.weed-phones { width:100%; display:flex; align-items:flex-start; justify-content:center; gap:38px; padding:0 28px 0 4px; }
.weed-phones .phone { width:171px; height:368px; padding:6px; border-radius:31px; transform:rotate(-7deg); transform-origin:center center; }
.weed-phones .phone:nth-child(2) { transform:translateY(17px) rotate(4deg); }
.weed-phones .phone:nth-child(3) { transform:translateY(-8px) rotate(9deg); }
.weed-phones .phone-screen { border-radius:22px; }
@media (max-width:1090px) {
  .app-card-feature .app-info { width:41%; padding-left:31px; }
  .app-card-feature .app-art { width:59%; }
  .weed-phones { gap:16px; padding-right:12px; }
  .weed-phones .phone { width:148px; height:324px; transform:rotate(-7deg) scale(1); }
}
@media (max-width:800px) {
  .app-card-feature { height:370px; }
  .app-card-feature .app-info { width:55%; padding:28px 10px 27px 31px; }
  .app-card-feature .app-art { width:45%; padding-top:30px; }
  .weed-phones { gap:20px; padding-right:0; }
  .weed-phones .phone:first-child { display:none; }
  .weed-phones .phone { width:155px; height:337px; }
}
@media (max-width:520px) {
  .app-card-feature { height:356px; }
  .app-card-feature .app-info { width:58%; padding:24px 0 24px 20px; }
  .app-card-feature .app-info > p { font-size:11.5px; max-width:185px; }
  .app-card-feature .app-art { right:-37px; width:55%; padding-top:80px; }
  .weed-phones .phone:not(:last-child) { display:none; }
  .weed-phones .phone:last-child { width:199px; height:414px; transform:rotate(9deg) scale(.78); transform-origin:top center; }
}
@media (max-width:350px) {
  .app-card-feature .app-art { right:-52px; }
  .app-card-feature .app-info { padding-left:17px; }
}