:root
{
    --darkAccent:           #34779C;
    --lightAccent:          #53BDFD;
/*  --softAccent:           #34779C80;*/
    --softAccent:           #99BBCD;
    --softerAccent:         #34779C40;
    --faintAccent:          #34779C17;
    --lightBase:            #FAFAF9;
/*  --darkBase:             #484540;*/
    --softDark:             #000000b0;
    --fadeDark:             #777776;
    --fadeLight:            #EBE9E7;
    --codeLight:            #F0F0EF;
    --bubble:               var(--codeLight);
    --lightText:            white;
    --darkText:             black;
    --menuBase:             white;
    --highlighter:          white;          /* highlight marker = inline code */
    --backedOff:            #404040;
    --blueBubble:           #1166fe;
    
    /* gradient stops, but pulled in a bit */
/*  --lightFlat1:           #F5F4F1;*/
/*  --lightFlat2:           #E2E0DE;*/
    --darkFlat1:            #42413E;
    --darkFlat2:            #232321;
    
/*  --lightGradient:        radial-gradient(circle, #FFFEFB, #E2E0DE);*/
    /*TODO: might need to replace this with something that operates at a fixed height */
    /*note css spec allows <length> in colour stops as well as % */
    --darkGradient:         linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 15%), linear-gradient(rgba(0,0,0,0) 85%, rgba(0,0,0,0.3) 100%), radial-gradient(circle, #5D5952, #3F3D39);
/*  --darkGradient2:        radial-gradient(circle, #6D6962, #4F4D49);*/
/*  --menuBase:             radial-gradient(circle, #FFFFFF, #EEEDEB);*/
/*  --flatGradient:         linear-gradient(to right, var(--lightFlat2), var(--lightFlat1), var(--lightFlat2));*/
    
    --glintShadow:          0px 1px  0.5px rgba(0,0,0, 0.1); /* inline code blocks */
    --glintShadow2:         0px 0.75px 1px rgba(0,0,0, 0.5); /* tag backgrounds */
    --glintShadow3:         0px -1px 0.5px rgba(0,0,0, 0.5); /* tag text */
    --bubbleShadow:         0px 1px  0.5px rgba(0,0,0, 0.2); /* speech bubbles */
    
    /* TODO: variants for weights instead of case-by-case? maybe point sizes too */
    --accentFont:           Futura, Gilroy;
    --codeFont:             "ui-monospace", "Andale Mono", "Courier New", monospace;
    --bodyFont:             "system-ui", "Helvetica", "Arial";
    
    --contentMargin:        3.25rem;
    --centreColumn:         768px;
}

@font-face 
{
    font-family:            'Gilroy';
    src:                    url('/i/font/gilroy-extrabold-webfont.woff2') format('woff2'),
                            url('/i/font/gilroy-extrabold-webfont.woff') format('woff');
    font-weight:            bold;
    font-style:             normal;
}


/* RESPONSIVENESS */

@media(max-width: 600px)
{
    :root
    {
        --contentMargin:    max(1rem, calc(3.25rem - ((600px - 100%))));
    }
}

@media(max-width: 28rem)
{       
    .menu li.spacer
    {
        display:            none;
    }       
}

@media(max-width: 375px)
{
    .splash h1
    {
        font-size:          1.7em;
    }
}

@media(max-width: 500px)
{
    .codeblock code
    {
        width:              calc(100vw - 3.5rem);
        overflow:           scroll;
    }
}

@media(min-width: 600px)
{
    .splash h1
    {
        font-size:          3.5em;
    }
}

/* DARK MODE */

@media(prefers-color-scheme: dark)
{
    :root
    {
        --lightBase:        #2D2B29;
/*      --darkBase:         #242220;*/
        --softAccent:       var(--lightAccent);
        --backedOff:        #d0d0d0;
        --menuBase:         black;
        --highlighter:      black; /* maybe? */
        --darkAccent:       var(--lightAccent);
        --darkText:         var(--lightText);
        --softDark:         #ffffffe0;
        --codeLight:        #1E2028;
        --bubble:           #3D3D3D;
/*      --darkText:     red;*/
        
        --darkGradient:         linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 15%), linear-gradient(rgba(0,0,0,0) 85%, rgba(0,0,0,0.3) 100%), radial-gradient(circle, #2D2B26, #1A1816);
        
        --glintShadow:          0px -1px 0.5px #53BDFD50; /* inline code blocks */
        --glintShadow2:         0px -1px 1px rgba(180,255,255, 1); /* tag backgrounds */
        --glintShadow3:         0px 1px 1px rgba(180,255,255, 1); /* tag text */
        --bubbleShadow:         0px -0.75px 0.5px 0.5px #53BDFD60; /* speech bubbles */
/*      --menuBase:         black;*/
    }
    body
    {
        color:              white;
    }
    .article .codeblock h4
    {
        color:              var(--darkFlat2);
    }
    .blurb cite::before
    {
        z-index:            -1;
    }
    
    /*
    :root
    {
        --lightBase:        var(--darkBase);
        --highlighter:      black;
        --softAccent:       #34779C;
        --darkAccent:       var(--lightAccent);
        --codeLight:        #1E2028;
        --darkGradient:     var(--darkGradient2);
        --lightGradient:    var(--darkGradient2);
        --menuBase:         radial-gradient(circle, #333, #222);
        --fadeDark:         var(--fadeLight);
        --softDark:         #ffffffc0;
        --lightFlat1:       var(--darkFlat1);
        --lightFlat2:       var(--darkFlat2);
    }
    body
    {
        color:              white;
    }
    body .menu
    {
/+      box-shadow:         none;+/
    }
    body .menu li
    {
        text-shadow:        none;
    }
    body .menu ul:first-child li.hilite
    {
        text-shadow:        0 0.5px 0.5px black;
    }   
    body .light h1 a, body .light h2 a, body .light h3 a, body .light h4 a
    {
        color:                  var(--lightText);
    }
    body .article .footmark
    {
        text-shadow:        0 0.5px 0.5px black;        
    }
    */
}

