/* Fello landing page — single responsive CSS system.
   No component-specific override stack. Desktop and mobile share the same layout rules.
*/
:root{
  --blue:#0B4FA3;
  --blue-deep:#073B78;
  --blue-dark:#062F61;
  --blue-soft:#EEF6FF;
  --paper:#FFFFFF;
  --ink:#153E68;
  --muted:#5F7B98;
  --line:#D7E6F4;
  --orange:#F6B33F;
  --lavender:#EDE9FF;
  --max:1160px;
  --gutter:24px;
  --section-y:104px;
  --shadow:0 22px 60px rgba(7,59,120,.10);
  --shadow-sm:0 12px 30px rgba(7,59,120,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.5}
body,button,a{font-synthesis:none}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.wrap,.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.container{max-width:1160px}
section{position:relative}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;letter-spacing:-.045em;color:var(--blue-deep)}
h1{font-size:clamp(54px,5.8vw,76px);line-height:.96}
h2{font-size:clamp(42px,4.4vw,60px);line-height:.98}
h3{font-size:20px;line-height:1.15}
p{color:var(--muted)}
.lead{font-size:18px;line-height:1.5}

/* Small section labels are used only where they establish a new idea. */
.eyebrow,.how-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.2}
.eyebrow::before,.how-eyebrow i{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(246,179,63,.12);flex:0 0 auto}
.section-head{max-width:720px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-top:14px}
.section-head>p:not(.eyebrow){max-width:660px;margin-top:16px;font-size:17px;line-height:1.55}
.section-head.center>p:not(.eyebrow){margin-inline:auto}

