@font-face{font-family:Fredoka;src:url('/integration-assets/Fredoka.ttf')} :root{--navy:#062b63;--sunset:#ff6b3d;--paper:#f8f6f1;--ink:#0c2446;--muted:#6b7890;--aqua:#20c7cf;--border:#e4e9ef}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,sans-serif}main{min-height:100vh;display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(360px,1fr)}.scene{position:relative;min-height:620px;padding:44px;background:linear-gradient(180deg,#062b6320 10%,#062b6380 48%,var(--navy) 95%),url('/integration-assets/travel.webp') center/cover;color:white}.brand{display:inline-flex;background:white;border-radius:999px;padding:15px 22px}.brand img{width:135px}.scene-copy{position:absolute;bottom:60px;left:44px;right:44px}.eyebrow{font-size:12px;letter-spacing:1.5px;font-weight:750;color:var(--aqua)}h1,h2,h3{font-family:Fredoka,system-ui;font-weight:550;line-height:1.1}h1{font-size:clamp(42px,5vw,70px);margin:20px 0}h2{font-size:38px;margin:18px 0}h3{font-size:23px;margin:28px 0 14px}.scene p{font-size:19px;color:#d5e7f5}.panel{width:100%;max-width:600px;padding:64px 48px;margin:auto}.panel>.eyebrow{color:#087981}#subtitle{color:var(--muted)}button,.button{display:block;width:100%;border:0;border-radius:999px;background:var(--navy);color:white;min-height:50px;padding:13px 20px;font:650 16px/1.4 system-ui;cursor:pointer;text-align:center;text-decoration:none;margin:12px 0}button:disabled{opacity:.5;cursor:wait}.secondary{background:white;color:var(--navy);border:1px solid var(--border)}.text-button{color:var(--navy);background:transparent;min-height:44px;font-size:14px;text-align:center}.divider{text-align:center;color:var(--muted);font-size:13px;margin:24px 0}label{display:block;font-size:14px;font-weight:600;margin:14px 0}input{display:block;width:100%;padding:14px;margin-top:6px;border:1px solid var(--border);border-radius:14px;font:inherit;background:white}a{color:#1264ae;overflow-wrap:anywhere}.fine{color:var(--muted);font-size:12px}#status{color:#9e401b;min-height:24px;font-size:14px}.plan,.person,.invite-link{padding:16px;background:white;border:1px solid var(--border);border-radius:18px;margin:10px 0}.plan strong{display:block}.plan small{color:var(--muted)}.route{font:500 25px Fredoka;color:var(--navy);margin:20px 0}ul{padding-left:22px}li{margin:10px 0}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}@media(max-width:760px){main{display:block}.scene{min-height:280px;padding:24px}.scene-copy{left:24px;bottom:20px}.scene-copy h1{font-size:32px;line-height:1}.scene-copy h1 br{display:none}.scene-copy p{display:none}.scene-copy .eyebrow{font-size:10px}.brand{padding:10px 17px}.brand img{width:110px}.panel{padding:30px 24px}.scene-copy h1{margin:12px 0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.connection-row{display:flex;align-items:center;gap:12px;padding:18px;background:white;border-radius:22px;box-shadow:0 8px 22px #062b630f;margin:16px 0}.provider-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:14px;background:#eef1f5;color:var(--navy);font-weight:700}.provider-detail{flex:1;min-width:0}.provider-detail strong,.provider-detail small{display:block}.provider-detail small{color:var(--muted);font-size:13px}.connection-row button{width:auto;margin:0;font-size:13px;padding:10px 14px;min-height:44px}

.review-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.review-columns section{padding:18px;background:#fff;border-radius:22px;overflow-wrap:anywhere}.review-columns p{font-size:14px;line-height:1.5}@media(max-width:600px){.review-columns{grid-template-columns:1fr}}

/* Connection web flow. Values mirror TripamiDesignSystem's palette, type and
   4pt spacing scale. Other web routes retain their existing presentation. */
@font-face{font-family:'Bricolage Grotesque';src:url('/integration-assets/BricolageGrotesque-Variable.ttf') format('truetype');font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Inter;src:url('/integration-assets/Inter-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
.brand-braid{display:none}
body[data-mode=connect]{--canvas:#FAFAF7;--surface:#FFFFFF;--sunken:#F2F1EC;--hairline:#E6E4DE;--border-strong:#D6D3CB;--text:#02203A;--text-2:#525D6E;--text-3:#66707F;--action:#02203A;--action-text:#FAFAF7;--accent:#B8400F;--accent-subtle:#FFF1E8;--critical:#B3133F;color-scheme:light;background:var(--surface);color:var(--text);font:400 15px/1.5 Inter,system-ui,sans-serif}
body[data-mode=connect] main{grid-template-columns:minmax(320px,1fr) minmax(520px,1fr);gap:24px;padding:24px;align-items:start}
body[data-mode=connect] .scene{position:sticky;top:24px;height:calc(100svh - 48px);min-height:720px;display:flex;flex-direction:column;padding:40px;border-radius:28px;background:var(--sunken);color:var(--text);overflow:hidden;isolation:isolate}
body[data-mode=connect] .brand{padding:0;border-radius:0;background:transparent;position:relative;z-index:1}
body[data-mode=connect] .brand img{content:url('/integration-assets/tripami-wordmark.webp');width:128px;height:auto}
body[data-mode=connect] .scene-copy{position:relative;left:auto;right:auto;bottom:auto;z-index:1;margin-top:64px}
body[data-mode=connect] .eyebrow{font:600 12px/16px Inter,system-ui,sans-serif;letter-spacing:.96px;color:var(--text-2)}
body[data-mode=connect] .scene h1{font:800 clamp(34px,4vw,64px)/1.02 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.02em;margin:20px 0 24px}
body[data-mode=connect] .scene p{font:400 17px/24px Inter,system-ui,sans-serif;color:var(--text-2);margin:0}
body[data-mode=connect] .brand-braid{display:block;position:relative;width:calc(100% + 80px);max-width:none;margin:32px -40px -40px;flex:1;min-height:240px;object-fit:cover;object-position:center;z-index:0;pointer-events:none}
body[data-mode=connect] .panel{max-width:640px;padding:24px 32px;margin:auto;align-self:center}
body[data-mode=connect] h2{font:800 34px/1.08 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.015em;margin:12px 0}
body[data-mode=connect] h3{font:700 18px/1.2 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.0125em}
body[data-mode=connect] h1,body[data-mode=connect] h2,body[data-mode=connect] h3{font-optical-sizing:auto;text-wrap:balance}
body[data-mode=connect] #subtitle{font-size:15px;line-height:20px;color:var(--text-2);margin:0 0 24px;overflow-wrap:anywhere}
body[data-mode=connect] #status{color:var(--text-2);font-size:14px;line-height:20px;margin:16px 0;min-height:0;overflow-wrap:anywhere}
body[data-mode=connect] #status:empty{display:none}
body[data-mode=connect] button,body[data-mode=connect] .button{min-height:52px;padding:12px 20px;margin:12px 0;border-radius:999px;background:var(--action);color:var(--action-text);font:500 15px/20px Inter,system-ui,sans-serif;transition:background-color 200ms cubic-bezier(.2,0,0,1)}
body[data-mode=connect] button:hover:not(:disabled){background:var(--text-2)}
body[data-mode=connect] button:disabled{opacity:.5;cursor:wait}
body[data-mode=connect] #google,body[data-mode=connect] .secondary{background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}
body[data-mode=connect] #google:hover:not(:disabled),body[data-mode=connect] .secondary:hover:not(:disabled){background:var(--sunken)}
body[data-mode=connect] .text-button{background:transparent;color:var(--text);min-height:48px;padding:12px 8px;font-size:13px;border:0}
body[data-mode=connect] .text-button:hover:not(:disabled){background:var(--sunken)}
body[data-mode=connect] .divider{display:flex;align-items:center;gap:16px;color:var(--text-3);font-size:13px;margin:24px 0}
body[data-mode=connect] .divider::before,body[data-mode=connect] .divider::after{content:'';height:1px;flex:1;background:var(--hairline)}
body[data-mode=connect] label{font:500 13px/18px Inter,system-ui,sans-serif;margin:16px 0;color:var(--text)}
body[data-mode=connect] input{min-height:52px;padding:12px 16px;border:1px solid var(--border-strong);border-radius:10px;margin-top:8px;background:var(--surface);color:var(--text);font:400 17px/24px Inter,system-ui,sans-serif}
body[data-mode=connect] #new-account,body[data-mode=connect] #reset{margin:0}
body[data-mode=connect] .fine{font:400 13px/18px Inter,system-ui,sans-serif;color:var(--text-2)}
body[data-mode=connect] #auth>.fine{margin:20px 0 0}
body[data-mode=connect] a{color:var(--text);text-underline-offset:3px}
body[data-mode=connect] :focus-visible{outline:2px solid var(--text);outline-offset:4px}
body[data-mode=connect] .connection-identity{padding:16px 0;border-block:1px solid var(--hairline)}
body[data-mode=connect] #consent-title{margin:8px 0;font-size:18px;overflow-wrap:anywhere}
body[data-mode=connect] #signed-in{font-size:13px;color:var(--text-2);margin:0;overflow-wrap:anywhere}
body[data-mode=connect] #local-app-notice{padding:16px;margin:20px 0;background:var(--sunken);border-radius:10px;font-size:13px;line-height:18px}
body[data-mode=connect] .permissions-heading{font:700 18px/1.2 'Bricolage Grotesque',system-ui,sans-serif;margin:24px 0 16px}
body[data-mode=connect] #permissions{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;list-style:none;padding:0;margin:0 0 24px}
body[data-mode=connect] .permission-group{margin:0;min-width:0}
body[data-mode=connect] .permission-group strong{font:600 13px/18px Inter,system-ui,sans-serif}
body[data-mode=connect] .permission-group p{font:400 13px/18px Inter,system-ui,sans-serif;color:var(--text-2);margin:4px 0 0;overflow-wrap:anywhere}
body[data-mode=connect] .consent-actions{border-top:1px solid var(--hairline);padding-top:8px}
body[data-mode=connect] .consent-actions>.fine{margin:12px 0 20px}
body[data-mode=connect] .account-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:16px}
body[data-mode=connect] .account-actions>*{width:auto;margin:0}
body[data-mode=connect] .account-actions a{display:flex;align-items:center}
@media(min-width:761px) and (max-height:850px){body[data-mode=connect] .scene{min-height:720px}body[data-mode=connect] .scene-copy{margin-top:40px}body[data-mode=connect] .scene h1{font-size:48px}}
@media(max-width:1000px){body[data-mode=connect] main{grid-template-columns:minmax(280px,.85fr) minmax(420px,1fr);gap:16px;padding:16px}body[data-mode=connect] .scene{top:16px;height:calc(100svh - 32px);padding:32px 24px}body[data-mode=connect] .panel{padding:32px 24px}body[data-mode=connect] .brand-braid{width:calc(100% + 48px);margin-inline:-24px;margin-bottom:-32px}body[data-mode=connect] .scene h1{font-size:42px}}
@media(max-width:760px){body[data-mode=connect] main{display:block;padding:0}body[data-mode=connect] .scene{display:block;position:relative;top:0;min-height:0;height:112px;border-radius:0;padding:28px 24px;background:var(--sunken)}body[data-mode=connect] .brand img{width:112px}body[data-mode=connect] .scene-copy{display:none}body[data-mode=connect] .brand-braid{position:absolute;left:auto;right:-96px;bottom:-48px;width:320px;min-height:0;margin:0;opacity:.8}body[data-mode=connect] .panel{padding:32px 24px;max-width:560px}body[data-mode=connect] h2{font-size:34px;line-height:38px}body[data-mode=connect] #permissions{gap:20px 16px}body[data-mode=connect] #subtitle{margin-bottom:24px}}
@media(max-width:380px){body[data-mode=connect] #permissions{grid-template-columns:1fr}}
@media(prefers-color-scheme:dark){body[data-mode=connect]{--canvas:#0B1220;--surface:#121A29;--sunken:#070C16;--hairline:#243045;--border-strong:#334058;--text:#F2F1EC;--text-2:#A7AFBD;--text-3:#8C95A3;--action:#F2F1EC;--action-text:#02203A;--accent:#FF7A3D;--accent-subtle:#3A1D10;--critical:#FF6B8A;color-scheme:dark}body[data-mode=connect] .brand img{content:url('/integration-assets/tripami-wordmark-reversed.webp')}body[data-mode=connect] .brand-braid{opacity:.8}}
@media(prefers-reduced-motion:reduce){body[data-mode=connect] button{transition:none}}
body[data-mode=connect] .permission-group:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:600px){body[data-mode=connect] #permissions{grid-template-columns:1fr}body[data-mode=connect] .permission-group p{font-size:14px;line-height:20px}}
body[data-mode=connect] #status[data-state=error]{color:var(--critical)}

/* Connect, on brand: friends out together on the left, the group's braid behind the form on the right.
   The photo's faces sit in its upper middle, so the headline sits at the bottom of the scene. */
.scene-photo{display:none}
body[data-mode=connect]{background:var(--canvas)}
body[data-mode=connect] main{position:relative;z-index:1;grid-template-columns:minmax(380px,1fr) minmax(480px,1fr);gap:0;padding:20px;align-items:stretch;min-height:100svh}
body[data-mode=connect] .scene{top:20px;height:calc(100svh - 40px);min-height:560px;padding:40px;border-radius:28px;background:#02203A;color:#fff;justify-content:flex-start;transform:translateZ(0)}
body[data-mode=connect] .scene-photo{display:block;position:absolute;inset:-16px;z-index:-2;background:#02203A url('/integration-assets/friends-walking.webp') center 30%/cover no-repeat;will-change:transform}
body[data-mode=connect] .scene::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,16,30,.42) 0%,rgba(2,16,30,0) 18%,rgba(2,16,30,0) 44%,rgba(2,16,30,.55) 64%,rgba(2,16,30,.86) 100%);pointer-events:none}
body[data-mode=connect] .brand img{content:url('/integration-assets/tripami-wordmark-reversed.webp');width:136px;margin-left:-12px}
body[data-mode=connect] .scene-copy{margin:auto 0 0}
body[data-mode=connect] .scene .eyebrow{color:#fff}
body[data-mode=connect] .scene h1{font-size:clamp(36px,min(4.2vw,6.8vh),68px);margin:12px 0 14px;color:#fff}
body[data-mode=connect] .scene h1 br{display:none}
body[data-mode=connect] .scene h1 .line{display:block}
body[data-mode=connect] .scene p{color:rgba(255,255,255,.88)}
body[data-intro] .scene-copy>.eyebrow,body[data-intro] .scene-copy>p,body[data-intro] .scene h1 .line{opacity:0;animation:connect-reveal 240ms 1400ms forwards}
@keyframes connect-reveal{to{opacity:1}}
body[data-mode=connect] .brand-braid{display:none}
body[data-braid=static] main::after{content:'';position:fixed;inset:0 0 0 50%;z-index:-1;background:url('/integration-assets/connection-braid.svg') center/cover no-repeat;opacity:.7;pointer-events:none}
.braid-stage{position:fixed;inset:0;z-index:0;pointer-events:none}
.braid-stage canvas{display:block;width:100%;height:100%}
body[data-mode=connect] .panel{--text-2:#3D4859;--text-3:#3D4859;position:relative;max-width:480px;margin:auto;padding:36px 40px;align-self:center;border:1px solid var(--hairline);border-radius:28px;background:var(--surface);box-shadow:0 24px 64px rgba(2,32,58,.12)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (background:color-mix(in srgb,white,transparent)){body[data-mode=connect] .panel{background:color-mix(in srgb,var(--surface) 70%,transparent);-webkit-backdrop-filter:blur(7px) saturate(1.15);backdrop-filter:blur(7px) saturate(1.15)}}
body[data-mode=connect] .panel button,body[data-mode=connect] .panel .button{min-height:48px;margin:10px 0}
body[data-mode=connect] .panel #subtitle{margin-bottom:20px}
body[data-mode=connect] .panel .divider{margin:18px 0 6px}
body[data-mode=connect] .panel label{margin:12px 0}
body[data-mode=connect] .panel input{min-height:48px}
body[data-mode=connect] .panel .text-button{min-height:44px;padding:8px;margin:0}
body[data-mode=connect] #auth>.fine{margin:12px 0 0}
@media(max-width:1000px){body[data-mode=connect] main{grid-template-columns:minmax(300px,.8fr) minmax(420px,1fr);gap:0;padding:16px}body[data-mode=connect] .scene{top:16px;height:calc(100svh - 32px);padding:32px 28px}body[data-mode=connect] .scene h1{font-size:44px}body[data-mode=connect] .panel{margin:auto 16px;padding:32px 28px}}
@media(max-width:760px){body[data-mode=connect] main{display:block;padding:12px 12px 24px}body[data-mode=connect] .scene{display:block;position:relative;top:0;height:220px;min-height:0;padding:24px;border-radius:24px;background:#02203A}body[data-mode=connect] .scene-photo{background-position:center 30%}body[data-mode=connect] .scene-copy{display:none}body[data-mode=connect] .brand img{width:112px;margin-left:-10px}body[data-braid=static] main::after{inset:0}body[data-mode=connect] .panel{margin:12px 0 0;max-width:none;padding:28px 20px;border-radius:24px}}
@media(prefers-color-scheme:dark){body[data-mode=connect] .brand img{content:url('/integration-assets/tripami-wordmark-reversed.webp')}body[data-braid=static] main::after{opacity:.35}body[data-mode=connect] .panel{--text-2:#C4CAD4;--text-3:#C4CAD4;box-shadow:0 24px 64px rgba(0,0,0,.4)}}
@media(min-width:761px) and (max-height:760px){body[data-mode=connect] .scene p{display:none}}
body[data-mode=connect] .connection-identity{padding:12px 0}
body[data-mode=connect] .permissions-heading{margin:16px 0 8px}
body[data-mode=connect] #permissions{display:block;margin:0 0 4px}
body[data-mode=connect] .permission-group{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--hairline)}
body[data-mode=connect] .permission-group:last-child{border-bottom:0}
body[data-mode=connect] .permission-group strong{flex:none}
body[data-mode=connect] .permission-group p{margin:0;flex:1;text-align:right;font-size:13px;line-height:18px}
body[data-mode=connect] #permission-details{font-size:13px;line-height:18px;color:var(--text-2);margin:0 0 8px}
body[data-mode=connect] #permission-details summary{cursor:pointer;padding:8px 0;font-weight:500;color:var(--text)}
body[data-mode=connect] #permission-list{margin:0;padding-left:18px}
body[data-mode=connect] #permission-list li{margin:4px 0}
body[data-mode=connect] .consent-actions{padding-top:4px}
body[data-mode=connect] .consent-actions>.fine{margin:8px 0 12px}
body[data-mode=connect] .panel:has(#consent:not([hidden]))>.eyebrow{display:none}