/* END DARK MODE */


/* TODO: high-contrast mode colour overrides */

body
{
    font-family:            var(--bodyFont);    
    background:             var(--lightBase);
/*  background:             var(--flatGradient);*/
    margin:                 0;
}

.wrapper
{
    padding-left:           env(safe-area-inset-left);
    padding-right:          env(safe-area-inset-right);
    margin:                 0;
    display:                flex;
    justify-content:        center;
}

.wrapper.light
{
/*  background:             #f7f7f7; todo: var-ise */
}
.wrapper.light.flat
{
/*  background:             var(--flatGradient);*/
}
.wrapper.light.flat.centred
{
    text-align: center;
}

.wrapper.dark
{
    color:                  var(--lightText);
    background:             var(--darkGradient);
}

.wrapper.topBar
{
    background:             var(--menuBase);
}

.wide-column
{
    padding-left:           env(safe-area-inset-left);
    padding-right:          env(safe-area-inset-right);
    margin:                 0;
}

.centreColumn
{
    flex:                   0 1 var(--centreColumn);
}
/*  .centreColumm.content
{
    padding:                1.5em var(--contentMargin);
    border: 1px solid red;
    display: block;
}
*/  
.menu
{
    font-family:            var(--accentFont);
    font-weight:            bold;
    font-size:              11pt;
    border-radius:          0px 0px 5px 5px;
    text-transform:         uppercase;
}
.menu.mainmenu
{
/*  border-bottom:          0.25rem solid var(--darkAccent);*/
/*  background:             var(--menuBase);*/
/*  box-shadow:             0px 15px 15px rgba(0,0,0,0.05);*/
/*  margin-bottom:          1.5rem;*/
    letter-spacing:         0.05em;
}
.menu.submenu
{
    margin-top:             0.5rem;
    margin-bottom:          0px;
/*  border-top:             0.25rem solid var(--darkAccent);*/
}
.menu.submenu ul { padding-bottom: 0; }

.menu ul
{
    display:                flex;
    justify-content:        center;
    flex-wrap:              wrap;
    margin:                 0;
    padding:                1.5em calc(var(--contentMargin) - 0.75em);
}
.menu ul:last-child
{
    padding-top:            0;
}
.menu ul:first-child
{
    padding-top:            1.5em;
}
.menu li
{
    display:                inline;
    color:                  var(--backedOff);
    padding:                0.25em 0.75em;
/*  text-shadow:            0 1px 1px white;*/
    flex:                   0 1 auto;
}
.menu li a 
{ 
    color:                  var(--backedOff); 
    border-radius:          5px;
}
.menu li a:hover, .menu ul:first-child li.hilite a:hover
{ 
    color:                  var(--darkText);
}
.menu ul:first-child li.hilite a 
{ 
/*  color:                  white;*/
    color:                  var(--softDark);
/*  border-bottom:          0.25rem solid var(--darkAccent);*/
}
.menu li.hilite::before
{
        content: "";
        width: 100%;
        height: 4px;
        display: block;
        background: var(--darkAccent);
        border-radius: 100px;
        position: relative;
        top: calc(100% + 0.25em);
        margin-top: -4px;
}
.menu li.hilite
{
    color:                  var(--darkAccent);
}
.menu ul:first-child
{
    justify-content:        space-evenly;
}
.menu ul:first-child li.hilite
{
/*  background:             var(--darkAccent);*/
/*  color:                  white;*/
    text-shadow:            none;
}
.menu ul li.hilite a
{
    color:                  var(--darkAccent);
}
.menu li.spacer
{
    flex:                   2 2 auto;
}
.menu li svg
{
    position:               relative;
    top:                    0.13em;
}

.topBarStrapline
{
    font-family:            var(--accentFont);
    font-weight:            bold;
    color:                  var(--fadeDark);
    text-transform:         uppercase;
    letter-spacing:         0.175em;
    line-height:            1.5em;  
    text-align:             center;
    max-width:              480px;
    margin:                 3em auto;
}

