/* oraletrip.com (2026-10-24): the app's own colors, fonts and day colors (app/src/lib/theme.ts), light and dark. */
@font-face{font-family:"Bricolage";src:url("/fonts/BricolageGrotesque_800ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Jakarta";src:url("/fonts/PlusJakartaSans_600SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Jakarta";src:url("/fonts/PlusJakartaSans_800ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
:root{
  --bg:#F3F5F9;--surface:#FFFFFF;--surface2:#F3F5F9;--surface3:#E3E7EF;--ink:#10162B;--muted:#5B6478;--line:#E3E7EF;--rail:#DCE1EA;--dash:#C3CAD8;
  --hero:#111A33;--hero2:#1D2747;--fab:#10162B;--fabInk:#FFFFFF;--link:#2D55B5;--brand:#D9466C;--brandText:#B3305A;--sun:#F9C46B;
  --shadow:0 1px 2px rgba(16,22,43,.06),0 10px 24px -16px rgba(16,22,43,.3);
  --v1:#22A6C9;--v2:#22B35E;--v3:#C9A15F;--v4:#EC6F8B;--v5:#B79B33;--v6:#5C8DF0;--v7:#F27B21;--v8:#4A5BC4;--v9:#E2414C;
  --t1:#E3F5FA;--t2:#E4F6EA;--t3:#F6EEDF;--t4:#FCE7EC;--t5:#F3EED8;--t6:#E6EEFD;--t7:#FDEBDD;--t8:#E5E8F7;--t9:#FBE3E5;
  --o1:#0B6E8A;--o2:#157A3A;--o3:#7A5A22;--o4:#A8304E;--o5:#6B5A14;--o6:#2D55B5;--o7:#A84A08;--o8:#1E2A78;--o9:#A5202B;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0B0F1E;--surface:#161C30;--surface2:#222A44;--surface3:#2C3553;--ink:#F2F4FA;--muted:#A3ACC2;--line:#262F4D;--rail:#313B5E;--dash:#46507A;
  --hero:#10162B;--hero2:#1B2340;--fab:#F2F4FA;--fabInk:#0B0F1E;--link:#9DB6FF;--brand:#F4A3B6;--brandText:#F4A3B6;--shadow:0 0 0 1px rgba(255,255,255,.05);
  --t1:#0F2F3A;--t2:#10301E;--t3:#33281A;--t4:#3A1824;--t5:#2F2A12;--t6:#172447;--t7:#3A2210;--t8:#1C2150;--t9:#3D1519;
  --o1:#8FD8EC;--o2:#8EE0AE;--o3:#E5C99A;--o4:#F7AFC1;--o5:#E2D08A;--o6:#A9C2FA;--o7:#F8B98A;--o8:#B5BEF2;--o9:#F5A3A9;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Jakarta",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--link)}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.display{font-family:"Bricolage","Jakarta",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
.muted{color:var(--muted)}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ribbon{display:flex;gap:6px}.ribbon span{width:30px;height:9px;border-radius:5px}
.skip{position:absolute;left:-999px;top:8px;background:var(--fab);color:var(--fabInk);padding:10px 14px;border-radius:12px;z-index:20}.skip:focus{left:16px}

/* header */
.top{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.tile{width:44px;height:44px;border-radius:14px;background:var(--sun);display:flex;align-items:center;justify-content:center;flex:none}
.word{font-family:"Bricolage",sans-serif;font-size:25px;font-weight:800;letter-spacing:-.02em}.word i{font-style:normal;color:var(--brand)}
.links{display:flex;flex-wrap:wrap;gap:4px 22px;flex:1 1 300px;font-size:15px;font-weight:800}
.links a{color:var(--ink);text-decoration:none;padding:10px 0}.links a:hover{color:var(--brand)}
.acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.circle{width:46px;height:46px;border-radius:23px;border:none;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}
.circle:focus-visible,.btn:focus-visible,.links a:focus-visible{outline:3px solid var(--v6);outline-offset:2px}
.btn{min-height:48px;padding:0 22px;border-radius:24px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:800;text-decoration:none;border:none;cursor:pointer;font-family:inherit}
.btn.big{min-height:56px;padding:0 28px;border-radius:28px;font-size:17px}
.btn.dark{background:var(--fab);color:var(--fabInk)}
.btn.light{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.btn.plain{background:transparent;color:var(--ink);padding:0 14px}
.btn.sun{background:var(--sun);color:#10162B}
.play{width:30px;height:30px;border-radius:15px;background:var(--sun);color:#10162B;display:flex;align-items:center;justify-content:center}
.lang{position:relative}
.lang-menu{position:absolute;right:0;top:54px;background:var(--surface);border-radius:18px;box-shadow:0 18px 40px -18px rgba(16,22,43,.5);padding:8px;display:none;grid-template-columns:repeat(2,minmax(140px,1fr));gap:2px;z-index:30;border:1px solid var(--line)}
.lang-menu.open{display:grid}
.lang-menu a{padding:9px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:800}
.lang-menu a:hover,.lang-menu a[aria-current="true"]{background:var(--surface2)}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:36px;padding-top:54px;padding-bottom:30px}
.hero-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.hero h1{margin:0;font-size:clamp(42px,6vw,66px);line-height:1}
.hero p{margin:0;font-size:19px;line-height:1.55;color:var(--muted);max-width:520px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.chip{min-height:40px;padding:0 14px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
.chip.soon{background:var(--surface2);box-shadow:none;border:1px dashed var(--dash);color:var(--muted)}
.stagebox{flex:1 1 600px;min-width:0;display:flex;justify-content:center}
.stage{position:relative;width:760px;height:600px;flex:none;transform-origin:top center;transform:scale(.8);margin-bottom:-120px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* The devices stay still (Lewis, 2026-10-24). */
.f1,.f2,.f3{animation:none}
.dev{position:absolute}
.laptop{left:110px;top:0;width:630px}
.laptop .screen{height:440px;border-radius:20px 20px 6px 6px;background:#0B0F1E;padding:12px;box-shadow:0 34px 70px -34px rgba(16,22,43,.6)}
.laptop .screen img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:8px}
.laptop .base{height:18px;margin:0 -44px;border-radius:0 0 18px 18px;background:#C3CAD8}
.tablet{left:0;top:236px;width:330px;height:236px;border-radius:24px;background:#10162B;padding:10px;box-shadow:0 30px 50px -28px rgba(16,22,43,.6)}
.tablet img,.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:16px}
.phone{background:#10162B;padding:8px;box-shadow:0 34px 60px -26px rgba(16,22,43,.65)}
.iphone{left:520px;top:150px;width:226px;height:450px;border-radius:40px}.iphone img{border-radius:32px}
.android{left:330px;top:296px;width:170px;height:304px;border-radius:26px;background:#1D2747}.android img{border-radius:19px}
.label{position:absolute;font-size:12px;font-weight:800;padding:6px 10px;border-radius:10px;background:var(--surface);box-shadow:var(--shadow);white-space:nowrap}
.label.soon{color:var(--muted)}
@media (max-width:1340px){.stage{transform:scale(.68);height:600px;margin-bottom:-192px}}
@media (max-width:800px){.stage{transform:scale(.46);transform-origin:top left;height:280px;margin-bottom:0;margin-right:-410px}}
.only-dark{display:none}:root[data-theme="dark"] .only-dark{display:block}:root[data-theme="dark"] .only-light{display:none}

/* sections */
.sec{padding-top:80px;padding-bottom:10px}
.split{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.split.rev{flex-wrap:wrap-reverse}
.split .txt{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:14px}
.split .pic{flex:1 1 520px;min-width:0;display:flex;justify-content:center}
.sec h2{margin:0;font-size:clamp(32px,4vw,46px);line-height:1.05}
.sec p{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px}.pills span{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:800}
.phones{display:flex;gap:22px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.phones .phone{position:relative;width:250px;height:520px;border-radius:44px}.phones .phone img{border-radius:36px}
.phones .phone.a{width:236px;height:524px;border-radius:30px;background:#1D2747}.phones .phone.a img{border-radius:22px}
.bigscreen{border-radius:26px;background:#0B0F1E;padding:14px;box-shadow:0 40px 80px -40px rgba(16,22,43,.6)}
.bigscreen img{border-radius:14px;width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.card{background:var(--surface);border-radius:24px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;transition:transform .2s}
.card:hover{transform:translateY(-2px)}
.ic{width:56px;height:56px;border-radius:28px;display:flex;align-items:center;justify-content:center}
.card b{font-size:18px}.card span{font-size:14px;line-height:1.5;color:var(--muted)}

/* the live trip card */
.trip{position:relative;width:520px;max-width:100%;aspect-ratio:520/500;border-radius:30px;overflow:hidden;background:var(--hero);color:#fff;box-shadow:0 24px 48px -26px rgba(16,22,43,.75)}
.trip canvas{position:absolute;inset:0;width:100%;height:100%}
.trip .fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--hero) 0%,var(--hero) 45%,rgba(17,26,51,.7) 75%,rgba(17,26,51,.48) 100%)}
:root[data-theme="dark"] .trip .fade{background:linear-gradient(90deg,var(--hero) 0%,var(--hero) 45%,rgba(16,22,43,.7) 75%,rgba(16,22,43,.48) 100%)}
.trip .in{position:relative;height:100%;padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px}
.glass{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.glass2{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.trip .dots{display:flex;gap:6px;align-items:center;flex:1}.trip .dots span{width:10px;height:10px;border-radius:50%}
.trip .pill{height:40px;padding:0 14px;border-radius:999px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.trip .lbl{font-size:13px;font-weight:800;letter-spacing:.14em;color:#C9D0E3}
.trip .ttl{font-family:"Bricolage",sans-serif;font-size:36px;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.trip .sub{font-size:15px;color:#C9D0E3}
.trip .big{font-family:"Bricolage",sans-serif;font-size:64px;line-height:.9;color:#F4A3B6}
.trip .next{border-radius:22px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.trip .next .tl{width:52px;height:52px;border-radius:16px;background:#E2414C;display:flex;align-items:center;justify-content:center;flex:none}
.trip .when{font-size:12px;font-weight:800;letter-spacing:.1em;color:#F4A3B6}
.trip .what{font-size:19px;font-weight:800}
.stack{position:relative;width:560px;max-width:100%}
.stack:before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:92%;border-radius:30px;background:var(--hero2);opacity:.6}
.stack .trip{margin-left:4%}

/* plans teaser */
.teaser{position:relative;border-radius:32px;background:var(--hero);color:#fff;padding:40px;overflow:hidden;display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.teaser canvas{position:absolute;top:0;right:0;width:46%;height:100%}
.teaser .fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--hero) 0%,var(--hero) 52%,rgba(17,26,51,.5) 78%,rgba(17,26,51,.3) 100%)}
.teaser > div{position:relative}
.teaser p{color:#C9D0E3;margin:0;font-size:16px;line-height:1.6}

/* footer */
footer{border-top:1px solid var(--line);background:var(--surface);margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;padding-top:26px;padding-bottom:26px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
footer .tm{flex:1 1 260px;text-align:right}
@media (max-width:640px){footer .tm{text-align:left}.teaser{padding:26px}.teaser canvas{width:100%;opacity:.5}}
@media (prefers-reduced-motion:reduce){.f1,.f2,.f3,.card{animation:none;transition:none}html{scroll-behavior:auto}}

/* plans page */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;align-items:stretch}
.plan{position:relative;border-radius:30px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;border:2px solid transparent}
.plan.best{background:var(--hero);color:#fff;border-color:var(--sun)}
.plan .band{height:10px;display:flex}.plan .band span{flex:1}
.plan .in{position:relative;padding:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.plan canvas{position:absolute;top:0;right:0;width:70%;height:100%}
.plan .fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--hero) 0%,var(--hero) 34%,rgba(17,26,51,.62) 62%,rgba(17,26,51,.42) 100%)}
.price{font-family:"Bricolage",sans-serif;font-size:58px;line-height:1;font-weight:800;letter-spacing:-.02em}
.save{align-self:flex-start;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:800}
.tag{padding:6px 12px;border-radius:14px;background:var(--sun);color:#10162B;font-size:12px;font-weight:800}
.cmp{border-radius:26px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.cmp .h,.cmp .r{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr);gap:12px;padding:13px 22px;align-items:center}
.cmp .h{padding:14px 22px}
.cmp .r{border-top:1px solid var(--line)}
.cmp .r b{display:block;font-size:15px}.cmp .r small{display:block;font-size:13px;color:var(--muted);font-weight:600}
.cmp .no{color:var(--muted)}.cmp .pro{color:var(--o2);font-weight:800}
.ask{border-radius:22px;background:var(--surface);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:6px}
.ask p{font-size:14px}
/* legal pages */
.legal{max-width:820px;margin:0 auto;padding:50px 24px 40px}
.legal h1{font-size:44px;margin:0 0 6px}.legal h2{font-size:24px;margin:34px 0 8px}
.legal p,.legal li{color:var(--ink);font-size:16px;line-height:1.7;font-weight:600}
.legal .note{padding:14px 16px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);color:var(--muted)}

/* Phones (2026-10-24 review): a short header that scrolls away; the menu links in one sideways row; sign-up and log-in
   stay in the hero right below. Trip cards grow to fit instead of cutting their text. */
@media (max-width:700px){
  .top{position:static}
  .top nav{gap:6px 12px;padding-top:10px;padding-bottom:6px}
  .brand{flex:1 1 auto}
  .acts .btn{display:none}
  .links{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;gap:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .links::-webkit-scrollbar{display:none}
  .links a{white-space:nowrap}
  .trip,.trip[style]{aspect-ratio:auto!important;min-height:470px}
}

/* Everything ÓraleTrip does (2026-10-24): a colored panel per kind of feature */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.fcard{background:var(--surface);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.fhead{display:flex;align-items:center;gap:14px;padding:18px 20px}
.fhead b{display:block;font-size:19px;line-height:1.2}.fhead span{font-size:14px;line-height:1.4;font-weight:600;opacity:.9}
.fic{width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;flex:none}
:root[data-theme="dark"] .fic{background:rgba(0,0,0,.18)}
.fcard ul{list-style:none;margin:0;padding:14px 20px 20px;display:flex;flex-direction:column;gap:10px}
.fcard li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.ck{width:22px;height:22px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;margin-top:1px}
.pro{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--brandText);background:var(--surface2);padding:2px 7px;border-radius:8px;margin-left:4px}