/* Upright phones get a bigger slideshow: the picture runs edge to edge as a close-up framed on the part each slide
   is about (phone-slideshow.js), chapters sit in one swipeable row, and back, pause and next are large.
   "Whole screen" shows the complete picture turned sideways over the page, with buttons that fade away. */
.phone-slide-title { display:contents; }
.phone-slide-dots,.phone-whole-open,.phone-whole-close,.phone-whole-tip { display:none; }

@media (max-width:600px) and (orientation:portrait) {
 html { scroll-snap-type:y proximity; }
 html .marketing-home .product-screen { height:auto;min-height:0;display:block;padding:calc(var(--chrome-header) + 8px) 16px 16px; }
 html .marketing-home .example { display:flex;flex-direction:column;gap:0;height:calc(100svh - var(--chrome-header) - 22px); }

 html .marketing-home .example-steps { order:-1;position:relative;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;margin:0 -16px;padding:0 16px 10px; }
 html .marketing-home .example-steps::-webkit-scrollbar { display:none; }
 html .marketing-home .example-steps button { flex:none;height:40px;min-height:40px;padding:0 16px;border:1px solid #3a414d;border-radius:20px;align-items:center;color:#aab3c2;overflow:hidden; }
 html .marketing-home .example-steps button>span:first-child,html .marketing-home .example-steps small { display:none; }
 html .marketing-home .example-steps .step-copy { display:block; }
 html .marketing-home .example-steps strong { font-size:15px;font-weight:550;line-height:1.3;white-space:nowrap; }
 html .marketing-home .example-steps button>i { top:auto;bottom:0;height:3px;background:transparent; }
 html .marketing-home .example-steps button[aria-selected=true] { background:#83b0fa1f;border-color:#83b0fa80;color:#e4eeff; }

 html .marketing-home .example-panel { flex:1;display:flex;flex-direction:column;gap:0;min-height:0; }
 html .marketing-home .capture-stage { flex:1;position:relative;display:block;margin:0 -16px;overflow:hidden;min-height:0;background:#1a1a1d;touch-action:pan-y; }
 html .marketing-home #exampleCapture { position:absolute;left:0;top:0;transform-origin:0 0;border:0;border-radius:0;box-shadow:none; }

 html .marketing-home .example-caption { display:block;padding:14px 0 0;min-height:0;height:auto;border:0; }
 html .marketing-home .example-caption>div:first-child { height:auto;min-height:0; }
 html .marketing-home .phone-slide-title { display:flex;align-items:center;justify-content:space-between;gap:12px; }
 html .marketing-home .example-caption strong { display:block;font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.3px;white-space:normal;color:#eef2f8; }
 html .marketing-home .example-caption p { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;height:4.5em;font-size:15px;line-height:1.5;color:#b3bac8;margin:6px 0 0; }
 html .marketing-home .phone-slide-dots { display:flex;flex:none;gap:7px;align-items:center; }
 html .marketing-home .phone-slide-dots i { width:7px;height:7px;border-radius:4px;background:#4a5262; }
 html .marketing-home .phone-slide-dots i.on { width:20px;background:#9cc2ff; }

 html .marketing-home .slide-controls { display:flex;flex-wrap:nowrap;align-items:stretch;height:auto;min-height:0;gap:10px;margin-top:14px; }
 html .marketing-home .slide-controls .example-skip { order:1;flex:none;width:64px;min-width:64px;height:52px;font-size:32px;border-radius:12px;background:#262a33;border-color:#454e5e;color:#e0eaff; }
 html .marketing-home .slide-controls .example-skip:last-child { order:3; }
 html .marketing-home #examplePlayback { order:2;flex:1;height:52px;min-height:52px;font-size:16px;border-radius:12px;gap:10px;color:#cfe0fb;border-color:#454e5e; }

 html .marketing-home .phone-whole-open { position:absolute;z-index:5;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:20px;background:#1a1b20cc;border:1px solid #ffffff2a;color:#e6eefc;font-size:14px;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); }
 html .marketing-home .export-options-active .phone-whole-open { display:none; }

 /* The ten export choices become a two-column list that fits the phone instead of a tiny 16:9 grid. */
 html .marketing-home #exportOptionsScreen { position:absolute;inset:0;width:auto!important;height:auto!important;max-width:none;margin:0;padding:14px 16px;display:flex;align-items:center; }
 html .marketing-home #exportOptionsScreen[hidden] { display:none; }
 html .marketing-home .export-options-screen ul { width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:10px;padding:0; }
 html .marketing-home .export-options-screen li { display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;justify-items:start;text-align:left;padding:10px 12px;border:1px solid #343a46;border-radius:12px;background:#202228; }
 html .marketing-home .export-options-screen li:last-child { grid-column:auto; }
 html .marketing-home .export-option-icon { grid-row:1 / 3;width:32px;height:32px; }
 html .marketing-home .export-options-screen strong { font-size:14px;line-height:1.25; }
 html .marketing-home .export-option-caption { display:block;font-size:12px;line-height:1.3;color:#9aa4b4; }
 /* Shorter screens (Safari's bars showing, small iPhones): phone-slideshow.js tightens the list until it fits. */
 html:not(.phone-whole) .marketing-home #exportOptionsScreen.phone-compact { padding:8px 16px; }
 html:not(.phone-whole) .marketing-home .phone-compact ul { gap:8px; }
 html:not(.phone-whole) .marketing-home .phone-compact li { grid-template-columns:26px minmax(0,1fr);padding:8px 10px; }
 html:not(.phone-whole) .marketing-home .phone-compact .export-option-icon { width:26px;height:26px; }
 html:not(.phone-whole) .marketing-home .phone-compact .export-option-caption { display:none; }
 html:not(.phone-whole) .marketing-home .phone-tight ul { gap:6px; }
 html:not(.phone-whole) .marketing-home .phone-tight li { grid-template-columns:22px minmax(0,1fr);padding:5px 10px; }
 html:not(.phone-whole) .marketing-home .phone-tight .export-option-icon { width:22px;height:22px; }
 html:not(.phone-whole) .marketing-home .phone-tight strong { font-size:13px; }
 html .marketing-home .integrations-section { margin-top:22px; }
}

/* Whole screen: the complete picture fills the phone, turned sideways while the phone is upright. */
html.phone-whole,html.phone-whole body { overflow:hidden; }
html.phone-whole .marketing-home .site-header { visibility:hidden; }
html.phone-whole .marketing-home .product-screen { z-index:300; }
html.phone-whole .marketing-home .example-panel { position:fixed;z-index:300;top:0;left:0;width:100vw;height:100dvh;margin:0;display:block;background:#111114; }
@media (orientation:portrait) {
 html.phone-whole .marketing-home .example-panel { width:100dvh;height:100vw;transform-origin:0 0;transform:translateX(100vw) rotate(90deg); }
}
html.phone-whole .marketing-home .capture-stage { position:absolute;inset:0;margin:0;background:#111114;touch-action:none; }
html.phone-whole .marketing-home .phone-whole-open,html.phone-whole .marketing-home .example-caption p,html.phone-whole .marketing-home .phone-slide-dots { display:none; }
html.phone-whole .marketing-home .example-caption { position:static;padding:0; }
html.phone-whole .marketing-home .example-caption>div:first-child { position:absolute;z-index:2;left:max(8px,calc(var(--phone-side,0px) + 8px));top:8px;max-width:50%;padding:6px 12px;border-radius:16px;background:#121318a6;border:1px solid #ffffff1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .35s; }
html.phone-whole .marketing-home .example-caption strong { font-size:12px;line-height:1.3;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
html.phone-whole .marketing-home .slide-controls { position:static;margin:0; }
html.phone-whole .marketing-home .slide-controls .example-skip,html.phone-whole .marketing-home #examplePlayback,html.phone-whole .marketing-home .phone-whole-close { position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;width:38px;min-width:0;height:38px;min-height:0;padding:0;border-radius:19px;background:#121318a6;border:1px solid #ffffff1f;color:#eef3fc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .35s; }
html.phone-whole .marketing-home .slide-controls .example-skip { top:calc(50% - 19px);font-size:22px; }
html.phone-whole .marketing-home .slide-controls .example-skip:not(:last-child) { left:max(8px,calc((var(--phone-side,0px) - 38px) / 2)); }
html.phone-whole .marketing-home .slide-controls .example-skip:last-child { right:max(8px,calc((var(--phone-side,0px) - 38px) / 2)); }
html.phone-whole .marketing-home #examplePlayback { right:max(8px,calc((var(--phone-side,0px) - 38px) / 2));bottom:8px;font-size:12px; }
html.phone-whole .marketing-home #examplePlayback span:last-child { display:none; }
html.phone-whole .marketing-home .phone-whole-close { right:max(8px,calc((var(--phone-side,0px) - 38px) / 2));top:8px;font-size:26px;line-height:1; }
/* The buttons and title fade two seconds after the last touch (phone-slideshow.js); a tap on the picture brings them back. */
html.phone-whole.phone-controls-off .marketing-home .slide-controls .example-skip,html.phone-whole.phone-controls-off .marketing-home #examplePlayback,html.phone-whole.phone-controls-off .marketing-home .phone-whole-close,html.phone-whole.phone-controls-off .marketing-home .example-caption>div:first-child { opacity:0;pointer-events:none; }
html.phone-whole .marketing-home .phone-whole-tip { position:absolute;z-index:4;left:50%;bottom:10px;display:block;padding:5px 12px;border-radius:14px;background:#121318bf;color:#dfe6f3;font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(-50%);transition:opacity .35s; }
html.phone-whole .marketing-home .phone-whole-tip.on { opacity:1; }
html.phone-whole .marketing-home .phone-whole-close svg,html .marketing-home .phone-whole-open svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
html.phone-whole .marketing-home .phone-whole-close svg { width:13px;height:13px; }
html.phone-whole .marketing-home #exportOptionsScreen { position:absolute;inset:0;width:auto!important;height:auto!important;max-width:none;margin:0;padding:64px 70px 16px;display:flex;align-items:center; }
html.phone-whole .marketing-home #exportOptionsScreen[hidden] { display:none; }
html.phone-whole .marketing-home .export-options-screen ul { width:100%;height:auto;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:none;gap:10px;padding:0; }
html.phone-whole .marketing-home .export-options-screen li { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;text-align:center;border:1px solid #343a46;border-radius:12px;background:#202228; }
html.phone-whole .marketing-home .export-options-screen li:last-child { grid-column:auto; }
html.phone-whole .marketing-home .export-option-icon { width:30px;height:30px; }
html.phone-whole .marketing-home .export-options-screen strong { font-size:14px; }
html.phone-whole .marketing-home .export-option-caption { display:block;font-size:12px;line-height:1.3;color:#9aa4b4; }

/* Landscape keeps the explanation beside a stable picture, with chapters above both. */
@media (orientation:landscape) and (max-height:540px) {
 html.is-iphone:not(.phone-whole) .marketing-home .example { grid-template-columns:minmax(0,1fr) clamp(190px,27vw,250px);grid-template-rows:32px minmax(0,1fr);gap:8px 14px; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-panel { display:contents; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-steps { grid-column:1 / -1;grid-row:1;display:flex;flex-direction:row;gap:6px;overflow-x:auto;min-height:0; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-steps button { flex:1;min-width:max-content;min-height:30px;max-height:30px;padding:3px 7px; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-steps strong { font-size:12px;white-space:nowrap; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-steps button>span:first-child,
 html.is-iphone:not(.phone-whole) .marketing-home .example-steps small { display:none; }
 html.is-iphone:not(.phone-whole) .marketing-home .capture-stage { grid-column:1;grid-row:2; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-caption { grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px;min-height:0;overflow:hidden;padding:0;border:0; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-caption>div:first-child { display:block;height:auto;min-height:0;overflow:auto; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-caption strong { display:block;font-size:15px;line-height:1.3;white-space:normal; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-caption p { display:block;height:auto;font-size:13px;line-height:1.4;margin:6px 0 0;color:#b3bac8; }
 html.is-iphone:not(.phone-whole) .marketing-home .slide-controls { flex:none;display:flex;flex-wrap:nowrap;height:44px;min-height:44px;gap:6px; }
 html.is-iphone:not(.phone-whole) .marketing-home #examplePlayback { width:44px;min-width:44px; }
 html.is-iphone:not(.phone-whole) .marketing-home .example-skip { min-width:44px; }
}
/* Whole screen keeps context visible even after its transport buttons fade. */
html.phone-whole .marketing-home .capture-stage { bottom:88px; }
html.phone-whole .marketing-home .example-caption>div:first-child { display:block;left:54px;right:54px;top:auto;bottom:8px;max-width:none;height:64px;min-height:0;padding:6px 12px;border:0;border-radius:8px;overflow:auto;opacity:1;pointer-events:auto; }
html.phone-whole .marketing-home .example-caption strong { white-space:normal;font-size:13px; }
html.phone-whole .marketing-home .example-caption p { display:block;height:auto;margin:3px 0 0;font-size:12px;line-height:1.4;color:#c1c9d7; }
html.phone-whole.phone-controls-off .marketing-home .example-caption>div:first-child { opacity:1;pointer-events:auto; }
html.phone-whole .marketing-home .phone-whole-tip { bottom:94px; }

/* The same positioning model is required before and after a physical phone rotation. */
html.phone-whole { scroll-snap-type:none; }
html.phone-whole .marketing-home .example-panel { top:var(--phone-viewport-top,0px);left:var(--phone-viewport-left,0px);width:var(--phone-viewport-width,100vw);height:var(--phone-viewport-height,100dvh);transform:none; }
html.phone-whole .marketing-home .capture-stage { display:block; }
html.phone-whole .marketing-home #exampleCapture { position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;border:0;border-radius:0;box-shadow:none; }
@media (orientation:portrait) {
 html.phone-whole .marketing-home .example-panel { width:var(--phone-viewport-height,100dvh);height:var(--phone-viewport-width,100vw);transform-origin:0 0;transform:translateX(var(--phone-viewport-width,100vw)) rotate(90deg); }
}
@media (orientation:landscape) and (max-height:540px) {
 html.is-iphone:not(.phone-whole) .marketing-home .product-screen { height:var(--phone-viewport-height,100dvh); }
}