.bpa
{
    font-family:            Palatino, TrebuchetMS;
    font-style:             italic;
    font-weight:            bold;
}


.welcome
{
    text-align:             center;
    padding:                0 var(--contentMargin);
    color:                  var(--darkAccent);
    font-family:            var(--accentFont);
    font-size:              16pt;
    margin-bottom:          1.5rem;
}

h1, h2, h3, h4
{
    font-family:            var(--accentFont);
}
.light h1 a, .light h2 a, .light h3 a, .light h4 a
{
    color:                  var(--darkText);
}
.dark h1 a, .dark h2 a, .dark h3 a, .dark h4 a
{
    color:                  var(--lightText);
}
.article h2.compact, .article h3.compact
{
    margin-bottom:          0.3em;
}
.article h4.date
{
    margin-top:             0em;
    color:                  var(--fadeDark);
}

.light h1, .light h2
{
/*      text-shadow: 0 3px 5px rgba(0,0,0,0.1);*/
}
.dark h1, .dark h2, .dark h3, .dark h4
{
    text-shadow:            0 3px 5px black;
}
    
.presentation, .article
{
    margin:                 3em var(--contentMargin);
}
.presentation p, .splash p
{
    font-weight:            500;
    letter-spacing:         0.1em;
    margin-top:             0.5em;
    margin-bottom:          0.5em;
}
.presentation .small-icons p
{
    letter-spacing:         0.05em;
}
.presentation p:first-child, .splash p:first-child
{
    margin-bottom:          0.5em;
}
.light .presentation p, .light .splash p
{
    color:                  var(--fadeDark);
}
.dark .presentation p, .dark .splash p
{
    color:                  var(--fadeLight);
}
.presentation h1, .splash h1
{
    margin:                 0;
}   

ul.twoByTwo, ul.flexiGrid
{
    display:                flex;
    row-gap:                2em;
    column-gap:             2em;
    flex-wrap:              wrap;
    padding:                0 !important;
    justify-content:        space-between;
}
ul.flexiGrid
{
    row-gap:                2.5em;
    column-gap:             2.5em;
}
ul.twoByTwo li
{
    display:                inline;
    flex:                   1 0 calc((var(--centreColumn)/2) - 9em);
}
@media(min-width: 600px)
{
    ul.twoByTwo.spread li.odd
    {
        text-align:             right;
    }
}
ul.flexiGrid > li
{
    display:                inline;
    flex:                   1 0 300px;
}   
ul.flexiGrid > li ul li
{
    list-style-type:        disc;
}
ul.flexiGrid li.fullWidth
{
    flex:                   1 1 400px;
}   
ul.twoByTwo h2, ul.flexiGrid h2
{
    margin-bottom:          0;
}   
ul.twoByTwo h2 + p
{
    margin-top:             0.5rem;
    color:                  var(--fadeLight);
}

.footer
{
/*  margin:                 5em 0em 2em 0em;*/
    padding:                5em 0em 2em 0em;
    margin:                 0;
    color:                  var(--fadeDark);
    font-family:            var(--accentFont);
    min-height:             2em;
}
.footer-push
{
    min-height:             calc(100vh - 9em);
}
.small-icons IMG
{
    max-width:              3em;
}
.small-icons H2
{
    margin-top:             0em;
    margin-bottom:          0em;
}
.small-icons H2 + p
{
    margin-top:             0.25em;
}

/* Article */

a
{
    color:                  var(--darkAccent);
    text-decoration:        none;
}
a.button
{
    color:                  var(--darkText);    
}
.dark a
{
    color:                  var(--lightAccent); 
}
.dark a.button
{
    color:                  var(--lightText);
}

.bold-button
{
    background:             var(--darkAccent);
    display:                block;
    padding:                1px 0px;
    border-radius:          4em;
    margin:                 1.75em;
    text-align:             center;
    font-weight:            600;
}
div.bold-button p { margin: 0.3em; padding: 0; }
.bold-button a
{
    color:                  white;
    text-shadow:            0px 1px  0.5px rgba(0,0,0, 0.25);
    display:                block;
}
a.bold-button
{
    color:                  white;
    text-shadow:            0px 1px  0.5px rgba(0,0,0, 0.25);
}
a.bold-button
{
    display:                inline-block;
    padding:                0.5em 1em;
    margin:                 0.5em 0em;
}

.article.article-index h2
{
    margin-top:             2.5em;
}

.article h2, .article h3, .article h4
{
    margin-top:             1.5em;
    opacity:                0.75;
}
.dark .article h2
{
    opacity:                1;
}
@media(prefers-color-scheme: dark)
{
    .article h2, .article h3, .article h4
    {
        opacity:            0.9;
    }
}