/* Buttons: one visual language, with the polished gradient/shimmer retained. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;overflow:hidden;white-space:nowrap;font-size:15px;font-weight:600;line-height:1;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.btn::after{content:"";position:absolute;inset:-2px auto -2px -45%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.46),transparent);transform:skewX(-18deg) translateX(-120%);transition:transform .7s ease;pointer-events:none}
.btn:hover::after{transform:skewX(-18deg) translateX(520%)}
.btn-primary{color:#fff;background:linear-gradient(135deg,#073B78 0%,#0B4FA3 58%,#1768C3 100%);box-shadow:0 12px 28px rgba(11,79,163,.22)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(11,79,163,.27)}
.btn-light{color:var(--blue-deep);background:rgba(255,255,255,.86);border:1px solid #CFE0F2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Navigation */
#nav{position:sticky;top:0;z-index:1000;height:72px;background:rgba(244,248,253,.90);border-top:2px solid var(--orange);border-bottom:1px solid rgba(215,230,244,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav-inner{height:100%;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.fello-logo{width:82px;height:auto}
.nav-app-icon{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links a{font-size:15px;font-weight:500;color:#557074;transition:color .2s ease}
.nav-links a:hover{color:var(--blue-deep)}
.nav-cta{min-height:46px;padding-inline:22px;font-size:14px;margin-left:6px}
.menu{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:#fff;align-items:center;justify-content:center;position:relative;margin-left:auto}
.menu span,.menu span::before,.menu span::after{display:block;width:19px;height:2px;background:var(--blue-deep);border-radius:2px;position:relative}
.menu span::before,.menu span::after{content:"";position:absolute;left:0}
.menu span::before{top:-6px}.menu span::after{top:6px}
#mobileNav{display:none}
.mobile-link{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--blue-deep)}
.mobile-nav-cta{width:100%;margin-top:18px}

/* HERO — the supplied full-bleed artwork is the background, not a half-column image. */
.hero{min-height:clamp(700px,57.36vw,840px);overflow:hidden;background:#F5F9FE}
.hero-grid{position:relative;width:100%;min-height:inherit;display:flex;align-items:center}
.hero-visual{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-art-wrap{position:absolute;inset:0;display:block}
.hero-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center bottom}
.hero-art-fade{position:absolute;inset:auto 0 0;height:20%;background:linear-gradient(to bottom,rgba(245,249,254,0),rgba(245,249,254,.96));z-index:1}
.hero-copy{position:relative;z-index:2;width:min(590px,calc(100% - 48px));margin-left:max(48px,calc((100vw - 1160px)/2));padding-block:80px}
.hero h1{max-width:620px}
.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--blue-deep),var(--blue) 58%,#2D78D8);-webkit-background-clip:text;background-clip:text}
.hero .lead{max-width:570px;margin-top:24px;font-size:18px}
.hero .btn-row{margin-top:28px}
.hero-note{margin-top:16px;max-width:520px;color:#68819D;font-size:13px;line-height:1.45}

/* Recognition */
.recognition{padding-block:100px;background:radial-gradient(480px 280px at 90% 24%,rgba(111,183,255,.12),transparent 70%),#fff}
.recognition-grid{width:min(1160px,calc(100% - 48px));margin-inline:auto;display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);gap:64px;align-items:center}
.recognition-big{max-width:470px;margin-top:18px;color:#0A426F;font-size:clamp(48px,5vw,68px);font-weight:600;line-height:.94;letter-spacing:-.055em}
.scattered{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.scatter{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:14px;min-height:118px;padding:18px 20px;border:1px solid #C9DDF1;border-radius:22px;background:#F7FBFF}
.scatter:nth-child(2),.scatter:nth-child(4){background:#F5F1FF;border-color:#D7CCFF}
.scatter-icon{width:60px;height:60px;object-fit:contain}
.scatter-copy{min-width:0}
.scatter-label{margin-bottom:7px;color:#7A8F9C;font-size:10px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.08em}
.scatter-text{color:#0A426F;font-size:17px;font-weight:600;line-height:1.18;letter-spacing:-.02em}

/* How it works */
.how-fello{overflow:hidden;padding-block:92px 78px;background:linear-gradient(135deg,#0A4D99 0%,#165BB0 100%);color:#fff}
.how-fello-bg{position:absolute;inset:0;background:radial-gradient(600px 420px at 82% 8%,rgba(111,183,255,.18),transparent 65%);pointer-events:none}
.how-fello-inner{position:relative;width:min(1160px,calc(100% - 48px));margin-inline:auto}
.how-fello-top{display:grid;grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr);gap:52px;align-items:center}
.how-eyebrow{color:#fff;margin-bottom:20px}
.how-fello-intro h2{max-width:540px;color:#fff;font-size:clamp(44px,5.1vw,66px)}
.how-fello-intro p{max-width:510px;margin-top:18px;color:rgba(255,255,255,.78);font-size:18px}
.how-fello-flow{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:14px;align-items:center}
.how-input-card,.how-output-card{border-radius:26px;box-shadow:0 22px 50px rgba(0,0,0,.14)}
.how-input-card{padding:24px;background:#EDF6FF;color:#1A578E}
.how-card-label{margin-bottom:14px;color:#7894AD;font-size:11px;font-weight:600;letter-spacing:.1em}
.how-note{color:#1A578E;font-size:16px;line-height:1.5}
.how-input-meta{display:flex;align-items:center;gap:10px;margin-top:20px}
.how-mic{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:#2E84E4;box-shadow:0 6px 16px rgba(46,132,228,.22)}
.how-mic::before{content:"";position:absolute;top:8px;width:10px;height:17px;border:2px solid #fff;border-radius:7px}
.how-mic::after{content:"";position:absolute;top:17px;width:16px;height:10px;border:2px solid #fff;border-top:0;border-radius:0 0 10px 10px}
.how-mic span{position:absolute;bottom:5px;width:2px;height:7px;border-radius:2px;background:#fff}
.how-wave{display:flex;align-items:center;gap:2px;height:24px;flex:1;overflow:hidden;opacity:.55}
.how-wave b{display:block;width:3px;flex:0 0 auto;border-radius:4px;background:#72A5E9}
.how-wave b:nth-child(1){height:7px}.how-wave b:nth-child(2){height:12px}.how-wave b:nth-child(3){height:18px}.how-wave b:nth-child(4){height:9px}.how-wave b:nth-child(5){height:16px}.how-wave b:nth-child(6){height:22px}.how-wave b:nth-child(7){height:12px}.how-wave b:nth-child(8){height:19px}.how-wave b:nth-child(9){height:8px}.how-wave b:nth-child(10){height:15px}.how-wave b:nth-child(11){height:20px}.how-wave b:nth-child(12){height:10px}.how-wave b:nth-child(13){height:17px}.how-wave b:nth-child(14){height:8px}.how-wave b:nth-child(15){height:13px}
.how-duration{color:#6F8CAA;font-size:13px;white-space:nowrap}
.how-arrow{color:var(--orange);font-size:36px;text-align:center}
.how-output-card{padding:17px 18px 15px;border:1px solid rgba(255,255,255,.62);background:rgba(250,253,252,.98);color:#15517F}
.how-output-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 12px}
.how-fello-mark{color:#1682A4;font-size:15px;font-weight:700;letter-spacing:.06em}
.how-fello-mark span{margin-right:5px;color:#2795B0}
.how-status{padding:7px 10px;border-radius:999px;background:#DFF2E8;color:#438C73;font-size:10px;font-weight:700;white-space:nowrap}
.how-status i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#5BB77C}
.how-record-row{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;align-items:center;gap:10px;margin-top:7px;padding:12px 13px;border-radius:15px}
.how-record-row strong{display:block;color:#20577E;font-size:13px;line-height:1.1;font-weight:600}
.how-record-row small{display:block;margin-top:4px;color:#6C879D;font-size:10px;line-height:1.25}
.how-record-row b{color:#5B86A3;font-size:22px;font-weight:400;text-align:right}
.how-row-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;font-size:15px;font-weight:700}
.row-appointment{background:#DDF4F3}.row-appointment .how-row-icon{background:#B8E7E5;color:#2E9AAA}
.row-medication{background:#EAE6FF}.row-medication .how-row-icon{background:#D1C9FF;color:#806CE2}
.row-note{background:#FFF0DC}.row-note .how-row-icon{background:#FFE0AF;color:#D88A2D}
.row-followup{background:#FBE6F0}.row-followup .how-row-icon{background:#F7CADF;color:#DB74A2}

/* Content sections */
.section{padding-block:104px;background:#F4F8FD}
#one-record .section-head{max-width:760px}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.feature-card{padding:24px;border:1px solid #D1E2F2;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(7,59,120,.04);min-height:168px}
.feature-card h3{color:var(--blue-deep);font-size:20px}
.feature-card p{margin-top:8px;font-size:15px;line-height:1.5}
#why-fello{background:#fff}
#why-fello .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Doctor brief */
.spotlight{padding-block:104px;background:#fff}
.spotlight-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:72px;align-items:center;width:min(1160px,calc(100% - 48px));margin-inline:auto}
.spotlight-visual{order:1}.spotlight-grid>div:last-child{order:2}
.brief-window{overflow:hidden;border:1px solid #CFE0F1;border-radius:28px;background:#F9FBFF;box-shadow:var(--shadow)}
.brief-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid #DCE8F4;background:#fff}
.brief-title{color:var(--blue-deep);font-size:15px;font-weight:600}
.brief-tag{padding:7px 10px;border-radius:999px;background:#DFF2E8;color:#438C73;font-size:10px;font-weight:600;white-space:nowrap}
.brief-body{padding:18px 20px}
.brief-section{padding:13px 0;border-bottom:1px solid #E0EAF4}
.brief-section:last-child{border-bottom:0}
.brief-section label{display:block;margin-bottom:6px;color:#7A8F9C;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.brief-section p{color:#365F86;font-size:13px;line-height:1.45}
.spotlight h2{margin-top:16px}
.spotlight .lead{max-width:460px;margin-top:16px}

/* Family circle — supplied artwork is the visual; copy sits in the intentional negative space. */
.circle{position:relative;overflow:hidden;min-height:clamp(640px,45.6vw,760px);display:flex;align-items:center;padding-block:64px;background:#F7FBFF url("../images/section-carerecordbg.webp") center center / cover no-repeat}
.circle::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(247,251,255,.97) 0%,rgba(247,251,255,.90) 24%,rgba(247,251,255,.48) 38%,rgba(247,251,255,.10) 49%,rgba(247,251,255,0) 58%)}
.circle-content{position:relative;z-index:1;width:min(1160px,calc(100% - 48px));min-height:inherit;display:flex;align-items:center;margin-inline:auto}
.circle-copy{width:min(500px,43%);margin-left:0}
.circle h2{margin-top:16px;max-width:500px}
.circle .lead{max-width:470px;margin-top:16px}
.circle-mobile-art{display:none}

/* Why / trust */
.trust{padding-block:104px;color:#fff;background:radial-gradient(600px 300px at 10% 10%,rgba(111,183,255,.16),transparent 70%),linear-gradient(135deg,#062A5A,#073B78 60%,#0B4FA3)}
.trust .section-head h2{color:#fff}.trust .section-head .eyebrow{color:#fff}.trust .section-head .lead{max-width:620px;margin:14px auto 0;color:rgba(255,255,255,.72);font-size:15px}
.trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:42px}
.trust-card{padding:24px;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(255,255,255,.06)}
.trust-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:16px;border-radius:10px;background:rgba(255,255,255,.1);color:var(--orange);font-weight:700}
.trust-card strong{display:block;color:#fff;font-size:16px;line-height:1.25}.trust-card span{display:block;margin-top:7px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.45}

/* Pricing */
.pricing{padding-block:104px;background:#F4F8FD}
.pricing .section-head h2{max-width:700px;margin-inline:auto}
.billing-toggle{display:flex;justify-content:center;gap:4px;width:max-content;margin:30px auto 26px;padding:4px;border:1px solid #C9DDF1;border-radius:999px;background:#fff}
.billing-toggle button{min-height:38px;padding:0 14px;border-radius:999px;color:#607A98;font-size:13px;font-weight:600;cursor:pointer}.billing-toggle button.active{background:var(--blue);color:#fff}
.save{display:inline-block;margin-left:5px;color:var(--orange)}.billing-toggle button.active .save{color:#FFD36C}
.price-carousel{position:relative}.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;padding:28px;border:1px solid #D1E2F2;border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(7,59,120,.05)}
.price-card.featured{padding:27px;border:2px solid var(--blue);box-shadow:0 20px 48px rgba(11,79,163,.13)}
.badge{position:absolute;top:-13px;right:22px;padding:6px 10px;border-radius:999px;background:var(--orange);color:#174879;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.price-name{color:var(--blue-deep);font-size:18px;font-weight:600}.price-desc{margin-top:5px;color:#7890A7;font-size:13px}
.price{margin-top:24px;color:var(--blue-deep);font-size:48px;line-height:1;font-weight:600;letter-spacing:-.04em}.price small{font-size:16px;letter-spacing:0}.price-period{min-height:18px;margin-top:7px;color:#7890A7;font-size:12px}
.price-list{display:grid;gap:9px;margin:24px 0 26px;padding:0;list-style:none}.price-list li{position:relative;padding-left:18px;color:#365F86;font-size:13px;line-height:1.4}.price-list li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}.price-card .btn{width:100%;margin-top:auto}
.price-dots{display:none}.price-note{text-align:center;margin-top:20px;color:#7189A1;font-size:12px}

/* FAQ / final */
.faq{padding-block:104px;background:#fff}.faq-list{max-width:820px;margin:40px auto 0;border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:68px;padding:0;text-align:left;color:var(--blue-deep);font-size:16px;font-weight:600;cursor:pointer}.faq-plus{color:#6683A1;font-size:24px;font-weight:400;transition:transform .2s ease}.faq-a{display:none;max-width:720px;padding:0 40px 20px 0;color:var(--muted);font-size:14px;line-height:1.55}.faq-item.open .faq-a{display:block}.faq-item.open .faq-plus{transform:rotate(45deg)}
.final{min-height:470px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:64px 0 70px;color:#fff;text-align:center;background-color:#0B4FA3;background-image:url("../images/final-cta-background.webp");background-size:cover;background-position:center center;background-repeat:no-repeat}
.final::after{content:"";position:absolute;inset:auto 0 0;height:20%;pointer-events:none;background:linear-gradient(to bottom,rgba(8,47,98,0),rgba(8,47,98,.34));z-index:0}
.final .wrap{position:relative;z-index:1}
.final h2{max-width:820px;margin-inline:auto;color:#fff}.final>div>p:not(.final-note){margin-top:14px;color:rgba(255,255,255,.84);font-size:17px}.final .btn{margin-top:24px;color:var(--blue-deep);background:linear-gradient(135deg,#F8BE52,var(--orange));box-shadow:0 14px 34px rgba(0,0,0,.16);gap:20px;padding-inline:42px}.final-btn-arrow{font-size:27px;line-height:1;transform:translateY(-1px);transition:transform .22s ease}.final .btn:hover .final-btn-arrow{transform:translate(3px,-1px)}.final-note{margin-top:14px!important;color:rgba(255,255,255,.70)!important;font-size:12px!important}
footer{padding-block:46px 28px;background:linear-gradient(to bottom,#0B4FA3 0%,#0A458C 24%,#082F62 100%);color:#fff;position:relative}.footer-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.16)}.footer-brand{display:flex;align-items:center}.footer-logo-img{width:134px;height:auto}.footer-download{display:flex;align-items:center;justify-content:center;gap:14px}.footer-download>span{color:rgba(255,255,255,.78);font-size:12px}.store-badges{display:flex;align-items:center;gap:8px}.store-badges a{display:block;line-height:0}.store-badges img{display:block;width:auto;height:36px}.footer-links{display:flex;align-items:center;gap:24px}.footer-links a{color:rgba(255,255,255,.78);font-size:13px}.footer-links a:hover{color:#fff}.copyright{padding-top:20px;color:rgba(255,255,255,.58);font-size:12px}
.sticky-cta{display:none}
@media(max-width:720px){
  /* Mobile conversion aid: keep the persistent CTA out of the hero and away from
     the final CTA/footer, so it never competes with the page's intended action. */
  .sticky-cta{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .sticky-cta.is-active{opacity:1;visibility:visible;transform:none}
  .sticky-cta.is-near-end{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none}
  .sticky-cta{bottom:max(12px,env(safe-area-inset-bottom));}
  .sticky-cta a{min-height:48px}
}

/* Motion */
.reveal,.reveal-scale{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}.reveal-scale{opacity:0;transform:scale(.985);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible,.reveal-scale.is-visible{opacity:1;transform:none}.btn-primary:hover{transform:translateY(-2px)}}
.scroll-progress{position:fixed;left:0;top:0;z-index:1200;width:100%;height:2px;pointer-events:none;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--blue),#6FB7FF,#7768C8,var(--orange))}

@media(min-width:981px) and (max-width:1200px){
  .circle{min-height:660px;background-position:54% center}
  .circle-content{width:min(1120px,calc(100% - 48px))}
  .circle-copy{width:46%}
}

/* Tablet */
@media(max-width:980px){
  :root{--section-y:82px}
  .hero{min-height:0}.hero-grid{min-height:0;display:flex;flex-direction:column;align-items:stretch}.hero-visual{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:900/723;order:2}.hero-art{object-fit:cover;object-position:center top}.hero-copy{width:min(680px,calc(100% - 48px));margin:0 auto;padding:72px 0 28px}.hero h1,.hero .lead{max-width:650px}.recognition-grid,.spotlight-grid{grid-template-columns:1fr;gap:42px}.recognition-big{max-width:620px}.spotlight-grid>div:last-child{order:1}.spotlight-visual{order:2}.circle{min-height:0;display:block;padding-block:58px 0;background:#F7FBFF}.circle::after{display:none}.circle-content{display:block;width:100%;min-height:0}.circle-copy{width:min(620px,calc(100% - 48px));margin-inline:auto}.circle-mobile-art{display:block;width:100%;height:clamp(230px,62vw,330px);margin:30px 0 0;overflow:hidden;background:url("../images/section-carerecordbg.webp") center center / cover no-repeat}.circle-mobile-art img{display:none}.how-fello-top{grid-template-columns:1fr;gap:34px}.how-fello-intro{max-width:650px}
}

/* Mobile — one compact rhythm, no desktop leakage. */
@media(max-width:720px){
  :root{--gutter:16px}
  body{font-size:15px}.wrap,.container{width:calc(100% - 32px)}
  h1{font-size:clamp(42px,11vw,52px);line-height:.96}.hero h1{font-size:clamp(42px,11vw,52px)}h2{font-size:clamp(36px,10vw,46px);line-height:.98}.lead{font-size:15px}.eyebrow,.how-eyebrow{font-size:10px}
  #nav{height:64px}.nav-inner{width:calc(100% - 32px)}.fello-logo{width:76px}.nav-links,.nav-cta{display:none}.menu{display:flex}
  #mobileNav{position:fixed;top:64px;left:0;right:0;z-index:999;padding:14px 16px 20px;background:rgba(244,248,253,.98);border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgba(7,59,120,.1)}
  .hero{min-height:0}.hero-grid{display:flex;flex-direction:column}.hero-copy{width:100%;padding:48px 16px 22px;margin:0}.hero .lead{margin-top:16px;font-size:15px;line-height:1.45}.hero .btn-row{display:block;margin-top:22px}.hero .btn{width:100%;min-height:50px}.hero .btn-light{display:none}.hero-note{margin-top:13px;font-size:11px}.hero-visual{width:100%;height:auto;aspect-ratio:900/723;min-height:0}.hero-art{content:url("../images/section-01-hero-background-mobile.webp");object-fit:cover;object-position:center top}.hero-art-fade{height:13%}
  .recognition{padding-block:58px}.recognition-grid{width:calc(100% - 32px);gap:24px}.recognition-big{margin-top:14px;font-size:clamp(40px,10.5vw,48px)}.scattered{gap:8px}.scatter{grid-template-columns:34px minmax(0,1fr);gap:8px;min-height:78px;padding:10px;border-radius:15px}.scatter-icon{width:34px;height:34px}.scatter-label{margin-bottom:4px;font-size:8px}.scatter-text{font-size:11px;line-height:1.2}
  .how-fello{padding-block:52px 42px}
  .how-fello-inner{width:calc(100% - 32px)}
  .how-fello-top{gap:20px}
  .how-fello-intro h2{font-size:clamp(38px,10.2vw,46px)}
  .how-fello-intro p{margin-top:11px;font-size:14px;line-height:1.42}

  /* Mobile recomposition: the UI remains a single YOU → FELLO transformation. */
  .how-fello-flow{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:7px;align-items:center}
  .how-input-card,.how-output-card{border-radius:17px;box-shadow:0 12px 28px rgba(0,0,0,.12)}
  .how-input-card{padding:12px}
  .how-card-label{margin-bottom:8px;font-size:9px}
  .how-note{font-size:10.5px;line-height:1.38}
  .how-input-meta{gap:6px;margin-top:10px}
  .how-mic{width:30px;height:30px;flex-basis:30px}
  .how-mic::before{top:6px;width:8px;height:13px}
  .how-mic::after{top:13px;width:12px;height:8px}
  .how-mic span{bottom:4px;height:5px}
  .how-wave{height:18px;gap:1.5px}
  .how-wave b{width:2px}
  .how-duration{font-size:9px}
  .how-arrow{font-size:21px;line-height:1;text-align:center}
  .how-output-card{padding:9px}
  .how-output-head{gap:5px;margin:0 2px 6px}
  .how-fello-mark{font-size:11px}
  .how-status{padding:5px 6px;font-size:7px}
  .how-status i{width:5px;height:5px;margin-right:3px}
  .how-record-row{grid-template-columns:24px minmax(0,1fr) 8px;gap:6px;margin-top:4px;padding:6px;border-radius:9px}
  .how-record-row strong{font-size:9px;line-height:1.05}
  .how-record-row small{margin-top:2px;font-size:7px;line-height:1.15}
  .how-record-row b{font-size:15px}
  .how-row-icon{width:20px;height:20px;border-radius:6px;font-size:10px}
  /* Mobile: the YOU → FELLO transformation is the complete explanation.
     Remove the secondary numbered/icon process strip to keep one clear story. */
  .section,.spotlight,.trust,.pricing,.faq{padding-block:58px}.feature-grid,#why-fello .feature-grid{grid-template-columns:1fr;gap:10px;margin-top:28px}.feature-card{padding:18px;border-radius:17px}.feature-card h3{font-size:17px}.feature-card p{margin-top:6px;font-size:13px}.spotlight-grid{gap:24px}.spotlight h2,.circle h2{font-size:clamp(38px,10vw,46px)}.spotlight .lead,.circle .lead{margin-top:10px;font-size:14px}.brief-window{border-radius:20px}.brief-head{padding:14px 15px}.brief-body{padding:12px 15px}.brief-section{padding:10px 0}.brief-section p{font-size:11px}.circle{padding-block:58px 0}.circle-copy{width:calc(100% - 32px)}.circle-mobile-art{height:270px;margin:26px 0 0;background-position:center center;background-size:cover}
  .trust .section-head .lead{max-width:330px;margin-top:10px;font-size:13px;line-height:1.45}.trust-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}.trust-card{padding:14px;border-radius:16px}.trust-icon{width:28px;height:28px;margin-bottom:10px}.trust-card strong{font-size:12px;line-height:1.2}.trust-card span{font-size:10px;line-height:1.35;margin-top:5px}
  .pricing .section-head h2{font-size:clamp(36px,9.8vw,44px)}.billing-toggle{margin-top:20px;margin-bottom:20px}.price-carousel{margin-inline:-16px}.price-grid{display:flex;overflow-x:auto;gap:10px;padding:15px 16px 12px;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.price-grid::-webkit-scrollbar{display:none}.price-card{flex:0 0 min(82vw,320px);scroll-snap-align:start;padding:20px;border-radius:19px}.price-card.featured{padding:19px}.price-dots{display:flex;justify-content:center;gap:7px;margin-top:2px}.price-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#C9DDF1;cursor:pointer}.price-dot.active{width:20px;border-radius:999px;background:var(--blue)}.price{font-size:42px}.price-list{gap:7px;margin:20px 0}.price-list li{font-size:12px}.price-note{font-size:11px}
  .faq-list{margin-top:26px}.faq-q{min-height:58px;font-size:14px}.faq-a{padding-bottom:16px;font-size:12px}
  .final{min-height:420px;padding:58px 0 62px;background-position:68% center;background-size:cover}.final h2{font-size:clamp(38px,10vw,46px);max-width:390px}.final>div>p:not(.final-note){font-size:15px;line-height:1.45;max-width:360px;margin-inline:auto}.final .btn{width:100%;max-width:360px;gap:16px;padding-inline:24px}.final-btn-arrow{font-size:25px}.final-note{max-width:330px;margin-inline:auto}
  footer{padding-block:34px 22px;background:linear-gradient(to bottom,#0B4FA3 0%,#082F62 42%)}.footer-top{display:block;padding-bottom:22px}.footer-logo-img{width:126px}.footer-download{display:block;margin-top:20px}.footer-download>span{display:block;font-size:11px;margin-bottom:9px}.store-badges{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;max-width:100%}.store-badges a{flex:0 0 auto}.store-badges img{height:42px;width:auto;max-width:100%}.footer-links{flex-wrap:wrap;gap:12px 20px;margin-top:20px}.footer-links a{font-size:12px}.copyright{font-size:11px;line-height:1.45}
  .sticky-cta{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:900;padding:0;border:0;border-radius:16px;background:transparent;box-shadow:0 14px 36px rgba(7,59,120,.18)}.sticky-cta a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:14px;background:linear-gradient(135deg,#0B67C8 0%,#0B4FA3 48%,#073B78 100%);color:#fff;font-size:14px;font-weight:600;box-shadow:0 10px 24px rgba(11,79,163,.20)}
}
@media(max-width:420px){.trust-grid{grid-template-columns:1fr 1fr}.trust-card{min-width:0}.scatter{min-height:72px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important}.btn,.faq-plus{transition:none!important}.btn::after{display:none}}

/* One record gallery — app UI examples with claim-first hierarchy. */
.record-gallery{display:flex;gap:18px;margin-top:42px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.record-gallery::-webkit-scrollbar{display:none}
.record-shot{flex:0 0 calc((100% - 36px)/3);min-width:300px;scroll-snap-align:start;padding:20px;border:1px solid #D1E2F2;border-radius:24px;background:#fff;box-shadow:0 16px 36px rgba(7,59,120,.07);overflow:hidden}
.record-shot.lavender{background:#FBFAFF;border-color:#DCD5FF}.record-shot.peach{background:#FFFDFC;border-color:#F0DCC5}.record-shot.pink{background:#FFFBFD;border-color:#EED5E1}
.record-shot-top{display:flex;align-items:center;justify-content:space-between;color:#1682A4;font-size:12px;font-weight:700;letter-spacing:.08em}
.record-pill{padding:6px 9px;border-radius:999px;background:#E8F5F2;color:#4D8B82;font-size:9px;letter-spacing:0;font-weight:600}
.record-caption{margin-top:14px;margin-bottom:18px;color:var(--blue);font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.record-ui{padding:15px 14px 14px;border:1px solid #DDE8F2;border-radius:18px;background:rgba(255,255,255,.72)}
.record-shot.lavender .record-ui{border-color:#E3DFFF;background:rgba(255,255,255,.62)}.record-shot.peach .record-ui{border-color:#F0E0CF;background:rgba(255,255,255,.62)}.record-shot.pink .record-ui{border-color:#F0DCE5;background:rgba(255,255,255,.62)}
.record-screen-head{display:flex;align-items:center;justify-content:space-between;margin-top:0;padding-bottom:14px;border-bottom:1px solid #DDE8F2}
.record-screen-head small{display:block;color:#7A8F9C;font-size:9px;font-weight:600;letter-spacing:.09em}.record-screen-head h3{margin-top:5px;font-size:22px}
.record-add{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#E8F3FB;color:var(--blue);font-size:20px;font-weight:400}
.record-item{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;align-items:center;gap:10px;margin-top:10px;padding:11px 10px;border-radius:14px;background:#F5FAFE}.record-shot.lavender .record-item{background:#F0EDFF}.record-shot.peach .record-item{background:#FFF0DC}.record-shot.pink .record-item{background:#FBE8F0}
.record-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;font-size:13px}.teal{background:#C9EEEC;color:#2E9AAA}.purple{background:#DCD6FF;color:#806CE2}.orange{background:#FFE1B4;color:#D88A2D}.pink-icon{background:#F7CADF;color:#DB74A2}
.record-item strong{display:block;color:#20577E;font-size:12px;line-height:1.2;font-weight:600}.record-item small{display:block;margin-top:3px;color:#6C879D;font-size:9px;line-height:1.25}.record-item b{color:#5B86A3;font-size:19px;font-weight:400;text-align:right}
.record-dots{display:flex;justify-content:center;gap:7px;margin-top:3px}.record-dots span{width:7px;height:7px;border-radius:50%;background:#C9DDF1}.record-dots span.active{width:20px;border-radius:999px;background:var(--blue)}
@media(max-width:760px){.record-gallery{margin-top:28px;margin-inline:-16px;padding-inline:16px;padding-bottom:12px;gap:10px;scroll-padding-inline:16px}.record-shot{flex:0 0 78vw;min-width:0;padding:17px;border-radius:20px}.record-caption{font-size:16px;line-height:1.28;margin-top:12px;margin-bottom:14px}.record-ui{padding:12px 10px 10px;border-radius:15px}.record-screen-head{padding-bottom:11px}.record-screen-head h3{font-size:19px}.record-item{grid-template-columns:32px minmax(0,1fr) 10px;padding:9px 8px;margin-top:8px}.record-item strong{font-size:11px}.record-item small{font-size:8px}.record-add{width:27px;height:27px}.record-icon{width:27px;height:27px}.record-dots{margin-top:0}}

/* CARE CIRCLE — final composition pass
   The supplied artwork is the full-bleed background. On desktop it is deliberately
   enlarged from its native cover size and left-anchored so the built-in negative
   space carries the copy while the mascot/group sits clearly to the right.
*/
@media(min-width:981px){
  .circle{
    min-height:clamp(650px,45.6vw,820px);
    padding-block:64px;
    background-color:#F7FBFF;
    background-image:url("../images/section-carerecordbg.webp");
    background-repeat:no-repeat;
    background-size:115% auto;
    background-position:left center;
  }
  .circle::after{
    background:linear-gradient(90deg,
      rgba(247,251,255,.985) 0%,
      rgba(247,251,255,.94) 18%,
      rgba(247,251,255,.72) 29%,
      rgba(247,251,255,.28) 39%,
      rgba(247,251,255,0) 50%);
  }
  .circle-content{
    width:min(1280px,calc(100% - 64px));
    min-height:inherit;
  }
  .circle-copy{
    width:min(500px,42%);
    flex:0 0 auto;
  }
}

@media(min-width:981px) and (max-width:1200px){
  .circle{
    min-height:660px;
    background-size:115% auto;
    background-position:left center;
  }
  .circle-content{width:min(1120px,calc(100% - 48px))}
  .circle-copy{width:46%}
}

/* Mobile: retain the artwork as the section background rather than turning it
   into a second content block. The art sits behind the lower half of the section,
   while the copy gets the clean upper-left reading zone. */
@media(max-width:980px){
  .circle{
    min-height:620px;
    display:block;
    padding:54px 0 0;
    background-color:#F7FBFF;
    background-image:url("../images/section-carerecordbg.webp");
    background-repeat:no-repeat;
    background-size:auto 430px;
    background-position:68% bottom;
  }
  .circle::after{
    display:block;
    background:linear-gradient(180deg,
      rgba(247,251,255,.99) 0%,
      rgba(247,251,255,.97) 37%,
      rgba(247,251,255,.72) 55%,
      rgba(247,251,255,0) 76%);
  }
  .circle-content{
    display:block;
    width:100%;
    min-height:0;
  }
  .circle-copy{
    position:relative;
    z-index:2;
    width:calc(100% - 32px);
    margin-inline:auto;
  }
  .circle-mobile-art{display:none}
}

@media(max-width:720px){
  .circle{
    min-height:650px;
    padding-top:48px;
    /* Keep the copy clean, but release the artwork earlier so the mascot and
       surrounding people remain crisp rather than looking washed out. */
    background-size:auto 500px;
    background-position:62% calc(100% + 38px);
  }
  .circle::after{
    background:linear-gradient(180deg,
      rgba(247,251,255,.99) 0%,
      rgba(247,251,255,.98) 27%,
      rgba(247,251,255,.84) 36%,
      rgba(247,251,255,.48) 45%,
      rgba(247,251,255,.14) 53%,
      rgba(247,251,255,0) 60%);
  }
  .circle-copy{width:calc(100% - 32px)}
  .circle h2{max-width:560px}
  .circle .lead{max-width:520px}
}

/* CARE RECORD — photographic use-case cards.
   Image wells are deliberately 4:3 so the three cards share one visual rhythm.
   Source crop math at 4:3: card 1 trims ~13.7% total width, card 2 ~29.7% total height,
   card 3 ~11.1% total width. Object positions protect the people while keeping the
   environments visible. The product UI is coded HTML, not baked into the photography.
*/
.care-record{background:#fff;padding-block:104px 112px;overflow:hidden}
.care-record-head{max-width:760px}
.care-record-head h2{max-width:760px}
.care-record-head>p:not(.eyebrow){max-width:700px}
.care-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:46px}
.care-card{min-width:0;overflow:hidden;border:1px solid #D6E4F1;border-radius:24px;background:#fff;box-shadow:0 16px 42px rgba(7,59,120,.07)}
.care-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#EAF2F7}
.care-card-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,37,66,.02) 45%,rgba(5,37,66,.08) 100%)}
.care-card-media img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.care-card:nth-child(1) .care-card-media img{object-position:50% 50%}
.care-card:nth-child(2) .care-card-media img{object-position:50% 46%}
.care-card:nth-child(3) .care-card-media img{object-position:50% 50%}
.care-card:hover .care-card-media img{transform:scale(1.025)}
.care-card-body{padding:22px 22px 24px}
.care-card-kicker{display:flex;align-items:center;gap:11px}
.care-card-kicker h3{font-size:19px;line-height:1.12;color:var(--blue-deep)}
.care-card-body p{margin-top:9px;font-size:14px;line-height:1.52;color:#5F7B98}
.care-card-icon{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#EEF6FF;color:var(--blue);font-size:17px;font-weight:600}
.care-ui{position:absolute;z-index:2;border:1px solid rgba(255,255,255,.76);background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(7,59,120,.16);color:#0B4FA3}
.care-ui strong{display:block;color:#0A4A88;font-size:11px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.care-ui small{display:block;margin-top:3px;color:#6B849C;font-size:8px;line-height:1.2}
.care-ui-appointment{right:13px;top:13px;width:170px;padding:12px 12px 10px;border-radius:14px}
.care-ui-row{display:flex;align-items:center;gap:9px}
.care-ui-icon{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;background:#E8F3FB;color:#1768C3;font-size:13px;font-weight:700}
.care-ui-status{margin-top:9px;padding-top:8px;border-top:1px solid #DCEAF5;color:#5B7E99;font-size:8px;line-height:1.2}
.care-ui-note{right:13px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:9px;width:175px;padding:12px;border-radius:15px}
.care-ui-note strong{font-size:10px;line-height:1.25}
.care-ui-wave{display:flex;align-items:center;gap:2px;width:26px;height:25px;flex:0 0 26px}
.care-ui-wave i{display:block;width:3px;border-radius:99px;background:#4E9ED1}
.care-ui-wave i:nth-child(1){height:7px}.care-ui-wave i:nth-child(2){height:14px}.care-ui-wave i:nth-child(3){height:20px}.care-ui-wave i:nth-child(4){height:11px}.care-ui-wave i:nth-child(5){height:18px}.care-ui-wave i:nth-child(6){height:8px}.care-ui-wave i:nth-child(7){height:14px}
.care-ui-roundup{right:13px;top:13px;width:174px;padding:11px 12px;border-radius:15px}
.care-ui-person{display:flex;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:7px;border-bottom:1px solid #DCEAF5}
.care-ui-avatar{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:#F0EDE5;color:#927A5A;font-size:10px;font-weight:700}
.care-ui-line{display:flex;align-items:center;gap:6px;margin-top:6px;color:#3F7095;font-size:8px;line-height:1.2}
.care-ui-line span{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:5px;background:#EAF4FB;color:#2D7BB4;font-size:8px}
@media(max-width:980px){
  .care-record{padding-block:68px 76px}
  .care-record-head{max-width:680px}
  .care-card-grid{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .care-card{border-radius:20px}
  .care-card-media{aspect-ratio:4/3}
  .care-card-body{padding:18px 18px 20px}
  .care-card-kicker h3{font-size:18px}
  .care-card-body p{font-size:14px;line-height:1.5}
  .care-ui-appointment,.care-ui-roundup{right:12px;top:12px}
  .care-ui-note{right:12px}
}
@media(max-width:560px){
  .care-record{padding-block:58px 64px}
  .care-record-head h2{font-size:clamp(38px,10vw,46px)}
  .care-record-head>p:not(.eyebrow){margin-top:12px;font-size:14px;line-height:1.5}
  .care-card-grid{margin-top:28px}
  .care-card-media{aspect-ratio:1.24/1}
  .care-ui{transform:none}
  .care-ui-appointment{width:158px;padding:10px 10px 9px}
  .care-ui-roundup{width:162px;padding:10px}
  .care-ui-note{width:158px;padding:10px;top:auto;bottom:12px}
  .care-ui strong{font-size:10px}
  .care-ui small{font-size:7.5px}
  .care-card-body{padding:16px 16px 18px}
  .care-card-kicker{gap:9px}
  .care-card-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:15px}
  .care-card-kicker h3{font-size:17px}
  .care-card-body p{margin-top:8px;font-size:13px}
}
/* Weekly roundup UI: deliberately reads as an email digest rather than another in-app card. */
.care-ui-mail{display:flex;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:7px;border-bottom:1px solid #DCEAF5}
.care-ui-mail .care-ui-avatar{background:#EAF4FB;color:#2D7BB4}
.care-ui-mail strong{font-size:10px}

/* CARE RECORD — final responsive art direction pass
   Keep the photography compact on phones while preserving faces/action.
   Product UI is anchored to negative-space zones, not faces, at each breakpoint.
*/
@media (min-width:981px){
  .care-card-media{aspect-ratio:1.52/1}
  .care-card:nth-child(1) .care-card-media img{object-position:50% 51%}
  .care-card:nth-child(2) .care-card-media img{object-position:50% 44%}
  .care-card:nth-child(3) .care-card-media img{object-position:50% 50%}
  .care-ui-appointment{right:12px;top:12px}
  .care-ui-note{right:12px;top:15%;transform:none}
  .care-ui-roundup{right:12px;top:12px}
}

@media (max-width:980px){
  .care-card-media{aspect-ratio:16/10;min-height:0}
  .care-card:nth-child(1) .care-card-media img{object-position:50% 51%}
  .care-card:nth-child(2) .care-card-media img{object-position:50% 42%}
  .care-card:nth-child(3) .care-card-media img{object-position:50% 50%}
  .care-ui-appointment{right:10px;top:10px}
  .care-ui-note{right:10px;top:10px;bottom:auto;transform:none}
  .care-ui-roundup{right:10px;top:10px}
}

@media (max-width:560px){
  .care-card-media{aspect-ratio:16/10}
  .care-ui-appointment{width:148px;padding:9px 9px 8px}
  .care-ui-note{width:150px;padding:9px}
  .care-ui-roundup{width:152px;padding:9px}
  .care-ui-row{gap:7px}
  .care-ui-icon{width:23px;height:23px}
  .care-ui strong{font-size:9.5px}
  .care-ui small{font-size:7.2px}
  .care-ui-status{margin-top:7px;padding-top:6px}
  .care-ui-line{margin-top:5px;font-size:7.4px}
  .care-ui-person{padding-bottom:6px;margin-bottom:5px}
  .care-ui-line span{width:14px;height:14px}
}


/* FINAL FACE-SAFE OVERLAY PASS
   UI callouts deliberately occupy photographic negative space rather than the subject's face.
   Each card gets an explicit anchor because a single global corner is not safe across these photos.
*/
@media (min-width:981px){
  /* DESKTOP — keep the human subject on the left and reserve the right-side negative space for the UI. */
  .care-card:nth-child(1) .care-card-media img{object-position:30% 51%}
  .care-card:nth-child(2) .care-card-media img{object-position:50% 44%}
  .care-card:nth-child(3) .care-card-media img{object-position:30% 50%}

  /* All three product screens share one visual rule: right anchored, with an intentional breathing margin. */
  .care-card:nth-child(1) .care-ui-appointment{left:auto;right:14px;top:14px;width:158px}
  .care-card:nth-child(2) .care-ui-note{left:auto;right:14px;top:14px;transform:none;width:158px}
  .care-card:nth-child(3) .care-ui-roundup{left:auto;right:14px;top:14px;width:162px}
}
@media (max-width:980px){
  .care-card:nth-child(1) .care-ui-appointment{left:10px;right:auto;top:10px;width:146px}
  .care-card:nth-child(2) .care-ui-note{left:auto;right:10px;top:10px;bottom:auto;transform:none;width:146px}
  .care-card:nth-child(3) .care-ui-roundup{left:10px;right:auto;top:10px;width:148px}
}
@media (max-width:560px){
  .care-card:nth-child(1) .care-ui-appointment{left:8px;right:auto;top:8px;width:132px;padding:8px}
  .care-card:nth-child(2) .care-ui-note{right:8px;top:8px;width:132px;padding:8px}
  .care-card:nth-child(3) .care-ui-roundup{left:8px;right:auto;top:8px;width:134px;padding:8px}
}

/* CARE CIRCLE — responsive composition refinement
   Tablet/iPad uses a stacked composition so the artwork never competes with the copy.
   Mobile shifts the supplied artwork left enough to keep Fello's bird centred in the
   visible frame while preserving the surrounding world. */
@media (min-width: 721px) and (max-width: 1100px){
  .circle{
    min-height:0;
    display:block;
    padding-block:64px 0;
    background:#F7FBFF;
  }
  .circle::after{display:none}
  .circle-content{
    display:block;
    width:100%;
    min-height:0;
  }
  .circle-copy{
    width:min(680px,calc(100% - 64px));
    margin-inline:auto;
  }
  .circle h2{max-width:650px}
  .circle .lead{max-width:600px}
  .circle-mobile-art{
    display:block;
    width:100%;
    height:clamp(340px,40vw,430px);
    margin:38px 0 0;
    overflow:hidden;
    background-image:url("../images/section-carerecordbg.webp");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
  }
  .circle-mobile-art img{display:none}
}

@media (max-width:720px){
  .circle-mobile-art{
    height:270px;
    margin:26px 0 0;
    background-size:115% auto;
    background-position:right center;
  }
}

/* Override the earlier narrow-desktop circle rule: 981–1100px belongs to the
   stacked tablet composition above, not the desktop overlay composition. */
@media (min-width:981px) and (max-width:1100px){
  .circle{min-height:0;background:#F7FBFF;padding-block:64px 0}
  .circle::after{display:none}
  .circle-content{display:block;width:100%;min-height:0}
  .circle-copy{width:min(680px,calc(100% - 64px));margin-inline:auto}
  .circle-mobile-art{display:block;width:100%;height:clamp(340px,40vw,430px);margin:38px 0 0;background:url("../images/section-carerecordbg.webp") center center / cover no-repeat;overflow:hidden}
  .circle-mobile-art img{display:none}
}


/* V20 TRUST — concrete, scannable trust proof. Keeps the existing artwork and global grid intact. */
.trust{padding-block:92px}
.trust .section-head h2{max-width:760px;margin-inline:auto}
.trust .section-head .lead{max-width:700px;margin:12px auto 0}
.trust-grid{margin-top:38px;gap:16px}
.trust-card{display:flex;align-items:center;gap:18px;min-height:126px;padding:20px 24px}
.trust-icon{flex:0 0 64px;width:64px;height:64px;margin:0;border-radius:16px;background:rgba(255,255,255,.08)}
.trust-icon img{width:48px;height:48px;object-fit:contain}
.trust-copy{min-width:0}
.trust-card strong{font-size:16px;line-height:1.22}
.trust-card span{margin-top:6px;font-size:13px;line-height:1.42}
.trust-links{margin:24px auto 0;text-align:center;font-size:12px}
.trust-links a{color:rgba(255,255,255,.76);text-decoration:none}
.trust-links a:hover{text-decoration:underline}
.trust-links span{margin:0 8px;color:rgba(255,255,255,.42)}
@media(max-width:720px){
  .trust{padding-block:58px 54px}
  .trust .section-head h2{font-size:clamp(36px,9.8vw,46px);line-height:.98}
  .trust .section-head .lead{margin-top:11px;font-size:14px;line-height:1.42;max-width:330px}
  .trust-grid{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .trust-card{min-height:0;padding:14px 15px;gap:13px;border-radius:16px}
  .trust-icon{flex-basis:50px;width:50px;height:50px;border-radius:13px}
  .trust-icon img{width:40px;height:40px}
  .trust-card strong{font-size:14px;line-height:1.2}
  .trust-card span{margin-top:4px;font-size:12px;line-height:1.35}
  .trust-links{margin-top:18px;font-size:11px}
}