/* v16 middle of the page after the TradePA comparison: what the master says, in a bubble, over the real app screen. */
/* Screens are frames of the 25.10 screencast on demo data (assets/screens/*.webp, 600x1300). */
.say-v16{padding:96px 0 72px}
.say-intro{max-width:1000px}
.say-lead{font-size:18px;line-height:1.6;color:var(--ink,#22342E);margin:22px 0 0;max-width:600px}
.say-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:52px}
.say-card h3{margin:24px 0 8px!important}
.say-card>p{font-size:17px;line-height:1.6;color:var(--ink,#22342E);margin:0;max-width:340px}

/* dark tile with the phone rising from the bottom and the spoken phrase on top */
.say-tile,.flow-tile{position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(120% 90% at 50% 18%,#1E4A3E 0%,#0B2A25 55%,#061B19 100%)}
.say-tile{aspect-ratio:4/5;display:flex;flex-direction:column;padding:18px}
.say-bubble{position:relative;z-index:2;flex:none;margin:0;padding:12px 15px 14px;border:1px solid #ffffff2e;border-radius:15px;background:#ffffff1c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F2F7F4;font-size:15px;font-weight:600;line-height:1.45}
.say-you{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--yellow);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.say-you:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px #FFDC2533}
.say-phone{position:absolute;left:50%;width:60%;border:7px solid #0B0F0E;border-radius:34px;overflow:hidden;background:#0B0F0E;box-shadow:0 30px 60px #0008,0 0 0 1px #ffffff18}
.say-phone img{display:block;width:100%;height:auto;max-width:none}
/* in the tile the phone follows the bubble and runs off the bottom edge */
.say-tile .say-phone{position:relative;left:auto;flex:none;margin:26px auto 0;transform:rotate(-3deg)}
.say-card:nth-child(2) .say-tile .say-phone{transform:rotate(2.5deg)}
.say-card:nth-child(3) .say-tile .say-phone{transform:rotate(-1.5deg)}

/* rows: copy on one side, the phone with a white callout of what is on the screen on the other */
.flow-v16 .flow-rows{display:grid;gap:80px;margin-top:56px}
.flow-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.flow-row-flip .flow-copy{order:2}
.flow-label{margin:0 0 14px;color:#3F6B57;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
#everyday .flow-copy h3{font-size:clamp(28px,3vw,42px)!important;line-height:1.04!important;margin:0}
.flow-copy>p:not(.flow-label){font-size:18px;line-height:1.6;color:var(--ink,#22342E);margin:18px 0 0;max-width:470px}
.flow-tile{aspect-ratio:5/4}
.flow-tile .say-phone{top:8%;width:44%;transform:translateX(-50%) rotate(-2deg)}
.flow-row-flip .flow-tile .say-phone{transform:translateX(-50%) rotate(2deg)}
.flow-callout{position:absolute;z-index:2;left:5%;bottom:10%;max-width:52%;margin:0;padding:14px 16px;border-radius:14px;background:#fff;color:var(--green);box-shadow:0 18px 40px #0005;font-size:14px;line-height:1.45}
.flow-callout b{display:block;margin-bottom:4px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#3F6B57}
.flow-row-flip .flow-callout{left:auto;right:5%}

@media(max-width:1000px){
 .say-v16{padding:72px 0 56px}
 .say-grid{gap:18px}
 .say-tile{padding:12px}
 .say-bubble{padding:10px 12px 11px;font-size:13px}
 .say-tile .say-phone{margin-top:18px}
 .say-tile .say-phone,.say-card:nth-child(2) .say-tile .say-phone,.say-card:nth-child(3) .say-tile .say-phone{width:66%;border-width:5px;border-radius:26px}
 .flow-row{gap:40px}
 .flow-callout{font-size:13px;padding:12px 13px}
}
@media(max-width:860px){
 .say-grid{grid-template-columns:minmax(0,1fr);max-width:520px;gap:36px}
 .say-tile{aspect-ratio:1/1}
 .say-bubble{font-size:15px}
 .say-tile .say-phone,.say-card:nth-child(2) .say-tile .say-phone,.say-card:nth-child(3) .say-tile .say-phone{width:52%}
}
@media(max-width:700px){
 .say-v16{padding:56px 0 44px}
 .say-lead,.say-card>p,.flow-copy>p:not(.flow-label){font-size:16px}
 .say-tile{aspect-ratio:5/6}
 .say-tile .say-phone,.say-card:nth-child(2) .say-tile .say-phone,.say-card:nth-child(3) .say-tile .say-phone{width:60%}
 .flow-v16 .flow-rows{gap:52px;margin-top:40px}
 .flow-row{grid-template-columns:minmax(0,1fr);gap:22px}
 .flow-row-flip .flow-copy{order:0}
 .flow-tile{aspect-ratio:1/1}
 .flow-tile .say-phone{width:56%}
 .flow-callout{max-width:72%;bottom:7%}
}
@media(max-width:360px){.say-bubble{font-size:13px}.flow-callout{font-size:12px}}