.article p
{
    line-height:            1.5em;
    
}
.article > blockquote
{
    margin-left:            0;
    margin-right:           0;
/*  border-left:            0.5em solid var(--softAccent);*/
/*  padding-left:           0.5em;*/
    border-radius:          5px;
    background:             var(--bubble);
    padding:                0;
}
.article > blockquote p
{
    padding:            0.5em;
}
/*.article > blockquote::before
{
    content: "";
    min-height: 0.25em;
    height: 100%;
    width: 4px;
    display: block;
    background: var(--darkAccent);
    border-radius: 100px;
    float: left;
    margin-left: -4px;
    position: relative;
    left: -0.25em;
}
*/
.article var
{
    font-family:            var(--codeFont);
    font-size:              0.85em;
    font-style:             normal;
    background:             var(--highlighter);
    box-shadow:             var(--glintShadow);
    border-radius:          3px;
    padding:                2px 0.45em;
/*  word-wrap: anywhere;*/
    overflow-wrap: anywhere;
}
.article var + var
{
    margin-left:            -2px;
}
code
{
    font-family:            var(--codeFont);
    white-space:            pre-wrap;       
}
.codeblock
{
    margin:                 2em 0em;
/*  display:                block;*/ /*TODO put back */
}
.codeblock h4, .codeblock h5
{
    font-size:              1rem;
    display:                inline;
}
.codeblock h4
{
    padding-right:          0.5em;
    padding:                0.25em 0.75em;
    border-radius:          5px;
    margin-right:           0.5em;
    text-shadow:            var(--glintShadow3);
    box-shadow:             var(--glintShadow2);
    font-family:            var(--bodyFont);
    background:             var(--softAccent);
    color:                  white;
}
.codeblock h5
{
    opacity:                0.85;
}
.codeblock code
{
    margin-top:             1em;
    display:                block;
    background:             var(--codeLight);
    border-radius:          5px;
    padding:                0em 1em;
/*      overflow:               scroll;*/
    overflow-wrap:          break-word;
    max-width:              calc(var(--centreColumn) - (2em + (var(--contentMargin) * 2)));
}

.reader-only
{
    position:               absolute;
    left:                   -1000px;
}
.article .footmark
{
    vertical-align:         top;
    font-size:              0.65em;
    font-weight:            bold;
    background-color:       var(--darkAccent);
    color:                  var(--lightText);
    padding:                1px 4px;
    border-radius:          105px;
    margin:                 0px 1px;
    position:               relative;
    top:                    -0.35em;
}
.dark .article .footmark /* rarely used, but occasionally on product pages */
{
    background-color:       var(--lightAccent);
    text-shadow:            0px 1px  0.5px rgba(0,0,0, 0.25);
}
.article .footreturn
{
    font-size:              1.3em;
/*  position:               relative;*/
    vertical-align:         bottom;
}
.article hr
{
    border:                 none;
    background-color:       var(--darkAccent);
    height:                 1px;
    opacity:                0.25;
    margin:                 2em 0em;
}
.article .footnote
{
    font-size:              0.75em;     
}
.article .footnote p
{
    opacity:                0.85;
}
.article .colophon
{
    display:                grid;
    grid-template-columns:  1fr 1fr 1fr;
    opacity:                0.825;
    place-items:            justify;
    margin-top:             3em;
    border-top:             1px dotted var(--softAccent);
}
.article .colophon h3
{
    opacity:                0.7;
    margin-bottom:          0.25rem;
}
.article .colophon p
{
    margin:                 0.25em 0rem;
}
.article ul, .article ol
{
    padding-left:           1.25em;
}
.article img
{
    max-width:              100%;
    border-radius:          5px;
}
.article .inlined img
{
    height:                 1em;
}
.article img.icon
{
    width:                  128px;
    height:                 128px;
}
.article .inlined.discontinued img
{
    position:               relative;
    top:                    0.1em;
}
.article .support-grid
{
    display:                flex;
    justify-content:        center;
    flex-wrap:              wrap;
    row-gap:                1em;
    margin-bottom:          3em;
}
.article .support-grid h3
{
}
.article .support-grid a
{
    flex:                   1 0 200px;
    text-align:             center;
}
.article ol.toc
{
    padding-left:           0;
    margin-top:             2em;
}
.article ol.toc li
{
    line-height:            1.75em;
    list-style:             none;
}
.article ol.toc li:before
{
    content:                counter(list-item);
    font-family:            var(--accentFont);
    min-width:              1.3em;
    padding-right:          0.5em;
    display:                inline-block;
    color:                  var(--softDark);
/*  font-weight:            bold;
    opacity:                0.7;*/
    text-align:             right;
}

.article video
{
    border-radius:          5px;
/*    width:                  100%;
*/}

/* Product pages */

.hilite-grid
{
    display:                flex;
    flex-wrap:              wrap;
    justify-content:        center;
    row-gap:                1em;
    column-gap:             1.5em;
    margin:                 1.5em 0em;
}

.hilite-grid .grid-item
{
    flex:                   1 0 320px;  
}

.app-store-badge
{
/*  min-width:              200px;*/
    display:                inline-block;
    margin:                 0.5em 0em;
}

.handwritten
{
    font:                   12pt var(--accentFont) bold;
    color:                  var(--fadeDark);
    font-weight:            500;
    text-transform:         uppercase;
    letter-spacing:         0.15em;
    line-height:            1.5em;
}

