/* Copyright © 2026 Knockmap LTD. All Rights Reserved.
   Editorial feature stories reuse the site's typography, app captures and CTA. */
.feature-editorial-intro{display:grid;grid-template-columns:1.03fr 1fr;align-items:center;gap:48px;padding-top:76px;padding-bottom:64px;min-height:690px}
.feature-intro-copy h1{font-size:clamp(54px,5.8vw,80px);font-weight:500;letter-spacing:-.065em;line-height:1.04;margin:24px 0}
.feature-intro-copy .serif-emphasis{color:#242522;letter-spacing:-.03em}
.feature-intro-copy .page-lead{font-size:17px;line-height:1.8;max-width:470px;margin:0;color:#686a61}
.feature-intro-copy .conversion-actions{gap:24px;margin:28px 0 22px}.feature-intro-copy .text-link{font-size:13px;gap:8px}
.feature-intro-note{font-size:12px;letter-spacing:.03em;color:#74766c}
.feature-intro-copy{min-width:0}
.feature-hero-art{position:relative;height:560px;min-width:0;margin:0;isolation:isolate}
.feature-hero-art::before{content:'';position:absolute;inset:52px -12px 15px;border:1px solid #e4e1d8;border-radius:42% 42% 28px 28px;background:linear-gradient(145deg,#f3f1eb,#e9e6df);z-index:-1}
.feature-device{width:235px;border:5px solid #242522;padding-top:20px;border-radius:30px;background:#f5f6f0;position:relative;box-shadow:0 22px 40px -24px #24252266;overflow:hidden;transition:transform .8s ease}
.feature-device::before{content:'';width:44px;height:8px;border-radius:6px;background:#242522;position:absolute;top:6px;left:calc(50% - 22px)}
.feature-device img,.feature-device canvas{display:block;width:100%;max-width:none;height:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;margin:0}
.feature-hero-art .feature-device{position:absolute}
.feature-hero-art .hero-planner{width:218px;left:3%;top:72px;transform:rotate(-7deg)}
.feature-hero-art .hero-map{width:242px;left:43%;top:8px;transform:rotate(6deg)}
.feature-hero-art figcaption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:12px;color:#717267;letter-spacing:.03em}
.feature-jump-links{position:sticky;top:var(--header-height);z-index:9;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px;padding:14px 0;background:#ffffffed;backdrop-filter:blur(18px);border-top:1px solid #e7e5dd;border-bottom:1px solid #e7e5dd;margin:0 0 40px;overflow-x:auto;scrollbar-width:none}
.feature-jump-links::-webkit-scrollbar{display:none}
.feature-jump-links a{flex-shrink:0;background:transparent;border-color:transparent;font-size:13px;padding:11px 16px;transition:background .45s,color .45s,border-color .45s}
.feature-jump-links a:hover{background:#f1efe8;border-color:transparent}.feature-jump-links a[aria-current=location]{background:#242522;color:#fff;border-color:#242522}
.feature-overview{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;margin:0 0 42px}
.feature-life-panel,.feature-day-panel{border-radius:26px;min-width:0;overflow:hidden;min-height:355px;position:relative}
.feature-life-panel>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;object-position:50% 40%}
.feature-life-panel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#1110 8%,#1114 35%,#111c 100%)}
.feature-life-panel>div{position:relative;z-index:1;color:white;padding:36px;display:flex;min-height:355px;flex-direction:column;justify-content:end}
.feature-life-panel .eyebrow{color:#e0dfd6}.feature-life-panel h2,.feature-day-panel h2{font-size:32px;letter-spacing:-.045em;line-height:1.18;font-weight:550;margin:14px 0}
.feature-life-panel div>p:last-child{font-size:14px;line-height:1.7;max-width:370px;color:#f0eee8}
.feature-day-panel{background:#242522;color:#fff;padding:34px}.feature-day-panel .eyebrow{color:#bebfb2}
.feature-day-panel h2{font-size:28px}.feature-day-panel ol{list-style:none;padding:0;margin:26px 0}.feature-day-panel li{display:flex;gap:16px;align-items:center;border-top:1px solid #ffffff20;padding:13px 0;font-size:13px;color:#e3e4d9}.feature-day-panel li span{font-size:11px;color:#aeb2a0}
.feature-day-panel .text-link{font-size:12px;color:#e6e3d7;gap:12px}
.editorial-detail{padding:60px 0;grid-template-columns:1fr 1.13fr;gap:70px;border-color:#e6e4db;scroll-margin-top:65px}
.editorial-detail:nth-of-type(even) .feature-detail-copy{grid-column:2;grid-row:1}.editorial-detail:nth-of-type(even) .feature-detail-visual{grid-column:1;grid-row:1}
.editorial-detail .feature-detail-copy{padding:0;border:0}.editorial-detail .eyebrow{color:#77796d}
.editorial-detail h2{font-size:clamp(34px,3.5vw,47px);font-weight:550;line-height:1.12;margin:19px 0 23px;max-width:440px}
.editorial-detail .feature-detail-copy>p:not(.eyebrow){color:#66695e;font-size:15px;line-height:1.85;max-width:440px}
.editorial-detail ul{margin:25px 0 28px;gap:13px}.editorial-detail li{font-size:13px;color:#4c5044}.editorial-detail li::before{color:#242522}
.editorial-detail .button{font-size:13px;min-height:44px;padding:12px 20px}.editorial-detail .feature-note{color:#797c70!important;font-size:11px!important}
.feature-detail-visual{background:#f1efe9;border:1px solid #e5e2d9;padding:0;border-radius:28px;align-self:center}
.feature-detail-visual figcaption{position:relative;font-size:10px;color:#7d7d72;text-align:center;margin:0;padding:0 15px 15px;line-height:1.5}
.feature-scene{height:526px;position:relative;overflow:hidden;isolation:isolate}
.feature-scene .feature-device{position:absolute;width:228px;right:34px;top:55px;transform:rotate(4deg)}
.scene-caption{position:absolute;top:24px;left:27px;font-size:12px;color:#76796b;letter-spacing:.02em}
.scene-footnote{position:absolute;bottom:16px;left:25px;font-size:11px;color:#66695c;z-index:4;background:#f1efe9e6;padding:5px 10px;border-radius:9px}
.app-detail-crop{position:absolute;left:24px;top:225px;width:58%;aspect-ratio:1008/420;overflow:hidden;border:1px solid #dcdad1;border-radius:20px;box-shadow:0 14px 30px -18px #24252277;background:#f5f6f0;z-index:2;transform:rotate(-3deg)}
.app-detail-crop img{display:block;width:100%;height:auto}.crop-credits img{transform:translateY(-26.1%)}
.scene-discovery .feature-device{top:59px;right:29px;width:220px;transform:rotate(5deg)}
.scene-lasso{background:#e9e7e0}.scene-lasso .feature-device{left:28px;right:auto;transform:rotate(-4deg)}
.feature-benefit-note{position:absolute;right:24px;top:215px;width:205px;padding:22px 20px;background:#fffdf8;border:1px solid #e1ded3;border-radius:21px;box-shadow:0 18px 36px -28px #24252280}
.feature-benefit-note .icon{width:27px;height:27px;color:#575c4c;margin-bottom:15px}.feature-benefit-note strong{display:block;font-size:20px;line-height:1.25;letter-spacing:-.04em;font-weight:550;color:#242522}.feature-benefit-note span{display:block;font-size:11px;line-height:1.6;color:#7a7c6e;margin-top:13px}
.scene-routes .feature-device{right:28px;width:227px;transform:rotate(3deg)}.crop-plan{top:198px;aspect-ratio:1025/505;width:57%;transform:rotate(-4deg);border-color:#55564b}.crop-plan img{transform:translateY(-19.8%)}
.scene-outcomes{display:flex;align-items:center;justify-content:center}.outcomes-window{width:calc(100% - 44px);aspect-ratio:1003/1005;overflow:hidden;border-radius:23px;border:1px solid #dedbd3;background:#fff;box-shadow:0 20px 50px -30px #24252266;margin-top:5px}.outcomes-window img{display:block;width:100%;height:auto;transform:translateY(-50.9%)}
.scene-followups .feature-device{left:25px;right:auto;transform:rotate(-3deg);width:229px}.scene-followups .feature-benefit-note{right:22px;top:185px}
.scene-team{background:#ebe9e3}.scene-team .feature-device{left:28px;right:auto;transform:rotate(-3deg)}.scene-team .feature-benefit-note{top:248px;right:24px}
.feature-page-end{background:#242522;color:#fff;border:0;border-radius:26px;margin:24px 0 68px;padding:44px}.feature-page-end .eyebrow{color:#aeb39e}.feature-page-end h2{font-size:43px;margin:15px 0}.feature-page-end p:not(.eyebrow){font-size:14px;color:#c1c5b3}.feature-page-end .text-link{color:#e5e8dc}.feature-page-end .button-light{background:#f4f2e9;color:#242522;border-color:#f4f2e9}.feature-page-end .button-light:hover{background:#fff}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.feature-detail-visual:hover .feature-device{transform:rotate(0deg) translateY(-3px)}}
@media(max-width:1100px){.feature-editorial-intro{gap:25px}.feature-intro-copy h1{font-size:61px}.feature-hero-art .hero-map{left:36%;width:223px}.feature-hero-art .hero-planner{left:0;width:205px;top:67px}.feature-hero-art{height:530px}.editorial-detail{gap:40px}.feature-scene .feature-device{width:215px;right:18px}.feature-benefit-note{width:185px;right:15px;padding:19px 17px}.feature-benefit-note strong{font-size:18px}.scene-caption{left:22px}.scene-outcomes{height:470px}.app-detail-crop{left:16px}.feature-day-panel{padding:28px}}
@media(max-width:850px){.feature-editorial-intro{grid-template-columns:1fr;padding-top:50px;gap:25px}.feature-intro-copy{max-width:600px}.feature-intro-copy h1{font-size:63px}.feature-intro-copy h1 br:first-of-type{display:none}.feature-intro-copy .page-lead{max-width:520px}.feature-hero-art{width:480px;max-width:100%;height:540px;margin:0 auto}.feature-hero-art .hero-map{left:44%;width:242px}.feature-hero-art .hero-planner{left:8%;width:220px}.feature-overview{gap:16px;grid-template-columns:1fr 1fr}.feature-life-panel>div{padding:25px}.feature-day-panel h2{font-size:24px}.feature-life-panel h2{font-size:29px}.editorial-detail{gap:28px;grid-template-columns:1fr 1fr}.editorial-detail h2{font-size:34px}.feature-scene{height:485px}.feature-scene .feature-device{width:198px}.feature-benefit-note{width:155px;padding:18px 14px}.feature-benefit-note strong{font-size:17px}.feature-benefit-note span{font-size:10px}.feature-benefit-note .icon{width:22px;height:22px}.scene-outcomes{height:370px}.outcomes-window{width:calc(100% - 26px)}.scene-caption{font-size:10px;left:18px;top:20px}.scene-footnote{font-size:9px;left:12px}.feature-jump-links{justify-content:flex-start}.feature-jump-links a{font-size:12px;padding:10px 12px}}
@media(max-width:650px){.feature-editorial-intro{padding-top:42px;padding-bottom:34px;gap:24px}.feature-intro-copy h1{font-size:clamp(46px,11.8vw,62px);margin:22px 0}.feature-intro-copy h1 br:first-of-type{display:initial}.feature-intro-copy .page-lead{font-size:15px;line-height:1.75}.feature-intro-copy .conversion-actions{gap:19px}.feature-intro-copy .button{font-size:13px;padding:12px 18px;min-height:46px}.feature-intro-copy .text-link{font-size:12px}.feature-intro-note{font-size:10px}.feature-hero-art{height:445px;width:365px}.feature-hero-art::before{inset:30px 0 12px;border-radius:120px 120px 24px 24px}.feature-hero-art .hero-map{width:190px;left:43%;top:0;transform:rotate(5deg)}.feature-hero-art .hero-planner{width:174px;left:4%;top:51px;transform:rotate(-6deg)}.feature-hero-art figcaption{font-size:11px}.feature-jump-links{padding-block:10px;margin-bottom:24px;gap:1px;top:var(--header-height)}.feature-jump-links a{font-size:12px;padding:10px 12px}.feature-overview{grid-template-columns:1fr;margin-bottom:18px}.feature-life-panel,.feature-life-panel>div{min-height:330px}.feature-day-panel{min-height:0;padding:27px}.feature-day-panel ol{margin:24px 0}.feature-day-panel h2{font-size:28px}.editorial-detail{display:flex;flex-direction:column;align-items:stretch;gap:27px;padding:38px 0;scroll-margin-top:45px}.editorial-detail h2{font-size:36px;max-width:360px;margin:17px 0 20px}.editorial-detail .feature-detail-copy>p:not(.eyebrow){font-size:15px}.editorial-detail ul{gap:10px;margin:23px 0}.editorial-detail .feature-note{font-size:11px!important;margin-top:16px}.feature-detail-visual{width:100%;border-radius:24px}.feature-scene{height:474px}.feature-scene .feature-device{width:206px}.scene-discovery .feature-device{right:20px;top:48px}.scene-caption{font-size:11px;left:22px}.app-detail-crop{width:57%;top:209px;left:17px;border-radius:15px}.scene-lasso .feature-device,.scene-followups .feature-device,.scene-team .feature-device{left:21px}.feature-benefit-note{width:170px;right:17px;padding:19px 16px}.feature-benefit-note strong{font-size:18px}.feature-benefit-note span{font-size:11px}.scene-routes .feature-device{right:20px}.crop-plan{top:190px}.scene-outcomes{height:calc((100vw - 70px) * 1.1 + 70px);max-height:485px}.outcomes-window{width:calc(100% - 32px)}.scene-footnote{left:15px;font-size:10px}.feature-page-end{padding:30px;margin:18px 0 44px;gap:4px;align-items:start}.feature-page-end h2{font-size:36px}.feature-page-end .conversion-actions{gap:20px;margin-bottom:0}.feature-page-end .button{font-size:13px}.feature-page-end .text-link{font-size:13px}}
@media(max-width:370px){.feature-hero-art{height:405px}.feature-hero-art .hero-map{width:171px;left:42%}.feature-hero-art .hero-planner{width:153px}.feature-hero-art figcaption{bottom:8px}.feature-scene{height:443px}.feature-scene .feature-device{width:188px}.feature-benefit-note{width:151px;right:10px}.feature-benefit-note strong{font-size:16px}.feature-benefit-note span{font-size:10px}.scene-outcomes{height:390px}.feature-intro-copy .conversion-actions{gap:12px}}
@media(prefers-reduced-motion:reduce){.feature-device,.feature-jump-links a{transition:none}}
/* A zero-minimum track prevents the device composition setting the mobile
   page's intrinsic width; its imagery stays inside the surrounding gutters. */
@media(max-width:850px){.feature-editorial-intro{grid-template-columns:minmax(0,1fr)}}
@media(max-width:370px){.feature-hero-art .hero-map{width:54%}.feature-hero-art .hero-planner{width:48%}}
/* Let the complete rotated device determine the height of its own scene. */
.feature-patch-visual{container-type:inline-size}
.feature-patch-visual .scene-lasso{height:auto;min-height:526px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:30px;padding:64px 28px 32px}
.feature-patch-visual .scene-lasso .feature-device{position:relative;left:auto;right:auto;top:auto}
.feature-patch-visual .feature-benefit-note{position:relative;top:auto;right:auto;width:100%;max-width:205px;justify-self:end}
@container(max-width:440px){
  .feature-patch-visual .scene-lasso{grid-template-columns:minmax(0,1fr);justify-items:center;gap:30px;padding:60px 28px 28px;min-height:0}
  .feature-patch-visual .feature-benefit-note{display:grid;grid-template-columns:24px 1fr;gap:6px 12px;max-width:280px;justify-self:center;padding:16px 18px;text-align:left}
  .feature-patch-visual .feature-benefit-note .icon{grid-row:1 / 3;margin:0;width:24px;height:24px;align-self:center}
  .feature-patch-visual .feature-benefit-note strong{font-size:18px}
  .feature-patch-visual .feature-benefit-note span{grid-column:2;margin-top:0;font-size:11px}
  .feature-patch-visual .feature-benefit-note span br{display:none}
}