/* "Where the fee goes" iceberg, owner-approved and locked 2026-10-28 (Codex family-c/iceberg-v002, APPROVED-LOCK.json).
   Site placement of the locked style.css: every rule scoped to .dio-iceberg, ids prefixed ib-, the page's own wrapper padding and
   body rules dropped, h1 shown as the component title (h3). Values are unchanged. Nunito Sans comes from the site's fonts.css.
   Breakpoints follow the component's own width (container queries), not the screen: it sits in the answer header box, which is
   about 390 px wide beside the question on a computer (Daniel 2026-10-28), so it takes its phone layout and phone art there. */
.dio-iceberg{--font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--navy:#2F4452;--steel:#4C7288;--mineral:#F5F7F7;--orange:#ED873C;color:var(--navy);background:#fff;font-family:var(--font);font-synthesis:none;max-width:1080px;margin:0 auto;container-type:inline-size}
.dio-iceberg *{box-sizing:border-box}
.dio-iceberg .ib-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.dio-iceberg .ib-title{font-family:var(--font);color:var(--navy);font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.02em;margin:0}
.dio-iceberg .controls{display:flex;gap:10px}.dio-iceberg .controls[hidden]{display:none}
.dio-iceberg button{font:500 14px/1.2 var(--font);color:var(--navy);background:#fff;border:1px solid #a9b8bf;min-height:48px;min-width:88px;padding:10px 16px;border-radius:2px;cursor:pointer}
.dio-iceberg button:hover{border-color:var(--navy);background:#f1f5f6}.dio-iceberg button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.dio-iceberg button[aria-pressed=true]{background:#e6edf0;border-color:var(--steel)}.dio-iceberg button:disabled{cursor:default;opacity:.6}
.dio-iceberg figure{margin:0;background:var(--mineral)}
.dio-iceberg .price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:10px 30px;padding:21px 18px 0;font-size:16px;font-weight:400}
.dio-iceberg .price>span{white-space:nowrap}.dio-iceberg .price strong{font-size:25px;font-weight:600;letter-spacing:-.03em}
.dio-iceberg .scene{position:relative;isolation:isolate;height:600px;overflow:hidden;--water-y:93.25%;background:linear-gradient(#f5f7f7 0%,#edf3f5 100%)}
.dio-iceberg .ice{position:absolute;inset:0;z-index:1;display:block}.dio-iceberg .ice img{width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:fill;display:block;border-radius:0}.dio-iceberg .ice .ice-phone{display:none}
.dio-iceberg .visible-cost{position:absolute;z-index:2;top:17.4%;font-size:17px;line-height:1.25;font-weight:500}
.dio-iceberg .surface-cost{left:64%;white-space:nowrap}
.dio-iceberg .costs{position:absolute;inset:0;z-index:2}
.dio-iceberg .cost{position:absolute;left:50%;top:calc(var(--y)/740*100%);width:420px;max-width:78%;text-align:center;transform:translate(-50%,-50%);font-size:19px;font-weight:500;line-height:1.25;text-wrap:balance;text-shadow:0 1px 1px #ffffffbb}
.dio-iceberg .water{position:absolute;z-index:3;top:var(--water-y);left:0;width:100%;height:100%;will-change:top}
.dio-iceberg .water svg{height:100%;width:100%;display:block;overflow:visible}
.dio-iceberg .surface-motion{transform-origin:center;animation:ib-ripple 5s ease-in-out infinite alternate;animation-play-state:paused}
.dio-iceberg .scene[data-mode=playing] .surface-motion{animation-play-state:running}
@keyframes ib-ripple{from{transform:translateX(-9px)}to{transform:translateX(9px)}}
.dio-iceberg .old-waterline{position:absolute;z-index:2;left:2.5%;right:2.5%;top:26.35%;height:0;color:var(--navy);font-size:13px;line-height:1.2;font-weight:700}
.dio-iceberg .old-waterline span{position:absolute;left:0;max-width:26%}.dio-iceberg .old-waterline span:first-child{bottom:8px}.dio-iceberg .old-waterline span:last-child{top:8px}
.dio-iceberg .old-waterline i{position:absolute;left:0;right:0;top:0;height:1.5px;background:repeating-linear-gradient(to right,#547181aa 0 4px,transparent 4px 10px)}
.dio-iceberg .narration{margin:0;min-height:74px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:17px;font-weight:500;line-height:1.5;padding:18px 30px;background:white;color:var(--navy)}
.dio-iceberg figcaption{background:white;text-align:center;color:#566874;font-size:14px;font-weight:400;line-height:1.5;padding:7px 20px 0}
.dio-iceberg .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@container (min-width:1000px){.dio-iceberg .scene{height:min(66vh,640px)}}
@container (max-width:700px){.dio-iceberg .ice .ice-phone{display:block}.dio-iceberg .ice .ice-desktop{display:none}.dio-iceberg .ib-head{gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}.dio-iceberg .ib-title{font-size:25px}.dio-iceberg .controls{gap:8px}.dio-iceberg button{font-size:14px;min-width:86px;padding-inline:14px}.dio-iceberg .price{gap:8px 18px;padding:18px 10px 3px;font-size:14px}.dio-iceberg .price strong{font-size:22px}.dio-iceberg .scene{height:570px}.dio-iceberg .visible-cost{font-size:15px;top:17.4%}.dio-iceberg .surface-cost{left:auto;right:5%}.dio-iceberg .cost{font-size:16px;width:80%;max-width:none;line-height:1.35}.dio-iceberg .old-waterline{left:2%;right:2%;font-size:12px}.dio-iceberg .old-waterline span{max-width:none;white-space:nowrap}.dio-iceberg .narration{min-height:91px;padding:16px 18px;font-size:16px}.dio-iceberg figcaption{font-size:13px;padding:4px 2px 0}}
@container (max-width:380px){.dio-iceberg .scene{height:565px}.dio-iceberg .cost{font-size:14.5px;width:83%}.dio-iceberg .price{column-gap:12px;font-size:13px}.dio-iceberg .price strong{font-size:21px}.dio-iceberg .old-waterline{font-size:12px}.dio-iceberg .visible-cost{font-size:14px}.dio-iceberg .surface-cost{right:3%}}
@media(prefers-reduced-motion:reduce){.dio-iceberg .surface-motion{animation:none!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-iceberg .surface-motion{animation:none!important}
@media print{.dio-iceberg .controls{display:none!important}.dio-iceberg .scene{height:550px}}
/* 2026-11-11 audit, animation controls: one look and one place on every animation. The row is a right-aligned row above the figure, 12px above it; each control has the
   finish of the site's animation toggle (answer-anim.css .ans-anim-toggle): 44px tall, 2px steel border, white ground, 6px corners, ink focus ring,
   mist fill when "Still view" is on. Looks and placement only: no markup, wording, timing or logic changes. The doubled root class outranks the
   widget's older control rules above, which stay as they were. */
.dio-iceberg.dio-iceberg .controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 0 auto;padding:0;border:0}
.dio-iceberg.dio-iceberg .controls[hidden]{display:none}
.dio-iceberg.dio-iceberg .controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-iceberg.dio-iceberg .controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-iceberg.dio-iceberg .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-iceberg.dio-iceberg .controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-iceberg.dio-iceberg .controls button:disabled{opacity:.55;color:#203846;cursor:default}
.dio-iceberg.dio-iceberg .ib-head{flex-wrap:wrap;margin-bottom:12px}
@media print{.dio-iceberg.dio-iceberg .controls{display:none!important}}
/* end animation controls */