.menu + .handwritten
{
    text-align:             center;
    margin:                 2rem 1em;
}

/* Front splash */

.splash
{
    margin:                 3rem 1rem;
}

.splitColumns
{
    display:                flex;   
/*  grid-template-columns:  1fr 1fr;*/
}

.splitColumns .left
{
    text-align:             right;
    flex:                   0 0 50%;
}
.splitColumns .right
{
    text-align:             left;
    flex:                   0 0 50%;
}

/* blurbs */

.blurb-grid
{
    display:                flex;
    flex-wrap:              wrap;
    gap:                    2em;
    margin:                 2em 0em;
    justify-content:        center;
    align-items:            stretch;
}
.wide-column .blurb-grid
{
    max-width:              1024px;
    margin-left:            auto;
    margin-right:           auto;
}

.blurb
{
/*  flex: 1 1 auto;*/
    max-width: 19em;
    height: 100%;
}


.blurb blockquote
{
    min-height: 7em;
    display: grid;
    align-items: center;
    margin: 0em;
    padding: 0.5em;
    border-radius: 5px;
    background: var(--bubble);
/*  font-family: var(--accentFont);*/
/*  font-size: 1.1rem;*/
/*  border-bottom: 1.5px solid var(--darkAccent);*/
    box-shadow: var(--bubbleShadow);
}
.blurb blockquote p:first-child
{
    margin-top: 0px;
}
.blurb blockquote p:last-child
{
    margin-bottom: 0px;
}
.dark .blurb blockquote
{
    color: var(--backedOff);
}
.blurb cite::before
{
    content: " ";
    display: block;
    width: 0px;
    height: 0px;
    border-top: 7px solid var(--bubble);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: relative;
    left: 10px;
    padding-bottom: 4px;
    filter: drop-shadow(var(--bubbleShadow))    
}

.blurb cite
{
    display: block;
    border-radius: 0rem 0rem 0.33rem 0.33rem;
    padding: 0em 0.5rem 0.25rem 0.5rem;
    color: var(--backedOff);
    font-style: normal;
    margin: 0;
}


/* misc widgets */

li.file-icon
{
    text-align: center;
}

li.file-icon p:first-child::before
{
    content:    attr(ext);
    position:   absolute;
    color:      var(--darkAccent);
    margin-top: 35px;
    width:      51px;
}

li.file-icon p:first-child
{
    margin-top: 1em;
}

li.file-icon p
{
    margin:     0;
}

li.file-icon .file-size
{
    opacity:    0.7;    
    font-size:  0.85em;
}

/* gallery */

.gallery
{
    display:                flex;
    flex-wrap:              nowrap;
    overflow-x:             auto;
    overflow:               scroll;
    align-items:            center;
    padding-bottom:         2rem;
    padding-left:           calc(var(--contentMargin) + ((100vw - var(--centreColumn))/2));
}
@media(prefers-color-scheme: light)
{
    .gallery.bakedInDevice
    {
        background:             white;
    }
}

.gallery div
{
    display:                grid;
    object-fit:             cover;
    width:                  100%;
    padding-right:          1rem;
}

.gallery div img
{
    max-width:              60vw;
    padding-bottom:         1em;
}
.gallery.iphone div img
{
    max-width:              min(80vh, 90vw, 512px);
    max-height:             min(80vh, 512px);
}
/*@media(min-width: 512px)
{
    .gallery.iphone div img
    {
        max-width:          min(60vh, 60vw);
        max-height:         min(60vh, 60vw);
    }
}*/
.gallery div .title
{
    text-align:             center;
    width:                  100%;
    min-height:             3em;
    font-weight:            bold;
}
.gallery div .subtitle
{
    text-align:             center;
    width:                  100%;
    min-height:             2em;
}
.gallery.extraHeight div .subtitle
{
    min-height:             3em;    
}

