/* Generated from the approved Story Atlas experiment; selectors are isolated from the live app. */ #homepageStory{--cream:#f2efe5;--paper:#fffdf7;--paper-warm:#f8edda;--teal:#1f4e5b;--ink:#1a1a1a;--orange:#f25c05;--muted:#6d736f;--line:#bdb7aa;--serif:"DM Serif Display","Playfair Display",Georgia,serif;--sans:"Space Grotesk","Golos Text",Arial,sans-serif;--mono:"Courier Prime","Anonymous Pro",monospace}#homepageStory *{box-sizing:border-box}#homepageStory{scroll-behavior:smooth}#homepageStory{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans)}#homepageStory button{font:inherit}#homepageStory .grain{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}#homepageStory .site-width{width:min(1170px,calc(100% - 64px));margin-inline:auto}#homepageStory .experiment-label{position:fixed;z-index:50;right:22px;top:18px;margin:0;padding:7px 10px;color:#fff;background:var(--teal);font:700 8px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}#homepageStory .existing-hero{min-height:480px;padding-top:29px;border-bottom:2px solid var(--ink);background:radial-gradient(circle at 76% 35%,rgba(242,92,5,.11),transparent 22%),var(--cream)}#homepageStory .hero-nav{display:flex;justify-content:space-between}#homepageStory .hero-nav span{display:block;margin-bottom:8px;color:var(--muted);font:700 8px/1 var(--mono);letter-spacing:.13em}#homepageStory .hero-nav a{display:block;color:var(--ink);font:400 48px/.8 var(--serif);text-decoration:none}#homepageStory .hero-nav a i,#homepageStory .footer b span{color:var(--orange);font-style:normal}#homepageStory .hero-nav>b{display:flex;gap:6px;margin-top:24px}#homepageStory .hero-nav>b i{display:block;width:43px;border-top:3px solid var(--ink)}#homepageStory .hero-nav>b i:last-child{width:17px;border-color:var(--orange)}#homepageStory .hero-context{padding-top:106px}#homepageStory .hero-context>p{margin:0 0 28px;color:var(--teal);font:400 clamp(48px,6vw,84px)/.9 var(--serif);letter-spacing:-.04em}#homepageStory .request-context{display:grid;grid-template-columns:155px 1fr auto;align-items:center;max-width:830px;padding:20px 23px;background:var(--paper);border:2px solid var(--ink);box-shadow:10px 11px 0 var(--teal)}#homepageStory .request-context small,#homepageStory .request-context em{color:var(--orange);font:700 8px/1.2 var(--mono);letter-spacing:.1em;font-style:normal}#homepageStory .request-context span{padding-left:19px;border-left:1px dashed var(--line);color:var(--muted);font-size:14px}#homepageStory .request-context em{color:var(--teal);white-space:nowrap}#homepageStory .trip-section{padding:140px 0 145px}#homepageStory .section-index{margin:0 0 17px;color:var(--orange);font:700 9px/1.2 var(--mono);letter-spacing:.12em}#homepageStory .trip-section>h1,#homepageStory .making-section h2,#homepageStory .companion-section>h2{max-width:1040px;margin:0;color:var(--teal);font:400 clamp(54px,7vw,94px)/.9 var(--serif);letter-spacing:-.045em}#homepageStory .trip-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(75px,12vw,175px);align-items:start;margin-top:80px}#homepageStory .trip-copy{padding-bottom:80px}#homepageStory .trip-beat{min-height:290px;padding:13px 0 25px 23px;border-left:2px solid rgba(31,78,91,.17);opacity:.42;outline:0;cursor:default;transition:border-color .25s,opacity .25s,transform .25s}#homepageStory .trip-beat p{max-width:29ch;margin:0;color:var(--muted);font-size:19px;line-height:1.55}#homepageStory .trip-beat:is(.is-active,:focus,:hover){border-color:var(--orange);opacity:1;transform:translateX(7px)}#homepageStory .trip-beat:is(.is-active,:focus,:hover)::before{content:"NOW";display:block;margin-bottom:14px;color:var(--orange);font:700 8px/1 var(--mono);letter-spacing:.11em}#homepageStory .notebook-wrap{position:sticky;top:45px}#homepageStory .notebook-wrap>p{margin:0 0 14px 12px;color:var(--muted);font:700 8px/1 var(--mono);letter-spacing:.1em}#homepageStory .notebook{position:relative;min-height:500px;padding:30px 40px;background:linear-gradient(90deg,transparent 38px,rgba(242,92,5,.18) 38px,rgba(242,92,5,.18) 40px,transparent 40px),repeating-linear-gradient(180deg,transparent 0 39px,rgba(31,78,91,.1) 39px 40px),var(--paper);border:2px solid var(--ink);border-radius:7px 17px 17px 7px;box-shadow:15px 16px 0 rgba(31,78,91,.15);transform:rotate(1deg);overflow:hidden}#homepageStory .notebook:before{content:"";position:absolute;left:15px;top:-2px;bottom:-2px;width:7px;background:repeating-linear-gradient(180deg,var(--teal) 0 8px,transparent 8px 16px);opacity:.4}#homepageStory .paperclip{position:absolute;right:58px;top:-24px;width:35px;height:72px;border:4px solid var(--orange);border-bottom:0;border-radius:26px 26px 0 0;transform:rotate(8deg)}#homepageStory .coffee-ring{position:absolute;right:25px;bottom:31px;width:84px;height:84px;border:2px solid rgba(31,78,91,.11);border-radius:50%;box-shadow:inset 0 0 0 4px rgba(31,78,91,.035)}#homepageStory .notebook header{display:flex;justify-content:space-between;padding-bottom:13px;border-bottom:1px dashed var(--line);color:var(--muted);font:700 8px/1 var(--mono);letter-spacing:.08em}#homepageStory .notebook-page{position:absolute;top:94px;right:40px;left:55px;opacity:0;transform:translateY(14px) rotate(-1deg);pointer-events:none;transition:opacity .36s ease,transform .36s ease}#homepageStory .notebook-page.is-current{opacity:1;transform:none;pointer-events:auto}#homepageStory .notebook-page small,#homepageStory .notebook-page em{display:block;color:var(--orange);font:400 13px/1.2 var(--mono);font-style:normal}#homepageStory .notebook-page strong{display:block;margin:35px 0 12px;color:var(--teal);font:400 clamp(41px,4.8vw,64px)/.9 var(--serif);letter-spacing:-.045em}#homepageStory .notebook-page strong i{font-size:.58em;font-style:italic}#homepageStory .notebook-page>b{display:block;margin:14px 0;color:var(--teal);font:700 11px/1.3 var(--mono);letter-spacing:.03em}#homepageStory .notebook mark{padding:2px;background:rgba(242,92,5,.2);color:var(--teal)}#homepageStory .calendar{display:flex;gap:8px;margin:32px 0 27px}#homepageStory .calendar i{width:31px;height:25px;border:1px solid var(--line)}#homepageStory .calendar i:nth-child(4){border-color:var(--orange);background:rgba(242,92,5,.08)}#homepageStory .time-stamp,#homepageStory .weekend-stamp{position:absolute;right:4px;top:52px;padding:12px 9px;color:var(--orange);border:2px double var(--orange);border-radius:50%;font:700 8px/1.1 var(--mono);text-align:center;transform:rotate(9deg)}#homepageStory .weekend-stamp{right:5px;top:61px;color:var(--teal);border-color:var(--teal);transform:rotate(-8deg)}#homepageStory .trip-conclusion{max-width:900px;margin:65px auto 0;padding:92px 0 15px;border-top:1px solid var(--line);text-align:center}#homepageStory .trip-conclusion p{margin:0;color:var(--muted);font:400 27px/1 var(--serif)}#homepageStory .trip-conclusion h2{max-width:19ch;margin:15px auto 23px;color:var(--teal);font:400 clamp(44px,5.4vw,72px)/.94 var(--serif);letter-spacing:-.04em}#homepageStory .trip-conclusion em{color:var(--orange);font-style:normal;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}#homepageStory .trip-conclusion small{color:var(--muted);font:700 9px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase}#homepageStory .making-section{padding:140px 0 60px;border-block:2px solid var(--ink);background:#e9e2d5}#homepageStory .scene{display:grid;align-items:center;gap:clamp(45px,9vw,125px);margin-top:115px}#homepageStory .scene-copy span{display:block;margin-bottom:16px;color:var(--orange);font:700 8px/1 var(--mono);letter-spacing:.12em}#homepageStory .scene-copy p{max-width:33ch;margin:0 0 18px;color:var(--muted);font-size:18px;line-height:1.65}#homepageStory .scene-thought{grid-template-columns:.75fr 1.25fr}#homepageStory .request-note{position:relative;padding:30px 34px;background:var(--paper);border:2px solid var(--ink);box-shadow:10px 11px 0 rgba(31,78,91,.15);transform:rotate(-1.2deg)}#homepageStory .request-note:before{content:"";position:absolute;top:-10px;left:12%;width:95px;border-top:20px solid rgba(242,92,5,.2);transform:rotate(-2deg)}#homepageStory .request-note>b{color:var(--teal);font:700 9px/1 var(--mono);letter-spacing:.09em}#homepageStory .request-note p{margin:21px 0 0;font:400 17px/1.7 var(--mono)}#homepageStory mark{padding:0 2px;background:linear-gradient(transparent 67%,rgba(242,92,5,.31) 67%)}#homepageStory .cursor{display:inline-block;width:7px;height:1.15em;margin-left:4px;background:var(--orange);vertical-align:-.22em;animation:blink .85s steps(2) infinite}#homepageStory .scene-understand{grid-template-columns:1fr 1fr}#homepageStory .scene-understand .scene-copy{order:2}#homepageStory .sorting-table{position:relative;min-height:360px;padding:28px;border:2px solid var(--ink);background:var(--paper-warm);box-shadow:10px 11px 0 var(--orange);overflow:hidden}#homepageStory .faint-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;opacity:.27;transform:rotate(-3deg)}#homepageStory .faint-options i{padding:9px;color:var(--teal);border:1px solid var(--line);background:var(--paper);font:400 9px/1 var(--mono);font-style:normal}#homepageStory .requirement-tags{position:absolute;left:30px;right:30px;top:114px;display:flex;flex-wrap:wrap;gap:8px}#homepageStory .requirement-tags b{padding:9px 10px;color:var(--teal);border:1px solid rgba(31,78,91,.33);background:#fffdf7;box-shadow:3px 3px 0 rgba(31,78,91,.08);font:700 8px/1 var(--mono);letter-spacing:.04em}#homepageStory .requirement-tags b:nth-child(2),#homepageStory .requirement-tags b:nth-child(4){transform:rotate(1deg)}#homepageStory .judgement{position:absolute;bottom:28px;left:30px;right:30px;display:flex;flex-wrap:wrap;gap:9px;margin:0;font:700 9px/1.3 var(--mono)}#homepageStory .judgement s{padding:5px;color:#948f88}#homepageStory .judgement strong{padding:5px;color:var(--teal);border-bottom:2px solid var(--orange)}#homepageStory .scene-shortlist{grid-template-columns:.7fr 1.3fr}#homepageStory .shortlist-table{padding:15px;background:var(--paper);border:2px solid var(--ink);box-shadow:11px 12px 0 rgba(31,78,91,.14)}#homepageStory .route-strip{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 15px;background:#f7e8d1;border-bottom:1px dashed var(--line)}#homepageStory .route-strip b{color:var(--teal);font:400 24px/1 var(--serif)}#homepageStory .route-strip span{max-width:250px;color:var(--muted);font:700 8px/1.35 var(--mono);text-align:right}#homepageStory .slip-stack{position:relative;height:354px;padding:22px 15px}#homepageStory .flight-slip{position:absolute;left:15px;right:15px;border:2px solid var(--ink);background:#fffdf7;box-shadow:6px 7px 0 rgba(31,78,91,.13)}#homepageStory .best-fit{z-index:3;padding:18px}#homepageStory .flight-slip small{color:var(--orange);font:700 8px/1 var(--mono);letter-spacing:.1em}#homepageStory .best-fit h3{display:flex;justify-content:space-between;margin:12px 0;color:var(--teal);font:400 25px/1 var(--serif)}#homepageStory .best-fit h3 b{font:400 28px/1 var(--serif)}#homepageStory .best-fit p{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:0 0 10px}#homepageStory .best-fit p strong{color:var(--teal);font:400 28px/1 var(--serif)}#homepageStory .best-fit p i{display:flex;align-items:center;gap:8px;color:var(--muted);font:400 8px/1 var(--mono);font-style:normal}#homepageStory .best-fit p i:before,#homepageStory .best-fit p i:after{content:"";flex:1;border-top:1px dashed var(--line)}#homepageStory .best-fit em{color:var(--muted);font:400 9px/1 var(--mono);font-style:normal}#homepageStory .value,#homepageStory .other{display:flex;justify-content:space-between;align-items:center;padding:13px 17px;color:var(--teal)}#homepageStory .value{top:194px;z-index:2;transform:rotate(1deg)}#homepageStory .other{top:248px;z-index:1;transform:rotate(-.8deg)}#homepageStory .value b,#homepageStory .other b{font:400 21px/1 var(--serif)}#homepageStory .why-note{position:absolute;z-index:5;right:-38px;top:108px;width:205px;padding:13px;color:var(--teal);border:2px solid var(--ink);background:#ffe3b9;box-shadow:5px 6px 0 rgba(242,92,5,.25);text-align:left;transform:rotate(3deg);cursor:pointer}#homepageStory .why-note:before{content:"";position:absolute;left:-34px;top:31px;width:34px;border-top:1px solid var(--orange)}#homepageStory .why-note b{display:flex;justify-content:space-between;font:700 8px/1 var(--mono);letter-spacing:.06em}#homepageStory .why-note i{font-size:15px;font-style:normal}#homepageStory .why-note span{display:block;max-height:0;margin-top:0;overflow:hidden;color:var(--muted);font-size:11px;line-height:1.4;transition:max-height .3s,margin .3s}#homepageStory .why-note.is-open span{max-height:145px;margin-top:11px}#homepageStory .scene-sellers{grid-template-columns:1fr 1fr;margin-bottom:100px}#homepageStory .scene-sellers .scene-copy{order:2}#homepageStory .seller-composition{position:relative;padding:38px 25px 25px;background:#f6e5ca;border:2px solid var(--ink);box-shadow:10px 11px 0 rgba(31,78,91,.13);transform:rotate(.6deg)}#homepageStory .seller-flight{display:flex;justify-content:space-between;gap:12px;padding:13px;background:var(--paper);border:2px solid var(--ink)}#homepageStory .seller-flight b{color:var(--teal);font:400 22px/1 var(--serif)}#homepageStory .seller-flight span{color:var(--muted);font:700 8px/1.3 var(--mono);text-align:right}#homepageStory .receipts{display:flex;gap:11px;margin:20px 0}#homepageStory .receipts article{position:relative;flex:1;min-height:130px;padding:14px 11px;background:#fffdf7;border:1px solid var(--ink);box-shadow:4px 4px 0 rgba(31,78,91,.1);transform:rotate(-1.5deg)}#homepageStory .receipts article:before{content:"";position:absolute;top:-12px;left:40%;height:11px;border-left:1px dashed var(--teal)}#homepageStory .receipts article:nth-child(2){transform:translateY(9px) rotate(1deg)}#homepageStory .receipts article:nth-child(3){transform:rotate(-.4deg)}#homepageStory .receipts b,#homepageStory .receipts span{display:block;font:700 8px/1.3 var(--mono);letter-spacing:.03em}#homepageStory .receipts strong{display:block;margin:20px 0;color:var(--teal);font:400 25px/1 var(--serif)}#homepageStory .receipts span{color:var(--muted)}#homepageStory .seller-composition>p{margin:18px 0 0;color:var(--orange);font:700 8px/1 var(--mono);letter-spacing:.05em;text-align:center}#homepageStory .companion-section{padding:145px 0}#homepageStory .companion-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(70px,12vw,170px);align-items:center;margin-top:105px}#homepageStory .companion-copy h3{max-width:14ch;margin:0 0 17px;color:var(--teal);font:400 45px/.96 var(--serif);letter-spacing:-.03em}#homepageStory .companion-copy p{max-width:39ch;margin:0;color:var(--muted);font-size:17px;line-height:1.7}#homepageStory .conversation-note{position:relative;min-height:312px;padding:30px;background:var(--paper);border:2px solid var(--ink);box-shadow:9px 10px 0 rgba(31,78,91,.15);transform:rotate(-1deg)}#homepageStory .question{width:75%;margin:0;padding:15px;background:#fff;border:2px solid var(--ink);border-radius:16px 16px 16px 3px;font-size:15px;line-height:1.35}#homepageStory .conversation-note button{position:absolute;right:24px;top:113px;width:78%;padding:17px;color:#fff;background:var(--teal);border:2px solid var(--ink);border-radius:17px 17px 3px 17px;box-shadow:5px 6px 0 rgba(242,92,5,.3);text-align:left;transform:rotate(1.5deg);cursor:pointer}#homepageStory .conversation-note button b,#homepageStory .conversation-note button span,#homepageStory .conversation-note button small{display:block}#homepageStory .conversation-note button b{margin-bottom:6px;color:#f8b183;font:400 22px/1 var(--serif)}#homepageStory .conversation-note button span{font-size:13px;line-height:1.35}#homepageStory .conversation-note button small{margin-top:10px;color:rgba(255,255,255,.7);font:700 8px/1 var(--mono);letter-spacing:.05em}#homepageStory .conversation-note>div{position:absolute;right:26px;bottom:-74px;display:grid;grid-template-columns:1fr auto;gap:7px;width:70%;padding:14px;color:var(--teal);background:#fffdf7;border:2px solid var(--ink);box-shadow:5px 6px 0 rgba(31,78,91,.12);font:700 9px/1.2 var(--mono)}#homepageStory .conversation-note>div b{font:400 24px/1 var(--serif)}#homepageStory .conversation-note>div small{grid-column:1/-1;color:var(--muted)}#homepageStory .watch-row{grid-template-columns:1fr 1fr}#homepageStory .telegram-object{position:relative;justify-self:center;width:290px}#homepageStory .phone{min-height:525px;padding:33px 10px 10px;background:#1d1d1f;border:7px solid #111;border-radius:38px;box-shadow:12px 13px 0 rgba(242,92,5,.65);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}#homepageStory .dynamic-island{position:absolute;top:10px;left:50%;width:86px;height:21px;border-radius:20px;background:#000;transform:translateX(-50%)}#homepageStory .phone header{display:flex;align-items:center;justify-content:space-between;margin:0 -3px 11px;padding:5px 7px;color:#2a92d5}#homepageStory .phone header>b,#homepageStory .phone header>i{font-size:23px;font-style:normal}#homepageStory .phone header span{display:flex;flex-direction:column;align-items:center;color:#fff}#homepageStory .phone header strong{font-size:13px}#homepageStory .phone header small{margin-top:2px;color:#9ec1d5;font-size:9px}#homepageStory .phone main{display:flex;flex-direction:column;gap:12px;min-height:445px;padding:15px 10px;background:#e8eff3 url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 18h32M18 2v32' stroke='%23d7e3e8' stroke-width='.55' opacity='.35'/%3E%3C/svg%3E")}#homepageStory .phone main p{max-width:86%;margin:0;padding:10px 11px;border-radius:10px;color:#1d1d1f;font-size:11px;line-height:1.38}#homepageStory .telegram-user{align-self:flex-end;background:#d8f3c4;border-bottom-right-radius:3px!important}#homepageStory .telegram-bot{background:#fff;border-bottom-left-radius:3px!important}#homepageStory .telegram-alert{margin-top:auto!important;color:#fff!important;background:#4a96cf;border-bottom-left-radius:3px!important}#homepageStory .telegram-alert b,#homepageStory .telegram-alert span{display:block}#homepageStory .telegram-alert strong{color:#fff;font-size:19px}#homepageStory .telegram-alert span{margin-top:7px;opacity:.86;font-size:9px}#homepageStory .telegram-object aside{position:absolute;right:-120px;bottom:14px;width:165px;padding:10px;color:#938d84;background:#e6ddd0;box-shadow:3px 3px 0 rgba(31,78,91,.07);font:400 9px/1.5 var(--mono);transform:rotate(4deg)}#homepageStory .telegram-object aside b{display:block;color:var(--teal);font-style:italic}#homepageStory .final-section{position:relative;padding:122px 0 105px;color:var(--cream);background:var(--teal);overflow:hidden}#homepageStory .final-section:before{content:"";position:absolute;right:-130px;top:-140px;width:470px;height:470px;border:1px solid rgba(242,92,5,.38);border-radius:50%;box-shadow:0 0 0 38px rgba(242,92,5,.07),0 0 0 76px rgba(242,92,5,.04)}#homepageStory .final-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:95px;align-items:center}#homepageStory .final-layout>div>p{max-width:43ch;margin:0 0 27px;color:rgba(255,255,255,.72);font-size:17px;line-height:1.65}#homepageStory .final-layout h2{margin:0;font:400 clamp(42px,5vw,70px)/.94 var(--serif);letter-spacing:-.04em}#homepageStory .final-layout h2 em{color:#f8b183;font-style:normal}#homepageStory .final-layout aside{display:flex;flex-wrap:wrap;gap:12px}#homepageStory .final-layout aside span{padding:10px;color:#d8e2df;border:1px solid rgba(255,255,255,.38);font:700 8px/1.25 var(--mono);letter-spacing:.05em}#homepageStory .final-layout aside span:nth-child(2){transform:rotate(2deg)}#homepageStory .final-layout aside span:nth-child(3){transform:rotate(-2deg)}#homepageStory .final-dot{position:absolute;bottom:36px;left:50%;width:13px;height:13px;background:var(--orange);border-radius:50%;transform:translateX(-50%)}#homepageStory .footer{display:flex;justify-content:space-between;align-items:center;min-height:130px}#homepageStory .footer b{color:var(--teal);font:400 38px/1 var(--serif)}#homepageStory .footer small{color:var(--muted);font:700 8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}#homepageStory .motion-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}#homepageStory .motion-ready [data-reveal].is-visible{opacity:1;transform:none}@keyframes blink{50%{opacity:0}} @media(max-width:900px){#homepageStory .trip-layout,#homepageStory .scene,#homepageStory .companion-row,#homepageStory .final-layout{grid-template-columns:1fr;gap:45px}#homepageStory .trip-copy{padding-bottom:0}#homepageStory .notebook-wrap{position:relative;top:auto}#homepageStory .scene-understand .scene-copy,#homepageStory .scene-sellers .scene-copy{order:0}#homepageStory .scene-shortlist{grid-template-columns:1fr}#homepageStory .scene-sellers{margin-bottom:55px}#homepageStory .trip-beat{min-height:190px}#homepageStory .watch-row .telegram-object{order:2}#homepageStory .final-layout{gap:45px}#homepageStory .why-note{right:-14px}#homepageStory .companion-row{margin-top:85px}} @media(max-width:620px){#homepageStory .site-width{width:calc(100% - 30px)}#homepageStory .experiment-label{right:10px;top:10px;font-size:7px}#homepageStory .existing-hero{min-height:480px}#homepageStory .hero-context{padding-top:105px}#homepageStory .hero-context>p{font-size:54px}#homepageStory .request-context{grid-template-columns:1fr;padding:16px;gap:10px}#homepageStory .request-context span{padding:10px 0 0;border-top:1px dashed var(--line);border-left:0;font-size:13px}#homepageStory .request-context em{margin-top:3px}#homepageStory .trip-section,#homepageStory .companion-section{padding:96px 0}#homepageStory .trip-section>h1,#homepageStory .making-section h2,#homepageStory .companion-section>h2{font-size:53px}#homepageStory .trip-layout{margin-top:55px}#homepageStory .trip-beat{min-height:0;margin-bottom:42px;padding-left:17px}#homepageStory .trip-beat p{font-size:16px}#homepageStory .notebook{min-height:425px;padding:26px}#homepageStory .notebook-page{top:82px;right:26px;left:47px}#homepageStory .notebook-page strong{font-size:43px}#homepageStory .calendar{gap:5px;margin-top:27px}#homepageStory .calendar i{width:24px}#homepageStory .paperclip{right:26px}#homepageStory .trip-conclusion{margin-top:72px;padding-top:70px;text-align:left}#homepageStory .trip-conclusion h2{margin-left:0;font-size:47px}#homepageStory .making-section{padding:96px 0 25px}#homepageStory .scene{margin-top:75px}#homepageStory .scene-copy p{font-size:16px}#homepageStory .request-note{padding:25px 20px}#homepageStory .request-note p{font-size:13px}#homepageStory .sorting-table{min-height:385px;padding:20px}#homepageStory .requirement-tags{top:105px;left:20px;right:20px}#homepageStory .requirement-tags b{font-size:7px}#homepageStory .judgement{left:20px;right:20px;bottom:20px;font-size:7px}#homepageStory .route-strip{display:block}#homepageStory .route-strip span{display:block;margin-top:9px;text-align:left}#homepageStory .slip-stack{height:390px;padding:18px 0}#homepageStory .flight-slip{left:0;right:0}#homepageStory .best-fit{padding:14px}#homepageStory .best-fit h3{font-size:21px}#homepageStory .best-fit p strong{font-size:24px}#homepageStory .value{top:200px}#homepageStory .other{top:254px}#homepageStory .why-note{right:-9px;top:116px;width:170px}#homepageStory .why-note.is-open{right:-1px;width:205px}#homepageStory .seller-composition{padding:32px 17px 20px}#homepageStory .seller-flight{display:block}#homepageStory .seller-flight span{display:block;margin-top:7px;text-align:left}#homepageStory .receipts{gap:6px}#homepageStory .receipts article{min-height:130px;padding:11px 7px}#homepageStory .receipts strong{font-size:22px}#homepageStory .companion-copy h3{font-size:40px}#homepageStory .companion-copy p{font-size:16px}#homepageStory .conversation-note{min-height:335px;padding:20px}#homepageStory .question{width:92%;font-size:14px}#homepageStory .conversation-note button{right:17px;top:105px;width:91%}#homepageStory .conversation-note>div{right:19px;width:83%}#homepageStory .telegram-object{transform:scale(.92)}#homepageStory .telegram-object aside{right:-72px}#homepageStory .final-section{padding:84px 0}#homepageStory .final-layout h2{font-size:44px}#homepageStory .footer{align-items:flex-start;justify-content:center;flex-direction:column;gap:14px;padding:30px 0}#homepageStory .footer small{line-height:1.5}} @media(prefers-reduced-motion:reduce){#homepageStory{scroll-behavior:auto}#homepageStory *,#homepageStory *:before,#homepageStory *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}#homepageStory .motion-ready [data-reveal]{opacity:1;transform:none}} /* Story content must remain legible even if an observer never runs. */ #homepageStory .trip-beat{opacity:.62} #homepageStory.motion-ready [data-reveal]{opacity:1;transform:none;transition:transform .35s ease} /* Brief-alignment pass: production hero, scroll-led states, safe progressive motion. */ #homepageStory { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); } #homepageStory .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #homepageStory .existing-hero { min-height: 760px; overflow: hidden; } #homepageStory .hero-context { padding-top: 108px; } #homepageStory .hero-heading { text-align: center; } #homepageStory .hero-heading h1 { margin: 0; color: var(--teal); font: 400 clamp(48px, 6vw, 78px)/.92 var(--serif); letter-spacing: -.04em; } #homepageStory .hero-heading p { margin: 15px auto 42px; color: var(--muted); font: 700 13px/1.5 var(--mono); letter-spacing: .055em; text-transform: uppercase; } #homepageStory .production-ticket { position: relative; width: min(830px, 100%); margin-inline: auto; padding: 27px 28px 16px; background: var(--paper); border: 3px solid var(--ink); border-radius: 19px; box-shadow: 14px 15px 0 var(--teal); } #homepageStory .production-ticket::before,#homepageStory .production-ticket::after { content: ""; position: absolute; top: 50%; width: 28px; height: 28px; background: var(--cream); border: 3px solid var(--ink); border-radius: 50%; transform: translateY(-50%); } #homepageStory .production-ticket::before { left: -18px; clip-path: inset(0 0 0 50%); } #homepageStory .production-ticket::after { right: -18px; clip-path: inset(0 50% 0 0); } #homepageStory .passenger-label { position: absolute; top: -16px; left: 28px; z-index: 2; padding: 7px 11px; color: #fff; background: var(--orange); border: 2px solid var(--ink); font: 700 9px/1 var(--mono); letter-spacing: .1em; transform: rotate(-2deg); } #homepageStory .production-ticket textarea { display: block; width: 100%; min-height: 112px; padding: 20px 5px; resize: none; color: var(--ink); background: radial-gradient(#deded8 1px, transparent 1px); background-size: 20px 20px; border: 0; outline: 0; font: 400 18px/1.55 var(--mono); } #homepageStory .production-ticket textarea::placeholder { color: #969a96; font-family: var(--serif); font-style: italic; } #homepageStory .production-ticket-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 12px; border-top: 1px dashed var(--line); } #homepageStory .confirm-button { min-width: 165px; padding: 15px 20px; color: #fff; background: var(--orange); border: 2px solid var(--ink); border-radius: 7px; box-shadow: 4px 4px 0 var(--ink); font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms ease; } #homepageStory .confirm-button:hover { background: #ff7020; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } #homepageStory .confirm-button:active { transform: translate(4px, 4px); box-shadow: none; } #homepageStory .confirm-button:focus-visible,#homepageStory .final-calendar-button:focus-visible,#homepageStory .why-note:focus-visible,#homepageStory .conversation-note button:focus-visible { outline: 3px solid #ff9e63; outline-offset: 3px; } #homepageStory .ticket-code { display: flex; justify-content: flex-end; align-items: center; gap: 13px; margin-top: 10px; color: var(--muted); font: 700 7px/1 var(--mono); letter-spacing: .08em; } #homepageStory .ticket-code i { width: 100px; height: 10px; opacity: .55; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); } #homepageStory .hero-context > .hero-status { min-height: 18px; margin: 22px auto 0; color: var(--teal); font: 700 9px/1.4 var(--mono); text-align: center; letter-spacing: .05em; text-transform: uppercase; } #homepageStory .trip-section,#homepageStory .making-section,#homepageStory .companion-section { scroll-margin-top: 24px; } #homepageStory .trip-beat { cursor: default; transition: opacity 240ms ease, border-color 240ms ease, transform 320ms var(--ease-out); } #homepageStory .trip-beat::before { opacity: 0; transform: translateX(-6px); transition: opacity 180ms ease, transform 280ms var(--ease-out); } #homepageStory .trip-beat.is-active::before { opacity: 1; transform: none; } #homepageStory .notebook-page { transition: opacity 260ms ease, transform 360ms var(--ease-out); } #homepageStory .notebook-page:not(.is-current) { transform: translateY(10px) rotate(-.6deg); } #homepageStory .notebook-page.is-current > * { animation: notebook-detail-in 360ms var(--ease-out) both; } #homepageStory .notebook-page.is-current > *:nth-child(2) { animation-delay: 35ms; } #homepageStory .notebook-page.is-current > *:nth-child(3) { animation-delay: 70ms; } #homepageStory .notebook-page.is-current > *:nth-child(4) { animation-delay: 105ms; } #homepageStory .why-note { transition: width 320ms var(--ease-out), right 320ms var(--ease-out), transform 260ms var(--ease-out), box-shadow 260ms ease; } #homepageStory .why-note:hover { transform: rotate(1.2deg) translateY(-2px); box-shadow: 7px 9px 0 rgba(242,92,5,.22); } #homepageStory .why-note span { transition: max-height 280ms var(--ease-out), margin 280ms var(--ease-out), opacity 220ms ease; opacity: 0; } #homepageStory .why-note.is-open span { opacity: 1; } /* Motion starts from a readable state; JavaScript only adds polish. */ #homepageStory.motion-ready [data-reveal] { opacity: .82; transform: translateY(14px); transition: opacity 380ms ease, transform 480ms var(--ease-out); } #homepageStory.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; } #homepageStory.motion-ready .request-note,#homepageStory.motion-ready .sorting-table,#homepageStory.motion-ready .shortlist-table,#homepageStory.motion-ready .seller-composition,#homepageStory.motion-ready .conversation-note,#homepageStory.motion-ready .telegram-object { transition: transform 480ms var(--ease-out), box-shadow 480ms var(--ease-out), opacity 320ms ease; } #homepageStory.motion-ready [data-reveal]:not(.is-visible) .request-note,#homepageStory.motion-ready [data-reveal]:not(.is-visible) .sorting-table,#homepageStory.motion-ready [data-reveal]:not(.is-visible) .shortlist-table,#homepageStory.motion-ready [data-reveal]:not(.is-visible) .seller-composition,#homepageStory.motion-ready [data-reveal]:not(.is-visible) .conversation-note,#homepageStory.motion-ready [data-reveal]:not(.is-visible) .telegram-object { transform: translateY(12px) rotate(0); } #homepageStory .request-note mark { background-size: 0 100%; background-repeat: no-repeat; transition: background-size 420ms var(--ease-out); } #homepageStory .scene-thought.is-visible .request-note mark { background-size: 100% 100%; } #homepageStory .scene-thought.is-visible .request-note mark:nth-of-type(2) { transition-delay: 90ms; } #homepageStory .scene-thought.is-visible .request-note mark:nth-of-type(3) { transition-delay: 180ms; } #homepageStory .scene-thought.is-visible .request-note mark:nth-of-type(4) { transition-delay: 270ms; } #homepageStory .type-chunk { transition: opacity 220ms ease; } #homepageStory.motion-ready .scene-thought:not(.is-visible) .type-chunk { opacity: .28; } #homepageStory .scene-thought.is-visible .type-chunk { animation: type-chunk-in 240ms ease both; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(2) { animation-delay: 90ms; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(3) { animation-delay: 180ms; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(4) { animation-delay: 270ms; } #homepageStory .faint-options i { filter: blur(.65px); } #homepageStory .faint-options i { transition: opacity 320ms ease, transform 420ms var(--ease-out); } #homepageStory .scene-understand.is-visible .faint-options i:nth-child(2),#homepageStory .scene-understand.is-visible .faint-options i:nth-child(4),#homepageStory .scene-understand.is-visible .faint-options i:nth-child(6) { opacity: .18; transform: scale(.97); } #homepageStory .requirement-tags b,#homepageStory .judgement > *,#homepageStory .flight-slip,#homepageStory .route-strip,#homepageStory .receipts article,#homepageStory .final-layout aside span { transition: opacity 300ms ease, transform 420ms var(--ease-out); } #homepageStory.motion-ready .scene-understand:not(.is-visible) .requirement-tags b,#homepageStory.motion-ready .scene-understand:not(.is-visible) .judgement > *,#homepageStory.motion-ready .scene-shortlist:not(.is-visible) .flight-slip,#homepageStory.motion-ready .scene-shortlist:not(.is-visible) .route-strip,#homepageStory.motion-ready .scene-sellers:not(.is-visible) .receipts article,#homepageStory.motion-ready .final-section:not(.is-visible) .final-layout aside span { opacity: .45; transform: translateY(8px); } #homepageStory .requirement-tags b:nth-child(2),#homepageStory .judgement > *:nth-child(2),#homepageStory .flight-slip:nth-child(2),#homepageStory .receipts article:nth-child(2),#homepageStory .final-layout aside span:nth-child(2) { transition-delay: 55ms; } #homepageStory .requirement-tags b:nth-child(3),#homepageStory .judgement > *:nth-child(3),#homepageStory .flight-slip:nth-child(3),#homepageStory .receipts article:nth-child(3),#homepageStory .final-layout aside span:nth-child(3) { transition-delay: 110ms; } #homepageStory .requirement-tags b:nth-child(4),#homepageStory .judgement > *:nth-child(4),#homepageStory .final-layout aside span:nth-child(4) { transition-delay: 165ms; } #homepageStory .requirement-tags b:nth-child(5) { transition-delay: 220ms; } #homepageStory .shortlist-ghosts { position: absolute; inset: 14px 4px 45px; z-index: 0; display: grid; gap: 6px; opacity: .22; transition: opacity 300ms ease, transform 420ms var(--ease-out); } #homepageStory .shortlist-ghosts i { display: block; height: 38px; background: var(--paper); border: 1px solid var(--line); transform: rotate(-1deg); } #homepageStory .shortlist-ghosts i:nth-child(even) { transform: rotate(1deg); } #homepageStory .scene-shortlist.is-visible .shortlist-ghosts { opacity: .04; transform: scale(.985); } #homepageStory .scene-shortlist.is-visible .best-fit { transform: translateY(-3px); } #homepageStory .receipts { perspective: 700px; } #homepageStory.motion-ready .scene-sellers:not(.is-visible) .receipts article { transform-origin: top; transform: rotateX(-18deg) translateY(-5px); } #homepageStory .followup-row { grid-template-columns: .82fr 1.18fr; } #homepageStory .watch-row { grid-template-columns: .9fr 1.1fr; } #homepageStory .conversation-note button,#homepageStory .conversation-note > div { transition: transform 320ms var(--ease-out), opacity 240ms ease, box-shadow 240ms ease; } #homepageStory .conversation-note > div:not([hidden]) { animation: followup-in 340ms var(--ease-out) both; } /* Neutral iPhone with an iOS-light Telegram surface. */ #homepageStory .phone { position: relative; min-height: 535px; padding: 8px; background: linear-gradient(145deg, #38383a, #0c0c0d); border: 2px solid #050505; border-radius: 42px; box-shadow: 12px 13px 0 rgba(242,92,5,.62), inset 0 0 0 1px #656568; } #homepageStory .phone-screen { position: relative; min-height: 517px; overflow: hidden; background: #fff; border-radius: 33px; } #homepageStory .ios-status { display: flex; justify-content: space-between; align-items: center; height: 31px; padding: 8px 18px 2px; color: #111; background: #fff; font: 600 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #homepageStory .dynamic-island { top: 8px; width: 82px; height: 20px; z-index: 3; } #homepageStory .phone header { min-height: 50px; margin: 0; padding: 6px 11px 7px; color: #2481cc; background: rgba(255,255,255,.97); border-bottom: 1px solid #d9dde0; } #homepageStory .phone header > b,#homepageStory .phone header > i { color: #2481cc; font-size: 20px; } #homepageStory .phone header > span:not(.telegram-avatar) { flex: 1; align-items: flex-start; margin-left: 8px; } #homepageStory .phone header span strong { color: #111; font-size: 13px; } #homepageStory .phone header span small { color: #8c8c91; font-size: 9px; } #homepageStory .telegram-avatar { display: grid !important; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; color: #fff !important; background: var(--orange); border-radius: 50%; font: 400 16px/1 var(--serif); } #homepageStory .telegram-chat { display: flex; flex-direction: column; gap: 12px; min-height: 395px; padding: 15px 10px 12px; background: #e8eff3 url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 18h32M18 2v32' stroke='%23d7e3e8' stroke-width='.55' opacity='.35'/%3E%3C/svg%3E"); } #homepageStory .telegram-chat p { max-width: 86%; margin: 0; padding: 10px 11px; border-radius: 10px; color: #1d1d1f; font-size: 11px; line-height: 1.38; } #homepageStory .telegram-user { background: #e4ffc7; } #homepageStory .telegram-bot { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.06); } #homepageStory .telegram-alert { background: #fff !important; color: #111 !important; box-shadow: 0 1px 1px rgba(0,0,0,.08); } #homepageStory .telegram-alert > b { font-weight: 500; } #homepageStory .telegram-alert strong { color: #2481cc; } #homepageStory .telegram-alert span { color: #6d7378; opacity: 1; } #homepageStory .telegram-composer { display: flex; justify-content: space-between; align-items: center; height: 41px; padding: 6px 12px; color: #969aa0; background: #fff; border-top: 1px solid #d9dde0; font: 400 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #homepageStory .telegram-composer b { color: #2481cc; } #homepageStory .telegram-alert { animation: none; } #homepageStory.motion-ready .watch-row:not(.is-visible) .telegram-alert { opacity: .55; transform: translateY(10px); } #homepageStory .watch-row.is-visible .telegram-alert { animation: telegram-alert-in 420ms var(--ease-out) 220ms both; } #homepageStory .final-layout aside small { flex-basis: 100%; margin-bottom: 4px; color: #f8b183; font: 700 8px/1.3 var(--mono); letter-spacing: .07em; } @keyframes notebook-detail-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes followup-in { from { opacity: 0; transform: translateY(8px) rotate(1deg); } to { opacity: 1; transform: none; } } @keyframes telegram-alert-in { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes type-chunk-in { from { opacity: .3; } to { opacity: 1; } } @media (max-width: 620px) { #homepageStory .existing-hero { min-height: 730px; } #homepageStory .hero-context { padding-top: 92px; } #homepageStory .hero-heading { text-align: left; } #homepageStory .hero-heading h1 { font-size: 57px; } #homepageStory .hero-heading p { margin: 15px 0 35px; font-size: 10px; } #homepageStory .production-ticket { padding: 24px 16px 14px; border-radius: 15px; box-shadow: 9px 10px 0 var(--teal); } #homepageStory .production-ticket textarea { min-height: 130px; font-size: 15px; } #homepageStory .production-ticket-footer { align-items: stretch; flex-direction: column; } #homepageStory .calendar-button { text-align: left; } #homepageStory .confirm-button { width: 100%; min-height: 52px; } #homepageStory .ticket-code { justify-content: space-between; } #homepageStory .trip-layout { display: flex; flex-direction: column; gap: 0; } #homepageStory .notebook-wrap { order: 1; position: sticky; top: 8px; z-index: 8; width: 100%; padding: 8px 0 13px; background: linear-gradient(var(--cream) 78%, transparent); } #homepageStory .trip-copy { order: 2; margin-top: 28px; } #homepageStory .trip-beat { min-height: 220px; margin: 0; padding: 24px 0 30px 18px; } #homepageStory .notebook { min-height: 305px; padding: 22px 20px; box-shadow: 8px 9px 0 rgba(31,78,91,.15); } #homepageStory .notebook header { padding-left: 20px; } #homepageStory .notebook-page { top: 66px; left: 40px; right: 20px; } #homepageStory .notebook-page strong { margin: 20px 0 8px; font-size: 33px; } #homepageStory .notebook-page small,#homepageStory .notebook-page em { font-size: 9px; } #homepageStory .notebook-page > b { margin: 9px 0; font-size: 8px; } #homepageStory .calendar { margin: 18px 0 16px; } #homepageStory .calendar i { width: 21px; height: 18px; } #homepageStory .paperclip { right: 24px; height: 49px; } #homepageStory .coffee-ring { width: 60px; height: 60px; bottom: 17px; } #homepageStory .time-stamp,#homepageStory .weekend-stamp { top: 32px; padding: 8px 6px; font-size: 6px; } #homepageStory .trip-conclusion { margin-top: 40px; } #homepageStory .why-note.is-open { right: -1px; width: 215px; } #homepageStory .phone { min-height: 520px; } #homepageStory .phone-screen { min-height: 500px; } #homepageStory .telegram-chat { min-height: 379px; } #homepageStory .followup-row,#homepageStory .watch-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { #homepageStory { scroll-behavior: auto; } #homepageStory *,#homepageStory *::before,#homepageStory *::after { animation: none !important; transition-duration: .01ms !important; } #homepageStory.motion-ready [data-reveal] { opacity: 1; transform: none; } } /* Focused refinement pass from the 1440px / 390px review. */ /* Section 1: emotion over process markers. */ #homepageStory .trip-beat::before,#homepageStory .trip-beat.is-active::before { content: none !important; } #homepageStory .trip-beat { opacity: .64; } #homepageStory .trip-beat.is-active { opacity: 1; border-color: var(--orange); transform: translateX(6px); } #homepageStory .notebook-wrap > p { display: none; } #homepageStory .trip-conclusion .conclusion-line { margin: 30px 0 0; color: var(--ink); font: 500 18px/1.5 var(--sans); letter-spacing: 0; text-transform: none; } #homepageStory .calendar-contract { display: flex; gap: 5px; width: 155px; margin: 15px 0 -24px; } #homepageStory .calendar-contract i { width: 17px; height: 13px; border: 1px solid var(--line); background: var(--paper); transform-origin: center; } #homepageStory .notebook-page.is-current .calendar-contract i { animation: calendar-contract 440ms var(--ease-out) both; } #homepageStory .notebook-page.is-current .calendar-contract i:nth-child(1) { animation-delay: 0ms; } #homepageStory .notebook-page.is-current .calendar-contract i:nth-child(2) { animation-delay: 25ms; } #homepageStory .notebook-page.is-current .calendar-contract i:nth-child(3) { animation-delay: 50ms; } #homepageStory .notebook-page.is-current .calendar-contract i:nth-child(4) { animation-delay: 75ms; border-color: var(--orange); background: rgba(242,92,5,.12); } #homepageStory .notebook-page.is-current .calendar-contract i:nth-child(5) { animation-delay: 100ms; } #homepageStory .notebook-page.is-current .calendar-contract i:nth-child(6) { animation-delay: 125ms; } #homepageStory .notebook-page.is-current .calendar-contract i:nth-child(7) { animation-delay: 150ms; } #homepageStory .meeting-replaced { display: block; width: max-content; margin: 12px 0 -22px; color: #938c82; font: 700 9px/1 var(--mono); text-decoration: line-through 2px var(--orange); transform: rotate(-2deg); } #homepageStory .notebook-page[data-page="weekend"] s { color: #948e85; text-decoration-color: var(--orange); } /* Section 2.2: an open, visible reduction from eighteen options to three. */ #homepageStory .sorting-table { min-height: 455px; padding: 76px 0 52px; overflow: visible; background: transparent; border: 0; box-shadow: none; } #homepageStory .sorting-table::before { content: ""; position: absolute; inset: 53px -24px 38px; z-index: 0; background: radial-gradient(circle at center, rgba(255,253,247,.8), transparent 70%); pointer-events: none; } #homepageStory .requirement-tags { top: 0; left: -12px; right: -12px; z-index: 3; justify-content: center; } #homepageStory .requirement-tags b { padding: 9px 11px; background: var(--paper); border-color: rgba(31,78,91,.45); box-shadow: 3px 4px 0 rgba(31,78,91,.1); font-size: 9px; } #homepageStory .flight-field { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #homepageStory .flight-field i { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; min-width: 0; padding: 9px 10px; color: var(--teal); background: var(--paper); border: 1px solid rgba(26,26,26,.46); box-shadow: 3px 3px 0 rgba(31,78,91,.08); font-style: normal; transform: rotate(-.4deg); } #homepageStory .flight-field i:nth-child(even) { transform: rotate(.5deg); } #homepageStory .flight-field b { font: 700 9px/1 var(--mono); } #homepageStory .flight-field span { overflow: hidden; color: var(--muted); font: 400 9px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; } #homepageStory .flight-field em { grid-column: 1 / -1; width: max-content; color: #938c83; font: 700 7px/1 var(--mono); font-style: normal; letter-spacing: .05em; } /* width:max-content forces these tags onto one line whatever they say, which is * fine for the English labels but sent "ВСЕГО НА $20 ДОРОЖЕ САМОГО ДЕШЁВОГО, НО * НАМНОГО БЫСТРЕЕ" straight out through the right edge of its card. * * width:auto rather than a max-width cap, because the cap does not bite here: a * spanning grid item sized to max-content contributes that width to the column * tracks, so the card's own tracks grow past the card and a percentage cap * measures itself against the inflated area. Letting the item take its area * back breaks the loop — the tracks size to the longest word and the tag wraps * inside the card. justify-self:start puts the hug back, so the short tags — * ХОРОШО ПОДХОДИТ, 2 ПЕРЕСАДКИ — still size to their own text exactly as the * English ones do; only the sentence-length one uses the second line. * line-height comes up from 1 so those two lines do not touch. Scoped to * Russian so the English cards keep their exact heights. */ html[lang="ru"] #homepageStory .flight-field em { width: auto; justify-self: start; line-height: 1.3; white-space: normal; } #homepageStory .flight-field .survives { z-index: 2; border: 2px solid var(--teal); box-shadow: 4px 5px 0 rgba(242,92,5,.22); } #homepageStory .flight-field .survives em { color: var(--orange); } #homepageStory .flight-field .fails { opacity: .24; } #homepageStory.motion-ready .scene-understand:not(.is-visible) .flight-field i { opacity: .5; transform: translateY(12px); } #homepageStory .scene-understand.is-visible .flight-field .fails { animation: option-reject 760ms var(--ease-out) both; } #homepageStory .scene-understand.is-visible .flight-field .survives { animation: option-keep 760ms var(--ease-out) both; } #homepageStory .scene-understand.is-visible .flight-field i:nth-child(3n + 2) { animation-delay: 55ms; } #homepageStory .scene-understand.is-visible .flight-field i:nth-child(3n + 3) { animation-delay: 110ms; } #homepageStory .sorting-count { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0; color: #938c83; font: 700 10px/1 var(--mono); } #homepageStory .sorting-count i { border-top: 1px dashed var(--line); } #homepageStory .sorting-count strong { color: var(--teal); font: 700 11px/1 var(--mono); } /* Section 2.3: larger market context and unobstructed recommendation data. */ #homepageStory .route-strip { display: block; padding: 20px; } #homepageStory .route-strip > b { display: block; font-size: 31px; } #homepageStory .market-facts { display: grid; grid-template-columns: .7fr .7fr 1.25fr 1fr; gap: 8px; margin-top: 17px; } #homepageStory .market-facts > span,#homepageStory .market-facts > strong { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px; color: var(--teal); background: rgba(255,255,255,.45); border: 1px solid rgba(31,78,91,.18); font: 400 18px/1 var(--serif); text-align: left; } #homepageStory .market-facts > strong { color: #fff; background: var(--orange); border-color: var(--ink); } #homepageStory .market-facts small { color: var(--muted); font: 700 9px/1 var(--mono); letter-spacing: .04em; } #homepageStory .market-facts strong small { color: rgba(255,255,255,.78); } #homepageStory .slip-stack { display: flex; flex-direction: column; height: auto; min-height: 430px; gap: 9px; padding: 24px 15px 8px; } #homepageStory .slip-stack .flight-slip { position: relative; top: auto; right: auto; left: auto; width: 100%; } #homepageStory .slip-stack .best-fit { transform: none; } #homepageStory .slip-stack .why-note { position: relative; top: auto; right: auto; width: calc(100% - 48px); margin: -11px 0 3px 30px; padding: 14px 16px; transform: rotate(-.6deg); } #homepageStory .slip-stack .why-note::before { top: -16px; left: 34px; width: 1px; height: 16px; border-top: 0; border-left: 1px solid var(--orange); } #homepageStory .slip-stack .why-note.is-open { width: calc(100% - 48px); } #homepageStory .slip-stack .value,#homepageStory .slip-stack .other { display: flex; min-height: 66px; padding: 13px 17px; } #homepageStory .slip-stack .value { margin-left: 12px; width: calc(100% - 12px); transform: rotate(.45deg); } #homepageStory .slip-stack .other { margin-left: 4px; width: calc(100% - 4px); transform: rotate(-.35deg); } #homepageStory .value > div,#homepageStory .other > div { display: flex; flex-direction: column; gap: 7px; } #homepageStory .value span,#homepageStory .other span { color: var(--muted); font: 700 9px/1 var(--mono); } #homepageStory .shortlist-ghosts { inset: 18px 3px auto; height: 230px; pointer-events: none; } /* Section 2.4: the selected flight opens into receipts, without another board. */ #homepageStory .seller-composition { padding: 30px 4px 18px; background: transparent; border: 0; box-shadow: none; transform: none; } #homepageStory .seller-flight { position: relative; z-index: 3; width: 84%; margin-inline: auto; box-shadow: 7px 8px 0 rgba(31,78,91,.14); transform: rotate(-.5deg); } #homepageStory .receipts { position: relative; z-index: 2; align-items: flex-start; margin: 14px 0 0; padding-top: 19px; } #homepageStory .receipts::before { content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 20px; border-top: 1px solid rgba(31,78,91,.45); border-inline: 1px solid rgba(31,78,91,.45); } #homepageStory .receipts article { min-height: 145px; transform-origin: top; } #homepageStory .receipts article:first-child { transform: rotate(-4deg); } #homepageStory .receipts article:nth-child(2) { transform: translateY(10px) rotate(.4deg); } #homepageStory .receipts article:nth-child(3) { transform: rotate(4deg); } #homepageStory .seller-composition > p { margin-top: 26px; font-size: 9px; } /* Section 3.1: editorial request and changing itinerary, not chat UI. */ #homepageStory .followup-composition { position: relative; min-height: 390px; padding: 28px; } #homepageStory .followup-composition::before { content: ""; position: absolute; inset: 15px 0 46px 18px; background: rgba(255,253,247,.55); border-block: 1px solid rgba(31,78,91,.15); transform: rotate(-1deg); } #homepageStory .followup-strip { position: relative; z-index: 3; width: 88%; margin: 0; padding: 17px 19px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 5px 6px 0 rgba(31,78,91,.11); font: 400 16px/1.4 var(--mono); transform: rotate(-.7deg); } #homepageStory .review-annotation { position: relative; z-index: 3; width: max-content; margin: 18px 0 8px 24%; color: var(--orange); font: italic 400 19px/1.2 var(--serif); transform: rotate(-2deg); } #homepageStory .itinerary-shift { position: relative; z-index: 2; min-height: 205px; } #homepageStory .itinerary-shift article { position: absolute; padding: 16px 18px; background: var(--paper); border: 2px solid var(--ink); } #homepageStory .itinerary-shift small { display: block; margin-bottom: 10px; color: var(--orange); font: 700 8px/1 var(--mono); letter-spacing: .08em; } #homepageStory .previous-itinerary { top: 32px; left: 0; width: 64%; color: #8e8982; box-shadow: 4px 5px 0 rgba(31,78,91,.08); transform: translateX(-16px) rotate(-3deg); } #homepageStory .previous-itinerary s { font: 700 10px/1 var(--mono); } #homepageStory .updated-itinerary { top: 13px; right: 0; display: grid; grid-template-columns: 1fr auto; gap: 9px; width: 72%; color: var(--teal); box-shadow: 7px 8px 0 rgba(242,92,5,.2); transform: rotate(1.2deg); } #homepageStory .updated-itinerary small,#homepageStory .updated-itinerary em { grid-column: 1 / -1; } #homepageStory .updated-itinerary span { font: 700 10px/1.3 var(--mono); } #homepageStory .updated-itinerary b { font: 400 26px/1 var(--serif); } #homepageStory .updated-itinerary em { color: var(--muted); font: 700 8px/1 var(--mono); font-style: normal; } #homepageStory.motion-ready .followup-row:not(.is-visible) .previous-itinerary { transform: translateX(0) rotate(-1deg); opacity: .72; } #homepageStory.motion-ready .followup-row:not(.is-visible) .updated-itinerary { transform: translateX(18px) rotate(1.2deg); opacity: .3; } #homepageStory .followup-row.is-visible .previous-itinerary,#homepageStory .followup-row.is-visible .updated-itinerary { transition: transform 480ms var(--ease-out), opacity 320ms ease; } #homepageStory .followup-row.is-visible .updated-itinerary { transition-delay: 130ms; } /* Telegram must be a real capture. This is an honest asset slot, not redrawn UI. */ #homepageStory .phone { display: grid; place-items: center; min-height: 535px; padding: 10px; background: linear-gradient(145deg, #424246, #111113); border: 2px solid #050505; border-radius: 42px; box-shadow: 0 22px 48px rgba(20,28,31,.24), inset 0 0 0 1px #656568; } #homepageStory .telegram-capture-required { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 515px; padding: 28px; color: #5c6266; background: repeating-linear-gradient(-45deg,#f5f6f7 0 12px,#eceff1 12px 24px); border-radius: 32px; text-align: center; } #homepageStory .telegram-capture { display: block; width: 100%; height: 515px; object-fit: cover; object-position: top center; border-radius: 32px; } #homepageStory .telegram-capture[hidden],#homepageStory .telegram-capture-required[hidden] { display: none; } #homepageStory .telegram-capture-required span { color: #2481cc; font: 700 9px/1 var(--mono); letter-spacing: .08em; } #homepageStory .telegram-capture-required b { max-width: 14ch; margin: 16px 0 12px; color: #1f2528; font: 400 26px/1.05 var(--serif); } #homepageStory .telegram-capture-required small { padding: 7px 9px; background: rgba(255,255,255,.7); font: 700 8px/1 var(--mono); } /* Final statement: calmer scale and more legible preference memory. */ #homepageStory .final-layout { grid-template-columns: 1.35fr .65fr; gap: 72px; } #homepageStory .final-layout h2 { max-width: 19ch; font-size: clamp(38px, 4.15vw, 60px); line-height: .98; } #homepageStory .final-layout aside span { padding: 11px 12px; font-size: 10px; line-height: 1.3; } #homepageStory .final-layout aside small { font-size: 9px; } #homepageStory .final-section.is-visible .final-layout aside span:nth-of-type(1) { transition-delay: 40ms; } #homepageStory .final-section.is-visible .final-layout aside span:nth-of-type(2) { transition-delay: 100ms; } #homepageStory .final-section.is-visible .final-layout aside span:nth-of-type(3) { transition-delay: 160ms; } #homepageStory .final-section.is-visible .final-layout aside span:nth-of-type(4) { transition-delay: 220ms; } @keyframes calendar-contract { 0% { opacity: .45; transform: translateX(-5px) scale(.9); } 62% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: .2; transform: translateX(42px) scale(.52); } } @keyframes option-reject { 0% { opacity: 0; transform: translateY(12px); } 32% { opacity: .78; transform: none; } 62% { opacity: .72; transform: none; } 100% { opacity: .14; transform: translateX(-14px) scale(.97); } } @keyframes option-keep { 0% { opacity: 0; transform: translateY(12px); } 45% { opacity: .75; transform: none; } 100% { opacity: 1; transform: translateY(-3px) scale(1.025); } } @media (max-width: 900px) { #homepageStory .scene-understand .scene-copy,#homepageStory .scene-sellers .scene-copy { order: 0; } #homepageStory .followup-row,#homepageStory .watch-row { grid-template-columns: 1fr; } #homepageStory .watch-row .telegram-object { order: 2; } } @media (max-width: 620px) { #homepageStory .trip-section,#homepageStory .companion-section { padding: 78px 0; } #homepageStory .making-section { padding: 82px 0 18px; } #homepageStory .scene { margin-top: 58px; } #homepageStory .companion-row { margin-top: 70px; } #homepageStory .trip-beat { min-height: 195px; } #homepageStory .trip-conclusion .conclusion-line { margin-top: 24px; font-size: 17px; } #homepageStory .calendar-contract { margin-top: 9px; transform: scale(.8); transform-origin: left; } #homepageStory .meeting-replaced { margin-top: 8px; margin-bottom: -18px; font-size: 7px; } #homepageStory .sorting-table { min-height: 555px; padding: 112px 0 48px; } #homepageStory .sorting-table::before { inset: 90px -8px 35px; } #homepageStory .requirement-tags { left: 0; right: 0; justify-content: flex-start; } #homepageStory .requirement-tags b { padding: 8px; font-size: 8px; } #homepageStory .flight-field { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } #homepageStory .flight-field i { padding: 8px; } #homepageStory .flight-field b,#homepageStory .flight-field span { font-size: 8px; } #homepageStory .sorting-count { font-size: 9px; } #homepageStory .route-strip { padding: 17px 13px; } #homepageStory .route-strip > b { font-size: 27px; } #homepageStory .market-facts { grid-template-columns: 1fr 1fr; } #homepageStory .market-facts > span,#homepageStory .market-facts > strong { font-size: 17px; } #homepageStory .market-facts small { font-size: 10px; } #homepageStory .slip-stack { min-height: 455px; padding-inline: 0; } #homepageStory .best-fit > small,#homepageStory .best-fit > em,#homepageStory .value span,#homepageStory .other span { font-size: 10px; } #homepageStory .slip-stack .why-note,#homepageStory .slip-stack .why-note.is-open { width: calc(100% - 18px); margin: -8px 0 3px 18px; } #homepageStory .slip-stack .why-note span { font-size: 12px; } #homepageStory .slip-stack .value,#homepageStory .slip-stack .other { width: calc(100% - 5px); margin-left: 5px; } #homepageStory .seller-composition { padding-inline: 0; } #homepageStory .seller-flight { width: 94%; } #homepageStory .seller-flight span { font-size: 10px; } #homepageStory .receipts { gap: 7px; } #homepageStory .receipts article { min-height: 135px; padding: 12px 8px; } #homepageStory .receipts b,#homepageStory .receipts span { font-size: 10px; } #homepageStory .followup-composition { min-height: 360px; padding: 20px 2px; } #homepageStory .followup-composition::before { inset: 8px -5px 35px 8px; } #homepageStory .followup-strip { width: 94%; padding: 15px; font-size: 14px; } #homepageStory .review-annotation { margin-left: 10%; font-size: 17px; } #homepageStory .previous-itinerary { width: 67%; } #homepageStory .updated-itinerary { width: 76%; } #homepageStory .telegram-object { width: 305px; transform: none; } #homepageStory .telegram-capture-required { min-height: 520px; } #homepageStory .telegram-capture { height: 520px; } #homepageStory .telegram-object aside { right: -40px; } #homepageStory .final-section { padding: 72px 0; } #homepageStory .final-layout { gap: 35px; } #homepageStory .final-layout h2 { max-width: 21ch; font-size: 38px; line-height: 1; } #homepageStory .final-layout aside span { font-size: 9px; } } @media (prefers-reduced-motion: reduce) { #homepageStory .scene-understand.is-visible .flight-field .fails,#homepageStory .scene-understand.is-visible .flight-field .survives,#homepageStory .notebook-page.is-current .calendar-contract i { animation: none !important; } #homepageStory .flight-field .fails { opacity: .2; } #homepageStory .flight-field .survives { opacity: 1; transform: none; } } /* Section 1 only: pinned story/notebook and pinned conclusion sequences. */ #homepageStory { scroll-snap-type: y proximity; } #homepageStory .trip-section { padding-bottom: 0; } /* The story target receives programmatic focus after the navigation scroll so assistive technology follows the jump. Keep that implementation detail from painting a browser-default blue ring around the whole paper section. */ #homepageStory .trip-section[tabindex="-1"]:focus { outline: 0 !important; outline-offset: 0 !important; box-shadow: none; } #homepageStory .trip-section[tabindex="-1"]:focus-visible { outline: 0 !important; outline-offset: 0 !important; } /* Preserve the existing visual hierarchy after the story title became an H2. */ #homepageStory .trip-section > h2 { max-width: 1040px; margin: 0; color: var(--teal); font: 400 clamp(54px, 7vw, 94px)/.9 var(--serif); letter-spacing: -.045em; } @media (max-width: 620px) { #homepageStory .trip-section > h2 { font-size: 53px; } } #homepageStory .trip-scrolly { position: relative; height: 310vh; height: 310svh; margin-top: 42px; } #homepageStory .trip-stage { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(490px, 1.22fr); gap: clamp(60px, 10vw, 145px); align-items: center; width: 100%; height: 100vh; height: 100svh; overflow: hidden; } #homepageStory .trip-copy { position: relative; height: 290px; padding: 0; } #homepageStory .trip-beat { position: absolute; inset: 0; display: flex; align-items: center; min-height: 0; padding: 0 0 0 27px; opacity: 0 !important; border-left: 2px solid rgba(31,78,91,.16); pointer-events: none; filter: blur(.5px); transform: translateY(18px) scale(.985); transition: opacity 460ms ease, transform 680ms var(--ease-out), filter 460ms ease, border-color 320ms ease; will-change: opacity, transform; } #homepageStory .trip-beat p { max-width: 27ch; margin: 0; color: var(--muted); font-size: clamp(24px, 2.05vw, 28px); font-weight: 400; line-height: 1.48; letter-spacing: -.018em; } #homepageStory .trip-beat.is-before { transform: translateY(-18px) scale(.985); } #homepageStory .trip-beat.is-after { transform: translateY(18px) scale(.985); } #homepageStory .trip-beat.is-active { opacity: 1 !important; border-color: var(--orange); filter: none; transform: none; } #homepageStory .trip-stage .notebook-wrap { position: relative; top: auto; align-self: center; width: 100%; padding: 0; background: none; } /* The notebook frame keeps its existing size; only its content changes. */ #homepageStory .trip-stage .notebook { min-height: 500px; } #homepageStory .trip-stage .notebook-page { opacity: 0; transform: translateY(14px) rotate(-.25deg) scale(.987); transition: opacity 460ms ease, transform 680ms var(--ease-out); will-change: opacity, transform; } #homepageStory .trip-stage .notebook-page.is-before { transform: translateY(-14px) rotate(.25deg) scale(.987); } #homepageStory .trip-stage .notebook-page.is-after { transform: translateY(14px) rotate(-.25deg) scale(.987); } #homepageStory .trip-stage .notebook-page.is-current { opacity: 1; transform: none; } #homepageStory .trip-stage .notebook-page.is-current > * { animation: section-one-detail-in 410ms var(--ease-out) both; } #homepageStory .trip-stage .notebook-page.is-current > *:nth-child(2) { animation-delay: 45ms; } #homepageStory .trip-stage .notebook-page.is-current > *:nth-child(3) { animation-delay: 85ms; } #homepageStory .trip-stage .notebook-page.is-current > *:nth-child(4) { animation-delay: 125ms; } #homepageStory .trip-stage .notebook-page.is-current .calendar-contract i { animation: none; } #homepageStory .trip-progress,#homepageStory .trip-scroll-track,#homepageStory .conclusion-scroll-track,#homepageStory .conclusion-progress { pointer-events: none; } #homepageStory .trip-progress { display: none; } #homepageStory .conclusion-progress { display: none; } #homepageStory .trip-scroll-track,#homepageStory .conclusion-scroll-track { position: absolute; top: 0; right: 0; bottom: 100vh; bottom: 100svh; left: 0; z-index: 0; display: grid; grid-template-rows: repeat(3, 1fr); visibility: visible; opacity: 0; } #homepageStory .trip-scroll-track > span,#homepageStory .conclusion-scroll-track > span { scroll-snap-align: start; scroll-snap-stop: always; transform: translateY(8%); } #homepageStory .trip-conclusion { position: relative; width: 100%; max-width: none; height: 240vh; height: 240svh; margin: 0; padding: 0; border-top: 1px solid var(--line); text-align: center; } #homepageStory .conclusion-stage { position: sticky; top: 25vh; top: 25svh; z-index: 2; display: grid; place-items: center; width: 100%; height: 50vh; height: 50svh; min-height: 360px; margin-top: 0; overflow: hidden; } #homepageStory .trip-conclusion .conclusion-message { position: absolute; width: min(900px, calc(100% - 60px)); margin: 0; color: var(--teal); font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.04em; opacity: 0; pointer-events: none; transform: translateY(18px) scale(.99); transition: opacity 460ms ease, transform 680ms var(--ease-out); will-change: opacity, transform; } #homepageStory .trip-conclusion .conclusion-message.is-before { transform: translateY(-18px) scale(.99); } #homepageStory .trip-conclusion .conclusion-message.is-after { transform: translateY(18px) scale(.99); } #homepageStory .trip-conclusion .conclusion-message.is-current { opacity: 1; transform: none; } #homepageStory .trip-conclusion .conclusion-single { max-width: 18ch; font-size: clamp(40px, 4.4vw, 58px); } #homepageStory .trip-conclusion .conclusion-fit,#homepageStory .trip-conclusion .conclusion-built { max-width: 17ch; font-size: clamp(45px, 5.1vw, 68px); } #homepageStory .trip-conclusion .conclusion-built { color: var(--teal); } #homepageStory .trip-conclusion .conclusion-built em { color: var(--orange); text-decoration: none; } #homepageStory .trip-conclusion .conclusion-message em { color: var(--orange); font-style: normal; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } #homepageStory .conclusion-progress { position: absolute; bottom: 16px; left: 50%; display: flex; gap: 8px; transform: translateX(-50%); } #homepageStory .conclusion-progress i { width: 5px; height: 5px; background: rgba(31,78,91,.22); border-radius: 50%; transition: width 260ms var(--ease-out), background-color 260ms ease; } #homepageStory .conclusion-progress i.is-current { width: 23px; background: var(--orange); border-radius: 8px; } @keyframes section-one-detail-in { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { #homepageStory .trip-stage { grid-template-columns: minmax(240px, .8fr) minmax(390px, 1.2fr); gap: 42px; } #homepageStory .trip-beat p { font-size: clamp(22px, 2.8vw, 26px); } } @media (min-width: 621px) and (max-width: 760px) { #homepageStory .trip-stage { grid-template-columns: 1fr; grid-template-rows: 150px 500px; gap: 28px; align-content: center; } #homepageStory .trip-stage .trip-copy { height: 150px; } #homepageStory .trip-stage .notebook-wrap { width: min(100%, 580px); margin-inline: auto; } #homepageStory .trip-beat p { max-width: 34ch; font-size: 22px; } } @media (max-width: 620px) { #homepageStory .trip-scrolly { height: 310vh; height: 310svh; margin-top: 24px; } #homepageStory .trip-stage { grid-template-columns: 1fr; grid-template-rows: 150px 305px; gap: 25px; align-content: center; height: 100vh; height: 100svh; padding: 7px 0 12px; } #homepageStory .trip-stage .trip-copy { order: 1; height: 150px; margin: 0; } #homepageStory .trip-stage .notebook-wrap { order: 2; position: relative; top: auto; z-index: 2; padding: 0; } #homepageStory .trip-stage .notebook { min-height: 305px; } #homepageStory .trip-beat { padding-left: 18px; } #homepageStory .trip-beat p { max-width: 30ch; font-size: 20px; line-height: 1.42; } #homepageStory .trip-stage .notebook-page { transition-duration: 460ms, 660ms; } #homepageStory .trip-conclusion { height: 240vh; height: 240svh; } #homepageStory .conclusion-stage { top: 25vh; top: 25svh; height: 50vh; height: 50svh; min-height: 330px; margin-top: 0; } #homepageStory .trip-conclusion .conclusion-message { width: calc(100% - 26px); text-align: left; } #homepageStory .trip-conclusion .conclusion-single { font-size: 36px; } #homepageStory .trip-conclusion .conclusion-fit,#homepageStory .trip-conclusion .conclusion-built { max-width: 19ch; font-size: 40px; } #homepageStory .conclusion-progress { bottom: 12px; } } @media (prefers-reduced-motion: reduce) { #homepageStory .trip-beat,#homepageStory .trip-stage .notebook-page,#homepageStory .conclusion-message,#homepageStory .conclusion-progress i { transition-duration: .01ms !important; } #homepageStory .trip-stage .notebook-page.is-current > * { animation: none !important; } } /* Re-entering a story while scrolling up uses its settled state and the same layer transition. */ #homepageStory[data-scroll-direction="up"] .trip-stage .notebook-page.is-current > * { animation: none !important; } /* Section 2: one scroll-led scene that evolves from thought to booking choice. */ #homepageStory .how-it-works-cue { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 58px; color: var(--muted); font: 700 8px/1 var(--mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; } #homepageStory .how-it-works-cue i { color: var(--orange); font: 400 15px/1 var(--sans); font-style: normal; animation: cue-arrow 1.45s var(--ease-soft) infinite; } #homepageStory .how-it-works-cue:hover span { color: var(--teal); } #homepageStory .how-it-works-cue:focus-visible { outline: 2px solid var(--orange); outline-offset: -6px; } #homepageStory .making-section { padding: 140px 0 0; overflow: clip; } #homepageStory .making-scrolly { position: relative; height: 690vh; height: 690svh; margin-top: 17px; } #homepageStory .making-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } #homepageStory .making-stage .scene { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, .72fr) minmax(540px, 1.28fr); gap: clamp(54px, 8vw, 116px); align-items: center; width: 100%; margin: 0; opacity: 0; filter: blur(1.5px); pointer-events: none; transform: translateY(26px) scale(.988); transition: opacity 460ms ease, transform 680ms var(--ease-out), filter 460ms ease; will-change: opacity, transform; } #homepageStory .making-stage .scene.is-before { transform: translateY(-26px) scale(.988); } #homepageStory .making-stage .scene.is-after { transform: translateY(26px) scale(.988); } #homepageStory .making-stage .scene.is-active { z-index: 3; opacity: 1; filter: none; pointer-events: auto; transform: none; } #homepageStory .making-stage .scene-copy { position: relative; z-index: 5; order: 0 !important; } #homepageStory .making-stage .scene > :not(.scene-copy) { order: 1; } #homepageStory .making-stage .scene-copy::before { content: ""; position: absolute; top: -24px; left: 0; width: 34px; border-top: 2px solid var(--orange); } #homepageStory .making-stage .scene-copy span { margin-bottom: 18px; } #homepageStory .making-stage .scene-copy p { max-width: 27ch; font-size: clamp(24px, 2.05vw, 28px); line-height: 1.48; letter-spacing: -.018em; } #homepageStory .story-underline { padding: 0 1px 2px; color: inherit; background: linear-gradient(177deg, transparent 64%, rgba(242,92,5,.48) 66%, rgba(242,92,5,.22) 80%, transparent 82%); background-size: 0 100%; background-repeat: no-repeat; } #homepageStory .scene.is-visible .story-underline { background-size: 100% 100%; transition: background-size 520ms 180ms var(--ease-out); } #homepageStory .scene-understand.is-visible .story-underline:nth-of-type(2) { transition-delay: 320ms; } #homepageStory .scene-understand.is-visible .story-underline:nth-of-type(3) { transition-delay: 460ms; } #homepageStory .scene-shortlist.is-visible .story-underline:nth-of-type(2) { transition-delay: 340ms; } /* Alternate the judgment story: possibility field left, explanation right. */ #homepageStory .making-stage .scene-understand { grid-template-columns: minmax(540px, 1.28fr) minmax(280px, .72fr); } #homepageStory .making-stage .scene-understand .sorting-table { order: 0 !important; } #homepageStory .making-stage .scene-understand .scene-copy { order: 1 !important; } #homepageStory .making-stage .scene-sellers { grid-template-columns: minmax(540px, 1.28fr) minmax(280px, .72fr); } #homepageStory .making-stage .scene-sellers .seller-composition { order: 0 !important; } #homepageStory .making-stage .scene-sellers .scene-copy { order: 1 !important; } #homepageStory .making-stage .scene-watch { grid-template-columns: minmax(430px, 1.28fr) minmax(280px, .72fr); } #homepageStory .making-stage .scene-watch .telegram-object { order: 0 !important; } #homepageStory .making-stage .scene-watch .scene-copy { order: 1 !important; } #homepageStory .making-scroll-track { position: absolute; top: 0; right: 0; bottom: 100vh; bottom: 100svh; left: 0; display: grid; grid-template-rows: repeat(6, 1fr); visibility: visible; opacity: 0; pointer-events: none; } #homepageStory .making-scroll-track > span { scroll-snap-align: start; scroll-snap-stop: always; transform: translateY(8%); } #homepageStory .making-progress { display: none; } /* 01 — the request forms as a note, in human-sized thought groups. */ #homepageStory .request-note { position: relative; min-height: 335px; padding: 38px 44px 36px; overflow: visible; background: linear-gradient(90deg, transparent 34px, rgba(242,92,5,.2) 34px 36px, transparent 36px), repeating-linear-gradient(180deg, transparent 0 45px, rgba(31,78,91,.08) 45px 46px), var(--paper); border: 2px solid var(--ink); border-radius: 3px 11px 6px 4px; box-shadow: 13px 15px 0 rgba(31,78,91,.14); transform: rotate(-.75deg); } #homepageStory .request-note::before { content: ""; position: absolute; top: -11px; left: 13%; width: 108px; border-top: 22px solid rgba(242,92,5,.2); transform: rotate(-2deg); } #homepageStory .request-note::after { content: "PERSONAL NOTE / TO APRICOT"; position: absolute; right: 22px; bottom: 15px; color: rgba(31,78,91,.48); font: 700 7px/1 var(--mono); letter-spacing: .1em; } #homepageStory .request-note > b { display: block; color: var(--teal); font: 700 9px/1 var(--mono); letter-spacing: .09em; } #homepageStory .request-note p { max-width: 38ch; margin: 24px 0 0; color: var(--ink); font: 400 clamp(16px, 1.35vw, 19px)/1.78 var(--mono); } #homepageStory .type-chunk { display: inline; } #homepageStory .request-note .condition { padding: 0 2px 2px; color: var(--ink); background: linear-gradient(176deg, transparent 64%, rgba(242,92,5,.42) 66%, rgba(242,92,5,.22) 78%, transparent 80%); background-size: 0 100%; background-repeat: no-repeat; } #homepageStory .request-note .condition i { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; color: var(--orange); border: 1px solid currentColor; border-radius: 50%; font: 700 7px/1 var(--mono); font-style: normal; vertical-align: .12em; transform: rotate(-7deg); } #homepageStory .request-note .condition-refund i { min-width: 26px; border-radius: 2px; } #homepageStory .request-note .condition-night i { text-decoration: line-through 1px var(--orange); } #homepageStory .request-note .condition-value i { border: 0; font: italic 400 21px/.7 var(--serif); transform: rotate(12deg); } #homepageStory .scene-thought.is-visible .type-chunk { animation: thought-group-in 460ms var(--ease-out) both; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(2) { animation-delay: 180ms; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(3) { animation-delay: 360ms; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(4) { animation-delay: 540ms; } #homepageStory .scene-thought.is-visible .condition { background-size: 100% 100%; transition: background-size 500ms var(--ease-out); } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(2) .condition { transition-delay: 180ms; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(3) .condition { transition-delay: 360ms; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(4) .condition { transition-delay: 540ms; } #homepageStory .scene-thought.is-visible .condition i { animation: condition-stamp 360ms var(--ease-out) both; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(2) .condition i { animation-delay: 180ms; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(3) .condition i { animation-delay: 360ms; } #homepageStory .scene-thought.is-visible .type-chunk:nth-child(4) .condition i { animation-delay: 540ms; } #homepageStory .scene-thought.is-visible .cursor { animation: cursor-arrives 240ms 720ms ease both, blink .85s 960ms steps(2) infinite; } /* 02 — a loose, physical field of possibilities; only judgment is visible. */ #homepageStory .sorting-table { position: relative; min-height: 525px; padding: 0; overflow: hidden; background: radial-gradient(ellipse at center, rgba(255,253,247,.86), rgba(255,253,247,.22) 66%, transparent 67%); border: 0; box-shadow: none; } #homepageStory .sorting-table::before { content: ""; position: absolute; inset: 55px 12px 48px; border: 1px dashed rgba(31,78,91,.22); border-radius: 50%; transform: rotate(-4deg); } #homepageStory .conditions-reference { position: absolute; top: 16px; right: 12px; z-index: 8; width: min(310px, 80%); padding: 11px 14px; background: var(--paper); border: 1px solid rgba(31,78,91,.5); box-shadow: 4px 5px 0 rgba(31,78,91,.09); transform: rotate(1.2deg); } #homepageStory .conditions-reference span { color: var(--orange); font: 700 7px/1 var(--mono); letter-spacing: .09em; } #homepageStory .conditions-reference p { margin: 6px 0 0; color: var(--teal); font: 700 9px/1.35 var(--mono); } #homepageStory .flight-field { position: absolute; inset: 45px 0 42px; display: block; z-index: 2; } #homepageStory .flight-field i { position: absolute; display: grid; grid-template-columns: auto 1fr; gap: 5px 9px; width: 205px; min-height: 61px; padding: 10px 11px; color: var(--teal); background: rgba(255,253,247,.92); border: 1px solid rgba(26,26,26,.48); box-shadow: 3px 4px 0 rgba(31,78,91,.08); font-style: normal; } #homepageStory .flight-field b { font: 700 9px/1 var(--mono); } #homepageStory .flight-field span { color: var(--muted); font: 400 9px/1 var(--mono); white-space: nowrap; } #homepageStory .flight-field em { grid-column: 1 / -1; width: max-content; max-width: 100%; padding: 3px 5px; color: #817b72; border: 1px solid currentColor; font: 700 7px/1 var(--mono); font-style: normal; letter-spacing: .035em; transform: rotate(-1deg); } #homepageStory .flight-field .fails { opacity: .18; filter: blur(.65px); } #homepageStory .flight-field .survives { z-index: 5; width: 230px; opacity: 1; border: 2px solid var(--teal); box-shadow: 5px 6px 0 rgba(242,92,5,.2); } #homepageStory .flight-field .survives em { color: var(--orange); } #homepageStory .flight-field i:nth-child(1) { top: 75px; left: -4%; transform: rotate(-3deg); } #homepageStory .flight-field i:nth-child(2) { top: 18px; left: 47%; transform: rotate(2deg); } #homepageStory .flight-field i:nth-child(3) { top: 365px; left: 58%; transform: rotate(-2deg); } #homepageStory .flight-field i:nth-child(4) { top: 126px; left: 29%; transform: rotate(-.5deg); } #homepageStory .flight-field i:nth-child(5) { top: 104px; left: 76%; transform: rotate(3deg); } #homepageStory .flight-field i:nth-child(6) { top: 347px; left: 1%; transform: rotate(2deg); } #homepageStory .flight-field i:nth-child(7) { top: 252px; left: 72%; transform: rotate(-3deg); } #homepageStory .flight-field i:nth-child(8) { top: 245px; left: -2%; transform: rotate(2deg); } #homepageStory .flight-field i:nth-child(9) { top: 220px; left: 32%; transform: rotate(.5deg); } #homepageStory .flight-field i:nth-child(10) { top: 408px; left: 77%; transform: rotate(2deg); } #homepageStory .flight-field i:nth-child(11) { top: 160px; left: 4%; transform: rotate(-1deg); } #homepageStory .flight-field i:nth-child(12) { top: 314px; left: 35%; transform: rotate(-.4deg); } #homepageStory .scene-understand.is-visible .flight-field .fails { animation: candidate-pass 820ms var(--ease-out) both; } #homepageStory .scene-understand.is-visible .flight-field .survives { animation: candidate-keep 820ms var(--ease-out) both; } #homepageStory .scene-understand.is-visible .flight-field i:nth-child(3n + 2) { animation-delay: 60ms; } #homepageStory .scene-understand.is-visible .flight-field i:nth-child(3n + 3) { animation-delay: 120ms; } #homepageStory .scene-understand.is-visible .flight-field i:nth-child(4n) { animation-delay: 180ms; } #homepageStory .sorting-count { position: absolute; right: 13%; bottom: 10px; left: 13%; z-index: 7; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0; color: #938c83; font: 700 9px/1 var(--mono); } #homepageStory .sorting-count i { border-top: 1px dashed var(--line); } #homepageStory .sorting-count strong { color: var(--teal); font: 700 10px/1 var(--mono); } /* 03 — the three survivors resolve into the recognisable Apricot result. */ #homepageStory .shortlist-table { position: relative; max-height: 590px; padding: 0 14px 12px; overflow: hidden; background: var(--paper); border: 2px solid var(--ink); box-shadow: 12px 13px 0 rgba(31,78,91,.16); } #homepageStory .result-ui-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 -14px; padding: 9px 14px; color: var(--teal); background: #f5f0e5; border-bottom: 1px solid var(--line); } #homepageStory .result-ui-bar b { font: 400 21px/1 var(--serif); } #homepageStory .result-ui-bar span { color: var(--muted); font: 700 7px/1.2 var(--mono); letter-spacing: .06em; text-align: right; } #homepageStory .route-strip { display: block; padding: 15px 17px; background: #f7e8d1; border-bottom: 1px dashed var(--line); } #homepageStory .route-strip > b { display: block; color: var(--teal); font: 400 28px/1 var(--serif); } #homepageStory .market-facts { display: grid; grid-template-columns: .65fr .65fr 1.2fr 1fr; gap: 7px; margin-top: 12px; } #homepageStory .market-facts > span,#homepageStory .market-facts > strong { display: flex; flex-direction: column; gap: 4px; padding: 8px; color: var(--teal); background: rgba(255,255,255,.52); border: 1px solid rgba(31,78,91,.17); font: 400 16px/1 var(--serif); text-align: left; } #homepageStory .market-facts > strong { color: #fff; background: var(--orange); border-color: var(--ink); } #homepageStory .market-facts small { color: var(--muted); font: 700 7px/1 var(--mono); } #homepageStory .market-facts strong small { color: rgba(255,255,255,.78); } #homepageStory .slip-stack { position: relative; display: flex; flex-direction: column; gap: 8px; height: auto; min-height: 378px; padding: 18px 12px 5px; } #homepageStory .slip-stack .flight-slip { position: relative; inset: auto; width: 100%; background: var(--paper); border: 2px solid var(--ink); box-shadow: 5px 6px 0 rgba(31,78,91,.1); } #homepageStory .slip-stack .best-fit { z-index: 3; padding: 15px 17px; border-color: var(--teal); box-shadow: 7px 8px 0 rgba(242,92,5,.18); } #homepageStory .best-fit > small { display: flex; gap: 8px; color: var(--orange); font: 700 8px/1 var(--mono); } #homepageStory .best-fit > small::after { content: "SELECTED"; color: var(--teal); font-size: 7px; } #homepageStory .best-fit h3 { display: flex; justify-content: space-between; margin: 10px 0; color: var(--teal); font: 400 23px/1 var(--serif); } #homepageStory .best-fit h3 b { font: 400 26px/1 var(--serif); } #homepageStory .best-fit p { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 0 0 8px; } #homepageStory .best-fit p strong { color: var(--teal); font: 400 25px/1 var(--serif); } #homepageStory .best-fit p i { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 400 8px/1 var(--mono); font-style: normal; } #homepageStory .best-fit p i::before,#homepageStory .best-fit p i::after { content: ""; flex: 1; border-top: 1px dashed var(--line); } #homepageStory .best-fit > em { color: var(--muted); font: 400 8px/1 var(--mono); font-style: normal; } #homepageStory .slip-stack .why-note { position: relative; inset: auto; width: calc(100% - 44px); margin: -10px 0 1px 28px; padding: 12px 14px; color: var(--teal); background: #ffe7c4; border: 2px solid var(--ink); box-shadow: 4px 5px 0 rgba(242,92,5,.2); text-align: left; transform: rotate(-.5deg); } #homepageStory .slip-stack .why-note::before { content: ""; position: absolute; top: -14px; left: 30px; height: 14px; border-left: 1px solid var(--orange); } #homepageStory .why-note b { display: flex; justify-content: space-between; font: 700 8px/1 var(--mono); letter-spacing: .06em; } #homepageStory .why-note span { display: block; max-height: 145px; margin-top: 9px; overflow: hidden; color: #53615e; font-size: 11px; line-height: 1.4; } #homepageStory .why-tradeoff { padding: 0 1px 2px; color: inherit; background: linear-gradient(177deg, transparent 63%, rgba(242,92,5,.32) 65%, rgba(242,92,5,.17) 83%, transparent 85%); } #homepageStory .slip-stack .value,#homepageStory .slip-stack .other { display: flex; justify-content: space-between; align-items: center; min-height: 57px; padding: 11px 15px; color: var(--teal); } #homepageStory .slip-stack .value { margin-left: 12px; width: calc(100% - 12px); transform: rotate(.35deg); } #homepageStory .slip-stack .other { margin-left: 4px; width: calc(100% - 4px); transform: rotate(-.3deg); } #homepageStory .value > div,#homepageStory .other > div { display: flex; flex-direction: column; gap: 6px; } #homepageStory .value small,#homepageStory .other small { color: var(--orange); font: 700 8px/1 var(--mono); } #homepageStory .value span,#homepageStory .other span { color: var(--muted); font: 700 8px/1 var(--mono); } #homepageStory .value > b,#homepageStory .other > b { font: 400 20px/1 var(--serif); } #homepageStory .shortlist-ghosts { position: absolute; inset: 13px 2px auto; height: 265px; opacity: .28; pointer-events: none; } #homepageStory .shortlist-ghosts i { display: block; height: 38px; margin-bottom: 7px; background: var(--paper); border: 1px solid var(--line); } /* Static copy of the production result component; selectors intentionally retain its real names so the Market brief and cards keep the same hierarchy and geometry. */ #homepageStory .production-results { padding: 9px; color: var(--ink); background: #f2efe5; font-family: var(--sans); } #homepageStory .production-results .results-conversation-summary { display: block; margin-bottom: 12px; padding: 1rem 1.25rem; border: 1px solid rgba(31,78,91,.14); border-radius: 18px; background: rgba(255,255,255,.82); box-shadow: 0 8px 24px rgba(26,26,26,.06); } #homepageStory .production-results .results-conversation-summary b { display: block; color: #1a1a1a; font: 400 1.15rem/1.15 var(--serif); } #homepageStory .production-results .results-conversation-summary span { display: block; margin-top: .3rem; color: #4b5563; font: 600 .73rem/1.45 var(--sans); } #homepageStory .production-results .result-container { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; width: 100%; margin: 0; } #homepageStory .production-results .market-summary-col { width: 100%; max-width: none; padding: 1.05rem; color: #1f4e5b; background: #fff; border: 2px solid #1a1a1a; border-radius: 12px; box-shadow: 6px 6px 0 rgba(31,78,91,.2); font: .67rem/1.48 var(--mono); } #homepageStory .production-results .market-summary-title { margin-bottom: .75rem; padding-bottom: .4rem; color: #1a1a1a; border-bottom: 2px solid #f25c05; font: 400 1.2rem/1 var(--serif); } #homepageStory .production-results .market-summary-brief { display: block; color: #354150; font: 400 .78rem/1.55 var(--sans); white-space: normal; } #homepageStory .production-results .highlight-price { color: #f25c05; font-weight: 700; } #homepageStory .production-results .flights-col { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; align-items: stretch; width: 100%; min-width: 0; max-width: none; } #homepageStory .production-results .story-flight-card { display: flex; flex-direction: column; height: 100%; margin: 0; overflow: hidden; background: #fff; border: 2px solid #1a1a1a; border-radius: 12px; box-shadow: 6px 6px 0 rgba(31,78,91,.2); } #homepageStory .production-results .flight-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .65rem; min-height: 70px; padding: .62rem .85rem .5rem; color: #1f4e5b; background: #f2efe5; border-bottom: 2px solid #1a1a1a; font: .67rem/1 var(--mono); } #homepageStory .production-results .mobile-flight-card-airline { display: flex; align-items: flex-start; width: 100%; min-width: 0; } #homepageStory .production-results .airline-header-stack { display: flex; flex-direction: column; gap: .26rem; width: 100%; min-width: 0; } #homepageStory .production-results .airline-header-line.with-logos { display: flex; align-items: center; flex-wrap: nowrap; gap: .5rem; min-width: 0; } #homepageStory .production-results .airline-chip { display: inline-flex; align-items: center; min-width: 0; gap: .42rem; } #homepageStory .production-results .airline-chip-logo { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; border-radius: 50%; } #homepageStory .production-results .airline-chip-name { overflow: hidden; color: #1f4e5b; font: 700 .78rem/1.05 var(--mono); text-overflow: ellipsis; white-space: nowrap; } #homepageStory .production-results .flight-price-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: .42rem .68rem; color: #fff; background: #1f4e5b; border-radius: 4px; box-shadow: 2px 2px 0 #1a1a1a; font: 700 .86rem/1 var(--mono); transform: rotate(-2deg); } #homepageStory .production-results .flight-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .9rem; padding: .9rem; } #homepageStory .production-results .flight-segments { display: flex; flex-direction: column; gap: .78rem; } #homepageStory .airline-logo { width: 32px; height: 32px; aspect-ratio: 1 / 1; object-fit: contain; } #homepageStory .production-results .flight-route-row { display: grid; grid-template-columns: minmax(66px,.85fr) minmax(128px,1.3fr) minmax(52px,.85fr); gap: .55rem; align-items: center; } #homepageStory .production-results .flight-route-row .text-right { text-align: right; } #homepageStory .production-results .city-name { display: block; color: #1a1a1a; font: 400 1.15rem/1 var(--serif); } #homepageStory .production-results .airport-code { display: block; margin-top: .16rem; color: #888; font: 700 .55rem/1 var(--sans); } #homepageStory .production-results .flight-time-date { display: block; margin-top: .42rem; color: #1f4e5b; font: 700 .57rem/1.36 var(--mono); } #homepageStory .production-results .route-line { display: flex; flex-direction: column; align-items: center; gap: .28rem; text-align: center; } #homepageStory .production-results .route-line i { color: #8a919a; font: 700 .55rem/1 var(--mono); font-style: normal; } #homepageStory .production-results .route-line u { width: 100%; border-top: 1px dashed #c7ccd0; text-decoration: none; } #homepageStory .production-results .route-line em { max-width: 100%; padding: .18rem .28rem; color: #f25c05; background: #fff8f1; border: 1px solid rgba(242,92,5,.3); border-radius: 4px; font: 700 .49rem/1.18 var(--mono); font-style: normal; } #homepageStory .production-results .flight-meta-row { display: flex; justify-content: space-between; padding-top: .65rem; border-top: 1px dashed #ccc; } #homepageStory .production-results .flight-details-col { display: flex; flex-direction: column; gap: .28rem; color: #555; font: .61rem/1.15 var(--sans); } #homepageStory .production-results .detail-item { display: flex; align-items: center; gap: .3rem; } #homepageStory .production-results .scoring-footer { display: block; width: 100%; padding: .65rem .85rem; color: #46515d; background: #f9f9f9; border-top: 2px solid #1a1a1a; text-align: left; font: 600 .62rem/1.35 var(--sans); } #homepageStory .production-results .scoring-footer > span { display: block; } #homepageStory .scene-shortlist.is-visible .results-conversation-summary { animation: result-detail-in 360ms 180ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .market-summary-col { animation: result-detail-in 380ms 260ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .story-flight-card { animation: recommendation-align 420ms 350ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .story-flight-card:nth-child(2) { animation-delay: 420ms; } #homepageStory .scene-shortlist.is-visible .story-flight-card:nth-child(3) { animation-delay: 490ms; } #homepageStory .scene-shortlist.is-visible .story-flight-card:first-child .flight-route-row { animation: result-detail-in 360ms 500ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .story-flight-card:first-child .route-line u { animation: route-line-draw 420ms 560ms var(--ease-out) both; transform-origin: center; } #homepageStory .scene-shortlist.is-visible .story-flight-card:first-child .flight-meta-row { animation: result-detail-in 320ms 590ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .story-flight-card:first-child .scoring-footer { animation: result-detail-in 340ms 610ms var(--ease-out) both; } @media (max-width: 1179px) { #homepageStory .production-results .flights-col { grid-template-columns: 1fr; } #homepageStory .production-results .flight-header { min-height: 0; } } #homepageStory .scene-shortlist.is-visible .shortlist-table { animation: result-frame-in 540ms 100ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .result-ui-bar { animation: result-detail-in 400ms 430ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .route-strip { animation: result-detail-in 440ms 540ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .market-facts > * { animation: result-detail-in 360ms 660ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .market-facts > *:nth-child(2) { animation-delay: 720ms; } #homepageStory .scene-shortlist.is-visible .market-facts > *:nth-child(3) { animation-delay: 780ms; } #homepageStory .scene-shortlist.is-visible .market-facts > *:nth-child(4) { animation-delay: 840ms; } #homepageStory .scene-shortlist.is-visible .best-fit { animation: recommendation-align 520ms 820ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .value { animation: recommendation-align 520ms 930ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .other { animation: recommendation-align 520ms 1040ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .why-note { animation: why-tab-open 500ms 1190ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .why-note span { animation: why-copy-reveal 440ms 1340ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .shortlist-ghosts { animation: fragments-resolve 760ms 330ms var(--ease-out) both; } /* 04 — booking carousel: four seller tags orbit one unchanged flight. */ #homepageStory .seller-composition { position: relative; min-height: 500px; padding: 0 4px 22px; background: transparent; border: 0; box-shadow: none; transform: none; } #homepageStory .seller-wheel { position: relative; min-height: 445px; } #homepageStory .seller-wheel::before { content: ""; position: absolute; inset: 47px 54px; background: radial-gradient(circle at center, rgba(255,253,247,.75), transparent 57%); border: 1px dashed rgba(31,78,91,.35); border-radius: 50%; transform: rotate(-7deg); } #homepageStory .seller-wheel::after { content: ""; position: absolute; top: 25px; left: 50%; color: rgba(31,78,91,.55); font: 700 7px/1 var(--mono); letter-spacing: .09em; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; } #homepageStory .seller-flight { position: absolute; top: 50%; left: 50%; z-index: 5; width: 315px; color: var(--teal); background: transparent; border: 0; box-shadow: none; text-align: center; transform: translate(-50%, -50%) rotate(-1deg); } #homepageStory .seller-route { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; } #homepageStory .seller-route > strong { color: var(--teal); font: 400 38px/.8 var(--serif); } #homepageStory .seller-route i { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 700 7px/1 var(--mono); font-style: normal; } #homepageStory .seller-route i::before,#homepageStory .seller-route i::after { content: ""; flex: 1; border-top: 1px dashed rgba(31,78,91,.55); } #homepageStory .seller-route i b { display: grid; place-items: center; width: 25px; height: 25px; color: var(--paper); background: var(--orange); border-radius: 50%; font: 400 12px/1 var(--sans); transform: rotate(12deg); } #homepageStory .seller-flight p { margin: 10px 0 0; color: var(--orange); font: 700 8px/1.3 var(--mono); } #homepageStory .seller-tag { --pass-accent: var(--orange); --pass-ink: #fff1df; --seller-x: 0px; --seller-y: 0px; --seller-r: 0deg; position: absolute; top: 50%; left: 50%; z-index: 3; width: 202px; min-height: 130px; padding: 0 0 10px; overflow: hidden; background: var(--pass-ink); border: 1px solid var(--ink); box-shadow: 5px 6px 0 rgba(31,78,91,.11); clip-path: polygon(0 0, 100% 0, 100% 41%, 96% 50%, 100% 59%, 100% 100%, 0 100%, 0 59%, 4% 50%, 0 41%); cursor: default; transform: translate(calc(-50% + var(--seller-x)), calc(-50% + var(--seller-y))) rotate(var(--seller-r)); transition: transform 320ms var(--ease-out), box-shadow 260ms ease; } #homepageStory .seller-tag::before { content: ""; position: absolute; top: 35px; right: 48px; bottom: 0; border-left: 1px dashed rgba(31,78,91,.28); } #homepageStory .seller-tag::after { content: "BOARDING / 01"; position: absolute; right: 7px; top: 42px; color: rgba(31,78,91,.42); font: 700 5px/1 var(--mono); writing-mode: vertical-rl; letter-spacing: .04em; } #homepageStory .seller-tag header { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; color: #fff; background: var(--pass-accent); } #homepageStory .seller-tag header b { font: 400 18px/.9 var(--serif); letter-spacing: -.02em; } #homepageStory .seller-tag header i { display: grid; place-items: center; width: 20px; height: 20px; color: var(--pass-accent); background: rgba(255,255,255,.9); border-radius: 50%; font: 700 6px/1 var(--mono); font-style: normal; } #homepageStory .seller-pass-route { display: flex; align-items: center; gap: 7px; padding: 9px 59px 2px 12px; color: var(--teal); } #homepageStory .seller-pass-route span { font: 400 18px/1 var(--serif); } #homepageStory .seller-pass-route em { flex: 1; color: var(--pass-accent); border-bottom: 1px dashed currentColor; font: 700 9px/1 var(--mono); font-style: normal; text-align: center; } #homepageStory .seller-pass-route em small { display: block; margin-top: 2px; font: 700 4px/1 var(--mono); letter-spacing: .03em; } #homepageStory .seller-pass-meta { display: flex; align-items: end; gap: 8px; padding: 3px 59px 0 12px; } #homepageStory .seller-pass-meta small { color: var(--muted); font: 700 5px/1.1 var(--mono); } #homepageStory .seller-pass-meta strong { margin-left: auto; color: var(--teal); font: 400 23px/1 var(--serif); } #homepageStory .seller-tag > p { margin: 6px 56px 0 12px; color: var(--muted); font: 700 6px/1.2 var(--mono); } #homepageStory .seller-tag > u { position: absolute; right: 12px; bottom: 12px; width: 27px; height: 22px; background: repeating-linear-gradient(90deg, var(--teal) 0 1px, transparent 1px 3px, var(--teal) 3px 5px, transparent 5px 7px); opacity: .68; text-decoration: none; } #homepageStory .seller-direct { --pass-accent: var(--orange); --pass-ink: #fff0dc; --seller-x: -202px; --seller-y: -112px; --seller-r: -5deg; } #homepageStory .seller-b { --pass-accent: var(--teal); --pass-ink: #e6efed; --seller-x: 202px; --seller-y: -112px; --seller-r: 4deg; } #homepageStory .seller-c { --pass-accent: #b77a25; --pass-ink: #f8edd2; --seller-x: -202px; --seller-y: 112px; --seller-r: 4deg; } #homepageStory .seller-d { --pass-accent: #87586b; --pass-ink: #f2e5eb; --seller-x: 202px; --seller-y: 112px; --seller-r: -5deg; } #homepageStory .seller-tag:hover { z-index: 7; box-shadow: 8px 10px 0 rgba(242,92,5,.22); transform: translate(calc(-50% + var(--seller-x)), calc(-50% + var(--seller-y) - 8px)) rotate(var(--seller-r)) scale(1.035); } #homepageStory .seller-composition > p { display: none; } #homepageStory .scene-sellers.is-visible .seller-wheel::before { animation: seller-ring-in 500ms 120ms var(--ease-out) backwards; } #homepageStory .scene-sellers.is-visible .seller-flight { animation: selected-flight-in 480ms 200ms var(--ease-out) backwards; } #homepageStory .scene-sellers.is-visible .seller-tag { animation: seller-tag-unfold 480ms 350ms var(--ease-out) backwards; } #homepageStory .scene-sellers.is-visible .seller-b { animation-delay: 420ms; } #homepageStory .scene-sellers.is-visible .seller-c { animation-delay: 490ms; } #homepageStory .scene-sellers.is-visible .seller-d { animation-delay: 560ms; } /* 05 — the real production pattern continues below the recommendations. */ #homepageStory .followup-production-composer { position: relative; width: min(100%, 650px); } #homepageStory .followup-production-composer .results-conversation-card { padding: 1rem; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,247,.92)); border: 1px solid rgba(31,78,91,.14); border-radius: 18px; box-shadow: 0 6px 20px rgba(26,26,26,.05); } #homepageStory .followup-production-composer .results-conversation-input-wrap { position: relative; } #homepageStory .followup-production-composer .results-conversation-placeholder-overlay { position: absolute; inset: 0; z-index: 2; padding: .95rem 1rem; overflow: hidden; color: rgba(107,114,128,.8); font: 400 1rem/1.6 var(--mono); pointer-events: none; white-space: pre-wrap; } #homepageStory .followup-production-composer .results-conversation-placeholder-overlay:empty::before { content: "Ask anything about these flights…"; } #homepageStory .followup-production-composer .results-conversation-placeholder-overlay::after { content: ""; display: inline-block; width: 2px; height: 1.25em; margin-left: 3px; background: var(--orange); vertical-align: -.24em; animation: blink .85s steps(2) infinite; } #homepageStory .followup-production-composer .results-conversation-input { width: 100%; min-height: 92px; padding: .95rem 1rem; background: rgba(255,255,255,.9); border: 1px solid rgba(31,78,91,.18); border-radius: 14px; } #homepageStory .followup-production-composer .results-quick-filters { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; margin: .65rem 0 0; padding: 0; } #homepageStory .followup-production-composer .results-quick-filter-button { min-height: 2.25rem; padding: .35rem .85rem; color: #1f4e5b; background: #fffdf8; border: 1px dotted rgba(31,78,91,.75); border-radius: 20px; box-shadow: 2px 2px 0 rgba(31,78,91,.12); font: 700 .78rem/1 var(--sans); letter-spacing: .01em; } #homepageStory .followup-production-composer .results-conversation-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .85rem; } #homepageStory .followup-production-composer .results-conversation-primary,#homepageStory .followup-production-composer .results-conversation-secondary { min-height: 2.5rem; padding: .55rem .95rem; border-radius: 999px; font: 600 .9rem/1 var(--sans); } #homepageStory .followup-production-composer .results-conversation-primary { color: #fff; background: #1f4e5b; border: 1px solid #1f4e5b; box-shadow: 0 3px 10px rgba(31,78,91,.16); } #homepageStory .followup-production-composer .results-conversation-secondary { color: #1a1a1a; background: rgba(242,239,229,.95); border: 1px solid rgba(26,26,26,.12); } #homepageStory .scene-followup.is-visible .followup-production-composer { animation: result-frame-in 540ms 120ms var(--ease-out) backwards; } #homepageStory .scene-followup.is-visible .results-quick-filter-button { animation: result-detail-in 360ms 270ms var(--ease-out) backwards; } #homepageStory .scene-followup.is-visible .results-quick-filter-button:nth-child(2) { animation-delay: 340ms; } #homepageStory .scene-followup.is-visible .results-quick-filter-button:nth-child(3) { animation-delay: 410ms; } #homepageStory .scene-followup.is-visible .results-conversation-input-wrap { animation: result-detail-in 420ms 390ms var(--ease-out) backwards; } #homepageStory .scene-followup.is-visible .results-conversation-actions { animation: result-detail-in 400ms 510ms var(--ease-out) backwards; } /* 06 — a route watch is a quiet continuation, not a separate product chapter. */ #homepageStory .scene-watch .telegram-object { transform: scale(.9); transform-origin: center; } #homepageStory .scene-watch.is-visible .telegram-object { animation: route-watch-in 580ms 130ms var(--ease-out) backwards; } #homepageStory .scene-watch.is-visible .telegram-object aside { animation: route-watch-note-in 430ms 470ms var(--ease-out) backwards; } @keyframes thought-group-in { from { opacity: .08; filter: blur(2px); } to { opacity: 1; filter: none; } } @keyframes condition-stamp { from { opacity: 0; transform: translateY(-6px) rotate(-15deg) scale(.7); } to { opacity: 1; transform: translateY(0) rotate(-7deg) scale(1); } } @keyframes cursor-arrives { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } } @keyframes candidate-pass { 0% { opacity: 0; filter: blur(0); translate: 60px 0; } 40% { opacity: .6; } 100% { opacity: .14; filter: blur(.75px); translate: -24px 3px; } } @keyframes candidate-keep { 0% { opacity: 0; translate: 60px 0; scale: .98; } 48% { opacity: .7; } 100% { opacity: 1; translate: 0 0; scale: 1.015; } } @keyframes result-frame-in { from { opacity: .3; clip-path: inset(48% 48% 48% 48%); transform: scale(.98); } to { opacity: 1; clip-path: inset(0); transform: none; } } @keyframes result-detail-in { from { opacity: .18; } to { opacity: 1; } } @keyframes market-tile-in { from { opacity: 0; transform: translateX(-7px) rotate(-.4deg); } to { opacity: 1; transform: none; } } @keyframes route-line-draw { from { opacity: 0; transform: scaleX(.14); } to { opacity: 1; transform: scaleX(1); } } @keyframes recommendation-align { from { opacity: 0; transform: translateX(28px) rotate(1.5deg); } to { opacity: 1; transform: none; } } @keyframes why-tab-open { from { opacity: 0; transform: translateY(-8px) rotate(-2deg); } to { opacity: 1; transform: rotate(-.5deg); } } @keyframes why-copy-reveal { from { max-height: 0; margin-top: 0; opacity: 0; } to { max-height: 145px; margin-top: 9px; opacity: 1; } } @keyframes fragments-resolve { from { opacity: .35; transform: scale(1.04) rotate(-2deg); } 65% { opacity: .18; transform: none; } to { opacity: 0; transform: scale(.99); } } @keyframes seller-ring-in { from { opacity: 0; transform: rotate(-18deg) scale(.75); } to { opacity: 1; transform: rotate(-7deg) scale(1); } } @keyframes selected-flight-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.84) rotate(-5deg); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-1deg); } } @keyframes seller-tag-unfold { from { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.6); } to { opacity: 1; transform: translate(calc(-50% + var(--seller-x)), calc(-50% + var(--seller-y))) rotate(var(--seller-r)) scale(1); } } @keyframes route-watch-in { from { opacity: 0; transform: translateY(22px) rotate(-3deg) scale(.84); } to { opacity: 1; transform: scale(.9); } } @keyframes route-watch-note-in { from { opacity: 0; transform: translate(-10px, 7px) rotate(1deg); } to { opacity: 1; transform: rotate(4deg); } } @keyframes cue-arrow { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } } @media (max-width: 1100px) and (min-width: 901px) { #homepageStory .seller-direct { --seller-x: -170px; } #homepageStory .seller-b { --seller-x: 170px; } #homepageStory .seller-c { --seller-x: -170px; } #homepageStory .seller-d { --seller-x: 170px; } } @media (max-width: 900px) { #homepageStory .making-stage .scene { grid-template-columns: minmax(220px, .68fr) minmax(430px, 1.32fr); gap: 36px; } #homepageStory .making-stage .scene-understand { grid-template-columns: minmax(430px, 1.32fr) minmax(220px, .68fr); } #homepageStory .making-stage .scene-sellers { grid-template-columns: minmax(430px, 1.32fr) minmax(220px, .68fr); } #homepageStory .making-stage .scene-watch { grid-template-columns: minmax(430px, 1.32fr) minmax(220px, .68fr); } #homepageStory .making-stage .scene-copy p { font-size: clamp(22px, 2.8vw, 26px); } #homepageStory .flight-field i { width: 176px; } #homepageStory .flight-field .survives { width: 200px; } #homepageStory .seller-wheel::before { inset-inline: 34px; } #homepageStory .seller-flight { width: 225px; } #homepageStory .seller-route > strong { font-size: 31px; } #homepageStory .seller-tag { width: 158px; } #homepageStory .seller-pass-route { padding-right: 47px; padding-left: 10px; } #homepageStory .seller-pass-meta { padding-right: 47px; padding-left: 10px; } #homepageStory .seller-tag > p { margin-left: 10px; margin-right: 45px; } #homepageStory .seller-tag::before { right: 39px; } #homepageStory .seller-tag > u { right: 9px; width: 23px; } #homepageStory .seller-direct { --seller-x: -135px; --seller-y: -108px; } #homepageStory .seller-b { --seller-x: 135px; --seller-y: -108px; } #homepageStory .seller-c { --seller-x: -135px; --seller-y: 108px; } #homepageStory .seller-d { --seller-x: 135px; --seller-y: 108px; } } @media (max-width: 760px) { #homepageStory .making-scrolly { height: 690vh; height: 690svh; } #homepageStory .making-stage .scene { grid-template-columns: 1fr; grid-template-rows: 160px minmax(0, 470px); gap: 20px; align-content: center; padding: 8px 0; } #homepageStory .making-stage .scene-understand,#homepageStory .making-stage .scene-watch { grid-template-rows: 190px minmax(0, 430px); } #homepageStory .making-stage .scene-understand { grid-template-columns: 1fr; } #homepageStory .making-stage .scene-understand .scene-copy { order: 0 !important; } #homepageStory .making-stage .scene-understand .sorting-table { order: 1 !important; } #homepageStory .making-stage .scene-sellers { grid-template-columns: 1fr; } #homepageStory .making-stage .scene-sellers .scene-copy { order: 0 !important; } #homepageStory .making-stage .scene-sellers .seller-composition { order: 1 !important; } #homepageStory .making-stage .scene-watch { grid-template-columns: 1fr; } #homepageStory .making-stage .scene-watch .scene-copy { order: 0 !important; } #homepageStory .making-stage .scene-watch .telegram-object { order: 1 !important; } #homepageStory .making-stage .scene-copy p { max-width: 40ch; margin-bottom: 0; } #homepageStory .request-note,#homepageStory .sorting-table,#homepageStory .shortlist-table,#homepageStory .seller-composition,#homepageStory .followup-production-composer { width: min(100%, 610px); margin-inline: auto; } } /* Closing invitation: the same production request field returns at a calmer scale. */ #homepageStory .final-layout { grid-template-columns: minmax(0, .78fr) minmax(540px, 1.22fr); gap: clamp(38px, 5vw, 64px); } #homepageStory .final-layout h2 { max-width: 16ch; font-size: clamp(35px, 3.65vw, 53px); text-transform: none; } #homepageStory .final-ticket { width: 100%; margin: 0; padding: 24px 22px 9px; border-radius: 15px; box-shadow: 9px 10px 0 rgba(242,92,5,.26); } #homepageStory .final-ticket textarea { min-height: 92px; padding: 13px 0 10px; font-size: 15px; } #homepageStory .final-ticket .production-ticket-footer { margin-top: 12px; padding-top: 12px; } #homepageStory .final-ticket .confirm-button { min-height: 40px; padding: 9px 13px; font-size: 10px; } #homepageStory .final-ticket .ticket-code { margin-top: 8px; font-size: 6px; } #homepageStory .beta-availability { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 17px; margin-top: clamp(40px, 5vw, 62px); padding: 13px 16px; color: rgba(255,255,255,.7); border-block: 1px solid rgba(255,255,255,.2); font: 700 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; } #homepageStory .beta-availability > b { color: #f8b183; } #homepageStory .beta-platforms { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; } #homepageStory .beta-platforms > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } #homepageStory .beta-platforms > span:not(:last-child)::after { content: ""; width: 3px; height: 3px; margin-left: 5px; background: var(--orange); border-radius: 50%; } #homepageStory .beta-telegram svg { width: 13px; height: 13px; fill: currentColor; } @media (max-width: 900px) { #homepageStory .final-layout { grid-template-columns: 1fr; } #homepageStory .final-ticket { width: min(100%, 680px); margin-inline: 0 auto; } } @media (max-width: 760px) { #homepageStory .final-layout { grid-template-columns: 1fr; } #homepageStory .final-ticket { width: min(100%, 560px); margin-inline: 0 auto; } } @media (max-width: 620px) { #homepageStory .making-section { padding-top: 92px; } #homepageStory .making-scrolly { height: 690vh; height: 690svh; margin-top: 11px; } #homepageStory .beta-availability { gap: 9px 12px; margin-top: 35px; padding: 12px; font-size: 7px; letter-spacing: .065em; } #homepageStory .beta-platforms { gap: 7px; } #homepageStory .beta-platforms > span:not(:last-child)::after { margin-left: 2px; } #homepageStory .making-stage .scene { grid-template-rows: 165px minmax(0, 410px); gap: 15px; } #homepageStory .making-stage .scene-understand,#homepageStory .making-stage .scene-watch { grid-template-rows: 205px minmax(0, 370px); } #homepageStory .making-stage .scene-copy::before { top: -15px; } #homepageStory .making-stage .scene-copy span { margin-bottom: 11px; } #homepageStory .making-stage .scene-copy p { max-width: 30ch; font-size: 20px; line-height: 1.42; } #homepageStory .request-note { min-height: 300px; padding: 29px 24px 31px; } #homepageStory .request-note p { max-width: 32ch; margin-top: 18px; font-size: 13px; line-height: 1.76; } #homepageStory .request-note .condition i { min-width: 15px; height: 15px; font-size: 6px; } #homepageStory .request-note .condition-refund i { min-width: 21px; } #homepageStory .sorting-table { min-height: 405px; } #homepageStory .sorting-table::before { inset: 47px 2px 42px; } #homepageStory .conditions-reference { top: 3px; right: 5px; width: 82%; padding: 8px 10px; } #homepageStory .conditions-reference p { font-size: 7px; } #homepageStory .flight-field { inset: 37px 0 37px; } #homepageStory .flight-field i { width: 143px; min-height: 50px; padding: 7px; } #homepageStory .flight-field .survives { width: 164px; } #homepageStory .flight-field b,#homepageStory .flight-field span { font-size: 7px; } #homepageStory .flight-field em { max-width: 100%; overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; } #homepageStory .flight-field i:nth-child(1) { top: 64px; left: -10%; } #homepageStory .flight-field i:nth-child(2) { top: 27px; left: 55%; } #homepageStory .flight-field i:nth-child(3) { top: 315px; left: 58%; } #homepageStory .flight-field i:nth-child(4) { top: 111px; left: 27%; } #homepageStory .flight-field i:nth-child(5) { top: 100px; left: 75%; } #homepageStory .flight-field i:nth-child(6) { top: 306px; left: -5%; } #homepageStory .flight-field i:nth-child(7) { top: 215px; left: 72%; } #homepageStory .flight-field i:nth-child(8) { top: 210px; left: -7%; } #homepageStory .flight-field i:nth-child(9) { top: 186px; left: 28%; } #homepageStory .flight-field i:nth-child(10) { top: 344px; left: 75%; } #homepageStory .flight-field i:nth-child(11) { top: 146px; left: -3%; } #homepageStory .flight-field i:nth-child(12) { top: 260px; left: 30%; } #homepageStory .sorting-count { right: 5%; bottom: 4px; left: 5%; font-size: 7px; } #homepageStory .shortlist-table { max-height: 430px; padding-inline: 8px; } #homepageStory .production-results { padding: 7px; } #homepageStory .production-results .results-conversation-summary { margin-bottom: 7px; padding: 8px 9px; } #homepageStory .production-results .results-conversation-summary b { font-size: 14px; } #homepageStory .production-results .results-conversation-summary span { margin-top: 3px; font-size: 6px; } #homepageStory .production-results .result-container { flex-direction: column; gap: 7px; } #homepageStory .production-results .market-summary-col { max-width: none; padding: 7px; } #homepageStory .production-results .market-summary-title { margin-bottom: 5px; padding-bottom: 4px; font-size: 13px; } #homepageStory .production-results .market-summary-brief { font-size: 6px; line-height: 1.4; } #homepageStory .production-results .flights-col { max-width: none; } #homepageStory .production-results .story-flight-card { margin-bottom: 6px; } #homepageStory .production-results .flight-header { min-height: 28px; padding: 5px 7px; } #homepageStory .production-results .airline-logo { width: 13px; height: 13px; } #homepageStory .production-results .airline-chip-name { font-size: 6px; } #homepageStory .production-results .flight-price-tag { min-width: 0; padding: 5px 6px; font-size: 8px; } #homepageStory .production-results .flight-body { gap: 6px; padding: 7px 8px 6px; } #homepageStory .production-results .flight-route-row { grid-template-columns: minmax(52px,.8fr) minmax(104px,1.4fr) minmax(42px,.8fr); gap: 4px; } #homepageStory .production-results .city-name { font-size: 13px; } #homepageStory .production-results .airport-code { font-size: 5px; } #homepageStory .production-results .flight-time-date { margin-top: 4px; font-size: 5px; } #homepageStory .production-results .route-line { gap: 3px; } #homepageStory .production-results .route-line i { font-size: 5px; } #homepageStory .production-results .route-line em { font-size: 4px; } #homepageStory .production-results .flight-meta-row { padding-top: 5px; } #homepageStory .production-results .flight-details-col { gap: 3px; font-size: 5px; } #homepageStory .production-results .scoring-footer { padding: 6px 8px; font-size: 6px; } #homepageStory .production-results .scoring-footer b { font-size: 6px; } #homepageStory .production-results .scoring-footer > span { margin-top: 4px; } #homepageStory .result-ui-bar { margin-inline: -8px; padding: 7px 8px; } #homepageStory .result-ui-bar b { font-size: 18px; } #homepageStory .result-ui-bar span { max-width: 21ch; font-size: 6px; } #homepageStory .route-strip { padding: 10px; } #homepageStory .route-strip > b { font-size: 22px; } #homepageStory .market-facts { grid-template-columns: 1fr 1fr; margin-top: 8px; } #homepageStory .market-facts > span,#homepageStory .market-facts > strong { padding: 6px; font-size: 14px; } #homepageStory .slip-stack { min-height: 270px; padding: 10px 0 2px; gap: 5px; } #homepageStory .slip-stack .best-fit { padding: 10px; } #homepageStory .best-fit h3 { margin: 7px 0; font-size: 18px; } #homepageStory .best-fit h3 b,#homepageStory .best-fit p strong { font-size: 20px; } #homepageStory .best-fit > em { font-size: 7px; } #homepageStory .slip-stack .why-note { width: calc(100% - 14px); margin: -7px 0 0 14px; padding: 8px 10px; } #homepageStory .why-note span { font-size: 9px; } #homepageStory .slip-stack .value,#homepageStory .slip-stack .other { min-height: 43px; padding: 7px 10px; } #homepageStory .value span,#homepageStory .other span { font-size: 6px; } #homepageStory .seller-composition { min-height: 405px; padding: 0 0 10px; } #homepageStory .seller-wheel { min-height: 380px; } #homepageStory .seller-wheel::before { inset: 34px 18px; } #homepageStory .seller-wheel::after { top: 14px; font-size: 6px; } #homepageStory .seller-flight { width: 194px; } #homepageStory .seller-route { gap: 7px; } #homepageStory .seller-route > strong { font-size: 26px; } #homepageStory .seller-route i { gap: 4px; font-size: 5px; } #homepageStory .seller-route i b { width: 19px; height: 19px; font-size: 9px; } #homepageStory .seller-flight p { margin-top: 8px; font-size: 6px; } #homepageStory .seller-tag { width: 136px; min-height: 105px; } #homepageStory .seller-tag header { padding: 6px 8px; } #homepageStory .seller-tag header b { font-size: 15px; } #homepageStory .seller-tag header i { width: 16px; height: 16px; font-size: 5px; } #homepageStory .seller-tag::before { right: 32px; left: auto; top: 29px; } #homepageStory .seller-tag::after { display: none; } #homepageStory .seller-pass-route { gap: 4px; padding: 6px 39px 1px 8px; } #homepageStory .seller-pass-route span { font-size: 14px; } #homepageStory .seller-pass-route em { font-size: 6px; } #homepageStory .seller-pass-meta { gap: 4px; padding: 2px 39px 0 8px; } #homepageStory .seller-pass-meta small { font-size: 4px; } #homepageStory .seller-pass-meta strong { font-size: 17px; } #homepageStory .seller-tag > p { margin: 4px 37px 0 8px; font-size: 5px; } #homepageStory .seller-tag > u { right: 7px; bottom: 9px; width: 19px; height: 18px; } #homepageStory .seller-direct { --seller-x: -91px; --seller-y: -105px; } #homepageStory .seller-b { --seller-x: 91px; --seller-y: -105px; } #homepageStory .seller-c { --seller-x: -91px; --seller-y: 105px; } #homepageStory .seller-d { --seller-x: 91px; --seller-y: 105px; } #homepageStory .seller-composition > p { margin-top: -2px; font-size: 7px; } #homepageStory .followup-production-composer .results-conversation-card { padding: .75rem; } #homepageStory .followup-production-composer .results-conversation-placeholder-overlay { padding: .75rem; font-size: .78rem; } #homepageStory .followup-production-composer .results-conversation-input { min-height: 78px; padding: .75rem; } #homepageStory .followup-production-composer .results-quick-filters { gap: .35rem; margin-top: .5rem; } #homepageStory .followup-production-composer .results-quick-filter-button { min-height: 1.95rem; padding: .3rem .55rem; font-size: .62rem; } #homepageStory .followup-production-composer .results-conversation-actions { margin-top: .65rem; } #homepageStory .followup-production-composer .results-conversation-primary,#homepageStory .followup-production-composer .results-conversation-secondary { min-height: 2.1rem; padding: .45rem .72rem; font-size: .75rem; } #homepageStory .scene-watch .telegram-object { transform: scale(.72); } } @media (prefers-reduced-motion: reduce) { #homepageStory .how-it-works-cue i { animation: none !important; } #homepageStory .making-stage .scene { transition-duration: .01ms !important; filter: none !important; } #homepageStory .scene-thought.is-visible *,#homepageStory .scene-understand.is-visible *,#homepageStory .scene-shortlist.is-visible *,#homepageStory .scene-sellers.is-visible * { animation: none !important; } #homepageStory .scene-followup.is-visible *,#homepageStory .scene-watch.is-visible * { animation: none !important; } #homepageStory .request-note .condition { background-size: 100% 100%; } #homepageStory .flight-field .fails { opacity: .14; } #homepageStory .flight-field .survives { opacity: 1; } } /* On reverse scroll, state layers travel back smoothly instead of replaying forward-only entrance keyframes. */ #homepageStory[data-scroll-direction="up"] .making-stage .scene.is-active * { animation: none !important; } /* Keep the cloud desktop result at its native 1280px canvas and fit that complete canvas into the story frame. Nothing inside the cards is responsively squeezed. */ #homepageStory .shortlist-table { height: min(590px, 72vh); max-height: none; padding: 0; } #homepageStory .production-scale-frame { position: absolute; inset: 5px; overflow: hidden; } #homepageStory .production-results { --production-scale: .5; position: absolute; top: 50%; left: 50%; width: 1280px; padding: 0; transform: translate(-50%, -50%) scale(var(--production-scale)); transform-origin: center; will-change: transform; } #homepageStory .production-results .results-conversation-summary { margin-bottom: 16px; padding: 1rem 1.25rem; } #homepageStory .production-results .results-conversation-summary b { margin-bottom: .45rem; font-size: 1.45rem; line-height: 1.15; } #homepageStory .production-results .results-conversation-summary span { margin-top: 0; font-size: .95rem; line-height: 1.6; } #homepageStory .production-results .result-container { flex-direction: column; gap: 1rem; } #homepageStory .production-results .market-summary-col { width: 100%; max-width: none; padding: 1.5rem; font: .85rem/1.8 var(--mono); } #homepageStory .production-results .market-summary-title { margin-bottom: 1rem; padding-bottom: .5rem; font-size: 1.5rem; } #homepageStory .production-results .market-summary-brief { font-size: .98rem; line-height: 1.55; } #homepageStory .production-results .flights-col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .95rem; } #homepageStory .production-results .story-flight-card { margin: 0; } #homepageStory .production-results .flight-header { min-height: 70px; padding: .62rem 1.5rem .5rem; } #homepageStory .production-results .airline-chip-logo { width: 20px; height: 20px; } #homepageStory .production-results .airline-chip-name { max-width: none; font-size: .98rem; line-height: 1.05; } #homepageStory .production-results .flight-price-tag { min-width: 80px; padding: .5rem 1rem; font-size: 1.2rem; } #homepageStory .production-results .flight-body { gap: 1.5rem; padding: 1.5rem; } #homepageStory .production-results .flight-segments { gap: 1.25rem; } #homepageStory .production-results .flight-route-row { grid-template-columns: minmax(0,.92fr) minmax(0,1.16fr) minmax(0,.92fr); gap: .8rem; } #homepageStory .production-results .city-name { font-size: clamp(1.62rem, 1.78vw, 1.95rem); line-height: 1.02; } #homepageStory .production-results .airport-code { margin-top: .2rem; font-size: .9rem; } #homepageStory .production-results .flight-time-date { margin-top: .5rem; font-size: .8rem; } #homepageStory .production-results .route-line { gap: .42rem; } #homepageStory .production-results .route-line i { font-size: .62rem; } #homepageStory .production-results .route-line em { padding: .2rem .5rem; font-size: .58rem; } #homepageStory .production-results .flight-meta-row { padding-top: 1rem; } #homepageStory .production-results .flight-details-col { gap: .5rem; font-size: .85rem; } #homepageStory .production-results .detail-item { gap: .5rem; } #homepageStory .production-results .scoring-footer { padding: .75rem 1.5rem; font-size: .8rem; } #homepageStory .mobile-production-frame { display: none; } @media (max-width: 760px) { #homepageStory .shortlist-table { height: 410px; } #homepageStory .production-scale-frame { display: none; } #homepageStory .mobile-production-frame { position: absolute; inset: 4px; display: block; overflow: hidden; color: #1a1a1a; background: #f2efe5; border-radius: 8px; font-family: var(--sans); } #homepageStory .mobile-production-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 43px; padding: 9px 11px; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(31,78,91,.14); } #homepageStory .mobile-production-topline b { color: #1a1a1a; font: 400 15px/1.1 var(--serif); } #homepageStory .mobile-production-topline span { color: #687079; font: 700 7px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; } #homepageStory .mobile-production-market { margin: 7px 8px 0; padding: 7px 9px 8px; background: #fff; border: 1px solid #1a1a1a; border-radius: 7px; box-shadow: 3px 3px 0 rgba(31,78,91,.14); } #homepageStory .mobile-production-market strong { display: block; margin-bottom: 3px; color: #1a1a1a; font: 400 12px/1 var(--serif); } #homepageStory .mobile-production-market p { margin: 0; color: #59616b; font: 600 7px/1.35 var(--sans); } #homepageStory .mobile-production-market p b { color: var(--orange); } #homepageStory .mobile-production-cards { display: flex; flex-direction: column; gap: 8px; padding: 9px 8px 42px; } #homepageStory .mobile-production-card { flex: 0 0 auto; overflow: hidden; background: #fff; border: 1.5px solid #1a1a1a; border-radius: 9px; box-shadow: 3px 3px 0 rgba(31,78,91,.16); } #homepageStory .mobile-production-card > header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 34px; padding: 6px 8px; color: #1f4e5b; background: #f2efe5; border-bottom: 1.5px solid #1a1a1a; } #homepageStory .mobile-production-card > header span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } #homepageStory .mobile-production-card > header img { width: 15px; height: 15px; object-fit: contain; border-radius: 50%; } #homepageStory .mobile-production-card > header span b { overflow: hidden; font: 700 8px/1.05 var(--mono); text-overflow: ellipsis; white-space: nowrap; } #homepageStory .mobile-production-card > header > strong { padding: 5px 7px; color: #fff; background: #1f4e5b; border-radius: 4px; box-shadow: 1px 1px 0 #1a1a1a; font: 700 9px/1 var(--mono); transform: rotate(-1deg); } #homepageStory .mobile-production-card-body { display: grid; gap: 5px; padding: 7px 8px; } #homepageStory .mobile-production-leg { display: grid; gap: 3px; padding: 6px 7px 5px; background: #fff; border: 1px solid rgba(31,78,91,.13); border-radius: 7px; } #homepageStory .mobile-production-leg > div { display: flex; justify-content: space-between; gap: 8px; color: #2f3745; font: 700 8px/1 var(--mono); } #homepageStory .mobile-production-leg > div b { display: inline-flex; gap: 3px; } #homepageStory .mobile-production-leg > div small { color: #7a8088; font: 400 5px/1 var(--mono); } #homepageStory .mobile-production-leg p { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; color: #4b5563; font: 700 6px/1 var(--mono); white-space: nowrap; } #homepageStory .mobile-production-leg p i { padding: 1px 4px; color: #a4511f; background: #fff4e8; border: 1px dashed rgba(242,92,5,.55); border-radius: 3px; font-style: normal; } #homepageStory .mobile-production-leg > small { color: #6b7280; font: 700 5px/1 var(--mono); letter-spacing: .08em; text-align: center; } #homepageStory .mobile-production-bags { padding-top: 4px; color: #5d6470; border-top: 1px dashed #d2d0ca; font: 600 6px/1.2 var(--sans); } #homepageStory .mobile-production-card > footer { padding: 7px 9px 8px; color: #46515d; background: #fafafa; border-top: 1.5px solid #1a1a1a; font: 600 7px/1.3 var(--sans); } #homepageStory .mobile-production-card > footer mark { color: inherit; background: linear-gradient(transparent 63%,rgba(242,92,5,.28) 63%); } #homepageStory .mobile-production-count { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 7px 9px; background: linear-gradient(180deg,rgba(242,239,229,.15),#f2efe5 35%); } #homepageStory .mobile-production-count i { width: 5px; height: 5px; background: var(--orange); border-radius: 50%; } #homepageStory .mobile-production-count i:nth-child(n+2) { background: rgba(31,78,91,.38); } #homepageStory .mobile-production-count span { margin-left: 3px; color: #687079; font: 700 6px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; } #homepageStory .scene-shortlist.is-visible .mobile-production-market { animation: result-detail-in 360ms 210ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .mobile-production-card { animation: recommendation-align 400ms 330ms var(--ease-out) both; } #homepageStory .scene-shortlist.is-visible .mobile-production-card:nth-child(2) { animation-delay: 410ms; } #homepageStory .scene-shortlist.is-visible .mobile-production-card:nth-child(3) { animation-delay: 490ms; } } /* Production integration --------------------------------------------------- */ html.homepage-story-mode { scroll-behavior: smooth; } html.homepage-story-paused { scroll-behavior: auto; } #homepageStory { display: block; align-self: stretch; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); overflow: clip; } #homepageStory[hidden] { display: none !important; } #homepageStory .how-it-works-cue { margin-top: 40px; } /* On larger screens, let the invitation sit at the end of the landing view. This keeps the first story headline just beyond the initial fold, while preserving the same calm cue across short and tall desktop viewports. */ @media (min-width: 761px) { #homepageStory .how-it-works-cue { margin-top: max(150px, calc(100svh - 620px)); } } #homepageStory .final-request-wrap { position: relative; } #homepageStory .final-placeholder-overlay { position: absolute; inset: 0; z-index: 1; padding: 18px 0; overflow: hidden; color: #8f989b; font: 400 16px/1.55 var(--mono); pointer-events: none; } #homepageStory .final-placeholder-overlay.is-hidden { opacity: 0; } #homepageStory .final-placeholder-overlay::after { content: ""; display: inline-block; width: 7px; height: 1.1em; margin-left: 4px; background: var(--orange); vertical-align: -.18em; animation: blink .85s steps(2) infinite; } #homepageStory .final-ticket textarea { position: relative; z-index: 2; width: 100%; background: transparent; } #homepageStory .final-autocomplete { top: auto; bottom: calc(100% + 6px); z-index: 20; text-align: left; } html.homepage-story-mode, html.homepage-story-mode body { overflow-x: clip; } #homepageStory .final-calendar { left: 0; bottom: 86px; z-index: 24; color: var(--ink); text-align: left; } #homepageStory .final-calendar .cal-type-opt { border: 0; } #homepageStory .final-search-status { min-height: 1.2em; margin: 8px 0 0; color: rgba(255,255,255,.76); font: 700 9px/1.2 var(--mono); letter-spacing: .04em; } #homepageStory .phone { display: block; place-items: initial; padding: 8px; } #homepageStory .phone .telegram-chat { min-height: 395px; } #homepageStory .telegram-alert { margin-top: auto !important; } #homepageStory .airline-logo-fallback { display: inline-grid; place-items: center; width: 20px; height: 20px; color: #fff; background: var(--teal); border-radius: 50%; font: 700 7px/1 var(--mono); } @media (prefers-reduced-motion: reduce) { html.homepage-story-mode { scroll-behavior: auto; } } @media (max-width: 620px) { #homepageStory { margin-left: calc(50% - 50vw); } #homepageStory .how-it-works-cue { margin-top: 24px; } #homepageStory .final-placeholder-overlay { padding: 15px 0; font-size: 14px; } #homepageStory .final-calendar { right: 0; width: auto; min-width: 280px; } } /* Phone-size story polish ------------------------------------------------- Each scene gets its own vertical rhythm. The previous shared 165/410px grid left compact visuals floating inside an oversized second row. */ @media (max-width: 620px) { #homepageStory .making-stage .scene { gap: 20px; padding: 8px 0; filter: blur(.8px); transform: translateY(18px) scale(.994); transition: opacity 400ms ease, transform 560ms var(--ease-out), filter 360ms ease; backface-visibility: hidden; } #homepageStory .making-stage .scene.is-before { transform: translateY(-18px) scale(.994); } #homepageStory .making-stage .scene.is-after { transform: translateY(18px) scale(.994); } #homepageStory .making-stage .scene.is-active { filter: none; transform: none; } #homepageStory .making-stage .scene-copy p { max-width: 30ch; font-size: 21px; line-height: 1.4; letter-spacing: -.02em; text-wrap: pretty; } #homepageStory .making-stage .scene-thought { grid-template-rows: 130px minmax(0, 350px); gap: 28px; } #homepageStory .making-stage .scene-understand { grid-template-rows: 190px minmax(0, 405px); gap: 20px; } #homepageStory .making-stage .scene-shortlist { grid-template-rows: 148px minmax(0, 410px); gap: 18px; } #homepageStory .making-stage .scene-sellers { grid-template-rows: 150px minmax(0, 405px); gap: 18px; } #homepageStory .making-stage .scene-followup { grid-template-rows: 140px minmax(0, 320px); gap: 28px; } #homepageStory .making-stage .scene-watch { grid-template-rows: 190px minmax(0, 390px); gap: 20px; } #homepageStory .request-note { min-height: 330px; } #homepageStory .scene-followup .followup-production-composer { align-self: center; } #homepageStory .scene-followup .followup-production-composer .results-conversation-card { padding: .9rem; } #homepageStory .scene-followup .followup-production-composer .results-conversation-placeholder-overlay, #homepageStory .scene-followup .followup-production-composer .results-conversation-input { min-height: 96px; padding: .85rem; } /* Keep the phone at its final responsive scale throughout its entrance. The desktop keyframe ends at .9 and used to briefly override mobile's .72 scale, which made the phone jump over the copy before settling. */ #homepageStory .scene-watch .telegram-object { transform: scale(.72); transform-origin: center; } #homepageStory .scene-watch.is-visible .telegram-object { animation: mobile-route-watch-in 500ms 100ms var(--ease-out) both; } #homepageStory .scene-watch.is-visible .telegram-object aside { animation: mobile-route-watch-note-in 400ms 390ms var(--ease-out) both; } #homepageStory .mobile-production-market { padding: 8px 9px 9px; } #homepageStory .mobile-production-market p { font-size: 7.2px; line-height: 1.42; } } @keyframes mobile-route-watch-in { from { opacity: 0; transform: translateY(14px) scale(.72); } to { opacity: 1; transform: translateY(0) scale(.72); } } @keyframes mobile-route-watch-note-in { from { opacity: 0; transform: translate(-7px, 6px) rotate(2deg); } to { opacity: 1; transform: translate(0, 0) rotate(4deg); } }