.gallery.ipad.framed div img
{
    margin-top:             4px;
    border-radius:          1.75em;
    border:                 1em solid #444;
    padding-bottom:         0em;
    margin-bottom:          1.5em;
    box-shadow:             0px 10px 20px rgba(0,0,0, 0.3);
}
.gallery.iphone.framed div img
{
    margin-top:             4px;
    border-radius:          2.75em;
    border:                 0.75em solid black;
    padding-bottom:         0em;
    margin-bottom:          1.5em;
    box-shadow:             0px 10px 10px rgba(0,0,0, 0.3);
}
.gallery.mac.framed div img
{
    margin-top:             4px;
    border-radius:          1em;
    padding:                0;
    border:                 0.75rem solid black;
    margin-bottom:          calc(96px + 1rem);
}
.gallery.mac.framed div .title
{
    position:               relative;
}
.gallery.mac.framed div .title::before
{
    content:                ' ';
    display:                block;
    width:                  150px;
    height:                 96px;
    border-radius:          0px 0px 5px 5px;
    position:               absolute;
    left:                   calc(50% - 75px);
    top:                    calc(-96px - 1rem - 0.25rem);
    z-index:                -1;
    background-image:       linear-gradient(
        to bottom, 
        rgb(57% 57% 57%) 0%,
        
        rgb(77% 77% 77%) 16%,
        rgb(80% 80% 80%) 20%,
        rgb(81% 81% 81%) 24%,

        rgb(66% 66% 66%) 59%,
        rgb(82% 82% 82%) 62%,
        rgb(68% 68% 68%) 65%,

        rgb(87% 87% 87%) 90%,
        rgb(70% 70% 70%) 93%,
        
        rgb(59% 59% 59%) 100%
    );
    box-shadow: inset 0 0px 10px -4px rgb(0,0,0,50%);
}
.gallery.mac.framed div .title::after
{
    content:                ' ';
    display:                inline-block;
    width:                  96px;
    height:                 96px;
    border-radius:          0px 0px 5px 5px;
    position:               absolute;
    left:                   calc(50% - 48px);
    top:                    calc(10px - 96px - 1rem - 0.25rem);
    background:             linear-gradient(
        -45deg,
        rgb(0,0,0,0%),
        rgb(0,0,0,20%),
        rgb(0,0,0,0%)
    );
    filter:                 blur(16px);
    transform:              scale(0.95, 0.65) rotate(45deg);
}

@media(prefers-color-scheme: dark)
{
    .gallery.ipad.framed div img
    {
        border:                 1em solid black;
        box-shadow:             0px 10px 20px rgba(0,0,0, 0.5), 0px -2px 3px var(--lightAccent);
    }
    .gallery.iphone.framed div img
    {
        box-shadow:             0px 10px 20px rgba(0,0,0, 0.5), 0px -2px 3px var(--lightAccent);
    }
    .gallery.mac.framed div img
    {
        box-shadow:             0px 5px 10px rgba(0,0,0, 0.25), 0px -1px 1.5px var(--lightAccent);
    }
    .gallery.mac.framed div::before
    {
        opacity: 0.1;
    }
}

/* video links */

a.video-link
{
    display:                grid;
    grid-template-columns:  5rem 1fr 6rem;
    align-items:            center;
    min-height:             3.75rem;
}

a.video-link:before
{
    content:                " ▶︎";
    white-space:            pre;
    width:                  5rem;
    height:                 100%;
    display:                block;
    background:             var(--bubble);
    border-radius:          5px;
    color:                  var(--darkAccent);
    display:                flex;
    align-items:            center;
    justify-content:        center; 
}

.video-link .video-info
{
    background:             var(--bubble);
    border-radius:          5px 0px 0px 5px;
    margin-left:            3px;
    padding-left:           0.5rem;
    height:                 100%;
    display:                grid;
    align-items:            center;
}

.video-link .video-info h4
{
    margin:                 0;
    color:                  var(--darkText);
}
.video-link .video-info .duration
{
    margin:                 0;
    color:                  var(--softDark);
    font-family:            var(--bodyFont);
    font-size:              0.75em;
}
/*.video-link .video-info .duration:before
{
    content:                "  ";
    white-space:            pre;
}
*/
.video-link .watch-notice
{
    font-size:              0.75em;
    text-align:             right;
    background:             var(--bubble);
    border-radius:          0px 500px 500px 0px;
    height:                 100%;
    padding-right:          1.5rem;
    display:                flex;
    align-items:            center;
    justify-content:        center; 
}

/* Product specific */

.topper
{
    float: right;
    height: 100%;
    display: grid;
    align-items: center;
    margin-right: 2.5rem;
}
@media(max-width: 500px)
{
    .topper
    {
        margin-right: 1em;
    }
}
@media(max-width: 350px)
{
    .topper
    {
        display: none;
    }
}

.wrapper.dark.ferrite
{
    background:             linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 15%), linear-gradient(rgba(0,0,0,0) 85%, rgba(0,0,0,0.3) 100%), url("/i/hero/ferrite-background.jpg") no-repeat 85%/cover, #444;
}
.wrapper.dark.ferrite .presentation p, .wrapper.dark.ferrite .splash p
{
    color:                  #FEF8E4D0;
}

.wrapper.dark.hokusai::before, .wrapper.light.hokusai::before 
{
  content:                  ' ';
  display:                  inline-block;
  position:                 absolute;
  width:                    100%;
  top:                      0;
  bottom:                   0;
  opacity:                  0.1;
  mix-blend-mode:           multiply;
  background-image:         url('/i/hero/hokusai-background.jpg');
  background-repeat:        no-repeat;
  background-position:      50%;
  background-size:          cover;
}
.wrapper.dark.hokusai, .wrapper.light.hokusai
{
    background:             #ffeedd50;
    position:               relative;
}
.wrapper.dark.hokusai .centreColumn, .wrapper.light.hokusai .centreColumn
{
    position:               relative;
}
@media(prefers-color-scheme: light)
{
    .wrapper.dark.hokusai .presentation h1
    {
        color:              var(--darkText);
        text-shadow:        none;
    }
    .wrapper.dark.hokusai .presentation p,  .wrapper.light.hokusai .presentation p
    {
        color:              var(--softDark);
    }
    .wrapper.dark.hokusai
    {
        border-top:         1px solid #e8e8e8;
        border-bottom:      1px solid #e3e3e3;
    }
    .bold-button a, a.bold-button
    {
        text-shadow:        none;
    }
}
@media(prefers-color-scheme: dark)
{
    .wrapper.dark.hokusai::before,  .wrapper.light.hokusai::before
    {
        opacity:            0.75;
        mix-blend-mode:     overlay;
    }
    .wrapper.dark.hokusai,  .wrapper.light.hokusai
    {
        background:         var(--darkGradient);    
    }
    .wrapper.dark.hokusai p,    .wrapper.light.hokusai p
    {
        color:              var(--lightAccent);
    }
}

.wrapper.dark.mitosynth
{
    color:                  var(--lightText);
    background:             linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 15%), linear-gradient(rgba(0,0,0,0) 85%, rgba(0,0,0,0.3) 100%), radial-gradient(circle, #476375, #2F2D49);
}
.wrapper.dark.grain-science
{
    background:             linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 15%), linear-gradient(rgba(0,0,0,0) 85%, rgba(0,0,0,0.3) 100%), linear-gradient(#222930 15%, #4A2E2D 30%, #4A2E2D 70%, #222930 85%);
}
.wrapper.dark .presentation .app-store-badge
{
    margin-bottom:          0;
}

.wrapper.dark.mitosynth .presentation p, .wrapper.dark.grain-science .presentation p
{
    color:                  #FEF6D9;
}

.wrapper.dark.transcriptionist, .wrapper.light.transcriptionist
{
    background:             linear-gradient(rgb(217,220,229) 0%, rgb(237,242,244) 4%, rgb(247,248,249) 10%, rgb(216, 224, 230) 100%);
    position:               relative; /* for benefit of overlay */
}
.wrapper.dark.transcriptionist::before, .wrapper.light.transcriptionist::before 
{
  content:                  ' ';
  display:                  inline-block;
  position:                 absolute;
  width:                    100%;
  top:                      0;
  bottom:                   0;
  opacity:                  0.5;
  mix-blend-mode:           overlay;
  background-image:         url('/i/hero/transcriptionist-background.jpg');
  background-repeat:        no-repeat;
  background-position:      50%;
  background-size:          cover;
}
.wrapper.dark.transcriptionist .centreColumn, .wrapper.light.transcriptionist .centreColumn
{
    z-index: 1;
}


:root
{
    --scripIconBlurType: url(#blurLight);
    --scripIconGlintType: url(#glint);
    --scripIconShadow: #0C2B4C;
    --scripIconLight: var(--darkAccent);
}
@media(prefers-color-scheme: light)
{
    .wrapper.dark.transcriptionist .presentation h1
    {
        color:              var(--darkText);
        text-shadow:        none;
    }
    .wrapper.dark.transcriptionist .presentation p,  .wrapper.light.hokusai .presentation p
    {
        color:              var(--softDark);
    }
    .wrapper.dark.transcriptionist
    {
        border-top:         1px solid #e8e8e8;
        border-bottom:      1px solid #e3e3e3;
    }
}
@media(prefers-color-scheme: dark)
{
    .wrapper.dark.transcriptionist::before,  .wrapper.light.transcriptionist::before
    {
        opacity:            0.75;
        mix-blend-mode:     overlay;
    }
    .wrapper.dark.transcriptionist,  .wrapper.light.transcriptionist
    {
        background:         var(--darkGradient);    
    }
    .wrapper.dark.transcriptionist::before, .wrapper.light.transcriptionist::before 
    {
        opacity:            0.25;
    }
    .wrapper.dark.transcriptionist p,    .wrapper.light.transcriptionist p
    {
        color:              var(--lightAccent);
    }
    :root
    {
        --scripIconBlurType: url(#blurDark);
        --scripIconGlintType: url(#glow);
        --scripIconShadow: #53BDFD;
        --scripIconLight: #bbeefa;
    }
}

/* podcast showcase */

.podcast h3
{
    margin:                 0.5rem 0em;
    color:                  var(--darkText);
}
.podcast h5
{
    margin:                 0em;
    font-size:              0.75em;
    text-transform:         uppercase;
    opacity:                0.75;
}
.podcast h5 a
{
    color:                  var(--softDark);
}
ul.flexiGrid.showcase
{
    row-gap:                4em;
}

.wide-column ul.flexiGrid.showcase
{
    max-width:              1200px;
    margin-left:            auto;
    margin-right:           auto;
}

.showcase .blurb blockquote
{
    min-height: 3em;
}

/* comparison checklists etc */

.comparison-grid
{
    display:                grid;
    grid-template-columns:  1fr 1fr;
    text-align:             center;
    column-gap:             0.5rem;
    margin:                 2em 0em;
}

.comparison-grid h3
{
    margin:                 0.25em 1em;
    color:                  var(--darkText);
}

.comparison-grid h4
{
    grid-column:            1 / 3;
}

.comparison-grid .comparison-grid-left, .comparison-grid .comparison-grid-right
{
    background:             var(--bubble);
    border-radius:          5px;
    padding:                1em 1em;
}

.comparison-grid .comparison-grid-header
{
    position:               sticky;
    top:                    0;
    z-index:                1;
    box-shadow:             0px 7px 10px var(--lightBase);
}

.comparison-grid.ferrite.hokusai .comparison-grid-left h3::before, .comparison-grid.ferrite.hokusai .comparison-grid-right h3::before
{
    content:                " ";
    background-size:        2em 2em;
    background-repeat:      no-repeat;
    background-position:    center;
    width:                  100%;
    height:                 2em;
    display:                block;
    padding-bottom:         0.5em;
}

@media(max-height: 375px)
{
    .comparison-grid.ferrite.hokusai .comparison-grid-left h3::before, .comparison-grid.ferrite.hokusai .comparison-grid-right h3::before
    {
        height: 1em;
        width: 1em;
        background-size: 1em 1em;
        display: inline-block;
        vertical-align: bottom;
        margin-right: 0.25em;
    }
}

.comparison-grid.ferrite.hokusai .comparison-grid-left h3::before
{
    background-image:       url("/i/icon/ferrite.png"); 
}
.comparison-grid.ferrite.hokusai .comparison-grid-right h3::before
{
    background-image:       url("/i/icon/hokusai.png");
}

.comparison-grid .comparison-grid-left:first-child:before
{
    content:    " ";
    display:    block;
    background: var(--lightBase);
    width:      0.5rem;
    height:     100%;
    position:   absolute;
    left:       calc(100%);
    top:        0;
    z-index:    -1;
}

.comparison-grid svg
{
    margin-bottom: -8px;
}

.comparison-grid small, .comparison-grid aside
{
    opacity: 0.6;
}
.comparison-grid > p
{
    grid-column:            1 / 3;
}

.comparison-grid > hr
{
    grid-column:            1 / 3;
    margin:                 0;
    background-color:       #00000000;
    height:                 0.5rem;
}

/* Q & A */

.q-and-a
{
    width:                  100%;
    display:                flow-root;
}

.q-and-a h3
{
    font-family:            var(--bodyFont);
    font-size:              0.9rem;
    background:             var(--blueBubble); /* or darkAccent? */
    padding:                0.5em 0.75em;
    color:                  white;
    font-weight:            normal;
    border-radius:          1.25em;
    display:                inline-block;
    float:                  right;
    clear:                  left;
    max-width:              80%;
    margin-bottom:          0;
    opacity:                1;
    filter:                 drop-shadow(var(--bubbleShadow));
    text-shadow:            0px 1px 0.5px rgba(0,0,0, 0.25);
}
.q-and-a h3 var
{
    background:             #ffffff60;
}

.q-and-a p
{
    margin-top:             0;
    margin-bottom:          0;
    font-family:            var(--bodyFont);
    font-size:              0.9rem;
    background:             var(--bubble);
    padding:                0.5em 0.75em;
    color:                  var(--darkText);
    font-weight:            normal;
    border-radius:          1.25em;
    display:                inline-block;
    float:                  left;
    clear:                  right;
    max-width:              80%;
    position:               relative;
    opacity:                1;
    filter:                 drop-shadow(var(--bubbleShadow));
}
.q-and-a p + p
{
    margin-top:             1em;
}

.q-and-a .tail
{
    width:                  0px;
    clear:                  both;
    margin:                 0 1em 1em 1em;
    border-left:            7px solid transparent;
    border-right:           7px solid transparent;
    filter:                 drop-shadow(var(--bubbleShadow));
}
.q-and-a h3 + .tail
{
    border-top:             7px solid var(--blueBubble);
    float:                  right;
}
.q-and-a p + .tail
{
    border-top:             7px solid var(--bubble);
    float:                  left;
}

/* info blocks */

.flexiGrid.infoBlocks
{
    margin-top:             3em;
/*  color: var(--darkAccent);*/
}

.infoBlock h3
{
    margin:                 0.1em 0 0 0;
    opacity:                1;
/*  color:                  var(--darkAccent);*/
}
.infoBlock h4
{
    opacity:                0.5;
    margin:                 0;
    font-size:              0.9em;
/*  color:                  var(--darkAccent);*/
}
.infoBlock p
{
    margin-bottom:          0;
}

.feature-glyph
{
    display: grid;
    color: var(--darkAccent);
    border: 2px solid var(--darkAccent);
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    text-align: center;
    align-items: center;
    margin-right: 0.75em;
    position: relative;
/*    top: -0.15em;*/
    margin-bottom: 1em;
}
.dark .feature-glyph
{
    border: 2px solid var(--lightAccent);
}
.wrapper.light.flat.product + .wrapper.light.flat.product
{
    margin-top: -3em; /* hack for in-depth feature page */
}

@media(min-width: 400px)
{
    .feature-glyph
    {
        float: right;
        margin-bottom: 0;
        top: -0.45em;
    }
}